diff --git a/apps/web-giddh/src/app/accounting/accounting.component.html b/apps/web-giddh/src/app/accounting/accounting.component.html
index ff0fab4df5c..ddb76b31fcf 100644
--- a/apps/web-giddh/src/app/accounting/accounting.component.html
+++ b/apps/web-giddh/src/app/accounting/accounting.component.html
@@ -6,6 +6,6 @@
 
 <input type="hidden" [attr.data-gridType]="gridType" id="get-grid-type">
 
-<div class="sidebar-menu col-xs-2 col-sm-2 pd0">
+<div class="sidebar-menu col-xs-2 col-sm-2 p-0">
     <accounting-sidebar></accounting-sidebar>
 </div>
diff --git a/apps/web-giddh/src/app/accounting/accounting.component.css b/apps/web-giddh/src/app/accounting/accounting.component.scss
similarity index 70%
rename from apps/web-giddh/src/app/accounting/accounting.component.css
rename to apps/web-giddh/src/app/accounting/accounting.component.scss
index dc0d54e3ca5..ea85a0849de 100644
--- a/apps/web-giddh/src/app/accounting/accounting.component.css
+++ b/apps/web-giddh/src/app/accounting/accounting.component.scss
@@ -1,8 +1,10 @@
+@import "../../assets/css/color.scss";
+
 :host ::ng-deep .parent-Group {
     padding-left: 0;
 }
 
-:host ::ng-deep .acntAccordion .mainLiAclist .title:before {
+:host ::ng-deep .account-accordion .main-account-list .title:before {
     content: none;
 }
 
@@ -24,21 +26,21 @@
     border: none;
 }
 
-.bg_wrap {
-    background: #f5f5f5;
+.bg-wrap {
+    background: $gray-95;
 }
 
-.entry_table thead th {
+.entry-table thead th {
     font-weight: normal;
     padding: 8px 6px;
 }
 
-.entry_table tbody tr td {
+.entry-table tbody tr td {
     padding: 0;
     border: 0;
 }
 
-.entry_table tbody tr td .form-control {
+.entry-table tbody tr td .form-control {
     background: transparent !important;
     border: 0;
     border-radius: 0 !important;
@@ -47,16 +49,16 @@
     padding: 0 6px !important;
 }
 
-.entry_table tbody tr td .form-control.focus:focus {
-    background: #ccc !important;
+.entry-table tbody tr td .form-control.focus:focus {
+    background: $very-light-gray !important;
 }
 
-.activeRow {
-    background: #e5e5e5;
+.active-row {
+    background: $whisper;
 }
 
-.confirmation_box {
-    background: white;
+.confirmation-box {
+    background: $white;
     display: inline-block;
     padding: 20px;
     width: 230px;
@@ -67,7 +69,7 @@
     margin: 20px 0;
 }
 
-.total_box {
+.total-box {
     padding: 15px 0;
     border-top: 1px solid;
     border-bottom: 1px solid;
@@ -76,24 +78,24 @@
     font-size: 14px;
 }
 
-.total_box > span {
+.total-box > span {
     margin: 0 8px;
     display: inline-block;
     min-width: 120px;
 }
 
 .appearance-none {
-    background: #e5e5e5 !important;
+    background: $whisper !important;
     border: 0 !important;
     font-size: 16px;
-    color: #333333;
+    color: $night-rider;
 }
 
-.account_listbar {
+.account-listbar {
     overflow-y: hidden;
     height: 100vh;
     width: 250px;
-    background: white;
+    background: $white;
     position: absolute;
     left: -250px;
     z-index: 0;
@@ -101,32 +103,32 @@
 
 .sidebar-menu {
     min-height: 100vh;
-    background: #262626;
-    color: white;
+    background: $nero;
+    color: $white;
     float: right;
     /* width: 250px; */
     position: relative;
 }
 
-.menu_list {
+.menu-list {
     padding: 15px 0;
 }
 
-.menu_list li {
+.menu-list li {
     list-style: none;
 }
 
-.menu_list li a {
-    color: #fff;
+.menu-list li a {
+    color: $white;
     padding: 4px 12px;
     display: block;
 }
 
-.menu_list li a.isHidden {
-    color: #4d4d4d;
+.menu-list li a.isHidden {
+    color: $matterhorn;
 }
 
-.sidebar_list {
+.sidebar-list {
     width: 300px;
     position: absolute;
     right: 0;
@@ -135,11 +137,11 @@
     padding: 0 !important;
     border: 0;
     z-index: 0;
-    border-left: 1px solid #d6d6d6;
+    border-left: 1px solid $gainsboro;
 }
 
-.sidebar_list h3 {
-    background: #fff;
+.sidebar-list h3 {
+    background: $white;
 }
 /*
 .label.isActive {
@@ -153,7 +155,7 @@ input[name="entryDate"] {
     background: transparent !important;
     border: 0;
     padding: 0 !important;
-    color: #333;
+    color: $night-rider;
     height: auto;
     width: 100px;
     font-size: 16px;
@@ -166,7 +168,7 @@ textarea[name="narration"] {
 
 input[name="entryDate"]:focus,
 textarea[name="narration"]:focus {
-    background: #e5e5e5 !important;
+    background: $whisper !important;
 }
 
 :host ::ng-deep .menu {
@@ -180,3 +182,7 @@ textarea[name="narration"]:focus {
 :host ::ng-deep .menu {
     border-left: 0 !important;
 }
+
+.modal-voucher{
+    width: 298px !important;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/accounting/accounting.component.ts b/apps/web-giddh/src/app/accounting/accounting.component.ts
index 1e6e4130352..99f4da90cbc 100644
--- a/apps/web-giddh/src/app/accounting/accounting.component.ts
+++ b/apps/web-giddh/src/app/accounting/accounting.component.ts
@@ -82,7 +82,7 @@ export const PAGES_WITH_CHILD = ['Purchase', 'Sales', 'Credit note', 'Debit note
 
 @Component({
     templateUrl: './accounting.component.html',
-    styleUrls: ['./accounting.component.css']
+    styleUrls: ['./accounting.component.scss']
 })
 
 export class AccountingComponent implements OnInit, OnDestroy {
diff --git a/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.html b/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.html
index ceb32245c5f..9746d0420f5 100644
--- a/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.html
+++ b/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.html
@@ -1,4 +1,4 @@
-<ul class="menu_list">
+<ul class="menu-list">
     <li><a class="cp" (click)="setSelectedPage('Contra', 'voucher', 'purchases')"
             [ngClass]="{ 'active-parent': selectedVoucher === 'Contra'}">F4: Contra</a></li>
 
diff --git a/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.scss b/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.scss
index 9378cf3dc62..7c6cd3bac71 100644
--- a/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.scss
+++ b/apps/web-giddh/src/app/accounting/accouting-sidebar/accounting-sidebar.component.scss
@@ -1,6 +1,6 @@
 @import '../../../assets/css/color.scss';
 
-.account_listbar {
+.account-listbar {
     overflow-y: hidden;
     height: 100vh;
     width: 250px;
@@ -25,26 +25,26 @@
     position: relative;
 }
 
-.menu_list {
+.menu-list {
     padding: 0;
 }
 
-.menu_list li {
+.menu-list li {
     list-style: none;
 }
 
-.menu_list li a {
+.menu-list li a {
     color: $white;
     padding: 7px 12px;
     display: block;
     font-size: 14px;
 }
 
-.menu_list li a:hover {
+.menu-list li a:hover {
     background: $night-rider;
 }
 
-.menu_list li a.isHidden {
+.menu-list li a.isHidden {
     color: $matterhorn;
 }
 
diff --git a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.html b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.html
index 586484cb3e9..8b04fa24b73 100644
--- a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.html
+++ b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.html
@@ -1,14 +1,13 @@
 <div class="col-xs-10">
-    <div class="col-xs-12 col-sm-12 bg_wrap">
+    <div class="col-xs-12 col-sm-12 bg-wrap">
         <div class="row">
-            <div class="clearfix pdT2">
+            <div class="clearfix pd-t2">
 
                 <div class="d-flex">
                     <span class="btn label isActive">{{data.voucherType}}</span>
 
                     <input type="text" [(ngModel)]="data.invoiceNumberAgainstVoucher" [disabled]="!isCustomInvoice"
-                        name="invoiceNumberAgainstVoucher" placeholder="Invoice No" class="text-center appearance_none"
-                        style="width: 128px" />
+                        name="invoiceNumberAgainstVoucher" placeholder="Invoice No" class="text-center appearance-none invoice-width" />
                 </div>
 
                 <div class="pull-right text-right mr-b1">
@@ -20,18 +19,17 @@
             </div>
 
             <!-- invoice num -->
-            <div class="clearfix form-inline mrB">
+            <div class="clearfix form-inline mr-b05">
                 <div class="mx-350 form-group" [hidden]="isSalesInvoiceSelected">
                     <!-- decimalDigitsDirective -->
                     <label>{{ invoiceNoHeading }}:</label> <input type="text" placeholder="Invoice no."
-                        [(ngModel)]="data.invoiceNumberAgainstVoucher" class="form-control max-height28 appearance_none"
-                        style="max-width:200px" [disabled]="isSalesInvoiceSelected" />
+                        [(ngModel)]="data.invoiceNumberAgainstVoucher" class="form-control max-height28 appearance-none invoice-no-width" [disabled]="isSalesInvoiceSelected" />
                 </div>
 
                 <!-- key not available in request
     <div class="mx-300 form-group" (clickOutside)="showInvoiceDate=false;">
     <span>Date: </span>
-    <input type="text" [ngModel]="moment(entryDate).format(giddhDateFormat)" decimalDigitsDirective readonly (focus)="showInvoiceDate = true;" class="form-control appearance_none max-height28" />
+    <input type="text" [ngModel]="moment(entryDate).format(giddhDateFormat)" decimalDigitsDirective readonly (focus)="showInvoiceDate = true;" class="form-control appearance-none max-height28" />
     <div *ngIf="showInvoiceDate" style="position: absolute; z-index:10; min-height:290px;">
         <datepicker [(ngModel)]="entryDate" (selectionDone)="setInvoiceDate($event)" [showWeeks]="false"></datepicker>
     </div>
@@ -41,24 +39,23 @@
 
 
             <!-- party acc name -->
-            <div class="mx-350 clearfix form-inline mrB">
+            <div class="mx-350 clearfix form-inline mr-b05">
                 <div class="form-group">
                     <label>Party A/c Name: <sup>*</sup></label>
                     <!-- #creditor -->
                     <input #partyAccNameInputField name="party_name" type="text" placeholder="Party account"
-                        class="form-control max-height28 appearance_none upper-fields"
+                        class="form-control max-height28 appearance-none upper-fields invoice-no-width"
                         (input)="onPartyAccFocusInput($event);selectedField='account';focusedField = 'partyAcc';"
                         (keyup)="searchAccount($event?.target?.value)" (keydown)="detectKey($event)"
                         [(ngModel)]="creditorAcc.name"
                         (focus)="onPartyAccFocus($event);selectedField='account';focusedField = 'partyAcc';"
-                        (blur)="onPartyAccBlur();selectedField=null;focusedField = null;filterByText = ''"
-                        style="max-width:200px;" />
+                        (blur)="onPartyAccBlur();selectedField=null;focusedField = null;filterByText = ''" />
                 </div>
                 <!-- [hidden]="!isPurchaseInvoiceSelected" -->
-                <div class="form-group" style="margin-top: 5px;" *ngIf="isPurchaseInvoiceSelected">
+                <div class="form-group" class="mr-t05" *ngIf="isPurchaseInvoiceSelected">
                     <label>Ledger name:<sup>*</sup></label>
                     <input name="ledger_name" type="text" placeholder="Ledger name"
-                        class="form-control max-height28 appearance_none upper-fields" style="max-width:200px"
+                        class="form-control max-height28 appearance-none upper-fields invoice-no-width"
                         (input)="onPartyAccFocusInput($event, 'purchases');selectedField='account';focusedField = 'ledgerName';"
                         (keyup)="searchAccount($event?.target?.value)" (keydown)="detectKey($event)"
                         [(ngModel)]="debtorAcc.name"
@@ -70,10 +67,10 @@
 
             <!-- operating cost acc only -->
             <!-- No need for purchase ledger, as discussed with alok
-    <div class="mx-300 clearfix form-inline mrB">
+    <div class="mx-300 clearfix form-inline mr-b05">
     <div class="form-group">
         <label>Purchase Ledger:<sup>*</sup></label> <input type="text" #debtor placeholder="Purchase account" (focus)="accountType = 'debitor'" [(ngModel)]="debtorAcc.name" (focus)="getFlattenGrpAccounts('purchases', true)" (blur)="showAccountList=false;selectedInput=debtor"
-            class="form-control max-height28 appearance_none" style="max-width:200px" />
+            class="form-control max-height28 appearance-none" style="max-width:200px" />
     </div>
 </div> -->
             <!-- /operating cost acc only -->
@@ -81,11 +78,11 @@
 
             <!--  purchase as INVOICE -->
             <div class="clearfix mr-t1" [style.min-height.vh]="61">
-                <div class="table-responsive bdrT">
-                    <table class="table entry_table">
+                <div class="table-responsive bd-rt">
+                    <table class="table entry-table">
                         <thead>
                             <tr>
-                                <th style="width:70%;">Name of Item</th>
+                                <th width="70%">Name of Item</th>
                                 <th class="text-right">Quantity</th>
                                 <th class="text-right">Rate</th>
                                 <th class="text-left">Per</th>
@@ -98,7 +95,7 @@
                             <ng-container *ngFor="let transaction of stocksTransaction;let i=index;let l=last">
                                 <ng-container>
                                     <tr
-                                        [ngClass]="{'activeRow': (isSelectedRow && selectedRowIdx === i) || (!selectedRowIdx && !isSelectedRow && i == 0)}">
+                                        [ngClass]="{'active-row': (isSelectedRow && selectedRowIdx === i) || (!selectedRowIdx && !isSelectedRow && i == 0)}">
                                         <!-- (blur)="onStockItemBlur($event, qty);" showStockList.next(false)" -->
                                         <td><input onReturn id="first_element_{{i}}_{{i}}" type="text"
                                                 class="form-control select-stock-in-invoice"
@@ -151,14 +148,14 @@
                                 <td class>
                                     <input type="text" [value]="stockTotal" readonly disabled
                                         class="form-control text-right" />
-                                    <div class="bdrB"></div>
+                                    <div class="bd-rb"></div>
                                 </td>
                             </tr>
                             <br />
                             <!-- accounts entry -->
                             <!--  -->
                             <ng-container *ngFor="let transaction of accountsTransaction;let i=index;let l=last">
-                                <tr [ngClass]="{'activeRow': isSelectedRow && selectedAccIdx === i}">
+                                <tr [ngClass]="{'active-row': isSelectedRow && selectedAccIdx === i}">
                                     <td colspan="2"><input data-accountlistid="i" onReturn type="text"
                                             class="form-control invoice-account-field" #particular
                                             [(ngModel)]="transaction.selectedAccount.account"
@@ -198,17 +195,17 @@
                 <div class="col-xs-4">
                     <div class="form-group">
                         <label>Narration:</label>
-                        <textarea #narrationBox onReturn id="invoice-narration" class="form-control appearance_none"
+                        <textarea #narrationBox onReturn id="invoice-narration" class="form-control appearance-none"
                             name="narration" (keyup.enter)="openConfirmBox(submitButton)"
                             (keydown.tab)="openConfirmBox(submitButton)" [(ngModel)]="data.description" resize="false"
                             rows="6"></textarea>
                     </div>
                 </div>
 
-                <div [hidden]="!showConfirmationBox" class="confirmation_box bdr text-center pd2">
+                <div [hidden]="!showConfirmationBox" class="confirmation-box bdr text-center pd-2">
                     <div class="">
                         <h1>Accept?</h1>
-                        <div class="pdT2">
+                        <div class="pd-t2">
                             <button class="btn btn-primary" #submitButton (keyup)="keyUpOnSubmitButton($event)"
                                 (click)="saveEntry();">Yes
                             </button>
@@ -219,16 +216,16 @@ <h1>Accept?</h1>
                         </div>
                     </div>
                 </div>
-                <div class="total_box text-right pull-right">
+                <div class="total-box text-right pull-right">
                     <span><strong>{{ stockTotal + accountsTotal | number: '1.2-2' }}</strong></span>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="sidebar_list form-control" [hidden]="!showLedgerAccountList">
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
+    <div class="sidebar-list form-control" [hidden]="!showLedgerAccountList">
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
         <!-- (noToggleClick)="toggleSelected($event)" (noResultClicked)="noResultsClicked.emit(); hide()" [noResultLinkEnabled]="notFoundLink" [notFoundMsg]="notFoundMsg" [notFoundLinkText]="notFoundLinkText" [ItemHeight]="ItemHeight" [NoFoundMsgHeight]="NoFoundMsgHeight" [NoFoundLinkHeight]="NoFoundLinkHeight" [dropdownMinHeight]="dropdownMinHeight"-->
         <accounting-virtual-list [keydownUpInput]="keyUpDownEvent" [filterText]="filterByText" [options]="inputForList"
             [showList]="showLedgerAccountList" [isFilterEnabled]="true" (selected)="onItemSelected($event)"
@@ -240,7 +237,7 @@ <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stoc
 
 <!--quick account popup -->
 <div bsModal #quickAccountModal="bs-modal" [config]="{ backdrop: false }" class="modal" role="dialog">
-    <div class="modal-dialog modal-sm" style="width: 298px">
+    <div class="modal-dialog modal-sm">
         <div class="modal-content">
             <div element-view-container-ref #quickAccountComponent="elementviewcontainerref"></div>
         </div>
diff --git a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.css b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.scss
similarity index 54%
rename from apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.css
rename to apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.scss
index 2e4e23d5e53..e54794dc24f 100644
--- a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.css
+++ b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.scss
@@ -1,3 +1,5 @@
+@import '../../../assets/css/color.scss';
+
 .mx-300 {
     max-width: 300px;
 }
@@ -6,12 +8,12 @@
     max-width: 350px;
 }
 
-.appearance_none:focus {
-    background: #ccc !important;
+.appearance-none:focus {
+    background: $very-light-gray !important;
 }
 
-.appearance_none {
-    background: #e5e5e5 !important;
+.appearance-none {
+    background: $whisper !important;
 }
 
 .max-height28 {
@@ -37,3 +39,15 @@
 .mx-350 label {
     width: 160px;
 }
+
+.invoice-width{
+    width: 128px !important;
+}
+
+.invoice-no-width{
+    max-width:200px !important;
+}
+
+.modal-dialog{
+    width: 298px !important;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.ts b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.ts
index 515364ed211..5549ec12917 100644
--- a/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.ts
+++ b/apps/web-giddh/src/app/accounting/invoice-grid/invoice-grid.component.ts
@@ -38,7 +38,7 @@ const CustomShortcode = [
 @Component({
 	selector: 'invoice-grid',
 	templateUrl: './invoice-grid.component.html',
-	styleUrls: ['./invoice-grid.component.css', '../accounting.component.css'],
+	styleUrls: ['./invoice-grid.component.scss', '../accounting.component.scss'],
 	animations: [
 		trigger('slideInOut', [
 			state('in', style({
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.html b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.html
index cf201fd8447..d8d15ee858e 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.html
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.html
@@ -1,13 +1,12 @@
 <div class="col-xs-10">
-    <div class="col-xs-12 col-sm-12 bg_wrap">
+    <div class="col-xs-12 col-sm-12 bg-wrap">
         <div class="row">
-            <div class="clearfix pdT2">
+            <div class="clearfix pd-t2">
 
                 <div class="d-flex">
                     <span class="btn label isActive">{{data.voucherType}}</span>
                     <input type="text" [(ngModel)]="data.invoiceNumberAgainstVoucher" [disabled]="!isCustomInvoice"
-                        name="invoiceNumberAgainstVoucher" placeholder="Invoice No" class="text-center appearance-none"
-                        style="width: 128px" />
+                        name="invoiceNumberAgainstVoucher" placeholder="Invoice No" class="text-center appearance-none invoice-width" />
                 </div>
 
                 <div class="pull-right text-right mr-b1">
@@ -18,36 +17,34 @@
             </div>
 
             <!-- invoice num -->
-            <div class="clearfix form-inline mrB">
+            <div class="clearfix form-inline mr-b05">
                 <div class="mx-350 form-group" [hidden]="isSalesInvoiceSelected">
                     <!-- decimalDigitsDirective -->
                     <label>{{ invoiceNoHeading }}:</label> <input type="text" placeholder="Invoice no."
-                        [(ngModel)]="data.invoiceNumberAgainstVoucher" class="form-control max-height28 appearance-none"
-                        style="max-width:200px" [disabled]="isSalesInvoiceSelected" />
+                        [(ngModel)]="data.invoiceNumberAgainstVoucher" class="form-control max-height28 appearance-none invoice-no-width" [disabled]="isSalesInvoiceSelected" />
                 </div>
             </div>
             <!-- /invoice num -->
 
 
             <!-- party acc name -->
-            <div class="mx-350 clearfix form-inline mrB">
+            <div class="mx-350 clearfix form-inline mr-b05">
                 <div class="form-group">
                     <label>Party A/c Name: <sup>*</sup></label>
                     <!-- #creditor -->
                     <input #partyAccNameInputField name="party_name" type="text" placeholder="Party account"
-                        class="form-control max-height28 appearance-none upper-fields"
+                        class="form-control max-height28 appearance-none upper-fields invoice-no-width"
                         (input)="onPartyAccFocusInput($event);selectedField='account';focusedField = 'partyAcc';"
                         (keyup)="searchAccount($event?.target?.value)" (keydown)="detectKey($event)"
                         [(ngModel)]="creditorAcc.name"
                         (focus)="onPartyAccFocus($event);selectedField='account';focusedField = 'partyAcc';"
-                        (blur)="onPartyAccBlur();selectedField=null;focusedField = null;filterByText = ''"
-                        style="max-width:200px;" />
+                        (blur)="onPartyAccBlur();selectedField=null;focusedField = null;filterByText = ''" />
                 </div>
                 <!-- [hidden]="!isPurchaseInvoiceSelected" -->
-                <div class="form-group" style="margin-top: 5px;" *ngIf="isPurchaseInvoiceSelected">
+                <div class="form-group" class="mr-t05" *ngIf="isPurchaseInvoiceSelected">
                     <label>Ledger name:<sup>*</sup></label>
                     <input name="ledger_name" type="text" placeholder="Ledger name"
-                        class="form-control max-height28 appearance-none upper-fields" style="max-width:200px"
+                        class="form-control max-height28 appearance-none upper-fields invoice-no-width"
                         (input)="onPartyAccFocusInput($event, 'purchases');selectedField='account';focusedField = 'ledgerName';"
                         (keyup)="searchAccount($event?.target?.value)" (keydown)="detectKey($event)"
                         [(ngModel)]="debtorAcc.name"
@@ -59,11 +56,11 @@
 
             <!--  purchase as INVOICE -->
             <div class="clearfix mr-t1" [style.min-height.vh]="61">
-                <div class="table-responsive bdrT">
-                    <table class="table entry_table">
+                <div class="table-responsive bd-rt">
+                    <table class="table entry-table">
                         <thead>
                             <tr>
-                                <th style="width:70%;">Name of Item</th>
+                                <th width="70%">Name of Item</th>
                                 <th class="text-right">Quantity</th>
                                 <th class="text-right">Rate</th>
                                 <th class="text-left">Per</th>
@@ -76,7 +73,7 @@
                             <ng-container *ngFor="let transaction of stocksTransaction;let i=index;let l=last">
                                 <ng-container>
                                     <tr
-                                        [ngClass]="{'activeRow': (isSelectedRow && selectedRowIdx === i) || (!selectedRowIdx && !isSelectedRow && i == 0)}">
+                                        [ngClass]="{'active-row': (isSelectedRow && selectedRowIdx === i) || (!selectedRowIdx && !isSelectedRow && i == 0)}">
                                         <!-- (blur)="onStockItemBlur($event, qty);" showStockList.next(false)" -->
                                         <td><input onReturn id="first_element_{{i}}_{{i}}" type="text"
                                                 class="form-control select-stock-in-invoice"
@@ -129,14 +126,14 @@
                                 <td class>
                                     <input type="text" [value]="stockTotal" readonly disabled
                                         class="form-control text-right" />
-                                    <div class="bdrB"></div>
+                                    <div class="bd-rb"></div>
                                 </td>
                             </tr>
                             <br />
                             <!-- accounts entry -->
                             <!--  -->
                             <ng-container *ngFor="let transaction of accountsTransaction;let i=index;let l=last">
-                                <tr [ngClass]="{'activeRow': isSelectedRow && selectedAccIdx === i}">
+                                <tr [ngClass]="{'active-row': isSelectedRow && selectedAccIdx === i}">
                                     <td colspan="2"><input data-accountlistid="i" onReturn type="text"
                                             class="form-control invoice-account-field" #particular
                                             [(ngModel)]="transaction.selectedAccount.account"
@@ -183,10 +180,10 @@
                     </div>
                 </div>
 
-                <div [hidden]="!showConfirmationBox" class="confirmation_box bdr text-center pd2">
+                <div [hidden]="!showConfirmationBox" class="confirmation-box bdr text-center pd-2">
                     <div class="">
                         <h1>Accept?</h1>
-                        <div class="pdT2">
+                        <div class="pd-t2">
                             <button class="btn btn-primary" #submitButton (keyup)="keyUpOnSubmitButton($event)"
                                 (click)="saveEntry();">Yes
                             </button>
@@ -197,16 +194,16 @@ <h1>Accept?</h1>
                         </div>
                     </div>
                 </div>
-                <div class="total_box text-right pull-right">
+                <div class="total-box text-right pull-right">
                     <span><strong>{{ stockTotal + accountsTotal | number: '1.2-2' }}</strong></span>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="sidebar_list form-control" [hidden]="!showLedgerAccountList">
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
+    <div class="sidebar-list form-control" [hidden]="!showLedgerAccountList">
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
         <!-- (noToggleClick)="toggleSelected($event)" (noResultClicked)="noResultsClicked.emit(); hide()" [noResultLinkEnabled]="notFoundLink" [notFoundMsg]="notFoundMsg" [notFoundLinkText]="notFoundLinkText" [ItemHeight]="ItemHeight" [NoFoundMsgHeight]="NoFoundMsgHeight" [NoFoundLinkHeight]="NoFoundLinkHeight" [dropdownMinHeight]="dropdownMinHeight"-->
         <accounting-virtual-list [keydownUpInput]="keyUpDownEvent" [filterText]="filterByText" [options]="inputForList"
             [showList]="showLedgerAccountList" [isFilterEnabled]="true" (selected)="onItemSelected($event)"
@@ -218,7 +215,7 @@ <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stoc
 
 <!--quick account popup -->
 <div bsModal #quickAccountModal="bs-modal" [config]="{ backdrop: false }" class="modal" role="dialog">
-    <div class="modal-dialog modal-sm" style="width: 298px">
+    <div class="modal-dialog modal-sm">
         <div class="modal-content">
             <div element-view-container-ref #quickAccountComponent="elementviewcontainerref"></div>
         </div>
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.scss b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.scss
index 80d50616374..58a95005ccc 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.scss
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.scss
@@ -37,3 +37,15 @@
 .mx-350 label {
     width: 160px;
 }
+
+.invoice-width{
+    width: 128px !important;
+}
+
+.invoice-no-width{
+    max-width:200px !important;
+}
+
+.modal-dialog{
+    width: 298px !important;
+}
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.ts b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.ts
index eab54a85759..f252515ddaa 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.ts
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/invoice/invoice.component.ts
@@ -54,7 +54,7 @@ const CustomShortcode = [
 @Component({
 	selector: 'account-as-invoice',
 	templateUrl: './invoice.component.html',
-	styleUrls: ['./invoice.component.scss', '../../accounting.component.css'],
+	styleUrls: ['./invoice.component.scss', '../../accounting.component.scss'],
 	animations: [
 		trigger('slideInOut', [
 			state('in', style({
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.html b/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.html
index 337fd579985..551608f00d1 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.html
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.html
@@ -8,7 +8,7 @@
 
     <input type="hidden" [attr.data-gridType]="gridType" id="get-grid-type">
 
-    <div class="sidebar-menu col-md-12 col-lg-2 pd0">
+    <div class="sidebar-menu col-md-12 col-lg-2 p-0">
         <accounting-sidebar></accounting-sidebar>
     </div>
 </div>
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.scss b/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.scss
index 38e44b2be49..12f27066b3a 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.scss
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/journal-voucher.component.scss
@@ -3,7 +3,7 @@
     padding-left: 0;
 }
 
-:host ::ng-deep .acntAccordion .mainLiAclist .title:before {
+:host ::ng-deep .account-accordion .main-account-list .title:before {
     content: none;
 }
 
@@ -25,21 +25,21 @@
     border: none;
 }
 
-.bg_wrap {
-    background: #f5f5f5;
+.bg-wrap {
+    background: $gray-95;
 }
 
-.entry_table thead th {
+.entry-table thead th {
     font-weight: normal;
     padding: 8px 6px;
 }
 
-.entry_table tbody tr td {
+.entry-table tbody tr td {
     padding: 0;
     border: 0;
 }
 
-.entry_table tbody tr td .form-control {
+.entry-table tbody tr td .form-control {
     background: transparent !important;
     border: 0;
     border-radius: 0 !important;
@@ -48,16 +48,16 @@
     padding: 0 6px !important;
 }
 
-.entry_table tbody tr td .form-control.focus:focus {
-    background: #ccc !important;
+.entry-table tbody tr td .form-control.focus:focus {
+    background: $very-light-gray !important;
 }
 
-.activeRow {
-    background: #e5e5e5;
+.active-row {
+    background: $whisper;
 }
 
-.confirmation_box {
-    background: white;
+.confirmation-box {
+    background: $white;
     display: inline-block;
     padding: 20px;
     width: 230px;
@@ -68,7 +68,7 @@
     margin: 20px 0;
 }
 
-.total_box {
+.total-box {
     padding: 15px 0;
     border-top: 1px solid;
     border-bottom: 1px solid;
@@ -77,24 +77,24 @@
     font-size: 14px;
 }
 
-.total_box > span {
+.total-box > span {
     margin: 0 8px;
     display: inline-block;
     min-width: 120px;
 }
 
 .appearance-none {
-    background: #e5e5e5 !important;
+    background: $whisper !important;
     border: 0 !important;
     font-size: 16px;
-    color: #333333;
+    color: $night-rider;
 }
 
-.account_listbar {
+.account-listbar {
     overflow-y: hidden;
     height: 100vh;
     width: 250px;
-    background: white;
+    background: $white;
     position: absolute;
     left: -250px;
     z-index: 0;
@@ -103,31 +103,31 @@
 .sidebar-menu {
     min-height: 100vh;
     background: $nero;
-    color: white;
+    color: $white;
     float: right;
     /* width: 250px; */
     position: relative;
 }
 
-.menu_list {
+.menu-list {
     padding: 15px 0;
 }
 
-.menu_list li {
+.menu-list li {
     list-style: none;
 }
 
-.menu_list li a {
-    color: #fff;
+.menu-list li a {
+    color: $white;
     padding: 4px 12px;
     display: block;
 }
 
-.menu_list li a.isHidden {
-    color: #4d4d4d;
+.menu-list li a.isHidden {
+    color: $matterhorn;
 }
 
-.sidebar_list {
+.sidebar-list {
     width: 300px;
     position: absolute;
     right: 0;
@@ -136,11 +136,11 @@
     padding: 0 !important;
     border: 0;
     z-index: 0;
-    border-left: 1px solid #d6d6d6;
+    border-left: 1px solid $gainsboro;
 }
 
-.sidebar_list h3 {
-    background: #fff;
+.sidebar-list h3 {
+    background: $white;
 }
 /*
 .label.isActive {
@@ -154,7 +154,7 @@ input[name="entryDate"] {
     background: transparent !important;
     border: 0;
     padding: 0 !important;
-    color: #333;
+    color: $night-rider;
     height: auto;
     width: 100px;
     font-size: 16px;
@@ -167,7 +167,7 @@ textarea[name="narration"] {
 
 input[name="entryDate"]:focus,
 textarea[name="narration"]:focus {
-    background: #e5e5e5 !important;
+    background: $whisper !important;
 }
 
 :host ::ng-deep .menu {
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.html b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.html
index fa3a52963a6..5d76d99044b 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.html
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.html
@@ -7,7 +7,7 @@ <h4 class="modal-title pull-left">Receipt Entry</h4>
 <div class="modal-body">
     <div class="receipt-entry-content">
         <div class="receipt-entry-top-detail">
-            <h5 class="mb-05">Bill wise Details for: {{transaction?.selectedAccount?.name}}</h5>
+            <h5 class="mr-b05">Bill wise Details for: {{transaction?.selectedAccount?.name}}</h5>
             <p>Upto: {{transaction?.amount | giddhCurrency}} Cr</p>
         </div>
         <div class="receipt-entry-form">
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.scss b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.scss
index 5ec921a99be..79581187092 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.scss
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/receipt-entry-modal/receipt-entry-modal.component.scss
@@ -38,7 +38,7 @@
             margin-bottom: 15px;
             .receipt-type, .select-tax, .about-invoice-detail{
                 min-width: 180px;
-                div.pos-rel{
+                div.position-relative{
                     width: 100% !important;
                 }
             }
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.html b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.html
index 04559177ecc..c711b041f8a 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.html
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.html
@@ -1,6 +1,6 @@
 <div>
-    <div class="bg_wrap">
-            <div class="clearfix pdT2">
+    <div class="bg-wrap">
+            <div class="clearfix pd-t2">
                 <div class="day-date pull-right text-right mr-b1" (clickOutside)="showFromDatePicker = false;">
                     <span>{{ displayDay }},</span>
                     <input size="10" type="text" onReturn #dateField name="entryDate" [(ngModel)]="journalDate"
@@ -10,8 +10,8 @@
                 </div>
             </div>
             <div class="clearfix" [style.min-height.vh]="61">
-                <div class="bdrT">
-                    <table class="table entry_table">
+                <div class="bd-rt">
+                    <table class="table entry-table">
                         <thead>
                             <tr>
                                 <th> &nbsp;</th>
@@ -23,9 +23,9 @@
                         <br />
                         <tbody (clickOutside)="hideListItems()">
                             <tr *ngFor="let transaction of requestObj.transactions;let i=index;let l=last"
-                                [ngClass]="{'activeRow': (isSelectedRow && selectedIdx === i) || (!selectedIdx && !isSelectedRow && i == 0)}">
+                                [ngClass]="{'active-row': (isSelectedRow && selectedIdx === i) || (!selectedIdx && !isSelectedRow && i == 0)}">
                                 <td [style.width.px]="40">
-                                    <input onReturn type="text" class="form-control txtCpc byTo"
+                                    <input onReturn type="text" class="form-control text-capitalize byTo"
                                         [disabled]="(i === 0 && !isFirstRowDeleted) || (requestObj.voucherType === 'Receipt')"
                                         [ngModel]="transaction.type"
                                         (ngModelChange)="selectEntryType(transaction, $event, i)"
@@ -45,13 +45,13 @@
                                         (keydown.Tab)="validateAccount(transaction, $event, i)"
                                         (keydown.arrowDown)="openCreateAccountPopupIfRequired($event)">
                                     <span *ngIf="transaction.selectedAccount.account && transaction.currentBalance !== ''"
-                                        class="current-balance d-block mb-05">
+                                        class="current-balance d-block mr-b05">
                                         Current Balance: {{transaction.currentBalance | giddhCurrency}}
                                         {{transaction.selectedAccount.type === 'DEBIT' ? 'Dr.' : 'Cr.'}}
                                     </span>
                                     <div
                                         *ngIf="transaction.type === 'to' && transaction.voucherAdjustments && transaction.voucherAdjustments.length > 0">
-                                        <div class="debtor-details-form pb-1 pt-05"
+                                        <div class="debtor-details-form pb-1 pd-t05"
                                             *ngFor="let entry of receiptEntries; let i = index;">
                                             <div class="form-fields">
                                                 <div class="single-field relative">
@@ -106,7 +106,7 @@
                                         <tbody>
                                             <ng-container *ngIf="transaction.inventory && transaction.inventory.length">
                                                 <tr *ngFor="let inventory of transaction.inventory;let idx=index;let l=last"
-                                                    [ngClass]="{'activeRow': isSelectedRow && selectedStockIdx === idx && selectedIdx === i}">
+                                                    [ngClass]="{'active-row': isSelectedRow && selectedStockIdx === idx && selectedIdx === i}">
                                                     <td [style.width.px]="250"><input onReturn
                                                             (keydown)="detectKey($event)"
                                                             (keydown.Tab)="addNewEntry(transaction.amount,transaction, i)"
@@ -202,10 +202,10 @@
                 </div>
 
                 <div class="col-xs-8 col-sm-8">
-                    <div [hidden]="!showConfirmationBox" class="confirmation_box bdr text-center pd2">
+                    <div [hidden]="!showConfirmationBox" class="confirmation-box bdr text-center pd-2">
                         <div class="">
                             <h1>Accept?</h1>
-                            <div class="pdT2">
+                            <div class="pd-t2">
                                 <button [hidden]="isCompany" class="btn btn-primary" #submitButton (keyup)="keyUpOnSubmitButton($event)"
                                     (click)="saveEntry();">Yes</button>
                                 <button class="btn btn-default" #resetButton
@@ -216,16 +216,16 @@ <h1>Accept?</h1>
                             </div>
                         </div>
                     </div>
-                    <div class="total_box text-right pull-right">
+                    <div class="total-box text-right pull-right">
                         <span><strong>{{totalDebitAmount | giddhCurrency }}</strong></span>
                         <span><strong>{{totalCreditAmount | giddhCurrency }}</strong></span>
                     </div>
                 </div>
             </div>
     </div>
-    <div class="sidebar_list form-control" [hidden]="!showLedgerAccountList">
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
+    <div class="sidebar-list form-control" [hidden]="!showLedgerAccountList">
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
         <accounting-virtual-list [keydownUpInput]="keyUpDownEvent" [filterText]="filterByText" [options]="inputForList"
             [showList]="showLedgerAccountList" [isFilterEnabled]="true" (selected)="onItemSelected($event)"
             [(ngModel)]="currentSelectedValue" [placeholder]="'Select Option'"
@@ -243,7 +243,7 @@ <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stoc
 
 <!-- Cheque Detail Modal-->
 <div bsModal #chequeEntryModal="bs-modal" [config]="{ backdrop: 'static' }" class="cheque-popup modal" role="dialog">
-    <div class="modal-dialog modal-sm" style="width: 298px">
+    <div class="modal-dialog modal-sm">
         <div class="modal-content">
             <form autocomplete="off" novalidate name="chequeDetailForm" [formGroup]="chequeDetailForm"
                 class="new-account-form">
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.scss b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.scss
index 27f4698b8d4..681af305bbf 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.scss
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.scss
@@ -82,3 +82,7 @@
         }
     }
 }
+
+.modal-dialog{
+    width: 298px !important;
+}
diff --git a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.ts b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.ts
index 5df5da04ec5..5a821b2ccfe 100644
--- a/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.ts
+++ b/apps/web-giddh/src/app/accounting/journal-voucher/voucher/voucher.component.ts
@@ -57,7 +57,7 @@ const CustomShortcode = [
 @Component({
     selector: 'account-as-voucher',
     templateUrl: './voucher.component.html',
-    styleUrls: ['../../accounting.component.css', './voucher.component.scss'],
+    styleUrls: ['../../accounting.component.scss', './voucher.component.scss'],
     animations: [
         trigger('slideInOut', [
             state('in', style({
diff --git a/apps/web-giddh/src/app/accounting/keyboard.directive.ts b/apps/web-giddh/src/app/accounting/keyboard.directive.ts
index 041d9d2e0e0..fed9f7b1fe2 100644
--- a/apps/web-giddh/src/app/accounting/keyboard.directive.ts
+++ b/apps/web-giddh/src/app/accounting/keyboard.directive.ts
@@ -57,7 +57,7 @@ export class OnReturnDirective {
 
                 if (this.selectedField && this.selectedField === allElements[indx] && allElements[indx].value === '') {
                     // detect by or to
-                    const activatedRow: any = window.document.querySelectorAll('tr.activeRow');
+                    const activatedRow: any = window.document.querySelectorAll('tr.active-row');
                     const rowEntryType = activatedRow[0].children[0].children[0].value;
                     if (rowEntryType === 'by') {
                         target = allElements[indx + 4];
@@ -127,7 +127,7 @@ export class OnReturnDirective {
 
                 let target = allElements[indx - 1];
 
-                const activatedRow: any = window.document.querySelectorAll('tr.activeRow');
+                const activatedRow: any = window.document.querySelectorAll('tr.active-row');
                 const rowEntryType = activatedRow[0].children[0].children[0].value;
 
                 if (allElements[indx] && allElements[indx].classList.contains('debit-credit')) {
diff --git a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.html b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.html
index 8463e8fef67..b3f80972522 100644
--- a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.html
+++ b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.html
@@ -1,4 +1,4 @@
-<div class="menu" *ngIf="isOpen && _rows" style="background-color: white">
+<div class="menu white-bg" *ngIf="isOpen && _rows">
     <!--virtual-->
     <virtual-scroll #v [items]="_rows" (update)="viewPortItems = $event"
         [childHeight]="viewPortItems?.length === 0?41:undefined" [selectedValues]="selectedValues"
@@ -15,7 +15,7 @@
             [class.hilighted]="row.isHilighted" (mousedown)="toggleSelected(row)" [style.height.px]="ItemHeight">
             <ng-template [ngTemplateOutletContext]="{option: row}" [ngTemplateOutlet]="optionTemplate"></ng-template>
             <ng-container *ngIf="!optionTemplate">
-                <a href="javascript:void(0)" class="list-item" style="border-bottom: 1px solid #ccc;">
+                <a href="javascript:void(0)" class="list-item">
                     <div class="item">{{row.label}}</div>
                 </a>
             </ng-container>
diff --git a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.scss b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.scss
index 8d8a661aa03..113ea166cf9 100644
--- a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.scss
+++ b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list-menu.component.scss
@@ -44,13 +44,17 @@
 }
 
 .no-result-link > a {
-    color: #10aae0 !important;
+    color: $deep-sky-blue-hover !important;
 }
 
 #noresult:hover {
     background: transparent;
 }
 
+.list-item{
+    border-bottom: 1px solid $gainsboro;
+}
+
 :host ::ng-deep .total-padding {
     height: calc(100vh - 52px) !important;
 }
diff --git a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.html b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.html
index e859eedf1c5..a6b5703e67c 100644
--- a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.html
+++ b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.html
@@ -7,7 +7,7 @@
           <ng-container *ngIf="selectedValues?.length">
               <span class="chip" *ngFor="let sl of selectedValues">
                   {{ sl.label }}
-                  <span class="chipClosebtn" (mousedown)="clearSingleSelection($event, sl)" (click)="clearSingleSelection($event, sl)">&times;</span>
+                  <span class="chip-close-btn" (mousedown)="clearSingleSelection($event, sl)" (click)="clearSingleSelection($event, sl)">&times;</span>
               </span>
           </ng-container>
           <input type="text" style="opacity: 0 !important;position: absolute" class="pd-l1" [ngClass]="{'hasValue':filter?.length}" #inputFilter (click)="show($event);" (blur)="filterInputBlur($event)" [placeholder]="selectedValues?.length > 0 ? filter : placeholder" [(ngModel)]="filter" (ngModelChange)="updateFilter($event)">
@@ -21,7 +21,7 @@
     <!-- <div (click)="show($event);" *ngIf="((!isOpen || !isFilterEnabled) && !multiple)">
           <ng-container *ngIf="selectedValues?.length">
               <div *ngIf="!multiple">
-                  <input type="text" readonly value="{{selectedValues[0].label}}" class="form-control selectedVal cp" />
+                  <input type="text" readonly value="{{selectedValues[0].label}}" class="form-control selected-val cp" />
               </div>
           </ng-container>
           <ng-container *ngIf="!selectedValues?.length">
diff --git a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.css b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.scss
similarity index 86%
rename from apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.css
rename to apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.scss
index 23cce1d9a05..2196521c718 100644
--- a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.css
+++ b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.scss
@@ -73,11 +73,11 @@ i.close.icon.clear::after {
     content: "✕";
     padding-right: 8px;
     font-weight: 800;
-    color: gray;
+    color: $gray;
 }
 
 i.close.icon.clear:hover::after {
-    color: red;
+    color: $red;
 }
 
 .clear {
@@ -91,12 +91,12 @@ i.close.icon.clear:hover::after {
     font-weight: 500;
     line-height: 100%;
     opacity: 0.5;
-    color: black;
+    color: $black;
     transform: translateY(-50%);
 }
 
 .sh-select-disabled {
-    background-color: #e3e3e3;
+    background-color: $whisper;
     color: $bay-of-many;
     cursor: not-allowed;
 }
@@ -108,12 +108,12 @@ i.close.icon.clear:hover::after {
     font-size: 14px;
     line-height: 30px;
     border-radius: 4px;
-    background-color: #f4f5f8;
+    background-color: $solitude;
     margin: 8px 0 5px 8px;
     /* color: white; */
 }
 
-.chipClosebtn {
+.chip-close-btn {
     padding-left: 10px;
     font-weight: 500;
     float: right;
@@ -122,27 +122,27 @@ i.close.icon.clear:hover::after {
     opacity: 0.6;
 }
 
-.chipClosebtn:hover {
+.chip-close-btn:hover {
     font-weight: 700;
     opacity: 0.5;
-    color: black;
+    color: $black;
 }
 
-.sh-select-disabled .selectedVal,
+.sh-select-disabled .selected-val,
 .sh-select-disabled .form-control {
-    background: #eee !important;
+    background: $whisper-light !important;
     pointer-events: none;
     cursor: not-allowed;
 }
 
-.selectedVal {
-    border: 1px solid #d6d6d6 !important;
+.selected-val {
+    border: 1px solid $light-gray !important;
     padding-right: 22px !important;
-    background: #fff !important;
+    background: $white !important;
 }
 
 .header.open > input[type="text"] {
-    border-color: #d6d6d6;
+    border-color: $light-gray;
 }
 
 .header .bdr > input[type="text"] {
diff --git a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.ts b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.ts
index 977febb461e..6c628b07110 100644
--- a/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.ts
+++ b/apps/web-giddh/src/app/accounting/ng-virtual-list/virtual-list.component.ts
@@ -14,7 +14,7 @@ const FLATTEN_SEARCH_TERM = 'flatten';
 @Component({
     selector: 'accounting-virtual-list',
     templateUrl: './virtual-list.component.html',
-    styleUrls: ['./virtual-list.component.css'],
+    styleUrls: ['./virtual-list.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
diff --git a/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.html b/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.html
index 3f61c70a7d5..b15e8d07d81 100644
--- a/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.html
+++ b/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.html
@@ -1,7 +1,7 @@
 <div class="col-xs-10">
-    <div class="col-xs-12 col-sm-12 bg_wrap">
+    <div class="col-xs-12 col-sm-12 bg-wrap">
         <div>
-            <div class="clearfix pdT2">
+            <div class="clearfix pd-t2">
                 <span class="btn label isActive">{{requestObj.voucherType}}</span>
                 <div class="pull-right text-right mr-b1" (clickOutside)="showFromDatePicker = false;">
                     <input type="text" onReturn #dateField name="entryDate"
@@ -11,8 +11,8 @@
                 </div>
             </div>
             <div class="clearfix" [style.min-height.vh]="61">
-                <div class="table-responsive bdrT">
-                    <table class="table entry_table">
+                <div class="table-responsive bd-rt">
+                    <table class="table entry-table">
                         <thead>
                             <tr>
                                 <th> &nbsp;</th>
@@ -24,8 +24,8 @@
                         <br />
                         <tbody (clickOutside)="hideListItems()">
                             <tr *ngFor="let transaction of requestObj.transactions;let i=index;let l=last"
-                                [ngClass]="{'activeRow': (isSelectedRow && selectedIdx === i) || (!selectedIdx && !isSelectedRow && i == 0)}">
-                                <td [style.width.px]="40"><input onReturn type="text" class="form-control txtCpc byTo"
+                                [ngClass]="{'active-row': (isSelectedRow && selectedIdx === i) || (!selectedIdx && !isSelectedRow && i == 0)}">
+                                <td [style.width.px]="40"><input onReturn type="text" class="form-control text-capitalize byTo"
                                         [disabled]="i === 0 && !isFirstRowDeleted" (ngModel)="transaction.type"
                                         (ngModelChange)="selectEntryType(transaction, $event, i)"
                                         (focus)="selectRow(true,i);hideListItems()"
@@ -45,7 +45,7 @@
                                         <tbody>
                                             <ng-container *ngIf="transaction.inventory && transaction.inventory.length">
                                                 <tr *ngFor="let inventory of transaction.inventory;let idx=index;let l=last"
-                                                    [ngClass]="{'activeRow': isSelectedRow && selectedStockIdx === idx && selectedIdx === i}">
+                                                    [ngClass]="{'active-row': isSelectedRow && selectedStockIdx === idx && selectedIdx === i}">
                                                     <td [style.width.px]="250"><input onReturn
                                                             (keydown)="detectKey($event)"
                                                             (keydown.Tab)="addNewEntry(transaction.amount,transaction, i)"
@@ -140,10 +140,10 @@
                     </div>
                 </div>
 
-                <div [hidden]="!showConfirmationBox" class="confirmation_box bdr text-center pd2">
+                <div [hidden]="!showConfirmationBox" class="confirmation-box bdr text-center pd-2">
                     <div class="">
                         <h1>Accept?</h1>
-                        <div class="pdT2">
+                        <div class="pd-t2">
                             <button class="btn btn-primary" #submitButton (keyup)="keyUpOnSubmitButton($event)"
                                 (click)="saveEntry();">Yes</button>
                             <button class="btn btn-default" #resetButton
@@ -154,7 +154,7 @@ <h1>Accept?</h1>
                         </div>
                     </div>
                 </div>
-                <div class="total_box text-right pull-right">
+                <div class="total-box text-right pull-right">
                     <span><strong>{{totalDebitAmount | number: '1.2-2' }}</strong></span>
                     <span><strong>{{totalCreditAmount | number: '1.2-2' }}</strong></span>
                 </div>
@@ -162,9 +162,9 @@ <h1>Accept?</h1>
         </div>
     </div>
 
-    <div class="sidebar_list form-control" [hidden]="!showLedgerAccountList">
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
-        <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
+    <div class="sidebar-list form-control" [hidden]="!showLedgerAccountList">
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'account'">List of Ledger Accounts</h3>
+        <h3 class="pd-1 bd-rb primary-color" *ngIf="selectedField === 'stock'">List of Stock Items</h3>
         <accounting-virtual-list [keydownUpInput]="keyUpDownEvent" [filterText]="filterByText" [options]="inputForList"
             [showList]="showLedgerAccountList" [isFilterEnabled]="true" (selected)="onItemSelected($event)"
             [(ngModel)]="currentSelectedValue" [placeholder]="'Select Option'"
@@ -176,7 +176,7 @@ <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stoc
 
 <!--quick account popup -->
 <div bsModal #quickAccountModal="bs-modal" [config]="{ backdrop: false }" class="modal" role="dialog">
-    <div class="modal-dialog modal-sm" style="width: 298px">
+    <div class="modal-dialog modal-sm modal-voucher">
         <div class="modal-content">
             <div element-view-container-ref #quickAccountComponent="elementviewcontainerref"></div>
         </div>
@@ -185,7 +185,7 @@ <h3 class="pd-1 bdrB primary_clr" *ngIf="selectedField === 'stock'">List of Stoc
 
 <!-- Cheque Detail Modal-->
 <div bsModal #chequeEntryModal="bs-modal" [config]="{ backdrop: 'static' }" class="modal" role="dialog">
-    <div class="modal-dialog modal-sm" style="width: 298px">
+    <div class="modal-dialog modal-sm modal-voucher">
         <div class="modal-content">
             <form autocomplete="off" novalidate name="chequeDetailForm" [formGroup]="chequeDetailForm"
                 class="new-account-form" (submit)="onSubmitChequeDetail()">
diff --git a/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.ts b/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.ts
index 685beade8df..282b18bf488 100644
--- a/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.ts
+++ b/apps/web-giddh/src/app/accounting/voucher-grid/voucher-grid.component.ts
@@ -35,7 +35,7 @@ const CustomShortcode = [
 @Component({
     selector: 'voucher-grid',
     templateUrl: './voucher-grid.component.html',
-    styleUrls: ['../accounting.component.css'],
+    styleUrls: ['../accounting.component.scss'],
     animations: [
         trigger('slideInOut', [
             state('in', style({
diff --git a/apps/web-giddh/src/app/actions/daybook/daybook.actions.ts b/apps/web-giddh/src/app/actions/daybook/daybook.actions.ts
index d28ca05e3f7..dd723c0c063 100644
--- a/apps/web-giddh/src/app/actions/daybook/daybook.actions.ts
+++ b/apps/web-giddh/src/app/actions/daybook/daybook.actions.ts
@@ -44,9 +44,13 @@ export class DaybookActions {
                 return this._daybookService.ExportDaybook(action.payload.request, action.payload.queryRequest).pipe(
                     map((res) => {
                         if (res.status === 'success') {
-                            let blob = this.base64ToBlob(res.body, res.queryString.requestType, 512);
-                            let type = res.queryString.requestType === 'application/pdf' ? '.pdf' : '.xls';
-                            saveAs(blob, 'response' + type);
+                            if(res.body.type === "message") {
+                                this._toasty.successToast(res.body.file);
+                            } else {
+                                let blob = this.base64ToBlob(res.body.file, res.queryString.requestType, 512);
+                                let type = res.queryString.requestType === 'application/pdf' ? '.pdf' : '.xls';
+                                saveAs(blob, 'response' + type);
+                            }
                         } else {
                             this._toasty.clearAllToaster();
                             this._toasty.errorToast(res.message);
@@ -62,9 +66,13 @@ export class DaybookActions {
                 return this._daybookService.ExportDaybookPost(action.payload.request, action.payload.queryRequest).pipe(
                     map((res) => {
                         if (res.status === 'success') {
-                            let blob = this.base64ToBlob(res.body, res.queryString.requestType, 512);
-                            let type = res.queryString.requestType === 'application/pdf' ? '.pdf' : '.xls';
-                            saveAs(blob, 'response' + type);
+                            if(res.body.type === "message") {
+                                this._toasty.successToast(res.body.file);
+                            } else {
+                                let blob = this.base64ToBlob(res.body.file, res.queryString.requestType, 512);
+                                let type = res.queryString.requestType === 'application/pdf' ? '.pdf' : '.xls';
+                                saveAs(blob, 'response' + type);
+                            }
                         } else {
                             this._toasty.clearAllToaster();
                             this._toasty.errorToast(res.message);
diff --git a/apps/web-giddh/src/app/all-modules/all-modules.component.html b/apps/web-giddh/src/app/all-modules/all-modules.component.html
index 79423058d82..5f44042038d 100644
--- a/apps/web-giddh/src/app/all-modules/all-modules.component.html
+++ b/apps/web-giddh/src/app/all-modules/all-modules.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid pt-2 pb-2" *ngIf="!showLoader">
+<div class="container-fluid pd-t2 pd-b2" *ngIf="!showLoader">
     <div class="clearfix reports-main">
         <div class="row clearfix">
             <div *ngFor="let item of allModulesList" class="col-md-3 col-sm-3 mb-5 col-xs-6 single-report-list">
@@ -90,7 +90,7 @@
 </div>
 <!--add and manage group account modal -->
 <div bsModal #manageGroupsAccountsModal="bs-modal" [config]="{ keyboard: true }" class="modal fade full-screen-modal manage-account-popup add-manage-group-acc" role="dialog">
-    <div class="modal-dialog modal-xl modal-liq-90 mr0 width100" style="height: 100%;">
+    <div class="modal-dialog modal-xl modal-liq-90 m-0 width-100 h100">
         <div class="modal-content full-screen-modal">
             <ng-template element-view-container-ref #addmanage=elementviewcontainerref>
             </ng-template>
diff --git a/apps/web-giddh/src/app/audit-logs/audit-logs.component.html b/apps/web-giddh/src/app/audit-logs/audit-logs.component.html
index dd1fa0405a2..3df194dd374 100644
--- a/apps/web-giddh/src/app/audit-logs/audit-logs.component.html
+++ b/apps/web-giddh/src/app/audit-logs/audit-logs.component.html
@@ -9,7 +9,7 @@
             <!--/sidebar-->
         </div>
         <div class="col-12 d-flex align-items-center">
-            <div class="mt-15 mb-15 custom-datepicker-wrapper" *ngIf="isNewVersion">
+            <div class="mr-t15 mr-b15 custom-datepicker-wrapper" *ngIf="isNewVersion">
                 <div class="custom-datepicker" (click)="showGiddhDatepicker($event)" *ngIf="isNewVersion">
                     <i class="icon-calender calendar-addon"></i>
                     <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker" />
diff --git a/apps/web-giddh/src/app/audit-logs/audit-logs.component.scss b/apps/web-giddh/src/app/audit-logs/audit-logs.component.scss
index 083083b7bc5..dfb2300d3f8 100644
--- a/apps/web-giddh/src/app/audit-logs/audit-logs.component.scss
+++ b/apps/web-giddh/src/app/audit-logs/audit-logs.component.scss
@@ -9,8 +9,3 @@
     color: $midnight-blue;
     cursor: pointer;
 }
-// @media(min-width:1366px){
-//     .audit-log-sidebar{
-//          max-width: 350px;
-//     }
-// }
diff --git a/apps/web-giddh/src/app/audit-logs/components/audit-logs-form/audit-logs-form.component.html b/apps/web-giddh/src/app/audit-logs/components/audit-logs-form/audit-logs-form.component.html
index aec753cfdec..5c73707bc3f 100644
--- a/apps/web-giddh/src/app/audit-logs/components/audit-logs-form/audit-logs-form.component.html
+++ b/apps/web-giddh/src/app/audit-logs/components/audit-logs-form/audit-logs-form.component.html
@@ -2,7 +2,7 @@
     <i><img src="assets/images/custom-calender.svg"></i>
     <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker" />
 </div> -->
-<div class="audit-form-wrap mt-15">
+<div class="audit-form-wrap mr-t15">
     <div class="clearfix form-field">
         <label>Entity <sup class="text-danger">*</sup></label>
         <sh-select [options]="auditLogFormVM.entities" #selectEntity [isFilterEnabled]="true" [placeholder]="'Select Option'" (selected)="selectedEntityType($event)" [(ngModel)]="auditLogFormVM.selectedEntity" [forceClearReactive]="forceClearEntity$ | async"></sh-select>
diff --git a/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.html b/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.html
index a6070a2a557..ccf0fcdff0d 100644
--- a/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.html
+++ b/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.html
@@ -5,79 +5,79 @@ <h1 class="audit-log-heading">{{log.operationType}}
         <span *ngIf="log && log.accountName && log.accountName != null"> - {{log.accountName}}
             ({{log.accountUniqueName}})</span>
     </h1>
-    <div class="mr-t border-top-btm clearfix">
+    <div class="mr-t05 border-top-btm clearfix">
         <div>
             <label class="pull-left">Entity:</label>
-            <p class="pull-left mrL">{{log.entityType}}</p>
+            <p class="pull-left mr-l05">{{log.entityType}}</p>
         </div>
         <div>
-            <label class="pull-left mrL2">Date:</label>
-            <p class="pull-left mrL">{{log.createdAt}}</p>
+            <label class="pull-left mr-l2">Date:</label>
+            <p class="pull-left mr-l05">{{log.createdAt}}</p>
         </div>
         <div>
-            <label class="pull-left mrL2">User:</label>
-            <p class="pull-left mrL">{{log.user.name}}</p>
+            <label class="pull-left mr-l2">User:</label>
+            <p class="pull-left ml-05">{{log.user?.name}}</p>
         </div>
         <div *ngIf="log && log.groupName && log.groupName != null">
-            <label class="pull-left mrL2">Group:</label>
-            <p class="pull-left mrL">{{log.groupName}}</p>
+            <label class="pull-left mr-l2">Group:</label>
+            <p class="pull-left mr-l05">{{log.groupName}}</p>
         </div>
         <div>
-            <label class="pull-left mrL2">Company:</label>
-            <p class="pull-left mrL">{{log.companyName}}</p>
+            <label class="pull-left mr-l2">Company:</label>
+            <p class="pull-left mr-l05">{{log.companyName}}</p>
         </div>
-        <div *ngIf="log.log && log.log.sharedWith && log.log.sharedWith != undefined && log.log.sharedWith.name.length > 0">
-            <label class="pull-left mrL2">Shared with:</label>
-            <p class="pull-left mrL">{{log.log.sharedWith.name}}
-                <span ng-if="log.log.sharedWith.email && log.log.sharedWith.email != null && log.log.sharedWith.email.length > 0">
-                    | {{log.log.sharedWith.email}}</span>
+        <div *ngIf="log.log && log.log?.sharedWith && log.log?.sharedWith != undefined && log.log?.sharedWith?.name.length > 0">
+            <label class="pull-left mr-l2">Shared with:</label>
+            <p class="pull-left ml-05">{{log.log?.sharedWith?.name}}
+                <span *ngIf="log.log?.sharedWith?.email && log.log?.sharedWith?.email != null && log.log?.sharedWith?.email?.length > 0">
+                    | {{log.log?.sharedWith?.email}}</span>
             </p>
         </div>
-        <div *ngIf="log && log.log && log.log.description != undefined && log.log.description.length > 0">
-            <label class="pull-left mrL2">Description:</label>
-            <p class="pull-left mrL">{{log.log.description}}</p>
+        <div *ngIf="log && log.log && log.log?.description != undefined && log.log?.description?.length > 0">
+            <label class="pull-left mr-l2">Description:</label>
+            <p class="pull-left ml-05">{{log.log?.description}}</p>
         </div>
     </div>
 
-    <div class="mr-t table-container" *ngIf="log.log != null && log.log.transactions != undefined && log.log.transactions.length > 0">
+    <div class="mr-t05 table-container" *ngIf="log.log != null && log.log?.transactions != undefined && log.log?.transactions?.length > 0">
         <table class="table table-bordered ">
             <thead>
                 <tr>
-                    <th class="col-xs-3 text-center">#</th>
-                    <th class="col-xs-3 text-center">Date</th>
-                    <th class="col-xs-3 text-center">Particular</th>
-                    <th class="col-xs-3 text-center">Amount</th>
-                    <th class="col-xs-3 text-center">Type</th>
+                    <th class="text-center">#</th>
+                    <th class="text-center">Date</th>
+                    <th class="text-center">Particular</th>
+                    <th class="text-center">Amount</th>
+                    <th class="text-center">Type</th>
                 </tr>
             </thead>
             <tbody>
                 <tr *ngFor="let transaction of log.log.transactions; let i = index">
                     <td>{{i + 1}}</td>
-                    <td>{{log.log.entryDate}}</td>
-                    <td>{{transaction.particular.name}} ({{transaction.particular.uniqueName}})</td>
-                    <td>{{transaction.amount |giddhCurrency}}</td>
+                    <td>{{log.log?.entryDate}}</td>
+                    <td>{{transaction.particular?.name}} ({{transaction.particular?.uniqueName}})</td>
+                    <td>{{transaction.amount | giddhCurrency}}</td>
                     <td>{{transaction.type}}</td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="mr-t text-center table-container" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.updated.transactions != undefined">
+    <div class="mr-t05 text-center table-container" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.updated.transactions != undefined">
         <label>Updated</label>
         <table class="table table-bordered">
             <thead>
                 <tr>
-                    <th class="col-xs-3 text-center">#</th>
-                    <th class="col-xs-3 text-center">Date</th>
-                    <th class="col-xs-3 text-center">Particular</th>
-                    <th class="col-xs-3 text-center">Amount</th>
-                    <th class="col-xs-3 text-center">Type</th>
+                    <th class="text-center">#</th>
+                    <th class="text-center">Date</th>
+                    <th class="text-center">Particular</th>
+                    <th class="text-center">Amount</th>
+                    <th class="text-center">Type</th>
                 </tr>
             </thead>
             <tbody>
                 <tr *ngFor="let transaction of log.log.updated.transactions; let i = index">
                     <td>{{i + 1}}</td>
                     <td>{{log.log.updated.entryDate}}</td>
-                    <td>{{transaction.particular.name}} ({{transaction.particular.uniqueName}})</td>
+                    <td>{{transaction.particular?.name}} ({{transaction.particular?.uniqueName}})</td>
                     <td>{{transaction.amount}}</td>
                     <td>{{transaction.type}}</td>
                 </tr>
@@ -88,43 +88,43 @@ <h1 class="audit-log-heading">{{log.operationType}}
         <table class="table table-bordered">
             <thead>
                 <tr>
-                    <th class="col-xs-3 text-center">#</th>
-                    <th class="col-xs-3 text-center">Date</th>
-                    <th class="col-xs-3 text-center">Particular</th>
-                    <th class="col-xs-3 text-center">Amount</th>
-                    <th class="col-xs-3 text-center">Type</th>
+                    <th class="text-center">#</th>
+                    <th class="text-center">Date</th>
+                    <th class="text-center">Particular</th>
+                    <th class="text-center">Amount</th>
+                    <th class="text-center">Type</th>
                 </tr>
             </thead>
             <tbody>
                 <tr *ngFor="let transaction of log.log.old.transactions; let i = index">
                     <td>{{i + 1}}</td>
                     <td>{{log.log.old.entryDate}}</td>
-                    <td>{{transaction.particular.name}} ({{transaction.particular.uniqueName}})</td>
+                    <td>{{transaction.particular?.name}} ({{transaction.particular?.uniqueName}})</td>
                     <td>{{transaction.amount}}</td>
                     <td>{{transaction.type}}</td>
                 </tr>
             </tbody>
         </table>
     </div>
-    <div class="mr-t text-center table-container" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.old.transactions == undefined && log.log.updated.transactions == undefined">
+    <div class="mr-t05 text-center table-container" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.old.transactions == undefined && log.log.updated.transactions == undefined">
         <label>Updated</label>
         <table class="table table-bordered">
             <thead>
                 <tr>
-                    <th class="col-xs-3 text-center">Opening Balance Date</th>
-                    <th class="col-xs-2 text-center">Opening Balance</th>
-                    <th class="col-xs-3 text-center">email</th>
-                    <th class="col-xs-3 text-center">Name</th>
-                    <th class="col-xs-4 text-center">Unique Name</th>
+                    <th class="text-center">Opening Balance Date</th>
+                    <th class="text-center">Opening Balance</th>
+                    <th class="text-center">email</th>
+                    <th class="text-center">Name</th>
+                    <th class="text-center">Unique Name</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td>{{log.log.updated.openingBalanceDate}}</td>
-                    <td>{{log.log.updated.openingBalance}}</td>
-                    <td>{{log.log.updated.email}}</td>
-                    <td>{{log.log.updated.name}}</td>
-                    <td>{{log.log.updated.uniqueName}}</td>
+                    <td>{{log.log.updated?.openingBalanceDate}}</td>
+                    <td>{{log.log.updated?.openingBalance}}</td>
+                    <td>{{log.log.updated?.email}}</td>
+                    <td>{{log.log.updated?.name}}</td>
+                    <td>{{log.log.updated?.uniqueName}}</td>
                 </tr>
             </tbody>
         </table>
@@ -133,20 +133,20 @@ <h1 class="audit-log-heading">{{log.operationType}}
         <table class="table table-bordered">
             <thead>
                 <tr>
-                    <th class="col-xs-3 text-center">Opening Balance Date</th>
-                    <th class="col-xs-2 text-center">Opening Balance</th>
-                    <th class="col-xs-3 text-center">email</th>
-                    <th class="col-xs-3 text-center">Name</th>
-                    <th class="col-xs-4 text-center">Unique Name</th>
+                    <th class="text-center">Opening Balance Date</th>
+                    <th class="text-center">Opening Balance</th>
+                    <th class="text-center">email</th>
+                    <th class="text-center">Name</th>
+                    <th class="text-center">Unique Name</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
-                    <td>{{log.log.old.openingBalanceDate}}</td>
-                    <td>{{log.log.old.openingBalance}}</td>
-                    <td>{{log.log.old.email}}</td>
-                    <td>{{log.log.old.name}}</td>
-                    <td>{{log.log.old.uniqueName}}</td>
+                    <td>{{log.log.old?.openingBalanceDate}}</td>
+                    <td>{{log.log.old?.openingBalance}}</td>
+                    <td>{{log.log.old?.email}}</td>
+                    <td>{{log.log.old?.name}}</td>
+                    <td>{{log.log.old?.uniqueName}}</td>
                 </tr>
             </tbody>
         </table>
diff --git a/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.scss b/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.scss
index 3fd1409bf24..f447079184f 100644
--- a/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.scss
+++ b/apps/web-giddh/src/app/audit-logs/components/audit-logs-grid/audit-logs-grid.component.scss
@@ -1,6 +1,3 @@
-// .audit-log-viewport {
-//     height: 90vh;
-// }
 
 .audit-log-heading{
     span{
diff --git a/apps/web-giddh/src/app/audit-logs/components/audit-logs-table/audit-logs-table.component.html b/apps/web-giddh/src/app/audit-logs/components/audit-logs-table/audit-logs-table.component.html
index 5cfbe78bd96..cae8dd70957 100644
--- a/apps/web-giddh/src/app/audit-logs/components/audit-logs-table/audit-logs-table.component.html
+++ b/apps/web-giddh/src/app/audit-logs/components/audit-logs-table/audit-logs-table.component.html
@@ -33,7 +33,7 @@ <h1>{{log.operationType}}
             <span *ngIf="log?.old?.details?.voucherAccount"> - {{log?.details?.voucherAccount?.name}}({{log?.details?.voucherAccount?.uniqueName}})</span>
         </ng-template>
     </h1>
-    <div class="audit-log-detail mt-05 clearfix">
+    <div class="audit-log-detail mr-t05 clearfix">
         <label *ngIf="log?.operationType==='EDIT'">Updated</label>
         <!-- User info block start-->
         <div class="d-flex user-basic-detail">
@@ -101,12 +101,12 @@ <h1>{{log.operationType}}
         <!-- User info block end-->
         <!-- stocks block -->
         <div class="address-row-wrapper d-flex" *ngIf="log?.details?.purchases?.account && log?.details?.sales?.account">
-            <div class="address-row mt-05" *ngIf="log?.details?.purchases?.account">
+            <div class="address-row mr-t05" *ngIf="log?.details?.purchases?.account">
                 <div class="single-address-row">
                     <span>
                         Purchase:-
                     </span>
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             Account:
                         </label>
@@ -114,23 +114,23 @@ <h1>{{log.operationType}}
                         </p>
                     </div>
                     <ng-container *ngFor="let item of log?.details?.purchases?.unitRates">
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Unit:
                         </label>
-                            <p class="ml-05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
+                            <p class="mr-l05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
                         </div>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Rate:
                         </label>
-                            <p class="ml-05">{{ item?.rate |giddhCurrency }} |</p>
+                            <p class="mr-l05">{{ item?.rate |giddhCurrency }} |</p>
                         </div>
                     </ng-container>
                     <span>
                         Sales:-
                     </span>
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             Account:
                         </label>
@@ -138,17 +138,17 @@ <h1>{{log.operationType}}
                         </p>
                     </div>
                     <ng-container *ngFor="let item of log?.details?.sales?.unitRates">
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Unit:
                         </label>
-                            <p class="ml-05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
+                            <p class="mr-l05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
                         </div>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Rate:
                         </label>
-                            <p class="ml-05">{{ item?.rate |giddhCurrency }} |</p>
+                            <p class="mr-l05">{{ item?.rate |giddhCurrency }} |</p>
                         </div>
                     </ng-container>
                 </div>
@@ -159,35 +159,35 @@ <h1>{{log.operationType}}
 
 
         <div class="address-row-wrapper d-flex">
-            <div class="address-row mt-05">
+            <div class="address-row mr-t05">
                 <!-- account address block start -->
                 <ng-container *ngIf="log && log?.details && log?.details?.addresses && log?.details?.addresses.length">
                     <ng-container *ngFor="let item of log?.details?.addresses; let index = index">
                         <div class="single-address-row" *ngIf="index===0 || index>0 && showSingleAddress && isShowMultipleDataIndex===parentIndex">
-                            <div class="mr-05" *ngIf="item.address">
+                            <div class="mr-r05" *ngIf="item.address">
                                 <label>
                             Address:
                         </label>
                                 <p class="address-field">{{item?.address}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="item?.state">
+                            <div class="mr-r05" *ngIf="item?.state">
                                 <label>
                             State:
                         </label>
-                                <p class="ml-05">{{item?.state?.name}}</p>
+                                <p class="mr-l05">{{item?.state?.name}}</p>
                             </div>
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             GSTIN:
                         </label>
-                                <p class="ml-05">{{item?.gstIn}}</p>
+                                <p class="mr-l05">{{item?.gstIn}}</p>
                             </div>
-                            <div class="mr-05" *ngIf="item?.country">
+                            <div class="mr-r05" *ngIf="item?.country">
                                 <label>
                             Country:
                         </label>
-                                <p class="ml-05">{{item?.country?.countryName}}</p>
+                                <p class="mr-l05">{{item?.country?.countryName}}</p>
                             </div>
                         </div>
 
@@ -197,24 +197,24 @@ <h1>{{log.operationType}}
                 <!-- Bank details block -->
                 <div class="single-address-row" *ngIf="log && log?.details && log?.details?.bankDetails && log?.details?.bankDetails.length">
                     <ng-container *ngFor="let bank of log?.details?.bankDetails; let bankIndex = index">
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Bank Name:
                         </label>
                             <p class="address-field"> {{bank?.bankName}}
                             </p>
                         </div>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             A/c Number:
                         </label>
-                            <p class="ml-05">{{bank?.accountNumber}}</p>
+                            <p class="mr-l05">{{bank?.accountNumber}}</p>
                         </div>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             IFSC Code:
                         </label>
-                            <p class="ml-05"> {{bank?.ifscCode}}</p>
+                            <p class="mr-l05"> {{bank?.ifscCode}}</p>
                         </div>
                     </ng-container>
                 </div>
@@ -223,43 +223,43 @@ <h1>{{log.operationType}}
                 <!-- Voucher block -->
                 <div class="single-address-row" *ngIf="log?.details?.voucherAccount && log?.details?.voucherAccount.name">
                     <ng-container>
-                        <div class="mr-05" *ngIf="log?.details?.voucherAccount.name">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherAccount.name">
                             <label>
                            Account:
                         </label>
                             <p class="address-field"> {{log?.details?.voucherAccount.name}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.voucherType">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherType">
                             <label>
                            Voucher:
                         </label>
                             <p class="address-field"> {{log?.details?.voucherType}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.voucherNumber">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherNumber">
                             <label>
                             Voucher Number:
                         </label>
-                            <p class="ml-05"> {{log?.details?.voucherNumber}}</p>
+                            <p class="mr-l05"> {{log?.details?.voucherNumber}}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.subTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.subTotal">
                             <label>
                             Sub Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.totalTax">
+                        <div class="mr-r05" *ngIf="log?.details?.totalTax">
                             <label>
                             Tax:
                         </label>
-                            <p class="ml-05"> {{log?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.grandTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.grandTotal">
                             <label>
                             Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
                         </div>
                     </ng-container>
                 </div>
@@ -267,28 +267,28 @@ <h1>{{log.operationType}}
                 <!-- entries audit log block -->
                 <div class="single-address-row" *ngIf="log?.details?.baseAccount && log?.details?.baseAccount.name">
                     <ng-container>
-                        <div class="mr-05" *ngIf="log?.details?.voucher">
+                        <div class="mr-r05" *ngIf="log?.details?.voucher">
                             <label>
                            Voucher:
                         </label>
                             <p class="address-field"> {{log?.details?.voucher}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.entryDateString">
+                        <div class="mr-r05" *ngIf="log?.details?.entryDateString">
                             <label>
                             Entry Date:
                         </label>
-                            <p class="ml-05"> {{log?.details?.entryDateString}}</p>
+                            <p class="mr-l05"> {{log?.details?.entryDateString}}</p>
                         </div>
                         <ng-container *ngFor="let item of log?.details?.otherAccounts; let indexEntries = index; let firstEntryIndex = first; let lastEntryIndex = last">
-                            <div class="mr-05" *ngIf="firstEntryIndex">
+                            <div class="mr-r05" *ngIf="firstEntryIndex">
                                 <label>
                                       Account Name:
                                     </label>
                                 <p class="address-field"> {{item?.name}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="indexEntries >0">
+                            <div class="mr-r05" *ngIf="indexEntries >0">
                                 <label *ngIf="indexEntries === 1">
                                        Other Accounts:
                                      </label>
@@ -297,32 +297,32 @@ <h1>{{log.operationType}}
                                 </p>
                             </div>
                         </ng-container>
-                        <div class="mr-05" *ngIf="log?.details?.subTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.subTotal">
                             <label>
                             Sub Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.subTotal |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.subTotal |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.taxTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.taxTotal">
                             <label>
                             Tax:
                         </label>
-                            <p class="ml-05"> {{log?.details?.taxTotal |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.taxTotal |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.total">
+                        <div class="mr-r05" *ngIf="log?.details?.total">
                             <label>
                             Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.total |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.total |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.description">
+                        <div class="mr-r05" *ngIf="log?.details?.description">
                             <label>
                            Description:
                         </label>
                             <p class="address-field"> {{log?.details?.description}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.hasAttachment">
+                        <div class="mr-r05" *ngIf="log?.details?.hasAttachment">
                             <label>
                            File Attached:
                         </label>
@@ -337,50 +337,50 @@ <h1>{{log.operationType}}
                 <!--commenting due to voucher block already exit  -->
                 <!-- <div class="single-address-row" *ngIf="log?.details?.voucherAccount && log?.details?.voucherAccount.name">
                     <ng-container>
-                        <div class="mr-05" *ngIf="log?.details?.voucherAccount.name">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherAccount.name">
                             <label>
                            Account:
                         </label>
                             <p class="address-field"> {{log?.details?.voucherAccount.name}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.voucherType">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherType">
                             <label>
                            Voucher:
                         </label>
                             <p class="address-field"> {{log?.details?.voucherType}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.voucherNumber">
+                        <div class="mr-r05" *ngIf="log?.details?.voucherNumber">
                             <label>
                             Voucher Number:
                         </label>
-                            <p class="ml-05"> {{log?.details?.voucherNumber}}</p>
+                            <p class="mr-l05"> {{log?.details?.voucherNumber}}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.subTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.subTotal">
                             <label>
                             Sub Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.totalTax">
+                        <div class="mr-r05" *ngIf="log?.details?.totalTax">
                             <label>
                             Tax:
                         </label>
-                            <p class="ml-05"> {{log?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.grandTotal">
+                        <div class="mr-r05" *ngIf="log?.details?.grandTotal">
                             <label>
                             Total:
                         </label>
-                            <p class="ml-05"> {{log?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
+                            <p class="mr-l05"> {{log?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
                         </div>
                     </ng-container>
                 </div> -->
                 <!-- Stock group block end -->
                 <ng-container *ngIf="log?.details?.parentGroup || (auditLogsRequest$ | async).entity === 'STOCK_GROUP'">
                     <div class="single-address-row">
-                        <div class="mr-05" *ngIf="log?.details?.name">
+                        <div class="mr-r05" *ngIf="log?.details?.name">
                             <label>
                             Group Name:
                         </label>
@@ -388,32 +388,32 @@ <h1>{{log.operationType}}
                             </p>
                         </div>
 
-                        <div class="mr-05" *ngIf="log?.details?.parentGroup?.name">
+                        <div class="mr-r05" *ngIf="log?.details?.parentGroup?.name">
                             <label>
                             Parent Group Name:
                         </label>
                             <p class="address-field">{{log?.details?.parentGroup?.name}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.hsn">
+                        <div class="mr-r05" *ngIf="log?.details?.hsn">
                             <label>
                             HSN:
                              </label>
                             <p class="address-field">{{log?.details?.hsn}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.sac">
+                        <div class="mr-r05" *ngIf="log?.details?.sac">
                             <label>
                             SAC:
                              </label>
                             <p class="address-field">{{log?.details?.sac}}
                             </p>
                         </div>
-                        <div class="mr-05" *ngIf="log?.details?.description">
+                        <div class="mr-r05" *ngIf="log?.details?.description">
                             <label>
                             Description:
                         </label>
-                            <p class="ml-05">{{log?.details?.description}}</p>
+                            <p class="mr-l05">{{log?.details?.description}}</p>
                         </div>
                     </div>
                 </ng-container>
@@ -428,7 +428,7 @@ <h1>{{log.operationType}}
 
     <!-- Old log block start -->
     <ng-container *ngIf="log?.operationType==='EDIT' && log?.old">
-        <div class="audit-log-detail mt-05 clearfix">
+        <div class="audit-log-detail mr-t05 clearfix">
             <label *ngIf="log.operationType==='EDIT'">Old</label>
             <!-- Old user info block start-->
             <div class="d-flex user-basic-detail">
@@ -496,12 +496,12 @@ <h1>{{log.operationType}}
             <!-- Old user info block end-->
             <!-- stocks -->
             <div class="address-row-wrapper d-flex" *ngIf="log?.old?.details?.purchases?.account && log?.old?.details?.sales?.account">
-                <div class="address-row mt-05" *ngIf="log?.old?.details?.purchases?.account">
+                <div class="address-row mr-t05" *ngIf="log?.old?.details?.purchases?.account">
                     <div class="single-address-row">
                         <span>
                         Purchase:-
                     </span>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Account:
                         </label>
@@ -509,23 +509,23 @@ <h1>{{log.operationType}}
                             </p>
                         </div>
                         <ng-container *ngFor="let item of log?.old?.details?.purchases?.unitRates">
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             Unit:
                         </label>
-                                <p class="ml-05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
+                                <p class="mr-l05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
                             </div>
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             Rate:
                         </label>
-                                <p class="ml-05">{{ item?.rate |giddhCurrency }} |</p>
+                                <p class="mr-l05">{{ item?.rate |giddhCurrency }} |</p>
                             </div>
                         </ng-container>
                         <span>
                         Sales:-
                     </span>
-                        <div class="mr-05">
+                        <div class="mr-r05">
                             <label>
                             Account:
                         </label>
@@ -533,17 +533,17 @@ <h1>{{log.operationType}}
                             </p>
                         </div>
                         <ng-container *ngFor="let item of log?.old?.details?.sales?.unitRates">
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             Unit:
                         </label>
-                                <p class="ml-05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
+                                <p class="mr-l05"> {{ item.unit?.name}}({{item.unit?.code}})</p>
                             </div>
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             Rate:
                         </label>
-                                <p class="ml-05">{{ item?.rate |giddhCurrency }} |</p>
+                                <p class="mr-l05">{{ item?.rate |giddhCurrency }} |</p>
                             </div>
                         </ng-container>
                     </div>
@@ -554,35 +554,35 @@ <h1>{{log.operationType}}
             <!-- stocks end -->
 
             <div class="address-row-wrapper d-flex">
-                <div class="address-row mt-05">
+                <div class="address-row mr-t05">
                     <!-- old account address start -->
                     <ng-container *ngIf="log?.old && log?.old?.details && log?.old?.details?.addresses && log?.old?.details?.addresses.length">
                         <ng-container *ngFor="let item of log?.old?.details?.addresses; let index = index">
                             <div class="single-address-row" *ngIf="index===0 || index>0 && showSingleAddress && isShowMultipleDataIndex===parentIndex">
-                                <div class="mr-05" *ngIf="item.address">
+                                <div class="mr-r05" *ngIf="item.address">
                                     <label>
                             Address:
                         </label>
                                     <p class="address-field">{{item?.address}}
                                     </p>
                                 </div>
-                                <div class="mr-05" *ngIf="item?.state">
+                                <div class="mr-r05" *ngIf="item?.state">
                                     <label>
                             State:
                         </label>
-                                    <p class="ml-05">{{item?.state?.name}}</p>
+                                    <p class="mr-l05">{{item?.state?.name}}</p>
                                 </div>
-                                <div class="mr-05">
+                                <div class="mr-r05">
                                     <label>
                             GSTIN:
                         </label>
-                                    <p class="ml-05">{{item?.gstIn}}</p>
+                                    <p class="mr-l05">{{item?.gstIn}}</p>
                                 </div>
-                                <div class="mr-05" *ngIf="item?.country">
+                                <div class="mr-r05" *ngIf="item?.country">
                                     <label>
                             Country:
                         </label>
-                                    <p class="ml-05">{{item?.country?.countryName}}</p>
+                                    <p class="mr-l05">{{item?.country?.countryName}}</p>
                                 </div>
                             </div>
                         </ng-container>
@@ -591,24 +591,24 @@ <h1>{{log.operationType}}
                     <!-- Old bank details block -->
                     <div class="single-address-row" *ngIf="log?.old && log?.old?.details && log?.old?.details?.bankDetails && log?.old?.details?.bankDetails.length">
                         <ng-container *ngFor="let bank of log?.old?.details?.bankDetails; let bankIndex = index">
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             Bank Name:
                         </label>
                                 <p class="address-field"> {{bank?.bankName}}
                                 </p>
                             </div>
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             A/c Number:
                         </label>
-                                <p class="ml-05">{{bank?.accountNumber}}</p>
+                                <p class="mr-l05">{{bank?.accountNumber}}</p>
                             </div>
-                            <div class="mr-05">
+                            <div class="mr-r05">
                                 <label>
                             IFSC Code:
                         </label>
-                                <p class="ml-05"> {{bank?.ifscCode}}</p>
+                                <p class="mr-l05"> {{bank?.ifscCode}}</p>
                             </div>
                         </ng-container>
                     </div>
@@ -617,43 +617,43 @@ <h1>{{log.operationType}}
                     <!-- Old voucher block -->
                     <div class="single-address-row" *ngIf="log?.old?.details?.voucherAccount && log?.old?.details?.voucherAccount.name">
                         <ng-container>
-                            <div class="mr-05" *ngIf="log?.old?.details?.voucherAccount.name">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.voucherAccount.name">
                                 <label>
                            Account:
                         </label>
                                 <p class="address-field"> {{log?.old?.details?.voucherAccount.name}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.details?.voucherType">
+                            <div class="mr-r05" *ngIf="log?.details?.voucherType">
                                 <label>
                            Voucher:
                         </label>
                                 <p class="address-field"> {{log?.old?.details?.voucherType}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.voucherNumber">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.voucherNumber">
                                 <label>
                             Voucher Number:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.voucherNumber}}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.voucherNumber}}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.subTotal">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.subTotal">
                                 <label>
                             Sub Total:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.subTotal?.amountForAccount |giddhCurrency }}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.totalTax">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.totalTax">
                                 <label>
                             Tax:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.totalTax?.amountForAccount |giddhCurrency }}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.grandTotal">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.grandTotal">
                                 <label>
                             Total:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.grandTotal?.amountForAccount |giddhCurrency }}</p>
                             </div>
                         </ng-container>
                     </div>
@@ -663,28 +663,28 @@ <h1>{{log.operationType}}
                     <!-- Old entries audit log block -->
                     <div class="single-address-row" *ngIf="log?.old?.details?.baseAccount && log?.old?.details?.baseAccount.name">
                         <ng-container>
-                            <div class="mr-05" *ngIf="log?.old?.details?.voucher">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.voucher">
                                 <label>
                            Voucher:
                         </label>
                                 <p class="address-field"> {{log?.old?.details?.voucher}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.entryDateString">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.entryDateString">
                                 <label>
                             Entry Date:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.entryDateString}}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.entryDateString}}</p>
                             </div>
                             <ng-container *ngFor="let item of log?.old?.details?.otherAccounts; let indexEntries = index;let firstOldEntryIndex=first; let lastOldEntryIndex= last">
-                                <div class="mr-05" *ngIf="firstOldEntryIndex">
+                                <div class="mr-r05" *ngIf="firstOldEntryIndex">
                                     <label>
                                       Account Name:
                                     </label>
                                     <p class="address-field"> {{item?.name}}
                                     </p>
                                 </div>
-                                <div class="mr-05" *ngIf="indexEntries >0">
+                                <div class="mr-r05" *ngIf="indexEntries >0">
                                     <label *ngIf="indexEntries === 1">
                                        Other Accounts:
                                      </label>
@@ -693,32 +693,32 @@ <h1>{{log.operationType}}
                                     </p>
                                 </div>
                             </ng-container>
-                            <div class="mr-05" *ngIf="log?.old?.details?.subTotal">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.subTotal">
                                 <label>
                             Sub Total:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.subTotal |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.subTotal |giddhCurrency }}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.taxTotal">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.taxTotal">
                                 <label>
                             Tax:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.taxTotal |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.taxTotal |giddhCurrency }}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.total">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.total">
                                 <label>
                             Total:
                         </label>
-                                <p class="ml-05"> {{log?.old?.details?.total |giddhCurrency }}</p>
+                                <p class="mr-l05"> {{log?.old?.details?.total |giddhCurrency }}</p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.description">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.description">
                                 <label>
                            Description:
                         </label>
                                 <p class="address-field"> {{log?.old?.details?.description}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.hasAttachment">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.hasAttachment">
                                 <label>
                            File Attached:
                         </label>
@@ -732,7 +732,7 @@ <h1>{{log.operationType}}
                     <ng-container *ngIf="log?.old?.details?.parentGroup || (auditLogsRequest$ | async).entity === 'STOCK_GROUP'">
                         <div class="single-address-row">
 
-                            <div class="mr-05" *ngIf="log?.old?.details?.name">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.name">
                                 <label>
                             Group Name:
                         </label>
@@ -740,62 +740,62 @@ <h1>{{log.operationType}}
                                 </p>
                             </div>
 
-                            <div class="mr-05" *ngIf="log?.old?.details?.parentGroup?.name">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.parentGroup?.name">
                                 <label>
                             Parent Group Name:
                              </label>
                                 <p class="address-field">{{log?.old?.details?.parentGroup?.name}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.hsn">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.hsn">
                                 <label>
                             HSN:
                              </label>
                                 <p class="address-field">{{log?.old?.details?.hsn}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.sac">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.sac">
                                 <label>
                             SAC:
                              </label>
                                 <p class="address-field">{{log?.old?.details?.sac}}
                                 </p>
                             </div>
-                            <div class="mr-05" *ngIf="log?.old?.details?.description">
+                            <div class="mr-r05" *ngIf="log?.old?.details?.description">
                                 <label>
                             Description:
                             </label>
-                                <p class="ml-05">{{log?.old?.details?.description}}</p>
+                                <p class="mr-l05">{{log?.old?.details?.description}}</p>
                             </div>
                         </div>
                     </ng-container>
                     <!-- Old stock group logs end -->
 
                     <!-- <div class="single-address-row" *ngIf="showSingleAddress">
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             Address:
                         </label>
                         <p class="address-field">405-406, Capt. C. S. Naidu Arcade Near Greater Kailash Hospital
                         </p>
                     </div>
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             State:
                         </label>
-                        <p class="ml-05">Madhya Pradesh</p>
+                        <p class="mr-l05">Madhya Pradesh</p>
                     </div>
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             GSTIN:
                         </label>
-                        <p class="ml-05">1234567890gst</p>
+                        <p class="mr-l05">1234567890gst</p>
                     </div>
-                    <div class="mr-05">
+                    <div class="mr-r05">
                         <label>
                             Country:
                         </label>
-                        <p class="ml-05">India</p>
+                        <p class="mr-l05">India</p>
                     </div>
                 </div> -->
                 </div>
@@ -810,7 +810,7 @@ <h1>{{log.operationType}}
 
     <!-- End -->
 
-    <div class="mr-t" *ngIf="log?.log != null && log?.log?.transactions != undefined && log?.log?.transactions.length > 0">
+    <div class="mr-t05" *ngIf="log?.log != null && log?.log?.transactions != undefined && log?.log?.transactions.length > 0">
         <table class="table table-bordered ">
             <thead>
                 <tr>
@@ -832,7 +832,7 @@ <h1>{{log.operationType}}
             </tbody>
         </table>
     </div>
-    <div class="mr-t text-center" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.updated.transactions != undefined">
+    <div class="mr-t05 text-center" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.updated.transactions != undefined">
         <label>Updated</label>
         <table class="table table-bordered">
             <thead>
@@ -877,7 +877,7 @@ <h1>{{log.operationType}}
             </tbody>
         </table>
     </div>
-    <div class="mr-t text-center" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.old.transactions == undefined && log.log.updated.transactions == undefined">
+    <div class="mr-t05 text-center" *ngIf="log && log.log && log.log.old != undefined && log.log.updated != undefined && log.log.old.transactions == undefined && log.log.updated.transactions == undefined">
         <label>Updated</label>
         <table class="table table-bordered">
             <thead>
diff --git a/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.html b/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.html
index fc95084cf46..f266d7ee724 100644
--- a/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.html
+++ b/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.html
@@ -1,27 +1,27 @@
-<h1 class="page-title" style="margin-left:0; margin-bottom:15px;">
+<h1 class="page-title ml-0 mr-b15">
     Apply Log Filters</h1>
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Filter By:</label>
     <sh-select [options]="vm.dateOptions" [isFilterEnabled]="true" [placeholder]="'Select Option'"
         [(ngModel)]="vm.selectedDateOption"></sh-select>
     <!--<select2 [data]="vm.dateOptions" [options]="vm.options" [value]="vm.selectedDateOption" (valueChanged)="selectDateOption($event)"></select2>-->
 </div>
 
-<div class="clearfix mr-t2" *ngIf="vm.selectedDateOption == '1'">
+<div class="clearfix mr-t15" *ngIf="vm.selectedDateOption == '1'">
     <label>From date</label>
     <input type="text" name="from" [placeholder]="giddhDateFormat" #fromdp="bsDatepicker" bsDatepicker
         [(ngModel)]="vm.selectedFromDate" class="form-control" />
 
 </div>
 
-<div class="clearfix mr-t2" *ngIf="vm.selectedDateOption == '1'">
+<div class="clearfix mr-t15" *ngIf="vm.selectedDateOption == '1'">
     <label>To date</label>
     <input type="text" name="to" [placeholder]="giddhDateFormat" #todp="bsDatepicker" bsDatepicker
         [(ngModel)]="vm.selectedToDate" class="form-control" />
 
 </div>
 
-<div class="clearfix mr-t2" *ngIf="vm.selectedDateOption == '0'">
+<div class="clearfix mr-t15" *ngIf="vm.selectedDateOption == '0'">
     <!-- <label>Select Log Date or Entry Date</label> -->
     <div class="mb-2 select-log" >
         <p class="input-group pull-left" for="entryDate">
@@ -44,28 +44,28 @@ <h1 class="page-title" style="margin-left:0; margin-bottom:15px;">
 
 </div>
 
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Select Operation</label>
     <!-- <input type="text" class="form-control" /> -->
     <sh-select [options]="vm.filters" [placeholder]="'Select Option'" [(ngModel)]="vm.selectedOperation"></sh-select>
     <!--<select2 [data]="vm.filters" [options]="vm.options" [value]="vm.selectedOperation" (valueChanged)="selectOperationOption($event)"></select2>-->
 </div>
 
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Select Entity</label>
     <sh-select [options]="vm.entities" [isFilterEnabled]="true" [placeholder]="'Select Option'"
         [(ngModel)]="vm.selectedEntity"></sh-select>
     <!--<select2 [data]="vm.entities" [options]="vm.options" [value]="vm.selectedEntity" (valueChanged)="selectEntityOption($event)"></select2>-->
 </div>
 
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Select Account</label>
     <sh-select [options]="vm.accounts$ | async" [isFilterEnabled]="true" [placeholder]="'Select Option'"
         [customFilter]="genralCustomFilter" [(ngModel)]="vm.selectedAccountUnq"></sh-select>
     <!--<select2 [data]="vm.accounts$ | async" [options]="vm.options" [value]="vm.selectedAccountUnq" (valueChanged)="selectAccount($event)"></select2>-->
 </div>
 
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Select Group</label>
     <sh-select [options]="vm.groups$ | async" [isFilterEnabled]="true" [placeholder]="'Select Option'"
         [customFilter]="genralCustomFilter" [(ngModel)]="vm.selectedGroupUnq"></sh-select>
@@ -73,15 +73,15 @@ <h1 class="page-title" style="margin-left:0; margin-bottom:15px;">
 </div>
 
 
-<div class="clearfix mr-t2">
+<div class="clearfix mr-t15">
     <label>Select User</label>
     <sh-select [options]="vm.users$ | async" [customFilter]="customUserFilter" [isFilterEnabled]="true"
         [placeholder]="'Select Option'" [(ngModel)]="vm.selectedUserUnq"></sh-select>
     <!--<select2 [data]="vm.users$ | async" [options]="vm.options" [value]="vm.selectedUserUnq" (valueChanged)="selectUser($event)"></select2>-->
 </div>
 
-<button class='btn btn-success pull-left mr-t2' [ladda]="vm.getLogsInprocess$ | async" (click)='getLogfilters()'>Get Logs
+<button class='btn btn-success pull-left mr-t15' [ladda]="vm.getLogsInprocess$ | async" (click)='getLogfilters()'>Get Logs
 </button>
-<button class="btn btn-warning pull-left mr-t2 mrL" (click)="resetFilters()">Reset</button>
+<button class="btn btn-warning pull-left mr-t15 mr-l05" (click)="resetFilters()">Reset</button>
 
 <br />
diff --git a/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.scss b/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.scss
index b60bcd077b8..3b8a8ef4e2c 100644
--- a/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.scss
+++ b/apps/web-giddh/src/app/audit-logs/components/sidebar-components/audit-logs.sidebar.component.scss
@@ -10,3 +10,7 @@
         }
     }
 }
+label{
+    line-height: 2.5;
+    font-size: 14px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/billing-details/billingDetail.component.html b/apps/web-giddh/src/app/billing-details/billingDetail.component.html
index f739267221d..50a0da70f6f 100644
--- a/apps/web-giddh/src/app/billing-details/billingDetail.component.html
+++ b/apps/web-giddh/src/app/billing-details/billingDetail.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="!isCreateAndSwitchCompanyInProcess" id="main" class="welcome_outer">
+<div *ngIf="!isCreateAndSwitchCompanyInProcess" id="main" class="welcome-outer">
 
     <div class="welcome-header">
         <h2>Welcome To Giddh! </h2>
@@ -53,7 +53,7 @@ <h3>Billing Details</h3>
                         </div>
                         <div class="form-group">
                             <label>State <span class="red-text">*</span></label>
-                            <sh-select #states [options]="statesSource$ | async" required [isFilterEnabled]="true"
+                            <sh-select #states [options]="statesSource$ | async" required [isRequired]="true" [isFilterEnabled]="true"
                                 [disabled]="disableState" [defaultValue]="selectedState"
                                 [(ngModel)]="billingDetailsObj.stateCode" id="stateCode" name="stateCode"
                                 style="width:100%"></sh-select>
@@ -78,7 +78,7 @@ <h3>Billing Details</h3>
                 </div>
             </div>
             <div class="col-sm-6 col-xs-12">
-                <div class="proffesional-plan">
+                <div class="professional-plan">
                     <p class="plan-title"> {{selectedPlans?.planDetails?.name}} <span class="grey-text"> (Current Plan)
                         </span></p>
 
diff --git a/apps/web-giddh/src/app/companyImportExport/company-import-export.component.html b/apps/web-giddh/src/app/companyImportExport/company-import-export.component.html
index 36011943034..1eb045cdc7c 100644
--- a/apps/web-giddh/src/app/companyImportExport/company-import-export.component.html
+++ b/apps/web-giddh/src/app/companyImportExport/company-import-export.component.html
@@ -17,7 +17,7 @@ <h2 class="text-center">Import or export your account master data
                             </h2>
                         </div>
 
-                        <div style="display:flex;margin-top: 50px;">
+                        <div class="d-flex export-section">
 
 
                             <div class="export-card btn" [ngClass]="{'selected': mode === 'export'}"
diff --git a/apps/web-giddh/src/app/companyImportExport/company-import-export.component.scss b/apps/web-giddh/src/app/companyImportExport/company-import-export.component.scss
index a1d0df2fb42..2c3dcd50151 100644
--- a/apps/web-giddh/src/app/companyImportExport/company-import-export.component.scss
+++ b/apps/web-giddh/src/app/companyImportExport/company-import-export.component.scss
@@ -38,6 +38,11 @@
     color: $dark-gray;
     margin: 0 auto 20px;
 }
+
+.export-section{
+    margin-top: 50px;
+}
+
 @media(max-width:991px){
     .main-container-import-export {
      h2{
diff --git a/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.html b/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.html
index 6158cfdee51..4450ef525e1 100644
--- a/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.html
+++ b/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.html
@@ -1,8 +1,8 @@
-<div class="row" style="margin-top: 30px">
+<div class="row mr-t3">
     <div class="col-xs-12 col-sm-12">
             <div class="export-data-form">
                 <div class="d-flex">
-                    <div class="file-type-label mr-15 linked-entities" *ngIf="currentCompanyBranches?.length">
+                    <div class="file-type-label mr-r15 linked-entities" *ngIf="currentCompanyBranches?.length">
                         <label class="d-block">Entity</label>
                         <div class="form-group">
                             <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName"
@@ -30,41 +30,41 @@
                             </sh-select>
                         </div>
                     </div>
-                    <div class="mr-15 file-type-label">
+                    <div class="mr-r15 file-type-label">
                         <label class="d-block">File Type</label>
                         <sh-select placeholder="Select" name="file-type" [(ngModel)]="fileType" [options]="fileTypes"
                             [ItemHeight]="33"></sh-select>
                     </div>
-                    <div class="mr-15" *ngIf="mode === 'export' && fileType === '0'">
+                    <div class="mr-r15" *ngIf="mode === 'export' && fileType === '0'">
                         <label class="d-block">Data Range</label>
                         <div class="custom-datepicker" (click)="showGiddhDatepicker($event)">
                             <i class="icon-calender calendar-addon"></i>
                             <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker border-radius-2" />
                         </div>
                     </div>
-                    <button class="btn btn-primary " *ngIf="mode === 'export'" style="margin-top: 24px" (click)="save()"
+                    <button class="btn btn-primary " *ngIf="mode === 'export'" (click)="save()"
                         [ladda]="isExportInProcess$ | async" [disabled]="(!fileType || !from || !to)"> Export
                     </button>
-                    <div class="select-file-lable mr-15" *ngIf="mode === 'import'">
+                    <div class="select-file-lable mr-r15" *ngIf="mode === 'import'">
                         <label class="d-block">Select File</label>
 
                         <div class="form-group input-upload">
                             <div class="input-file">
-                                <label for="fileUpload" class="form-control ellp">
+                                <label for="fileUpload" class="form-control text-ellipsis">
                                     <span class="text-success" *ngIf="selectedFile">
                                         {{ selectedFile?.name }}
                                     </span>
                                     <span *ngIf="!selectedFile">
                                         Browse file
                                     </span></label>
-                                <input type="file" id="fileUpload" accept="application/json" style="display: none;"
+                                <input type="file" id="fileUpload" accept="application/json"  class="d-none"
                                     (change)="fileSelected($event.target.files)" />
                             </div>
 
                         </div>
                     </div>
                     <div>
-                    <button class="btn btn-success" *ngIf="mode === 'import'" style="margin-top: 24px" (click)="save()"
+                    <button class="btn btn-success" *ngIf="mode === 'import'" (click)="save()"
                         [ladda]="isImportInProcess$ | async" [disabled]="(!fileType || !selectedFile)"> Import
                     </button>
                     </div>
diff --git a/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.scss b/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.scss
index 04014c929c0..70fecba9d1a 100644
--- a/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.scss
+++ b/apps/web-giddh/src/app/companyImportExport/component/form/company-import-export-form.scss
@@ -10,6 +10,11 @@
         padding-bottom: 5px;
     }
 }
+
+.btn-success, .btn-primary{
+    margin-top: 24px;
+}
+
 @media(max-width:991px){
     .export-data-form{
         display: flex;
diff --git a/apps/web-giddh/src/app/contact/advanceSearch/contactAdvanceSearch.component.html b/apps/web-giddh/src/app/contact/advanceSearch/contactAdvanceSearch.component.html
index 6a01314576f..0615bd55bdf 100644
--- a/apps/web-giddh/src/app/contact/advanceSearch/contactAdvanceSearch.component.html
+++ b/apps/web-giddh/src/app/contact/advanceSearch/contactAdvanceSearch.component.html
@@ -1,16 +1,16 @@
 <div>
 
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
 
-    <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
 
         <form name="newRole" novalidate class="" autocomplete="off">
 
             <!--region invoice-->
-            <div class="modal_wrap mr-b2">
+            <div class="modal-wrap mr-b2">
 
                 <div class="row mt-2 mb-2">
 
@@ -35,7 +35,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
 
                         <div class="row">
 
-                            <div class="col-sm-8 col-xs-6 mb-1">
+                            <div class="col-sm-8 col-xs-6 mr-b1">
                                 <sh-select placeholder="Select" name="entryTotalBy" [options]="filtersForEntryTotal"
                                     [ItemHeight]="33" [(ngModel)]="request.amountType"></sh-select>
                             </div>
@@ -54,7 +54,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
             <!--endregion-->
 
             <div class="pull-right">
-                <button type="submit" class="btn btn-md btn-success mrR1" (click)="save()">Search</button>
+                <button type="submit" class="btn btn-md btn-success mr-r1" (click)="save()">Search</button>
                 <button type="submit" class="btn btn-md btn-cancel" (click)="onCancel()">Cancel</button>
             </div>
 
diff --git a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.html b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.html
index 6ee29081d86..73f6aa22737 100644
--- a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.html
+++ b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.html
@@ -1,7 +1,7 @@
 <div class="container-fluid">
     <div class="top-bar aging-top-bar clearfix">
         <div class="aging-form-inline">
-            <div class="form-group mr-15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
+            <div class="form-group mr-r15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
                 <div class="form-group">
                     <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false"
                         [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)" [isFilterEnabled]="true"
@@ -18,7 +18,7 @@
                                     </span>
                                     <span class="entity-details">
                                         <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                        <div class="item-unq giddh-limit single-line-clamp">
+                                        <div class="item-unique giddh-limit single-line-clamp">
                                             {{ option.name || '-' }}
                                         </div>
                                     </span>
@@ -30,8 +30,8 @@
             </div>
             <div class="pull-left d-flex wrap-searching-aging">
                 <div class="form-group search-field max250" [ngClass]="{'default-width':isAdvanceSearchApplied}">
-                    <input type="text" placeholder="Name/amount" class="form-control" [(ngModel)]="searchStr"
-                        (ngModelChange)="searchStr$.next($event)" style="width:210px" />
+                    <input type="text" placeholder="Name/amount" class="form-control name-width" [(ngModel)]="searchStr"
+                        (ngModelChange)="searchStr$.next($event)" />
                     <span class="input-addon">
                         <i class="icon-search"></i>
                     </span>
@@ -48,14 +48,14 @@
                 </div>
             </div>
             <div class="btn-group  pull-right">
-                <button class="btn btn-sky-blue" style="margin-right: 5px" (click)="creteNewCustomerEvent.emit(true)">
+                <button class="btn btn-sky-blue mr-0" (click)="creteNewCustomerEvent.emit(true)">
                     + New Customer
                 </button>
             </div>
         </div>
     </div>
     <div class="contact-main agingPage ">
-        <div class=" pdB2 mr-b1 on-mobile-view mobile-card-wrapper">
+        <div class="pd-b2 mr-b1 on-mobile-view mobile-card-wrapper">
             <div *ngIf="!isMobileScreen" class="table-responsive">
                 <ng-container *ngTemplateOutlet='mainTable'></ng-container>
             </div>
@@ -74,10 +74,10 @@
         <div>
             <div class="customer-right-wrap">
                 <div class="text-right total-result xs-left pl-2 pr-2">
-                    <h4 class="mb-1 pr-1">Result Total </h4>
+                    <h4 class="mr-b1 pr-1">Result Total </h4>
                 </div>
-                <div class="bg-white customer-right clearfix" style="width: 100%;">
-                    <table style="float: right; width: auto;" class="text-right">
+                <div class="bg-white customer-right clearfix w-100">
+                    <table class="text-right float-right w-auto">
                         <tr>
                             <td>
                                 <p>Upcoming</p>
@@ -109,12 +109,12 @@ <h3>{{ totalDueAmounts | giddhCurrency }}/-</h3>
 <ng-template #sortingTemplate let-col>
     <div class="icon-pointer cp">
         <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'asc')" *ngIf="key !== col"
-            [ngClass]="{'activeTextColor': key === col && order === 'asc'}"></div>
+            [ngClass]="{'active-text-color': key === col && order === 'asc'}"></div>
         <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'desc')"
-            *ngIf="key === col && order === 'asc'" [ngClass]="{'activeTextColor': key === col && order === 'asc'}">
+            *ngIf="key === col && order === 'asc'" [ngClass]="{'active-text-color': key === col && order === 'asc'}">
         </div>
         <div class="icon-sort-dsc text-light-2 d-block font-xxs" *ngIf="key === col && order === 'desc'"
-            (click)="sort(col, 'asc')" [ngClass]="{'activeTextColor': key === col && order === 'desc'}"></div>
+            (click)="sort(col, 'asc')" [ngClass]="{'active-text-color': key === col && order === 'desc'}"></div>
     </div>
 </ng-template>
 <!-- endregion -->
@@ -215,9 +215,9 @@ <h1>No Record Found !!</h1>
             </ng-container>
         </tbody>
     </table>
-    <div *ngIf="(dueAmountReportData$ | async)?.totalItems>=20" class="paginationWrapper">
+    <div *ngIf="(dueAmountReportData$ | async)?.totalItems>=20" class="pagination-wrapper">
         <div class="xs-pl-0">
-            <div class="alC" style="text-align: center;">
+            <div class="text-center">
                 <div id="pagination" element-view-container-ref #paginationChild=elementviewcontainerref></div>
             </div>
         </div>
diff --git a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.scss b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.scss
index ed76cff640b..10623ef874c 100644
--- a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.scss
+++ b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.scss
@@ -1,4 +1,5 @@
 @import "../../../assets/css/color.scss";
+
 .dropdown-menu > li > a {
     padding: 2px 10px;
 }
@@ -34,7 +35,7 @@
     background: transparent;
     min-height: 210px;
 }
-.paginationWrapper {
+.pagination-wrapper {
     width: 100%;
 }
 .customer-right table {
@@ -53,8 +54,8 @@
     font-size: 18px;
     margin-left: 10px;
     border-radius: 2px;
-    color: #1a237e;
-    background: #fff;
+    color: $midnight-blue;
+    background: $white;
 }
 
 .search-field {
@@ -63,11 +64,11 @@
 }
 .search-field input {
     width: 235px;
-    background-color: #e6e7e8 !important;
-    border-color: #e6e7e8 !important;
+    background-color: $whisper !important;
+    border-color: $whisper !important;
 }
 .search-field input:focus {
-    background-color: #fff !important;
+    background-color: $white !important;
     border-color: $midnight-express !important;
 }
 span.input-addon {
@@ -75,7 +76,7 @@ span.input-addon {
     right: 0px;
     padding: 4px 9px;
     background-color: $chetwode-blue;
-    color: #fff;
+    color: $white;
     font-size: 18px;
     border-radius: 2px;
     top: 0;
@@ -105,6 +106,10 @@ tr.aging-table-top td {
     }
 }
 
+.name-width{
+    width: 210px; 
+}
+
 // responsive
 @media (min-width: 769px) {
     .on-mobile-view > .top-aging-table-top {
@@ -113,7 +118,7 @@ tr.aging-table-top td {
 }
 
 @media (max-width: 768px) {
-    .customer-right-wrap h4.mb-1.pdR2 {
+    .customer-right-wrap h4.mr-b1.pd-r2 {
         margin-bottom: 0;
     }
     .contact-main .table-aging-report {
@@ -121,12 +126,12 @@ tr.aging-table-top td {
     }
     .customer-right table tr td {
         padding: 0px 15px;
-        color: #707070;
+        color: $dark-gray;
     }
     .result-total {
         position: fixed;
         bottom: 0;
-        background-color: #fff;
+        background-color: $white;
         text-align: left;
         float: none;
         width: 100%;
@@ -179,7 +184,7 @@ tr.aging-table-top td {
     .result-total {
         position: relative;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         margin-bottom: 0px;
     }
     .wrap-searching-aging .max250 {
@@ -203,7 +208,7 @@ tr.aging-table-top td {
             }
         }
     }
-    .customer-right-wrap h4.mb-1.pdR2 {
+    .customer-right-wrap h4.mr-b1.pd-r2 {
         margin-bottom: 10px;
         padding-left: 15px;
     }
@@ -233,12 +238,12 @@ tr.aging-table-top td {
     }
     .customer-right table tr td {
         padding: 0px 5px;
-        color: #707070;
+        color: $dark-gray;
         width: 100%;
         display: block;
     }
     .customer-right {
-        background: #fff;
+        background: $white;
         padding: 0;
         float: none;
     }
diff --git a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.ts b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.ts
index 2c196c8d01d..f20cd359c86 100644
--- a/apps/web-giddh/src/app/contact/aging-report/aging-report.component.ts
+++ b/apps/web-giddh/src/app/contact/aging-report/aging-report.component.ts
@@ -199,7 +199,7 @@ export class AgingReportComponent implements OnInit {
                             uniqueName: this.activeCompany ? this.activeCompany.uniqueName : '',
                         };
                     }
-                    this.currentBranch.name = this.currentBranch.name + (this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
+                    this.currentBranch.name = this.currentBranch.name + (this.currentBranch && this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
                 }
             } else {
                 if (this.generalService.companyUniqueName) {
diff --git a/apps/web-giddh/src/app/contact/aside-menu-account/aside.menu.account.component.scss b/apps/web-giddh/src/app/contact/aside-menu-account/aside.menu.account.component.scss
index 59afc25e342..1e3bebf1029 100644
--- a/apps/web-giddh/src/app/contact/aside-menu-account/aside.menu.account.component.scss
+++ b/apps/web-giddh/src/app/contact/aside-menu-account/aside.menu.account.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -18,7 +20,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -39,8 +41,8 @@
     padding: 0 15px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/contact/contact.component.html b/apps/web-giddh/src/app/contact/contact.component.html
index c25363e6278..09ccefbb783 100644
--- a/apps/web-giddh/src/app/contact/contact.component.html
+++ b/apps/web-giddh/src/app/contact/contact.component.html
@@ -9,10 +9,10 @@
             <div class="top-bar customer-top-bar clearfix">
                 <div class="customer-form-inline">
                     <div>
-                        <div class="dis pull-left mrR1">
+                        <div class="dis pull-left mr-r1">
 
                             <div *ngIf="activeTab !== 'aging'" class="btn-group" #filterDropDownList="bs-dropdown" dropdown [autoClose]="false" (clickOutside)="hideListItems()" [tooltip]="'Enable / Disable Column'" [placement]="'right'">
-                                <i dropdownToggle class="icon-options pd cp fs20"></i>
+                                <i dropdownToggle class="icon-options pd cp font-20"></i>
 
                                 <ul *dropdownMenu class="dropdown-menu dropdown-menu-left" role="menu" [style.width.px]="'200'">
                                     <li role="menuitem">
@@ -68,7 +68,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <div class="form-group mr-15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
+                        <div class="form-group mr-r15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
                             <div class="form-group">
                                 <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false"
                                     [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)" [isFilterEnabled]="true"
@@ -85,7 +85,7 @@
                                                 </span>
                                                 <span class="entity-details">
                                                     <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                    <div class="item-unq giddh-limit single-line-clamp">
+                                                    <div class="item-unique giddh-limit single-line-clamp">
                                                         {{ option.name || '-' }}
                                                     </div>
                                                 </span>
@@ -110,7 +110,7 @@
                             <span class="icon-cross"></span> Clear Selected
                     </button>
                     <div class="mt-1">
-                        <div class="btn-group  pull-right onDesktopView">
+                        <div class="btn-group  pull-right on-desktop-view">
                             <button *ngIf="activeTab == 'customer'" class="btn btn-sky-blue mr-0" (click)="openAddAndManage('customer')">
                             + New Customer
                         </button>
@@ -121,14 +121,14 @@
                         <div class="customer-footer-box pull-right ">
 
                             <div class="clearfix customer-inner-box">
-                                <span class="pull-left mrR1 totalContacts">
+                                <span class="pull-left mr-r1 totalContacts">
                                 <h5>
                                     <span *ngIf="!selectedCheckedContacts.length"
-                                        class="numbertotal">{{activeTab === 'customer' ? totalCustomers : totalVendors}}</span>
-                                <span *ngIf="selectedCheckedContacts.length>0" class="numbertotal">{{selectedCheckedContacts.length}}</span> Contacts
+                                        class="number-total">{{activeTab === 'customer' ? totalCustomers : totalVendors}}</span>
+                                <span *ngIf="selectedCheckedContacts.length>0" class="number-total">{{selectedCheckedContacts.length}}</span> Contacts
                                 </h5>
                                 </span>
-                                <div class="btn-group moreBtn" dropdown>
+                                <div class="btn-group more-button" dropdown>
                                     <button id="button-basic" dropdownToggle type="button" class="btn btn-default dropdown-toggle" aria-controls="dropdown-basic">
                                     More
                                     <span class="caret"></span>
@@ -148,7 +148,7 @@ <h5>
                         </div>
 
                         <div class="btn-group  pull-right on-mobile-view">
-                            <button *ngIf="activeTab == 'customer'" class="btn btn-sky-blue" style="margin-right: 5px" (click)="openAddAndManage('customer')">
+                            <button *ngIf="activeTab == 'customer'" class="btn btn-sky-blue mr-r05" (click)="openAddAndManage('customer')">
                             + New Customer
                         </button>
                             <button *ngIf="activeTab == 'vendor'" class="btn btn-sky-blue " (click)="openAddAndManage('vendor')">
@@ -161,7 +161,7 @@ <h5>
             </div>
 
 
-            <div class="text-center top-aging-table-top seprta-top-aging pd-1" *ngIf="isMobileScreen">
+            <div class="text-center top-aging-table-top separate-top-aging pd-1" *ngIf="isMobileScreen">
                 <p (click)="showGiddhDatepicker($event)">
                     <strong>Due as on </strong>
                     <span *ngIf="selectedDateRangeUi">
@@ -170,11 +170,11 @@ <h5>
                 </p>
             </div>
 
-            <div class="contact-main customerPage on-mobile-view">
+            <div class="contact-main customer-page on-mobile-view">
 
-                <div class=" pdB2 mr-b1">
+                <div class="pd-b2 mr-b1">
 
-                    <div class="">
+                    <div>
 
                         <div *ngIf="!isMobileScreen && !isGetAccountsInProcess">
                             <!-- <perfect-scrollbar fxFlex="auto" [scrollIndicators]="true"> -->
@@ -196,15 +196,15 @@ <h5>
             </div>
         </div>
         <div class="clearfix pagination-main">
-            <div class=" mt-5 mb-100px">
-                <div class="">
+            <div class="mt-5 mb-100px">
+                <div>
                     <div class="customer-right-wrap clearfix">
                         <div class="text-right">
-                            <h4 class="mb-1 pdR2">Result Total</h4>
+                            <h4 class="mr-b1 pd-r2">Result Total</h4>
                         </div>
 
                         <div class="bg-white clearfix">
-                            <div class="customer-right  clearfix" style="width: 100%;">
+                            <div class="customer-right  clearfix width-100">
                                 <table class="text-right">
                                     <tr>
                                         <td *ngIf="showFieldFilter.openingBalance">
@@ -246,21 +246,21 @@ <h3>{{closingBalance | giddhCurrency}}/-</h3>
 </tabset>
 </div>
 <!-- region Modal for Mail/SMS for vendore-->
-<div *ngIf="activeTab === 'vendor'" class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
+<div *ngIf="activeTab === 'vendor'" class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
-                <div class="modal-header themeBg pdL2 pdR2 clearfix">
+            <div class="border-radius-0">
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title-mail-vendor">{{messageBody.header.set}}</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close" (click)="mailModal.hide()">×</span>
                     <!-- <i class="icon-cross text-right close-modal" aria-hidden="true" ></i> -->
                 </div>
-                <div class="modal-body pdL2 pdR2 clearfix">
+                <div class="modal-body pd-l2 pd-r2 clearfix">
                     <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'">Enter Subject:</h1>
                     <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
                     <h1 class="mr-b1">Type message body:</h1>
-                    <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4" style="resize:none;" placeholder="start typing your message here"></textarea>
-                    <small class="mr-t mrB grey">Tip: Click on the tabs below to insert data in your message body.
+                    <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control resize-none" rows="4" placeholder="start typing your message here"></textarea>
+                    <small class="mr-t05 mr-b05 grey">Tip: Click on the tabs below to insert data in your message body.
                         Anything followed by '%s_' represents the position
                         where actual data will be placed.
                     </small>
@@ -281,28 +281,28 @@ <h1 class="mr-b1">Type message body:</h1>
 <!--endregion-->
 
 <!--region Modal for Mail/SMS for customer-->
-<div *ngIf="activeTab === 'customer'" class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
+<div *ngIf="activeTab === 'customer'" class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
 
     <div class="modal-dialog modal-md">
 
         <div class="modal-content">
 
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
 
-                <div class="modal-header themeBg pdL2 pdR2 clearfix">
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title-mail-customer">{{messageBody.header.set}}</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close" (click)="mailModal.hide()">×</span>
                     <!-- <i class="icon-cross text-right close-modal" aria-hidden="true" ></i> -->
                 </div>
 
-                <div class="modal-body pdL2 pdR2 clearfix">
+                <div class="modal-body pd-l2 pd-r2 clearfix">
 
                     <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'">Enter Subject:</h1>
                     <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
 
                     <h1 class="mr-b1">Type message body:</h1>
-                    <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4" style="resize:none;" placeholder="start typing your message here"></textarea>
-                    <small class="mr-t mrB grey">Tip: Click on the tabs below to insert data in your message body.
+                    <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control resize-none" rows="4" placeholder="start typing your message here"></textarea>
+                    <small class="mr-t05 mr-b05 grey">Tip: Click on the tabs below to insert data in your message body.
                         Anything followed by '%s_' represents the position
                         where actual data will be placed.
                     </small>
@@ -329,14 +329,14 @@ <h1 class="mr-b1">Type message body:</h1>
 
 <div class="aside-overlay" *ngIf="accountAsideMenuState === 'in'"></div>
 <div class="abc " *ngIf="accountAsideMenuState === 'in'">
-    <aside-menu-account [activeGroupUniqueName]="selectedGroupForCreateAcc" [activeAccountDetails]="activeAccountDetails" [isUpdateAccount]="isUpdateAccount" class="account-aside-menu-state  transinherit" [@slideInOut]="accountAsideMenuState" (closeAsideEvent)="toggleAccountAsidePane($event)"
+    <aside-menu-account [activeGroupUniqueName]="selectedGroupForCreateAcc" [activeAccountDetails]="activeAccountDetails" [isUpdateAccount]="isUpdateAccount" class="account-aside-menu-state transform-inherit" [@slideInOut]="accountAsideMenuState" (closeAsideEvent)="toggleAccountAsidePane($event)"
         (getUpdateList)="getUpdatedList($event)">
     </aside-menu-account>
 </div>
 
 <div class="aside-overlay" *ngIf="paymentAsideMenuState === 'in'"></div>
 <div class="abc vendorPayNow" *ngIf="paymentAsideMenuState === 'in'">
-    <payment-aside class="account-aside-menu-state transinherit" [selectedAccForPayment]="selectedAccForPayment">
+    <payment-aside class="account-aside-menu-state transform-inherit" [selectedAccForPayment]="selectedAccForPayment">
     </payment-aside>
 </div>
 
@@ -351,7 +351,7 @@ <h1 class="mr-b1">Type message body:</h1>
                         <p class="due-as-on" container="body">
                             <strong>Due as on </strong>
                             <span class="italic underline">
-                                <input type="text" (click)="showGiddhDatepicker($event)" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" style="width: 250px !important;" class="form-control giddh-datepicker date-range-picker"/>
+                                <input type="text" (click)="showGiddhDatepicker($event)" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="form-control giddh-datepicker date-range-picker"/>
                             </span>
                         </p>
                     </td>
@@ -423,7 +423,7 @@ <h1 class="mr-b1">Type message body:</h1>
                             <div class="flex-fill">
                                 Email
                             </div>
-                            <div class="icon-pointer cursor-pointer iconSearch">
+                            <div class="icon-pointer cursor-pointer icon-class-search">
                                 <!--                        <i class="icon-search"></i>-->
                             </div>
                         </div>
@@ -460,20 +460,20 @@ <h1 class="mr-b1">Type message body:</h1>
                 <ng-container *ngIf="activeTab === 'customer'">
 
                     <tr *ngFor="let account of sundryDebtorsAccounts;let idx = index">
-                        <td class="pos-rel word-wrap customer-name cursor-pointer" (clickOutside)="dropdown.hide()" (dblclick)="dropdown.show()" data-title="Customer">
+                        <td class="position-relative word-wrap customer-name cursor-pointer" (clickOutside)="dropdown.hide()" (dblclick)="dropdown.show()" data-title="Customer">
                             <div class="customer-name-filed">
                                 <span class="inline table-checkbox">
                                 <label></label>
                                 <input type="checkbox" (click)="selectAccount($event, account)"
                                     [(ngModel)]="account.isSelected"
-                                    [ngClass]="{'checkbox_visible': (selectedCheckedContacts.length || isMobileScreen), 'pos-abs': !selectedCheckedContacts.length}" />
+                                    [ngClass]="{'checkbox-visible': (selectedCheckedContacts.length || isMobileScreen), 'pos-abs': !selectedCheckedContacts.length}" />
                             </span>
-                                <span class="accountNameCustomer"> {{account.name}} </span>
+                                <span class="account-name-customer"> {{account.name}} </span>
                                 <div dropdown #dropdown="bs-dropdown" container="body" [autoClose]="false" class="icon-ellipse">
                                     <a id="edit-model-basic" dropdownToggle class="dropdown-toggle icon-dots-three-vertical pull-right" aria-controls="dropdown-basic" (click)="dropdown.show()"></a>
 
                                     <div id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right wd00" role="menu" aria-labelledby="edit-model-basic">
-                                        <div class="tb-pl-modal-header p-modal-tolltip" style="padding: 0 !important;">
+                                        <div class="tb-pl-modal-header p-modal-tooltip p-0">
 
                                             <div class="account-detail-modal-header-div selection-none">
 
@@ -481,9 +481,9 @@ <h1 class="mr-b1">Type message body:</h1>
 
                                                     <div class="account-detail-custom-header selection-none-header">
 
-                                                        <div class="d-flex" style="padding: 0px; border-right:0px;">
+                                                        <div class="d-flex p-0 border-right-0">
 
-                                                            <div class="account-detail-padding" style="flex: 1;border-right: 0px;">
+                                                            <div class="account-detail-padding flex-fill border-right-0">
                                                                 <h3 class="account-detail-custom-title word-break">
                                                                     <span (click)="performActions(0, account)">{{account?.name}}</span>
                                                                 </h3>
@@ -540,26 +540,26 @@ <h4>{{account?.gstIn}}</h4>
 
 
                                     <!--Modal for Mail/SMS-->
-                                    <div class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true" (click)="$event.stopPropagation()">
+                                    <div class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true" (click)="$event.stopPropagation()">
                                         <div class="modal-dialog modal-md" style="margin:auto;margin-top: 200px">
 
                                             <div class="modal-content" style="padding: 8px 8px 8px 8px;">
 
-                                                <div class="noBrdRdsModal" style="padding: 8px 8px 8px 8px;">
+                                                <div class="border-radius-0" style="padding: 8px 8px 8px 8px;">
 
-                                                    <div class="modal-header themeBg pdL2 pdR2 clearfix" style="padding: 8px 8px 8px 8px;">
+                                                    <div class="modal-header theme-bg pd-l2 pd-r clearfix" style="padding: 8px 8px 8px 8px;">
                                                         <h3 class="modal-title bg" id="modal-title">
                                                             {{messageBody.header.set}}</h3>
                                                         <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close" (click)="mailModal.hide()">×</span>
                                                     </div>
 
-                                                    <div class="modal-body pdL2 pdR2 clearfix" style="padding: 0px !important;">
+                                                    <div class="modal-body pd-l2 pd-r2 clearfix" style="padding: 0px !important;">
                                                         <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'" style="margin-top:15px;">Enter Subject:
                                                         </h1>
                                                         <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
                                                         <h1 class="mr-b1" style="margin-top:15px;">Type message body:</h1>
                                                         <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4" style="resize:none;" placeholder="start typing your message here"></textarea>
-                                                        <small class="mr-t mrB grey" style="margin-top:15px;display: block">Tip: Click on the tabs
+                                                        <small class="mr-t05 mr-b05 grey" style="margin-top:15px;display: block">Tip: Click on the tabs
                                                         below to insert data in your message body. Anything followed by
                                                         '%s_' represents
                                                         the position where actual data will be placed.
@@ -607,7 +607,7 @@ <h1 class="mr-b1" style="margin-top:15px;">Type message body:</h1>
                             {{account.gstIn || '-' }}</td>
                         <td class="word-wrap" *ngIf="showFieldFilter.state" data-title="State">
                             {{account?.state?.name || '-'}}</td>
-                        <td *ngIf='showFieldFilter.comment' (click)='updateCommentIdx = idx' data-title=" Comment" class="commentField">
+                        <td *ngIf='showFieldFilter.comment' (click)='updateCommentIdx = idx' data-title=" Comment" class="comment-field">
                             <ng-container *ngIf='updateCommentIdx != idx'>
                                 {{account.comment}}
                                 <span [class.text-gray]="!account.comment" *ngIf="!account.comment">{{ 'Add Comment' }}</span>
@@ -633,13 +633,13 @@ <h1>No Record Found !!</h1>
                 <ng-container *ngIf="activeTab==='vendor' ">
 
                     <tr *ngFor="let account of sundryCreditorsAccounts; let idx=index ">
-                        <td class="pos-rel word-wrap customer-name vendor-customer-name cursor-pointer" data-title="Vendor" (clickOutside)="dropdown.hide()" (dblclick)="dropdown.show()">
+                        <td class="position-relative word-wrap customer-name vendor-customer-name cursor-pointer" data-title="Vendor" (clickOutside)="dropdown.hide()" (dblclick)="dropdown.show()">
                             <div class="vendor-name-field">
                                 <span class="inline table-checkbox ">
                                     <label></label>
                                     <input type="checkbox" (click)="selectAccount($event, account) "
                                         [(ngModel)]="account.isSelected "
-                                        [ngClass]="{ 'checkbox_visible': (selectedCheckedContacts.length || isMobileScreen), 'pos-abs': !selectedCheckedContacts.length} " />
+                                        [ngClass]="{ 'checkbox-visible': (selectedCheckedContacts.length || isMobileScreen), 'pos-abs': !selectedCheckedContacts.length} " />
                                 </span>
                                 <span>{{account.name}}</span>
                                 <div dropdown #dropdown="bs-dropdown" container="body" [autoClose]="false" class="icon-ellipse">
@@ -648,7 +648,7 @@ <h1>No Record Found !!</h1>
                                     </a>
 
                                     <div id="dropdown-basic2" *dropdownMenu class="dropdown-menu dropdown-menu-right wd00" role="menu" aria-labelledby="edit-model-basic2">
-                                        <div class="tb-pl-modal-header p-modal-tolltip" style="padding: 0 !important;">
+                                        <div class="tb-pl-modal-header p-modal-tooltip p-0">
 
                                             <div class="account-detail-modal-header-div selection-none">
 
@@ -656,9 +656,9 @@ <h1>No Record Found !!</h1>
 
                                                     <div class="account-detail-custom-header selection-none-header">
 
-                                                        <div class="d-flex" style="padding: 0px; border-right:0px;">
+                                                        <div class="d-flex p-0 border-right-0">
 
-                                                            <div class="account-detail-padding" style="flex: 1;border-right: 0px;">
+                                                            <div class="account-detail-padding flex-fill border-right-0">
                                                                 <h3 class="account-detail-custom-title word-break">
                                                                     <span (click)="performActions(0, account)">{{account?.name}}</span>
                                                                 </h3>
@@ -715,26 +715,26 @@ <h4>{{account?.gstIn}}</h4>
 
 
                                     <!--Modal for Mail/SMS-->
-                                    <div class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true" (click)="$event.stopPropagation()">
+                                    <div class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true" (click)="$event.stopPropagation()">
                                         <div class="modal-dialog modal-md" style="margin:auto;margin-top: 200px">
 
                                             <div class="modal-content" style="padding: 8px 8px 8px 8px;">
 
-                                                <div class="noBrdRdsModal" style="padding: 8px 8px 8px 8px;">
+                                                <div class="border-radius-0" style="padding: 8px 8px 8px 8px;">
 
-                                                    <div class="modal-header themeBg pdL2 pdR2 clearfix" style="padding: 8px 8px 8px 8px;">
+                                                    <div class="modal-header theme-bg pd-l2 pd-r2 clearfix" style="padding: 8px 8px 8px 8px;">
                                                         <h3 class="modal-title bg" id="modal-title">
                                                             {{messageBody.header.set}}</h3>
                                                         <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close" (click)="mailModal.hide()">×</span>
                                                     </div>
 
-                                                    <div class="modal-body pdL2 pdR2 clearfix" style="padding: 0px !important;">
+                                                    <div class="modal-body pd-l2 pd-r2 clearfix" style="padding: 0px !important;">
                                                         <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'" style="margin-top:15px;">Enter Subject:
                                                         </h1>
                                                         <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
                                                         <h1 class="mr-b1" style="margin-top:15px;">Type message body:</h1>
                                                         <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4" style="resize:none;" placeholder="start typing your message here"></textarea>
-                                                        <small class="mr-t mrB grey" style="margin-top:15px;display: block">Tip: Click on the tabs
+                                                        <small class="mr-t05 mr-b05 grey" style="margin-top:15px;display: block">Tip: Click on the tabs
                                                             below to insert data in your message body. Anything followed by
                                                             '%s_' represents
                                                             the position where actual data will be placed.
@@ -814,16 +814,16 @@ <h1>No Record Found !!</h1>
         </table>
     </div>
 
-    <div colspan="100%" class="xs-pl-0 paginationWrapper">
+    <div colspan="100%" class="xs-pl-0 pagination-wrapper">
+
         <div *ngIf="activeTab === 'customer' && sundryDebtorsAccountsBackup.results && sundryDebtorsAccountsBackup.results.length && totalCustomers>=paginationLimit">
-            <div class="alC  ">
+            <div class="text-center">
                 <pagination [totalItems]="sundryDebtorsAccountsBackup.totalItems" [(ngModel)]="sundryDebtorsAccountsBackup.page" [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="sundryDebtorsAccountsBackup.count" [rotate]="false" (pageChanged)="pageChanged($event)">
                 </pagination>
             </div>
         </div>
-
         <div *ngIf="activeTab === 'vendor' && sundryCreditorsAccountsBackup.results && sundryCreditorsAccountsBackup.results.length && totalVendors>=paginationLimit">
-            <div class="alC ">
+            <div class="text-center">
                 <pagination [totalItems]="sundryCreditorsAccountsBackup.totalItems" [(ngModel)]="sundryCreditorsAccountsBackup.page" [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="sundryCreditorsAccountsBackup.count" [rotate]="false" (pageChanged)="pageChanged($event)">
                 </pagination>
             </div>
@@ -835,12 +835,12 @@ <h1>No Record Found !!</h1>
 <!-- region sorting template -->
 <ng-template #sortingTemplate let-col>
     <div class="icon-pointer cp">
-        <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'asc')" *ngIf="key !== col" [ngClass]="{'activeTextColor': key === col && order === 'asc'}"></div>
+        <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'asc')" *ngIf="key !== col" [ngClass]="{'active-text-color': key === col && order === 'asc'}"></div>
 
-        <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'desc')" *ngIf="key === col && order === 'asc'" [ngClass]="{'activeTextColor': key === col && order === 'asc'}">
+        <div class="icon-sort-asc text-light-2 d-block font-xxs" (click)="sort(col, 'desc')" *ngIf="key === col && order === 'asc'" [ngClass]="{'active-text-color': key === col && order === 'asc'}">
         </div>
 
-        <div class="icon-sort-dsc text-light-2 d-block font-xxs" *ngIf="key === col && order === 'desc'" (click)="sort(col, 'asc')" [ngClass]="{'activeTextColor': key === col && order === 'desc'}"></div>
+        <div class="icon-sort-dsc text-light-2 d-block font-xxs" *ngIf="key === col && order === 'desc'" (click)="sort(col, 'asc')" [ngClass]="{'active-text-color': key === col && order === 'desc'}"></div>
     </div>
 </ng-template>
 <!-- endregion bank integration from by bank name:  ui/bank/integration/form?bankName=ICICI&= -->
diff --git a/apps/web-giddh/src/app/contact/contact.component.scss b/apps/web-giddh/src/app/contact/contact.component.scss
index ac87aeb0fcb..baf03278f76 100644
--- a/apps/web-giddh/src/app/contact/contact.component.scss
+++ b/apps/web-giddh/src/app/contact/contact.component.scss
@@ -32,7 +32,7 @@
     opacity: 1;
 }
 
-.checkbox_visible {
+.checkbox-visible {
     opacity: 1 !important;
     position: relative !important;
 }
@@ -42,9 +42,9 @@
     cursor: pointer;
 }
 
-.icon-pointer.iconSearch {
+.icon-pointer.icon-class-search {
     top: 30%;
-    color: #a9a9a9;
+    color: $dim-gray;
 }
 
 .icon-pointer .d-block.font-xxs.glyphicon.glyphicon-triangle-top {
@@ -63,10 +63,10 @@
     right: auto;
     z-index: 1;
     margin: 0;
-    background: white;
+    background: $white;
     width: 50%;
     padding: 1px;
-    box-shadow: 1px 0 9px grey;
+    box-shadow: 1px 0 9px $gray;
 }
 
 .account-detail-modal-header-div {
@@ -83,7 +83,7 @@
     border-right: 0;
     padding: 11px 10px 10px 10px;
     width: 100%;
-    background: #efefef;
+    background: $lavender;
 }
 
 .account-detail-custom-title {
@@ -97,25 +97,25 @@
 }
 
 .custom-detail h4 {
-    color: #707070;
+    color: $dark-gray;
     margin-top: 7px;
     font-size: 14px !important;
     font-family: opensans-regular !important;
 }
 
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 
-.p-modal-tolltip {
+.p-modal-tooltip {
     display: block;
     position: absolute;
-    background-color: white;
+    background-color: $white;
     z-index: 1000;
     width: 257px;
-    border: 1px solid #b4afaf;
+    border: 1px solid $pink-swan;
     border-radius: 4px;
-    box-shadow: 0 7px 24px #00000038;
+    box-shadow: 0 7px 24px $black-russian;
     top: -2px;
 }
 
@@ -145,20 +145,24 @@ ul.list-unstyled li a {
     }
 }
 
-.transinherit {
+.transform-inherit {
     transform: inherit !important;
 }
 
-td.commentField {
+td.comment-field {
     white-space: normal;
 }
 
+.date-range-picker{
+    width: 250px !important;
+}
+
 //  my css
 .aging-table tbody tr:first-child td {
     border-top: none;
 }
 
-td.pos-rel.word-wrap.customer-name.cursor-pointer {
+td.position-relative.word-wrap.customer-name.cursor-pointer {
     border-bottom: none;
     height: 37px;
     line-height: 1.4;
@@ -172,24 +176,24 @@ td.pos-rel.word-wrap.customer-name.cursor-pointer {
     padding-right: 35px;
 }
 
-td.pos-rel.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
+td.position-relative.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
     height: 42px;
     line-height: 1;
     border-right: none;
 }
 
-tr:last-child td.pos-rel.word-wrap.customer-name.cursor-pointer,
-tr:last-child td.pos-rel.word-wrap.vendor-customer-name.cursor-pointer {
-    border-bottom: 1px solid #ddd !important;
+tr:last-child td.position-relative.word-wrap.customer-name.cursor-pointer,
+tr:last-child td.position-relative.word-wrap.vendor-customer-name.cursor-pointer {
+    border-bottom: 1px solid $gainsboro !important;
 }
 
-.pos-rel.word-wrap {
+.position-relative.word-wrap {
     .icon-dots-three-vertical {
         transform: rotate(90deg);
         font-size: 20px;
         vertical-align: middle;
         display: none;
-        color: #333333;
+        color: $night-rider;
     }
     &:hover .icon-dots-three-vertical {
         display: block;
@@ -229,26 +233,26 @@ tr.aging-table-top td {
     bottom: initial;
 }
 
-.btn-group.moreBtn.open.show {
+.btn-group.more-button.open.show {
     display: inline-block !important;
 }
 
-.moreBtn li {
+.more-button li {
     padding: 5px;
     cursor: default;
 }
 
-.moreBtn li:hover {
-    background-color: #eeeff9;
+.more-button li:hover {
+    background-color: $lavender;
     color: $jacksons-purple;
 }
 
 .btn-primary.active,
 .btn-primary:active,
 .open>.dropdown-toggle.btn-primary {
-    color: #333;
-    background-color: #e7e7e8;
-    border-color: #e7e7e8;
+    color: $night-rider;
+    background-color: $lavender;
+    border-color: $lavender;
     box-shadow: none !important;
 }
 
@@ -261,7 +265,7 @@ i.icon-options {
     width: 36px;
     height: 36px;
     border: 1px solid $gainsboro;
-    background-color: #fff;
+    background-color: $white;
     color: $gray;
     font-size: 20px;
     padding: 0;
@@ -271,7 +275,7 @@ i.icon-options {
 }
 
 i.icon-options:hover {
-    background-color: #eaeaea;
+    background-color: $whisper-color;
 }
 
 .search-field {
@@ -281,12 +285,12 @@ i.icon-options:hover {
 
 .search-field input {
     width: 235px;
-    background-color: #e6e7e8 !important;
-    border-color: #e6e7e8 !important;
+    background-color: $whisper !important;
+    border-color: $whisper !important;
 }
 
 .search-field input:focus {
-    background-color: #fff !important;
+    background-color: $white !important;
     border-color: $midnight-express !important;
 }
 span.input-addon {
@@ -294,7 +298,7 @@ span.input-addon {
     right: 0px;
     padding: 4px 9px;
     background-color: $chetwode-blue;
-    color: #fff;
+    color: $white;
     font-size: 18px;
     border-radius: 2px;
     height: 36px;
@@ -434,11 +438,11 @@ button.btn.btn-filter span.icon-cross {
     .aging-table>tbody>tr input[type="checkbox"] {
         top: 2px;
     }
-    .customer-right-wrap h4.mb-1.pdR2 {
+    .customer-right-wrap h4.mr-b1.pd-r2 {
         margin-bottom: 0;
     }
-    tr:last-child td.pos-rel.word-wrap.customer-name.cursor-pointer,
-    tr:last-child td.pos-rel.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
+    tr:last-child td.position-relative.word-wrap.customer-name.cursor-pointer,
+    tr:last-child td.position-relative.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
         border-bottom: none !important;
     }
     .table-responsive {
@@ -447,14 +451,14 @@ button.btn.btn-filter span.icon-cross {
     .aging-table .table-checkbox {
         top: 5px;
     }
-    .p-modal-tolltip {
+    .p-modal-tooltip {
         left: auto !important;
         right: -24px !important;
     }
-    .pos-rel.word-wrap .icon-dots-three-vertical {
+    .position-relative.word-wrap .icon-dots-three-vertical {
         transform: rotate(0deg);
     }
-    .onDesktopView.btn-group {
+    .on-desktop-view.btn-group {
         display: none;
     }
     .customer-right-wrap {
@@ -462,18 +466,18 @@ button.btn.btn-filter span.icon-cross {
         position: fixed;
         bottom: 0;
         width: 100%;
-        background: #fff;
+        background: $white;
         padding: 10px 5px;
         z-index: 1;
         box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
     }
-    td.pos-rel.word-wrap.customer-name.cursor-pointer,
-    td.pos-rel.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
+    td.position-relative.word-wrap.customer-name.cursor-pointer,
+    td.position-relative.word-wrap.customer-name.vendor-customer-name.cursor-pointer {
         max-width: 100%;
         white-space: inherit;
         line-height: 1.5;
     }
-    .pos-rel.word-wrap.vendor-customer-name .icon-dots-three-vertical {
+    .position-relative.word-wrap.vendor-customer-name .icon-dots-three-vertical {
         position: relative;
         top: 0;
         line-height: 1 !important;
@@ -484,7 +488,7 @@ button.btn.btn-filter span.icon-cross {
     .customer-name .icon-ellipse {
         top: 8px;
     }
-    .pos-rel.word-wrap {
+    .position-relative.word-wrap {
         .icon-dots-three-vertical {
             display: block;
         }
@@ -520,7 +524,7 @@ button.btn.btn-filter span.icon-cross {
     .pagination-main .mt-5 {
         margin-top: 0px;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         margin-bottom: 0px !important;
     }
     .customer-name,
@@ -549,17 +553,17 @@ button.btn.btn-filter span.icon-cross {
             padding-top: 6px;
             h5 {
                 font-size: 16px;
-                .numbertotal {
+                .number-total {
                     font-size: 20px;
                 }
             }
         }
     }
-    .customer-right-wrap h4.mb-1.pdR2 {
+    .customer-right-wrap h4.mr-b1.pd-r2 {
         margin-bottom: 10px;
     }
     .customer-right {
-        background: #fff;
+        background: $white;
         padding: 0 15px;
         float: left;
         width: 100%;
@@ -569,7 +573,7 @@ button.btn.btn-filter span.icon-cross {
     }
     .customer-right table tr td {
         padding: 15px;
-        color: #707070;
+        color: $dark-gray;
         width: 100%;
         display: table;
         text-align: left;
@@ -592,7 +596,7 @@ button.btn.btn-filter span.icon-cross {
     .customer-footer-box {
         padding-top: 10px;
     }
-    .pos-rel.word-wrap .icon-dots-three-vertical {
+    .position-relative.word-wrap .icon-dots-three-vertical {
         display: block;
     }
     .top-aging-table-top {
@@ -608,7 +612,7 @@ button.btn.btn-filter span.icon-cross {
 }
 
 @media (min-width: 769px) and (max-width: 1023px) {
-    .seprta-top-aging {
+    .separate-top-aging {
         display: none;
     }
 }
@@ -617,7 +621,7 @@ button.btn.btn-filter span.icon-cross {
     .on-mobile-view.btn-group {
         display: none;
     }
-    .onDesktopView.btn-group {
+    .on-desktop-view.btn-group {
         display: block;
     }
 }
@@ -660,5 +664,5 @@ button.btn.btn-filter span.icon-cross {
 }
 
 .negative-balance {
-    color: #ff0000;
+    color: $red;
 }
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/contact/contact.component.ts b/apps/web-giddh/src/app/contact/contact.component.ts
index 7b422c2d307..7910715bce1 100644
--- a/apps/web-giddh/src/app/contact/contact.component.ts
+++ b/apps/web-giddh/src/app/contact/contact.component.ts
@@ -474,7 +474,7 @@ export class ContactComponent implements OnInit, OnDestroy {
                         };
                     }
                     this.currentBranchData = _.cloneDeep(this.currentBranch);
-                    this.currentBranch.name = (this.currentBranch ? this.currentBranch.name : "") + (this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
+                    this.currentBranch.name = (this.currentBranch ? this.currentBranch.name : "") + (this.currentBranch && this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
                 }
             } else {
                 if (this._generalService.companyUniqueName) {
diff --git a/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.html b/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.html
index 83cafeeafef..ac4491f52d9 100644
--- a/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.html
+++ b/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.html
@@ -9,13 +9,13 @@ <h4 class="modal-title pull-left">Payment</h4>
         <form #adjustAdvancePaymentForm="ngForm" autocomplete="off">
             <div class="row d-flex align-items-center payment-top-form">
                 <div class="col-sm-12">
-                    <div class="d-flex mb-1">
-                        <div class="form-group mr-15 select-bank">
+                    <div class="d-flex mr-b1">
+                        <div class="form-group mr-r15 select-bank">
                             <label>Select Bank<span class="red-text">*</span></label>
                             <div class="relative">
                                 <img *ngIf="(isGetAllIntegratedBankInProgress$ | async)" class="dropdown-loader" src="assets/images/loader.gif" alt="">
                                 <sh-select [options]="selectIntegratedBankList" [disabled]="isPayClicked" #selectBankEle [multiple]="false" [ItemHeight]="33" [fixedValue]="selectedBankName" [isFilterEnabled]="true" class="text-left" [(ngModel)]="selectedBankUniqueName" name="selectedBankUniqueName"
-                                    required placeholder="Select Bank" (click)="setBankName($event, selectBankEle);" (selected)="selectBank($event);" [multiple]="false">
+                                    required [isRequired]="true" placeholder="Select Bank" (click)="setBankName($event, selectBankEle);" (selected)="selectBank($event);" [multiple]="false">
                                     <ng-template #optionTemplate let-option="option">
                                         <a href="javascript:void(0)" class="list-item">
                                             <div class="item">{{option?.label}}</div>
@@ -44,11 +44,11 @@ <h4 class="modal-title pull-left">Payment</h4>
                             </sh-select> -->
                             <p *ngIf="totalAvailableBalance"><small class="text-gray">Bal {{totalAvailableBalance | giddhCurrency}} dr.</small></p>
                         </div>
-                        <div class="form-group mr-15">
+                        <div class="form-group mr-r15">
                             <label>Total Amount<span class="red-text">*</span></label>
                             <input type="text" class="form-control" decimalDigitsDirective disabled [mask]="inputMaskFormat" [(ngModel)]="totalSelectedAccountAmount" name="amount">
                         </div>
-                        <div class="form-group mr-15" *ngIf="isPayClicked">
+                        <div class="form-group mr-r15" *ngIf="isPayClicked">
                             <label class="relative d-flex">Enter OTP<span class="red-text">*</span>
                                 <p class="resend-btn" *ngIf="!timerOn"><a href="javascript:void(0);"
                                         (click)="reSendOTP()" class="btn-link">Resend</a></p>
@@ -58,7 +58,7 @@ <h4 class="modal-title pull-left">Payment</h4>
                             </label>
                             <input type="text" class="form-control" placeholder="Enter OTP" required name="receivedOtp" (keypress)="allowOnlyNumbers($event)" [(ngModel)]="receivedOtp">
                         </div>
-                        <div class="form-group mr-15">
+                        <div class="form-group mr-r15">
                             <label class="d-flex"> &nbsp; </label>
                             <button type="button" *ngIf="!isPayClicked" class="btn btn-success" [disabled]="!isBankSelectedForBulkPayment || !isValidData" [ladda]="isRequestInProcess" (click)="payClicked()">Pay</button>
 
@@ -83,11 +83,11 @@ <h4 class="modal-title pull-left">Payment</h4>
                             <p class="text-gray due-amount hidden-xs">
                                 Total Due:{{item.totalDueAmount | giddhCurrency}}
                                 <span class="red-text cursor-pointer" *ngIf="selectedAccForBulkPayment.length > 1" (click)="removeSelectedAccount(item); removeTransactionsDetailsForm(entryIdx)"><i
-                                        class="icon-trash mr-05"></i>Remove</span>
+                                        class="icon-trash mr-r05"></i>Remove</span>
                             </p>
                         </div>
-                        <div class="bank-deatils-wrapper">
-                            <div class="readonly-bank-deatils">
+                        <div class="bank-details-wrapper">
+                            <div class="readonly-bank-details">
                                 <div class="label-value-data">
                                     <label>Bank Name</label>
                                     <label>{{item?.accountBankDetails?.bankName}}</label>
@@ -116,7 +116,7 @@ <h4 class="modal-title pull-left">Payment</h4>
                             </div>
                             <div class="amount-remark-section">
                                 <div class="d-flex flex-column flex-md-row">
-                                    <div class="form-group pr-15">
+                                    <div class="form-group pd-r15">
                                         <label>Amount<span class="text-danger">*</span></label>
                                         <input class="form-control" name="closingBalanceAmount{{entryIdx}}" maxLength="12" decimalDigitsDirective (blur)="getTotalAmount();preventZero(item.closingBalanceAmount, entryIdx)" [mask]="inputMaskFormat" [(ngModel)]="item.closingBalanceAmount" type="text"
                                             [required]="!isPayClicked" [disabled]="isPayClicked">
@@ -133,9 +133,9 @@ <h4 class="modal-title pull-left">Payment</h4>
                 </ng-container>
 
 
-                <!-- <div class="creditors_detail">
+                <!-- <div class="creditors-detail">
             <p>{{accountDetails?.name}}</p>
-            <div class="contactDetails">
+            <div class="contact-details">
                 <p class="contactNo">
                     {{accountDetails?.mobileNo}}
                 </p>
@@ -189,12 +189,12 @@ <h4 class="modal-title pull-left">Payment</h4>
 
                 <!-- <div>
             <div>
-                <div class="accountDetils">
+                <div class="account-details">
                     <div class="selectMode">
                         <form #paymentForm="ngForm" autocomplete="off">
                             <div class="row mr-b2">
                                 <div class="col-sm-6 col-xs-12">contact-detail
-                                    <div class="form-group custom-select pos-rel">
+                                    <div class="form-group custom-select position-relative">
                                         <label>Select Mode<span class="text-danger">*</span></label>
                                         <div dropdown>
                                             <select class="form-control" [disabled]="OTPsent" [(ngModel)]="mode" name="mode" id="mode">
diff --git a/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.scss b/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.scss
index 9c59b923f72..9731b0f4055 100644
--- a/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.scss
+++ b/apps/web-giddh/src/app/contact/payment-aside/payment-aside.component.scss
@@ -9,62 +9,62 @@
     width: 100%;
 }
 .aside-header {
-    background-color: #fff;
+    background-color: $white;
     padding: 20px 10px;
 }
 .aside-pane {
     padding: 0;
-    background-color: #fff;
+    background-color: $white;
 }
 .aside-title {
     padding-bottom: 0;
     border-bottom: none;
 }
-.creditors_detail {
+.creditors-detail {
     padding: 10px;
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     line-height: 1.6;
 }
-.creditors_detail > p {
+.creditors-detail > p {
     font-size: 16px;
-    color: #2d3b4b;
+    color: $muzli;
 }
-.creditors_detail span.red-text {
-    color: #ff0000;
+.creditors-detail span.red-text {
+    color: $red;
 }
-.contactDetails p {
+.contact-details p {
     font-size: 12px;
-    color: #2d3b4b;
+    color: $muzli;
 }
-.accountDetils {
+.account-details {
     padding: 10px 0;
 }
 form label {
     font-size: 14px;
     margin-bottom: 0;
 }
-.accountDetils .btn-default {
+.account-details .btn-default {
     width: 100%;
     text-align: left;
     background-color: transparent;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
 }
-.accountDetils .btn-group {
+.account-details .btn-group {
     width: 230px;
     display: block;
     text-align: left;
 }
-.accountDetils {
+.account-details {
     padding: 10px;
 }
-.accountDetils span.caret {
+.account-details span.caret {
     position: absolute;
     right: 20px;
     top: 14px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -126,16 +126,16 @@ form label {
 
         }
     }
-    .bank-deatils-wrapper{
+    .bank-details-wrapper{
         border: 1px solid $gainsboro;
         border-radius: 2px;
         margin-top: 3px;
         display: flex;
-        .readonly-bank-deatils {
+        .readonly-bank-details {
             width: 100%;
             max-width: 450px;
             font-size: 14px;
-            background-color: #EAEAEA;
+            background-color: $whisper-color;
             padding: 10px;
             border-right: 1px solid $gainsboro;
             .label-value-data{
@@ -190,14 +190,14 @@ form label {
 }
 @media (max-width: 767px) {
     .selected-bank-details
-    .bank-deatils-wrapper
-    .readonly-bank-deatils {
+    .bank-details-wrapper
+    .readonly-bank-details {
         max-width: 100% !important;
     }
 
-    .bank-deatils-wrapper {
+    .bank-details-wrapper {
         display: block !important;
-        .readonly-bank-deatils {
+        .readonly-bank-details {
             max-width: 100%;
         }
     }
@@ -217,7 +217,7 @@ form label {
     }
     .amount-remark-section .d-flex {
         display: block;
-        .form-group.pr-15 {
+        .form-group.pd-r15 {
             padding-right: 0px;
         }
     }
diff --git a/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.html b/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.html
index c30c4be8b82..eef1ed936c3 100644
--- a/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.html
+++ b/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.html
@@ -2,7 +2,7 @@
     <div class="clearfix mt-2">
         <div class="col-sm-8 font-14">
             <div class="row">
-                <label class="col-md-2 pt-05">Customer Name<span class="text-danger">*</span></label>
+                <label class="col-md-2 pd-t05">Customer Name<span class="text-danger">*</span></label>
                 <div class="col-md-4">
                     <div class="form-group">
                         <sh-select class="text-left dropdown-arrow" name="adjustmentVoucher" placeholder="Customer Name" [notFoundLink]="false"
@@ -13,19 +13,19 @@
                                 </a>
                             </ng-template>
                         </sh-select>
-                        <div class="clearfix font-12 mt-05 line-height-12">
+                        <div class="clearfix font-12 mr-t05 line-height-12">
                             <a href="javascript:void(0)" class="d-inline-block br-1 pr-1 mr-1">Unregistered Business</a>
                             <a href="javascript:void(0)">Customer Details</a>
                         </div>
                     </div>
                 </div>
-                <div class="col-md-4 pt-05">
+                <div class="col-md-4 pd-t05">
                     <label><input type="checkbox">Advance Receipt</label>
                 </div>
             </div>
 
             <div class="row">
-                <label class="col-md-2 pt-05">Attention to</label>
+                <label class="col-md-2 pd-t05">Attention to</label>
                 <div class="col-md-4">
                     <div class="form-group">
                         <input type="text" class="form-control" placeholder="Enter Name">
@@ -34,7 +34,7 @@
             </div>
 
             <div class="row">
-                <label class="col-md-2 pt-05">Receipt Date<span class="text-danger">*</span></label>
+                <label class="col-md-2 pd-t05">Receipt Date<span class="text-danger">*</span></label>
                 <div class="col-md-3">
                     <div class="form-group">
                         <input type="text" class="form-control" placeholder="Receipt Date">
@@ -44,7 +44,7 @@
 
 
             <div class="row">
-                <label class="col-md-2 pt-05">Amount Received<span class="text-danger">*</span></label>
+                <label class="col-md-2 pd-t05">Amount Received<span class="text-danger">*</span></label>
                 <div class="col-md-3">
                     <div class="form-group">
                         <input type="text" class="form-control" placeholder="Amount Received">
@@ -55,8 +55,8 @@
             <div class="row">
                 <div class="col-md-5">
                     <div class="row">
-                        <label class="col-md-5 pt-05">Receipt Mode</label>
-                        <div class="col-md-7 pl-05">
+                        <label class="col-md-5 pd-t05">Receipt Mode</label>
+                        <div class="col-md-7 pd-l05">
                             <div class="form-group">
                                 <sh-select class="text-left dropdown-arrow" name="adjustmentVoucher" placeholder="Receipt Mode" [notFoundLink]="false"
                             [multiple]="false" [ItemHeight]="33">
@@ -72,7 +72,7 @@
                 </div>
 
                 <div class="col-md-5">
-                    <label class="col-md-3 pt-05">Cheque#<span class="text-danger">*</span></label>
+                    <label class="col-md-3 pd-t05">Cheque#<span class="text-danger">*</span></label>
                     <div class="col-md-5">
                         <div class="form-group">
                             <input type="text" class="form-control" placeholder="Cheque">
@@ -83,7 +83,7 @@
 
 
             <div class="row mb-4">
-                <label class="col-md-2 pt-05">Tax on Advance</label>
+                <label class="col-md-2 pd-t05">Tax on Advance</label>
                 <div class="col-md-3">
                     <div class="form-group">
                         <sh-select class="text-left dropdown-arrow" name="adjustmentVoucher" placeholder="Tax on Advance" [notFoundLink]="false"
@@ -124,19 +124,19 @@
         <div class="col-sm-4">
             <div class="text-right mb-3">
                 <p>Amount Received</p>
-                <h2 class="font-26 bold mt-05">Rs. 0.00</h2>
+                <h2 class="font-26 bold mr-t05">Rs. 0.00</h2>
             </div>
         </div>
     </div>
 
 
-    <section class="clearfix text-center create-receipt-footer mt-5">
-        <div class="col-xs-12">
-            <div class="pull-right pr updateMode">
+    <section class="clearfix text-center create-receipt-footer mt-5 row">
+        <div class="col-12">
+            <div class="pull-right pr update-mode">
                 <button class="btn btn-danger d-inline-block v-align-middle" type="button">Clear </button>
                 <span class="d-inline-block v-align-middle relative">
                     <div class="btn-group dropup" dropdown [dropup]="isDropup">
-                        <button class="btn btn-default generateInvoie" type="button" >Generate  Sales
+                        <button class="btn btn-default generate-invoice" type="button" >Generate  Sales
                         </button>
                     <button aria-controls="dropdown-split" id="button-basic" class="btn btn-default dropdown-toggle dropdown-toggle-split"  dropdown-toggle dropdownToggle type="button">
                         <span class="caret"></span>
diff --git a/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.scss b/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.scss
index 12420fba56e..67c36871c33 100644
--- a/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.scss
+++ b/apps/web-giddh/src/app/create-advance-receipt/create-advance-receipt.component.scss
@@ -15,7 +15,7 @@
 }
 .create-receipt-footer .btn-default {
     background: $whisper-color;
-    color: $extra-dark-gray;
+    color: $night-rider;
     border-color: $whisper-color;
 }
 .create-receipt-footer .form-group {
diff --git a/apps/web-giddh/src/app/create/components/header/create.header.component.scss b/apps/web-giddh/src/app/create/components/header/create.header.component.scss
index bcc5f611569..72c0057407d 100644
--- a/apps/web-giddh/src/app/create/components/header/create.header.component.scss
+++ b/apps/web-giddh/src/app/create/components/header/create.header.component.scss
@@ -1,5 +1,7 @@
+@import "../../../../assets/css/color.scss";
+
 header {
-    background: #27273b;
+    background: $valhalla;
     padding: 10px 0;
     .navbar-brand {
         height: auto;
@@ -12,7 +14,7 @@ header {
         margin-top: 2px;
         li {
             a {
-                color: #fff;
+                color: $white;
                 padding: 10px 15px;
                 &:hover {
                     border-radius: 2px;
diff --git a/apps/web-giddh/src/app/create/components/invoice/invoice.component.html b/apps/web-giddh/src/app/create/components/invoice/invoice.component.html
index 2fd517df77d..eaaedeb9a81 100644
--- a/apps/web-giddh/src/app/create/components/invoice/invoice.component.html
+++ b/apps/web-giddh/src/app/create/components/invoice/invoice.component.html
@@ -3,7 +3,7 @@
 
 
 <section>
-    <div class="inv_header">
+    <div class="invoice-steps-header">
         <div class="container">
             <div class="row">
                 <!-- <div class="col-sm-12 text-center">
@@ -15,7 +15,7 @@ <h1 class="text-center">Follow three easy steps below to create Invoice</h1>
             </div>
         </div>
     </div>
-    <div class="inv_content">
+    <div class="invoice-content">
         <div class="container">
             <div class="row">
                 <div>
@@ -27,7 +27,7 @@ <h4>Template 1</h4>
                                     <div class="overlay">
                                         <button class="btn btn-default btn-select">select</button>
                                     </div>
-                                    <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template_img" />
+                                    <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template-img" />
                                 </figure>
                             </a>
                         </div>
@@ -40,7 +40,7 @@ <h4>Template 2</h4>
               <div class="overlay">
                   <button class="btn btn-default btn-select">select</button>
                 </div>
-              <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template_img" />
+              <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template-img" />
          </figure>
         </a>
     </div>
@@ -53,7 +53,7 @@ <h4>Template 3</h4>
               <div class="overlay">
                   <button class="btn btn-default btn-select">select</button>
                 </div>
-              <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template_img" />
+              <img src="{{imgPath}}Outside Invoice Sample.jpg" class="template-img" />
          </figure>
         </a>
       </div>
diff --git a/apps/web-giddh/src/app/create/components/invoice/invoice.component.scss b/apps/web-giddh/src/app/create/components/invoice/invoice.component.scss
index 3664ba8a75c..e824c7701f4 100644
--- a/apps/web-giddh/src/app/create/components/invoice/invoice.component.scss
+++ b/apps/web-giddh/src/app/create/components/invoice/invoice.component.scss
@@ -1,17 +1,19 @@
-.inv_header {
-    background: #fff8eb;
+@import "../../../../assets/css/color.scss";
+
+.invoice-steps-header {
+    background: $floral-white;
     h1 {
         font-size: 20px;
-        color: #333333;
+        color: $night-rider;
         font-family: "opensans-regular";
         padding: 0;
-        border-bottom: 1px solid #333333;
+        border-bottom: 1px solid $night-rider;
         display: inline-block;
         margin: 28px 0;
     }
     span {
-        color: #e14d26;
-        border-bottom: 1px solid #e14d26;
+        color: $cinnabar-orange;
+        border-bottom: 1px solid $cinnabar-orange;
         display: inline-block;
         font-family: "opensans-regular";
         font-size: 20px;
@@ -21,8 +23,8 @@
     }
 }
 
-.inv_content {
-    background: #fff;
+.invoice-content {
+    background: $white;
     padding-bottom: 20px;
 }
 
@@ -32,7 +34,7 @@
     overflow: hidden;
     figure {
         position: relative;
-        .template_img {
+        .template-img {
             width: 100%;
         }
     }
@@ -52,8 +54,8 @@
             top: 50%;
             left: 50%;
             transform: translateX(-50%);
-            background: #e6e6e6;
-            color: #f26122;
+            background: $whisper;
+            color: $cinnabar-orange;
             font-size: 16px;
         }
     }
diff --git a/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.html b/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.html
index bc3fae1db84..9ee05484439 100644
--- a/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.html
+++ b/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.html
@@ -14,7 +14,7 @@
                                 <div class="ico-head">Sender’s Details</div>
                             </div>
                         </div>
-                        <div [collapse]="isOthrDtlCollapsed" class="clearfix pdL3 pdR3 col-xs-12 mr0">
+                        <div [collapse]="isOthrDtlCollapsed" class="clearfix pd-l3 pd-r3 col-xs-12 m-0">
                             <div class="row mt13" formGroupName="companyDetails">
                                 <!-- <div class="form-group col-xs-2">
           <label>Ship Date</label>
@@ -42,7 +42,7 @@
                                                 <sh-select #stateEl formControlName="stateCode" class="splSales"
                                                     [options]="statesSource$ | async" [width]="139"></sh-select>
                                             </div>
-                                            <div class="mr-t2 pull-left width100">
+                                            <div class="mr-t2 pull-left width-100">
                                                 <div class="form-group col-xs-8">
                                                     <label>PAN</label>
                                                     <input type="text" class="form-control"
@@ -58,7 +58,7 @@
                                     </div>
                                 </div>
                                 <div class="col-xs-4">
-                                    <div class="form-group width100">
+                                    <div class="form-group width-100">
                                         <label>Sender’s address</label>
                                         <textarea class="form-control" formControlName="address" rows="5"></textarea>
                                     </div>
@@ -98,7 +98,7 @@
                                 <div class="ico-head">Customer Details</div>
                             </div>
                         </div>
-                        <div [collapse]="isCustDtlCollapsed" class="clearfix pdL3 pdR3 col-xs-12 mr0">
+                        <div [collapse]="isCustDtlCollapsed" class="clearfix pd-l3 pd-r3 col-xs-12 m-0">
                             <div class="row mt13" formGroupName="userDetails">
                                 <!-- commented by sagar sir -->
                                 <div class="form-group col-xs-4"
@@ -115,7 +115,7 @@
 /> -->
                                     <sh-select class="sh-form_control" formControlName="countryCode"
                                         [options]="countrySource"
-                                        [ngClass]="{ 'has-error': isFormSubmitted && CreateInvoiceForm.controls['userDetails'].get('countryCode').invalid }">
+                                        [ngClass]="{ 'has-error': isFormSubmitted && CreateInvoiceForm.controls['userDetails'].get('countryCode').invalid }" [isRequired]="true">
                                     </sh-select>
                                 </div>
 
@@ -152,7 +152,7 @@
                                 <div class="ico-head">Mailing Details</div>
                             </div>
                         </div>
-                        <div [collapse]="isMlngAddrCollapsed" class="clearfix pdL3 pdR3 col-xs-12 mr0">
+                        <div [collapse]="isMlngAddrCollapsed" class="clearfix pd-l3 pd-r3 col-xs-12 m-0">
                             <div class="row mt13">
                                 <div formGroupName="userDetails">
                                     <div class=""
@@ -238,7 +238,7 @@
                             </div>
 
                         </div>
-                        <div [collapse]="isGenDtlCollapsed" class="clearfix pdL3 pdR3 col-xs-12 mr0">
+                        <div [collapse]="isGenDtlCollapsed" class="clearfix pd-l3 pd-r3 col-xs-12 m-0">
                             <div class="row mt13">
                                 <!-- <div class="form-group col-xs-4">
     <label>Attention to</label>
@@ -318,8 +318,8 @@
             </section>
         </div>
     </div>
-    <div class="row mr-t">
-        <section class="clearfix pd-1 pdB2 mr-b2 whiteBg">
+    <div class="row mr-t05">
+        <section class="clearfix pd-1 pd-b2 mr-b2 white-bg">
             <div class="container">
                 <table class="table" formArrayName="entries">
                     <thead>
@@ -440,7 +440,7 @@
 </td> -->
                             <!-- <td class="tax-list-dd-wrap dropdown-container"> -->
                             <!-- <sales-tax-list
-class="salesTax"
+class="sales-tax"
 [showTaxPopup]="false"
 [taxes]="companyTaxesList$ | async"
 [applicableTaxes]="transaction.applicableTaxes"
@@ -453,7 +453,7 @@
 <input type="number" name="transaction.total_{{entryIdx}}" class="form-control text-right" readonly [(ngModel)]="transaction.total"
 />
 </td>-->
-                            <td class="action-panel-td alR">
+                            <td class="action-panel-td text-right">
                                 <span class="cp" *ngIf="last" (click)="addBlankRow()">
                                     <i class="icon-add" aria-hidden="true"></i>
                                 </span>
@@ -477,56 +477,53 @@
                                 </div>
                             </td>
                             <td width="50%" formGroupName="uiCalculation">
-                                <section class="tableSec">
-                                    <div class="tableRow">
-                                        <div class="tableCell">Total Amount</div>
-                                        <div class="tableCell figureCell">{{CreateInvoiceForm.controls['uiCalculation'].get('subTotal').value
-                    | number:'1.2-2'}}
+                                <section class="tabl-sec">
+                                    <div class="table-row">
+                                        <div class="table-cell">Total Amount</div>
+                                        <div class="table-cell figure-cell">{{CreateInvoiceForm.controls['uiCalculation'].get('subTotal').value | number:'1.2-2'}}
                                         </div>
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">Discount</div>
-                                        <div class="tableCell figureCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">Discount</div>
+                                        <div class="table-cell figure-cell">
                                             {{CreateInvoiceForm.controls['uiCalculation'].get('totalDiscount').value | number:'1.2-2'}}
                                         </div>
 
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">Taxable Value</div>
-                                        <div class="tableCell figureCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">Taxable Value</div>
+                                        <div class="table-cell figure-cell">
                                             {{CreateInvoiceForm.controls['uiCalculation'].get('totalTaxableValue').value | number:'1.2-2'}}
                                         </div>
 
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">Tax</div>
-                                        <div class="tableCell figureCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">Tax</div>
+                                        <div class="table-cell figure-cell">
                                             {{CreateInvoiceForm.controls['uiCalculation'].get('gstTaxesTotal').value | number:'1.2-2'}}
                                         </div>
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">
                                             <strong>Total</strong>
                                         </div>
-                                        <div class="tableCell figureCell">
-                                            <strong>{{CreateInvoiceForm.controls['uiCalculation'].get('grandTotal').value |
-                      number:'1.2-2'}}</strong>
+                                        <div class="table-cell figure-cell">
+                                            <strong>{{CreateInvoiceForm.controls['uiCalculation'].get('grandTotal').value | number:'1.2-2'}}</strong>
                                         </div>
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">Deposit</div>
-                                        <div class="tableCell figureCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">Deposit</div>
+                                        <div class="table-cell figure-cell">
                                             <input type="number" placeholder="Amount" class="form-control"
                                                 formControlName="depositAmount" />
                                         </div>
                                     </div>
-                                    <div class="tableRow">
-                                        <div class="tableCell">
+                                    <div class="table-row">
+                                        <div class="table-cell">
                                             <strong>Balance Due</strong>
                                         </div>
-                                        <div class="tableCell figureCell">
-                                            <strong>{{CreateInvoiceForm.controls['uiCalculation'].get('balanceDue').value |
-                      number:'1.2-2'}}</strong>
+                                        <div class="table-cell figure-cell">
+                                            <strong>{{CreateInvoiceForm.controls['uiCalculation'].get('balanceDue').value | number:'1.2-2'}}</strong>
                                         </div>
                                     </div>
                                 </section>
@@ -545,7 +542,7 @@
 <section class="">
     <section id="actionPane" class="text-center">
         <div class="container">
-            <div class="pull-right pr">
+            <div class="pull-right position-relative">
                 <!-- <button type="button" (click)="resetInvoiceForm(invoiceForm)" class="btn btn-danger">Clear</button>
   <button type="button" (click)="triggerSubmitInvoiceForm(invoiceForm)" class="btn btn-default">Generate {{toggleActionText}} &amp; Update A/c</button> -->
                 <button type="submit" class="btn btn-success" (click)="onSubmitInvoiceForm(invoiceForm)">Generate
diff --git a/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.scss b/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.scss
index 26c1c940bd0..d9a4bedd63d 100644
--- a/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.scss
+++ b/apps/web-giddh/src/app/create/components/invoice/templates/letter/letter.template.component.scss
@@ -96,7 +96,7 @@
             vertical-align: baseline;
         }
     }
-    .vmiddle {
+    .vertical-align-middle {
         vertical-align: middle;
     }
     .note {
@@ -181,7 +181,7 @@ $themeClr: #fe5f00;
 }
 
 // common class for extend
-.whiteBg {
+.white-bg {
     background-color: white;
 }
 
@@ -269,35 +269,35 @@ $themeClr: #fe5f00;
         font-weight: 400;
         @include marg(B, 5px);
     }
-    &.size_175 {
+    &.size-175 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 175px;
         }
     }
-    &.size_240 {
+    &.size-240 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 240px;
         }
     }
-    &.size_340 {
+    &.size-340 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 340px;
         }
     }
-    &.size_380 {
+    &.size-380 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 380px;
         }
     }
-    &.noMarg {
+    &.no-margin {
         @include marg(A, 0);
     }
     .form-control.voucher-selector {
@@ -388,29 +388,29 @@ $themeClr: #fe5f00;
     font-size: 14px;
 }
 
-.fs12 {
+.font-12 {
     font-size: 12px;
 }
 
-.fs11 {
+.font-11 {
     font-size: 11px;
 }
 
-.tableSec {
+.table-sec {
     display: table;
     width: 100%;
     font-size: 14px;
-    .tableRow {
+    .table-row {
         display: table-row;
         vertical-align: top;
-        .tableCell {
+        .table-cell {
             // line-height: 40px;
             vertical-align: middle;
             text-align: right;
             padding-bottom: 7px;
             display: table-cell;
         }
-        .figureCell {
+        .figure-cell {
             width: 200px;
             padding-right: 80px;
             input {
@@ -449,7 +449,7 @@ ng-select.splSales {
     font-weight: 100;
 }
 
-.salesTax .taxInput {
+.sales-tax .tax-input {
     text-align: right;
 }
 
diff --git a/apps/web-giddh/src/app/create/components/invoice/templates/sample/sample.template.component.html b/apps/web-giddh/src/app/create/components/invoice/templates/sample/sample.template.component.html
index 7c45113f6bf..6000e9b7cc8 100644
--- a/apps/web-giddh/src/app/create/components/invoice/templates/sample/sample.template.component.html
+++ b/apps/web-giddh/src/app/create/components/invoice/templates/sample/sample.template.component.html
@@ -1,6 +1,6 @@
 <section class="container">
     <div class="row">
-        <div class="col-xs-12 alC">
+        <div class="col-xs-12 text-center">
             <h1>Hello from Sample Template</h1>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/create/components/invoice/templates/template.component.html b/apps/web-giddh/src/app/create/components/invoice/templates/template.component.html
index 4898f398ed4..df07720b681 100644
--- a/apps/web-giddh/src/app/create/components/invoice/templates/template.component.html
+++ b/apps/web-giddh/src/app/create/components/invoice/templates/template.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <section>
-    <div class="inv_header">
+    <div class="invoice-steps-header">
         <div class="container">
             <div class="row">
                 <!-- <div class="col-sm-12 text-center">
@@ -21,16 +21,6 @@ <h1 class="text-center">Follow three easy steps below to create Invoice</h1>
                 <div element-view-container-ref #letterTemplateComponent="elementviewcontainerref"></div>
                 <div *ngIf="templateId === 't002'">You'll enjoy {{TEMPLATES[1]}} template</div>
                 <div *ngIf="templateId === 't003'">You'll enjoy {{TEMPLATES[2]}} template</div>
-                <!-- download, emial, save -->
-                <!-- <div class="">
-  <div class="clearfix">
-    <button class="btn btn-primary mr-b1">Download</button>
-  </div>
-  <div class="clearfix">
-    <button class="btn btn-success mr-b1">Send Email</button>
-  </div>
-  <button class="btn btn-success">Save</button> for future reference
-</div> -->
             </div>
         </div>
     </section>
@@ -46,8 +36,8 @@ <h1 class="text-center">Follow three easy steps below to create Invoice</h1>
                             <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close">×</span>
                             <h3>Share Invoice</h3>
                         </div>
-                        <div class="modal-body mrB4" id="SharePop">
-                            <div class="modal_wrap">
+                        <div class="modal-body mr-b4" id="SharePop">
+                            <div class="modal-wrap">
                                 <div class="form-group add-mailer">
                                     <!--share invoice from-->
                                     <form name="shareInvoiceForm" novalidate="" class="" autocomplete="off">
diff --git a/apps/web-giddh/src/app/create/components/invoice/templates/template.component.scss b/apps/web-giddh/src/app/create/components/invoice/templates/template.component.scss
index e121401030e..800d19993a6 100644
--- a/apps/web-giddh/src/app/create/components/invoice/templates/template.component.scss
+++ b/apps/web-giddh/src/app/create/components/invoice/templates/template.component.scss
@@ -2,7 +2,7 @@ h4 {
     font-size: 18px;
 }
 
-.bdrD {
+.bd-rd {
     border-bottom: 2px dotted #000;
 }
 
@@ -18,12 +18,12 @@ h4 {
     display: block;
 }
 
-.invoice_area {
+.invoice-area {
     max-width: 8.3in;
     float: left;
 }
 
-.invoice_sidebar {
+.invoice-sidebar {
     float: left;
     margin-left: 30px;
     .form-group {
@@ -98,13 +98,10 @@ h4 {
         padding: 10px 0 0;
         line-height: 20px;
     }
-    .pos-rel {
-        position: relative;
-    }
     .pos-abs {
         position: absolute;
     }
-    .primary-clr {
+    .primary-color {
         color: $color_punch_approx;
     }
     .text-center {
@@ -117,7 +114,7 @@ h4 {
         color: $color_mountain_mist_approx;
     }
     .btn-link {
-        color: #10aae0;
+        color: #019ce1;
         text-decoration: underline;
     }
     .text-right {
@@ -136,7 +133,7 @@ h4 {
         float: center;
     }
 
-    .mrL2 {
+    .mr-l2 {
         margin-left: 20px;
     }
     .mr-b2 {
@@ -146,8 +143,8 @@ h4 {
         margin-bottom: 10px;
     }
 
-    .bdrB {
-        border-bottom: 1px solid $color_storm_dust_approx;
+    .bd-rb {
+        border-bottom: 1px solid #ddd;
     }
     .pdRL3 {
         padding-right: 30px !important;
@@ -195,7 +192,7 @@ h4 {
     border-left: 1px solid $color_punch_approx !important;
 }
 
-.inv_header {
+.invoice-steps-header {
     background: #fff8eb;
     h1 {
         font-size: 20px;
diff --git a/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.html b/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.html
index b6347a2ac13..f769499f0dc 100644
--- a/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.html
+++ b/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.html
@@ -1,5 +1,5 @@
 <div id="" class="">
-    <div class="modal-header themeBg clearfix">
+    <div class="modal-header theme-bg clearfix">
         <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="onCancel()">×</span>
         <!-- <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i> -->
@@ -20,7 +20,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
 
                 </div>
 
-                <div class="col-xs-12 col-sm-12 mr-t2 pdT2 bdrT">
+                <div class="col-xs-12 col-sm-12 mr-t2 pd-t2 bd-rt">
                     <div class="row">
                         <div class="col-sm-5 col-xs-12">
                             <label for="">Particulars</label>
@@ -31,7 +31,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                         <div class="col-sm-7 col-xs-12">
                             <div class="row">
                                 <div class="col-6 col-sm-6">
-                                    <div class="checkbox square-switch mb-1">
+                                    <div class="checkbox square-switch mr-b1">
                                         <input type="checkbox" id="includeParticulars" formControlName="includeParticulars" />
                                         <label for="includeParticulars">
                                             <span class="pull-left"
@@ -107,7 +107,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
 
                 <div class="col-xs-12 col-sm-12">
-                    <div class="form-group toggle-btn mrB">
+                    <div class="form-group toggle-btn mr-b05">
                         <label class="cp" (click)="toggleOtherDetails()">
                             <i class="cp collapse-icons" aria-hidden="true"
                                 [ngClass]="{'icon-minus': showOtherDetails, 'icon-plus': !showOtherDetails}"></i>Other
@@ -203,7 +203,6 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                     </div>
                 </ng-container>
                 <div class="col-xs-12 col-sm-12 text-right">
-                    <button class="btn btn-default" type="button" (click)="go(true)">Export</button>
                     <button class="btn btn-success" type="button" (click)="go()">Search</button>
                     <!-- <button class="btn btn-update" type="button" (click)="onSearch()">Search & Export</button> -->
                 </div>
diff --git a/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.ts b/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.ts
index 76af26c7a94..b1e3aa875f5 100644
--- a/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.ts
+++ b/apps/web-giddh/src/app/daybook/advance-search/daybook-advance-search.component.ts
@@ -1,5 +1,4 @@
 import { Observable, of as observableOf, ReplaySubject } from 'rxjs';
-
 import { takeUntil } from 'rxjs/operators';
 import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -8,10 +7,8 @@ import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnIni
 import * as moment from 'moment';
 import { createSelector } from 'reselect';
 import { IOption } from 'apps/web-giddh/src/app/theme/ng-select/option.interface';
-import { GroupService } from 'apps/web-giddh/src/app/services/group.service';
 import { InventoryAction } from 'apps/web-giddh/src/app/actions/inventory/inventory.actions';
 import { AppState } from 'apps/web-giddh/src/app/store';
-import { DaybookActions } from 'apps/web-giddh/src/app/actions/daybook/daybook.actions';
 import { AccountService } from 'apps/web-giddh/src/app/services/account.service';
 import { DayBookRequestModel } from 'apps/web-giddh/src/app/models/api-models/DaybookRequest';
 import { DaterangePickerComponent } from '../../theme/ng2-daterangepicker/daterangepicker.component';
@@ -268,118 +265,118 @@ export class DaybookAdvanceSearchModelComponent implements OnInit, OnChanges, On
     /**
      * onRangeSelect
      */
-    public onRangeSelect(type: string, data: IOption) {
-        switch (type + '-' + data.value) {
-            case 'amount-greaterThan':
-                this.advanceSearchForm.get('includeAmount').patchValue(true);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('amountLessThan').patchValue(false);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(false);
-                break;
-            case 'amount-lessThan':
-                this.advanceSearchForm.get('includeAmount').patchValue(true);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('amountLessThan').patchValue(true);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(false);
-                break;
-            case 'amount-greaterThanOrEquals':
-                this.advanceSearchForm.get('includeAmount').patchValue(true);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('amountLessThan').patchValue(false);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(true);
-                break;
-            case 'amount-lessThanOrEquals':
-                this.advanceSearchForm.get('includeAmount').patchValue(true);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('amountLessThan').patchValue(true);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(true);
-                break;
-            case 'amount-equals':
-                this.advanceSearchForm.get('includeAmount').patchValue(true);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('amountLessThan').patchValue(false);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(true);
-                break;
-            case 'amount-exclude':
-                this.advanceSearchForm.get('includeAmount').patchValue(false);
-                this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('amountLessThan').patchValue(false);
-                this.advanceSearchForm.get('amountEqualTo').patchValue(false);
-                break;
-            case 'inventoryQty-greaterThan':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(false);
-                break;
-            case 'inventoryQty-lessThan':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(false);
-                break;
-            case 'inventoryQty-greaterThanOrEquals':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
-                break;
-            case 'inventoryQty-lessThanOrEquals':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
-                break;
-            case 'inventoryQty-equals':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
-                break;
-            case 'inventoryQty-exclude':
-                this.advanceSearchForm.get('inventory.includeQuantity').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(false);
-                break;
-            case 'inventoryVal-greaterThan':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(false);
-                break;
-            case 'inventoryVal-lessThan':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(false);
-                break;
-            case 'inventoryVal-greaterThanOrEquals':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(true);
-                break;
-            case 'inventoryVal-lessThanOrEquals':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(true);
-                break;
-            case 'inventoryVal-equals':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(true);
-                break;
-            case 'inventoryVal-exclude':
-                this.advanceSearchForm.get('inventory.includeItemValue').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemGreaterThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemLessThan').patchValue(false);
-                this.advanceSearchForm.get('inventory.includeItemEqualTo').patchValue(false);
-                break;
-        }
-    }
+	public onRangeSelect(type: string, data: IOption) {
+		switch (type + '-' + data.value) {
+			case 'amount-greaterThan':
+				this.advanceSearchForm.get('includeAmount').patchValue(true);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('amountLessThan').patchValue(false);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(false);
+				break;
+			case 'amount-lessThan':
+				this.advanceSearchForm.get('includeAmount').patchValue(true);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('amountLessThan').patchValue(true);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(false);
+				break;
+			case 'amount-greaterThanOrEquals':
+				this.advanceSearchForm.get('includeAmount').patchValue(true);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('amountLessThan').patchValue(false);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(true);
+				break;
+			case 'amount-lessThanOrEquals':
+				this.advanceSearchForm.get('includeAmount').patchValue(true);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('amountLessThan').patchValue(true);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(true);
+				break;
+			case 'amount-equals':
+				this.advanceSearchForm.get('includeAmount').patchValue(true);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('amountLessThan').patchValue(false);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(true);
+				break;
+			case 'amount-exclude':
+				this.advanceSearchForm.get('includeAmount').patchValue(false);
+				this.advanceSearchForm.get('amountGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('amountLessThan').patchValue(false);
+				this.advanceSearchForm.get('amountEqualTo').patchValue(true);
+				break;
+			case 'inventoryQty-greaterThan':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(false);
+				break;
+			case 'inventoryQty-lessThan':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(false);
+				break;
+			case 'inventoryQty-greaterThanOrEquals':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
+				break;
+			case 'inventoryQty-lessThanOrEquals':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
+				break;
+			case 'inventoryQty-equals':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(true);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
+				break;
+			case 'inventoryQty-exclude':
+				this.advanceSearchForm.get('inventory.includeQuantity').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.quantityEqualTo').patchValue(true);
+				break;
+			case 'inventoryVal-greaterThan':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(false);
+				break;
+			case 'inventoryVal-lessThan':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(false);
+				break;
+			case 'inventoryVal-greaterThanOrEquals':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(true);
+				break;
+			case 'inventoryVal-lessThanOrEquals':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(true);
+				break;
+			case 'inventoryVal-equals':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(true);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(true);
+				break;
+			case 'inventoryVal-exclude':
+				this.advanceSearchForm.get('inventory.includeItemValue').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueGreaterThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueLessThan').patchValue(false);
+				this.advanceSearchForm.get('inventory.itemValueEqualTo').patchValue(true);
+				break;
+		}
+	}
 
     /**
      * toggleOtherDetails
@@ -443,9 +440,9 @@ export class DaybookAdvanceSearchModelComponent implements OnInit, OnChanges, On
                 quantityGreaterThan: true,
                 includeItemValue: true,
                 itemValue: null,
-                includeItemLessThan: true,
-                includeItemEqualTo: true,
-                includeItemGreaterThan: false
+                itemValueLessThan: true,
+                itemValueEqualTo: true,
+                itemValueGreaterThan: false
             }),
         });
     }
diff --git a/apps/web-giddh/src/app/daybook/daybook.component.html b/apps/web-giddh/src/app/daybook/daybook.component.html
index 5a3e157ee5f..cf6e9b5d2c8 100644
--- a/apps/web-giddh/src/app/daybook/daybook.component.html
+++ b/apps/web-giddh/src/app/daybook/daybook.component.html
@@ -6,8 +6,8 @@
     </div>
 </div>
 
-<section class="container nopad"></section>
-<!-- <div class="top-bar col-xs-12 bdrB">
+<section class="container p-0"></section>
+<!-- <div class="top-bar col-xs-12 bd-rb">
   <h1 class="section-title">DayBook</h1>
 </div> -->
 <div class="container-fluid">
@@ -15,12 +15,12 @@ <h1 class="section-title">DayBook</h1>
 </div>
 
 <ng-container *ngIf="!showLoader">
-<div class="transactions-page pt-15 pos-rel clearfix">
+<div class="transactions-page pd-t15 position-relative clearfix">
 
     <!-- ledger header -->
     <div class="col-md-12">
-        <div class="">
-            <div class="form-group mr-15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
+        <div>
+            <div class="form-group mr-r15 pull-left linked-entities" *ngIf="currentCompanyBranches?.length > 2">
                 <div class="form-group">
                     <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false"
                         [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)" [isFilterEnabled]="true"
@@ -37,7 +37,7 @@ <h1 class="section-title">DayBook</h1>
                                     </span>
                                     <span class="entity-details">
                                         <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                        <div class="item-unq giddh-limit single-line-clamp">
+                                        <div class="item-unique giddh-limit single-line-clamp">
                                             {{ option.name || '-' }}
                                         </div>
                                     </span>
@@ -55,12 +55,10 @@ <h1 class="section-title">DayBook</h1>
                 <div class="form-group cursor-pointer">
 
 
-                    <div class="advance-icon" style="align-items: center" tooltip="Advance Search" (click)="onOpenAdvanceSearch()">
+                    <div class="advance-icon align-items-center" tooltip="Advance Search" (click)="onOpenAdvanceSearch()">
                         <span class="icon-advance-filter"></span>
                     </div>
 
-                    <!-- <button class="btn-link pdL0" (click)="onOpenAdvanceSearch()">Advance Search</button> -->
-                    <!-- <button type="button" class="btn btn-success" (click)="go()">GO</button> -->
 
                 </div>
                 <div class="form-group expand-collapse-btn">
@@ -76,10 +74,10 @@ <h1 class="section-title">DayBook</h1>
                     </button>
                 </div>
                 <div class="expand-export">
-                    <button type="button" class="btn btn-default expandBtnHideDesktop" (click)="toggleExpand()">{{ isAllExpanded ? 'Collapse All' :'Expand All'}}
+                    <button type="button" class="btn btn-default expand-btn-hide-desktop" (click)="toggleExpand()">{{ isAllExpanded ? 'Collapse All' :'Expand All'}}
                     </button>
                     <button type="button" class="btn btn-default export-btn pull-right"
-                        (click)="exportDaybook()">Export</button>
+                        (click)="exportDaybook()" [disabled]="!((daybookData$ | async)?.entries?.length > 0)">Export</button>
                 </div>
 
             </div>
@@ -90,15 +88,13 @@ <h1 class="section-title">DayBook</h1>
 </div>
 
 <div class="container-fluid">
-    <div class="box clearfix mt-15">
-        <div class="text-center mr-b2 transctionReport">
-            <!-- <h2 class="account_Name fs20 primary_clr">{{companyName | uppercase}}</h2>
-      <br /> -->
+    <div class="box clearfix mr-t15">
+        <div class="text-center mr-b2 transaction-report">
             <p>Transaction Report</p>
             <p>{{daybookQueryRequest.from }} - {{ daybookQueryRequest.to}}</p>
         </div>
 
-        <div class=" clearfix trial-balance table-responsive">
+        <div class="clearfix trial-balance table-responsive">
 
             <table class="tb-head table-bordered table basic on-mobile-view">
                 <thead>
@@ -106,18 +102,18 @@ <h1 class="section-title">DayBook</h1>
                         <th>Date</th>
                         <th>Particular</th>
                         <th>Vch. Name</th>
-                        <th class=" text-right">Vch. No.</th>
-                        <th class=" text-right">Debit Amt</th>
-                        <th class=" text-right">Credit Amt</th>
+                        <th class="text-right">Vch. No.</th>
+                        <th class="text-right">Debit Amt</th>
+                        <th class="text-right">Credit Amt</th>
 
                         <ng-container *ngIf="isEntryExpanded">
                             <th>Product/Service
                             </th>
-                            <th class=" text-right">Qty.
+                            <th class="text-right">Qty.
                             </th>
                             <th>Unit
                             </th>
-                            <th class=" text-right">Rate
+                            <th class="text-right">Rate
                             </th>
                             <th>HSN/SAC
                             </th>
@@ -142,10 +138,10 @@ <h1 class="section-title">DayBook</h1>
                     </tr>
                     <ng-container *ngIf="entry !== undefined && entry.isExpanded">
                         <tr *ngFor="let details of entry.otherTransactions">
-                            <td class="hideTD"></td>
+                            <td class="hide-td"></td>
                             <td data-title="Particular">{{ details.particular.name }}</td>
-                            <td class="hideTD"></td>
-                            <td class="hideTD"></td>
+                            <td class="hide-td"></td>
+                            <td class="hide-td"></td>
                             <td class="text-right" data-title="Debit Amt">
                                 <span *ngIf="details.type === 'DEBIT'">{{ details.amount || 0 |giddhCurrency}}</span>
                                 <span *ngIf="details.type !== 'DEBIT'">-</span>
@@ -178,26 +174,21 @@ <h1 class="section-title">DayBook</h1>
                         </tr>
                     </ng-container>
                 </tbody>
-
             </table>
-
-
-
-            <div>
-            </div>
         </div>
 
-        <div class=" mr-t2 text-center">
-            <small class="grey" *ngIf="(daybookData$ | async)?.totalItems">{{(daybookData$ | async)?.totalItems  |giddhCurrency}}
+        <div class="mr-t2 text-center">
+            <small class="grey" *ngIf="(daybookData$ | async)?.totalItems">{{(daybookData$ | async)?.totalItems}}
                 Transactions
-                | {{(daybookData$ | async)?.totalPages  |giddhCurrency}} Pages
+                | {{(daybookData$ | async)?.totalPages}} Pages
             </small>
             <small class="grey" *ngIf="!((daybookData$ | async)?.totalItems)">0 Transactions | 0 Pages</small>
         </div>
 
         <!-- pagination -->
         <div class="mt-1">
-            <div id="pagination" element-view-container-ref #paginationChild=elementviewcontainerref></div>
+            <pagination [totalItems]="daybookData?.totalItems" [(ngModel)]="daybookData.page" [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="daybookData?.count" [rotate]="false" (pageChanged)="pageChanged($event)">
+            </pagination>
         </div>
         <!-- pagination -->
 
diff --git a/apps/web-giddh/src/app/daybook/daybook.component.scss b/apps/web-giddh/src/app/daybook/daybook.component.scss
index ac0e8492fe2..fda83791505 100644
--- a/apps/web-giddh/src/app/daybook/daybook.component.scss
+++ b/apps/web-giddh/src/app/daybook/daybook.component.scss
@@ -19,7 +19,7 @@
 .input-wrapper {
     position: relative;
     display: block;
-    background-color: #fff;
+    background-color: $white;
 }
 .input-wrapper:before {
     position: absolute;
@@ -45,18 +45,18 @@
     -webkit-box-align: center;
     align-items: center;
     font-size: 18px;
-    margin-left: 7px;
+    margin-left: 15px;
     border: 1px solid $gainsboro;
     border-radius: 2px;
     color: $midnight-blue;
-    margin-right: 7px;
-    background: #fff;
+    margin-right: 15px;
+    background: $white;
     cursor: pointer;
 }
 .table > tbody + tbody {
     border-top: none;
 }
-.expandBtnHideDesktop {
+.expand-btn-hide-desktop {
     display: none;
 }
 .expand-export {
@@ -85,13 +85,13 @@
     .on-mobile-view th {
         display: none !important;
     }
-    .hideTD {
+    .hide-td {
         display: none;
     }
-    .transctionReport {
+    .transaction-report {
         margin-bottom: 0;
     }
-    td.text-right.hideTd {
+    td.text-right.hide-td {
         display: none;
     }
 }
@@ -99,13 +99,11 @@
     .expand-collapse-btn.form-group {
         display: none !important;
     }
-    .expandBtnHideDesktop {
+    .expand-btn-hide-desktop {
         display: inline-block;
     }
     .expand-export {
         margin-top: 10px;
-    }
-    .expand-export {
         float: none;
     }
 }
@@ -119,3 +117,10 @@
 .daybook-table-tbody > tr {
     cursor: pointer;
 }
+.table-container section div > div {
+    padding: 8px 8px;
+}
+
+.trial-balance.table-container > div > section {
+    border-left: 0;
+}
diff --git a/apps/web-giddh/src/app/daybook/daybook.component.ts b/apps/web-giddh/src/app/daybook/daybook.component.ts
index b08d6fcd24c..58a37a1a698 100644
--- a/apps/web-giddh/src/app/daybook/daybook.component.ts
+++ b/apps/web-giddh/src/app/daybook/daybook.component.ts
@@ -1,10 +1,9 @@
-import { ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Store, select } from '@ngrx/store';
 import { DaybookActions } from 'apps/web-giddh/src/app/actions/daybook/daybook.actions';
 import { cloneDeep } from 'apps/web-giddh/src/app/lodash-optimized';
 import { AppState } from 'apps/web-giddh/src/app/store';
 import * as moment from 'moment/moment';
-import { PaginationComponent } from 'ngx-bootstrap/pagination';
 import { BsModalRef, BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
 import { Observable, of as observableOf, ReplaySubject } from 'rxjs';
 import { map, take, takeUntil } from 'rxjs/operators';
@@ -12,7 +11,6 @@ import { CompanyActions } from '../actions/company.actions';
 import { StateDetailsRequest } from '../models/api-models/Company';
 import { DayBookResponseModel } from '../models/api-models/Daybook';
 import { DaybookQueryRequest } from '../models/api-models/DaybookRequest';
-import { ElementViewContainerRef } from '../shared/helpers/directives/elementViewChild/element.viewchild.directive';
 import { DaterangePickerComponent } from '../theme/ng2-daterangepicker/daterangepicker.component';
 import { GIDDH_DATE_FORMAT, GIDDH_NEW_DATE_FORMAT_UI } from '../shared/helpers/defaultDateFormat';
 import { DaybookAdvanceSearchModelComponent } from './advance-search/daybook-advance-search.component';
@@ -24,17 +22,9 @@ import { OrganizationType } from '../models/user-login-state';
 @Component({
     selector: 'daybook',
     templateUrl: './daybook.component.html',
-    styleUrls: [`./daybook.component.scss`],
-    styles: [`
-    .table-container section div > div {
-      padding: 8px 8px;
-    }
-
-    .trial-balance.table-container > div > section {
-      border-left: 0;
-    }
-  `]
+    styleUrls: [`./daybook.component.scss`]
 })
+
 export class DaybookComponent implements OnInit, OnDestroy {
     public companyName: string;
     /** True, If loader is working */
@@ -50,7 +40,6 @@ export class DaybookComponent implements OnInit, OnDestroy {
     @ViewChild('advanceSearchModel', {static: true}) public advanceSearchModel: ModalDirective;
     @ViewChild('exportDaybookModal', {static: true}) public exportDaybookModal: ModalDirective;
     @ViewChild('dateRangePickerCmp', { read: DaterangePickerComponent, static: false }) public dateRangePickerCmp: DaterangePickerComponent;
-    @ViewChild('paginationChild', {static: false}) public paginationChild: ElementViewContainerRef;
     /** Daybook advance search component reference */
     @ViewChild('daybookAdvanceSearch', {static: true}) public daybookAdvanceSearchModelComponent: DaybookAdvanceSearchModelComponent;
     /** True, if entry expanded (at least one entry) */
@@ -89,11 +78,14 @@ export class DaybookComponent implements OnInit, OnDestroy {
 
     private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);
     private searchFilterData: any = null;
+    /** This will hold the daybook api response */
+    public daybookData: any = {};
+    /** This will hold if today is selected in universal */
+    public todaySelected: boolean = false;
 
     constructor(
         private changeDetectorRef: ChangeDetectorRef,
         private _companyActions: CompanyActions,
-        private componentFactoryResolver: ComponentFactoryResolver,
         private _daybookActions: DaybookActions,
         private store: Store<AppState>,
         private generalService: GeneralService,
@@ -127,7 +119,18 @@ export class DaybookComponent implements OnInit, OnDestroy {
                 data.entries.map(item => {
                     item.isExpanded = this.isAllExpanded;
                 });
-                this.loadPaginationComponent(data);
+
+                if(this.todaySelected) {
+                    this.daybookQueryRequest.from = moment(data.fromDate, GIDDH_DATE_FORMAT).format(GIDDH_DATE_FORMAT);
+                    this.daybookQueryRequest.to = moment(data.toDate, GIDDH_DATE_FORMAT).format(GIDDH_DATE_FORMAT);
+
+                    this.selectedDateRange = { startDate: moment(data.fromDate, GIDDH_DATE_FORMAT), endDate: moment(data.toDate, GIDDH_DATE_FORMAT) };
+                    this.selectedDateRangeUi = moment(data.fromDate, GIDDH_DATE_FORMAT).format(GIDDH_NEW_DATE_FORMAT_UI) + " - " + moment(data.toDate, GIDDH_DATE_FORMAT).format(GIDDH_NEW_DATE_FORMAT_UI);
+                    this.fromDate = moment(data.fromDate, GIDDH_DATE_FORMAT).format(GIDDH_DATE_FORMAT);
+                    this.toDate = moment(data.toDate, GIDDH_DATE_FORMAT).format(GIDDH_DATE_FORMAT);
+                }
+
+                this.daybookData = data;
                 this.daybookData$ = observableOf(data);
                 this.checkIsStockEntryAvailable();
             }
@@ -155,7 +158,7 @@ export class DaybookComponent implements OnInit, OnDestroy {
                     isCompany: true
                 });
                 let currentBranchUniqueName;
-                if (!this.currentBranch.uniqueName) {
+                if (!this.currentBranch || !this.currentBranch.uniqueName) {
                     // Assign the current branch only when it is not selected. This check is necessary as
                     // opening the branch switcher would reset the current selected branch as this subscription is run everytime
                     // branches are loaded
@@ -171,7 +174,7 @@ export class DaybookComponent implements OnInit, OnDestroy {
                         };
                     }
                 }
-                this.daybookQueryRequest.branchUniqueName = this.currentBranch.uniqueName;
+                this.daybookQueryRequest.branchUniqueName = (this.currentBranch) ? this.currentBranch.uniqueName : "";
                 this.initialRequest();
             } else {
                 if (this.generalService.companyUniqueName) {
@@ -209,8 +212,8 @@ export class DaybookComponent implements OnInit, OnDestroy {
             if (this.dateRangePickerCmp) {
                 this.dateRangePickerCmp.render();
             }
-            this.daybookQueryRequest.from = obj.fromDate;
-            this.daybookQueryRequest.to = obj.toDate;
+            this.daybookQueryRequest.from = (obj.fromDate) ? obj.fromDate : this.todaySelected ? '' : this.daybookQueryRequest.from;
+            this.daybookQueryRequest.to = (obj.toDate) ? obj.toDate : this.todaySelected ? '' : this.daybookQueryRequest.to;
             this.daybookQueryRequest.page = 0;
             if (obj.action === 'search') {
                 this.advanceSearchModel.hide();
@@ -241,24 +244,37 @@ export class DaybookComponent implements OnInit, OnDestroy {
     }
 
     public initialRequest() {
-        this.store.pipe(select(state => state.session.applicationDate), takeUntil(this.destroyed$)).subscribe((dateObj) => {
-            if (dateObj) {
-                let universalDate = _.cloneDeep(dateObj);
-                this.selectedDateRange = { startDate: moment(universalDate[0]), endDate: moment(universalDate[1]) };
-                this.selectedDateRangeUi = moment(universalDate[0]).format(GIDDH_NEW_DATE_FORMAT_UI) + " - " + moment(universalDate[1]).format(GIDDH_NEW_DATE_FORMAT_UI);
-                this.fromDate = moment(universalDate[0]).format(GIDDH_DATE_FORMAT);
-                this.toDate = moment(universalDate[1]).format(GIDDH_DATE_FORMAT);
-                this.daybookQueryRequest.from = moment(universalDate[0]).format(GIDDH_DATE_FORMAT);
-                this.daybookQueryRequest.to = moment(universalDate[1]).format(GIDDH_DATE_FORMAT);
-                this.go();
-            }
-        });
         this.showAdvanceSearchIcon = false;
         if (this.daybookAdvanceSearchModelComponent) {
             this.daybookAdvanceSearchModelComponent.advanceSearchForm.reset();
             this.daybookAdvanceSearchModelComponent.resetShselectForceClear();
             this.daybookAdvanceSearchModelComponent.initializeDaybookAdvanceSearchForm();
+            this.searchFilterData = null;
         }
+
+        this.store.pipe(select(state => state.session.applicationDate), takeUntil(this.destroyed$)).subscribe((dateObj) => {
+            if (dateObj) {
+                let universalDate = _.cloneDeep(dateObj);
+
+                this.store.pipe(select(state => state.session.todaySelected), take(1)).subscribe(response => {
+                    this.todaySelected = response;
+                    if(!response) {
+                        this.selectedDateRange = { startDate: moment(universalDate[0]), endDate: moment(universalDate[1]) };
+                        this.selectedDateRangeUi = moment(universalDate[0]).format(GIDDH_NEW_DATE_FORMAT_UI) + " - " + moment(universalDate[1]).format(GIDDH_NEW_DATE_FORMAT_UI);
+                        this.fromDate = moment(universalDate[0]).format(GIDDH_DATE_FORMAT);
+                        this.toDate = moment(universalDate[1]).format(GIDDH_DATE_FORMAT);
+
+                        this.daybookQueryRequest.from = moment(universalDate[0]).format(GIDDH_DATE_FORMAT);
+                        this.daybookQueryRequest.to = moment(universalDate[1]).format(GIDDH_DATE_FORMAT);
+                    } else {
+                        this.daybookQueryRequest.from = "";
+                        this.daybookQueryRequest.to = "";
+                    }
+                    this.daybookQueryRequest.page = 0;
+                    this.go();
+                });
+            }
+        });
     }
 
     public pageChanged(event: any): void {
@@ -266,34 +282,6 @@ export class DaybookComponent implements OnInit, OnDestroy {
         this.go(this.searchFilterData);
     }
 
-    /**
-     * Loads the pagination component based on data received from the service
-     *
-     * @param {*} data Data received from the service
-     * @memberof DaybookComponent
-     */
-    public loadPaginationComponent(data: any): void {
-        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(PaginationComponent);
-        if (this.paginationChild && this.paginationChild.viewContainerRef) {
-            let viewContainerRef = this.paginationChild.viewContainerRef;
-            viewContainerRef.remove();
-            if (data && data.totalItems > 20) { // Show pagination only if total number of items are more than 20
-                let componentInstanceView = componentFactory.create(viewContainerRef.parentInjector);
-                viewContainerRef.insert(componentInstanceView.hostView);
-
-                let componentInstance = componentInstanceView.instance as PaginationComponent;
-                componentInstance.totalItems = data.count * data.totalPages;
-                componentInstance.itemsPerPage = data.count;
-                componentInstance.maxSize = 5;
-                componentInstance.writeValue(data.page);
-                componentInstance.boundaryLinks = true;
-                componentInstance.pageChanged.pipe(takeUntil(this.destroyed$)).subscribe(e => {
-                    this.pageChanged(e);
-                });
-            }
-        }
-    }
-
     public exportDaybook() {
         this.daybookExportRequestType = 'get';
         this.exportDaybookModal.show();
@@ -349,21 +337,23 @@ export class DaybookComponent implements OnInit, OnDestroy {
      * @memberof DaybookComponent
      */
     public checkIsStockEntryAvailable(): any {
-        this.daybookData$.subscribe(item => {
-            this.isEntryExpanded = item.entries.some(entry => {
-                if (entry.isExpanded && entry.otherTransactions) {
-                    return entry.otherTransactions.some(otherTrasaction => {
-                        if (otherTrasaction && otherTrasaction.inventory) {
-                            return true;
-                        } else {
-                            return false;
-                        }
-                    });
-                } else {
-                    return false;
-                };
+        if(this.daybookData$) {
+            this.daybookData$.subscribe(item => {
+                this.isEntryExpanded = item.entries.some(entry => {
+                    if (entry.isExpanded && entry.otherTransactions) {
+                        return entry.otherTransactions.some(otherTrasaction => {
+                            if (otherTrasaction && otherTrasaction.inventory) {
+                                return true;
+                            } else {
+                                return false;
+                            }
+                        });
+                    } else {
+                        return false;
+                    };
+                });
             });
-        });
+        }
     }
 
     /**
@@ -407,6 +397,7 @@ export class DaybookComponent implements OnInit, OnDestroy {
         if (value && value.name) {
             this.selectedRangeLabel = value.name;
         }
+        this.todaySelected = false;
         this.hideGiddhDatepicker();
         if (value && value.startDate && value.endDate) {
             this.selectedDateRange = { startDate: moment(value.startDate), endDate: moment(value.endDate) };
@@ -418,7 +409,7 @@ export class DaybookComponent implements OnInit, OnDestroy {
                 this.daybookQueryRequest.from = this.fromDate;
                 this.daybookQueryRequest.to = this.toDate;
                 this.daybookQueryRequest.page = 0;
-                this.go();
+                this.go(this.searchFilterData);
             }
         }
     }
@@ -433,5 +424,4 @@ export class DaybookComponent implements OnInit, OnDestroy {
         this.daybookQueryRequest.branchUniqueName = selectedEntity.value;
         this.go();
     }
-}
-
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/daybook/export-daybook/export-daybook.component.html b/apps/web-giddh/src/app/daybook/export-daybook/export-daybook.component.html
index bc7bb84b13d..c4d33edfcde 100644
--- a/apps/web-giddh/src/app/daybook/export-daybook/export-daybook.component.html
+++ b/apps/web-giddh/src/app/daybook/export-daybook/export-daybook.component.html
@@ -4,51 +4,51 @@
             aria-label="Close">×</span>
         <h3>Export Daybook</h3>
     </div>
-    <div class="modal-body mrB4" id="export-body">
+    <div class="modal-body mr-b4" id="export-body">
         <form name="addShareEmailForm" novalidate class="" autocomplete="off">
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100 d-sm-inline-flex d-flex">Type: </label>
 
-                <span class="pd0 mrR3">
-                    <input id="mini" class="radio-custom cp ml0" name="emailTypeSelected" type="radio"
+                <span class="p-0 mr-r3">
+                    <input id="mini" class="radio-custom cp ml-0" name="emailTypeSelected" type="radio"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeMini">
                     <label for="mini" class="radio-custom-label">Mini</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="entryDate" class="radio-custom cp ml0" name="emailTypeSelected" type="radio"
+                <span class="p-0 mr-r3">
+                    <input id="entryDate" class="radio-custom cp ml-0" name="emailTypeSelected" type="radio"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeDetail">
                     <label for="entryDate" class="radio-custom-label">Detailed</label>
                 </span>
             </div>
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100 d-sm-inline-flex d-flex">Export As: </label>
 
-                <span class="pd0 mrR3">
-                    <input id="pdf" class="radio-custom cp ml0" name="fileType" type="radio" [(ngModel)]="fileType"
+                <span class="p-0 mr-r3">
+                    <input id="pdf" class="radio-custom cp ml-0" name="fileType" type="radio" [(ngModel)]="fileType"
                         [value]="'pdf'">
                     <label for="pdf" class="radio-custom-label">PDF</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="excel" class="radio-custom cp ml0" name="fileType" type="radio" [(ngModel)]="fileType"
+                <span class="p-0 mr-r3">
+                    <input id="excel" class="radio-custom cp ml-0" name="fileType" type="radio" [(ngModel)]="fileType"
                         [value]="'xlsx'">
                     <label for="excel" class="radio-custom-label">Excel</label>
                 </span>
 
             </div>
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100 d-sm-inline-flex d-flex">Order: </label>
 
 
-                <span class="pd0 mrR3">
-                    <input id="ascending" class="radio-custom cp ml0" name="order" [(ngModel)]="order" type="radio"
+                <span class="p-0 mr-r3">
+                    <input id="ascending" class="radio-custom cp ml-0" name="order" [(ngModel)]="order" type="radio"
                         [value]="'asc'">
                     <label for="ascending" class="radio-custom-label">Ascending</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="descending" class="radio-custom cp ml0" name="order" [(ngModel)]="order" type="radio"
+                <span class="p-0 mr-r3">
+                    <input id="descending" class="radio-custom cp ml-0" name="order" [(ngModel)]="order" type="radio"
                         [value]="'desc'">
                     <label for="descending" class="radio-custom-label">Descending</label>
                 </span>
diff --git a/apps/web-giddh/src/app/expenses/components/approve-petty-cash-entry-confirm-dialog/approve-petty-cash-entry-confirm-dialog.component.html b/apps/web-giddh/src/app/expenses/components/approve-petty-cash-entry-confirm-dialog/approve-petty-cash-entry-confirm-dialog.component.html
index faf298f4e91..4990933a95b 100644
--- a/apps/web-giddh/src/app/expenses/components/approve-petty-cash-entry-confirm-dialog/approve-petty-cash-entry-confirm-dialog.component.html
+++ b/apps/web-giddh/src/app/expenses/components/approve-petty-cash-entry-confirm-dialog/approve-petty-cash-entry-confirm-dialog.component.html
@@ -8,11 +8,11 @@ <h3 class="modal-title pull-left">Approve</h3>
 <div class="modal-body approve-modal">
     <!-- <app-rejection-reason></app-rejection-reason> -->
     <div class="clearfix modal-top">
-        <p class="font-12 text-gray mb-1">
+        <p class="font-12 text-gray mr-b1">
             <span>{{selectedEntryForApprove?.entryDate}} </span> |
             <span>by {{selectedEntryForApprove?.createdBy?.name}}</span>
         </p>
-        <div class="row mb-1">
+        <div class="row mr-b1">
             <div class="col-xs-4 col-sm-4">
                 <p class="font-14">Expenses:</p>
             </div>
@@ -20,7 +20,7 @@ <h3 class="modal-title pull-left">Approve</h3>
                 <p class="font-14">{{selectedEntryForApprove?.particularAccount?.name}}</p>
             </div>
         </div>
-        <div class="row mb-1">
+        <div class="row mr-b1">
             <div class="col-xs-4 col-sm-4">
                 <p class="font-14">Payment Mode:</p>
             </div>
@@ -28,7 +28,7 @@ <h3 class="modal-title pull-left">Approve</h3>
                 <p class="font-14">{{selectedEntryForApprove?.baseAccount?.name}}</p>
             </div>
         </div>
-        <div class="row mb-1">
+        <div class="row mr-b1">
             <div class="col-xs-4 col-sm-4">
                 <p class="font-14">Amount:</p>
             </div>
diff --git a/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.html b/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.html
index 38a6183ba1a..9d1ff3cbb44 100644
--- a/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.html
+++ b/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.html
@@ -2,20 +2,20 @@
     <div class="clearfix p-15">
         <div class="row">
             <div class="col-sm-6">
-                <p class="bold mb-05">{{selectedItem?.entryDate}} | {{selectedItem.baseAccount.name}}</p>
+                <p class="bold mr-b05">{{selectedItem?.entryDate}} | {{selectedItem.baseAccount.name}}</p>
             </div>
             <div class="col-sm-6 text-right xs-left">
-                <button type="button" class="mb-05 btn btn-success" (click)="showApproveConfirmPopup(ApproveConfirm)">
+                <button type="button" class="mr-b05 btn btn-success" (click)="showApproveConfirmPopup(ApproveConfirm)">
                     Approve
                 </button>
-                <button type="button" class="mb-05 btn btn-danger" (click)="openModal(RejectionReason)">Reject</button>
+                <button type="button" class="mr-b05 btn btn-danger" (click)="openModal(RejectionReason)">Reject</button>
                 <span class="close-modal cp" (click)="closeDetailsMode()">
                     <img src="assets/images/multiply.svg">
                 </span>
             </div>
         </div>
 
-        <div class="upload-fil" *ngIf="!isImageZoomView">
+        <div class="upload-file" *ngIf="!isImageZoomView">
             <ul>
                 <ng-container *ngFor="let item of imageURL let i=index;">
                     <li>
@@ -45,7 +45,7 @@
 
     </div>
 
-    <div class="pettycash">
+    <div class="petty-cash">
         <div class="bg-white p-15 pb-0">
             <div class="form-group mb-2">
                 <label>Description</label>
@@ -67,8 +67,7 @@
                                 [forceClearReactive]="forceClear$ | async" [multiple]="false" [ItemHeight]="33"
                                 [useInBuiltFilterForIOptionTypeItems]="true">
                                 <ng-template #optionTemplate1 let-option="option">
-                                    <a href="javascript:void(0)" class="list-item"
-                                        style="border-bottom: 1px solid #ccc;">
+                                    <a href="javascript:void(0)" class="list-item">
                                         <div class="item">{{ option.label }}</div>
                                         <div class="item-unique">{{ option.value }}</div>
                                     </a>
@@ -132,11 +131,11 @@ <h3 class="modal-title pull-left">Rejection Reason</h3>
     <div class="modal-body">
         <!-- <app-rejection-reason></app-rejection-reason> -->
         <div class="clearfix modal-top">
-            <p class="font-12 text-gray mb-1">
+            <p class="font-12 text-gray mr-b1">
                 <span>{{selectedItem?.entryDate}} </span> |
                 <span>by {{selectedItem?.createdBy?.name}}</span>
             </p>
-            <div class="row mb-1">
+            <div class="row mr-b1">
                 <div class="col-xs-4 col-sm-4">
                     <p class="font-14">Expenses:</p>
                 </div>
@@ -144,7 +143,7 @@ <h3 class="modal-title pull-left">Rejection Reason</h3>
                     <p class="font-14">{{selectedItem?.particularAccount?.name}}</p>
                 </div>
             </div>
-            <div class="row mb-1">
+            <div class="row mr-b1">
                 <div class="col-xs-4 col-sm-4">
                     <p class="font-14">Payment Mode:</p>
                 </div>
@@ -152,7 +151,7 @@ <h3 class="modal-title pull-left">Rejection Reason</h3>
                     <p class="font-14">{{selectedItem?.baseAccount?.name}}</p>
                 </div>
             </div>
-            <div class="row mb-1">
+            <div class="row mr-b1">
                 <div class="col-xs-4 col-sm-4">
                     <p class="font-14">Amount:</p>
                 </div>
diff --git a/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.scss b/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.scss
index eecf01177ac..8e479b59b73 100644
--- a/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.scss
+++ b/apps/web-giddh/src/app/expenses/components/expense-details/expense-details.component.scss
@@ -1,4 +1,6 @@
-.upload-fil ul {
+@import "../../../../assets/css/color.scss";
+
+.upload-file ul {
     display: flex;
     list-style-type: none;
     text-align: center;
@@ -6,25 +8,25 @@
     overflow-y: auto;
 }
 
-.upload-fil ul > li {
+.upload-file ul > li {
     padding-right: 15px;
 }
 
-.upload-fil ul li .upload-img {
+.upload-file ul li .upload-img {
     width: 120px;
     height: 120px;
-    background: #cbcbcb;
+    background: $very-light-gray;
     display: flex;
     align-items: center;
     overflow: hidden;
     justify-content: center;
     font-size: 48px;
     cursor: pointer;
-    color: #999999;
+    color: $nobel;
 }
 
-.upload-fil ul li .upload-img > a {
-    color: #999999;
+.upload-file ul li .upload-img > a {
+    color: $nobel;
     display: block;
     width: 100%;
     height: 100%;
@@ -33,7 +35,7 @@
     justify-content: center;
 }
 
-.upload-fil ul li .upload-img img {
+.upload-file ul li .upload-img img {
     max-height: 200px;
 }
 
@@ -55,12 +57,12 @@
     top: 0;
     right: -29px;
     z-index: 99;
-    background: #cbcbcb;
+    background: $very-light-gray;
     width: 30px;
     height: 30px;
     text-align: center;
     line-height: 30px;
-    color: #666666;
+    color: $dark-gray;
     border-radius: 3px;
     cursor: pointer;
 }
@@ -101,18 +103,23 @@ span.close-modal.cp.pull-right {
     opacity: 0;
     visibility: hidden;
 }
-.pettycash {
+.petty-cash {
     /** height: 57vh;
     overflow-y: auto;**/
-    background: #fff;
+    background: $white;
+}
+
+.list-item{
+    border-bottom: 1px solid $gainsboro;
 }
+
 @media only screen and (max-width: 1440px) {
-    .pettycash {
+    .petty-cash {
         height: initial;
     }
 }
 @media only screen and (max-width: 991px) {
-    .pettycash {
+    .petty-cash {
         height: initial;
     }
 }
diff --git a/apps/web-giddh/src/app/expenses/components/filter-list/filter-list.component.scss b/apps/web-giddh/src/app/expenses/components/filter-list/filter-list.component.scss
index 0f6ba5ac389..ce5be1d3046 100644
--- a/apps/web-giddh/src/app/expenses/components/filter-list/filter-list.component.scss
+++ b/apps/web-giddh/src/app/expenses/components/filter-list/filter-list.component.scss
@@ -1,15 +1,17 @@
+@import "../../../../assets/css/color.scss";
+
 .input-search {
     width: 100%;
 }
 
 .filter-list .inner-filter-list li {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
     padding: 15px;
     display: flex;
 }
 
 .filter-list .inner-filter-list li:hover {
-    background: #f0f0f0;
+    background: $whisper-light;
     transition: 0.5s all ease;
 }
 
@@ -23,7 +25,7 @@
 }
 
 .filter-list .inner-filter-list li .right-item i {
-    color: #999999;
+    color: $nobel;
     margin-left: 5px;
 }
 
@@ -33,5 +35,5 @@
 }
 
 .filter-list .activeItem {
-    background-color: #f0f0f0;
+    background-color: $whisper-light;
 }
diff --git a/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.html b/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.html
index e3bb19b39db..ee2ea14c47b 100644
--- a/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.html
+++ b/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.html
@@ -106,7 +106,7 @@
     </div>
 </div>
 
-<div *ngIf="(pettyCashReportsResponse$ | async)?.totalItems > 20" class="paginationWrapper">
+<div *ngIf="(pettyCashReportsResponse$ | async)?.totalItems > 20" class="pagination-wrapper">
     <pagination [totalItems]="(pettyCashReportsResponse$ | async)?.totalItems" [maxSize]="5" class="pagination-sm"
         [boundaryLinks]="true" [itemsPerPage]="20" [rotate]="false" previousText="&#9668;" nextText="&#9658;"
         (pageChanged)="pageChanged($event)"></pagination>
@@ -135,17 +135,17 @@ <h1>Do search with some other dates</h1>
 <ng-template #sortingTemplate let-col>
 
     <div class="icon-sort-asc" *ngIf="pettycashRequest.sortBy !== col" (click)="sort('asc', col)"
-        [ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
+        [ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
     </div>
 
     <div class="icon-sort-asc" *ngIf="pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'"
         (click)="sort('desc', col)"
-        [ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
+        [ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
     </div>
 
     <div class="icon-sort-dsc" *ngIf="pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'"
         (click)="sort('asc', col)"
-        [ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'}">
+        [ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'}">
     </div>
 
 </ng-template>
diff --git a/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.scss b/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.scss
index e2c7b624ce2..07c3007b2a7 100644
--- a/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.scss
+++ b/apps/web-giddh/src/app/expenses/components/pending-list/pending-list.component.scss
@@ -7,7 +7,7 @@
     position: absolute;
     right: 12px;
     font-size: 11px;
-    color: #7d7d7d;
+    color: $gray;
     top: 13px;
 }
 
@@ -15,11 +15,18 @@
     font-size: 11px;
     position: absolute;
     right: 10px;
-    color: #a9a9a9;
+    color: $dim-gray;
     cursor: pointer;
     top: 12px;
 }
 
+.icon-pointer {
+    cursor: pointer;
+    .active-text-color {
+        color: $wild-blue-yonder !important;
+    }
+}
+
 .icon-sort-asc,
 .icon-sort-dsc {
     display: inline-block;
@@ -28,6 +35,10 @@
     margin-left: 6px;
 }
 
+.icon-sort-asc.active-text-color {
+    color: $wild-blue-yonder !important;
+}
+
 .td-search-box {
     div {
         display: flex;
diff --git a/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.html b/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.html
index a8e24507f85..2756a9e02c4 100644
--- a/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.html
+++ b/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.html
@@ -81,7 +81,7 @@
 	</div>
 </div>
 
-<div *ngIf="totalRejectedResponse?.totalItems > 20" class="paginationWrapper">
+<div *ngIf="totalRejectedResponse?.totalItems > 20" class="pagination-wrapper">
 	<pagination [totalItems]="totalRejectedResponse?.totalItems" [maxSize]="5" class="pagination-sm"
 		[boundaryLinks]="true" [itemsPerPage]="20" [rotate]="false" previousText="&#9668;" nextText="&#9658;"
 		(pageChanged)="pageChanged($event)"></pagination>
@@ -109,17 +109,17 @@ <h1>Do search with some other dates</h1>
 	<div class="icon-pointer d-inline-block ml-1 pointer">
 
 		<div class="icon-sort-asc" *ngIf="pettycashRequest.sortBy !== col" (click)="sort('asc', col)"
-			[ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
+			[ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
 		</div>
 
 		<div class="icon-sort-asc" *ngIf="pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'"
 			(click)="sort('desc', col)"
-			[ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
+			[ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'asc'}">
 		</div>
 
 		<div class="icon-sort-dsc" *ngIf="pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'"
 			(click)="sort('asc', col)"
-			[ngClass]="{'activeTextColor': pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'}">
+			[ngClass]="{'active-text-color': pettycashRequest.sortBy === col && pettycashRequest.sort === 'desc'}">
 		</div>
 	</div>
 </ng-template>
diff --git a/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.scss b/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.scss
index 8cc0e5cb109..b6a1397d658 100644
--- a/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.scss
+++ b/apps/web-giddh/src/app/expenses/components/rejected-list/rejected-list.component.scss
@@ -7,7 +7,7 @@
     position: absolute;
     right: 12px;
     font-size: 11px;
-    color: #7d7d7d;
+    color: $gray;
     top: 13px;
 }
 
@@ -15,7 +15,7 @@
     font-size: 11px;
     position: absolute;
     right: 10px;
-    color: #a9a9a9;
+    color: $dim-gray;
     cursor: pointer;
     top: 12px;
 }
@@ -41,4 +41,11 @@
 
 .btn-icon .icon-trash {
     font-size: 20px;
+}
+
+.icon-pointer .active-text-color {
+    color: $wild-blue-yonder !important;
+}
+.icon-pointer {
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/expenses/expenses.component.html b/apps/web-giddh/src/app/expenses/expenses.component.html
index 428414d7eb8..f9334512b12 100644
--- a/apps/web-giddh/src/app/expenses/expenses.component.html
+++ b/apps/web-giddh/src/app/expenses/expenses.component.html
@@ -2,8 +2,7 @@
     <hamburger-menu></hamburger-menu>
     <div class="clearfix petty-cash">
         <tabset class="custom-tabs" #tabset>
-
-            <div class="container-fluid pt-2 mb-15" *ngIf="!isSelectedRow">
+            <div class="container-fluid pd-t2 mr-b15" *ngIf="!isSelectedRow">
                 <div class="row">
                     <div class="col-sm-6">
                         <div class="d-flex">
@@ -15,7 +14,7 @@
                                 </div>
                             </div>
                             <!-- <div class="btn-group" dropdown="" ng-reflect-placement="right">
-                                <a (click)="openModal(filterModal)"> <i class="icon-options pd cp fs20" dropdowntoggle="" aria-haspopup="true"></i></a>
+                                <a (click)="openModal(filterModal)"> <i class="icon-options pd cp font-20" dropdowntoggle="" aria-haspopup="true"></i></a>
                             </div> -->
                         </div>
                     </div>
@@ -69,7 +68,7 @@ <h3 class="modal-title pull-left ">Filter Data</h3>
         <!-- <app-filter-data></app-filter-data> -->
         <div class="row ">
             <div class="col-sm-5 ">
-                <label class="pt-05 ">Total Amount</label>
+                <label class="pd-t05 ">Total Amount</label>
             </div>
             <div class="col-sm-7 d-flex ">
                 <div class="select-style mb-2 ">
diff --git a/apps/web-giddh/src/app/expenses/expenses.component.scss b/apps/web-giddh/src/app/expenses/expenses.component.scss
index ec113be38af..51db847fb3b 100644
--- a/apps/web-giddh/src/app/expenses/expenses.component.scss
+++ b/apps/web-giddh/src/app/expenses/expenses.component.scss
@@ -1,8 +1,8 @@
 @import "../../assets/css/color.scss";
 .left-expense {
     width: 400px;
-    box-shadow: 3px 3px 6px #00000029;
-    background: #fff;
+    box-shadow: 3px 3px 6px $black-russian;
+    background: $white;
     position: relative;
 }
 .main-expense-details {
diff --git a/apps/web-giddh/src/app/gst/filing/filing.component.html b/apps/web-giddh/src/app/gst/filing/filing.component.html
index c7b5ef5d18d..a3bc9ff7bb6 100644
--- a/apps/web-giddh/src/app/gst/filing/filing.component.html
+++ b/apps/web-giddh/src/app/gst/filing/filing.component.html
@@ -53,9 +53,9 @@
                             3. File your Return
                         </ng-template>
                         <div class="transactions-overview">
-                            <div class="gstr-transactions-summary mr-t4 mrB4 text-center">
+                            <div class="gstr-transactions-summary mr-t4 mr-b4 text-center">
 
-                                <div class="successful-fileDetail" hidden>
+                                <div class="successful-file-detail" hidden>
                                     <img src="assets/images/file-successful.svg">
                                     <h3>GST Return of April 2009 till date is filed successfully</h3>
                                     <p>Click below to file return of latest data</p>
@@ -64,7 +64,7 @@ <h3>GST Return of April 2009 till date is filed successfully</h3>
                                     </button>
 
                                 </div>
-                                <div class="gstReturnDate">
+                                <div class="gst-return-date">
                                     <img src="assets/images/return-date.svg">
                                     <!-- <h3>File your GST Return of April 2019 till date</h3> -->
                                     <p>Click below to proceed</p>
diff --git a/apps/web-giddh/src/app/gst/filing/filing.component.scss b/apps/web-giddh/src/app/gst/filing/filing.component.scss
index 12264c072db..b9921502f20 100644
--- a/apps/web-giddh/src/app/gst/filing/filing.component.scss
+++ b/apps/web-giddh/src/app/gst/filing/filing.component.scss
@@ -2,17 +2,17 @@
 
 :host ::ng-deep .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 /* my css */
-.successful-fileDetail h3,
-.gstReturnDate h3 {
-    color: #333333;
+.successful-file-detail h3,
+.gst-return-date h3 {
+    color: $night-rider;
     font-size: 24px;
     margin: 20px 0 7px;
 }
-.gstr-transactions-summary .successful-fileDetail p,
-.gstr-transactions-summary .gstReturnDate p {
+.gstr-transactions-summary .successful-file-detail p,
+.gstr-transactions-summary .gst-return-date p {
     margin-bottom: 20px;
     font-size: 14px;
 }
diff --git a/apps/web-giddh/src/app/gst/filing/gst-error-shit/gstErrorSheet.component.html b/apps/web-giddh/src/app/gst/filing/gst-error-shit/gstErrorSheet.component.html
index 86b4c7a401c..cc4757b60ff 100644
--- a/apps/web-giddh/src/app/gst/filing/gst-error-shit/gstErrorSheet.component.html
+++ b/apps/web-giddh/src/app/gst/filing/gst-error-shit/gstErrorSheet.component.html
@@ -141,7 +141,7 @@ <h4>6</h4>
                 </td>
 
                 <td>
-                  <p class="text-orange">Total Value</p>
+                  <p class="text-purple">Total Value</p>
                   <h4>12,92,684</h4>
                 </td>
               </tr>
diff --git a/apps/web-giddh/src/app/gst/filing/header/filing-header.component.html b/apps/web-giddh/src/app/gst/filing/header/filing-header.component.html
index 1c86ba384e7..9b20c7c43e0 100644
--- a/apps/web-giddh/src/app/gst/filing/header/filing-header.component.html
+++ b/apps/web-giddh/src/app/gst/filing/header/filing-header.component.html
@@ -24,7 +24,7 @@
                         {{moment(currentPeriod.to, giddhDateFormat).format('DD MMM YYYY')}})
                     </ng-container>
                 </div>
-                <div style="font-weight: normal;" class="font-xs text-muted text-middle">Details of outward supplies of
+                <div class="font-xs text-muted text-middle font-normal">Details of outward supplies of
                     goods and services
                 </div>
             </div>
@@ -91,14 +91,14 @@
                 </ng-container>
 
             </div>
-            <div style="font-weight: normal;" class="font-xs text-muted text-middle">Details of inward supplies of goods
+            <div class="font-xs text-muted text-middle font-normal">Details of inward supplies of goods
                 and services
             </div>
         </div>
 
         <div class="pull-right btn-wrapper-filling-header">
 
-            <div class="btn-group" style="display: inline-block !important;" dropdown #dropdown="bs-dropdown">
+            <div class="btn-group d-inline-block" dropdown #dropdown="bs-dropdown">
                 <button dropdownToggle type="button" class="btn dropdown-toggle btn-sky-blue"><i
                         class="icon-download"></i>
                     Download
@@ -138,7 +138,7 @@
 
 
 <!-- region cancel confirmation modal -->
-<div bsModal #cancelConfirmationModel="bs-modal" class="modal zIndexForAside fade" role="dialog"
+<div bsModal #cancelConfirmationModel="bs-modal" class="modal z-index-for-aside fade" role="dialog"
     [config]="{ ignoreBackdropClick: true }">
     <div class="modal-dialog modal-md second">
         <!-- modal-liq-90 class is removed for now-->
diff --git a/apps/web-giddh/src/app/gst/filing/header/filing-header.component.scss b/apps/web-giddh/src/app/gst/filing/header/filing-header.component.scss
index ba1c252ccc3..08005796750 100644
--- a/apps/web-giddh/src/app/gst/filing/header/filing-header.component.scss
+++ b/apps/web-giddh/src/app/gst/filing/header/filing-header.component.scss
@@ -6,9 +6,9 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
-.zIndexForAside {
+.z-index-for-aside {
     z-index: 99999;
 }
 .authenticate-btn {
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/overview/summary/summary.component.html b/apps/web-giddh/src/app/gst/filing/tabs/overview/summary/summary.component.html
index 626493e066f..d4ab8e84c98 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/overview/summary/summary.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/overview/summary/summary.component.html
@@ -2,7 +2,7 @@
 
     <div class="gstr-transactions-summary" *ngIf="isTransactionSummary">
         <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
-        <p style="padding-top:6px;" class="text-muted half">A summary of all the transactions in the current filing period which are ready to be pushed to GSTN.</p>
+        <p class="text-muted half pd-t05">A summary of all the transactions in the current filing period which are ready to be pushed to GSTN.</p>
     </div>
 
 
@@ -32,7 +32,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
     <!--    </div>-->
     <!--  </div>-->
 
-    <hr style="margin: 0" *ngIf="!isTransactionSummary && selectedGst === 'gstr2'">
+    <hr class="m-0" *ngIf="!isTransactionSummary && selectedGst === 'gstr2'">
 
     <div class="gstr-transactions-summary">
         <div class="text-uppercase title" *ngIf="!isTransactionSummary">Overall Summary</div>
@@ -71,7 +71,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                     <ng-container *ngFor="let item of gstrOverviewData.summary">
                         <tr (click)="viewTransactions(item)" class="row-hover" [ngClass]="{'cp-none': item.gstReturnType === 'hsnsac' ||  item.gstReturnType === 'CreditNote/DebitNote/RefundVouchers'}">
                             <!-- <td></td> -->
-                            <td [ngSwitch]="true" data-title="Discription">
+                            <td [ngSwitch]="true" data-title="description">
                                 <ng-container *ngSwitchCase="item.gstReturnType === 'b2b' || item.gstReturnType === 'b2bur'">
                                     <img src="{{imgPath}}b2b.svg" class="icon text-bottom" />
                                 </ng-container>
@@ -101,7 +101,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                 <ng-container *ngSwitchCase="item.gstReturnType === 'impg'">
                                     <img src="{{imgPath}}impg.svg" class="icon text-bottom" />
                                 </ng-container>
-                                <span style="margin-left: 5px;"> {{item?.name}}</span>
+                                <span class="mr-l05"> {{item?.name}}</span>
                             </td>
                             <td class="text-center" data-title="Total Transactions" *ngIf="item.gstReturnType !== 'CreditNote/DebitNote/RefundVouchers'">
                                 <a href="javascript:void(0)">
@@ -148,7 +148,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
             </table>
         </div>
 
-        <div class="" *ngIf="!gstrOverviewData.count">
+        <div *ngIf="!gstrOverviewData.count">
             <div class="filings-empty-state">
                 <img src="{{imgPath}}nofound.svg" [style.max-width.px]="110" />
                 <div class="empty-msg"><span> No result found. </span></div>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/overview/view-transactions/view-transactions.component.html b/apps/web-giddh/src/app/gst/filing/tabs/overview/view-transactions/view-transactions.component.html
index 111d0d9fc34..c752366d140 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/overview/view-transactions/view-transactions.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/overview/view-transactions/view-transactions.component.html
@@ -13,7 +13,7 @@
                 </div>
                 <div class="filter-row">
                     <div class="name">Transaction Type:</div>
-                    <div class="btn-group filter" dropdown *ngIf="selectedGst === 'gstr1'" style="display: inline-block !important;">
+                    <div class="btn-group filter d-inline-block" dropdown *ngIf="selectedGst === 'gstr1'">
                         <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                             {{selectedFilter?.entityType}} <span class="caret"></span>
                         </button>
@@ -22,7 +22,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="btn-group filter" dropdown *ngIf="selectedGst === 'gstr2'" style="display: inline-block !important;">
+                    <div class="btn-group filter d-inline-block" dropdown *ngIf="selectedGst === 'gstr2'">
                         <button id="button-basic2" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                             {{selectedFilter?.entityType}} <span class="caret"></span>
                         </button>
@@ -34,7 +34,7 @@
                 </div>
                 <div class="filter-row" *ngIf="(filterParam.entityType !== 'invoices' && filterParam.entityType !== 'advance-receipt') && selectedGst === 'gstr1'">
                     <div class="name">{{selectedFilter?.entityType}} Type:</div>
-                    <div class="btn-group filter" dropdown style="display: inline-block !important;">
+                    <div class="btn-group filter d-inline-block" dropdown>
                         <button id="button-basic3" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                             {{selectedFilter?.type}} <span class="caret"></span>
                         </button>
@@ -46,7 +46,7 @@
                 </div>
                 <div class="filter-row" *ngIf="filterParam.entityType === 'invoices' && selectedGst === 'gstr1'">
                     <div class="name">{{selectedFilter?.entityType}} Type:</div>
-                    <div class="btn-group filter" dropdown style="display: inline-block !important;">
+                    <div class="btn-group filter d-inline-block" dropdown>
                         <button id="button-basic4" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                             {{selectedFilter?.type}} <span class="caret"></span>
                         </button>
@@ -60,7 +60,7 @@
                 <div class="filter-row" *ngIf="filterParam.entityType === 'billsAndExpenses' && selectedGst == 'gstr2'">
                     <div class="name">{{selectedFilter?.entityType}} Type:</div>
 
-                    <div class="btn-group filter" dropdown style="display: inline-block !important;">
+                    <div class="btn-group filter d-inline-block" dropdown>
                         <button id="button-basic5" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                             {{selectedFilter?.type}} <span class="caret"></span>
                         </button>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/b2cs-summary/b2cs-summary.component.html b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/b2cs-summary/b2cs-summary.component.html
index 4d856117b5c..3548cf097bc 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/b2cs-summary/b2cs-summary.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/b2cs-summary/b2cs-summary.component.html
@@ -1,7 +1,7 @@
 <div class="gstr-transactions-summary">
     <!---->
     <h4 class="clearfix gstr-summary-title">B2C (Small) Details</h4>
-    <p style="padding-top:6px;" class="text-muted half">Details of invoices with value less than 2.5 lakhs that you’ve
+    <p class="text-muted half pd-t05">Details of invoices with value less than 2.5 lakhs that you’ve
         issued to consumers other than B2C (Large) transactions.</p>
 
     <div class="">
@@ -11,52 +11,52 @@ <h4 class="clearfix gstr-summary-title">B2C (Small) Details</h4>
                     <tr>
                         <!---->
                         <th class="text-left">
-                            <div style="position: relative">
+                            <div class="position-relative">
                                 <div class="pull-left over-flow"> Type</div>
                                 <!---->
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> Rate</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> Rate</div>
                                 <!---->
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> Place of Supply</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> Place of Supply</div>
                                 <!---->
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> Taxable Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> Taxable Amount</div>
                                 <!---->
                             </div>
                         </th>
 
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> IGST Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> IGST Amount</div>
                                 <!---->
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> CGST Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> CGST Amount</div>
                                 <!---->
                             </div>
                         </th>
 
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> SGST Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> SGST Amount</div>
                                 <!---->
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow"> CESS</div>
+                            <div class="position-relative">
+                                <div class="over-flow"> CESS</div>
                                 <!---->
                             </div>
                         </th>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/document-issued/document-issued.component.html b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/document-issued/document-issued.component.html
index 69e92b5a661..1e261b5ebeb 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/document-issued/document-issued.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/document-issued/document-issued.component.html
@@ -2,7 +2,7 @@
 	<!---->
 
 	<h4 class="clearfix gstr-summary-title">Document Issued</h4>
-	<p style="padding-top:6px;" class="text-muted half">Document Issued denotes all documents that you have issued in
+	<p class="text-muted half pd-t05">Document Issued denotes all documents that you have issued in
 		the
 		corresponding filing period which you have pushed to GSTN. Enter the first and last serial number of each
 		document
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.html b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.html
index 76c43efc9af..e4275dd4a50 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.html
@@ -9,19 +9,19 @@
                     <tr>
                         <th>#</th>
                         <th>Invoice / Voucher Number
-                            <span class="sortTable">
+                            <span class="sort-table">
                                 <a href="javascript:void(0)" class="top-sort" (click)="sortBy('number', 'asc')"></a>
                                 <a href="javascript:void(0)" class="bottom-sort" (click)="sortBy('number', 'desc')"></a>
                             </span>
                         </th>
                         <th>Type
-                            <span class="sortTable">
+                            <span class="sort-table">
                                 <a href="javascript:void(0)" class="top-sort" (click)="sortBy('type', 'asc')"></a>
                                 <a href="javascript:void(0)" class="bottom-sort" (click)="sortBy('type', 'desc')"></a>
                             </span>
                         </th>
                         <th>Messages
-                            <span class="sortTable">
+                            <span class="sort-table">
                                 <a href="javascript:void(0)" class="top-sort" (click)="sortBy('messages', 'asc')"></a>
                                 <a href="javascript:void(0)" class="bottom-sort"
                                     (click)="sortBy('messages', 'desc')"></a>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.css b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.scss
similarity index 72%
rename from apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.css
rename to apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.scss
index 4eb75e3a2b0..f76c96ab01e 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.css
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.scss
@@ -1,23 +1,25 @@
+@import "../../../../../../../assets/css/color.scss";
+
 .inner-tabs {
     padding: 15px;
-    background: #f7f8fa;
+    background: $alice-blue-light;
 }
 .basic > thead > tr > th {
     position: relative;
 }
-.sortTable {
+.sort-table {
     display: inline-block;
     position: relative;
     position: absolute;
     top: 6px;
     right: 10px;
 }
-.sortTable .top-sort {
-    border-bottom: 6px solid #bfbebe;
+.sort-table .top-sort {
+    border-bottom: 6px solid $gainsboro;
     border-top: 4px solid transparent;
 }
-.sortTable .bottom-sort,
-.sortTable .top-sort {
+.sort-table .bottom-sort,
+.sort-table .top-sort {
     display: block;
     margin-bottom: 3px;
     content: "";
@@ -27,13 +29,13 @@
     height: 0px;
     line-height: 0;
 }
-.sortTable .bottom-sort {
-    border-top: 7px solid #bfbebe;
+.sort-table .bottom-sort {
+    border-top: 7px solid $gainsboro;
     border-bottom: 4px solid transparent;
     margin-bottom: 0px;
 }
 .bg-white {
-    background: #fff;
+    background: $white;
     padding: 15px;
 }
 .error-shit-total .table tr td {
@@ -41,23 +43,23 @@
 }
 .error-shit-total .table tr td h4 {
     font-size: 28px;
-    color: #000;
+    color: $black;
 }
 .error-shit-total .table tr td p {
-    color: #9a9a9a;
+    color: $nobel;
     font-size: 18px;
 }
 .error-shit-total .table {
     margin: 0px;
 }
 .error-shit-total {
-    background: #fff;
+    background: $white;
     padding: 20px;
     width: 100%;
     display: block;
 }
-.text-orange {
-    color: #5b64c9 !important;
+.text-purple {
+    color: $chetwode-blue !important;
 }
 .gst-error {
     display: block;
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.ts b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.ts
index 955c3b0c02b..961a5fb33a5 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.ts
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/failed-transactions/failed-transactions.component.ts
@@ -8,7 +8,7 @@ import { PageChangedEvent } from 'ngx-bootstrap/pagination';
     // tslint:disable-next-line:component-selector
     selector: 'failed-transactions',
     templateUrl: './failed-transactions.component.html',
-    styleUrls: ['failed-transactions.component.css'],
+    styleUrls: ['failed-transactions.component.scss'],
 })
 export class FailedTransactionsComponent implements OnInit, OnChanges, OnDestroy {
 
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/hsn-summary/hsn-summary.component.html b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/hsn-summary/hsn-summary.component.html
index 8938e4366a2..72d8818fde2 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/hsn-summary/hsn-summary.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/hsn-summary/hsn-summary.component.html
@@ -1,7 +1,7 @@
 <div class="gstr-transactions-summary">
 
 	<h4 class="clearfix gstr-summary-title">HSN Summary</h4>
-	<p style="padding-top:6px;" class="text-muted half">This section includes the HSN-wise summary of the items you have
+	<p class="text-muted half pd-t05">This section includes the HSN-wise summary of the items you have
 		sold</p>
 
 	<div class="">
@@ -11,56 +11,56 @@ <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
 				<thead>
 					<tr>
 						<th class="text-left">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class="pull-left over-flow"> HSN/SAC</div>
 							</div>
 						</th>
 						<th class="text-left">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> Description</div>
 							</div>
 						</th>
 						<th class="text-left">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> Quantity</div>
 							</div>
 						</th>
 
 						<th class="text-left">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> Unit</div>
 							</div>
 						</th>
 
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> Taxable Amount</div>
 							</div>
 						</th>
 
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> IGST Amount</div>
 							</div>
 						</th>
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> CGST Amount</div>
 							</div>
 						</th>
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> SGST Amount</div>
 							</div>
 						</th>
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> CESS</div>
 							</div>
 						</th>
 
 						<th class="text-right">
-							<div style="position: relative">
+							<div class="position-relative">
 								<div class=" over-flow"> Total Amount</div>
 							</div>
 						</th>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/nil-summary/nil-summary.component.html b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/nil-summary/nil-summary.component.html
index f2279717998..1d19af4bbc9 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/nil-summary/nil-summary.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/components/nil-summary/nil-summary.component.html
@@ -1,6 +1,6 @@
 <div class="gstr-transactions-summary">
     <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
-    <p style="padding-top:6px;" class="text-muted half">This section displays the sale of goods and services that are
+    <p class="text-muted half pd-t05">This section displays the sale of goods and services that are
         nil
         rated.&nbsp;Nil rated goods and services are those that have 0% GST but allows you to claim ITC on the filing
         paid
@@ -11,23 +11,23 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                 <thead>
                     <tr>
                         <th class="text-left">
-                            <div style="position: relative">
+                            <div class="position-relative">
                                 <div class="pull-left over-flow">Supply Type</div>
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow">Nil Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow">Nil Amount</div>
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow">Exempt Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow">Exempt Amount</div>
                             </div>
                         </th>
                         <th class="text-right">
-                            <div style="position: relative">
-                                <div class=" over-flow">Non GST Amount</div>
+                            <div class="position-relative">
+                                <div class="over-flow">Non GST Amount</div>
                             </div>
                         </th>
                     </tr>
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.css b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.scss
similarity index 65%
rename from apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.css
rename to apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.scss
index 4abf4a8d138..15238cf1566 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.css
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.scss
@@ -1,10 +1,13 @@
+@import "../../../../../../../web-giddh/src/assets/css/color.scss";
+
 .nav.nav-tabs {
-    background: #fff !important;
+    background: $white !important;
 }
 
 .push-gstin .nav.nav-tabs > li:last-child {
     float: right;
 }
+
 .tax-engine .transactions-list .filter-band .back-button svg.back-button-icon{
     position: relative;
     top: 3px;
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.ts b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.ts
index 3cd5338f72c..327523ddff2 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.ts
+++ b/apps/web-giddh/src/app/gst/filing/tabs/push-to-gstin/push-to-gstin.component.ts
@@ -11,7 +11,7 @@ import { takeUntil } from 'rxjs/operators';
     // tslint:disable-next-line:component-selector
     selector: 'push-to-gstin',
     templateUrl: './push-to-gstin.component.html',
-    styleUrls: ['./push-to-gstin.component.css'],
+    styleUrls: ['./push-to-gstin.component.scss'],
 })
 export class PushToGstInComponent implements OnInit, OnChanges, OnDestroy {
 
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.css b/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.css
index e69de29bb2d..ee91aaed8a8 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.css
+++ b/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.css
@@ -0,0 +1,16 @@
+
+.width-vendor{
+    width:250px;
+}
+
+.width-date{
+    width:155px;
+}
+
+.width-supply{
+    width:130px;
+}
+
+.width-amount{
+    width:140px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.html b/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.html
index b31b569c73e..52097f4f0a2 100644
--- a/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.html
+++ b/apps/web-giddh/src/app/gst/filing/tabs/reconcilation/reconcilation.component.html
@@ -183,8 +183,8 @@
 <ng-template #commonHeaderTemplateForReconciliationTable>
     <tr>
 
-        <th style="width:250px" id="4" class="text-left">
-            <div style="position: relative">
+        <th id="4" class="text-left width-vendor">
+            <div class="position-relative">
                 <div data-test-title="Vendor Details" title="Vendor Details" class="pull-left over-flow">
                     Vendor
                     Details
@@ -192,25 +192,24 @@
             </div>
         </th>
 
-        <th style="width:155px" class="text-left">
-            <div style="position: relative">
-                <div data-test-title="Transaction Date" title="Transaction Date"
-                     class="pull-left over-flow">
+        <th class="text-left width-date">
+            <div class="position-relative">
+                <div data-test-title="Transaction Date" title="Transaction Date" class="pull-left over-flow">
                     Transaction Date
                 </div>
             </div>
         </th>
 
-        <th style="width:130px" class="text-left">
-            <div style="position: relative">
+        <th class="text-left width-supply">
+            <div class="position-relative">
                 <div data-test-title="Place of Supply" title="Place of Supply" class="pull-left over-flow">
                     Place of Supply
                 </div>
             </div>
         </th>
 
-        <th style="width:140px" class="text-right">
-            <div style="position: relative">
+        <th class="text-right width-amount">
+            <div class="position-relative">
                 <div data-test-title="Taxable Amount" title="Taxable Amount" class=" over-flow"> Taxable
                     Amount
                 </div>
@@ -218,32 +217,32 @@
         </th>
 
         <th class="text-right">
-            <div style="position: relative">
-                <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST</div>
+            <div class="position-relative">
+                <div data-test-title="IGST" title="IGST" class="over-flow"> IGST</div>
             </div>
         </th>
 
         <th class="text-right">
-            <div style="position: relative">
-                <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST</div>
+            <div class="position-relative">
+                <div data-test-title="CGST" title="CGST" class="over-flow"> CGST</div>
             </div>
         </th>
 
         <th class="text-right">
-            <div style="position: relative">
-                <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST</div>
+            <div class="position-relative">
+                <div data-test-title="SGST" title="SGST" class="over-flow"> SGST</div>
             </div>
         </th>
 
         <th class="text-right">
-            <div style="position: relative">
-                <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess</div>
+            <div class="position-relative">
+                <div data-test-title="Cess" title="Cess" class="over-flow"> Cess</div>
             </div>
         </th>
 
         <th class="text-right">
-            <div style="position: relative">
-                <div data-test-title="Total Amount" title="Total Amount" class=" over-flow"> Total Amount
+            <div class="position-relative">
+                <div data-test-title="Total Amount" title="Total Amount" class="over-flow"> Total Amount
                 </div>
             </div>
         </th>
diff --git a/apps/web-giddh/src/app/gst/gst.component.html b/apps/web-giddh/src/app/gst/gst.component.html
index 3242b623ec6..c771ba5b827 100644
--- a/apps/web-giddh/src/app/gst/gst.component.html
+++ b/apps/web-giddh/src/app/gst/gst.component.html
@@ -1,8 +1,8 @@
 <!-- filter area-->
 <ng-container>
     <hamburger-menu [pageHeading]="'GST'"></hamburger-menu>
-    <div class="text-overdue ss" style="margin: 20px 0px 0px;" *ngIf="!activeCompanyGstNumber && !isTaxApiInProgress && !taxes?.length && !((gstr1OverviewDataInProgress$ | async) || (gstr2OverviewDataInProgress$ | async))">
-        <i class="text-middle" style="padding: 0 2%;">Please add GSTIN to your default address in order to view report.</i>
+    <div class="text-overdue ss" *ngIf="!activeCompanyGstNumber && !isTaxApiInProgress && !taxes?.length && !((gstr1OverviewDataInProgress$ | async) || (gstr2OverviewDataInProgress$ | async))">
+        <i class="text-middle">Please add GSTIN to your default address in order to view report.</i>
     </div>
 
     <div *ngIf="taxes?.length" class="row mb-3 mt-3 ml-3">
@@ -12,11 +12,12 @@
         <div class="tax-dropdown col-md-9 col-sm-9 col-12">
             <sh-select [options]="taxes"
                 [(ngModel)]="activeCompanyGstNumber"
-                (selected)="selectTax()"
+                (selected)="selectTax($event)"
                 [defaultValue]="activeCompanyGstNumber"
                 placeholder="Select GSTIN"
                 [showClear]="false" [multiple]="false"
-                [ItemHeight]="67">
+                [ItemHeight]="67"
+                [isRequired]="true">
             </sh-select>
         </div>
     </div>
@@ -26,7 +27,7 @@
             <div class="header-info pull-left">
                 <ul class="list-inline list-middle">
                     <li>
-                        <span style="font-weight: 400;" class="text-muted"> GST Summary for </span>
+                        <span class="text-muted font-normal"> GST Summary for </span>
                     </li>
                     <li>
                         <div class="btn-group dropdown" dropdown [autoClose]="false"
@@ -104,8 +105,8 @@
     <div class="">
         <div class="col-md-12 main-wrapper">
 
-            <div class="text-overdue ss" style="margin: 20px 0px 0px;" *ngIf="!isMonthSelected">
-                <i class="text-middle" style="padding: 0 4%;">Select month Wise Date to download GSTR3B report.</i>
+            <div class="text-overdue ss" *ngIf="!isMonthSelected">
+                <i class="text-middle">Select month Wise Date to download GSTR3B report.</i>
             </div>
             <!-- ============================ GSTR3B SUMMARY ================================== -->
             <div class="return-content" [ngClass]="{'content-disabled': !isMonthSelected || !activeCompanyGstNumber}">
@@ -117,7 +118,7 @@
                   class="icon-download"></i> Download</button>
                 <ul id="dropdown-menu" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"
                     aria-labelledby="button-triggers-manual" style="min-width: 350px;">
-                    <div class="pdL2 pdR2 pd-1">
+                    <div class="pd-l2 pd-r2 pd-1">
                         <div class="form-group">
                             <label>Email Id <i class='fa fa-info-circle' tooltip-placement="top"
                                                tooltip="If no email id is provided, email will be by default sent to you/company creator"></i></label>
@@ -151,7 +152,7 @@
                 </span>
                 <div><img src="{{imgPath}}summary.svg" class="icon gstr-icon text-middle" />
                     <div class="return-top text-middle">
-                        <div style="margin: 3px auto;" class="font-xlarge"><b>GSTR 3B SUMMARY</b>
+                        <div class="font-xlarge"><b>GSTR 3B SUMMARY</b>
                         </div>
                     </div>
                     <span class="btn-toolbar view-summary-btn pull-right">
@@ -171,7 +172,7 @@
                     <div>
                         <img src="{{imgPath}}cart.svg" class="icon gstr-icon text-middle" />
                         <div class="return-top text-middle">
-                            <div style="margin: 3px auto;" class="font-xlarge"><b class="text-middle">GSTR-1
+                            <div class="font-xlarge"><b class="text-middle">GSTR-1
                                     <ng-container *ngIf="isMonthSelected">
                                         ({{ moment(selectedMonth).format('MMMM YYYY') }})
                                     </ng-container>
@@ -261,10 +262,10 @@
             <!-- ============================ GSTR1 ================================== -->
 
             <!-- ============================ GSTR2 ================================== -->
-            <div style="position: relative" class="mt-2">
+            <div class="position-relative" class="mt-2">
 
-                <div class="text-overdue ss" style="margin: 20px 0px 0px;" *ngIf="!isMonthSelected">
-                    <i class="text-middle" style="padding: 0 4%;">Select month Wise Date to view GSTR2 summary.</i>
+                <div class="text-overdue ss" *ngIf="!isMonthSelected">
+                    <i class="text-middle">Select month Wise Date to view GSTR2 summary.</i>
                 </div>
 
 
@@ -278,7 +279,7 @@
                     <div>
                         <img src="{{imgPath}}bag.svg" class="icon gstr-icon text-middle" />
                         <div class="return-top text-middle">
-                            <div style="margin: 3px auto;" class="font-xlarge"><b>GSTR-2
+                            <div class="font-xlarge"><b>GSTR-2
 
                                     <ng-container *ngIf="isMonthSelected">
                                         ({{ moment(selectedMonth).format('MMMM YYYY') }})
@@ -310,7 +311,7 @@
                                     <span>&nbsp;Transactions</span></a></div>
                         </div>
 
-                        <div style="margin: 35px 0px 0;" class="text-overdue ss">
+                        <div class="text-overdue ss mr-t3">
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon text-middle">
                                 <path
                                     d="M437.2 74.8C388.8 26.4 324.4-.2 256-.2c-68.4 0-132.8 26.7-181.2 75.1C26.4 123.2-.2 187.6-.2 256c0 68.4 26.7 132.8 75.1 181.2 48.4 48.4 112.7 75.1 181.2 75.1 68.4 0 132.8-26.7 181.2-75.1s75.1-112.7 75.1-181.2c-.2-68.4-26.8-132.8-75.2-181.2z">
@@ -319,7 +320,7 @@
                                     d="M256.5 348.9c-17.7 0-32 14.1-32 31.6s14.3 31.6 32 31.6 32-14.2 32-31.6c.1-17.4-14.3-31.6-32-31.6zm-.8-246.2c-25.8 0-45.7 22.6-42.5 47.9 2.7 20.9 22.5 125.3 29.2 159.9 1.3 6.5 7 12.3 13.7 12.3h.3c6.5 0 12.1-5.7 13.3-12 6.5-34.1 26.5-138.9 29.1-160.2 3.3-25.6-17-47.9-43.1-47.9z">
                                 </path>
                             </svg>
-                            <i style="margin-left: 5px;" class="text-middle">We've temporarily disabled the GSTR-2 push
+                            <i class="text-middle p-0 mr-l05">We've temporarily disabled the GSTR-2 push
                                 option in
                                 Giddh Books as GSTN has disabled it.</i></div>
                     </div>
diff --git a/apps/web-giddh/src/app/gst/gst.component.scss b/apps/web-giddh/src/app/gst/gst.component.scss
index 61fb2f583a5..91327570f01 100644
--- a/apps/web-giddh/src/app/gst/gst.component.scss
+++ b/apps/web-giddh/src/app/gst/gst.component.scss
@@ -1,18 +1,18 @@
 @import "../../assets/css/color.scss";
 
 .return-body .main-wrapper {
-    background-color: #f5f5f5;
+    background-color: $gray-95;
     padding: 0;
-    border-right: 1px solid #eee;
+    border-right: 1px solid $gainsboro;
 }
 
 .return-content {
     padding: 15px;
-    background-color: #fff;
+    background-color: $white;
 }
 
 .btn-primary {
-    border-color: #5b64c9 !important;
+    border-color: $chetwode-blue !important;
 }
 .btn-primary.disabled,
 .btn-primary.disabled.active,
@@ -37,9 +37,9 @@ fieldset[disabled] .btn-primary:hover .btn-primary[disabled],
 .open .dropdown-toggle.btn-primary,
 .receipt-wrapper .doc-checkbox:checked,
 .doc-actions {
-    border-color: #5b64c9 !important;
-    background: #5b64c9;
-    color: #ffffff;
+    border-color: $chetwode-blue !important;
+    background: $chetwode-blue;
+    color: $white;
 }
 
 .btn,
@@ -67,10 +67,15 @@ svg.icon.icon-xxlg-md {
     width: 40px;
 }
 
-.return-content .return-top {
-    display: inline-block;
-    margin-left: 1%;
-}
+.return-content{
+    .return-top {
+        display: inline-block;
+        margin-left: 1%;
+        .font-xlarge{
+            margin: 3px auto;
+        }
+    }
+} 
 
 .text-middle {
     vertical-align: middle;
@@ -81,7 +86,7 @@ svg.icon.icon-xxlg-md {
 }
 
 .return-content .return-filed {
-    background-color: #00b177;
+    background-color: $jade-color;
 }
 
 .text-uppercase {
@@ -89,7 +94,7 @@ svg.icon.icon-xxlg-md {
 }
 
 .text-muted {
-    color: #777;
+    color: $gray;
 }
 
 .return-content .content-graph {
@@ -117,7 +122,7 @@ svg.icon.gstr-icon {
 
 .return-content .line {
     margin: 5px 18px;
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .return-content .line::before {
@@ -126,7 +131,7 @@ svg.icon.gstr-icon {
     width: 9px;
     height: 9px;
     border-radius: 5px;
-    background-color: #ededed;
+    background-color: $whisper-light;
     position: relative;
     top: 5px;
     right: 19px;
@@ -164,8 +169,11 @@ svg.icon {
 
 .text-overdue {
     color: $chetwode-blue;
+    margin: 20px 0px 0px;
+    i{
+        padding: 0 4%;
+    }
 }
-
 svg.icon.icon-xxlg-md {
     height: 40px;
     width: 40px;
@@ -183,14 +191,14 @@ svg.icon.icon-xxlg-md {
 }
 
 .btn-default {
-    color: #333;
-    background-color: #f5f5f5;
-    border-color: #ddd;
+    color: $night-rider;
+    background-color: $gray-95;
+    border-color: $gainsboro;
 }
 
 .return-body .notification {
     padding-top: 25px;
-    background: #fff;
+    background: $white;
 }
 
 .filing-demo-video {
@@ -219,13 +227,13 @@ svg.icon.icon-xxlg-md {
 }
 
 .label-default {
-    background-color: #999;
+    background-color: $nobel;
 }
 
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .filing-due-date {
@@ -234,7 +242,7 @@ hr {
 
 .filing-due-date .return-details {
     margin-top: 10px;
-    border: 1px solid #eee;
+    border: 1px solid $gainsboro;
     border-radius: 4px;
 }
 
@@ -256,7 +264,7 @@ hr {
     display: inline-block;
     margin-right: 6px;
     vertical-align: middle;
-    background-color: #41aaff;
+    background-color: $cornflower-blue;
 }
 
 .filing-due-date .return-details > table > tbody > tr > td:last-child {
@@ -270,7 +278,7 @@ hr {
 
 .return-body .notification .notify-title {
     font-size: 13px;
-    color: #999;
+    color: $nobel;
 }
 
 .return-body .notification .activity-graph {
@@ -289,14 +297,14 @@ hr {
     left: 4px;
     bottom: 5px;
     height: 75%;
-    border-left: 1px solid #e4e4e4;
+    border-left: 1px solid $whisper;
 }
 
 .return-body .notification .activity-graph .notify-circle {
     width: 9px;
     height: 9px;
     border-radius: 50%;
-    background-color: #2a85fb;
+    background-color: $primary;
     display: inline-block;
     margin-right: 15px;
     margin-top: 4px;
@@ -315,12 +323,12 @@ hr {
 
 .notify label.font-xs.text-muted strong {
     font-weight: 600;
-    color: #777 !important;
+    color: $gray !important;
 }
 
 .font-normal {
     font-size: 13px;
-    color: #777;
+    color: $gray;
 }
 
 .return-body .notification .faq-list {
@@ -329,25 +337,25 @@ hr {
 
 .return-body .notification .faq-list li {
     padding: 6px 10px;
-    color: #428bca;
+    color: $curious-blue;
     font-size: 13px;
 }
 
 .return-body .notification .faq-list li a:hover {
-    color: #005bd0;
+    color: $faux-true;
 }
 
 #c-tab ::ng-deep .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:focus,
 .nav-tabs > li.active > a:hover {
-    color: #555;
+    color: $zambezi;
     cursor: default;
-    background-color: #fff;
-    border: 2px solid #ddd;
+    background-color: $white;
+    border: 2px solid $gainsboro;
     border-right: 0 !important;
     border-left: 0 !important;
     border-top: 0 !important;
-    border-bottom-color: #025cff;
+    border-bottom-color: $navy-blue;
 }
 
 .my-dropdown-menu {
@@ -383,7 +391,7 @@ hr {
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .month-picker {
@@ -419,13 +427,13 @@ hr {
     color: inherit !important;
 }
 ::ng-deep #monthPicker .btn-info:hover .text-success {
-    color: #fff !important;
+    color: $white !important;
 }
 ::ng-deep #monthPicker .btn-default > .text-success {
     color: inherit !important;
 }
 ::ng-deep #monthPicker .btn-default:hover > .text-success {
-    color: #fff !important;
+    color: $white !important;
 }
 .parent {
     position: relative;
@@ -450,7 +458,7 @@ hr {
     top: 0px;
     width: 200px;
     height: 4px;
-    background-color: #5b64c9;
+    background-color: $chetwode-blue;
     animation: loading 2s linear infinite;
 }
 
@@ -500,7 +508,7 @@ hr {
 /*responsive*/
 @media (max-width: 767px) {
     .return-content {
-        background-color: #fff;
+        background-color: $white;
     }
     .filing-steps .font-large {
         font-size: 14px;
diff --git a/apps/web-giddh/src/app/gst/gst.component.ts b/apps/web-giddh/src/app/gst/gst.component.ts
index dc6090e72c0..38ee9ca2387 100644
--- a/apps/web-giddh/src/app/gst/gst.component.ts
+++ b/apps/web-giddh/src/app/gst/gst.component.ts
@@ -291,9 +291,14 @@ export class GstComponent implements OnInit, OnDestroy {
     /**
      * Select tax handler
      *
+     * @param {*} [event]
      * @memberof GstComponent
      */
-    public selectTax(): void {
+    public selectTax(event?: any): void {
+        if(event && event.value) {
+            this.activeCompanyGstNumber = event.value;
+        }
+
         this.store.dispatch(this._gstAction.SetActiveCompanyGstin(this.activeCompanyGstNumber));
         this.loadTaxReport();
     }
diff --git a/apps/web-giddh/src/app/gst/gstR1/gstR1.component.html b/apps/web-giddh/src/app/gst/gstR1/gstR1.component.html
index 779a741c56f..efdd1072967 100644
--- a/apps/web-giddh/src/app/gst/gstR1/gstR1.component.html
+++ b/apps/web-giddh/src/app/gst/gstR1/gstR1.component.html
@@ -1,6 +1,6 @@
 <hamburger-menu [pageHeading]="'GST'"></hamburger-menu>
 <div class="col-md-3 notification">
-    <div style="margin-bottom: 18px;">
+    <div class="mr-b2">
         <a href="#" target="_blank" rel="noreferrer noopener" class="filing-demo-video">
             <div class="text-middle video-thumbnail"> <svg xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 68 45" class="icon text-middle">
@@ -39,14 +39,14 @@
         </a>
     </div>
     <hr>
-    <div style="padding-bottom: 20px;">
+    <div class="pd-b2">
         <div id="ember1226" class="ember-view">
             <div class="filing-due-date"><span>Filing Dates for July returns</span>
                 <div class="return-details">
                     <table>
                         <colgroup>
                             <col>
-                            <col style="background-color: #e8f5ff; width: 50%;">
+                            <col class="return-detail-col">
                         </colgroup>
                         <tbody>
                             <tr>
@@ -74,7 +74,7 @@
                     <table>
                         <colgroup>
                             <col>
-                            <col style="background-color: #e8f5ff; width: 50%;">
+                            <col class="return-detail-col">
                         </colgroup>
                         <tbody>
                             <tr>
@@ -140,7 +140,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
 
                         <!---->
                         <div class="btn-group">
-                            <a href="#" style="border: 1px solid #eee;" class="btn btn-link"> <svg
+                            <a href="#" class="btn btn-link"> <svg
                                     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                     class="icon icon-md text-bottom">
                                     <path
@@ -185,7 +185,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
             </ul>
         </div>
         <div class="scroll-y noscroll-x body fill">
-            <div style="border-bottom: 1px solid #ddd;" class="sub-filter-nav-band" id="subtabs">
+            <div class="sub-filter-nav-band" id="subtabs">
                 <ul class="nav ember-view">
                     <li class="active"><a id="subtabs_1" href="#subtabs-1">Transaction Summary</a></li>
                     <li><a id="subtabs_2" href="#subtabs-2">HSN</a></li>
@@ -193,7 +193,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                     <li><a id="subtabs_4" href="#subtabs-4">B2CS</a></li>
                     <li><a id="subtabs_5" href="#subtabs-5">Document Issued</a></li>
                     <li class="pull-right ">
-                        <a style="padding: 10px 25px; margin: 5px auto; border-left: 1px solid #d7d1d1;" id="subtabs_6"
+                        <a class="failed-transaction" id="subtabs-6"
                             href="#subtabs-6">
                             <!---->Failed Transactions </a>
                     </li>
@@ -201,7 +201,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
             </div>
             <div class="transactions-overview">
                 <!---->
-                <hr style="margin: 0">
+                <hr class="m-0">
                 <div id="tab-body">
                     <div id="tab1" class="tab1div">
                         <div class="gstr-transactions-summary" id="hidebox">
@@ -243,7 +243,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path fill="#1D1D1B"
                                                         d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> B2B Invoices <i id="ember3126"
+                                                </svg> <span class="mr-l05"> B2B Invoices <i id="ember3126"
                                                         class="popovercontainer ember-view" data-original-title=""
                                                         title=""> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 512 512"
@@ -270,7 +270,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path
                                                         d="M256 244c-58.4 0-106-47.6-106-106S197.6 32 256 32s106 47.6 106 106-47.6 106-106 106zm0-180c-40.8 0-74 33.2-74 74s33.2 74 74 74 74-33.2 74-74-33.2-74-74-74zM480 480h-32v-56.1c0-57.3-46.7-104-104-104H168c-57.3 0-104 46.7-104 104V480H32v-56.1c0-75 61-136 136-136h176c75 0 136 61 136 136V480z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> B2C (Large) Invoices <i
+                                                </svg> <span class="mr-l05"> B2C (Large) Invoices <i
                                                         id="ember3129" class="popovercontainer ember-view"
                                                         data-original-title="" title=""> <svg id="Layer_1"
                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -300,7 +300,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path
                                                         d="M425.5 216.8l-22.7 22.6 48.6 48.6H288v32h161.4l-46.6 46.6 22.7 22.6 86.2-86.2z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> Export Invoices <i
+                                                </svg> <span class="mr-l05"> Export Invoices <i
                                                         class="popovercontainer" data-original-title="" title=""> <svg
                                                             id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 512 512"
@@ -327,7 +327,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path
                                                         d="M224 229c58.4 0 106-47.6 106-106S282.4 17 224 17 118 64.6 118 123s47.6 106 106 106zm0-180c40.8 0 74 33.2 74 74s-33.2 74-74 74-74-33.2-74-74 33.2-74 74-74zM346.7 310.9l10.7-30.1c-14.6-5.2-29.8-7.8-45.4-7.8H136C61 273 0 333.9 0 408.9V465h32v-56.1C32 351.6 78.7 305 136 305h176c11.9 0 23.6 2 34.7 5.9zM426.2 322.8l-22.7 22.6 47.6 47.6H289v32h162.1l-47.6 47.6 22.7 22.6 86.2-86.2z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> B2C (Small) Invoices <i
+                                                </svg> <span class="mr-l05"> B2C (Small) Invoices <i
                                                         id="ember3135" class="popovercontainer ember-view"
                                                         data-original-title="" title=""> <svg id="Layer_1"
                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -354,7 +354,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path fill="#1D1D1B"
                                                         d="M500 192h-32v19.6c0 1.7-.8 3.2-2.2 4.2l-39 26.1c-3.3 2.2-7.8-.2-7.8-4.2V152h-32v84.9c0 4-4.5 6.4-7.8 4.2l-37-24.8c-1.4-.9-2.2-2.5-2.2-4.2V192h-32v197.7c0 1.7.8 3.2 2.2 4.1l72.4 48.8c2.8 1.9 4.4 5 4.4 8.3V512h32v-59.7c0-3.3 1.7-6.4 4.4-8.3l74.4-50.1c1.4-.9 2.2-2.5 2.2-4.1V192zm-32 70.2v29.4c0 1.7-.8 3.2-2.2 4.2l-39 26.1c-3.3 2.2-7.8-.2-7.8-4.2v-29.4c0-1.7.8-3.2 2.2-4.2l39-26.1c3.3-2.2 7.8.2 7.8 4.2zm-81 25.3v29.4c0 4-4.5 6.4-7.8 4.2l-37-24.8c-1.4-.9-2.2-2.5-2.2-4.2v-29.4c0-4 4.5-6.4 7.8-4.2l37 24.8c1.4.9 2.2 2.5 2.2 4.2zm-47 85.2v-30.1c0-4 4.5-6.4 7.8-4.2l37 24.8c1.4.9 2.2 2.5 2.2 4.2v30.2c0 4-4.5 6.4-7.8 4.1l-37-24.9c-1.4-.9-2.2-2.4-2.2-4.1zm79 26.3v-30.7c0-1.7.8-3.2 2.2-4.2l39-26.1c3.3-2.2 7.8.2 7.8 4.2v30.5c0 1.7-.8 3.2-2.2 4.1l-39 26.3c-3.3 2.3-7.8-.1-7.8-4.1zM199.6 80.4l-54.9 36.8c-2 1.3-4.7-.1-4.7-2.5V0h-32v114.7c0 2.4-2.7 3.8-4.7 2.5L48.4 80.4c-2.8-1.9-4.4-5-4.4-8.3V48H12v234.2c0 3.3 1.7 6.5 4.4 8.3l87.1 58.4c2.8 1.9 4.4 5 4.4 8.3V512h32V357.2c0-3.3 1.7-6.5 4.4-8.3l87.1-58.4c2.8-1.9 4.4-5 4.4-8.3V48h-32v24.1c.2 3.4-1.5 6.5-4.2 8.3zm4.4 54.3v33.4c0 3.3-1.7 6.5-4.4 8.3l-54.9 36.8c-2 1.3-4.7-.1-4.7-2.5v-50.3c0-1 .5-1.9 1.3-2.5l47.1-31.6c6.7-4.3 15.6.4 15.6 8.4zm-96 25.8v50.3c0 2.4-2.7 3.8-4.7 2.5l-54.9-36.8c-2.8-1.9-4.4-5-4.4-8.3v-33.4c0-8 8.9-12.8 15.6-8.3l47.1 31.6c.8.4 1.3 1.4 1.3 2.4zM44 265.1v-34.4c0-8 8.9-12.8 15.6-8.3l47.1 31.6c.8.6 1.3 1.5 1.3 2.5v51.3c0 2.4-2.7 3.8-4.7 2.5l-54.9-36.8c-2.7-1.9-4.4-5-4.4-8.4zm96 42.6v-51.3c0-1 .5-1.9 1.3-2.5l47.1-31.6c6.6-4.5 15.6.3 15.6 8.3V265c0 3.3-1.7 6.5-4.4 8.3l-54.9 36.8c-2 1.5-4.7 0-4.7-2.4z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> Exempt <i
+                                                </svg> <span class="mr-l05"> Exempt <i
                                                         class="popovercontainer ember-view" data-original-title=""
                                                         title=""> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 512 512"
@@ -384,7 +384,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path fill="#1D1D1B"
                                                         d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> Credit / Debit Notes / Refund
+                                                </svg> <span class="mr-l05"> Credit / Debit Notes / Refund
                                                     Vouchers <i id="ember3141" class="popovercontainer ember-view"
                                                         data-original-title="" title=""> <svg id="Layer_1"
                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -406,7 +406,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                         <tr id="ember3143" class="row-hover secondary-row ember-view">
                                             <td></td>
                                             <td>
-                                                <!----><span style="margin-left: 5px;"> Credit Note Transactions </span>
+                                                <!----><span class="mr-l05"> Credit Note Transactions </span>
                                             </td>
                                             <td class="text-center"><a> 0 </a></td>
                                             <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -418,7 +418,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                         <tr id="ember3145" class="row-hover secondary-row ember-view">
                                             <td></td>
                                             <td>
-                                                <!----><span style="margin-left: 5px;"> Customer Debit Note Transactions
+                                                <!----><span class="mr-l05"> Customer Debit Note Transactions
                                                 </span></td>
                                             <td class="text-center"><a> 0 </a></td>
                                             <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -430,7 +430,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                         <tr id="ember3147" class="row-hover secondary-row ember-view">
                                             <td></td>
                                             <td>
-                                                <!----><span style="margin-left: 5px;"> Refund voucher </span></td>
+                                                <!----><span class="mr-l05"> Refund voucher </span></td>
                                             <td class="text-center"><a> 0 </a></td>
                                             <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
                                             <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -448,7 +448,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path
                                                         d="M319.4 128c-7.1-3.5-15.7-.6-19.2 6.5L186.1 364.8c-1.7 3.4-2 7.3-.7 10.9 1.2 3.6 3.8 6.6 7.2 8.3 2 1 4.1 1.5 6.4 1.5 5.5 0 10.4-3.1 12.8-8l114.1-230.3c3.5-7.1.6-15.7-6.5-19.2zM229 204.3c0-23.4-19-42.4-42.4-42.4s-42.4 19-42.4 42.4 19 42.4 42.4 42.4 42.4-19 42.4-42.4zm-23.8 0c0 10.2-8.3 18.5-18.5 18.5s-18.5-8.3-18.5-18.5 8.3-18.5 18.5-18.5c10.2-.1 18.5 8.3 18.5 18.5zM325.4 264.5c-23.4 0-42.4 19-42.4 42.4s19 42.4 42.4 42.4 42.4-19 42.4-42.4-19.1-42.4-42.4-42.4zm18.5 42.4c0 10.2-8.3 18.5-18.5 18.5s-18.5-8.3-18.5-18.5 8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> Advance Receipt <i
+                                                </svg> <span class="mr-l05"> Advance Receipt <i
                                                         id="ember3150" class="popovercontainer ember-view"
                                                         data-original-title="" title=""> <svg id="Layer_1"
                                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -481,7 +481,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path fill="#1D1D1B"
                                                         d="M403.7 330.6L347.3 387 325 364.5c-6.2-6.2-16.3-6.2-22.5 0-6.2 6.2-6.2 16.3 0 22.5l33.6 33.6c3.1 3.1 7.2 4.7 11.3 4.7s8.2-1.6 11.3-4.7l67.6-67.6c6.2-6.2 6.2-16.3 0-22.5-6.3-6.2-16.4-6.2-22.6.1zM93 97h202v31H93zM93 192h144v32H93z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> Tax Paid <i id="ember3153"
+                                                </svg> <span class="mr-l05"> Tax Paid <i id="ember3153"
                                                         class="popovercontainer ember-view" data-original-title=""
                                                         title=""> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 512 512"
@@ -511,7 +511,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                                     <path
                                                         d="M191.1 335.3h129.8c8.3 0 15.1-6.7 15.1-15.1 0-8.3-6.7-15.4-15.1-15.4H191.1c-8.3 0-15.1 7.1-15.1 15.4s6.7 15.1 15.1 15.1z">
                                                     </path>
-                                                </svg> <span style="margin-left: 5px;"> HSN Summary <i id="ember3156"
+                                                </svg> <span class="mr-l05"> HSN Summary <i id="ember3156"
                                                         class="popovercontainer ember-view" data-original-title=""
                                                         title=""> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                                             viewBox="0 0 512 512"
@@ -535,7 +535,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                 </table>
                             </div>
                         </div>
-                        <div class="filltertabs" id="fillterid">
+                        <div class="filter-tabs" id="fillterid">
                             <div class="filter-band">
                                 <div class="row font-small">
                                     <div class="col-md-12">
@@ -635,106 +635,106 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                     <thead>
                                         <tr>
                                             <!---->
-                                            <th style="" id="ember2431" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2431" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Invoice Date" title="Invoice Date"
                                                         class="pull-left over-flow"> Invoice Date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2432" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2432" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Invoice #" title="Invoice #"
                                                         class="pull-left over-flow"> Invoice # </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2433" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2433" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Customer GSTIN" title="Customer GSTIN"
                                                         class="pull-left over-flow"> Customer GSTIN </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2434" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2434" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Customer Name" title="Customer Name"
                                                         class="pull-left over-flow"> Customer Name </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2435" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2435" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Status" title="Status"
                                                         class="pull-left over-flow"> Status </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2436" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2436" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Action on GSTN" title="Action on GSTN"
                                                         class="pull-left over-flow"> Action on GSTN </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2437" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2437" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Place of supply" title="Place of supply"
                                                         class="pull-left over-flow"> Place of supply </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2438" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2438" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Invoice Type" title="Invoice Type"
                                                         class="pull-left over-flow"> Invoice Type </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2439" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2439" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Reverse Charge" title="Reverse Charge"
                                                         class="pull-left over-flow"> Reverse Charge </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2440" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2440" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Taxable Amount" title="Taxable Amount"
                                                         class=" over-flow"> Taxable Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2441" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2441" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2442" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2442" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2443" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2443" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2444" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2444" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember2445" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember2445" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Total Amount" title="Total Amount"
                                                         class=" over-flow"> Total Amount </div>
                                                     <!---->
@@ -744,7 +744,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr class="cursor-pointer " data-ember-action="" data-ember-action-2447="2447">
+                                        <tr class="cursor-pointer" data-ember-action="" data-ember-action-2447="2447">
                                             <!---->
                                             <td>10/07/2018</td>
                                             <td class="btn-link">INV-000040</td>
@@ -798,7 +798,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                                             <td align="right"><i class="icon-rupees font-11"></i>0.00</td>
                                             <td align="right"><i class="icon-rupees font-11"></i>1,180.00</td>
                                         </tr>
-                                        <tr class="cursor-pointer " data-ember-action="" data-ember-action-2453="2453">
+                                        <tr class="cursor-pointer" data-ember-action="" data-ember-action-2453="2453">
                                             <!---->
                                             <td>10/07/2018</td>
                                             <td class="btn-link">INV-000045</td>
@@ -827,7 +827,7 @@ <h4 class="font-normal">GSTR-1 Return generated for July - 2017</h4>
                             <div class="gstr-transactions-summary">
                                 <!---->
                                 <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
-                                <p style="padding-top:6px;" class="text-muted half">A summary of all the transactions in
+                                <p class="text-muted half pd-t05">A summary of all the transactions in
                                     the current filing period which are ready to be pushed to GSTN.</p>
                                 <div id="ember1350" class="ember-view">
                                     <table class="table table-striped transactions-table transactions-summary-table">
@@ -865,7 +865,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path fill="#1D1D1B"
                                                             d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> B2B Invoices <i
+                                                    </svg> <span class="mr-l05"> B2B Invoices <i
                                                             id="ember1353" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -893,7 +893,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path
                                                             d="M256 244c-58.4 0-106-47.6-106-106S197.6 32 256 32s106 47.6 106 106-47.6 106-106 106zm0-180c-40.8 0-74 33.2-74 74s33.2 74 74 74 74-33.2 74-74-33.2-74-74-74zM480 480h-32v-56.1c0-57.3-46.7-104-104-104H168c-57.3 0-104 46.7-104 104V480H32v-56.1c0-75 61-136 136-136h176c75 0 136 61 136 136V480z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> B2C (Large) Invoices <i
+                                                    </svg> <span class="mr-l05"> B2C (Large) Invoices <i
                                                             id="ember1356" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -923,7 +923,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path
                                                             d="M425.5 216.8l-22.7 22.6 48.6 48.6H288v32h161.4l-46.6 46.6 22.7 22.6 86.2-86.2z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Export Invoices <i
+                                                    </svg> <span class="mr-l05"> Export Invoices <i
                                                             id="ember1359" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -953,7 +953,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path fill="#1D1D1B"
                                                             d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Credit / Debit Notes /
+                                                    </svg> <span class="mr-l05"> Credit / Debit Notes /
                                                         Refund Vouchers <i id="ember1362"
                                                             class="popovercontainer ember-view" data-original-title=""
                                                             title=""> <svg id="Layer_1"
@@ -976,7 +976,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                             <tr id="ember1364" class="row-hover secondary-row ember-view">
                                                 <td></td>
                                                 <td>
-                                                    <!----><span style="margin-left: 5px;"> Credit Note Transactions
+                                                    <!----><span class="mr-l05"> Credit Note Transactions
                                                     </span></td>
                                                 <td class="text-center"><a> 0 </a></td>
                                                 <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -988,7 +988,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                             <tr id="ember1366" class="row-hover secondary-row ember-view">
                                                 <td></td>
                                                 <td>
-                                                    <!----><span style="margin-left: 5px;"> Customer Debit Note
+                                                    <!----><span class="mr-l05"> Customer Debit Note
                                                         Transactions </span></td>
                                                 <td class="text-center"><a> 0 </a></td>
                                                 <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -1000,7 +1000,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                             <tr id="ember1368" class="row-hover secondary-row ember-view">
                                                 <td></td>
                                                 <td>
-                                                    <!----><span style="margin-left: 5px;"> Refund voucher </span></td>
+                                                    <!----><span class="mr-l05"> Refund voucher </span></td>
                                                 <td class="text-center"><a> 0 </a></td>
                                                 <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
                                                 <td class="text-right"> <i class="icon-rupees font-11"></i>0.00 </td>
@@ -1018,7 +1018,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path
                                                             d="M319.4 128c-7.1-3.5-15.7-.6-19.2 6.5L186.1 364.8c-1.7 3.4-2 7.3-.7 10.9 1.2 3.6 3.8 6.6 7.2 8.3 2 1 4.1 1.5 6.4 1.5 5.5 0 10.4-3.1 12.8-8l114.1-230.3c3.5-7.1.6-15.7-6.5-19.2zM229 204.3c0-23.4-19-42.4-42.4-42.4s-42.4 19-42.4 42.4 19 42.4 42.4 42.4 42.4-19 42.4-42.4zm-23.8 0c0 10.2-8.3 18.5-18.5 18.5s-18.5-8.3-18.5-18.5 8.3-18.5 18.5-18.5c10.2-.1 18.5 8.3 18.5 18.5zM325.4 264.5c-23.4 0-42.4 19-42.4 42.4s19 42.4 42.4 42.4 42.4-19 42.4-42.4-19.1-42.4-42.4-42.4zm18.5 42.4c0 10.2-8.3 18.5-18.5 18.5s-18.5-8.3-18.5-18.5 8.3-18.5 18.5-18.5 18.5 8.3 18.5 18.5z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Advance Receipt <i
+                                                    </svg> <span class="mr-l05"> Advance Receipt <i
                                                             id="ember1371" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -1051,7 +1051,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                         <path fill="#1D1D1B"
                                                             d="M403.7 330.6L347.3 387 325 364.5c-6.2-6.2-16.3-6.2-22.5 0-6.2 6.2-6.2 16.3 0 22.5l33.6 33.6c3.1 3.1 7.2 4.7 11.3 4.7s8.2-1.6 11.3-4.7l67.6-67.6c6.2-6.2 6.2-16.3 0-22.5-6.3-6.2-16.4-6.2-22.6.1zM93 97h202v31H93zM93 192h144v32H93z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Tax Paid <i id="ember1374"
+                                                    </svg> <span class="mr-l05"> Tax Paid <i id="ember1374"
                                                             class="popovercontainer ember-view" data-original-title=""
                                                             title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -1080,7 +1080,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                             <div class="gstr-transactions-summary">
                                 <!---->
                                 <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
-                                <p style="padding-top:6px;" class="text-muted half">This section includes the HSN-wise
+                                <p class="text-muted half pd-t05">This section includes the HSN-wise
                                     summary of the items you have sold</p>
                                 <div id="ember1945" class="ember-view">
                                     <div class="filings-empty-state"> <svg xmlns="http://www.w3.org/2000/svg"
@@ -1176,7 +1176,7 @@ <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
                             <div class="gstr-transactions-summary">
                                 <!---->
                                 <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
-                                <p style="padding-top:6px;" class="text-muted half">This section displays the sale of
+                                <p class="text-muted half pd-t05">This section displays the sale of
                                     goods and services that are nil rated.&nbsp;Nil rated goods and services are those
                                     that have 0% GST but allows you to claim ITC on the filing paid on inputs</p>
                                 <div id="ember1945" class="ember-view">
@@ -1186,29 +1186,29 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                                             <thead>
                                                 <tr>
                                                     <!---->
-                                                    <th style="" id="ember1947" class="  text-left ember-view">
-                                                        <div style="position: relative">
+                                                    <th id="ember1947" class="text-left ember-view">
+                                                        <div class="position-relative">
                                                             <div data-test-title="Supply Type" title="Supply Type"
                                                                 class="pull-left over-flow"> Supply Type </div>
                                                             <!---->
                                                         </div>
                                                     </th>
-                                                    <th style="" id="ember1948" class="  text-right ember-view">
-                                                        <div style="position: relative">
+                                                    <th id="ember1948" class="text-right ember-view">
+                                                        <div class="position-relative">
                                                             <div data-test-title="Nil Amount" title="Nil Amount"
                                                                 class=" over-flow"> Nil Amount </div>
                                                             <!---->
                                                         </div>
                                                     </th>
-                                                    <th style="" id="ember1949" class="  text-right ember-view">
-                                                        <div style="position: relative">
+                                                    <th id="ember1949" class="text-right ember-view">
+                                                        <div class="position-relative">
                                                             <div data-test-title="Exempt Amount" title="Exempt Amount"
                                                                 class=" over-flow"> Exempt Amount </div>
                                                             <!---->
                                                         </div>
                                                     </th>
-                                                    <th style="" id="ember1950" class="  text-right ember-view">
-                                                        <div style="position: relative">
+                                                    <th id="ember1950" class="text-right ember-view">
+                                                        <div class="position-relative">
                                                             <div data-test-title="Non GST Amount" title="Non GST Amount"
                                                                 class=" over-flow"> Non GST Amount </div>
                                                             <!---->
@@ -1253,7 +1253,7 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                             <div class="gstr-transactions-summary">
                                 <!---->
                                 <h4 class="clearfix gstr-summary-title">B2C (Small) Details</h4>
-                                <p style="padding-top:6px;" class="text-muted half">Details of invoices with value less
+                                <p class="text-muted half pd-t05">Details of invoices with value less
                                     than 2.5 lakhs that you’ve issued to consumers other than B2C (Large) transactions.
                                 </p>
                                 <div id="ember1945" class="ember-view">
@@ -1385,9 +1385,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>1</td>
                                                 <td> Invoices for outward supply </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1412,8 +1411,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                         </a></div>
                                                 </td>
                                                 <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                    <td colspan="5" class="p-0">
+                                                        <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1431,9 +1430,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>3</td>
                                                 <td> Revised Invoice </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1451,9 +1449,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>4</td>
                                                 <td> Debit Notes </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1471,9 +1468,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>5</td>
                                                 <td> Credit Notes </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1491,9 +1487,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>6</td>
                                                 <td> Receipt voucher </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1511,9 +1506,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>7</td>
                                                 <td> Payment Voucher </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1531,9 +1525,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>8</td>
                                                 <td> Refund voucher </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1551,9 +1544,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>9</td>
                                                 <td> Delivery Challan for job work </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1571,9 +1563,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>10</td>
                                                 <td> Delivery Challan for supply on approval </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1591,9 +1582,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td></td>
                                                 <td>11</td>
                                                 <td> Delivery Challan in case of liquid gas </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1612,9 +1602,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                                 <td>12</td>
                                                 <td> Delivery Challan in cases other than by way of supply (excluding at
                                                     S no. 9 to 11) </td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table style="margin-bottom: 0; border-left: 1px solid #ededed;"
-                                                        class="table zi-table table-hover">
+                                                    <td colspan="5" class="p-0">
+                                                        <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1631,10 +1620,8 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                                             <tr>
                                                 <td colspan="2"></td>
                                                 <td><strong>Total</strong></td>
-                                                <td colspan="5" style="padding: 0;">
-                                                    <table
-                                                        style="margin-bottom: 0;border-bottom: 0;background-color: #f9f9f9;"
-                                                        class="table zi-table">
+                                                <td colspan="5" class="p-0">
+                                                    <table class="table zi-table table-hover mb-0 zi-table-child">
 
                                                         <tbody>
                                                             <tr>
@@ -1653,40 +1640,40 @@ <h4 class="clearfix gstr-summary-title"> Document Issued
                             </div>
                         </div>
                         <div class="subtabs-box" id="subtabs-6">
-                            <table id="ember1972" class="transactions-table   table zi-table table-hover ember-view">
+                            <table id="ember1972" class="transactions-table table zi-table table-hover ember-view">
                                 <thead>
                                     <tr>
                                         <!---->
-                                        <th style="" id="ember1973" class="  text-left ember-view">
-                                            <div style="position: relative">
+                                        <th id="ember1973" class="text-left ember-view">
+                                            <div class="position-relative">
                                                 <div data-test-title="Transaction #" title="Transaction #"
                                                     class="pull-left over-flow"> Transaction # </div>
                                                 <!---->
                                             </div>
                                         </th>
-                                        <th style="" id="ember1974" class="  text-left ember-view">
-                                            <div style="position: relative">
+                                        <th id="ember1974" class="text-left ember-view">
+                                            <div class="position-relative">
                                                 <div data-test-title="Transaction date" title="Transaction date"
                                                     class="pull-left over-flow"> Transaction date </div>
                                                 <!---->
                                             </div>
                                         </th>
-                                        <th style="" id="ember1975" class="  text-left ember-view">
-                                            <div style="position: relative">
+                                        <th id="ember1975" class="text-left ember-view">
+                                            <div class="position-relative">
                                                 <div data-test-title="Transaction Type" title="Transaction Type"
                                                     class="pull-left over-flow"> Transaction Type </div>
                                                 <!---->
                                             </div>
                                         </th>
-                                        <th style="" id="ember1976" class="  text-left ember-view">
-                                            <div style="position: relative">
+                                        <th id="ember1976" class="text-left ember-view">
+                                            <div class="position-relative">
                                                 <div data-test-title="Error Code" title="Error Code"
                                                     class="pull-left over-flow"> Error Code </div>
                                                 <!---->
                                             </div>
                                         </th>
-                                        <th style="width:30%" id="ember1977" class="  text-left ember-view">
-                                            <div style="position: relative">
+                                        <th width="30%" id="ember1977" class="text-left ember-view">
+                                            <div class="position-relative">
                                                 <div data-test-title="Error Message" title="Error Message"
                                                     class="pull-left over-flow"> Error Message </div>
                                                 <!---->
diff --git a/apps/web-giddh/src/app/gst/gstR1/gstR1.component.scss b/apps/web-giddh/src/app/gst/gstR1/gstR1.component.scss
index 67436b2ac96..abeae78ea09 100644
--- a/apps/web-giddh/src/app/gst/gstR1/gstR1.component.scss
+++ b/apps/web-giddh/src/app/gst/gstR1/gstR1.component.scss
@@ -1,4 +1,4 @@
-@import '../../../assets/css/color.scss';
+@import "../../../assets/css/color.scss";
 
 .column.list-column.expanded-list-column {
     width: auto;
@@ -6,7 +6,7 @@
 .tax-engine .column.list-column {
     display: block;
 
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
 }
 .tax-engine .column {
     height: 100%;
@@ -24,7 +24,7 @@
 }
 .tax-engine .list-filter {
     padding: 15px !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid gainsboro !important;
     height: 80px;
 }
 .tax-engine{
@@ -36,8 +36,8 @@
                     border: 1px solid $gainsboro;
                 }
             }
-        }
-    }
+        } 
+    } 
 }
 
 list-header .btn-toolbar .btn-group {
@@ -79,7 +79,7 @@ fieldset[disabled] .btn-link {
     box-shadow: none;
 }
 .btn-link {
-    color: #428bca;
+    color: $curious-blue;
     font-weight: 400;
     cursor: pointer;
     border-radius: 0;
@@ -141,7 +141,7 @@ svg.icon.icon-sm {
 .dropdown-menu li .help-text,
 .modal-header .help-text,
 .text-muted {
-    color: #777;
+    color: $gray;
 }
 .space {
     margin-top: 10px;
@@ -152,7 +152,7 @@ svg.icon.icon-sm {
     display: inline-block;
     width: 6px;
     height: 6px;
-    background-color: #2a85fb;
+    background-color: $primary;
     border-radius: 50%;
     margin-right: 5px;
     vertical-align: middle;
@@ -196,7 +196,7 @@ svg.icon.icon-sm {
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 .tax-engine .transactions-overview .gstr-transactions-summary {
     padding: 15px 35px;
@@ -215,7 +215,7 @@ hr {
     .transactions-overview
     .gstr-transactions-summary
     .transactions-table {
-    border: 1px solid #ededed;
+    border: 1px solid $gainsboro;
 }
 .tax-engine .table.transactions-table,
 .tax-engine .transactions-list .zi-table.table-scroll {
@@ -234,11 +234,11 @@ address {
 }
 .tax-engine .table.transactions-table thead:first-child tr:first-child th {
     padding: 16px 12px;
-    font-size: 14px;
+    font-size: 13px;
     border-bottom: 1px solid $gainsboro;
 }
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 .tax-engine .gstr-transactions-summary .table > thead > tr > th {
     padding: 10px;
@@ -246,7 +246,7 @@ address {
     font-weight: 600;
 }
 .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 .table caption + thead tr:first-child td,
 .table caption + thead tr:first-child th,
@@ -257,8 +257,8 @@ address {
     border-top: 0;
 }
 .table thead > tr > th {
-    border-bottom: 1px solid #eee;
-    color: #777;
+    border-bottom: 1px solid $gainsboro;
+    color: $gray;
 }
 .tax-engine .table.transactions-table tbody > tr > td {
     max-width: 160px;
@@ -276,7 +276,7 @@ address {
     padding: 8px;
     line-height: 1.42857143;
     vertical-align: top;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine
@@ -285,7 +285,7 @@ address {
     > tr:not(.secondary-row)
     + tr.secondary-row
     > td {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid $gainsboro;
 }
 .tax-engine
     .table.transactions-summary-table
@@ -296,8 +296,8 @@ address {
 }
 .tax-engine .table.transactions-summary-table > tbody > tr.secondary-row > td {
     border: none;
-    background-color: #fff;
-    border-right: 1px solid #ededed;
+    background-color: $white;
+    border-right: 1px solid $gainsboro;
     font-size: 13px;
     padding: 13px;
 }
@@ -338,7 +338,7 @@ address {
             display: inline-block;
         }
     }
-    }
+    } 
 }
 .tax-engine .sub-filter-nav-band ul > li > a {
     cursor: pointer;
@@ -350,12 +350,12 @@ address {
 .tax-engine .sub-filter-nav-band ul > li.active:after {
     content: "";
     display: block;
-    border-bottom: 2px solid #2a85fb;
+    border-bottom: 2px solid $primary;
     width: 55%;
     margin: auto;
 }
 .tax-engine .sub-filter-nav-band ul > li.active > a {
-    color: #222;
+    color: $night-rider;
     font-weight: 600;
 }
 #subtabs {
@@ -363,7 +363,7 @@ address {
 }
 .tax-engine .gstr-transactions-summary .gstr-summary-title {
     margin: 0 0 6px;
-    color: #777;
+    color: $gray;
 }
 .gstr-transactions-summary p {
     margin-bottom: 10px;
@@ -402,7 +402,7 @@ svg.icon.icon-xs {
     display: block;
 }
 .tax-engine .transactions-list .filter-band {
-    background-color: #f5fafe;
+    background-color: $alice-blue;
     padding: 20px;
     height: 66px;
 }
@@ -442,8 +442,8 @@ svg.icon.icon-sm {
 .tax-engine .transactions-list .filter-band .btn,
 .tax-engine .transactions-list .filter-band .btn:focus,
 .tax-engine .transactions-list .filter-band .btn:hover {
-    color: #2a85fb;
-    border-color: #2a85fb;
+    color: $primary;
+    border-color: $primary;
     background-color: transparent;
     box-shadow: none;
 }
@@ -454,7 +454,7 @@ svg.icon.icon-sm {
 .tax-engine .transactions-list .filter-band .btn .caret,
 .tax-engine .transactions-list .filter-band .btn:focus .caret,
 .tax-engine .transactions-list .filter-band .btn:hover .caret {
-    border-top-color: #2a85fb;
+    border-top-color: $primary;
 }
 .caret {
     display: inline-block;
@@ -462,7 +462,7 @@ svg.icon.icon-sm {
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
-    border-top: 4px solid #000;
+    border-top: 4px solid $black;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
     border-bottom: 0 dotted;
@@ -480,17 +480,17 @@ svg.icon.icon-sm {
 }
 .table-striped > tbody > tr:hover {
     cursor: pointer;
-    background-color: #fafafa !important;
+    background-color: $alice-blue-light !important;
 }
 .table-striped > tbody > tr:nth-child(odd) {
-    background-color: #f9f9f9;
+    background-color: $alice-blue-light;
 }
 
 .table-striped > tbody > tr:nth-child(even) {
-    background-color: #fff;
+    background-color: $white;
 }
 .zi-table.table-hover tbody tr:hover td {
-    background-color: #fafafa;
+    background-color: $alice-blue-light;
     cursor: pointer;
 }
 .table-hover > tbody > tr:hover > td,
@@ -507,7 +507,7 @@ svg.icon.icon-sm {
 .table > thead > tr.active > th,
 .table > thead > tr > td.active,
 .table > thead > tr > th.active {
-    background-color: #f5f5f5;
+    background-color: $gray-95;
 }
 .tax-engine
     .table.transactions-table
@@ -519,14 +519,14 @@ svg.icon.icon-sm {
 
 
 .return-detail-col{
-    background-color: $extra-dark-alice-blue;
+    background-color: $whisper;
     width: 50%;
 }
 
 .failed-transaction{
     padding: 10px 25px;
     margin: 5px auto;
-    border-left: 1px solid $light-grey;
+    border-left: 1px solid $gainsboro;
 }
 
 .zi-table-child{
diff --git a/apps/web-giddh/src/app/gst/gstR2/gstR2.component.html b/apps/web-giddh/src/app/gst/gstR2/gstR2.component.html
index a542652bad8..0bbfc2672f0 100644
--- a/apps/web-giddh/src/app/gst/gstR2/gstR2.component.html
+++ b/apps/web-giddh/src/app/gst/gstR2/gstR2.component.html
@@ -11,8 +11,8 @@
 
                             <!---->
                             <div class="btn-group">
-                                <a href="#" target="_blank" rel="noreferrer noopener" style="border: 1px solid #eee;"
-                                    class="btn btn-link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+                                <a href="#" target="_blank" rel="noreferrer noopener"
+                                    class="btn btn-link gstr-2-filing"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                                         class="icon icon-md text-bottom">
                                         <path
                                             d="M357.2 238.4l-143.1-90c-12.4-7.8-28 2-28 17.6v180c0 15.7 15.6 25.4 28 17.6l143.1-90c12.4-7.9 12.4-27.4 0-35.2z">
@@ -46,7 +46,7 @@
                         </svg>
                         <div class="text-middle nav-top">
                             <div class="text-middle"> GSTR-2 (July - 2017) </div>
-                            <div style="font-weight: normal;" class="font-xs text-muted text-middle">Details of inward
+                            <div class="font-xs text-muted text-middle font-normal">Details of inward
                                 supplies of goods and services</div>
                         </div>
                     </div>
@@ -90,24 +90,20 @@
                                         <div class="row">
                                             <div class="col-md-12 text-uppercase title">Reconciliation Details</div>
                                             <div class="showdiv">
-                                                <div class="transaction-info col-md-3 reconciliation"> <span
-                                                        style="color: #39c296;" class="font-xxlarge over-flow">0</span>
+                                                <div class="transaction-info col-md-3 reconciliation"> <span class="font-xxlarge over-flow trans-span1">0</span>
                                                     <br> Matched Transactions </div>
-                                                <div id="ember1228" class="transaction-info col-md-3 ember-view"> <span
-                                                        style="color: #f75398;" class="font-xxlarge over-flow">1</span>
+                                                <div id="ember1228" class="transaction-info col-md-3 ember-view"> <span class="font-xxlarge over-flow trans-span2">1</span>
                                                     <br> Mismatched Transactions </div>
-                                                <div id="ember1229" class="transaction-info col-md-3 ember-view"> <span
-                                                        style="color: #b590ff;" class="font-xxlarge over-flow">36</span>
+                                                <div id="ember1229" class="transaction-info col-md-3 ember-view"> <span class="font-xxlarge over-flow trans-span3">36</span>
                                                     <br> Missing in Giddh Books </div>
-                                                <div id="ember1230" class="transaction-info col-md-3 ember-view"> <span
-                                                        style="color: #fa9c00;" class="font-xxlarge over-flow">1</span>
+                                                <div id="ember1230" class="transaction-info col-md-3 ember-view"> <span class="font-xxlarge over-flow trans-span4">1</span>
                                                     <br> Missing in GSTN </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                            <hr style="margin: 0">
+                            <hr class="m-0">
                             <div class="gstr-transactions-summary">
                                 <!---->
                                 <div class="text-uppercase title"> Overall Summary </div>
@@ -147,7 +143,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> B2B Invoices <i
+                                                    </svg> <span class="mr-l05"> B2B Invoices <i
                                                             id="ember1240" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -176,7 +172,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> B2BUR Invoices <i
+                                                    </svg> <span class="mr-l05"> B2BUR Invoices <i
                                                             id="ember1243" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -208,7 +204,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Credit / Debit Notes
+                                                    </svg> <span class="mr-l05"> Credit / Debit Notes
                                                         (Registered) <i id="ember1246"
                                                             class="popovercontainer ember-view" data-original-title=""
                                                             title=""> <svg id="Layer_1"
@@ -241,7 +237,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Credit / Debit Notes
+                                                    </svg> <span class="mr-l05"> Credit / Debit Notes
                                                         (Unregistered) <i id="ember1249"
                                                             class="popovercontainer ember-view" data-original-title=""
                                                             title=""> <svg id="Layer_1"
@@ -271,7 +267,7 @@
                                                         <path
                                                             d="M426 0H86C38.6 0 0 38.6 0 86v340c0 47.4 38.6 86 86 86h340c47.4 0 86-38.6 86-86V86c0-47.4-38.6-86-86-86zM312 32v124.3l-56-49.7-56 49.7V32h112zm168 394c0 29.8-24.2 54-54 54H86c-29.8 0-54-24.2-54-54V86c0-29.8 24.2-54 54-54h82v195.7l88-78.3 88 78.3V32h82c29.8 0 54 24.2 54 54v340z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Import of Goods / Capital
+                                                    </svg> <span class="mr-l05"> Import of Goods / Capital
                                                         Goods <i id="ember1252" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -303,7 +299,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> Import of Services <i
+                                                    </svg> <span class="mr-l05"> Import of Services <i
                                                             id="ember1255" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -330,7 +326,7 @@
                                                         <path fill="#1D1D1B"
                                                             d="M500 192h-32v19.6c0 1.7-.8 3.2-2.2 4.2l-39 26.1c-3.3 2.2-7.8-.2-7.8-4.2V152h-32v84.9c0 4-4.5 6.4-7.8 4.2l-37-24.8c-1.4-.9-2.2-2.5-2.2-4.2V192h-32v197.7c0 1.7.8 3.2 2.2 4.1l72.4 48.8c2.8 1.9 4.4 5 4.4 8.3V512h32v-59.7c0-3.3 1.7-6.4 4.4-8.3l74.4-50.1c1.4-.9 2.2-2.5 2.2-4.1V192zm-32 70.2v29.4c0 1.7-.8 3.2-2.2 4.2l-39 26.1c-3.3 2.2-7.8-.2-7.8-4.2v-29.4c0-1.7.8-3.2 2.2-4.2l39-26.1c3.3-2.2 7.8.2 7.8 4.2zm-81 25.3v29.4c0 4-4.5 6.4-7.8 4.2l-37-24.8c-1.4-.9-2.2-2.5-2.2-4.2v-29.4c0-4 4.5-6.4 7.8-4.2l37 24.8c1.4.9 2.2 2.5 2.2 4.2zm-47 85.2v-30.1c0-4 4.5-6.4 7.8-4.2l37 24.8c1.4.9 2.2 2.5 2.2 4.2v30.2c0 4-4.5 6.4-7.8 4.1l-37-24.9c-1.4-.9-2.2-2.4-2.2-4.1zm79 26.3v-30.7c0-1.7.8-3.2 2.2-4.2l39-26.1c3.3-2.2 7.8.2 7.8 4.2v30.5c0 1.7-.8 3.2-2.2 4.1l-39 26.3c-3.3 2.3-7.8-.1-7.8-4.1zM199.6 80.4l-54.9 36.8c-2 1.3-4.7-.1-4.7-2.5V0h-32v114.7c0 2.4-2.7 3.8-4.7 2.5L48.4 80.4c-2.8-1.9-4.4-5-4.4-8.3V48H12v234.2c0 3.3 1.7 6.5 4.4 8.3l87.1 58.4c2.8 1.9 4.4 5 4.4 8.3V512h32V357.2c0-3.3 1.7-6.5 4.4-8.3l87.1-58.4c2.8-1.9 4.4-5 4.4-8.3V48h-32v24.1c.2 3.4-1.5 6.5-4.2 8.3zm4.4 54.3v33.4c0 3.3-1.7 6.5-4.4 8.3l-54.9 36.8c-2 1.3-4.7-.1-4.7-2.5v-50.3c0-1 .5-1.9 1.3-2.5l47.1-31.6c6.7-4.3 15.6.4 15.6 8.4zm-96 25.8v50.3c0 2.4-2.7 3.8-4.7 2.5l-54.9-36.8c-2.8-1.9-4.4-5-4.4-8.3v-33.4c0-8 8.9-12.8 15.6-8.3l47.1 31.6c.8.4 1.3 1.4 1.3 2.4zM44 265.1v-34.4c0-8 8.9-12.8 15.6-8.3l47.1 31.6c.8.6 1.3 1.5 1.3 2.5v51.3c0 2.4-2.7 3.8-4.7 2.5l-54.9-36.8c-2.7-1.9-4.4-5-4.4-8.4zm96 42.6v-51.3c0-1 .5-1.9 1.3-2.5l47.1-31.6c6.6-4.5 15.6.3 15.6 8.3V265c0 3.3-1.7 6.5-4.4 8.3l-54.9 36.8c-2 1.5-4.7 0-4.7-2.4z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> NIL Rated Invoices <i
+                                                    </svg> <span class="mr-l05"> NIL Rated Invoices <i
                                                             id="ember1258" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -360,7 +356,7 @@
                                                         <path
                                                             d="M191.1 335.3h129.8c8.3 0 15.1-6.7 15.1-15.1 0-8.3-6.7-15.4-15.1-15.4H191.1c-8.3 0-15.1 7.1-15.1 15.4s6.7 15.1 15.1 15.1z">
                                                         </path>
-                                                    </svg> <span style="margin-left: 5px;"> HSN / SAC Summary <i
+                                                    </svg> <span class="mr-l05"> HSN / SAC Summary <i
                                                             id="ember1261" class="popovercontainer ember-view"
                                                             data-original-title="" title=""> <svg id="Layer_1"
                                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
@@ -402,7 +398,7 @@
                                             </span></a> </li>
                                 </ul>
                             </div>
-                            <div class="subtabs-box" id="subtabs-1" style="display:block;">
+                            <div class="subtabs-box d-block" id="subtabs-1">
                                 <div class="filings-empty-state"> <svg xmlns="http://www.w3.org/2000/svg"
                                         viewBox="0 0 523.3 737.3" class="text-middle empty-state-icon">
                                         <path fill="#FFC86B"
@@ -500,66 +496,66 @@
                                             <th id="ember3911" class="cursor-pointer bulk-selection-cell ember-view">
                                                 <input type="checkbox" id="ember3912"
                                                     class="cursor-pointer ember-checkbox ember-view"></th>
-                                            <th style="width:250px" id="ember3914" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3914" class="text-left ember-view width-vendor">
+                                                <div class="position-relative">
                                                     <div data-test-title="Vendor Details" title="Vendor Details"
                                                         class="pull-left over-flow"> Vendor Details </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:155px" id="ember3915" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3915" class="text-left ember-view width-date">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction Date" title="Transaction Date"
                                                         class="pull-left over-flow"> Transaction Date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:130px" id="ember3916" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3916" class="text-left ember-view width-supply">
+                                                <div class="position-relative">
                                                     <div data-test-title="Place of Supply" title="Place of Supply"
                                                         class="pull-left over-flow"> Place of Supply </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:140px" id="ember3917" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3917" class="text-right ember-view width-amount">
+                                                <div class="position-relative">
                                                     <div data-test-title="Taxable Amount" title="Taxable Amount"
                                                         class=" over-flow"> Taxable Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3918" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST
+                                            <th id="ember3918" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="IGST" title="IGST" class="over-flow"> IGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3919" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST
+                                            <th id="ember3919" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="CGST" title="CGST" class="over-flow"> CGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3920" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST
+                                            <th id="ember3920" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="SGST" title="SGST" class="over-flow"> SGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3921" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess
+                                            <th id="ember3921" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="Cess" title="Cess" class="over-flow"> Cess
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3922" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3922" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Total Amount" title="Total Amount"
-                                                        class=" over-flow"> Total Amount </div>
+                                                        class="over-flow"> Total Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
@@ -572,7 +568,7 @@
                                                 <input type="checkbox" id="ember3926"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 06AACCG0527D1Z8<span
+                                                <div class="text-nowrap"> 06AACCG0527D1Z8<span
                                                         class="text-muted font-xxs"> (341641424172-1)</span>
                                                     <!---->
                                                 </div>
@@ -640,66 +636,66 @@
                                             <th id="ember3911" class="cursor-pointer bulk-selection-cell ember-view">
                                                 <input type="checkbox" id="ember3912"
                                                     class="cursor-pointer ember-checkbox ember-view"></th>
-                                            <th style="width:250px" id="ember3940" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3940" class="text-left ember-view width-vendor">
+                                                <div class="position-relative">
                                                     <div data-test-title="Vendor Details" title="Vendor Details"
                                                         class="pull-left over-flow"> Vendor Details </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:155px" id="ember3915" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3915" class="text-left ember-view width-date">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction Date" title="Transaction Date"
                                                         class="pull-left over-flow"> Transaction Date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:130px" id="ember3916" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3916" class="text-left ember-view width-supply">
+                                                <div class="position-relative">
                                                     <div data-test-title="Place of Supply" title="Place of Supply"
                                                         class="pull-left over-flow"> Place of Supply </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:140px" id="ember3917" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3917" class="text-right ember-view width-amount">
+                                                <div class="position-relative">
                                                     <div data-test-title="Taxable Amount" title="Taxable Amount"
                                                         class=" over-flow"> Taxable Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3918" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST
+                                            <th id="ember3918" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="IGST" title="IGST" class="over-flow"> IGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3919" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST
+                                            <th id="ember3919" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="CGST" title="CGST" class="over-flow"> CGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3920" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST
+                                            <th id="ember3920" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="SGST" title="SGST" class="over-flow"> SGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3921" class="  text-right ember-view">
-                                                <div style="position: relative">
-                                                    <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess
+                                            <th id="ember3921" class="text-right ember-view">
+                                                <div class="position-relative">
+                                                    <div data-test-title="Cess" title="Cess" class="over-flow"> Cess
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3922" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3922" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Total Amount" title="Total Amount"
-                                                        class=" over-flow"> Total Amount </div>
+                                                        class="over-flow"> Total Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
@@ -712,7 +708,7 @@
                                                 <input type="checkbox" id="ember3944"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23BCLPK7110F1ZY<span
+                                                <div class="text-nowrap"> 23BCLPK7110F1ZY<span
                                                         class="text-muted font-xxs"> (3416)</span>
                                                     <!---->
                                                 </div>
@@ -770,7 +766,7 @@
                                                 <input type="checkbox" id="ember3959"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 06AACCG0527D1Z8<span
+                                                <div class="text-nowrap"> 06AACCG0527D1Z8<span
                                                         class="text-muted font-xxs"> (695466678040-1)</span>
                                                     <!---->
                                                 </div>
@@ -829,7 +825,7 @@
                                                 <input type="checkbox" id="ember3974"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAECD1043M1ZP<span
+                                                <div class="text-nowrap"> 27AAECD1043M1ZP<span
                                                         class="text-muted font-xxs"> (144304)</span>
                                                     <!---->
                                                 </div>
@@ -885,7 +881,7 @@
                                                 <input type="checkbox" id="ember3989"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAECD1043M1ZP<span
+                                                <div class="text-nowrap"> 27AAECD1043M1ZP<span
                                                         class="text-muted font-xxs"> (33264)</span>
                                                     <!---->
                                                 </div>
@@ -941,7 +937,7 @@
                                                 <input type="checkbox" id="ember4004"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAECD1043M1ZP<span
+                                                <div class="text-nowrap"> 27AAECD1043M1ZP<span
                                                         class="text-muted font-xxs"> (85054)</span>
                                                     <!---->
                                                 </div>
@@ -997,7 +993,7 @@
                                                 <input type="checkbox" id="ember4019"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 24AAMCA2213N1ZQ<span
+                                                <div class="text-nowrap"> 24AAMCA2213N1ZQ<span
                                                         class="text-muted font-xxs"> (AI171807100076)</span>
                                                     <!---->
                                                 </div>
@@ -1056,7 +1052,7 @@
                                                 <input type="checkbox" id="ember4034"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 29AAACY4946Q1ZE<span
+                                                <div class="text-nowrap"> 29AAACY4946Q1ZE<span
                                                         class="text-muted font-xxs"> (YS0886)</span>
                                                     <!---->
                                                 </div>
@@ -1115,7 +1111,7 @@
                                                 <input type="checkbox" id="ember4049"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 08AAECD6975G1ZB<span
+                                                <div class="text-nowrap"> 08AAECD6975G1ZB<span
                                                         class="text-muted font-xxs"> (159)</span>
                                                     <!---->
                                                 </div>
@@ -1174,7 +1170,7 @@
                                                 <input type="checkbox" id="ember4064"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 02AAIFM2790H1ZD<span
+                                                <div class="text-nowrap"> 02AAIFM2790H1ZD<span
                                                         class="text-muted font-xxs"> (MIN055)</span>
                                                     <!---->
                                                 </div>
@@ -1233,7 +1229,7 @@
                                                 <input type="checkbox" id="ember4079"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AAACB2100P1Z5<span
+                                                <div class="text-nowrap"> 23AAACB2100P1Z5<span
                                                         class="text-muted font-xxs"> (MPPO0000330903)</span>
                                                     <!---->
                                                 </div>
@@ -1291,7 +1287,7 @@
                                                 <input type="checkbox" id="ember4094"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AAACB2100P1Z5<span
+                                                <div class="text-nowrap"> 23AAACB2100P1Z5<span
                                                         class="text-muted font-xxs"> (MPPO0000333297)</span>
                                                     <!---->
                                                 </div>
@@ -1349,7 +1345,7 @@
                                                 <input type="checkbox" id="ember4109"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AAACB2100P1Z5<span
+                                                <div class="text-nowrap"> 23AAACB2100P1Z5<span
                                                         class="text-muted font-xxs"> (MPPO0000335346)</span>
                                                     <!---->
                                                 </div>
@@ -1407,7 +1403,7 @@
                                                 <input type="checkbox" id="ember4124"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AAACB2100P1Z5<span
+                                                <div class="text-nowrap"> 23AAACB2100P1Z5<span
                                                         class="text-muted font-xxs"> (MPPO0000337619)</span>
                                                     <!---->
                                                 </div>
@@ -1465,7 +1461,7 @@
                                                 <input type="checkbox" id="ember4139"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAACM0828R1Z3<span
+                                                <div class="text-nowrap"> 27AAACM0828R1Z3<span
                                                         class="text-muted font-xxs"> (MTNLGMB14V000015)</span>
                                                     <!---->
                                                 </div>
@@ -1524,7 +1520,7 @@
                                                 <input type="checkbox" id="ember4154"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 36AAFCK5835K1Z6<span
+                                                <div class="text-nowrap"> 36AAFCK5835K1Z6<span
                                                         class="text-muted font-xxs"> (23435)</span>
                                                     <!---->
                                                 </div>
@@ -1582,7 +1578,7 @@
                                                 <input type="checkbox" id="ember4169"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23ALDPB4774G1ZF<span
+                                                <div class="text-nowrap"> 23ALDPB4774G1ZF<span
                                                         class="text-muted font-xxs"> (20170015)</span>
                                                     <!---->
                                                 </div>
@@ -1642,7 +1638,7 @@
                                                 <input type="checkbox" id="ember4184"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 29AABCI9865R1ZF<span
+                                                <div class="text-nowrap"> 29AABCI9865R1ZF<span
                                                         class="text-muted font-xxs"> (26681)</span>
                                                     <!---->
                                                 </div>
@@ -1700,7 +1696,7 @@
                                                 <input type="checkbox" id="ember4199"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 07AADCV4633J1Z6<span
+                                                <div class="text-nowrap"> 07AADCV4633J1Z6<span
                                                         class="text-muted font-xxs"> (O1707-000198)</span>
                                                     <!---->
                                                 </div>
@@ -1758,7 +1754,7 @@
                                                 <input type="checkbox" id="ember4214"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 29AADCI1852L1ZA<span
+                                                <div class="text-nowrap"> 29AADCI1852L1ZA<span
                                                         class="text-muted font-xxs"> (064566494/000001)</span>
                                                     <!---->
                                                 </div>
@@ -1814,7 +1810,7 @@
                                                 <input type="checkbox" id="ember4229"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AABCI2726B1ZA<span
+                                                <div class="text-nowrap"> 23AABCI2726B1ZA<span
                                                         class="text-muted font-xxs"> (MP1BA03148201718)</span>
                                                     <!---->
                                                 </div>
@@ -1872,7 +1868,7 @@
                                                 <input type="checkbox" id="ember4244"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23AADCR1885L1Z4<span
+                                                <div class="text-nowrap"> 23AADCR1885L1Z4<span
                                                         class="text-muted font-xxs"> (1718/23IDR/0027)</span>
                                                     <!---->
                                                 </div>
@@ -1932,7 +1928,7 @@
                                                 <input type="checkbox" id="ember4259"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAACB2100P1ZX<span
+                                                <div class="text-nowrap"> 27AAACB2100P1ZX<span
                                                         class="text-muted font-xxs"> (27122080000172)</span>
                                                     <!---->
                                                 </div>
@@ -1991,7 +1987,7 @@
                                                 <input type="checkbox" id="ember4274"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AABCE4591N1Z6<span
+                                                <div class="text-nowrap"> 27AABCE4591N1Z6<span
                                                         class="text-muted font-xxs"> (2017JULMMC190)</span>
                                                     <!---->
                                                 </div>
@@ -2047,7 +2043,7 @@
                                                 <input type="checkbox" id="ember4289"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AABCE4591N1Z6<span
+                                                <div class="text-nowrap"> 27AABCE4591N1Z6<span
                                                         class="text-muted font-xxs"> (2017JULTDR370)</span>
                                                     <!---->
                                                 </div>
@@ -2106,7 +2102,7 @@
                                                 <input type="checkbox" id="ember4304"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101219)</span>
                                                     <!---->
                                                 </div>
@@ -2162,7 +2158,7 @@
                                                 <input type="checkbox" id="ember4319"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101220)</span>
                                                     <!---->
                                                 </div>
@@ -2218,7 +2214,7 @@
                                                 <input type="checkbox" id="ember4334"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101222)</span>
                                                     <!---->
                                                 </div>
@@ -2274,7 +2270,7 @@
                                                 <input type="checkbox" id="ember4349"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101223)</span>
                                                     <!---->
                                                 </div>
@@ -2330,7 +2326,7 @@
                                                 <input type="checkbox" id="ember4364"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101267)</span>
                                                     <!---->
                                                 </div>
@@ -2389,7 +2385,7 @@
                                                 <input type="checkbox" id="ember4379"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101268)</span>
                                                     <!---->
                                                 </div>
@@ -2448,7 +2444,7 @@
                                                 <input type="checkbox" id="ember4394"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101269)</span>
                                                     <!---->
                                                 </div>
@@ -2507,7 +2503,7 @@
                                                 <input type="checkbox" id="ember4409"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101270)</span>
                                                     <!---->
                                                 </div>
@@ -2566,7 +2562,7 @@
                                                 <input type="checkbox" id="ember4424"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 03AABCI9928H1ZI<span
+                                                <div class="text-nowrap"> 03AABCI9928H1ZI<span
                                                         class="text-muted font-xxs"> (1607101271)</span>
                                                     <!---->
                                                 </div>
@@ -2625,7 +2621,7 @@
                                                 <input type="checkbox" id="ember4439"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AADCA2308K1ZV<span
+                                                <div class="text-nowrap"> 27AADCA2308K1ZV<span
                                                         class="text-muted font-xxs"> (0717000765)</span>
                                                     <!---->
                                                 </div>
@@ -2684,7 +2680,7 @@
                                                 <input type="checkbox" id="ember4454"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 29AAHCM2674E1ZB<span
+                                                <div class="text-nowrap"> 29AAHCM2674E1ZB<span
                                                         class="text-muted font-xxs"> (LS-2017-6246)</span>
                                                     <!---->
                                                 </div>
@@ -2743,7 +2739,7 @@
                                                 <input type="checkbox" id="ember4469"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 29AACCE7697J1ZW<span
+                                                <div class="text-nowrap"> 29AACCE7697J1ZW<span
                                                         class="text-muted font-xxs"> (ND00000000000720)</span>
                                                     <!---->
                                                 </div>
@@ -2806,64 +2802,64 @@
                                             <th id="ember3911" class="cursor-pointer bulk-selection-cell ember-view">
                                                 <input type="checkbox" id="ember3912"
                                                     class="cursor-pointer ember-checkbox ember-view"></th>
-                                            <th style="width:250px" id="ember4486" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember4486" class="text-left ember-view width-vendor">
+                                                <div class="position-relative">
                                                     <div data-test-title="Vendor Details" title="Vendor Details"
                                                         class="pull-left over-flow"> Vendor Details </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:155px" id="ember3915" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3915" class="text-left ember-view width-date">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction Date" title="Transaction Date"
                                                         class="pull-left over-flow"> Transaction Date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:130px" id="ember3916" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3916" class="text-left ember-view width-supply">
+                                                <div class="position-relative">
                                                     <div data-test-title="Place of Supply" title="Place of Supply"
                                                         class="pull-left over-flow"> Place of Supply </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:140px" id="ember3917" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3917" class="text-right ember-view width-amount">
+                                                <div class="position-relative">
                                                     <div data-test-title="Taxable Amount" title="Taxable Amount"
                                                         class=" over-flow"> Taxable Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3918" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3918" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3919" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3919" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3920" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3920" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3921" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3921" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3922" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3922" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Total Amount" title="Total Amount"
                                                         class=" over-flow"> Total Amount </div>
                                                     <!---->
@@ -2878,7 +2874,7 @@
                                                 <input type="checkbox" id="ember4490"
                                                     class="cursor-pointer ember-checkbox ember-view"></td>
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 23BCLPK7110F1ZY<span
+                                                <div class="text-nowrap"> 23BCLPK7110F1ZY<span
                                                         class="text-muted font-xxs"> (3000)</span>
                                                     <!---->
                                                 </div>
@@ -2935,71 +2931,71 @@
                                     <thead>
                                         <tr>
                                             <!---->
-                                            <th style="width:250px" id="ember4501" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember4501" class="text-left ember-view width-vendor">
+                                                <div class="position-relative">
                                                     <div data-test-title="Vendor Details" title="Vendor Details"
                                                         class="pull-left over-flow"> Vendor Details </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:155px" id="ember3915" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3915" class="text-left ember-view width-date">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction Date" title="Transaction Date"
                                                         class="pull-left over-flow"> Transaction Date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:130px" id="ember3916" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3916" class="text-left ember-view width-supply">
+                                                <div class="position-relative">
                                                     <div data-test-title="Place of Supply" title="Place of Supply"
                                                         class="pull-left over-flow"> Place of Supply </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:140px" id="ember3917" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3917" class="text-right ember-view width-ammount">
+                                                <div class="position-relative">
                                                     <div data-test-title="Taxable Amount" title="Taxable Amount"
                                                         class=" over-flow"> Taxable Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3918" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3918" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="IGST" title="IGST" class=" over-flow"> IGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3919" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3919" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="CGST" title="CGST" class=" over-flow"> CGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3920" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3920" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="SGST" title="SGST" class=" over-flow"> SGST
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3921" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3921" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Cess" title="Cess" class=" over-flow"> Cess
                                                     </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember3922" class="  text-right ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember3922" class="text-right ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Total Amount" title="Total Amount"
                                                         class=" over-flow"> Total Amount </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember4503" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember4503" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Status" title="Status"
                                                         class="pull-left over-flow"> Status </div>
                                                     <!---->
@@ -3012,7 +3008,7 @@
                                         <tr id="ember4505" class="cursor-pointer ember-view">
                                             <!---->
                                             <td class="primary-details">
-                                                <div style="white-space: nowrap;"> 27AAECD1043M1ZP<span
+                                                <div class="text-nowrap"> 27AAECD1043M1ZP<span
                                                         class="text-muted font-xxs"> (187372)</span>
                                                     <!---->
                                                 </div>
@@ -3042,7 +3038,7 @@
                             </div>
                         </div>
                         <div id="tab3" class="tab1div">
-                            <div style="border-bottom: 1px solid #ddd;" class="sub-filter-nav-bandnew">
+                            <div class="sub-filter-nav-bandnew">
                                 <ul class="nav ember-view">
                                     <li class="active"><a id="subtabnew_1" href="#subtabnew-1">Transaction Summary</a>
                                     </li>
@@ -3056,11 +3052,11 @@
                                     </li>
                                 </ul>
                             </div>
-                            <div class="subtabs-box1" id="subtabnew-1" style="display:block;">
+                            <div class="subtabs-box1 d-block" id="subtabnew-1">
                                 <div class="gstr-transactions-summary">
                                     <!---->
                                     <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
-                                    <p style="padding-top:6px;" class="text-muted half">A summary of all the purchase
+                                    <p class="text-muted half pd-t05">A summary of all the purchase
                                         transactions in the current filing period which are ready to be pushed to GSTN.
                                     </p>
                                     <div id="ember1507" class="ember-view">
@@ -3100,7 +3096,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path fill="#1D1D1B"
                                                                 d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> B2B Invoices <i
+                                                        </svg> <span class="mr-l05"> B2B Invoices <i
                                                                 id="ember1510" class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
                                                                     xmlns="http://www.w3.org/2000/svg"
@@ -3130,7 +3126,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path fill="#1D1D1B"
                                                                 d="M192 192v320.1l120-.1V392h48v120l120 .1V192H192zm256 288.1h-56V360H280v120h-56V224h224v256.1z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> B2BUR Invoices <i
+                                                        </svg> <span class="mr-l05"> B2BUR Invoices <i
                                                                 id="ember1513" class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
                                                                     xmlns="http://www.w3.org/2000/svg"
@@ -3163,7 +3159,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path fill="#1D1D1B"
                                                                 d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> Credit / Debit Notes
+                                                        </svg> <span class="mr-l05"> Credit / Debit Notes
                                                             (Registered) <i id="ember1516"
                                                                 class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
@@ -3197,7 +3193,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path fill="#1D1D1B"
                                                                 d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> Credit / Debit Notes
+                                                        </svg> <span class="mr-l05"> Credit / Debit Notes
                                                             (Unregistered) <i id="ember1519"
                                                                 class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
@@ -3228,7 +3224,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path
                                                                 d="M426 0H86C38.6 0 0 38.6 0 86v340c0 47.4 38.6 86 86 86h340c47.4 0 86-38.6 86-86V86c0-47.4-38.6-86-86-86zM312 32v124.3l-56-49.7-56 49.7V32h112zm168 394c0 29.8-24.2 54-54 54H86c-29.8 0-54-24.2-54-54V86c0-29.8 24.2-54 54-54h82v195.7l88-78.3 88 78.3V32h82c29.8 0 54 24.2 54 54v340z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> Import of Goods /
+                                                        </svg> <span class="mr-l05"> Import of Goods /
                                                             Capital Goods <i id="ember1522"
                                                                 class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
@@ -3262,7 +3258,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                                             <path fill="#1D1D1B"
                                                                 d="M447.3 454.5l.5-263.8c0-56-20.1-110.3-56.6-152.9l-7.7-8.9-.3-.3c-2.4-4.2-5.3-8.1-8.8-11.6-10.4-10.8-25.1-17-40-17H63.3l.3 512h385.1l-1.4-57.5zM383.8 81.3c17 26.5 27.6 56.7 30.9 88-7.4-10.2-15.5-20-24.2-29.2-11.7-12.5-23.6-23.6-35.6-33.3 7-2.7 13.4-6.8 18.9-12.2 4-4 7.4-8.5 10-13.3zM95.6 480l-.3-448h239.1c6.4 0 12.8 2.7 17.3 7.3 4.4 4.5 6.7 10.1 6.6 16.1C358.1 68 347.7 78 335.1 78h-23.3c-7.7 0-14.5 5.4-16.4 12.9-2 7.5 1.4 15.4 8.1 19.2 20.8 11.7 42.8 29.7 63.6 51.9 20 21.3 36.3 45.5 48.6 72l-.4 220.7.6 25.4H95.6z">
                                                             </path>
-                                                        </svg> <span style="margin-left: 5px;"> Import of Services <i
+                                                        </svg> <span class="mr-l05"> Import of Services <i
                                                                 id="ember1525" class="popovercontainer ember-view"
                                                                 data-original-title="" title=""> <svg id="Layer_1"
                                                                     xmlns="http://www.w3.org/2000/svg"
@@ -3292,7 +3288,7 @@ <h4 class="clearfix gstr-summary-title">Transaction Summary</h4>
                                 <div class="gstr-transactions-summary">
                                     <!---->
                                     <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
-                                    <p style="padding-top:6px;" class="text-muted half">HSN-wise summary of the items
+                                    <p class="text-muted half pd-t05">HSN-wise summary of the items
                                         you’ve purchased.</p>
                                     <div id="ember1670" class="ember-view">
                                         <div>
@@ -3301,65 +3297,65 @@ <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
                                                 <thead>
                                                     <tr>
                                                         <!---->
-                                                        <th style="" id="ember1672" class="  text-left ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1672" class="text-left ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="HSN/SAC" title="HSN/SAC"
                                                                     class="pull-left over-flow"> HSN/SAC </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1673" class="  text-left ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1673" class="text-left ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Description" title="Description"
                                                                     class="pull-left over-flow"> Description </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1674" class="  text-left ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1674" class="text-left ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Quantity" title="Quantity"
                                                                     class="pull-left over-flow"> Quantity </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1675" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1675" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Taxable Amount"
                                                                     title="Taxable Amount" class=" over-flow"> Taxable
                                                                     Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1676" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1676" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="IGST Amount" title="IGST Amount"
                                                                     class=" over-flow"> IGST Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1677" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1677" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="CGST Amount" title="CGST Amount"
                                                                     class=" over-flow"> CGST Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1678" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1678" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="SGST Amount" title="SGST Amount"
                                                                     class=" over-flow"> SGST Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1679" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1679" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Cess" title="Cess"
                                                                     class=" over-flow"> Cess </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1680" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1680" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Total Amount" title="Total Amount"
                                                                     class=" over-flow"> Total Amount </div>
                                                                 <!---->
@@ -3396,7 +3392,7 @@ <h4 class="clearfix gstr-summary-title">HSN Summary</h4>
                                 <div class="gstr-transactions-summary">
                                     <!---->
                                     <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
-                                    <p style="padding-top:6px;" class="text-muted half">This section displays the
+                                    <p class="text-muted half pd-t05">This section displays the
                                         purchase of goods and services that are nil rated. Nil Rated goods and services
                                         are those that have 0% GST but allows you to claim ITC on inputs.</p>
                                     <div id="ember1670" class="ember-view">
@@ -3406,22 +3402,22 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                                                 <thead>
                                                     <tr>
                                                         <!---->
-                                                        <th style="" id="ember1683" class="  text-left ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1683" class="text-left ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Supply Type" title="Supply Type"
                                                                     class="pull-left over-flow"> Supply Type </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1684" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1684" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Nil Amount" title="Nil Amount"
                                                                     class=" over-flow"> Nil Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1685" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1685" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Supplies from Composition Taxable Person"
                                                                     title="Supplies from Composition Taxable Person"
                                                                     class=" over-flow"> Supplies from Composition
@@ -3429,16 +3425,16 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1686" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1686" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Exempt Amount"
                                                                     title="Exempt Amount" class=" over-flow"> Exempt
                                                                     Amount </div>
                                                                 <!---->
                                                             </div>
                                                         </th>
-                                                        <th style="" id="ember1687" class="  text-right ember-view">
-                                                            <div style="position: relative">
+                                                        <th id="ember1687" class="text-right ember-view">
+                                                            <div class="position-relative">
                                                                 <div data-test-title="Non GST Amount"
                                                                     title="Non GST Amount" class=" over-flow"> Non GST
                                                                     Amount </div>
@@ -3481,7 +3477,7 @@ <h4 class="clearfix gstr-summary-title">Nil Summary</h4>
                                     <h4 class="clearfix gstr-summary-title"> ITC Reversal / Reclaim <a href="#"
                                             id="ember1690" class="btn btns-sm btn-default pull-right ember-view"> Edit
                                         </a> </h4>
-                                    <p style="padding-top:6px;" class="text-muted half"></p>
+                                    <p class="text-muted half pd-t05"></p>
                                     <div id="ember1691" class="ember-view">
                                         <table class="table transactions-table">
                                             <thead>
@@ -3572,36 +3568,36 @@ <h4 class="clearfix gstr-summary-title"> ITC Reversal / Reclaim <a href="#"
                                     <thead>
                                         <tr>
                                             <!---->
-                                            <th style="" id="ember1700" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember1700" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction #" title="Transaction #"
                                                         class="pull-left over-flow"> Transaction # </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember1701" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember1701" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction date" title="Transaction date"
                                                         class="pull-left over-flow"> Transaction date </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember1702" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember1702" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Transaction Type" title="Transaction Type"
                                                         class="pull-left over-flow"> Transaction Type </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="" id="ember1703" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th id="ember1703" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Error Code" title="Error Code"
                                                         class="pull-left over-flow"> Error Code </div>
                                                     <!---->
                                                 </div>
                                             </th>
-                                            <th style="width:30%" id="ember1704" class="  text-left ember-view">
-                                                <div style="position: relative">
+                                            <th width="30%" id="ember1704" class="text-left ember-view">
+                                                <div class="position-relative">
                                                     <div data-test-title="Error Message" title="Error Message"
                                                         class="pull-left over-flow"> Error Message </div>
                                                     <!---->
diff --git a/apps/web-giddh/src/app/gst/gstR2/gstR2.component.scss b/apps/web-giddh/src/app/gst/gstR2/gstR2.component.scss
index 8400bd9d535..1bdc778c28d 100644
--- a/apps/web-giddh/src/app/gst/gstR2/gstR2.component.scss
+++ b/apps/web-giddh/src/app/gst/gstR2/gstR2.component.scss
@@ -6,7 +6,7 @@
 
 .tax-engine .column.list-column {
     display: block;
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
 }
 
 .tax-engine .column {
@@ -29,7 +29,7 @@
 
 .tax-engine .list-filter {
     padding:15px !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid $gainsboro !important;
     height: 80px;
 }
 
@@ -84,7 +84,7 @@ fieldset[disabled] .btn-link {
 }
 
 .btn-link {
-    color: #428bca;
+    color: curious-blue;
     font-weight: 400;
     cursor: pointer;
     border-radius: 0;
@@ -157,7 +157,7 @@ svg.icon.icon-sm {
 .dropdown-menu li .help-text,
 .modal-header .help-text,
 .text-muted {
-    color: #777;
+    color: $gray;
 }
 
 .space {
@@ -169,7 +169,7 @@ svg.icon.icon-sm {
     display: inline-block;
     width: 6px;
     height: 6px;
-    background-color: #2a85fb;
+    background-color: $primary;
     border-radius: 50%;
     margin-right: 5px;
     vertical-align: middle;
@@ -188,7 +188,7 @@ svg.icon.icon-sm {
 
 .nav-tabs > li a {
     font-size: 15px;
-    color: #555;
+    color: $zambezi;
     margin-right: 0;
     height: 100%;
     padding: 14px 40px;
@@ -211,9 +211,6 @@ svg.icon.icon-sm {
     -webkit-overflow-scrolling: touch;
 }
 
-.tax-engine .body {
-}
-
 .content-column .body {
     padding: 0 20px 50px;
 }
@@ -221,7 +218,7 @@ svg.icon.icon-sm {
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine .transactions-overview .gstr-transactions-summary {
@@ -242,7 +239,7 @@ hr {
     .transactions-overview
     .gstr-transactions-summary
     .transactions-table {
-    border: 1px solid #ededed;
+    border: 1px solid $gainsboro;
 }
 
 .tax-engine .table.transactions-table,
@@ -265,12 +262,12 @@ address {
 
 .tax-engine .table.transactions-table thead:first-child tr:first-child th {
     padding: 16px 12px;
-    font-size: 14px;
+    font-size: 13px;
     border-bottom: 1px solid $gainsboro;
 }
 
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine .gstr-transactions-summary .table > thead > tr > th {
@@ -280,7 +277,7 @@ address {
 }
 
 .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .table caption + thead tr:first-child td,
@@ -293,8 +290,8 @@ address {
 }
 
 .table thead > tr > th {
-    border-bottom: 1px solid #eee;
-    color: #777;
+    border-bottom: 1px solid $gainsboro;
+    color: $gray;
 }
 
 .tax-engine .table.transactions-table tbody > tr > td {
@@ -306,7 +303,7 @@ address {
 
 .table-striped > tbody > tr:nth-child(even) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-    background-color: #f9f9f9;
+    background-color: $gray-95;
 }
 
 .table tbody > tr > td,
@@ -318,7 +315,7 @@ address {
     padding: 8px;
     line-height: 1.42857143;
     vertical-align: top;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine
@@ -327,7 +324,7 @@ address {
     > tr:not(.secondary-row)
     + tr.secondary-row
     > td {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine
@@ -340,8 +337,8 @@ address {
 
 .tax-engine .table.transactions-summary-table > tbody > tr.secondary-row > td {
     border: none;
-    background-color: #fff;
-    border-right: 1px solid #ededed;
+    background-color: $white;
+    border-right: 1px solid $gainsboro;
     font-size: 13px;
     padding: 13px;
 }
@@ -369,7 +366,7 @@ address {
 
 .tax-engine .nav-band .nav-tabs {
     white-space: nowrap;
-    background-color: #f7f7f7;
+    background-color: $white-smoke;
 }
 
 .tax-engine .sub-filter-nav-band ul > li,
@@ -390,14 +387,14 @@ address {
 .tax-engine .sub-filter-nav-bandnew ul > li.active:after {
     content: "";
     display: block;
-    border-bottom: 2px solid #2a85fb;
+    border-bottom: 2px solid $primary;
     width: 55%;
     margin: auto;
 }
 
 .tax-engine .sub-filter-nav-band ul > li.active > a,
 .tax-engine .sub-filter-nav-bandnew ul > li.active > a {
-    color: #222;
+    color: $night-rider;
     font-weight: 600;
 }
 
@@ -407,7 +404,7 @@ address {
 
 .tax-engine .gstr-transactions-summary .gstr-summary-title {
     margin: 0 0 6px;
-    color: #777;
+    color: $gray;
 }
 
 .gstr-transactions-summary p {
@@ -456,7 +453,7 @@ svg.icon.icon-xs {
 }
 
 .tax-engine .transactions-list .filter-band {
-    background-color: #f5fafe;
+    background-color: $alice-blue;
     padding: 20px;
     height: 66px;
 }
@@ -502,8 +499,8 @@ svg.icon.icon-sm {
 .tax-engine .transactions-list .filter-band .btn,
 .tax-engine .transactions-list .filter-band .btn:focus,
 .tax-engine .transactions-list .filter-band .btn:hover {
-    color: #2a85fb;
-    border-color: #2a85fb;
+    color: $primary;
+    border-color: $primary;
     background-color: transparent;
     box-shadow: none;
 }
@@ -515,7 +512,7 @@ svg.icon.icon-sm {
 .tax-engine .transactions-list .filter-band .btn .caret,
 .tax-engine .transactions-list .filter-band .btn:focus .caret,
 .tax-engine .transactions-list .filter-band .btn:hover .caret {
-    border-top-color: #2a85fb;
+    border-top-color: $primary;
 }
 
 .caret {
@@ -524,7 +521,7 @@ svg.icon.icon-sm {
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
-    border-top: 4px solid #000;
+    border-top: 4px solid $black;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
     border-bottom: 0 dotted;
@@ -555,8 +552,8 @@ svg.icon.icon-sm {
 }
 
 .tax-engine .transactions-overview .transaction-info:hover {
-    border: 1px solid #eee;
-    box-shadow: 0 0 20px 3px #f9f9f9;
+    border: 1px solid $gainsboro;
+    box-shadow: 0 0 20px 3px $gray-95;
 }
 
 .tax-engine .transactions-overview .transaction-info {
@@ -566,6 +563,38 @@ svg.icon.icon-sm {
     cursor: pointer;
 }
 
+.transaction-info .trans-span1 {
+    color: $bright-green;
+}
+
+.transaction-info .trans-span2 {
+    color: $bright-pink;
+}
+
+.transaction-info .trans-span3 {
+    color: $light-purple;
+}
+
+.transaction-info .trans-span4 {
+    color: $bright-yellow;
+}
+
+.width-vendor{
+    width:250px;
+}
+
+.width-date{
+    width:155px;
+}
+
+.width-supply{
+    width:130px;
+}
+
+.width-amount{
+    width:140px;
+}
+
 .over-flow {
     max-width: 100%;
 }
@@ -601,18 +630,18 @@ svg.icon.icon-sm {
 }
 
 .tax-engine .sub-filter-nav-band ul > li .count {
-    color: #cb1119;
+    color: $scarlet;
 }
 
 .tax-engine .sub-filter-nav-band ul > li.active > a {
-    color: #222;
+    color: $night-rider;
     font-weight: 600;
 }
 
 .tax-engine .sub-filter-nav-band ul > li.active:after {
     content: "";
     display: block;
-    border-bottom: 2px solid #2a85fb;
+    border-bottom: 2px solid $primary;
     width: 55%;
     margin: auto;
 }
@@ -622,7 +651,7 @@ svg.icon.icon-sm {
 }
 
 .tax-engine .table.reconciliations-table {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .tax-engine .table-fixed {
@@ -630,7 +659,7 @@ svg.icon.icon-sm {
 }
 
 .zi-table {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gainsboro;
     table-layout: fixed;
 }
 
@@ -640,7 +669,7 @@ svg.icon.icon-sm {
 }
 
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .list-column.expanded-list-column .zi-table tr td:first-of-type,
@@ -664,7 +693,7 @@ tax-engine .table.reconciliations-table thead > tr > th {
 }
 
 .zi-table.table-hover tbody tr:hover td {
-    background-color: #fafafa;
+    background-color: $white-smoke;
     cursor: pointer;
 }
 
@@ -677,7 +706,7 @@ tax-engine .table.reconciliations-table thead > tr > th {
     padding: 8px;
     line-height: 1.42857143;
     vertical-align: top;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .details .details-info,
@@ -695,7 +724,7 @@ tax-engine .table.reconciliations-table thead > tr > th {
 }
 
 .tax-engine .table.reconciliations-table tbody > tr > td.primary-details {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
 }
 
 .tax-engine .table.reconciliations-table .actions-dropdown {
@@ -709,7 +738,7 @@ tax-engine .table.reconciliations-table thead > tr > th {
     tbody
     > tr:hover
     .actions-dropdown-btn {
-    border: 1px solid #2a85fb;
+    border: 1px solid $primary;
 }
 
 .tax-engine .table.reconciliations-table .actions-dropdown-btn,
@@ -718,11 +747,11 @@ tax-engine .table.reconciliations-table thead > tr > th {
     tbody
     > tr:hover
     .reconcile-row-action {
-    color: #2a85fb;
+    color: $primary;
 }
 
 .tax-engine .table.reconciliations-table .unrecognized-value {
-    color: #cb1119;
+    color: $scarlet;
 }
 
 /*.tax-engine .table.reconciliations-table .recognized-value,
@@ -731,18 +760,18 @@ tax-engine .table.reconciliations-table thead > tr > th {
 }*/
 
 .tax-engine .reconciliation-accepted {
-    color: #39c296;
+    color: $bright-green;
 }
 
 .zi-table.table thead > tr > th {
-    color: #263035;
-    background: #fff;
+    color: $muzli;
+    background: $white;
     font-weight: 700;
     font-size: 12px;
     text-transform: uppercase;
     -webkit-font-smoothing: antialiased;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .subtabs-box1 {
@@ -750,24 +779,23 @@ tax-engine .table.reconciliations-table thead > tr > th {
 }
 
 .transactions-overview {
-    background: #fff;
+    background: $white;
 }
 
 .tax-engine .sub-filter-nav-band ul > li.active > a .count {
-    color: #222;
+    color: $night-rider;
 }
 
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-    background-color: #f9f9f9;
+    background-color: $gray-95;
 }
 
 .table-striped > tbody > tr:nth-child(even) > td,
 .table-striped > tbody > tr:nth-child(even) > th {
-    background-color: #fff;
+    background-color: $white;
 }
 
-
 .gstr-2-filing{
     border: 1px solid $gainsboro;
 }
@@ -778,6 +806,6 @@ tax-engine .table.reconciliations-table thead > tr > th {
 
 #subtabnew-5{
     padding: 10px 25px;
-    margin: 5px auto;
+    margin: 5px auto; 
     border-left: 1px solid $gainsboro;
-}
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/gst/gstR3/gstR3.component.html b/apps/web-giddh/src/app/gst/gstR3/gstR3.component.html
index 0eda18181b8..8637c1ab7e3 100644
--- a/apps/web-giddh/src/app/gst/gstR3/gstR3.component.html
+++ b/apps/web-giddh/src/app/gst/gstR3/gstR3.component.html
@@ -1,7 +1,7 @@
 <hamburger-menu [pageHeading]="'GST'"></hamburger-menu>
 <div class="column content-column gst-filing-container navs-list">
     <div class="tax-engine">
-        <div class="hidden-print gstr-summary-head"> <span class="font-xlarge d-inline-block pr-15"> <a href="javascript:void(0);"
+        <div class="hidden-print gstr-summary-head"> <span class="font-xlarge d-inline-block pd-r15"> <a href="javascript:void(0);"
                     [routerLink]="['/gstfiling']" id="ember2007" class="ember-view cursor-pointer"> <svg id="Layer_1"
                         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon icon-lg text-middle">
                         <path
@@ -51,7 +51,7 @@
                             <button dropdownToggle type="button" class="btn dropdown-toggle btn-sky-blue"> <i
                                     class="icon-download"></i> Download</button>
                             <ul id="dropdown-menu" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="button-triggers-manual" style="min-width: 350px;">
-                                <div class="pdL2 pdR2 pd-1">
+                                <div class="pd-l2 pd-r2 pd-1">
                                     <div class="form-group">
                                         <label>Email Id <i class='fa fa-info-circle' tooltip-placement="top"
                                                 tooltip="If no email id is provided, email will be by default sent to you/company creator"></i></label>
@@ -528,9 +528,9 @@ <h4 style="margin-left: -10px;"><b>GSTR-3B Filing</b></h4>
 
             </div> -->
             <div class="transactions-overview" *ngIf="selectedGstr3BTab==='filing'">
-                <div class="gstr-transactions-summary mr-t4 mrB4 text-center">
+                <div class="gstr-transactions-summary mr-t4 mr-b4 text-center">
 
-                    <div class="gstReturnDate">
+                    <div class="gst-return-date">
                         <img src="assets/images/return-date.svg">
                         <!-- <h3>File your GST Return of April 2019 till date</h3> -->
                         <p>Click below to proceed</p>
diff --git a/apps/web-giddh/src/app/gst/gstR3/gstR3.component.scss b/apps/web-giddh/src/app/gst/gstR3/gstR3.component.scss
index bd1a8dbd44a..cb4678bf7d0 100644
--- a/apps/web-giddh/src/app/gst/gstR3/gstR3.component.scss
+++ b/apps/web-giddh/src/app/gst/gstR3/gstR3.component.scss
@@ -5,7 +5,7 @@
 }
 
 a {
-    color: #428bca;
+    color: $curious-blue;
     text-decoration: none;
 }
 
@@ -27,9 +27,9 @@ svg.icon.icon-lg {
 .tax-engine .gstr3b-sel {
     display: inline-block;
     padding: 4px 4px 4px 8px;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     border-radius: 2px;
-    background: #fff;
+    background: $white;
 }
 
 svg.icon.icon-sm {
@@ -48,7 +48,7 @@ svg.icon.icon-sm {
 }
 
 .text-primary {
-    color: #428bca;
+    color: $curious-blue;
 }
 
 .caret {
@@ -57,7 +57,7 @@ svg.icon.icon-sm {
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
-    border-top: 4px solid #000;
+    border-top: 4px solid $black;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
     border-bottom: 0 dotted;
@@ -115,13 +115,13 @@ input.gsc-input {
 .tax-engine .gstr3b-header:before {
     /* content: '';
     position: absolute;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gainsboro;
     top: 24px;
     width: 100%; */
 }
 
 .tax-engine .gstr3b-header .sel-tab {
-    border: 1px solid #eee;
+    border: 1px solid $gainsboro;
     border-radius: 25px;
     overflow: hidden;
     padding: 0;
@@ -150,7 +150,7 @@ input.gsc-input {
 }
 
 .tax-engine .gstr3b-header .sel-tab li:before {
-    border-left: 23px solid #eee;
+    border-left: 23px solid $gainsboro;
     top: 42%;
     margin-top: -22px;
     margin-left: 1px;
@@ -162,7 +162,7 @@ input.gsc-input {
 }
 
 .tax-engine .gstr3b-header .sel-tab li:after {
-    border-left: 23px solid #fff;
+    border-left: 23px solid $white;
     top: 41%;
     margin-top: -21px;
     z-index: 2;
@@ -188,12 +188,12 @@ svg.icon.icon-xxlg {
 }
 
 .tax-engine .gstr3b-header .sel-tab .active a {
-    color: #fff;
+    color: $white;
 }
 
 .tax-engine .gstr3b-header .sel-tab li a {
     padding: 0 10px;
-    color: #222;
+    color: $night-rider;
 }
 
 svg.icon.icon-xxlg {
@@ -202,7 +202,7 @@ svg.icon.icon-xxlg {
 }
 
 .column.content-column.gst-filing-container.navs-list {
-    background: #fff;
+    background: $white;
 }
 
 .tax-engine .gstr3b-header .sel-tab li {
@@ -242,7 +242,7 @@ address {
 }
 
 .tax-engine .summary-content .gstr-3b-user.table > tbody > tr > td {
-    border: 1px solid #adb4c3;
+    border: 1px solid $faux-cadet-blue;
     padding: 10px 30px 10px 10px;
 }
 
@@ -261,14 +261,14 @@ address {
 }
 
 .tax-engine .summary-content .gstr-3b-report.table > thead > tr > td {
-    border: 1px solid #adb4c3 !important;
+    border: 1px solid $faux-cadet-blue !important;
     padding: 6px;
     font-size: 13px;
 }
 
 .btn-link:focus,
 .btn-link:hover {
-    color: #2a6496;
+    color: $curious-blue;
     background-color: transparent;
     text-decoration: none;
 }
@@ -279,7 +279,7 @@ table {
 }
 
 .gstr-3b-report tr:hover {
-    background-color: #f5f4f3;
+    background-color: $gray-95;
 }
 
 .tax-engine .summary-content .gstr-3b-report.table > tbody > tr > td {
@@ -290,13 +290,13 @@ table {
 
 .gstr3-subheading,
 .vat-summary thead > tr {
-    background-color: #f5f4f3;
+    background-color: $gray-95;
 }
 
 .dropdown-menu li .help-text,
 .modal-header .help-text,
 .text-muted {
-    color: #777;
+    color: $gray;
 }
 
 *,
@@ -338,7 +338,7 @@ h6 {
     position: fixed;
     top: 0;
     z-index: 1030;
-    background-color: #fff;
+    background-color: $white;
     transition: all 0.3s;
 }
 
@@ -356,13 +356,13 @@ h6 {
 
 .modal-header {
     padding: 20px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gainsboro;
     min-height: 21.43px;
-    background-color: #f5f5f5;
+    background-color: $gray-95;
 }
 
 .highlight-info {
-    background-color: #f4f8ff;
+    background-color: $solitude;
 }
 
 .alert {
@@ -396,9 +396,9 @@ fieldset[disabled] .btn-primary:hover .btn-primary[disabled],
 .open .dropdown-toggle.btn-primary,
 .receipt-wrapper .doc-checkbox:checked,
 .doc-actions {
-    color: #fff;
-    background-color: #ea795b;
-    border-color: #ea795b;
+    color: $white;
+    background-color: $bitter-sweet;
+    border-color: $bitter-sweet;
 }
 
 .btn,
@@ -408,9 +408,9 @@ fieldset[disabled] .btn-primary:hover .btn-primary[disabled],
 }
 
 .btn-primary {
-    color: #fff;
-    background-color: #d64830;
-    border-color: #c53e27;
+    color: $white;
+    background-color: $cinnabar-orange;
+    border-color: $cinnabar-orange;
 }
 
 .btn {
@@ -437,8 +437,8 @@ fieldset[disabled] .btn-primary:hover .btn-primary[disabled],
 }
 
 .tax-engine .gstr3-points .point {
-    background-color: #2799fb;
-    color: #fff;
+    background-color: $primary;
+    color: $white;
     width: 22px;
     height: 22px;
     /* padding-top: 3px; */
@@ -464,19 +464,19 @@ tax-engine .caret-right {
 }
 
 .tax-engine .gstr3-points a .caret-right {
-    color: #bbb;
+    color: $silver;
 }
 
 .gstr3-filing-procedure > div {
     width: 900px;
     margin: 30px auto 0;
-    box-shadow: 1px 1px 11px #ccc;
+    box-shadow: 1px 1px 11px $very-light-gray;
     border-radius: 3px;
     padding: 20px 50px 10px;
 }
 
 .tax-engine .gstr3-points {
-    border-left: 1px dashed #ddd;
+    border-left: 1px dashed $gainsboro;
     padding-left: 41px;
 }
 
@@ -486,15 +486,15 @@ dropdown-menu-right {
     top: 30px !important;
 }
 
-.successful-fileDetail h3,
-.gstReturnDate h3 {
-    color: #333333 !important;
+.successful-file-detail h3,
+.gst-return-date h3 {
+    color: $night-rider !important;
     font-size: 24px !important;
     margin: 20px 0 7px !important;
 }
 
 .btn-2 {
-    background: #fff;
+    background: $white;
     color: $chetwode-blue;
     border: 0px;
     border-radius: 4px;
@@ -502,7 +502,7 @@ dropdown-menu-right {
 }
 
 .btn-2:hover {
-    color: #ffffff;
+    color: $white;
     background: $chetwode-blue;
 }
 
diff --git a/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.html b/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.html
index a7ef744e64c..e969c60791c 100644
--- a/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.html
+++ b/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.html
@@ -14,9 +14,8 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
 
     <div class="aside-body">
         <div class="aside-pane-form">
-            <div class="form_body witBg clearfix margin-child-label">
-
-                <div class="form_bg clearfix">
+            <div class="form-body white-bg clearfix margin-child-label">
+                <div class="clearfix">
 
                     <!-- region not gst authenticated and before otp verified -->
                     <div *ngIf="!gstAuthenticated && !gspSessionOtpAuthorized">
@@ -80,7 +79,7 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
                                                 id="tax_pro_otp" [(ngModel)]="taxProForm.otp">
                                         </div>
 
-                                        <div style="align-self: flex-end;">
+                                        <div class="align-self-end">
                                             <a class="btn btn-link" (click)="resendOtp()"
                                                 href="javascript:void 0">Resend
                                                 Otp</a>
@@ -194,18 +193,18 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
 
                     <div *ngIf="gstAuthenticated">
 
-                        <span style="border-bottom: 1px solid #3a3939;" class="d-flex">
+                        <span class="d-flex auth-state">
                             <p>You Are Already Authenticated with Giddh Provider {{ isVayanaAuthenticated ? '1' : '2'}}
                             </p>
                         </span>
 
                         <!-- region note point before submitting -->
                         <div *ngIf="!pointsAcceptedSubmitted">
-                            <div class="container" style="width: 100%;">
+                            <div class="container w-100">
 
                                 <div class="row mt-1">
 
-                                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 mb-2">
+                                    <div class="col-lg-12 col-md-12 col-sm-12 mb-2">
 
                                         <ul>
 
@@ -215,12 +214,12 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
                                                 as individual
                                                 transactions.
                                             </li>
-                                            <li style="padding-top: 10px"> Along with the documents issued, the
+                                            <li class="pd-t1"> Along with the documents issued, the
                                                 transactions
                                                 under HSL, NiL, and
                                                 B2CS category will be pushed to the GSTN as summaries.
                                             </li>
-                                            <li style="padding-top: 10px"> When you Submit and File data to the GSTN,
+                                            <li class="pd-t1"> When you Submit and File data to the GSTN,
                                                 the
                                                 email
                                                 updates will be
@@ -237,7 +236,7 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
 
                                 <div class="row mt-2">
 
-                                    <div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 d-flex">
+                                    <div class="col-md-12 col-lg-12 col-sm-12 d-flex">
                                         <span class="mr-1">
                                             <input type="checkbox" [(ngModel)]="pointsAccepted" id="pointsAccepted" />
                                         </span>
@@ -269,17 +268,17 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
                         <!-- region submit gst -->
                         <div *ngIf="pointsAcceptedSubmitted">
 
-                            <div class="gst-body" style="padding: 15px">
+                            <div class="gst-body padd15">
 
                                 <div class="row">
 
-                                    <div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
+                                    <div class="col-lg-6 col-md-6 col-sm-6">
                                         <label class="text-muted">
                                             GSTN Username
                                         </label>
                                     </div>
 
-                                    <div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
+                                    <div class="col-lg-6 col-md-6 col-sm-6">
 
                                         <span>{{taxProForm.userName}}</span>
                                     </div>
@@ -332,7 +331,7 @@ <h3 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h3>
                                 </div>
                             </div>
 
-                            <div style="padding: 15px;background-color: white">
+                            <div class="padd15 white-bg">
 
                                 <div class="row mt-1">
 
diff --git a/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.scss b/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.scss
index 6c02da93106..142159d2efd 100644
--- a/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.scss
+++ b/apps/web-giddh/src/app/gst/modals/gst-aside-menu/gst-aside-menu.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -19,7 +21,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -37,11 +39,11 @@
     max-width: 760px;
     width: 100%;
     padding: 0;
-    background: #f4f5f8;
+    background: $solitude;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -49,6 +51,11 @@
     position: relative;
     margin-top: 15px;
 }
+
+.auth-state{
+    border-bottom: 1px solid $night-rider;
+}
+
 @media (max-width: 768px) {
     :host.in , :host  {
         max-width: 600px;
diff --git a/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.html b/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.html
index 8e33fafb4d2..b554501e83f 100644
--- a/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.html
+++ b/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.html
@@ -3,13 +3,13 @@
         <div class="panel-heading clearfix">
             <strong>Bank Accounts</strong>
         </div>
-        <div class="card-body pos-rel">
-            <div class="banke-detailsBlock">
+        <div class="card-body position-relative">
+            <div class="bank-details-block">
                 <perfect-scrollbar [scrollIndicators]="true" *ngIf="bankAccounts.length > 0">
                     <div class="wrap-single-bank-detail">
-                        <div class="single-bank-detatil" *ngFor="let bankaccount of bankAccounts;">
-                            <p class="bank-name "> {{bankaccount.name}} </p>
-                            <p class="bankBalnc">
+                        <div class="single-bank-detail" *ngFor="let bankaccount of bankAccounts;">
+                            <p class="bank-name"> {{bankaccount.name}} </p>
+                            <p class="bank-balance">
                                 <span>In Giddh </span>
                                 <span>{{activeCompany.baseCurrencySymbol}}
                                     {{bankaccount.closingBalance.amount | giddhCurrency}}
@@ -19,12 +19,12 @@
                         </div>
                     </div>
                 </perfect-scrollbar>
-                <div class="addBankDetails" *ngIf="bankAccounts.length === 0">
+                <div class="add-bank-details" *ngIf="bankAccounts.length === 0">
                     <p>Yet to add Bank Details</p>
-                    <a class="connectBnk" [routerLink]="['/pages/settings/linked-accounts']">Connect Bank</a>
+                    <a class="connect-bank" [routerLink]="['/pages/settings/linked-accounts']">Connect Bank</a>
                 </div>
             </div>
-            <a class="connectBnk" *ngIf="bankAccounts.length > 0"
+            <a class="connect-bank" *ngIf="bankAccounts.length > 0"
                 [routerLink]="['/pages/settings/linked-accounts']">Connect Bank</a>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.scss b/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.scss
index 4b063a31bec..1f28d4257fd 100644
--- a/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.scss
+++ b/apps/web-giddh/src/app/home/components/bank-accounts/bank-accounts.component.scss
@@ -1,22 +1,22 @@
 @import "../../../../assets/css/color.scss";
 p.bank-name {
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     margin-bottom: 5px;
 }
 
-p.bankBalnc {
-    color: #666666;
+p.bank-balance {
+    color: $dark-gray;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
 }
-.single-bank-detatil {
+.single-bank-detail {
     border-bottom: 1px solid $gainsboro;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
-a.connectBnk {
+a.connect-bank {
     bottom: 10px;
     color: $nero;
     font-size: 14px;
@@ -28,7 +28,7 @@ a.connectBnk {
     height: 265px;
     overflow-y: auto;
 }
-.addBankDetails {
+.add-bank-details {
     display: flex;
     height: 300px;
     justify-content: center;
@@ -36,8 +36,8 @@ a.connectBnk {
     flex-direction: column;
 }
 p {
-    color: #666666;
+    color: $dark-gray;
 }
-.addBankDetails a.connectBnk {
+.add-bank-details a.connect-bank {
     padding-top: 5px;
 }
diff --git a/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.html b/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.html
index 92cf8472b6a..b4a685f95c2 100644
--- a/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.html
+++ b/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.html
@@ -20,7 +20,7 @@
                 <input type="text" readonly name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="form-control giddh-datepicker date-range-picker dashboard-datepicker" />
             </div>
         </div>
-        <div class="cr-dr-body card-body pos-rel">
+        <div class="cr-dr-body card-body position-relative">
             <div class="top-five-cr-dr-table">
                 <div class="table-responsive debtors-table">
                     <table class="table basic giddh-table on-mobile-view">
diff --git a/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.scss b/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.scss
index a100fcf5022..7232ee91553 100644
--- a/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.scss
+++ b/apps/web-giddh/src/app/home/components/cr-dr-list/cr-dr-list.component.scss
@@ -4,18 +4,18 @@ p.bank-name {
     color: $midnight-blue;
     margin-bottom: 5px;
 }
-p.bankBalnc {
+p.bank-balance {
     color: $dark-gray;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
 }
-.single-bank-detatil {
+.single-bank-detail {
     border-bottom: 1px solid $gainsboro;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
-a.connectBnk {
+a.connect-bank {
     position: absolute;
     bottom: 10px;
     color: $nero;
@@ -41,7 +41,7 @@ table.basic td {
     border-bottom: none !important;
 }
 table.basic th {
-    color: #1a237e;
+    color: $midnight-blue;
     font-size: 14px;
 }
 .cr-dr-body {
diff --git a/apps/web-giddh/src/app/home/components/gst/gst.component.html b/apps/web-giddh/src/app/home/components/gst/gst.component.html
index e6ead819b09..299290ffa39 100644
--- a/apps/web-giddh/src/app/home/components/gst/gst.component.html
+++ b/apps/web-giddh/src/app/home/components/gst/gst.component.html
@@ -42,7 +42,7 @@
             </div>
         </div>
 
-        <div class="panel-body pos-rel">
+        <div class="panel-body position-relative">
             <div class="total-amount">
                 <div class="amountInCash">
                     <span class="icon-rupees"></span>15,000
diff --git a/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.html b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.html
index 5b51bc0e9db..2e9b76843c0 100644
--- a/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.html
+++ b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.html
@@ -4,18 +4,18 @@
 			<strong>Bank accounts</strong><i class="icon-refresh pull-right" (click)="reload()"></i>
 		</div>
 
-		<div class="panel-body pos-rel pdT0">
-			<div class="col-xs-12 mr-t1 pdB2">
+		<div class="panel-body position-relative pt-0">
+			<div class="mr-t1 pd-b2">
 				<div class="row">
-					<div class="table primary_clr">
-						<span class="col-xs-6  pd0">A/c</span>
+					<div class="table primary-color">
+						<span class="col-xs-6  p-0">A/c</span>
 						<span class="col-xs-3 pd-l1">A/c no.</span>
-						<span class="col-xs-3 pd0 text-right">Closing Bal.</span>
+						<span class="col-xs-3 p-0 text-right">Closing Bal.</span>
 					</div>
 				</div>
 			</div>
-			<div class="dashboard-reconnectdiv" *ngIf="(isGetBankAccountsInProcess$ | async)">
-				<div ng-if="errorMessage == ''">
+			<div class="dashboard-reconnect-block" *ngIf="(isGetBankAccountsInProcess$ | async)">
+				<div *ngIf="errorMessage == ''">
 					<!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
 					<div class="spinner2">
 						<div class="cube1"></div>
@@ -23,7 +23,7 @@
 					</div>
 				</div>
 			</div>
-			<div [ngClass]="{'dashboard-reconnectdiv': (bankAccountsError$ | async)}"
+			<div [ngClass]="{'dashboard-reconnect-block': (bankAccountsError$ | async)}"
 				*ngIf="!(isGetBankAccountsInProcess$ | async)">
 				<label class="font-black" *ngIf="(bankAccountsError$ | async)">{{bankAccountsError$ | async}}</label>
 			</div>
@@ -31,9 +31,9 @@
 				<section class="clearfix">
 					<strong class="title">{{ bankAccounts.siteName}}</strong>
 					<aside class="body">
-						<table class="width100">
+						<table class="width-100">
 							<tr *ngFor="let item of bankAccounts.accounts">
-								<td class="pos-rel width100">
+								<td class="position-relative width-100">
 									<table class="table mr-b1">
 										<tbody>
 											<tr>
@@ -69,7 +69,7 @@
 						aria-hidden="true">&times;</span></button>
 				<h3 class="modal-title">Refresh Account</h3>
 			</div>
-			<div class="modal-body" style="height:400px">
+			<div class="modal-body bank-account-modal">
 				<div class="embed-responsive embed-responsive-16by9">
 					<iframe class="embed-responsive-item" *ngIf="(refreshBankAccount$ | async)?.connectUrl"
 						attr.src="{{connectUrl}}"></iframe>
diff --git a/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.scss b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.scss
new file mode 100644
index 00000000000..2e774ad3cce
--- /dev/null
+++ b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.scss
@@ -0,0 +1,3 @@
+.bank-account-modal{
+    height:400px
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.ts b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.ts
index 9bec09ba209..62cbb2b043b 100644
--- a/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.ts
+++ b/apps/web-giddh/src/app/home/components/live-accounts/live-accounts.component.ts
@@ -10,7 +10,8 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
     selector: 'live-accounts',
-    templateUrl: 'live-accounts.component.html'
+    templateUrl: 'live-accounts.component.html',
+    styleUrls: ['./live-accounts.component.scss'],
 })
 
 export class LiveAccountsComponent implements OnInit, OnDestroy {
diff --git a/apps/web-giddh/src/app/home/components/profit-loss/profit-loss.component.html b/apps/web-giddh/src/app/home/components/profit-loss/profit-loss.component.html
index 591b8d9bf3d..2b19f715af5 100644
--- a/apps/web-giddh/src/app/home/components/profit-loss/profit-loss.component.html
+++ b/apps/web-giddh/src/app/home/components/profit-loss/profit-loss.component.html
@@ -1,10 +1,9 @@
 <div id="live">
     <div class="card">
-
         <div class="panel-heading">
             <strong>Profit & Loss</strong>
-            <div class=" pull-right dashboard-filter">
-                <i class="icon-refresh  mr-1" (click)="refreshChart()"></i>
+            <div class="pull-right dashboard-filter">
+                <i class="icon-refresh mr-1" (click)="refreshChart()"></i>
                 <div (click)="showGiddhDatepicker($event)">
                     <input type="text" readonly name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''"
                         class="giddh-datepicker form-control date-range-picker dashboard-datepicker" />
@@ -12,8 +11,8 @@
             </div>
         </div>
 
-        <div class="card-body pos-rel">
-            <div class="dashboard-reconnectdiv" *ngIf="requestInFlight">
+        <div class="card-body position-relative">
+            <div class="dashboard-reconnect-block" *ngIf="requestInFlight">
                 <div class="no-data mr-t2 loader-main">
                     <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
                     <div class="spinner2">
@@ -25,7 +24,7 @@
             <div class="chart-div" google-chart chart="chartData" *ngIf="!requestInFlight">
                 <!-- <chart [chart]="profitLossChart" *ngIf="dataFound" #currentRatio></chart> -->
                 <highcharts-chart *ngIf="chartOptions" [Highcharts]="profitLossChart" [options]="chartOptions"></highcharts-chart>
-                <div class="noDataAvailable" *ngIf="!dataFound">
+                <div class="no-data-available" *ngIf="!dataFound">
                     <img src="{{imgPath}}noDataChart.svg" alt="no data found">
                 </div>
                 <div class="clearfix mb-2 total-income">
diff --git a/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.html b/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.html
index 4b216a23e64..69789d08666 100644
--- a/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.html
+++ b/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.html
@@ -1,6 +1,5 @@
 <div id="live">
     <div class="card">
-
         <div class="panel-heading">
             <strong>Ratio Analysis</strong>
             <div class="pull-right dashboard-filter">
@@ -8,9 +7,9 @@
             </div>
         </div>
 
-        <div class="card-body pos-rel ratioAnalysisPanelBody">
-            <div class="dashboard-reconnectdiv" *ngIf="requestInFlight">
-                <div class="no-data mr-t2 loader-main" ng-if="errorMessage == ''">
+        <div class="card-body position-relative ratio-analysis-panel-body">
+            <div class="dashboard-reconnect-block" *ngIf="requestInFlight">
+                <div class="no-data mr-t2 loader-main" *ngIf="errorMessage == ''">
                     <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
                     <div class="spinner2">
                         <div class="cube1"></div>
@@ -18,7 +17,7 @@
                     </div>
                 </div>
 
-                <label class="font-black" ng-if="errorMessage != ''">{{"a"}}</label>
+                <label class="font-black" *ngIf="errorMessage != ''">{{"a"}}</label>
             </div>
             <div class="chart-div" google-chart chart="chartData" *ngIf="!requestInFlight">
                     <div class="row">
diff --git a/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.scss b/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.scss
index d39f732605f..14a0fddcdc6 100644
--- a/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.scss
+++ b/apps/web-giddh/src/app/home/components/ratio-analysis/ratio-analysis-chart.component.scss
@@ -1,15 +1,15 @@
 @import "../../../../assets/css/color.scss";
-.ratioAnalysisPanelBody {
+.ratio-analysis-panel-body {
     padding-left: 0;
     padding-right: 0;
 }
-.ratioAnalysisPanelBody h1 {
+.ratio-analysis-panel-body h1 {
     font-size: 14px;
     color: $nero;
 }
 
-.ratioAnalysisPanelBody small {
-    color: #666666;
+.ratio-analysis-panel-body small {
+    color: $dark-gray;
     font-size: 14px;
 }
 .ratio-chart-block {
diff --git a/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.html b/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.html
index 9d9b0700b8e..8140cabae5a 100644
--- a/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.html
+++ b/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.html
@@ -4,7 +4,7 @@
             <div class="col-lg-9 col-md-12">
                 <div class="left-column">
                     <div class="panel-heading pl-0 pt-0 clearfix">
-                        <div class="panel-heading-inner-content  w-100">
+                        <div class="panel-heading-inner-content w-100">
                             <div class="btn-group gst-dropdown cursor-pointer pull-left" dropdown>
                                 <span id="button-basic" dropdownToggle class="dropdown-toggle"
                                     aria-controls="dropdown-basic">
@@ -20,19 +20,19 @@
                             </div>
 
                             <div class="refresh-btn">
-                                <i class="icon-refresh pull-right  pl-15" (click)="refreshChart()"></i>
+                                <i class="icon-refresh pull-right  pd-l15" (click)="refreshChart()"></i>
                                 <span class="this-week pull-right"><span class="icon-collapse-icon mr-l1" tooltip="Expand"
                                         (click)="showLineChart()"></span> </span>
                                 <ul class="dashboard-option pull-right">
-                                    <li class="secondryDarkbg"> <span></span> Last Week</li>
-                                    <li class="secondrylightbg"> <span></span> This Week</li>
+                                    <li class="secondary-dark-bg"> <span></span> Last Week</li>
+                                    <li class="secondary-light-bg"> <span></span> This Week</li>
                                 </ul>
                             </div>
                         </div>
 
                     </div>
-                    <div class="panel-body pl-0 pr-0 pos-rel">
-                        <div class="dashboard-reconnectdiv" *ngIf="requestInFlight">
+                    <div class="panel-body pl-0 pr-0 position-relative">
+                        <div class="dashboard-reconnect-block" *ngIf="requestInFlight">
                             <div class="no-data mr-t2 loader-main">
                                 <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
                                 <div class="spinner2">
@@ -54,20 +54,20 @@
             </div>
             <div class="col-lg-3 col-md-12">
                 <div class="total-sale-detail" *ngIf="activeGraphType !== undefined">
-                    <div class="singleSaleDetail">
+                    <div class="single-sale-detail">
                         <p>Total {{activeGraphType['uniqueName']}} (this week)</p>
                         <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.totalCurrent | giddhCurrency}}</h3>
                     </div>
-                    <div class="singleSaleDetail">
+                    <div class="single-sale-detail">
                         <p>Total {{activeGraphType['uniqueName']}} (last week)</p>
                         <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.totalLast | giddhCurrency}}</h3>
                     </div>
-                    <div class="singleSaleDetail">
+                    <div class="single-sale-detail">
                         <p>Highest {{activeGraphType['uniqueName']}}</p>
                         <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.highest | giddhCurrency}}</h3>
                         <span>{{summaryData.highestLabel}}</span>
                     </div>
-                    <div class="singleSaleDetail">
+                    <div class="single-sale-detail">
                         <p>Lowest {{activeGraphType['uniqueName']}}</p>
                         <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.lowest | giddhCurrency}}</h3>
                         <span>{{summaryData.lowestLabel}}</span>
@@ -79,13 +79,13 @@ <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.lowest | giddhCurrency}}<
 </div>
 <div *ngIf="graphExpanded">
     <div class="total-sales-header">
-        <div class="row  total-income-wrap">
+        <div class="row total-income-wrap">
             <div class="col-lg-8 col-md-12">
                 <div class="row">
                     <div class="col-sm-6">
-                        <div class="daterang-block">
+                        <div class="date-range-block">
                             <label>Date Range</label>
-                            <div class="dateRangeInput">
+                            <div class="date-range-input">
                                 <span class="icon-calender" (click)="dp1.toggle()"></span>
                                 <input type="text" readonly placeholder="Select Dates" class="form-control"
                                     #dp1="bsDaterangepicker" [bsValue]="previousDateRangePickerValue"
@@ -94,9 +94,9 @@ <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.lowest | giddhCurrency}}<
                         </div>
                     </div>
                     <div class="col-sm-6">
-                        <div class="daterang-block">
+                        <div class="date-range-block">
                             <label>Compare to</label>
-                            <div class="dateRangeInput">
+                            <div class="date-range-input">
                                 <span class="icon-calender" (click)="dp2.toggle()"></span>
                                 <input type="text" readonly placeholder="Select Dates" class="form-control"
                                     #dp2="bsDaterangepicker" [bsValue]="currentDateRangePickerValue"
@@ -116,15 +116,15 @@ <h1>Total {{activeGraphType['uniqueName']}}</h1>
             </div>
         </div>
     </div>
-    <div class="card mt-15" >
+    <div class="card mr-t15" >
         <div class="card-body">
-            <div class="clearfix topdates">
+            <div class="clearfix top-dates">
                 <div class="pull-left about-date">
                     <div class="active-date">
                         <span></span>{{this.getPreviousWeekStartEndDate[0] | date}} -
                         {{this.getPreviousWeekStartEndDate[1] | date}}
                     </div>
-                    <div class="inActive-date">
+                    <div class="in-active-date">
                         <span></span>{{this.getCurrentWeekStartEndDate[0] | date}} -
                         {{this.getCurrentWeekStartEndDate[1] | date}}
                     </div>
@@ -162,14 +162,14 @@ <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.totalLast | giddhCurrency
                         <div>
                             <p>Highest {{activeGraphType['uniqueName']}}</p>
                             <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.highest | giddhCurrency}}</h3>
-                            <span class="dateWiseSale">{{summaryData.highestLabel}}</span>
+                            <span class="date-wise-sale">{{summaryData.highestLabel}}</span>
                         </div>
                     </div>
                     <div class="col-sm-3 single-sale-data">
                         <div>
                             <p>Lowest {{activeGraphType['uniqueName']}}</p>
                             <h3>{{activeCompany.baseCurrencySymbol}} {{summaryData.lowest | giddhCurrency}}</h3>
-                            <span class="dateWiseSale">{{summaryData.lowestLabel}}</span>
+                            <span class="date-wise-sale">{{summaryData.lowestLabel}}</span>
                         </div>
                     </div>
                 </div>
diff --git a/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.scss b/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.scss
index 23424b2e926..ce479ade672 100644
--- a/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.scss
+++ b/apps/web-giddh/src/app/home/components/revenue/revenue-chart.component.scss
@@ -1,5 +1,5 @@
 @import "../../../../assets/css/color.scss";
-.secondryDarkbg span {
+.secondary-dark-bg span {
     background: $teal;
     width: 15px;
     height: 15px;
@@ -7,8 +7,8 @@
     margin-right: 5px;
 }
 
-.secondrylightbg span {
-    background: #0cb1af;
+.secondary-light-bg span {
+    background: $light-sea-green;
     width: 15px;
     height: 15px;
     display: inline-block;
@@ -20,12 +20,12 @@
     justify-content: center;
     align-items: center;
 }
-.dashboard-option li.secondryDarkbg {
-    color: #087e7d;
+.dashboard-option li.secondary-dark-bg {
+    color: $teal;
     font-size: 14px;
 }
-.dashboard-option li.secondrylightbg {
-    color: #0cb1af;
+.dashboard-option li.secondary-light-bg {
+    color: $light-sea-green;
     font-size: 14px;
 }
 
@@ -33,7 +33,7 @@
     color: $dark-gray;
 }
 .left-column {
-    border-right: 1px solid #ddd;
+    border-right: 1px solid $gainsboro;
     margin: 5px 0;
 }
 span.this-week {
@@ -48,18 +48,18 @@ span.this-week {
 }
 .total-sale-detail p {
     font-size: 18px;
-    color: #666;
+    color: $dark-gray;
 }
 .total-sale-detail h3 {
     font-size: 22px;
-    color: #000000;
+    color: $black;
 }
 
 .total-sale-detail span {
     font-size: 18px;
-    color: #000000;
+    color: $black;
 }
-.singleSaleDetail {
+.single-sale-detail {
     padding-top: 30px;
 }
 span.icon-collapse-icon {
@@ -68,29 +68,29 @@ span.icon-collapse-icon {
     cursor: pointer;
 }
 span.icon-collapse-icon:hover {
-    color: #1a237e;
+    color: $midnight-blue;
 }
 
 /* CSS FOR LINE CHART */
 
 p.bankName {
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     margin-bottom: 5px;
 }
 
-p.bankBalnc {
+p.bank-balance {
     color: $dark-gray;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
 }
-.single-bank-detatil {
+.single-bank-detail {
     border-bottom: 1px solid $gainsboro;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
-a.connectBnk {
+a.connect-bank {
     position: absolute;
     bottom: 10px;
     color: $nero;
@@ -101,7 +101,7 @@ a.connectBnk {
     padding: 15px;
 }
 .total-sales-header {
-    background-color: #fff;
+    background-color: $white;
     border: 1px solid $gainsboro;
     border-radius: 2px;
     padding: 15px 15px 20px;
@@ -111,13 +111,13 @@ a.connectBnk {
     color: $charcoal;
     margin-bottom: 3px;
 }
-.daterang-block .form-control {
-    border: 1px solid #5b64c9;
+.date-range-block .form-control {
+    border: 1px solid $chetwode-blue;
 }
-.dateRangeInput {
+.date-range-input {
     position: relative;
 }
-.dateRangeInput span.icon-calender {
+.date-range-input span.icon-calender {
     position: absolute;
     width: 32px;
     height: 32px;
@@ -127,12 +127,12 @@ a.connectBnk {
     border-right: 1px solid $gainsboro;
     color:$nero;
 }
-.dateRangeInput input {
+.date-range-input input {
     padding-left: 35px !important;
     color:$nero;
 }
 .page-title h1 {
-    color: #1a237e;
+    color: $midnight-blue;
     font-size: 24px;
     text-align: center;
     font-weight: 600;
@@ -156,9 +156,9 @@ a.connectBnk {
     display: inline;
     text-align: right;
     font-size: 24px;
-    color: #1a237e;
+    color: $midnight-blue;
 }
-.dateRangeInput.disabled {
+.date-range-input.disabled {
     opacity: 0.5;
 }
 .page-title {
@@ -170,7 +170,7 @@ a.connectBnk {
     font-size: 18px;
 }
 .active-date {
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -180,21 +180,21 @@ a.connectBnk {
     width: 15px;
     height: 15px;
     display: inline-block;
-    background-color: #1a237e;
+    background-color: $midnight-blue;
     margin-right: 5px;
 }
-.inActive-date {
-    color: #5b64c9;
+.in-active-date {
+    color: $chetwode-blue;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin-right: 32px;
 }
-.inActive-date span {
+.in-active-date span {
     width: 15px;
     height: 15px;
     display: inline-block;
-    background-color: #5b64c9;
+    background-color: $chetwode-blue;
     margin-right: 5px;
 }
 
@@ -205,7 +205,7 @@ a.connectBnk {
 
     position: relative;
 }
-.topdates {
+.top-dates {
     min-height: 60px;
 }
 .single-sale-data p {
@@ -214,11 +214,11 @@ a.connectBnk {
 }
 .single-sale-data h3 {
     font-size: 22px;
-    color: #1a237e;
+    color: $midnight-blue;
     margin-top: 6px;
 }
-span.dateWiseSale {
-    color: #1a237e;
+span.date-wise-sale {
+    color: $midnight-blue;
     font-size: 18px;
 }
 
@@ -289,7 +289,7 @@ input:read-only:focus {
     .total-sale-detail{
         text-align: left;
         padding-right: 0;
-        .singleSaleDetail{
+        .single-sale-detail{
             padding-top: 0;
             padding-bottom: 10px;
         }
@@ -347,7 +347,7 @@ input:read-only:focus {
         flex-direction: column;
         align-items: baseline;
     }
-    .daterang-block {
+    .date-range-block {
         padding-bottom: 10px;
         font-size: 14px;
     }
diff --git a/apps/web-giddh/src/app/home/components/total-overdues/total-overdues-chart.component.html b/apps/web-giddh/src/app/home/components/total-overdues/total-overdues-chart.component.html
index 1cd2d0ffa09..c65a3f328d2 100644
--- a/apps/web-giddh/src/app/home/components/total-overdues/total-overdues-chart.component.html
+++ b/apps/web-giddh/src/app/home/components/total-overdues/total-overdues-chart.component.html
@@ -1,6 +1,5 @@
 <div id="live">
     <div class="card">
-
         <div class="panel-heading">
             <strong>Total Overdues</strong>
             <div class="pull-right dashboard-filter">
@@ -17,8 +16,8 @@
             </div>
         </div>
 
-        <div class="card-body pos-rel {{requestInFlight}}">
-            <div class="dashboard-reconnectdiv" *ngIf="requestInFlight">
+        <div class="card-body position-relative {{requestInFlight}}">
+            <div class="dashboard-reconnect-block" *ngIf="requestInFlight">
                 <div class="no-data mr-t2 loader-main">
                     <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
                     <div class="spinner2">
@@ -30,7 +29,7 @@
             <div class="chart-div" google-chart chart="chartData" *ngIf="!requestInFlight">
                 <!-- <chart [chart]="totaloverDueChart" *ngIf="dataFound" #currentRatio></chart> -->
                 <highcharts-chart *ngIf="chartOptions && dataFound" [Highcharts]="totaloverDueChart" [options]="chartOptions"></highcharts-chart>
-                <div class="noDataAvailable" *ngIf="!dataFound">
+                <div class="no-data-available" *ngIf="!dataFound">
                     <img src="{{imgPath}}noDataChart.svg" alt="no data found">
                 </div>
                 <div class="clearfix mr-b2">
diff --git a/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.html b/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.html
index 75cad80c53f..0fd0c6e2c45 100644
--- a/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.html
+++ b/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.html
@@ -5,9 +5,9 @@
                 <div class="row">
 
                     <div class="col-sm-6">
-                        <div class="daterang-block">
+                        <div class="date-range-block">
                             <label>Date Range</label>
-                            <div class="dateRangeInput">
+                            <div class="date-range-input">
                                 <span class="icon-calender"></span>
                                 <input type="text" placeholder="Select Dates" class="form-control" bsDaterangepicker>
                             </div>
@@ -15,9 +15,9 @@
                         </div>
                     </div>
                     <div class="col-sm-6">
-                        <div class="daterang-block">
+                        <div class="date-range-block">
                             <label><input type="checkbox"> Compare to</label>
-                            <div class="dateRangeInput disabled">
+                            <div class="date-range-input disabled">
                                 <span class="icon-calender"></span>
                                 <input type="text" placeholder="Select Dates" class="form-control" bsDaterangepicker>
                             </div>
@@ -44,12 +44,12 @@ <h1>Total Sales</h1>
 
     <div class="card-body mr-t1">
 
-        <div class=" clearfix topdates">
+        <div class=" clearfix top-dates">
             <div class="pull-left about-date">
                 <div class="active-date">
                     <span></span>01 Sep 19 - 31 Sep 19
                 </div>
-                <div class="inActive-date">
+                <div class="in-active-date">
                     <span></span>01 Sep 19 - 31 Sep 19
                 </div>
             </div>
@@ -100,14 +100,14 @@ <h3>10,10,900.00</h3>
                     <div class="">
                         <p>Highest Sales</p>
                         <h3>10,10,900.00</h3>
-                        <span class="dateWiseSale">(12 Sep 19)</span>
+                        <span class="date-wise-sale">(12 Sep 19)</span>
                     </div>
                 </div>
                 <div class="col-sm-3 single-sale-data">
                     <div class="">
                         <p>Lowest Sales</p>
                         <h3>10,10,900.00</h3>
-                        <span class="dateWiseSale">(12 Sep 19)</span>
+                        <span class="date-wise-sale">(12 Sep 19)</span>
                     </div>
                 </div>
             </div>
diff --git a/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.scss b/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.scss
index 1cca8c2e933..896b012c408 100644
--- a/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.scss
+++ b/apps/web-giddh/src/app/home/components/total-sales/total-sales.component.scss
@@ -1,22 +1,22 @@
 @import "../../../../assets/css/color.scss";
 p.bankName {
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     margin-bottom: 5px;
 }
 
-p.bankBalnc {
-    color: #666666;
+p.bank-balance {
+    color: $dark-gray;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
 }
-.single-bank-detatil {
+.single-bank-detail {
     border-bottom: 1px solid $gainsboro;
     padding-bottom: 10px;
     margin-bottom: 10px;
 }
-a.connectBnk {
+a.connect-bank {
     position: absolute;
     bottom: 10px;
     color: $nero;
@@ -27,8 +27,8 @@ a.connectBnk {
     padding: 15px;
 }
 .total-sales-header {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     border-radius: 2px;
     padding: 15px 15px 20px;
 }
@@ -37,28 +37,28 @@ a.connectBnk {
     color: $charcoal;
     margin-bottom: 3px;
 }
-.daterang-block .form-control {
-    border: 1px solid #5b64c9;
+.date-range-block .form-control {
+    border: 1px solid $chetwode-blue;
 }
-.dateRangeInput {
+.date-range-input {
     position: relative;
 }
-.dateRangeInput span.icon-calender {
+.date-range-input span.icon-calender {
     position: absolute;
     width: 32px;
     height: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    border-right: 1px solid #5b64c9;
+    border-right: 1px solid $chetwode-blue;
     color: $nero;
 }
-.dateRangeInput input {
+.date-range-input input {
     padding-left: 35px !important;
     color: $nero;
 }
 .page-title h1 {
-    color: #1a237e;
+    color: $midnight-blue;
     font-size: 28px;
     text-align: center;
     font-weight: 600;
@@ -82,7 +82,7 @@ a.connectBnk {
     display: inline;
     text-align: right;
     font-size: 24px;
-    color: #1a237e;
+    color: $midnight-blue;
     cursor: pointer;
 }
 .dateRangeInput.disabled {
@@ -97,7 +97,7 @@ a.connectBnk {
     font-size: 18px;
 }
 .active-date {
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -107,21 +107,21 @@ a.connectBnk {
     width: 15px;
     height: 15px;
     display: inline-block;
-    background-color: #1a237e;
+    background-color: $midnight-blue;
     margin-right: 5px;
 }
-.inActive-date {
-    color: #5b64c9;
+.in-active-date {
+    color: $chetwode-blue;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin-right: 32px;
 }
-.inActive-date span {
+.in-active-date span {
     width: 15px;
     height: 15px;
     display: inline-block;
-    background-color: #5b64c9;
+    background-color: $chetwode-blue;
     margin-right: 5px;
 }
 
@@ -129,10 +129,10 @@ a.connectBnk {
     padding: 15px;
     border-radius: 2px;
     border: none;
-    box-shadow: 0px 3px 6px #0000001a;
+    box-shadow: 0px 3px 6px $black-russian;
     position: relative;
 }
-.topdates {
+.top-dates {
     min-height: 60px;
 }
 .single-sale-data p {
@@ -141,11 +141,11 @@ a.connectBnk {
 }
 .single-sale-data h3 {
     font-size: 22px;
-    color: #1a237e;
+    color: $midnight-blue;
     margin-top: 6px;
 }
-span.dateWiseSale {
-    color: #1a237e;
+span.date-wise-sale {
+    color: $midnight-blue;
     font-size: 18px;
 }
 
diff --git a/apps/web-giddh/src/app/home/home.component.html b/apps/web-giddh/src/app/home/home.component.html
index ca4cf70bcac..0f06654b79b 100644
--- a/apps/web-giddh/src/app/home/home.component.html
+++ b/apps/web-giddh/src/app/home/home.component.html
@@ -7,23 +7,23 @@
                 <!-- <div class="white-row" *ngIf="subscribedPlan !== undefined && subscribedPlan.status === 'expired'">
                     <p> <span class="icon-traingle-info"></span> Your {{subscribedPlan.planDetails.duration}}
                         {{subscribedPlan.planDetails.durationUnit}} {{subscribedPlan.planDetails.name}} ended on
-                        {{subscribedPlan.expiry}}. Apply to upgrade your subscription. <a class="clickHere"
+                        {{subscribedPlan.expiry}}. Apply to upgrade your subscription. <a class="click-here"
                             (click)="goToSelectPlan()">Click here</a></p>
                 </div> -->
                 <!-- <div class="white-row" *ngIf="subscribedPlan !== undefined && subscribedPlan.additionalCharges">
                     <p> <span class="icon-traingle-info"></span> You have crossed the transactions limit of your
                         assigned plan {{subscribedPlan.planDetails.name}} subscribed on {{subscribedPlan.startedAt}}. To
                         continue your accounting with Giddh, Please renew your current plan or switch to another one.
-                        Contact us for more assistance. <a class="clickHere" (click)="goToSelectPlan()">Click here</a>
+                        Contact us for more assistance. <a class="click-here" (click)="goToSelectPlan()">Click here</a>
                     </p>
                 </div> -->
                 <!--        <div class="white-row">-->
                 <!--          <p><span class="icon-info-icon"></span> GSTR 2A Mismatch report for FY 2018-19 is now available for download.-->
-                <!--            <span class="clickHere ">Visit-->
+                <!--            <span class="click-here ">Visit-->
                 <!--              Reports</span></p>-->
                 <!--        </div>-->
                 <!--        <div class="white-row">-->
-                <!--          <p><span class="icon-info-icon"></span>New feature JobWork added <span class="clickHere ">NEW-->
+                <!--          <p><span class="icon-info-icon"></span>New feature JobWork added <span class="click-here ">NEW-->
                 <!--            </span></p>-->
                 <!--        </div>-->
             <!-- </div> -->
diff --git a/apps/web-giddh/src/app/home/home.component.scss b/apps/web-giddh/src/app/home/home.component.scss
index 71daeaa5ff1..ab05d6deea2 100644
--- a/apps/web-giddh/src/app/home/home.component.scss
+++ b/apps/web-giddh/src/app/home/home.component.scss
@@ -2,21 +2,6 @@
 // @import url('../../assets/css/color.css');
 
 @import "../../assets/css/color.scss";
-.primaryDarkBg {
-    background: #005b77;
-}
-
-.primarylightBg {
-    background: #77a1b8;
-}
-
-.defaultDarkBg {
-    background: #28283c;
-}
-
-.defaultLightBg {
-    background: #aeaec4;
-}
 
 .dashboard-option {
     padding: 0;
@@ -35,13 +20,13 @@
 }
 // new dashboard css
 .white-row {
-    background-color: #fff;
+    background-color: $white;
     padding: 9px;
     margin-bottom: 10px;
     font-size: 16px;
-    box-shadow: 1px 1px 3px #00000029;
+    box-shadow: 1px 1px 3px $black-russian;
 }
-.clickHere {
+.click-here {
     color: $chetwode-blue;
 }
 .dashboard-container {
@@ -49,12 +34,12 @@
     width: 100%;
 }
 span.icon-traingle-info {
-    color: #ff6262;
+    color: $bitter-sweet;
     font-size: 15px;
     margin-right: 10px;
 }
 span.icon-info-icon {
-    color: #999999;
+    color: $nobel;
     font-size: 18px;
     margin-right: 10px;
 }
@@ -66,8 +51,8 @@ a.dropdown-item {
 }
 
 a.dropdown-item:hover {
-    background-color: #eeeff9;
-    color: #5b64c9;
+    background-color: $lavender;
+    color: $chetwode-blue;
 }
 .dashboard-notification {
     margin-bottom: 20px;
@@ -83,15 +68,15 @@ a.dropdown-item:hover {
     background: transparent;
 }
 .form-control:focus {
-    border-color: #5b64c9 !important;
+    border-color: $chetwode-blue !important;
 }
 .form-control {
     height: 32px;
 }
-.clickHere {
+.click-here {
     cursor: pointer;
 }
-.noDataAvailable {
+.no-data-available {
     display: flex;
     height: 181px;
     justify-content: center;
diff --git a/apps/web-giddh/src/app/import-excel/import-excel.component.scss b/apps/web-giddh/src/app/import-excel/import-excel.component.scss
index 6aaf05976f8..27780fc27a7 100644
--- a/apps/web-giddh/src/app/import-excel/import-excel.component.scss
+++ b/apps/web-giddh/src/app/import-excel/import-excel.component.scss
@@ -1,5 +1,5 @@
 @import "../../assets/css/color.scss";
-.steps_wizard {
+.steps-wizard {
     padding: 30px 0;
     background:$white;
     text-align: center;
@@ -17,12 +17,12 @@
         > label {
             width: 30px;
             height: 30px;
-            border: 2px solid #dcdcdc;
+            border: 2px solid $gainsboro;
             border-radius: 100%;
             transition: background-color 1s;
-            background-color: #ffffff;
+            background-color: $white;
             position: relative;
-            color: #969696;
+            color: $opium;
             line-height: 100%;
             align-items: center;
             display: flex;
@@ -31,7 +31,7 @@
     }
 }
 
-.upload_excel {
+.upload-excel {
     display: flex;
     height: 320px;
     position: relative;
@@ -42,7 +42,7 @@
 .center-block{
     margin: 0 auto;
 }
-.max500 {
+.max-width-500 {
     max-width: 500px;
 }
 
@@ -59,18 +59,18 @@
     visibility: hidden;
 }
 
-.upload_icon {
+.upload-icon {
     font-size: 62px;
     float: none;
-    color: #e2e2e2;
+    color: $whisper;
 }
 
-.sample_file-btn {
+.sample-file-btn {
     z-index: 9;
     position: relative;
 }
 
-.dashed_bdr {
+.dashed-border {
     border: 2px dashed $gainsboro;
 }
 
@@ -90,7 +90,7 @@
     justify-content: flex-end;
     margin: 0 15px;
     border: 1px solid $gainsboro;
-    background: #fafafa;
+    background: $gray-95;
     padding: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -110,7 +110,7 @@
 }
 
 .has-error .form-control {
-    border-color: red !important;
+    border-color: $red !important;
 }
 @media(max-width:991px){
     .import-type {
diff --git a/apps/web-giddh/src/app/import-excel/import-process/import-process.component.html b/apps/web-giddh/src/app/import-excel/import-process/import-process.component.html
index 242ad417be4..325bed5107e 100644
--- a/apps/web-giddh/src/app/import-excel/import-process/import-process.component.html
+++ b/apps/web-giddh/src/app/import-excel/import-process/import-process.component.html
@@ -1,7 +1,7 @@
 <!-- Review Field start-->
-<div class="reviewData">
+<div class="review-data">
     <div class="text-right">
-        <div class="action_btn">
+        <div class="action-btn">
             <button class="btn btn-default" (click)="onBack.emit()">Back</button>
             <button class="btn btn-success" [disabled]="!importDisable" [ladda]="isLoading"
                 (click)="save()">Import</button>
@@ -23,7 +23,7 @@
 
                 <tr *ngFor="let item of importData.data.items">
                     <td *ngFor="let row of item.row">
-                        <div class="ellp" container="body" [tooltip]="row.columnValue">{{row.columnValue}}</div>
+                        <div class="text-ellipsis" container="body" [tooltip]="row.columnValue">{{row.columnValue}}</div>
                     </td>
                 </tr>
 
diff --git a/apps/web-giddh/src/app/import-excel/import-process/import-process.component.scss b/apps/web-giddh/src/app/import-excel/import-process/import-process.component.scss
index 0c24a6e3fc4..518e7ac8741 100644
--- a/apps/web-giddh/src/app/import-excel/import-process/import-process.component.scss
+++ b/apps/web-giddh/src/app/import-excel/import-process/import-process.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 table {
     table-layout: fixed;
 }
@@ -13,7 +15,7 @@ table {
     float: left;
 }
 
-.data_overview {
+.data-overview {
     width: 100%;
     overflow-x: scroll;
     min-height: 300px;
@@ -30,7 +32,7 @@ table {
     color: rgba(0, 0, 0, 0.8);
 }
 
-.action_btn {
+.action-btn {
     right: 15px;
 }
 
@@ -43,5 +45,5 @@ table {
 }
 
 .basic > thead > tr > th {
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
 }
diff --git a/apps/web-giddh/src/app/import-excel/import-report/import-report.component.html b/apps/web-giddh/src/app/import-excel/import-report/import-report.component.html
index 04c55cf8c19..a97c7932d26 100644
--- a/apps/web-giddh/src/app/import-excel/import-report/import-report.component.html
+++ b/apps/web-giddh/src/app/import-excel/import-report/import-report.component.html
@@ -4,12 +4,12 @@
         <div class="text-right">
             <button class="btn btn-sky-blue mr-0" (click)="importFiles()">Import Files</button>
         </div>
-        <div class="mt-15 import-data-table">
+        <div class="mr-t15 import-data-table">
             <div class="no-data h-100" *ngIf="!importStatusResponse?.results?.length">
                 <h2>No Import Status Available.</h2>
             </div>
             <div class="row import-data-row">
-                <div class="col-lg-6 col-md-12 mb-15" *ngFor="let item of importStatusResponse.results">
+                <div class="col-lg-6 col-md-12 mr-b15" *ngFor="let item of importStatusResponse.results">
                     <div class="import-card">
                        <i class="hover-orange"
                             (click)="downloadItem(item)">
diff --git a/apps/web-giddh/src/app/import-excel/import-report/import-report.component.scss b/apps/web-giddh/src/app/import-excel/import-report/import-report.component.scss
index 706407593ba..e4558953f9a 100644
--- a/apps/web-giddh/src/app/import-excel/import-report/import-report.component.scss
+++ b/apps/web-giddh/src/app/import-excel/import-report/import-report.component.scss
@@ -5,7 +5,7 @@
     overflow-y: auto;
     .import-card {
         padding: 15px;
-        background-color: white;
+        background-color: $white;
         box-shadow: 0px 3px 7px $black-russian;
         border-radius: 2px;
         position: relative;
diff --git a/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.html b/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.html
index 25ff1ff27b3..61008963f93 100644
--- a/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.html
+++ b/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.html
@@ -1,6 +1,7 @@
 <hamburger-menu [pageHeading]="'Import Data'"></hamburger-menu>
-<div class="col-xs-12">
-    <div class="pt-2 mt-2">
+<div class="row">
+<div class="col-12">
+    <div class="pd-t2 mt-2">
         <div class="text-center mr-t2 mr-b2">
             <h1 class="lead">Have data in CSV or Excel files?</h1>
             <h4>It’s easy to import from your computer</h4>
@@ -8,7 +9,7 @@ <h4>It’s easy to import from your computer</h4>
                 [routerLink]="['/pages','import', 'report', 'import-report']">Previous Imports</a>
         </div>
         <!--Buttons-->
-        <ul class="import-type mr-b2 mr-t4 pdT4">
+        <ul class="import-type mr-b2 mr-t4 pd-t4">
 
             <li *ngIf="!isBranch">
                 <a class="text-link-2" [routerLink]="['/pages','import','group']">
@@ -50,3 +51,4 @@ <h2>Trial Balance</h2>
         </ul>
     </div>
 </div>
+</div>
diff --git a/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.scss b/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.scss
index 6ad56fe12c2..dcc7f5cd25d 100644
--- a/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.scss
+++ b/apps/web-giddh/src/app/import-excel/import-type-select/import-type-select.component.scss
@@ -15,7 +15,7 @@
     justify-content: flex-end;
     margin: 0 15px;
     border: 1px solid $gainsboro;
-    background: #fafafa;
+    background: $gray-95;
     cursor: pointer;
     transition: all 0.3s ease;
     color: initial;
@@ -35,7 +35,7 @@
 }
 
 .has-error .form-control {
-    border-color: red !important;
+    border-color: $red !important;
 }
 
 .import-type img {
diff --git a/apps/web-giddh/src/app/import-excel/import-wizard/import-wizard.component.scss b/apps/web-giddh/src/app/import-excel/import-wizard/import-wizard.component.scss
index 8e9c740b9f6..044e3c47083 100644
--- a/apps/web-giddh/src/app/import-excel/import-wizard/import-wizard.component.scss
+++ b/apps/web-giddh/src/app/import-excel/import-wizard/import-wizard.component.scss
@@ -1,6 +1,8 @@
-.steps_wizard {
+@import "../../../assets/css/color.scss";
+
+.steps-wizard {
     padding: 30px 70px;
-    background: #fff;
+    background: $white;
     text-align: center;
     display: flex;
     justify-content: space-between;
@@ -20,12 +22,12 @@
         > label {
             width: 30px;
             height: 30px;
-            border: 2px solid #dcdcdc;
+            border: 2px solid $gainsboro;
             border-radius: 100%;
             transition: background-color 1s;
-            background-color: #ffffff;
+            background-color: $white;
             position: relative;
-            color: #969696;
+            color: $opium;
             line-height: 100%;
             align-items: center;
             display: flex;
@@ -34,14 +36,14 @@
     }
 }
 
-.steps_wizard li.active > label {
-    color: #fff;
+.steps-wizard li.active > label {
+    color: $white;
 }
 
-.steps_wizard:before {
+.steps-wizard:before {
     content: " ";
     position: absolute;
-    border-top: 2px solid #ddd;
+    border-top: 2px solid $gainsboro;
     right: 0;
     left: 0;
     top: 40%;
diff --git a/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.html b/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.html
index d51fa83819d..7f5ca8ee4e0 100644
--- a/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.html
+++ b/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.html
@@ -1,7 +1,7 @@
 <!-- Map Field start-->
 <div class="row">
     <div class="col-lg-8 col-md-12">
-        <div class="mapFields">
+        <div class="map-fields">
 
             <div class="left-bar-width ">
                 <div class="row">
@@ -25,12 +25,12 @@
                 </div>
 
                 <div class="row mt-2 d-flex" *ngFor="let data of dataModel">
-                    <div class="col-12 col-md-4 col-lg-6 d-flex" style="align-items:center"><label>{{data.field.columnHeader}}</label>
+                    <div class="col-12 col-md-4 col-lg-6 d-flex align-items-center"><label>{{data.field.columnHeader}}</label>
                     </div>
 
                     <div class="col-12 col-md-5 col-lg-6">
 
-                        <sh-select [options]="data.options" class="pull-left mrR1 select-field-width" [placeholder]="'Select Field'"
+                        <sh-select [options]="data.options" class="pull-left mr-r1 select-field-width" [placeholder]="'Select Field'"
                             [(ngModel)]="data.selected" (selected)="columnSelected($event,data)"
                             (onClear)="clearSelected($event, data)" (previousChange)="clearSelected($event, data)"
                             [showClear]="true"></sh-select>
@@ -62,14 +62,13 @@
                     <span
                         [ngStyle]="{'color': mandatoryHeadersCount === mandatoryHeadersModel.length ? '#00b503' : '#adadad'}">
                         {{ mandatoryHeadersCount }}</span>/{{ mandatoryHeadersModel.length }} done.</span>
-                &nbsp;<span *ngIf="mandatoryHeadersCount === mandatoryHeadersModel.length"
-                    style="color: #00b503">Successful.</span>
+                &nbsp;<span *ngIf="mandatoryHeadersCount === mandatoryHeadersModel.length" class="success-label">Successful.</span>
             </p>
         </div>
 
         <div class="row mt-2 d-flex" *ngFor="let manField of mandatoryHeadersModel">
 
-            <div class="col-xs-8 col-sm-8"><label class="font-12px">{{ manField.field | titlecase}}</label></div>
+            <div class="col-xs-8 col-sm-8"><label class="font-12">{{ manField.field | titlecase}}</label></div>
 
             <div class="col-xs-4 col-sm-4">
                 <img src="{{imgPath}}checked.png" *ngIf="manField.selected" width="20" height="20" />
@@ -82,7 +81,7 @@
 
     <!-- group mapping -->
 
-    <div *ngIf="mandatoryGroupModel.length" style="margin-top: 50px">
+    <div *ngIf="mandatoryGroupModel.length" class="group-model">
 
         <div>
             <p>At least one field from each group should be selected to create <span
@@ -91,8 +90,7 @@
                     <span
                         [ngStyle]="{'color': mandatoryGroupHeadersCount === mandatoryGroupModel.length ? '#00b503' : '#adadad'}">{{ mandatoryGroupHeadersCount }}</span>/{{ mandatoryGroupModel.length }}
                     done.</span>
-                &nbsp;<span *ngIf="mandatoryGroupHeadersCount === mandatoryGroupModel.length"
-                    style="color: #00b503">Successful.</span>
+                &nbsp;<span *ngIf="mandatoryGroupHeadersCount === mandatoryGroupModel.length" class="success-label">Successful.</span>
             </p>
         </div>
 
@@ -100,7 +98,7 @@
 
             <div class="row d-flex inner-row" *ngFor="let g of grp">
 
-                <div class="col-xs-8 col-sm-8"><label class="font-12px">{{ g.field | titlecase}}</label></div>
+                <div class="col-xs-8 col-sm-8"><label class="font-12">{{ g.field | titlecase}}</label></div>
 
                 <div class="col-xs-4 col-sm-4">
                     <img src="{{imgPath}}checked.png" *ngIf="g.selected" width="20" height="20" />
diff --git a/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.scss b/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.scss
index 13290de426f..0971f1fa675 100644
--- a/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.scss
+++ b/apps/web-giddh/src/app/import-excel/map-excel-data/map-excel-data.component.scss
@@ -1,10 +1,12 @@
-.max500 {
+@import "../../../assets/css/color.scss";
+
+.max-width-500 {
     max-width: 500px;
 }
 .right-bar {
     position: absolute;
     top: -49px;
-    background-color: white;
+    background-color: $white;
     right: -15px;
     height: unset;
     width: 310px;
@@ -15,23 +17,23 @@
 input.green-checkbox[type="checkbox"]:after {
     left: -3px !important;
     border: 0px solid transparent !important;
-    background-color: #e6e6e6;
+    background-color: $whisper;
     border-radius: 27px !important;
 }
 input.green-checkbox[type="checkbox"]:before {
-    border: 2px solid #ffffff !important;
+    border: 2px solid $white !important;
     border-top-style: none !important;
     border-right-style: none !important;
     left: 0px !important;
 }
-.font-12px {
+.font-12 {
     font-size: 12px;
 }
 input.green-checkbox[type="checkbox"]:checked:after {
-    background-color: #2daa4a !important;
+    background-color: $success-green !important;
 }
 .group-card {
-    border: 1px solid #bdbdbd;
+    border: 1px solid $silver;
     padding: 0 13px;
     border-radius: 4px;
     margin: 15px 0;
@@ -45,6 +47,14 @@ input.green-checkbox[type="checkbox"]:checked:after {
     width: 100% !important;
 }
 
+.group-model{
+    margin-top: 50px;
+}
+
+.success-label{
+    color: $success-green !important;
+}
+
 @media (max-width: 1140px){
     .left-bar-width {
         width: 80%;
diff --git a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.html b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.html
index de14bef12ad..fa8590d62be 100644
--- a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.html
+++ b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.html
@@ -1,6 +1,6 @@
 <!-- upload And Map Content start-->
-<div class="uploadAndMapContent">
-    <h2 class="text-center" style="font-size: 32px"> Import {{ title | titlecase}}</h2>
+<div class="upload-and-map-content">
+    <h2 class="text-center"> Import {{ title | titlecase}}</h2>
     <div *ngIf="currentCompanyBranches?.length > 1 && entity === 'entries'" class="form-group max500 center-block">
         <!-- Currently only import entries is only visible for branch as API doesn't support permission.
         Import is only allowed for 'entries' and not for other options ('inventory', 'account', 'trial-balance', 'groups')
@@ -22,7 +22,7 @@ <h2 class="text-center" style="font-size: 32px"> Import {{ title | titlecase}}</
                                 </span>
                                 <span class="entity-details">
                                     <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                    <div class="item-unq giddh-limit single-line-clamp">
+                                    <div class="item-unique giddh-limit single-line-clamp">
                                         {{ option.name || '-' }}
                                     </div>
                                 </span>
@@ -33,21 +33,21 @@ <h2 class="text-center" style="font-size: 32px"> Import {{ title | titlecase}}</
             </div>
         </div>
     </div>
-    <div class="upload_excel max500 center-block box mr-t2 dashed_bdr">
+    <div class="upload-excel max-width-500 center-block box mr-t2 dashed-border">
         <input type="file" id="csvUploadInput" placeholder="Upload an EXCEL or CSV file"
             (change)="onFileChange($event.target.files)" droppable="true" class="form-control" />
-        <div class="clearfix pos-rel width100">
+        <div class="clearfix position-relative width-100">
             <div class="file-input-wrapper text-center">
                 <div class="clearfix mr-b2">
                     <img src="assets/images/new/import_icon.svg" [style.width.px]="100" />
-                    <!-- <i class="fa fa-upload upload_icon" aria-hidden="true"></i> -->
+                    <!-- <i class="fa fa-upload upload-icon" aria-hidden="true"></i> -->
                 </div>
-                <div class="clearfix pdR2 pdL2">
+                <div class="clearfix pd-r2 pd-l2">
                     <label class="clearfix text-light-2" style="font-size: 14px">Drop CSV or Excel file to
                         upload</label>
 
-                    <div class="mrT3">
-                        <label class="file-uplod-penal" for="csvUploadInput"> <span *ngIf="!selectedFileName">Browse
+                    <div class="mr-t3">
+                        <label class="file-upload-panel" for="csvUploadInput"> <span *ngIf="!selectedFileName">Browse
                                 file</span>
                             <span *ngIf="selectedFileName" class="select-file">{{selectedFileName}}</span> <span
                                 class="pull-right select-file"><i class="fa fa-check"
@@ -58,7 +58,7 @@ <h2 class="text-center" style="font-size: 32px"> Import {{ title | titlecase}}</
             </div>
         </div>
     </div>
-    <div class="max500 center-block mr-t clearfix">
+    <div class="max-width-500 center-block mr-t05 clearfix">
         <!-- <a  href="assets/sample-files/{{entity}}-sample.xlsx">Download a sample file</a> -->
 
         <button class="btn btn-sm btn-link" type="button" (click)="downloadSampleFile(entity)">Download a sample Excel
diff --git a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.scss b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.scss
index 67dcaac6c60..d10544239bf 100644
--- a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.scss
+++ b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.scss
@@ -1,5 +1,11 @@
 @import "../../../assets/css/color.scss";
-.upload_excel {
+.upload-and-map-content{
+    h2{
+        font-size: 32px;
+    }
+}
+
+.upload-excel {
     display: flex;
     height: 320px;
     position: relative;
@@ -10,22 +16,22 @@
 .center-block{
     margin: 0 auto;
 }
-.max500 {
+.max-width-500 {
     max-width: 500px;
 }
 
-.upload_icon {
+.upload-icon {
     font-size: 62px;
     float: none;
-    color: #e2e2e2;
+    color: $whisper-light;
 }
 
-.sample_file-btn {
+.sample-file-btn {
     z-index: 9;
     position: relative;
 }
 
-.dashed_bdr {
+.dashed-border {
     border: 2px dashed $gainsboro;
 }
 
@@ -45,7 +51,7 @@
     justify-content: flex-end;
     margin: 0 15px;
     border: 1px solid $gainsboro;
-    background: #fafafa;
+    background: $gray-95;
     padding: 15px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -65,7 +71,7 @@
 }
 
 .has-error .form-control {
-    border-color: red !important;
+    border-color: $red !important;
 }
 
 #csvUploadInput {
@@ -84,10 +90,10 @@
     top: 0;
     bottom: 0;
     z-index: 9;
-    background: #fff;
+    background: $white;
     text-align: left;
     position: absolute;
-    border: 1px solid #d6d6d6;
+    border: 1px solid $light-gray;
     border-radius: 2px !important;
     padding: 6px 12px !important;
     outline: 0;
@@ -96,9 +102,9 @@
     width: calc(100% - 95px);
 }
 .select-file {
-    color: #089328;
+    color: $light-green;
 }
-.file-uplod-penal {
+.file-upload-panel {
     width: 100%;
     text-align: left;
     border: 1px solid $gainsboro;
diff --git a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.ts b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.ts
index 15e9a340fd8..42c5af75617 100644
--- a/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.ts
+++ b/apps/web-giddh/src/app/import-excel/upload-file/upload-file.component.ts
@@ -120,7 +120,7 @@ export class UploadFileComponent implements OnInit, OnDestroy {
                     // opening the branch switcher would reset the current selected branch as this subscription is run everytime
                     // branches are loaded
                     this.currentBranch = _.cloneDeep(response.find(branch => branch.uniqueName === currentBranchUniqueName));
-                    this.currentBranch.name = this.currentBranch.name + (this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
+                    this.currentBranch.name = (this.currentBranch ? this.currentBranch.name : '') + (this.currentBranch.alias ? ` (${this.currentBranch.alias})` : '');
                 }
             } else {
                 if (this.generalService.companyUniqueName) {
diff --git a/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.html b/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.html
index 2baf6753821..a6340801617 100644
--- a/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.html
+++ b/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.html
@@ -1,7 +1,7 @@
-<div class="ImportedFileDesign">
-    <div class="ImportedFileDesign-box">
-        <i class="fa fa-exclamation-circle mr-3"></i>
-        <div class="ImportedFileDesign-content">
+<div class="imported-file-design">
+    <div class="imported-file-design-box">
+        <i class="fa fa-exclamation-circle mr-r3"></i>
+        <div class="imported-file-design-content">
             <div class="clearfix">
                 <h2 class="mt-0">{{UploadExceltableResponse.successCount}} out of {{UploadExceltableResponse.failureCount + UploadExceltableResponse.successCount}} {{selectedType}} {{isAre}} successfully imported. </h2>
                 <h3>Report of failed {{selectedType}} will be mailed shortly.</h3>
diff --git a/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.scss b/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.scss
index c8ec56fab90..a30b8d44432 100644
--- a/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.scss
+++ b/apps/web-giddh/src/app/import-excel/upload-success/upload-success.component.scss
@@ -1,32 +1,34 @@
-.ImportedFileDesign {
+@import "../../../assets/css/color.scss";
+
+.imported-file-design {
     height: calc(100vh - 200px);
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.ImportedFileDesign-box {
+.imported-file-design-box {
     display: flex;
     //align-items: center;
 }
 
-.ImportedFileDesign-box i {
+.imported-file-design-box i {
     font-size: 39px;
-    color: #bfbfbf;
+    color: $silver;
     float: left;
 }
 
-.ImportedFileDesign h2 {
+.imported-file-design h2 {
     font-size: 28px;
-    color: black;
+    color: $black;
     margin-bottom: 10px;
 }
 
-.ImportedFileDesign h3 {
+.imported-file-design h3 {
     font-size: 20px;
-    color: #797979;
+    color: $gray;
 }
 
-.ImportedFileDesign-content {
+.imported-file-design-content {
     float: right;
 }
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/forms/inventory-user/inventory-user.component.html b/apps/web-giddh/src/app/inventory-in-out/components/forms/inventory-user/inventory-user.component.html
index 240e87c1d07..9d447235c92 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/forms/inventory-user/inventory-user.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/forms/inventory-user/inventory-user.component.html
@@ -1,11 +1,11 @@
 <div class="form-header">
     <h2 class="">Create Account</h2>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" autocomplete="off" class="form-group">
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-6">
                     <label>Name</label>
                     <input type="text" formControlName="name" class="form-control" />
                 </div>
@@ -13,19 +13,19 @@ <h2 class="">Create Account</h2>
             </div>
 
             <div class="row">
-                <div class="col-xs-12 text-left mr-t1">
+                <div class="col-12 text-left mr-t1">
                     <button class="btn btn-default" (click)="onCancel.emit($event)">Cancel</button>
                     <button class="btn btn-success" [ladda]="isLoading" (click)="save()">Save</button>
                 </div>
             </div>
 
             <!-- <div class="row">
-  <div class="col-lg-3 form-group mrR1">
+  <div class="col-lg-3 form-group mr-r1">
     <label class="d-block">&nbsp;</label>
     <button class="btn btn-sm" (click)="onCancel.emit($event)">Cancel</button>
   </div>
 
-  <div class="col-lg-3 form-group mrR1">
+  <div class="col-lg-3 form-group mr-r1">
     <label class="d-block">&nbsp;</label>
     <button class="btn btn-success btn-sm" [ladda]="isLoading" (click)="save()">Save</button>
   </div>
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/forms/inward-note/inward-note.component.html b/apps/web-giddh/src/app/inventory-in-out/components/forms/inward-note/inward-note.component.html
index c0cc44d4b16..0fcbaff03e0 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/forms/inward-note/inward-note.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/forms/inward-note/inward-note.component.html
@@ -2,7 +2,7 @@
     <div>
         <h3 class="">
             <span>Inward Note</span>
-            <span class="pull-right fs14">Multiple
+            <span class="pull-right font-14">Multiple
                 <a href="javascript:void(0)" [ngClass]="{'text-link': mode === 'sender' }"
                     (click)="modeChanged('sender')">Senders</a>
                 /
@@ -13,8 +13,8 @@ <h3 class="">
 
     </div>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" class="form-group">
             <div class="row">
                 <div class="col-xs-6 form-group">
@@ -42,7 +42,7 @@ <h3 class="">
                 <div class="col-xs-6 form-group" *ngIf="mode === 'product'">
                     <label>Sender <sup>*</sup></label>
                     <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Sender'"
-                        formControlName="inventoryUser" (selected)="userChanged($event)"></sh-select>
+                        formControlName="inventoryUser" (selected)="userChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="inventoryUser.invalid">
               <span *ngIf="inventoryUser?.errors && inventoryUser?.errors['required']"
                     class="text-danger">Please select Sender.</span>
@@ -53,18 +53,18 @@ <h3 class="">
 
             <div class="row">
                 <div class="col-xs-4" *ngIf="mode === 'sender'">
-                    <label class="fs14">Sender <sup>*</sup></label>
+                    <label class="font-14">Sender <sup>*</sup></label>
                 </div>
                 <div class="col-xs-4" *ngIf="mode === 'product'">
-                    <label class="fs14">Product Name <sup>*</sup></label>
+                    <label class="font-14">Product Name <sup>*</sup></label>
                 </div>
 
                 <div class="col-xs-4">
-                    <label class="fs14">Unit<sup>*</sup></label>
+                    <label class="font-14">Unit<sup>*</sup></label>
                 </div>
 
                 <div class="col-xs-4">
-                    <label class="fs14">Quantity <sup>*</sup></label>
+                    <label class="font-14">Quantity <sup>*</sup></label>
                 </div>
             </div>
 
@@ -84,13 +84,13 @@ <h3 class="">
                     <div class="col-xs-4 form-group" *ngIf="mode === 'product'">
                         <!-- <label class="mr-b1">Product Name</label> -->
                         <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stock')?.errors?.required" class="text-danger">Please select Product.</span> -->
                     </div>
 
                     <div class="col-xs-4 form-group">
                         <sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'"
-                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33"></sh-select>
+                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stockUnit')?.errors?.required" class="text-danger">Please select Unit.</span> -->
                     </div>
 
@@ -102,13 +102,13 @@ <h3 class="">
                             </div>
 
 
-                            <div class="pull-right mr-t unit_add">
+                            <div class="pull-right mr-t05 unit-add">
                                 <button class="btn-link" (click)="addTransactionItem(transactions.controls[i])"
                                     *ngIf="last">
-                                    <i class="icon-plus add_row"></i>
+                                    <i class="icon-plus add-row"></i>
                                 </button>
                                 <button class="btn-link" (click)="deleteTransactionItem(i)" *ngIf="!last">
-                                    <i class="icon-cross dlet"></i>
+                                    <i class="icon-cross delete"></i>
                                 </button>
                             </div>
                         </div>
@@ -121,7 +121,7 @@ <h3 class="">
             <ng-container *ngIf="mode === 'sender'">
                 <div class="row">
 
-                    <div class="mr-t1 pdL pdR">
+                    <div class="mr-t1 pd-l05 pd-r05">
                         <div class="col-xs-12">
                             <div class="checkbox">
                                 <label class="" for="isManufactured">
@@ -137,17 +137,17 @@ <h3 class="">
 
                     <section class="col-xs-12" *ngIf="form.value.isManufactured">
                         <div class="">
-                            <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made with)</strong>
+                            <h1 class="section-head bd-rb"><strong>{{form.controls['stock'].value}} (Made with)</strong>
                             </h1>
 
                             <div formGroupName="manufacturingDetails">
 
                                 <div class="row" style="padding-top: 5px">
                                     <div class="col-xs-4">
-                                        <label class="fs14">Output Qty <sup>*</sup></label>
+                                        <label class="font-14">Output Qty <sup>*</sup></label>
                                     </div>
                                     <div class="col-xs-5">
-                                        <label class="fs14">Stock Unit <sup>*</sup></label>
+                                        <label class="font-14">Stock Unit <sup>*</sup></label>
                                     </div>
                                 </div>
 
@@ -160,7 +160,7 @@ <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made wit
 
                                     <div class="col-xs-5 form-group">
                                         <sh-select [options]="stockUnitsOptions" formControlName="manufacturingUnitCode"
-                                            [placeholder]="'Select Unit'" [multiple]="false" [ItemHeight]="33"></sh-select>
+                                            [placeholder]="'Select Unit'" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                                     </div>
 
                                     <div class="col-xs-3" style="display: flex;align-items: center;height: 30px"
@@ -205,12 +205,12 @@ <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made wit
                                                 [multiple]="false" [placeholder]="'Select Unit'" [ItemHeight]="33">
                                             </sh-select>
                                         </div>
-                                        <div class="pull-right mr-t unit_add">
+                                        <div class="pull-right mr-t05 unit-add">
                                             <button class="btn-link" (click)="addItemInLinkedStocks(list, i, i)"
                                                 *ngIf="l" [disabled]="disableStockButton"><i
-                                                    class="icon-plus add_row"></i></button>
+                                                    class="icon-plus add-row"></i></button>
                                             <button class="btn-link" (click)="removeItemInLinkedStocks(i)" *ngIf="!l"><i
-                                                    class="icon-cross dlet"></i></button>
+                                                    class="icon-cross delete"></i></button>
                                         </div>
 
 
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/forms/outward-note/outward-note.component.html b/apps/web-giddh/src/app/inventory-in-out/components/forms/outward-note/outward-note.component.html
index e9bd8189023..c29a0aa80c9 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/forms/outward-note/outward-note.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/forms/outward-note/outward-note.component.html
@@ -2,7 +2,7 @@
     <div>
         <h3 class="">
             <span>Outward Note</span>
-            <span class="pull-right fs14">Multiple
+            <span class="pull-right font-14">Multiple
                 <a href="javascript:void(0)" [ngClass]="{'text-link': mode === 'receiver' }"
                     (click)="modeChanged('receiver')">Receivers</a>
                 /
@@ -14,8 +14,8 @@ <h3 class="">
     </div>
 </div>
 
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" class="form-group">
             <div class="row">
                 <div class="col-xs-6 form-group">
@@ -33,7 +33,7 @@ <h3 class="">
                 <div class="col-xs-6 form-group" *ngIf="mode === 'receiver'">
                     <label class="mr-b1">Product Name <sup>*</sup></label>
                     <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                        formControlName="stock" (selected)="stockChanged($event)"></sh-select>
+                        formControlName="stock" (selected)="stockChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="stock.invalid">
               <span *ngIf="stock?.errors && stock?.errors['required']" class="text-danger">Please select Product.</span>
                     </span> -->
@@ -42,7 +42,7 @@ <h3 class="">
                 <div class="col-xs-6 form-group" *ngIf="mode === 'product'">
                     <label class="mr-b1">Receiver <sup>*</sup></label>
                     <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Receiver'"
-                        formControlName="inventoryUser" (selected)="userChanged($event)"></sh-select>
+                        formControlName="inventoryUser" (selected)="userChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="inventoryUser.invalid">
               <span *ngIf="inventoryUser?.errors && inventoryUser?.errors['required']"
                     class="text-danger">Please select Receiver.</span>
@@ -54,18 +54,18 @@ <h3 class="">
 
             <div class="row">
                 <div class="col-xs-4" *ngIf="mode === 'receiver'">
-                    <label class="fs14">Receiver <sup>*</sup></label>
+                    <label class="font-14">Receiver <sup>*</sup></label>
                 </div>
                 <div class="col-xs-4" *ngIf="mode === 'product'">
-                    <label class="fs14">Product Name <sup>*</sup></label>
+                    <label class="font-14">Product Name <sup>*</sup></label>
                 </div>
 
                 <div class="col-xs-4">
-                    <label class="fs14">Unit<sup>*</sup></label>
+                    <label class="font-14">Unit<sup>*</sup></label>
                 </div>
 
                 <div class="col-xs-4">
-                    <label class="fs14">Quantity <sup>*</sup></label>
+                    <label class="font-14">Quantity <sup>*</sup></label>
                 </div>
             </div>
 
@@ -85,14 +85,14 @@ <h3 class="">
                     <div class="col-xs-4 form-group" *ngIf="mode === 'product'">
                         <!-- <label class="mr-b1">Product Name</label> -->
                         <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.controls['stock'].errors?.required"
                   class="text-danger">Please select Product.</span> -->
                     </div>
 
                     <div class="col-xs-4 form-group">
                         <sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'"
-                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33"></sh-select>
+                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stockUnit')?.errors?.required" class="text-danger">Please select Unit.</span> -->
                     </div>
 
@@ -105,13 +105,13 @@ <h3 class="">
                             </div>
 
 
-                            <div class="pull-right mr-t unit_add">
+                            <div class="pull-right mr-t05 unit-add">
                                 <button class="btn-link" (click)="addTransactionItem(transactions.controls[i])"
                                     *ngIf="last">
-                                    <i class="icon-plus add_row"></i>
+                                    <i class="icon-plus add-row"></i>
                                 </button>
                                 <button class="btn-link" (click)="deleteTransactionItem(i)" *ngIf="!last">
-                                    <i class="icon-cross dlet"></i>
+                                    <i class="icon-cross delete"></i>
                                 </button>
                             </div>
                         </div>
@@ -123,7 +123,7 @@ <h3 class="">
   <span [hidden]="!item.controls['quantity'].errors?.required" class="text-danger">Please enter quantity.</span>
 </div> -->
                     </div>
-                    <!-- <div class="col-lg-2 form-group pdT2">
+                    <!-- <div class="col-lg-2 form-group pd-t2">
   <a (click)="addTransactionItem()">
     <i class="icon-plus" *ngIf="first || !last"></i>
   </a>
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/forms/transfer-note/transfer-note.component.html b/apps/web-giddh/src/app/inventory-in-out/components/forms/transfer-note/transfer-note.component.html
index a8d6be7ccd1..d4ab47f67eb 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/forms/transfer-note/transfer-note.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/forms/transfer-note/transfer-note.component.html
@@ -1,8 +1,8 @@
 <div class="form-header">
     <h2 class="">Transfer Note</h2>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" class="form-group">
             <div class="row">
                 <div class="col-xs-6 form-group">
@@ -20,7 +20,7 @@ <h2 class="">Transfer Note</h2>
                 <div class="col-xs-6 form-group">
                     <label>Product Name <sup>*</sup></label>
                     <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                        (selected)="stockChanged($event)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+                        (selected)="stockChanged($event)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="stock.invalid">
               <span *ngIf="stock?.errors && stock?.errors['required']" class="text-danger">Please select Product.</span>
                     </span> -->
@@ -42,7 +42,7 @@ <h2 class="">Transfer Note</h2>
                 <div class="col-xs-6 form-group">
                     <label>Receiver's Name <sup>*</sup></label>
                     <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Receiver'"
-                        (selected)="recieverUniqueName = $event.value" [ItemHeight]="'33'"></sh-select>
+                        (selected)="recieverUniqueName = $event.value" [ItemHeight]="'33'" [isRequired]="true"></sh-select>
                     <!-- <span [hidden]="recieverUniqueName" class="text-danger">Please select Receiver.</span> -->
                 </div>
             </div>
@@ -60,7 +60,7 @@ <h2 class="">Transfer Note</h2>
                 <div class="col-xs-6 form-group">
                     <label>Unit <sup>*</sup></label>
                     <sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'" formControlName="stockUnit"
-                        [multiple]="false" [ItemHeight]="33"></sh-select>
+                        [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="stockUnit?.errors && stockUnit.errors['required']" class="text-danger">Please select Unit.</span> -->
                 </div>
 
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.html b/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.html
index 5b5b6da6b8d..93fd663a8f7 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.html
@@ -1,5 +1,5 @@
 <section class="h100">
-    <form class="fb__1-container mr-b1" name="groupReportForm" novalidate (ngSubmit)="applyFilters(1)" #f="ngForm">
+    <form class="fb-1-container mr-b1" name="groupReportForm" novalidate (ngSubmit)="applyFilters(1)" #f="ngForm">
         <div class="form-group">
             <!-- <label class="d-block">From - To</label> -->
             <input type="text" name="daterangeInput" daterangepicker [options]="datePickerOptions"
@@ -30,28 +30,28 @@
         </div>
     </form>
 
-    <section style="margin-top: 20px">
+    <section class="mr-t2">
         <table class="table basic">
             <thead>
                 <tr>
-                    <th class="bdrR">Date</th>
-                    <th class="bdrR bdrB">Product Name</th>
-                    <th class="bdrR bdrB">Sender's Name</th>
-                    <th class="bdrR bdrB">Receiver's Name</th>
-                    <th class="bdrR bdrB">Qty</th>
-                    <th class="bdrR bdrB">Description</th>
-                    <th class="bdrR bdrB" *ngIf="type ==='stock'">Closing Balance</th>
+                    <th class="bd-rr">Date</th>
+                    <th class="bd-rr bd-rb">Product Name</th>
+                    <th class="bd-rr bd-rb">Sender's Name</th>
+                    <th class="bd-rr bd-rb">Receiver's Name</th>
+                    <th class="bd-rr bd-rb">Qty</th>
+                    <th class="bd-rr bd-rb">Description</th>
+                    <th class="bd-rr bd-rb" *ngIf="type ==='stock'">Closing Balance</th>
                 </tr>
             </thead>
             <tbody *ngIf="inventoryReport">
                 <tr *ngFor="let txn of inventoryReport.transactions">
-                    <td class="bdrR">{{txn.date}}</td>
-                    <td class="bdrR">{{txn.stock.name}}</td>
-                    <td class="bdrR">{{txn.sender.name}}</td>
-                    <td class="bdrR">{{txn.receiver.name}}</td>
-                    <td class="bdrR">{{txn.quantity}}</td>
-                    <td class="bdrR">{{txn.description}}</td>
-                    <td class="bdrR" *ngIf="type ==='stock'">{{txn.closingQuantity}}</td>
+                    <td class="bd-rr">{{txn.date}}</td>
+                    <td class="bd-rr">{{txn.stock.name}}</td>
+                    <td class="bd-rr">{{txn.sender.name}}</td>
+                    <td class="bd-rr">{{txn.receiver.name}}</td>
+                    <td class="bd-rr">{{txn.quantity}}</td>
+                    <td class="bd-rr">{{txn.description}}</td>
+                    <td class="bd-rr" *ngIf="type ==='stock'">{{txn.closingQuantity}}</td>
                 </tr>
             </tbody>
             <tbody *ngIf="!inventoryReport">
@@ -64,7 +64,7 @@ <h1>No Report Found !!</h1>
             <tfoot>
                 <tr>
                     <td colspan="100%">
-                        <div class="alC" *ngIf="inventoryReport?.totalPages > 1">
+                        <div class="text-center" *ngIf="inventoryReport?.totalPages > 1">
                             <pagination [maxSize]="5" [totalItems]="inventoryReport.totalItems" [itemsPerPage]="10"
                                 (pageChanged)="applyFilters($event.page)" class="pagination-sm" [boundaryLinks]="true"
                                 [rotate]="false"></pagination>
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.scss b/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.scss
index be5400114ba..251bb51ac5c 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.scss
+++ b/apps/web-giddh/src/app/inventory-in-out/components/inventory-in-out-report/inventory-in-out-report.component.scss
@@ -1,18 +1,18 @@
 @import "../../../../assets/css/color.scss";
 
-.bdrT {
+.bd-rt {
     border-color: $very-light-gray;
 }
 
-:host ::ng-deep .fb__1-container {
+:host ::ng-deep .fb-1-container {
     justify-content: flex-start;
 }
 
-:host ::ng-deep .fb__1-container .form-group {
+:host ::ng-deep .fb-1-container .form-group {
     margin-right: 10px;
     margin-bottom: 0;
 }
 
-:host ::ng-deep .fb__1-container .date-range-picker {
+:host ::ng-deep .fb-1-container .date-range-picker {
     min-width: 150px;
 }
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/inventory.sidebar.component.html b/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/inventory.sidebar.component.html
index 0e72c7285e2..b50fa44ac4f 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/inventory.sidebar.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/inventory.sidebar.component.html
@@ -1,6 +1,6 @@
 <section id="inventory-sidebar" class="sidebar pull-left" #sidebar>
     <div class="h100 clearfix">
-        <div class="width100 pd-1 pdT0">
+        <div class="width-100 pd-1 pt-0">
             <input class="form-control" type="search" placeholder="Search Stock" #search>
         </div>
         <div id="setting-tab">
diff --git a/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/person-list.component.ts b/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/person-list.component.ts
index ffa2d8c1c31..7601c5c57db 100644
--- a/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/person-list.component.ts
+++ b/apps/web-giddh/src/app/inventory-in-out/components/sidebar-components/person-list.component.ts
@@ -20,11 +20,11 @@ import { InventoryUser } from '../../../models/api-models/Inventory-in-out';
       outline: 0;
     }
 
-    .grp_open {
+    .group-open {
       background: rgb(255, 255, 255);
     }
 
-    .grp_open li {
+    .group-open li {
       border: 0;
     }
 
@@ -36,7 +36,7 @@ import { InventoryUser } from '../../../models/api-models/Inventory-in-out';
     template: `
     <ul class="list-unstyled stock-grp-list clearfix" *ngIf="personList">
       <li routerLinkActive="active" *ngFor="let p of personList"><a [routerLink]="['/pages','inventory-in-out','person',p.uniqueName]"> {{p.name}}</a></li>
-      <!-- <li class="clearfix" [ngClass]="{'isGrp': grp.childStockGroups.length > 0,'grp_open': grp.isOpen}" *ngFor="let grp of Groups">
+      <!-- <li class="clearfix" [ngClass]="{'isGrp': grp.childStockGroups.length > 0,'group-open': grp.isOpen}" *ngFor="let grp of Groups">
          <a (click)="OpenGroup(grp,$event)" class="pull-left" [routerLink]="[ 'group', grp.uniqueName, 'stock-report' ]">
            <div [ngClass]="{'active': (activeGroupUniqueName$ | async) === grp.uniqueName}">{{grp.name}}</div>
          </a>
diff --git a/apps/web-giddh/src/app/inventory-in-out/inventory-in-out.component.html b/apps/web-giddh/src/app/inventory-in-out/inventory-in-out.component.html
index 67e1c7ce27d..db8effb0bc1 100644
--- a/apps/web-giddh/src/app/inventory-in-out/inventory-in-out.component.html
+++ b/apps/web-giddh/src/app/inventory-in-out/inventory-in-out.component.html
@@ -1,11 +1,11 @@
-<div style="min-height:100%;">
-    <!-- <div class=" col-xs-9 clearfix bdrB">
+<div class="height100">
+    <!-- <div class=" col-xs-9 clearfix bd-rb">
   </div> -->
     <!--sidebar-->
     <invetory-sidebar></invetory-sidebar>
     <!--/sidebar-->
     <section class="right-bar ng-scope">
-        <section class="container-fluid clearfix bdrB">
+        <section class="container-fluid clearfix bd-rb">
             <div class="top-bar clearfix">
                 <h1 class="section-title inline">
                     <strong>Transaction Log</strong></h1>
@@ -15,7 +15,7 @@ <h1 class="section-title inline">
             </div>
         </section>
         <!-- uiView: inventory-detail -->
-        <section class="container-fluid  clearfix pdT2">
+        <section class="container-fluid clearfix pd-t2">
             <router-outlet></router-outlet>
         </section>
     </section>
diff --git a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.html b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.html
index 354a0e86efd..a818a837034 100644
--- a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.html
+++ b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.html
@@ -9,8 +9,8 @@ <h3 *ngIf="!addGroup">Update Group</h3>
 
 			<div>
 				<div class="aside-pane-form col-sm-12 col-md-12 col-lg-12 col-xs-12">
-					<form name="updateStockGroup" class="form_body" [formGroup]="addGroupForm" novalidate="">
-						<div class="form_bg clearfix">
+					<form name="updateStockGroup" class="form-body" [formGroup]="addGroupForm" novalidate="">
+						<div class="clearfix">
 							<div class="row">
 								<div class="form-group col-xs-6 col-sm-6">
 									<label>Name <sup>*</sup></label>
@@ -52,7 +52,7 @@ <h3 *ngIf="!addGroup">Update Group</h3>
 											[disabled]="!addGroupForm.get('isSubGroup').value"
 											[placeholder]="'Select Parent Group'" [multiple]="false"
 											(selected)="groupSelected($event)" [ItemHeight]="33"
-											[forceClearReactive]="forceClear$ | async"></sh-select>
+											[forceClearReactive]="forceClear$ | async" [isRequired]="true"></sh-select>
 									</div>
 								</div>
 							</div>
diff --git a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.scss b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.scss
index 5794bd93240..6905ddbef8d 100644
--- a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.scss
@@ -1,18 +1,19 @@
+@import "../../../../assets/css/color.scss";
 #close {
     position: absolute;
     left: auto;
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
     border: 0;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.ts b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.ts
index 4148dc8ff3c..019774bd9f3 100644
--- a/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.ts
+++ b/apps/web-giddh/src/app/inventory/components/add-group-components/inventory.addgroup.component.ts
@@ -251,7 +251,9 @@ export class InventoryAddGroupComponent implements OnInit, OnDestroy, AfterViewI
     public addNewGroup() {
         let stockRequest = new StockGroupRequest();
         let uniqueNameField = this.addGroupForm.get('uniqueName');
-        uniqueNameField.patchValue(uniqueNameField.value.replace(/ /g, '').toLowerCase());
+        if(uniqueNameField && uniqueNameField.value) {
+            uniqueNameField.patchValue(uniqueNameField.value.replace(/ /g, '').toLowerCase());
+        }
         stockRequest = this.addGroupForm.value as StockGroupRequest;
         if (this.addGroupForm.value.isSubGroup && this.selectedGroup) {
             stockRequest.parentStockGroupUniqueName = this.selectedGroup.value;
@@ -272,7 +274,9 @@ export class InventoryAddGroupComponent implements OnInit, OnDestroy, AfterViewI
         let uniqueNameField = this.addGroupForm.get('uniqueName');
 
         this.activeGroup$.pipe(take(1)).subscribe(a => activeGroup = a);
-        uniqueNameField.patchValue(uniqueNameField.value.replace(/ /g, '').toLowerCase());
+        if(uniqueNameField && uniqueNameField.value) {
+            uniqueNameField.patchValue(uniqueNameField.value.replace(/ /g, '').toLowerCase());
+        }
 
         stockRequest = this.addGroupForm.value as StockGroupRequest;
         if (this.addGroupForm.value.isSubGroup) {
diff --git a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.html b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.html
index accde7aed42..6d968ef33b7 100644
--- a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.html
+++ b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.html
@@ -10,7 +10,7 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
 
             <div class="aside-body">
                 <section class="aside-pane-form clearfix margin-child-label">
-                    <div class="form_bg clearfix">
+                    <div class="clearfix">
                         <div class="row">
                             <div class="form-group col-sm-5 col-12">
                                 <label>Under Group</label>
@@ -32,13 +32,13 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                             </div>
                             <div class="form-group col-sm-5 col-12">
                                 <label>Stock Unit <sup>*</sup></label>
-                                <sh-select [options]="stockUnitsDropDown$ | async" formControlName="stockUnitCode" [placeholder]="'Choose a parent unit'" [multiple]="false" [ItemHeight]="33" [forceClearReactive]="forceClear$ | async"></sh-select>
+                                <sh-select [options]="stockUnitsDropDown$ | async" formControlName="stockUnitCode" [placeholder]="'Choose a parent unit'" [multiple]="false" [ItemHeight]="33" [forceClearReactive]="forceClear$ | async" [isRequired]="true"></sh-select>
                             </div>
                         </div>
                         <!-- other details -->
                         <div class="row">
                             <div class="col-12 col-sm-12">
-                                <div class="form-group toggle-btn mrB" (click)="showOtherDetails = !showOtherDetails">
+                                <div class="form-group toggle-btn mr-b05" (click)="showOtherDetails = !showOtherDetails">
                                     <label class="cp">
                                         <i class="cp collapse-icons" aria-hidden="true"
                                             [ngClass]="{'icon-minus': showOtherDetails, 'icon-plus': !showOtherDetails}"></i>Other
@@ -225,10 +225,10 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                                         <div class="form-group row col-4 col-sm-4">
                                             <input type="text" class="form-control" decimalDigitsDirective [DecimalPlaces]="4" formControlName="rate" />
                                         </div>
-                                        <div class="pull-right unit_add">
-                                            <button class="btn-link btn mr-0" (click)="addPurchaseUnitRates(i)" *ngIf="l"><i class="icon-plus add_row"></i></button>
+                                        <div class="pull-right unit-add">
+                                            <button class="btn-link btn mr-0" (click)="addPurchaseUnitRates(i)" *ngIf="l"><i class="icon-plus add-row"></i></button>
                                             <button class="btn-link btn" (click)="removePurchaseUnitRates(i)" *ngIf="!l"><i
-                                                    class="icon-cross dlet"></i></button>
+                                                    class="icon-cross delete"></i></button>
                                         </div>
                                     </div>
                                 </div>
@@ -268,9 +268,9 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                                         <div class="form-group row col-4 col-sm-4">
                                             <input type="text" class="form-control" decimalDigitsDirective [DecimalPlaces]="4" formControlName="rate" />
                                         </div>
-                                        <div class="pull-right unit_add">
-                                            <button class="btn-link btn mr-0" (click)="addSaleUnitRates(i)" *ngIf="l"><i class="icon-plus add_row"></i></button>
-                                            <button class="btn-link btn" (click)="removeSaleUnitRates(i)" *ngIf="!l"><i class="icon-cross dlet"></i></button>
+                                        <div class="pull-right unit-add">
+                                            <button class="btn-link btn mr-0" (click)="addSaleUnitRates(i)" *ngIf="l"><i class="icon-plus add-row"></i></button>
+                                            <button class="btn-link btn" (click)="removeSaleUnitRates(i)" *ngIf="!l"><i class="icon-cross delete"></i></button>
                                         </div>
                                     </div>
                                 </div>
@@ -278,7 +278,7 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
 
                         </div>
                     </div>
-                    <div class="row pdL pdR">
+                    <div class="row pd-l05 pd-r05">
                         <div class="col-12 col-sm-12">
                             <div class="checkbox">
                                 <label class="" for="isFsStock">
@@ -290,13 +290,13 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                     </div>
 
 
-                    <section class="mr-t2 row mrB3 col-12 col-sm-12" *ngIf="addStockForm.value.isFsStock">
-                        <div class="pdL pdR">
-                            <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (Made
+                    <section class="mr-t2 row mr-b3 col-12 col-sm-12" *ngIf="addStockForm.value.isFsStock">
+                        <div class="pd-l05 pd-r05">
+                            <h1 class="section-head bd-rb"><strong>{{addStockForm.controls['name'].value}} (Made
                                     with)</strong></h1>
-                            <table class="noHover  width100">
+                            <table class="no-hover width-100">
                                 <tbody formGroupName="manufacturingDetails">
-                                    <tr class="output_row">
+                                    <tr class="output-row">
                                         <td class="form-group">
                                             <label>Output Qty <sup>*</sup></label>
                                             <input type="text" class="form-control" decimalDigitsDirective [DecimalPlaces]="4" name="manufacturingQuantity" placeholder="Quantity" formControlName="manufacturingQuantity" />
@@ -307,14 +307,14 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
                                         </td>
                                         <td *ngIf="addStockForm.controls['manufacturingDetails'].controls['manufacturingQuantity'].value" colspan="2">
                                             <label class="d-block">&nbsp;</label>
-                                            <span class="width100"><strong>= (
+                                            <span class="width-100"><strong>= (
                                                     {{addStockForm.controls['manufacturingDetails'].controls['manufacturingQuantity'].value}}
                                                     {{addStockForm.controls['manufacturingDetails'].controls['manufacturingUnitCode'].value}}
                                                     {{addStockForm.controls['name'].value}} )</strong></span>
                                         </td>
                                         <!-- <td colspan="1">&nbsp;</td> -->
                                     </tr>
-                                    <tr class="noHover  table_label" style="border-color:#ccc;">
+                                    <tr class="no-hover table-label">
                                         <td [style.width.px]="200"><strong>Input Stock Name</strong></td>
                                         <td><strong>Stock Qty</strong></td>
                                         <td><strong>Stock Unit</strong></td>
@@ -324,22 +324,22 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
                                     <ng-container formArrayName="linkedStocks">
                                         <tr *ngFor="let list of addStockForm.get('manufacturingDetails')['controls']['linkedStocks'].controls;let i = index; let l = last" [formGroupName]="i" class="fsstock">
                                             <td>
-                                                <label class="inputLabelStock">Input Stock Name</label>
+                                                <label class="input-label-stock">Input Stock Name</label>
                                                 <sh-select [options]="stockListDropDown$ | async" formControlName="stockUniqueName" [multiple]="false" [placeholder]="'Select Stock Name'" [placeholder]="'Select Stock'" [ItemHeight]="33" (selected)="findAddedStock($event?.value, i)" [forceClearReactive]="forceClearStock$ | async"></sh-select>
                                             </td>
 
                                             <td>
-                                                <label class="inputLabelStock">Stock Qty</label>
+                                                <label class="input-label-stock">Stock Qty</label>
                                                 <input type="text" formControlName="quantity" decimalDigitsDirective [DecimalPlaces]="4" name="quantity" placeholder="Enter Quantity" class="form-control" />
                                             </td>
                                             <td>
-                                                <label class="inputLabelStock">Stock Unit</label>
+                                                <label class="input-label-stock">Stock Unit</label>
                                                 <sh-select [options]="stockUnitsDropDown$ | async" formControlName="stockUnitCode" [multiple]="false" [placeholder]="'Select Unit'" [ItemHeight]="33" [forceClearReactive]="forceClearStockUnit$ | async"></sh-select>
                                             </td>
                                             <td>
                                                 <button class="btn-link btn" (click)="addItemInLinkedStocks(list, i, i)" *ngIf="l" [disabled]="disableStockButton"><i
-                                                        class="icon-plus add_row"></i></button>
-                                                <button class="btn-link btn" (click)="removeItemInLinkedStocks(i)" *ngIf="!l"><i class="icon-cross dlet"></i></button>
+                                                        class="icon-plus add-row"></i></button>
+                                                <button class="btn-link btn" (click)="removeItemInLinkedStocks(i)" *ngIf="!l"><i class="icon-cross delete"></i></button>
                                             </td>
                                         </tr>
                                     </ng-container>
@@ -350,7 +350,7 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
 
                     <div class="row">
                         <div class="col-12 col-sm-12 text-left">
-                            <div class="mt-5 pdL pdR">
+                            <div class="mt-5 pd-l05 pd-r05">
 
                                 <button type="submit" *ngIf="!isUpdatingStockForm" [ladda]="isStockAddInProcess$ | async" (click)="submit()" class="btn btn-success" [disabled]="addStockForm.invalid || disableStockButton">Save
                                 </button>
diff --git a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.scss b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.scss
index 436e57cce0d..381646c5b92 100644
--- a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.scss
@@ -1,5 +1,5 @@
 @import "../../../../assets/css/color.scss";
-.output_row > td {
+.output-row > td {
     padding: 12px 10px 12px 0 !important;
 }
 
@@ -7,10 +7,13 @@
     padding: 2px 10px 2px 0;
 }
 
-.table_label td {
-    padding-top: 12px !important;
-    padding-bottom: 5px;
-}
+.table-label{
+    border-color: $gainsboro;
+    td {
+        padding-top: 12px !important;
+        padding-bottom: 5px;
+    }
+} 
 
 .dropdown-menu {
     max-height: 168px;
@@ -25,7 +28,7 @@
         background: none;
         border: none;
         max-width: 108px;
-        border-bottom: 1px solid #dddddd;
+        border-bottom: 1px solid $gainsboro;
     }
     .item-label {
         display: inline-block;
@@ -39,16 +42,16 @@
     i {
         margin-left: 10px;
         padding-bottom: 3px;
-        border-bottom: 1px solid #dddddd;
+        border-bottom: 1px solid $gainsboro;
     }
     .new-custom-btn {
         font-size: 12px;
-        color: #2262d1;
+        color: $primary;
         padding-top: 30px;
         cursor: pointer;
     }
     .text-danger {
-        color: #f80606;
+        color: $red;
     }
 }
 
@@ -61,13 +64,13 @@
 tr.fsstock td {
     padding-bottom: 15px;
 }
-.table_label strong {
+.table-label strong {
     color: $charcoal;
     font-weight: normal !important;
     font-size: 14px;
     font-family: "opensans-regular";
 }
-.inputLabelStock {
+.input-label-stock {
     display: none;
 }
 
@@ -77,15 +80,15 @@ tr.fsstock td {
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
     border: 0;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -101,15 +104,15 @@ tr.fsstock td {
     top: 0 !important;
 }
 @media (max-width: 767px) {
-    section.form_body table.noHover td {
+    section.form-body table.no-hover td {
         width: 100%;
         display: block;
         margin-bottom: 0;
     }
-    tr.noHover.table_label {
+    tr.no-hover.table-label {
         display: none;
     }
-    .inputLabelStock {
+    .input-label-stock {
         display: block;
     }
 }
diff --git a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.ts b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.ts
index 20a7338f12d..c3e88831428 100644
--- a/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.ts
+++ b/apps/web-giddh/src/app/inventory/components/add-stock-components/inventory.addstock.component.ts
@@ -757,7 +757,7 @@ export class InventoryAddStockComponent implements OnInit, AfterViewInit, OnDest
     public submit() {
         let stockObj = new CreateStockRequest();
         let uniqueName = this.addStockForm.get('uniqueName');
-        if (uniqueName.value) {
+        if (uniqueName && uniqueName.value) {
             uniqueName.patchValue(uniqueName.value.replace(/ /g, '').toLowerCase());
         }
         this.addStockForm.get('uniqueName').enable();
@@ -867,7 +867,7 @@ export class InventoryAddStockComponent implements OnInit, AfterViewInit, OnDest
     public update() {
         let stockObj = new CreateStockRequest();
         let uniqueName = this.addStockForm.get('uniqueName');
-        if (uniqueName.value) {
+        if (uniqueName && uniqueName.value) {
             uniqueName.patchValue(uniqueName.value.replace(/ /g, '').toLowerCase());
         }
         this.addStockForm.get('uniqueName').enable();
diff --git a/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.html b/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.html
index 5d3ab47bfe6..12cd592b10f 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.html
+++ b/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.html
@@ -9,7 +9,7 @@ <h3>
                     </h3>
                 </div>
             </div>
-            <div class="form_body witBg clearfix margin-child-label">
+            <div class="form-body white-bg clearfix margin-child-label">
                 <div class="branch-transfer">
                     <button class="btn btn-light-gray" (click)="openBranchTransferPopup('receiptnote')">Receipt
                         Note</button>
diff --git a/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.scss b/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.scss
index caba614a245..03e8b373d83 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/aside-branch-transfer-pane/aside-branch-transfer-pane.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/css/color.scss';
+
 :host.in {
     left: auto;
     top: 0;
@@ -23,7 +25,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -39,7 +41,7 @@
 :host .aside-pane {
     width: 100%;
     max-width: 760px;
-    background: #fff;
+    background: $white;
     width: 100%;
     padding: 0px;
 }
@@ -55,7 +57,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle {
     position: absolute;
     top: 50%;
     bottom: 0;
@@ -78,31 +80,31 @@
     border-radius: 0;
     right: 58px;
     background-color: transparent;
-    border: 1px solid #fff;
-    color: #fff;
+    border: 1px solid $white;
+    color: $white;
     padding: 3px 14px;
     font-size: 14px;
 }
 
 :host.in #back:hover {
-    color: #1a237e;
-    background-color: #fff;
-    border-color: #fff;
+    color: $midnight-blue;
+    background-color: $white;
+    border-color: $white;
 }
 
 .btn-lg {
     min-width: 155px;
-    background: #fff;
-    color: #5b64c9;
+    background: $white;
+    color: $chetwode-blue;
     box-shadow: none;
 }
 
 .btn-lg:hover {
-    background: #e5e5e5;
-    color: #5b64c9;
-    box-shadow: 0px 4px 4px -3px #afabab;
+    background: $whisper;
+    color: $chetwode-blue;
+    box-shadow: 0px 4px 4px -3px $wistful;
     border-radius: 0px;
-    border-color: #5b64c9;
+    border-color: $chetwode-blue;
 }
 .pad-10-5 {
     padding: 10px 5px;
diff --git a/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.html b/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.html
index d5a24ad9391..2f7ec391c06 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.html
+++ b/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.html
@@ -4,11 +4,11 @@ <h1 class="mr-b2">Product/Service Information</h1>
       <h3 class="aside-title">Select a type:</h3>
   </div>
 
-  <div class="aside-body vmiddle" *ngIf="!hideFirstStep">
-      <div class="pd-1 alC">
+  <div class="aside-body vertical-align-middle" *ngIf="!hideFirstStep">
+      <div class="pd-1 text-center">
           <button class="btn btn-lg btn-primary" (click)="openStockPane()">Create Stock</button>
       </div>
-      <div class="pd-1 alC">
+      <div class="pd-1 text-center">
           <button class="btn btn-lg btn-primary" (click)="toggleGroupPane()">Create Group</button>
       </div>
   </div> -->
diff --git a/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.scss b/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.scss
index 2c18fa2ce2f..0e384ce990d 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.scss
+++ b/apps/web-giddh/src/app/inventory/components/aside-inventory.components/aside-inventory.components.scss
@@ -48,7 +48,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle {
     position: absolute;
     top: 50%;
     bottom: 0;
diff --git a/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.html b/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.html
index 9e3121f966d..fffb244c558 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.html
+++ b/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.html
@@ -7,17 +7,17 @@ <h3>Create</h3>
     <button id="close" (click)="closeAsidePane()" *ngIf="!hideFirstScreen"><i class="icon-cross"></i></button>
     <button id="back" (click)="backButtonPressed()" *ngIf="hideFirstScreen">Back</button>
 
-    <div class="aside-body flexy-child vmiddle asidePanelLedger " *ngIf="!hideFirstScreen" vr-item>
-        <div class="pb-3 alC">
+    <div class="aside-body flexy-child vertical-align-middle aside-panel-ledger" *ngIf="!hideFirstScreen" vr-item>
+        <div class="pd-b3 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleStockPane()">Create Stock</button>
         </div>
-        <div class="pb-3 alC">
+        <div class="pd-b3 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleGroupPane()">Create Group</button>
         </div>
-        <div class="pb-3 alC">
+        <div class="pd-b3 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleUnitPane()">Create Unit</button>
         </div>
-        <div class="pb-3 alC">
+        <div class="pd-b3 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleImport()">Import Stock</button>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.scss b/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.scss
index 92c64d3370c..9cff2abd036 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.scss
+++ b/apps/web-giddh/src/app/inventory/components/aside-pane/aside-pane.components.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/css/color.scss';
+
 :host.in {
     left: auto;
     top: 0;
@@ -19,7 +21,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -35,7 +37,7 @@
 :host .aside-pane {
     width: 100%;
     max-width: 760px;
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 .aside-pane {
@@ -53,7 +55,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle  {
     position: absolute;
     top: 50%;
     bottom: 0;
@@ -76,29 +78,29 @@
     border-radius: 0;
     right: 58px;
     background-color: transparent;
-    border: 1px solid #fff;
-    color: #fff;
+    border: 1px solid $white;
+    color: $white;
     padding: 3px 14px;
     font-size: 14px;
 }
 :host.in #back:hover {
-    color: #1a237e;
-    background-color: #fff;
-    border-color: #fff;
+    color: $midnight-blue;
+    background-color: $white;
+    border-color: $white;
 }
 .btn-lg {
     min-width: 155px;
-    background: #fff;
-    color: #5b64c9;
+    background: $white;
+    color: $chetwode-blue;
     box-shadow: none;
 }
 
 .btn-lg:hover {
-    background: #e5e5e5;
-    color: #5b64c9;
-    box-shadow: 0px 4px 4px -3px #afabab;
+    background: $whisper;
+    color: $chetwode-blue;
+    box-shadow: 0px 4px 4px -3px $wistful;
     border-radius: 0px;
-    border-color: #5b64c9;
+    border-color: $chetwode-blue;
 }
 @media (max-width: 768px) {
     :host.in {
diff --git a/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-receiver-details.component.html b/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-receiver-details.component.html
index ade1d4dd718..02bbc193797 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-receiver-details.component.html
+++ b/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-receiver-details.component.html
@@ -8,20 +8,20 @@ <h3 class=""><span>Account Details</span></h3>
 
     <button id="close" class="" (click)="closeAsidePane($event)"><i class="icon-cross"></i></button>
 
-    <div class="aside-pane-conatainer">
+    <div class="aside-pane-container">
         <form name="addAccountForm" [formGroup]="addAccountForm" (ngSubmit)="submit()">
             <div class="">
                 <div class="upper-form">
                     <div class="row ">
                         <div class="col-sm-4">
-                            <div class="ng-select-wrap liq selectGroup">
+                            <div class="ng-select-wrap select-list select-group">
                                 <label>Select Group<span class="red-text">*</span> </label>
                                 <ng-select placeholder="Select Group" filterPlaceholder="Type to search..."
-                                    (selected)="selectGroup($event)" formControlName="activeGroupUniqueName"
-                                    [options]="flatGroupsOptions" style="width:100%">
+                                    (selected)="selectGroup($event)" formControlName="activeGroupUniqueName" class="w-100"
+                                    [options]="flatGroupsOptions">
                                     <ng-template #optionTemplate let-option="option">
                                         <div class="account-list-item">{{option?.label}}</div>
-                                        <div class="account-list-item fs12">{{option?.value}}</div>
+                                        <div class="account-list-item font-12">{{option?.value}}</div>
                                     </ng-template>
                                 </ng-select>
                             </div>
@@ -110,9 +110,9 @@ <h3 class=""><span>Account Details</span></h3>
             </div>
 
             <tabset #staticTabs class="custom-tabs " id="asidePaneFormTabs">
-                <tab heading="Address" class="gstinAddress">
+                <tab heading="Address" class="gstin-address">
                     <ng-container>
-                        <div class="gstinForm" formArrayName="addresses">
+                        <div class="gstin-form" formArrayName="addresses">
                             <ng-container
                                 *ngFor="let gst of addAccountForm.get('addresses')['controls'] | slice: 0:gstDetailsLength;let i = index;let f = first; let l = last"
                                 [formGroupName]="i">
@@ -141,10 +141,10 @@ <h3>Address {{i+1}}</h3>
                                         <div class="form-group">
                                             <label>State <sup *ngIf="isDebtorCreditor">*</sup></label>
                                             <div class="custom-select">
-                                                <sh-select #states [options]="statesSource$ | async"
+                                                <sh-select #states [options]="statesSource$ | async" class="w-100"
                                                     [isFilterEnabled]="true" (selected)="selectedState(gst, $event)"
                                                     [forceClearReactive]="forceClear$ | async"
-                                                    formControlName="stateCode" style="width:100%">
+                                                    formControlName="stateCode">
                                                 </sh-select>
                                             </div>
                                         </div>
@@ -175,7 +175,7 @@ <h3>Address {{i+1}}</h3>
                                     <div class="col-sm-4">
                                         <div class="form-group">
                                             <label>Party Type<span class="red-text">*</span></label>
-                                            <div class="custom-select pos-rel">
+                                            <div class="custom-select position-relative">
                                                 <sh-select [options]="partyTypeSource" formControlName="partyType"
                                                     [isFilterEnabled]="true"></sh-select>
                                             </div>
@@ -213,8 +213,8 @@ <h3>Address {{i+1}}</h3>
                     </div> -->
 
                 </tab>
-                <tab heading="Contact" class="ContactFromWrap">
-                    <div class="contactForm">
+                <tab heading="Contact" class="contact-form-wrap">
+                    <div class="contact-form">
                         <div class="row">
                             <div class="col-sm-6">
                                 <div class="form-group">
@@ -227,8 +227,8 @@ <h3>Address {{i+1}}</h3>
                                 <div class="form-group">
                                     <label>Mobile Number</label>
                                     <div class="d-flex">
-                                        <sh-select [placeholder]="'+91'" [options]="countryPhoneCode"
-                                            formControlName="mobileCode" style="width: 60px; margin-right: 10px;">
+                                        <sh-select [placeholder]="'+91'" [options]="countryPhoneCode" class="mobile-contact"
+                                            formControlName="mobileCode">
                                         </sh-select>
                                         <input type="text" pattern="[0-9]*" class="form-control pull-right"
                                             placeholder="98XXXXXXXX" formControlName="mobileNo" id="contactNo"
@@ -272,7 +272,7 @@ <h3>Address {{i+1}}</h3>
                         </div>
                     </div>
                     <!-- <div class="row">
-                <div class="col-sm-12 mrT3">
+                <div class="col-sm-12 mr-t3">
                     <div class="button-group">
                         <button class="btn btn-cancel">Cancel</button>
                         <button class="btn btn-success">Save</button>
@@ -283,7 +283,7 @@ <h3>Address {{i+1}}</h3>
 
 
                 <!-- bank details visible when sundry credtiors selected , right now is hide -->
-                <tab heading="Bank Details" class="bankDetialsForm">
+                <tab heading="Bank Details" class="bank-details-form">
                     <div *ngIf="showBankDetail">
                         <div formArrayName="accountBankDetails">
                             <div class="row"
@@ -311,10 +311,10 @@ <h3>Address {{i+1}}</h3>
 
                 </tab>
 
-                <tab heading="Others " class="otherFormWrap ">
+                <tab heading="Others" class="other-form-wrap">
 
-                    <div class="otherForm ">
-                        <div class="row ">
+                    <div class="other-form">
+                        <div class="row">
                             <div class="col-sm-6 ">
                                 <div class="form-group ">
                                     <label>Account Unique Name</label>
@@ -378,7 +378,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Group Name ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Move</button>
                     </div>
@@ -390,7 +390,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Select account ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Merge</button>
                     </div>
@@ -399,7 +399,7 @@ <h3>Address {{i+1}}</h3>
 
                 </tab>
                 <div class="row">
-                    <div class="col-sm-12 mrT3">
+                    <div class="col-sm-12 mr-t3">
                         <div class="button-group">
                             <button class="btn btn-cancel">Cancel</button>
                             <button type="submit" class="btn btn-success" [ladda]="createAccountInProcess$ | async"
diff --git a/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-reciver-details.component.scss b/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-reciver-details.component.scss
index c50b2149fb2..a528d6f22d3 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-reciver-details.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/aside-sender-receiver-details/aside-sender-reciver-details.component.scss
@@ -1,13 +1,13 @@
 @import "../../../../assets/css/color.scss";
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
 }
 
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     //  height: 100vh;
     overflow: auto;
@@ -15,10 +15,10 @@
     position: relative;
 }
 
-.aside-pane-conatainer {
+.aside-pane-container {
     padding: 15px;
     font-size: 14px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .aside-pane-form label {
@@ -48,8 +48,8 @@ span.dr-label {
 }
 
 .cr-dr-account span.active {
-    background-color: #5b64c9;
-    color: #fff;
+    background-color: $chetwode-blue;
+    color: $white;
 }
 
 .aside-pane-form .col-sm-4,
@@ -63,18 +63,18 @@ span.dr-label {
 
 .upper-form {
     margin-bottom: 20px;
-    .input-group {
-        .input-group-addon {
-            border-left: 1px solid $very-light-gray !important;
+     .input-group{
+        .input-group-addon{
+            border-left: 1px solid $gainsboro !important;
         }
-        input {
-            border-left: 1px solid $very-light-gray !important;
+        input{
+            border-left: 1px solid $gainsboro !important;
             border-right: none !important;
         }
     }
 }
 
-form.gstinForm {
+form.gstin-form {
     padding-top: 15px;
 }
 
@@ -89,18 +89,23 @@ form.gstinForm {
 
 .add-address-default h3 {
     font-size: 16px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
-.contactForm,
-.otherFormWrap,
-.bankDetialsForm {
+.contact-form,
+.other-form-wrap,
+.bank-details-form {
     padding-top: 15px;
 }
 
-.otherForm .btn-sky-blue {
+.other-form .btn-sky-blue {
     display: block;
 }
+
+.mobile-contact{
+    width: 60px; 
+    margin-right: 10px;
+}
 :host {
     position: fixed;
     left: auto;
@@ -145,4 +150,4 @@ form.gstinForm {
 }
 .aside-pane {
     padding: 0;
-}
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.html b/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.html
index 23ee55b7910..ba52c76b1f8 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.html
+++ b/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.html
@@ -33,20 +33,20 @@ <h3>Create</h3>
             <transfer-inventory-user (onSave)="createAccount($event)" (onCancel)="onCancel()"></transfer-inventory-user>
         </ng-container>
         <ng-container *ngSwitchDefault>
-            <div class="aside-body flexy-child vmiddle asidePanelLedger" vr-item>
-                <div class="pd-1 alC">
+            <div class="aside-body flexy-child vertical-align-middle aside-panel-ledger" vr-item>
+                <div class="pd-1 text-center">
                     <button type="button" class="btn btn-lg btn-primary" (click)="selectView('inward')">Inward
                         Note</button>
                 </div>
-                <div class="pd-1 alC">
+                <div class="pd-1 text-center">
                     <button type="button" class="btn btn-lg btn-primary" (click)="selectView('outward')">Outward
                         Note</button>
                 </div>
-                <div class="pd-1 alC">
+                <div class="pd-1 text-center">
                     <button type="button" class="btn btn-lg btn-primary" (click)="selectView('createStock')">Create
                         Stock</button>
                 </div>
-                <div class="pd-1 alC">
+                <div class="pd-1 text-center">
                     <button type="button" class="btn btn-lg btn-primary" (click)="selectView('createAccount')">Create
                         Account</button>
                 </div>
diff --git a/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.scss b/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.scss
index d16300edc27..928a076227d 100644
--- a/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/aside-transfer-pane/aside-transfer-pane.component.scss
@@ -1,3 +1,4 @@
+@import '../../../../assets/css/color.scss';
 :host.in {
     left: auto;
     top: 0;
@@ -23,7 +24,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -40,7 +41,7 @@
 :host .aside-pane {
     max-width: 760px;
     width: 100%;
-    background: #fff;
+    background: $white;
     width: 100%;
     padding: 0px;
 }
@@ -56,7 +57,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle {
     position: absolute;
     top: 50%;
     bottom: 0;
@@ -79,34 +80,34 @@
     border-radius: 0;
     right: 218px;
     background-color: transparent;
-    border: 1px solid #fff;
-    color: #fff;
+    border: 1px solid $white;
+    color: $white;
     padding: 3px 14px;
     font-size: 14px;
 }
 :host.in #back:hover {
-    color: #1a237e;
-    background-color: #fff;
-    border-color: #fff;
+    color: $midnight-blue;
+    background-color: $white;
+    border-color: $white;
 }
 
 .btn-lg {
     min-width: 155px;
-    background: #fff;
-    color: #5b64c9;
+    background: $white;
+    color: $chetwode-blue;
     box-shadow: none;
 }
 
 .btn-lg:hover {
-    background: #e5e5e5;
-    color: #5b64c9;
-    box-shadow: 0px 4px 4px -3px #afabab;
+    background: $whisper;
+    color: $chetwode-blue;
+    box-shadow: 0px 4px 4px -3px $wistful;
     border-radius: 0px;
-    border-color: #5b64c9;
+    border-color: $chetwode-blue;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -116,7 +117,7 @@
 }
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
+    background: $midnight-blue;
 }
 @media (max-width: 768px) {
     :host.in {
diff --git a/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.html b/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.html
index 05c393b955b..bf2c0caaf90 100644
--- a/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.html
+++ b/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.html
@@ -6,7 +6,7 @@
             <div>
                 <h3 class="">
                     <span>Transfer</span>
-                    <span class="pull-right fs14">Multiple
+                    <span class="pull-right font-14">Multiple
                         <a href="javascript:void(0)" [ngClass]="{'text-link': mode === 'destination' }"
                             (click)="modeChanged('destination')">Destination</a>
                         /
@@ -18,12 +18,12 @@ <h3 class="">
             </div>
         </div>
 
-        <div class="form_body witBg clearfix margin-child-label">
-            <div class="form_bg clearfix">
+        <div class="form-body width-bg clearfix margin-child-label">
+            <div class="clearfix">
                 <form [formGroup]="form" class="form-group">
 
                     <div class="row">
-                        <div class="col-xs-6 form-group">
+                        <div class="col-6 form-group">
                             <label>Date <sup>*</sup></label>
                             <input name="dateRange" formControlName="transferDate" type="text" autocomplete="off"
                                 class="form-control" bsDatepicker [minDate]="today"
@@ -37,30 +37,30 @@ <h3 class="">
                     </div>
 
                     <div class="row">
-                        <div class="col-xs-6 form-group">
+                        <div class="col-6 form-group">
                             <label>Source <sup>*</sup></label>
                             <sh-select [options]="branches" [multiple]="false" [placeholder]="'Select Source'"
-                                #sourceSelect (selected)="sourceChanged($event)" formControlName="source"></sh-select>
+                                #sourceSelect (selected)="sourceChanged($event)" formControlName="source" [isRequired]="true"></sh-select>
                             <span *ngIf="source.invalid && (source.dirty || source.touched)">
                                 <span *ngIf="source?.errors && source?.errors['required']" class="text-danger">Please
                                     select Source.</span>
                             </span>
                         </div>
 
-                        <div class="col-xs-6 form-group" *ngIf="mode === 'destination'">
+                        <div class="col-6 form-group" *ngIf="mode === 'destination'">
                             <label>Product Name <sup>*</sup></label>
                             <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                                formControlName="productName" (selected)="productChanged($event)"></sh-select>
+                                formControlName="productName" (selected)="productChanged($event)" [isRequired]="true"></sh-select>
                             <span *ngIf="productName.invalid && (productName.dirty || productName.touched)">
                                 <span *ngIf="productName.errors && productName.errors['required']"
                                     class="text-danger">Please select Product.</span>
                             </span>
                         </div>
 
-                        <div class="col-xs-6 form-group" *ngIf="mode === 'product'">
+                        <div class="col-6 form-group" *ngIf="mode === 'product'">
                             <label>Destination <sup>*</sup></label>
                             <sh-select [options]="otherBranches" [multiple]="false" [disabled]="!(source.value)"
-                                [placeholder]="'Select Destination'" formControlName="destination"></sh-select>
+                                [placeholder]="'Select Destination'" formControlName="destination" [isRequired]="true"></sh-select>
                             <span *ngIf="destination.invalid && (destination.dirty || destination.touched)">
                                 <span *ngIf="destination.errors && destination.errors['required']"
                                     class="text-danger">Please select Destination.</span>
@@ -69,26 +69,26 @@ <h3 class="">
 
                     </div>
 
-                    <div class="" style="display: flex">
+                    <div class="d-flex">
 
-                        <div class="" *ngIf="mode === 'destination'" style="margin-right: 20%">
-                            <label class="fs14">Destination <sup>*</sup></label>
+                        <div class="destination-right" *ngIf="mode === 'destination'">
+                            <label class="font-14">Destination <sup>*</sup></label>
                         </div>
-                        <div class="" *ngIf="mode === 'product'" style="margin-right: 24%">
-                            <label class="fs14">Product <sup>*</sup></label>
+                        <div class="product-right" *ngIf="mode === 'product'">
+                            <label class="font-14">Product <sup>*</sup></label>
                         </div>
 
-                        <div class="" style="margin-right: 9%">
-                            <label class="fs14">Qty. <sup>*</sup></label>
+                        <div class="quantity-right">
+                            <label class="font-14">Qty. <sup>*</sup></label>
                         </div>
-                        <div class="" style="margin-right: 9%">
-                            <label class="fs14">Unit <sup>*</sup></label>
+                        <div class="unit-right">
+                            <label class="font-14">Unit <sup>*</sup></label>
                         </div>
-                        <div class="" style="margin-right: 9%">
-                            <label class="fs14">Rate <sup>*</sup></label>
+                        <div class="unit-right">
+                            <label class="font-14">Rate <sup>*</sup></label>
                         </div>
-                        <div class="">
-                            <label class="fs14">Value <sup>*</sup></label>
+                        <div>
+                            <label class="font-14">Value <sup>*</sup></label>
                         </div>
                     </div>
 
@@ -115,44 +115,44 @@ <h3 class="">
                                     Product.</span>
                             </div>
 
-                            <div style="display: flex">
+                            <div class="d-flex form-items">
                                 <!-- <label class="mr-b1">Quantity</label> -->
                                 <!--<div>-->
-                                <div class="form-group" style="margin-right: 2%;">
+                                <div class="form-group">
                                     <input name="" type="text" formControlName="quantity" decimalDigitsDirective
                                         [minValue]="1" (change)="valueChanged(item)" class="form-control">
                                 </div>
 
-                                <div class="form-group" style="margin-right: 2%;" *ngIf="mode === 'destination'">
+                                <div class="form-group" *ngIf="mode === 'destination'">
                                     <input name="" type="text" formControlName="stockUnit" class="form-control">
                                 </div>
 
-                                <div class="form-group" style="margin-right: 2%;" *ngIf="mode === 'product'">
+                                <div class="form-group" *ngIf="mode === 'product'">
                                     <input name="" type="text" formControlName="stockUnit" class="form-control">
                                 </div>
 
 
-                                <div class="form-group" style="margin-right: 2%;" *ngIf="mode === 'destination'">
+                                <div class="form-group" *ngIf="mode === 'destination'">
                                     <input name="" type="text" formControlName="rate" decimalDigitsDirective
                                         [minValue]="1" (change)="valueChanged(item)" class="form-control">
                                 </div>
 
-                                <div class="form-group" style="margin-right: 2%;" *ngIf="mode === 'product'">
+                                <div class="form-group" *ngIf="mode === 'product'">
                                     <input name="" type="text" formControlName="rate" (change)="valueChanged(item)"
                                         decimalDigitsDirective [minValue]="1" class="form-control">
                                 </div>
 
-                                <div class="form-group" style="margin-right: 2%;">
+                                <div class="form-group">
                                     <input name="" type="text" formControlName="value" [readonly]="true"
                                         class="form-control">
                                 </div>
 
-                                <div class="mr-t" style="margin-right: 2%;">
+                                <div class="mr-t05 form-group">
                                     <button class="btn-link" (click)="addEntry(transfers.controls[i])" *ngIf="last">
-                                        <i class="icon-plus add_row"></i>
+                                        <i class="icon-plus add-row"></i>
                                     </button>
                                     <button class="btn-link" (click)="deleteEntry(i)" *ngIf="!last">
-                                        <i class="icon-cross dlet"></i>
+                                        <i class="icon-cross delete"></i>
                                     </button>
                                 </div>
                                 <!--</div>-->
@@ -169,7 +169,7 @@ <h3 class="">
                     </div>
 
                     <div class="row">
-                        <div class="col-xs-12 text-left mr-t1">
+                        <div class="col-md-12 text-left mr-t1">
                             <button class="btn btn-default" (click)="closeAsidePane()">Cancel</button>
                             <button class="btn btn-success" [ladda]="(isBranchCreationInProcess$ | async)"
                                 [disabled]="form.invalid" (click)="save()">Save
diff --git a/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.scss b/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.scss
index c013f5b4953..217ec5ae69d 100644
--- a/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/branch/branchTransfer/branch.transfer.component.scss
@@ -51,7 +51,7 @@
     flex-grow: 1;
   }
 
-  .vmiddle {
+  .vertical-align-middle {
     position: absolute;
     top: 50%;
     bottom: 0;
@@ -62,4 +62,26 @@
     transform: translateY(-50%);
     text-align: center;
     margin: 0 auto;
-  }
\ No newline at end of file
+  }
+
+  .destination-right{
+    margin-right: 20% !important;
+}
+
+.product-right{
+    margin-right: 24% !important;
+}
+
+.quantity-right{
+    margin-right: 9% !important;
+}
+
+.unit-right{
+    margin-right: 9% !important;
+}
+
+.form-items{
+    .form-group{
+        margin-right: 2% !important;
+    }
+}
diff --git a/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.html b/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.html
index a754b6cf604..a1510ec69e9 100644
--- a/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.html
+++ b/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.html
@@ -7,8 +7,8 @@ <h3 *ngIf="editMode">Modify Unit</h3>
         <button id="close" (click)="closeAsidePane()"><i class="icon-cross"></i></button>
         <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
             <div class="aside-pane-form">
-                <form #customUnitForm="ngForm" name="customUnitForm" class="form_body" novalidate>
-                    <div class="form_bg clearfix">
+                <form #customUnitForm="ngForm" name="customUnitForm" class="form-body" novalidate>
+                    <div class="clearfix">
                         <div class="row">
                             <div class="form-group col-xs-6 col-sm-6">
                                 <label>Unit Name<sup>*</sup></label>
@@ -17,7 +17,7 @@ <h3 *ngIf="editMode">Modify Unit</h3>
                                     [placeholder]="'Select unit'" (selected)="setUnitName($event?.label)"
                                     [ItemHeight]="33" (onClear)="clearUnit()" [forceClearReactive]="forceClear$ | async"
                                     [doNotReset]="true" (noOptionsFound)="noUnitFound(unitName)"
-                                    [notFoundMsg]="'Type to create custom unit'">
+                                    [notFoundMsg]="'Type to create custom unit'" [isRequired]="true">
                                 </sh-select>
                                 <input placeholder="Unit name" type="text" class="form-control" name="name"
                                     [(ngModel)]="customUnitObj.name" required *ngIf="country != 'india'"
@@ -42,14 +42,14 @@ <h3 *ngIf="editMode">Modify Unit</h3>
 
                             <div class="form-group col-xs-3 col-sm-3">
                                 <div class="row">
-                                    <label class="width100 d-block">&nbsp;</label>
+                                    <label class="width-100 d-block">&nbsp;</label>
                                     <div class="checkbox square-switch">
                                         <input type="checkbox" id="isDivide" [checked]="isDivide"
                                             (change)="isDivide = !isDivide" />
                                         <label for="isDivide">
-                                            <span class="pull-left width100 text-left" *ngIf="isDivide"><img
+                                            <span class="pull-left width-100 text-left" *ngIf="isDivide"><img
                                                     src="./assets/images/divide-ico.svg" /> Divide</span>
-                                            <span class="pull-right width100 text-right" *ngIf="!isDivide"><img
+                                            <span class="pull-right width-100 text-right" *ngIf="!isDivide"><img
                                                     src="./assets/images/multiply.svg" [style.width.px]="11" />
                                                 Multiply</span>
                                         </label>
@@ -73,7 +73,7 @@ <h3 *ngIf="editMode">Modify Unit</h3>
                                 {{customUnitObj?.parentStockUnit?.name}} </div>
                             <div class="grey-color col-xs-12 mr-b2 division"
                                 *ngIf="customUnitObj.name && customUnitObj.quantityPerUnit && isDivide">
-                                <span class="mrR">1 {{customUnitObj?.name}}</span> <span class="mrR fs18">=</span>
+                                <span class="mr-r05">1 {{customUnitObj?.name}}</span> <span class="mr-r05 font-18">=</span>
                                 <div class="text-center">
                                     1 {{customUnitObj.parentStockUnit?.name}}
                                     <div class="hr"></div> {{customUnitObj?.quantityPerUnit}}
diff --git a/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.scss b/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.scss
index 0b7e37b57d5..27fc60a9b47 100644
--- a/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/custom-stock-components/inventory.customstock.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/css/color.scss";
+
 .square-switch input[type="checkbox"]:checked ~ label {
     background: initial;
     color: initial;
@@ -16,7 +18,7 @@
     padding: 0 7px;
 }
 .hr {
-    border-bottom: 2px solid #ddd;
+    border-bottom: 2px solid $gainsboro;
     margin: 3px 0;
 }
 #close {
@@ -25,15 +27,15 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
     border: 0;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.html b/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.html
index f2abd4a6f0f..6ce536e49a0 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.html
+++ b/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.html
@@ -5,7 +5,7 @@ <h3>
         </h3>
     </div>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
+<div class="form-body white-bg clearfix margin-child-label">
     <div class="branch-transfer">
         <button class="btn btn-light-gray" (click)="openBranchTransferPopup('receiptnote')">Receipt Note</button>
         <button class="btn btn-light-gray" (click)="openBranchTransferPopup('deliverynote')">Delivery Challan</button>
diff --git a/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.ts b/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.ts
index 3b568988cd6..65b214754b1 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.ts
+++ b/apps/web-giddh/src/app/inventory/components/forms/branch-transfer/branch-transfer-note.component.ts
@@ -408,7 +408,7 @@ export class BranchTransferNoteComponent implements OnInit, AfterViewInit, OnCha
     }
 
     public removeExtraChar(val) {
-        return val.replace(/[^0-9.]/g, "");
+        return (val) ? val.replace(/[^0-9.]/g, "") : "";
     }
 
     public addItemInLinkedStocks(item, i?: number, lastIdx?) {
diff --git a/apps/web-giddh/src/app/inventory/components/forms/inventory-user/transfer-inventory-user.component.html b/apps/web-giddh/src/app/inventory/components/forms/inventory-user/transfer-inventory-user.component.html
index 240e87c1d07..355120cdc53 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/inventory-user/transfer-inventory-user.component.html
+++ b/apps/web-giddh/src/app/inventory/components/forms/inventory-user/transfer-inventory-user.component.html
@@ -1,11 +1,11 @@
 <div class="form-header">
     <h2 class="">Create Account</h2>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" autocomplete="off" class="form-group">
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-6">
                     <label>Name</label>
                     <input type="text" formControlName="name" class="form-control" />
                 </div>
@@ -13,19 +13,19 @@ <h2 class="">Create Account</h2>
             </div>
 
             <div class="row">
-                <div class="col-xs-12 text-left mr-t1">
+                <div class="col-md-12 text-left mr-t1">
                     <button class="btn btn-default" (click)="onCancel.emit($event)">Cancel</button>
                     <button class="btn btn-success" [ladda]="isLoading" (click)="save()">Save</button>
                 </div>
             </div>
 
             <!-- <div class="row">
-  <div class="col-lg-3 form-group mrR1">
+  <div class="col-lg-3 form-group mr-r1">
     <label class="d-block">&nbsp;</label>
     <button class="btn btn-sm" (click)="onCancel.emit($event)">Cancel</button>
   </div>
 
-  <div class="col-lg-3 form-group mrR1">
+  <div class="col-lg-3 form-group mr-r1">
     <label class="d-block">&nbsp;</label>
     <button class="btn btn-success btn-sm" [ladda]="isLoading" (click)="save()">Save</button>
   </div>
diff --git a/apps/web-giddh/src/app/inventory/components/forms/inward-note/inward-note.component.html b/apps/web-giddh/src/app/inventory/components/forms/inward-note/inward-note.component.html
index 6d076317ab4..7db6a8de4cb 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/inward-note/inward-note.component.html
+++ b/apps/web-giddh/src/app/inventory/components/forms/inward-note/inward-note.component.html
@@ -2,7 +2,7 @@
     <div>
         <h3 class="">
             <span>Inward Note</span>
-            <span class="pull-right fs14">Multiple
+            <span class="pull-right font-14">Multiple
                 <a href="javascript:void(0)" [ngClass]="{'text-link': mode === 'sender' }"
                     (click)="modeChanged('sender')">Senders</a>
                 /
@@ -13,11 +13,11 @@ <h3 class="">
 
     </div>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" class="form-group">
             <div class="row">
-                <div class="col-xs-6 form-group">
+                <div class="col-6 form-group">
                     <label>Date <sup>*</sup></label>
                     <input name="dateRange" formControlName="inventoryEntryDate" type="text" autocomplete="off"
                         class="form-control" bsDatepicker [bsConfig]=" {dateInputFormat: giddhDateFormat}">
@@ -28,20 +28,20 @@ <h3 class="">
                     </span>
                 </div>
 
-                <div class="col-xs-6 form-group" *ngIf="mode === 'sender'">
+                <div class="col-6 form-group" *ngIf="mode === 'sender'">
                     <label>Product Name <sup>*</sup></label>
                     <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                        [disabled]="stock.disabled" formControlName="stock" (selected)="stockChanged($event)">
+                        [disabled]="stock.disabled" formControlName="stock" (selected)="stockChanged($event)" [isRequired]="true">
                     </sh-select>
                     <!-- <span *ngIf="stock.invalid">
               <span *ngIf="stock?.errors && stock?.errors['required']" class="text-danger">Please select Product.</span>
                     </span> -->
                 </div>
 
-                <div class="col-xs-6 form-group" *ngIf="mode === 'product'">
+                <div class="col-6 form-group" *ngIf="mode === 'product'">
                     <label>Sender <sup>*</sup></label>
                     <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Sender'"
-                        formControlName="inventoryUser" (selected)="userChanged($event)"></sh-select>
+                        formControlName="inventoryUser" (selected)="userChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="inventoryUser.invalid">
               <span *ngIf="inventoryUser?.errors && inventoryUser?.errors['required']"
                     class="text-danger">Please select Sender.</span>
@@ -51,19 +51,19 @@ <h3 class="">
             </div>
 
             <div class="row">
-                <div class="col-xs-4" *ngIf="mode === 'sender'">
-                    <label class="fs14">Sender <sup>*</sup></label>
+                <div class="col-4" *ngIf="mode === 'sender'">
+                    <label class="font-14">Sender <sup>*</sup></label>
                 </div>
-                <div class="col-xs-4" *ngIf="mode === 'product'">
-                    <label class="fs14">Product Name <sup>*</sup></label>
+                <div class="col-4" *ngIf="mode === 'product'">
+                    <label class="font-14">Product Name <sup>*</sup></label>
                 </div>
 
-                <div class="col-xs-4">
-                    <label class="fs14">Unit<sup>*</sup></label>
+                <div class="col-4">
+                    <label class="font-14">Unit<sup>*</sup></label>
                 </div>
 
-                <div class="col-xs-4">
-                    <label class="fs14">Quantity <sup>*</sup></label>
+                <div class="col-4">
+                    <label class="font-14">Quantity <sup>*</sup></label>
                 </div>
             </div>
 
@@ -72,42 +72,42 @@ <h3 class="">
                 *ngFor="let item of transactions.controls; let i = index;let first = first;let last = last">
                 <div [formGroupName]="i">
 
-                    <div class="col-xs-4 form-group" *ngIf="mode === 'sender'">
+                    <div class="col-4 form-group" *ngIf="mode === 'sender'">
                         <!-- <label class="mr-b1">Sender</label> -->
                         <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Sender'"
-                            (selected)="userChanged($event,i)" formControlName="inventoryUser" [ItemHeight]="'33'">
+                            (selected)="userChanged($event,i)" formControlName="inventoryUser" [ItemHeight]="'33'" [isRequired]="true">
                         </sh-select>
                         <!-- <span [hidden]="!item.get('inventoryUser')?.errors?.required"
                   class="text-danger">Please select Sender.</span> -->
                     </div>
-                    <div class="col-xs-4 form-group" *ngIf="mode === 'product'">
+                    <div class="col-4 form-group" *ngIf="mode === 'product'">
                         <!-- <label class="mr-b1">Product Name</label> -->
                         <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stock')?.errors?.required" class="text-danger">Please select Product.</span> -->
                     </div>
 
-                    <div class="col-xs-4 form-group">
+                    <div class="col-4 form-group">
                         <sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'"
-                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33"></sh-select>
+                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stockUnit')?.errors?.required" class="text-danger">Please select Unit.</span> -->
                     </div>
 
-                    <div class="col-xs-4 form-group">
+                    <div class="col-4 form-group">
                         <!-- <label class="mr-b1">Quantity</label> -->
                         <div class="row">
-                            <div class="col-xs-10">
+                            <div class="col-10">
                                 <input name="" type="text" formControlName="quantity" class="form-control">
                             </div>
 
 
-                            <div class="pull-right mr-t unit_add">
+                            <div class="pull-right mr-t05 unit-add">
                                 <button class="btn-link" (click)="addTransactionItem(transactions.controls[i])"
                                     *ngIf="last">
-                                    <i class="icon-plus add_row"></i>
+                                    <i class="icon-plus add-row"></i>
                                 </button>
                                 <button class="btn-link" (click)="deleteTransactionItem(i)" *ngIf="!last">
-                                    <i class="icon-cross dlet"></i>
+                                    <i class="icon-cross delete"></i>
                                 </button>
                             </div>
                         </div>
@@ -120,10 +120,10 @@ <h3 class="">
             <ng-container *ngIf="mode === 'sender'">
                 <div class="row">
 
-                    <div class="mr-t1 pdL pdR">
-                        <div class="col-xs-12">
+                    <div class="mr-t1 pd-l05 pd-r05">
+                        <div class="col-md-12">
                             <div class="checkbox">
-                                <label class="" for="isManufactured">
+                                <label for="isManufactured">
                                     <input type="checkbox" formControlName="isManufactured" id="isManufactured"
                                         name="isManufactured"> Is
                                     it
@@ -134,35 +134,35 @@ <h3 class="">
                     </div>
 
 
-                    <section class="col-xs-12" *ngIf="form.value.isManufactured">
-                        <div class="">
-                            <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made with)</strong>
+                    <section class="col-md-12" *ngIf="form.value.isManufactured">
+                        <div>
+                            <h1 class="section-head bd-rb"><strong>{{form.controls['stock'].value}} (Made with)</strong>
                             </h1>
 
                             <div formGroupName="manufacturingDetails">
 
-                                <div class="row" style="padding-top: 5px">
-                                    <div class="col-xs-4">
-                                        <label class="fs14">Output Qty <sup>*</sup></label>
+                                <div class="row pd-t05">
+                                    <div class="col-4">
+                                        <label class="font-14">Output Qty <sup>*</sup></label>
                                     </div>
-                                    <div class="col-xs-5">
-                                        <label class="fs14">Stock Unit <sup>*</sup></label>
+                                    <div class="col-5">
+                                        <label class="font-14">Stock Unit <sup>*</sup></label>
                                     </div>
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-xs-4 form-group">
+                                    <div class="col-4 form-group">
                                         <input type="text" class="form-control" decimalDigitsDirective
                                             [DecimalPlaces]="4" name="manufacturingQuantity" placeholder="Quantity"
                                             formControlName="manufacturingQuantity" />
                                     </div>
 
-                                    <div class="col-xs-5 form-group">
+                                    <div class="col-5 form-group">
                                         <sh-select [options]="stockUnitsOptions" formControlName="manufacturingUnitCode"
-                                            [placeholder]="'Select Unit'" [multiple]="false" [ItemHeight]="33"></sh-select>
+                                            [placeholder]="'Select Unit'" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                                     </div>
 
-                                    <div class="col-xs-3" style="display: flex;align-items: center;height: 30px"
+                                    <div class="col-3" style="display: flex;align-items: center;height: 30px"
                                         *ngIf="manufacturingDetails.controls['manufacturingQuantity'].value">
                                         <label>&nbsp;</label>
                                         <span class="d-block"><strong>= (
@@ -173,13 +173,13 @@ <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made wit
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <strong>Input Stock Name</strong>
                                     </div>
-                                    <div class="col-xs-3">
+                                    <div class="col-3">
                                         <strong>Stock Qty</strong>
                                     </div>
-                                    <div class="col-xs-4">
+                                    <div class="col-4">
                                         <strong>Stock Unit</strong>
                                     </div>
                                 </div>
@@ -189,27 +189,27 @@ <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made wit
                                         *ngFor="let list of manufacturingDetails['controls']['linkedStocks'].controls;let i = index; let l = last"
                                         [formGroupName]="i">
 
-                                        <div class="col-xs-4 form-group">
+                                        <div class="col-4 form-group">
                                             <sh-select [options]="stockListOptions" formControlName="stockUniqueName"
                                                 [multiple]="false" [placeholder]="'Select Stock Name'" [ItemHeight]="33"
                                                 (selected)="findAddedStock($event?.value, i)"></sh-select>
                                         </div>
-                                        <div class="col-xs-3 form-group">
+                                        <div class="col-3 form-group">
                                             <input type="text" formControlName="quantity" decimalDigitsDirective
                                                 [DecimalPlaces]="4" name="quantity" placeholder="Enter Quantity"
                                                 class="form-control" />
                                         </div>
-                                        <div class="col-xs-4 form-group">
+                                        <div class="col-4 form-group">
                                             <sh-select [options]="stockUnitsOptions" formControlName="stockUnitCode"
                                                 [multiple]="false" [placeholder]="'Select Unit'" [ItemHeight]="33">
                                             </sh-select>
                                         </div>
-                                        <div class="pull-right mr-t unit_add">
+                                        <div class="pull-right mr-t05 unit-add">
                                             <button class="btn-link" (click)="addItemInLinkedStocks(list, i, i)"
                                                 *ngIf="l" [disabled]="disableStockButton"><i
-                                                    class="icon-plus add_row"></i></button>
+                                                    class="icon-plus add-row"></i></button>
                                             <button class="btn-link" (click)="removeItemInLinkedStocks(i)" *ngIf="!l"><i
-                                                    class="icon-cross dlet"></i></button>
+                                                    class="icon-cross delete"></i></button>
                                         </div>
 
 
@@ -231,7 +231,7 @@ <h1 class="section-head bdrB"><strong>{{form.controls['stock'].value}} (Made wit
             </ng-container>
 
             <div class="row">
-                <div class="col-xs-12 text-left mr-t1">
+                <div class="col-md-12 text-left mr-t1">
                     <button class="btn btn-default" (click)="onCancel.emit($event)">Cancel</button>
                     <button class="btn btn-success" [ladda]="isLoading" [disabled]="form.invalid"
                         (click)="save()">Save</button>
diff --git a/apps/web-giddh/src/app/inventory/components/forms/outward-note/outward-note.component.html b/apps/web-giddh/src/app/inventory/components/forms/outward-note/outward-note.component.html
index 165688abaf5..15a5bb02c62 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/outward-note/outward-note.component.html
+++ b/apps/web-giddh/src/app/inventory/components/forms/outward-note/outward-note.component.html
@@ -2,7 +2,7 @@
     <div>
         <h3 class="">
             <span>Outward Note</span>
-            <span class="pull-right fs14">Multiple
+            <span class="pull-right font-14">Multiple
                 <a href="javascript:void(0)" [ngClass]="{'text-link': mode === 'receiver' }"
                     (click)="modeChanged('receiver')">Receivers</a>
                 /
@@ -14,11 +14,11 @@ <h3 class="">
     </div>
 </div>
 
-<div class="form_body witBg clearfix margin-child-label">
-    <div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+    <div class="clearfix">
         <form [formGroup]="form" class="form-group">
             <div class="row">
-                <div class="col-xs-6 form-group">
+                <div class="col-6 form-group">
                     <label>Date <sup>*</sup></label>
                     <input name="dateRange" formControlName="inventoryEntryDate" type="text" autocomplete="off"
                         class="form-control" bsDatepicker [bsConfig]=" {dateInputFormat: giddhDateFormat}" />
@@ -29,19 +29,19 @@ <h3 class="">
                     </span>
                 </div>
 
-                <div class="col-xs-6 form-group" *ngIf="mode === 'receiver'">
+                <div class="col-6 form-group" *ngIf="mode === 'receiver'">
                     <label class="mr-b1">Product Name <sup>*</sup></label>
                     <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                        formControlName="stock" (selected)="stockChanged($event)"></sh-select>
+                        formControlName="stock" (selected)="stockChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="stock.invalid">
               <span *ngIf="stock?.errors && stock?.errors['required']" class="text-danger">Please select Product.</span>
                     </span> -->
                 </div>
 
-                <div class="col-xs-6 form-group" *ngIf="mode === 'product'">
+                <div class="col-6 form-group" *ngIf="mode === 'product'">
                     <label class="mr-b1">Receiver <sup>*</sup></label>
                     <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Receiver'"
-                        formControlName="inventoryUser" (selected)="userChanged($event)"></sh-select>
+                        formControlName="inventoryUser" (selected)="userChanged($event)" [isRequired]="true"></sh-select>
                     <!-- <span *ngIf="inventoryUser.invalid">
               <span *ngIf="inventoryUser?.errors && inventoryUser?.errors['required']"
                     class="text-danger">Please select Receiver.</span>
@@ -52,19 +52,19 @@ <h3 class="">
 
 
             <div class="row">
-                <div class="col-xs-4" *ngIf="mode === 'receiver'">
-                    <label class="fs14">Receiver <sup>*</sup></label>
+                <div class="col-4" *ngIf="mode === 'receiver'">
+                    <label class="font-14">Receiver <sup>*</sup></label>
                 </div>
-                <div class="col-xs-4" *ngIf="mode === 'product'">
-                    <label class="fs14">Product Name <sup>*</sup></label>
+                <div class="col-4" *ngIf="mode === 'product'">
+                    <label class="font-14">Product Name <sup>*</sup></label>
                 </div>
 
-                <div class="col-xs-4">
-                    <label class="fs14">Unit<sup>*</sup></label>
+                <div class="col-4">
+                    <label class="font-14">Unit<sup>*</sup></label>
                 </div>
 
-                <div class="col-xs-4">
-                    <label class="fs14">Quantity <sup>*</sup></label>
+                <div class="col-4">
+                    <label class="font-14">Quantity <sup>*</sup></label>
                 </div>
             </div>
 
@@ -72,45 +72,45 @@ <h3 class="">
                 *ngFor="let item of transactions.controls; let i = index;let first = first;let last = last">
                 <div [formGroupName]="i">
 
-                    <div class="col-xs-4 form-group" *ngIf="mode === 'receiver'">
+                    <div class="col-4 form-group" *ngIf="mode === 'receiver'">
                         <!-- <label class="mr-b1">Receiver</label> -->
                         <sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Receiver'"
-                            (selected)="userChanged($event,i)" formControlName="inventoryUser" [ItemHeight]="'33'">
+                            (selected)="userChanged($event,i)" formControlName="inventoryUser" [ItemHeight]="'33'" [isRequired]="true">
                         </sh-select>
                         <!-- <span [hidden]="!item.controls['inventoryUser'].errors?.required"
                   class="text-danger">Please select Receiver.</span> -->
                     </div>
 
-                    <div class="col-xs-4 form-group" *ngIf="mode === 'product'">
+                    <div class="col-4 form-group" *ngIf="mode === 'product'">
                         <!-- <label class="mr-b1">Product Name</label> -->
                         <sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+                            (selected)="stockChanged($event,i)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.controls['stock'].errors?.required"
                   class="text-danger">Please select Product.</span> -->
                     </div>
 
-                    <div class="col-xs-4 form-group">
+                    <div class="col-4 form-group">
                         <sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'"
-                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33"></sh-select>
+                            formControlName="stockUnit" [multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
                         <!-- <span [hidden]="!item.get('stockUnit')?.errors?.required" class="text-danger">Please select Unit.</span> -->
                     </div>
 
-                    <div class="col-xs-4 form-group">
+                    <div class="col-4 form-group">
                         <!-- <label class="mr-b1">Quantity</label> -->
 
                         <div class="row">
-                            <div class="col-xs-10">
+                            <div class="col-10">
                                 <input name="" type="text" formControlName="quantity" class="form-control">
                             </div>
 
 
-                            <div class="pull-right mr-t unit_add">
+                            <div class="pull-right mr-t05 unit-add">
                                 <button class="btn-link" (click)="addTransactionItem(transactions.controls[i])"
                                     *ngIf="last">
-                                    <i class="icon-plus add_row"></i>
+                                    <i class="icon-plus add-row"></i>
                                 </button>
                                 <button class="btn-link" (click)="deleteTransactionItem(i)" *ngIf="!last">
-                                    <i class="icon-cross dlet"></i>
+                                    <i class="icon-cross delete"></i>
                                 </button>
                             </div>
                         </div>
@@ -122,7 +122,7 @@ <h3 class="">
   <span [hidden]="!item.controls['quantity'].errors?.required" class="text-danger">Please enter quantity.</span>
 </div> -->
                     </div>
-                    <!-- <div class="col-lg-2 form-group pdT2">
+                    <!-- <div class="col-lg-2 form-group pd-t2">
   <a (click)="addTransactionItem()">
     <i class="icon-plus" *ngIf="first || !last"></i>
   </a>
@@ -145,7 +145,7 @@ <h3 class="">
 
 
             <div class="row">
-                <div class="col-xs-12 text-left mr-t1">
+                <div class="col-md-12 text-left mr-t1">
                     <button class="btn btn-default" (click)="onCancel.emit($event)">Cancel</button>
                     <button class="btn btn-success" [ladda]="isLoading" [disabled]="form.invalid"
                         (click)="save()">Save</button>
diff --git a/apps/web-giddh/src/app/inventory/components/forms/transfer-note/transfer-note.component.html b/apps/web-giddh/src/app/inventory/components/forms/transfer-note/transfer-note.component.html
index a1f1ba8f370..a76beac2f75 100644
--- a/apps/web-giddh/src/app/inventory/components/forms/transfer-note/transfer-note.component.html
+++ b/apps/web-giddh/src/app/inventory/components/forms/transfer-note/transfer-note.component.html
@@ -1,11 +1,11 @@
 <div class="form-header">
 	<h2 class="">Transfer Note</h2>
 </div>
-<div class="form_body witBg clearfix margin-child-label">
-	<div class="form_bg clearfix">
+<div class="form-body white-bg clearfix margin-child-label">
+	<div class="clearfix">
 		<form [formGroup]="form" class="form-group">
 			<div class="row">
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Date <sup>*</sup></label>
 					<input name="dateRange" formControlName="inventoryEntryDate" type="text" autocomplete="off"
 						class="form-control" bsDatepicker [bsConfig]=" {dateInputFormat: giddhDateFormat}">
@@ -16,10 +16,10 @@ <h2 class="">Transfer Note</h2>
 					</span>
 				</div>
 
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Product Name <sup>*</sup></label>
 					<sh-select [options]="stockListOptions" [multiple]="false" [placeholder]="'Select Product'"
-						(selected)="stockChanged($event)" [ItemHeight]="'33'" formControlName="stock"></sh-select>
+						(selected)="stockChanged($event)" [ItemHeight]="'33'" formControlName="stock" [isRequired]="true"></sh-select>
 					<!-- <span *ngIf="stock.invalid">
               <span *ngIf="stock?.errors && stock?.errors['required']" class="text-danger">Please select Product.</span>
                     </span> -->
@@ -28,27 +28,27 @@ <h2 class="">Transfer Note</h2>
 
 			<div class="row">
 
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Sender's Name <sup>*</sup></label>
 					<sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Sender'"
-						formControlName="inventoryUser" [ItemHeight]="'33'"></sh-select>
+						formControlName="inventoryUser" [ItemHeight]="'33'" [isRequired]="true"></sh-select>
 					<!-- <span *ngIf="inventoryUser.invalid">
               <span *ngIf="inventoryUser?.errors && inventoryUser?.errors['required']"
                     class="text-danger">Please select Sender.</span>
                     </span> -->
 				</div>
 
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Receiver's Name <sup>*</sup></label>
 					<sh-select [options]="userListOptions" [multiple]="false" [placeholder]="'Select Receiver'"
-						(selected)="recieverUniqueName = $event.value" [ItemHeight]="'33'"></sh-select>
+						(selected)="recieverUniqueName = $event.value" [ItemHeight]="'33'" [isRequired]="true"></sh-select>
 					<!-- <span [hidden]="recieverUniqueName" class="text-danger">Please select Receiver.</span> -->
 				</div>
 			</div>
 
 
 			<div class="row">
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Quantity <sup>*</sup></label>
 					<input name="dateRange" type="text" class="form-control" formControlName="quantity"
 						[placeholder]="'Enter Quantity'" />
@@ -56,10 +56,10 @@ <h2 class="">Transfer Note</h2>
                 class="text-danger">Please enter quantity.</span> -->
 				</div>
 
-				<div class="col-xs-6 form-group">
+				<div class="col-6 form-group">
 					<label>Unit <sup>*</sup></label>
 					<sh-select [options]="stockUnitsOptions" [placeholder]="'Choose unit'" formControlName="stockUnit"
-						[multiple]="false" [ItemHeight]="33"></sh-select>
+						[multiple]="false" [ItemHeight]="33" [isRequired]="true"></sh-select>
 					<!-- <span *ngIf="stockUnit?.errors && stockUnit.errors['required']" class="text-danger">Please select Unit.</span> -->
 				</div>
 
@@ -74,7 +74,7 @@ <h2 class="">Transfer Note</h2>
 			</div>
 
 			<div class="row">
-				<div class="col-xs-12 text-left mr-t1">
+				<div class="col-md-12 text-left mr-t1">
 					<button class="btn btn-default" (click)="onCancel.emit($event)">Cancel</button>
 					<button class="btn btn-success" [ladda]="isLoading" [disabled]="form.invalid"
 						(click)="save()">Save</button>
diff --git a/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.html b/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.html
index 808c8627c71..0f1c96eda03 100644
--- a/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.html
+++ b/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.html
@@ -12,7 +12,7 @@
 
                                 <div class="col-sm-5">
                                     <div class="row mr-0 ml-0">
-                                        <div class="col-xs-5 p0 count-text">
+                                        <div class="col-5 p-0 count-text">
                                             <h4 class="text-light pl-0">
                                                 <div *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">Transaction Count
                                                 </div>
@@ -21,34 +21,34 @@ <h4 class="text-light pl-0">
                                                 <div class="mt-1">Profit/Loss</div>
                                             </h4>
                                         </div>
-                                        <div class="col-xs-7 p0">
-                                            <h4 class="text-orange text-right">
+                                        <div class="col-7 p-0">
+                                            <h4 class="text-purple text-right">
                                                 <div *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
-                                                    <span class="text-orange" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems | giddhCurrency}}</span>
+                                                    <span class="text-purple" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems | giddhCurrency}}</span>
                                                 </div>
                                                 <div class="" *ngIf="GroupStockReportRequest.branchDetails!=='allEntity'">
-                                                    <span class="text-orange" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems | giddhCurrency}}</span>
+                                                    <span class="text-purple" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems | giddhCurrency}}</span>
                                                 </div>
                                                 <div class="mt-1">
-                                                    <span class="text-orange d-block">{{groupStockReport.profit | giddhCurrency}}
+                                                    <span class="text-purple d-block">{{groupStockReport.profit | giddhCurrency}}
                                                     </span>
                                                 </div>
                                             </h4>
                                         </div>
                                     </div>
                                     <div class="row" *ngIf="groupStockReport.openingBalance.transactionCount">
-                                        <div class="col-xs-10 p0">
+                                        <div class="col-10 p-0">
                                             <h4>Inward</h4>
                                         </div>
-                                        <div class="col-xs-2 p0">
+                                        <div class="col-2 p-0">
                                             <h4>&nbsp;<span>{{groupStockReport.InwardBalance.transactionCount | giddhCurrency}}</span></h4>
                                         </div>
                                     </div>
                                     <div class="row" *ngIf="groupStockReport.outwardBalance.transactionCount">
-                                        <div class="col-xs-10 p0">
+                                        <div class="col-10 p-0">
                                             <h4>Outward</h4>
                                         </div>
-                                        <div class="col-xs-2 p0">
+                                        <div class="col-2 p-0">
                                             <h4>&nbsp;<span>{{groupStockReport.outwardBalance.transactionCount | giddhCurrency}}</span></h4>
                                         </div>
                                     </div>
@@ -94,8 +94,8 @@ <h4 *ngIf="groupStockReport.outwardBalance.quantity">
                                     <div class="flex-col">
                                         <div class="cont d-flex justify-content-between pt-1">
                                             <h4 class="text-light">Closing Value</h4>
-                                            <h2 class="text-orange">{{groupStockReport.closingBalance.amount | giddhCurrency}}</h2>
-                                            <h4 class="text-orange" *ngIf="groupStockReport.closingBalance.quantity">
+                                            <h2 class="text-purple">{{groupStockReport.closingBalance.amount | giddhCurrency}}</h2>
+                                            <h4 class="text-purple" *ngIf="groupStockReport.closingBalance.quantity">
                                                 ({{groupStockReport.closingBalance.quantity | giddhCurrency}} {{groupStockReport.closingBalance.stockUnit}})
                                             </h4>
                                         </div>
@@ -113,7 +113,7 @@ <h4 class="text-orange" *ngIf="groupStockReport.closingBalance.quantity">
     <div class="mb-2 d-none">
         <!-- enable branch selection after implimentation from api-->
         <div class="d-flex">
-            <div style="width: 230px;margin-right: 15px;">
+            <div class="mr-r15 sh-select-dropdown">
                 <div class="select-style middle">
                     <sh-select placeholder="Select Branch" name="entity" [(ngModel)]="selectedEntity" (selected)="selectEntity($event)" [options]="entities$ | async" [ItemHeight]="33"></sh-select>
                     <!-- html dropdown <select class="form-control" (change)="selectEntity($event.target.value)">
@@ -155,7 +155,7 @@ <h4 class="text-orange" *ngIf="groupStockReport.closingBalance.quantity">
       </ul>
     </div>
   </div> -->
-    <div class="fb__1-container mr-b1 mt-3">
+    <div class="fb-1-container mr-b1 mt-3">
         <div class="d-flex justify-content-between w-100">
             <div class="d-flex wrap-head-report">
                 <h2 class="mr-2 head-report" *ngIf="groupStockReport">
@@ -173,10 +173,10 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
             <div class="clearfix right-inventory">
 
                 <div class="btn-group" dropdown [autoClose]="true" placement="bottom right">
-                    <button class="btn-link icon-btn mr-15" (click)="editGroup()" tooltip="Edit group">
+                    <button class="btn-link icon-btn mr-r15" (click)="editGroup()" tooltip="Edit group">
                         <i class="icon-edit-pencil"></i>
                     </button>
-                    <button id="button-alignment" dropdownToggle type="button" class="btn-link mr-t cp mr-15 dropdown-toggle icon-btn" aria-controls="dropdown-alignment" tooltip="Download">
+                    <button id="button-alignment" dropdownToggle type="button" class="btn-link mr-t05 cp mr-r15 dropdown-toggle icon-btn" aria-controls="dropdown-alignment" tooltip="Download">
                         <i class="icon-download strong"></i>
                     </button>
                     <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-download" role="menu" aria-labelledby="button-alignment">
@@ -198,11 +198,11 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
 
     <section class="bottom-button-display">
         <div class="mobile-card-wrapper">
-            <table class="table basic table-border inventory-stock-table on-mobile-view table-responsive" [ngClass]="{'mB100': groupStockReport && groupStockReport.stockReport && groupStockReport.stockReport.length>6}">
+            <table class="table basic table-border inventory-stock-table on-mobile-view table-responsive" [ngClass]="{'mb-100': groupStockReport && groupStockReport.stockReport && groupStockReport.stockReport.length>6}">
                 <thead>
                     <tr>
                         <!-- in case of all entity with group -->
-                        <th colspan="4" class="bdrR" width="30%" style="padding: 0 !important;" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
+                        <th colspan="4" class="bd-rr p-0" width="30%" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
                             <!-- in case of all entity with group -->
                             <th colspan="2" class="bd-rr" width="17%" *ngIf="GroupStockReportRequest.branchDetails!='allEntity'">
 
@@ -211,13 +211,13 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                     <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker" />
                                 </div>
                             </th>
-                            <th class="text-center bdrR bdrB" width="20%" colspan="2">Opening stock</th>
-                            <th class="text-center bdrR bdrB" width="20%" colspan="2">Inwards</th>
-                            <th class="text-center bdrR bdrB" width="20%" colspan="2">Outwards</th>
-                            <th class="text-center bdrB" width="20%" colspan="2">Closing Stock</th>
+                            <th class="text-center bd-rr bd-rb" width="20%" colspan="2">Opening stock</th>
+                            <th class="text-center bd-rr bd-rb" width="20%" colspan="2">Inwards</th>
+                            <th class="text-center bd-rr bd-rb" width="20%" colspan="2">Outwards</th>
+                            <th class="text-center bd-rb" width="20%" colspan="2">Closing Stock</th>
                     </tr>
-                    <tr class="bdrT">
-                        <th colspan="2" class="bdrR td-search-box max-width-140" (clickOutside)="clickedOutside($event,null, 'product')">
+                    <tr class="bd-rt">
+                        <th colspan="2" class="bd-rr td-search-box max-width-140" (clickOutside)="clickedOutside($event,null, 'product')">
                             <div [hidden]="showProductSearch">
                                 <span>Product Name</span>
                                 <i class="icon-search" (click)="showProductSearchBox()"></i>
@@ -229,7 +229,7 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                             </div>
                         </th>
                         <!-- in case of all entity with group -->
-                        <th colspan="2" class="bdrR td-search-box max-width-140" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'" (clickOutside)="clickedOutside($event,null, 'source')">
+                        <th colspan="2" class="bd-rr td-search-box max-width-140" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'" (clickOutside)="clickedOutside($event,null, 'source')">
                             <div [hidden]="showSourceSearch">
                                 <span>Source</span>
                                 <i class="icon-search" (click)="showSourceSearchBox()"></i>
@@ -245,12 +245,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                             <div class="d-flex">
                                 <div class="flex-fill">Qty</div>
                                 <div class="icon-pointer">
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OPENING_STOCK_QTY'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OPENING_STOCK_QTY'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
 
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OPENING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OPENING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -261,12 +261,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Value</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OPENING_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OPENING_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OPENING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OPENING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OPENING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OPENING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -276,12 +276,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Qty</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'INWARDS_STOCK_QTY'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'INWARDS_STOCK_QTY'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'INWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'INWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -292,12 +292,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Value</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'INWARDS_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'INWARDS_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'INWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'INWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -307,12 +307,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill ">Qty</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OUTWARDS_STOCK_QTY'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OUTWARDS_STOCK_QTY'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OUTWARDS_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -323,12 +323,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Value</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OUTWARDS_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'OUTWARDS_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'OUTWARDS_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'OUTWARDS_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -338,12 +338,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Qty</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'CLOSING_STOCK_QTY'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'CLOSING_STOCK_QTY'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'CLOSING_STOCK_QTY')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'CLOSING_STOCK_QTY')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_QTY' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -354,12 +354,12 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                                 <div class="flex-fill">Value</div>
                                 <div class="icon-pointer">
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'CLOSING_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy !== 'CLOSING_STOCK_VALUE'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'activeTextColor': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'CLOSING_STOCK_VALUE')" [ngClass]="{'active-text-color': GroupStockReportRequest.sortBy === 'CLOSING_STOCK_VALUE' && GroupStockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
@@ -369,44 +369,44 @@ <h2 class="mr-2 head-report" *ngIf="groupStockReport">
                 <tbody *ngIf="!groupStockReportInProcess && groupStockReport && groupStockReport.count > 0">
                     <tr *ngFor="let txn of groupStockReport.stockReport">
                         <ng-container *ngIf="txn.openingBalance || txn.inwards || txn.outwards || txn.closingBalance">
-                            <td class="bdrB bdrR" colspan="2" data-title="Product Name">
+                            <td class="bd-rb bd-rr" colspan="2" data-title="Product Name">
                                 <span class="justify-content-between d-flex align-items-start">
                                 <span>{{txn.stockName}}</span>
                                 <span class="unit-badge pull-right text-light nowrap">{{txn.openingBalance?.stockUnit}}</span>
                                 </span>
                             </td>
                             <!-- in case of all entity with group -->
-                            <td colspan="2" class="bdrB bdrR max-width-140" data-title="Product Name" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
+                            <td colspan="2" class="bd-rb bd-rr max-width-140" data-title="Product Name" *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
                                 {{txn.stockName}}
                             </td>
                             <!-- in case of all entity with group end -->
                             <td data-title="Opening stock -" class="td-mobile-head"></td>
 
-                            <td class="bdrB bdrR text-right brNone" data-title="Qty">
+                            <td class="bd-rb bd-rr text-right brNone" data-title="Qty">
                                 <span [ngClass]="{'text-danger': txn.openingBalance?.quantity<0 }">{{txn.openingBalance?.quantity | giddhCurrency}}</span>
                             </td>
-                            <td class="bdrB bdrR text-right" data-title="Value">{{txn.openingBalance?.amount | giddhCurrency}}</td>
+                            <td class="bd-rb bd-rr text-right" data-title="Value">{{txn.openingBalance?.amount | giddhCurrency}}</td>
 
                             <td data-title="inwards -" class="td-mobile-head" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)"></td>
 
-                            <td class="bdrB bdrR text-right brNone" data-title="Qty" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">
+                            <td class="bd-rb bd-rr text-right brNone" data-title="Qty" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">
                                 <span [ngClass]="{'text-danger': txn.inwards?.quantity<0 }">{{txn.inwards?.quantity | giddhCurrency}}</span>
                             </td>
-                            <td class="bdrB bdrR text-right" data-title="Value" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">{{txn.inwards?.amount | giddhCurrency}}</td>
+                            <td class="bd-rb bd-rr text-right" data-title="Value" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">{{txn.inwards?.amount | giddhCurrency}}</td>
 
                             <td data-title="Outwards -" class="td-mobile-head" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)"></td>
 
-                            <td class="bdrB bdrR text-right brNone" data-title="Qty" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">
+                            <td class="bd-rb bd-rr text-right brNone" data-title="Qty" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">
                                 {{txn.outwards?.quantity | giddhCurrency}}
                             </td>
-                            <td class="bdrB bdrR text-right" data-title="Value" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">{{txn.outwards?.amount | giddhCurrency}}</td>
+                            <td class="bd-rb bd-rr text-right" data-title="Value" *ngIf="!isMobileScreen || (isMobileScreen && txn.showAllColumns)">{{txn.outwards?.amount | giddhCurrency}}</td>
 
                             <td data-title="Closing stock -" class="td-mobile-head"></td>
 
-                            <td class="bdrB bdrR text-right brNone" data-title="Qty">
+                            <td class="bd-rb bd-rr text-right brNone" data-title="Qty">
                                 <span [ngClass]="{'text-danger': txn.closingBalance?.quantity<0 }">{{txn.closingBalance?.quantity | giddhCurrency}}</span>
                             </td>
-                            <td class="bdrB bdrR text-right" data-title="Value">{{txn.closingBalance?.amount | giddhCurrency}}</td>
+                            <td class="bd-rb bd-rr text-right" data-title="Value">{{txn.closingBalance?.amount | giddhCurrency}}</td>
 
                         </ng-container>
 
@@ -468,7 +468,7 @@ <h1 [class.group-not-found]="groupNotFoundMessage">
 
                         <div class="col-lg-5 col-md-12 pr-0">
                             <div class="row">
-                                <div class="col-xs-4 p0 count-text">
+                                <div class="col-4 p-0 count-text">
                                     <h4 class="text-light">
                                         <div *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">Transaction Count
                                         </div>
@@ -477,35 +477,35 @@ <h4 class="text-light">
                                         <div class="mt-1">Profit/Loss</div>
                                     </h4>
                                 </div>
-                                <div class="col-xs-8 p0">
-                                    <h4 class="text-orange text-left">
+                                <div class="col-8 p-0">
+                                    <h4 class="text-purple text-left">
                                         <div *ngIf="GroupStockReportRequest.branchDetails==='allEntity'">
-                                            <span class="text-orange" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems  | giddhCurrency}}</span>
+                                            <span class="text-purple" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems  | giddhCurrency}}</span>
                                         </div>
                                         <div class="" *ngIf="GroupStockReportRequest.branchDetails!=='allEntity'">
-                                            <span class="text-orange" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems  | giddhCurrency}}</span>
+                                            <span class="text-purple" *ngIf="groupStockReport.totalItems">&nbsp;{{groupStockReport.totalItems  | giddhCurrency}}</span>
                                         </div>
                                         <div class="mt-1">
                                             <span
-                                                class="text-orange d-block">{{groupStockReport.profit | giddhCurrency}}
+                                                class="text-purple d-block">{{groupStockReport.profit | giddhCurrency}}
                                                 ({{dateRangePickerCmp?.nativeElement?.value | replaceHyphens}})</span>
                                         </div>
                                     </h4>
                                 </div>
                             </div>
                             <div class="row" *ngIf="groupStockReport.openingBalance.transactionCount">
-                                <div class="col-xs-10 p0">
+                                <div class="col-10 p-0">
                                     <h4>Inward</h4>
                                 </div>
-                                <div class="col-xs-2 p0">
+                                <div class="col-2 p-0">
                                     <h4>&nbsp;<span>{{groupStockReport.InwardBalance.transactionCount | giddhCurrency}}</span></h4>
                                 </div>
                             </div>
                             <div class="row" *ngIf="groupStockReport.outwardBalance.transactionCount">
-                                <div class="col-xs-10 p0">
+                                <div class="col-10 p-0">
                                     <h4>Outward</h4>
                                 </div>
-                                <div class="col-xs-2 p0">
+                                <div class="col-2 p-0">
                                     <h4>&nbsp;<span>{{groupStockReport.outwardBalance.transactionCount | giddhCurrency}}</span></h4>
                                 </div>
                             </div>
@@ -551,8 +551,8 @@ <h4 *ngIf="groupStockReport.outwardBalance.quantity">
                             <div class="flex-col">
                                 <div class="cont">
                                     <h4 class="text-light">Closing Value</h4>
-                                    <h2 class="text-orange">{{groupStockReport.closingBalance.amount | giddhCurrency}}</h2>
-                                    <h4 class="text-orange" *ngIf="groupStockReport.closingBalance.quantity">
+                                    <h2 class="text-purple">{{groupStockReport.closingBalance.amount | giddhCurrency}}</h2>
+                                    <h4 class="text-purple" *ngIf="groupStockReport.closingBalance.quantity">
                                         ({{groupStockReport.closingBalance.quantity | giddhCurrency}} {{groupStockReport.closingBalance.stockUnit}})
                                     </h4>
                                 </div>
@@ -582,7 +582,7 @@ <h4 class="text-orange" *ngIf="groupStockReport.closingBalance.quantity">
 <div bsModal #advanceSearchModel="bs-modal" class="modal fade" role="dialog">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="modal-header themeBg clearfix">
+            <div class="modal-header theme-bg clearfix">
                 <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 <span aria-hidden="true" class="close" data-dismiss="modal" (click)="advanceSearchAction('cancel')">×</span>
             </div>
@@ -626,7 +626,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                         </div>
                     </div>
 
-                    <div class="row mr-t4 mrB3">
+                    <div class="row mr-t4 mr-b3">
                         <div class="col-xs-12 col-sm-12 text-right">
                             <button class="btn btn-success" type="button" [disabled]="!isFilterCorrect || !GroupStockReportRequest.condition || !GroupStockReportRequest.entity || !GroupStockReportRequest.value || !GroupStockReportRequest.number" (click)="advanceSearchAction('search')">Search
                             </button>
diff --git a/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.scss b/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.scss
index 3b85333e147..b2a4565af4f 100644
--- a/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/group-stock-report-component/group.stockreport.component.scss
@@ -1,18 +1,18 @@
 @import "../../../../assets/css/color.scss";
-.bdrT {
-    border-color: #ccc;
+.bd-rt {
+    border-color: $gainsboro;
 }
 
-:host ::ng-deep .fb__1-container {
+:host ::ng-deep .fb-1-container {
     justify-content: flex-start;
 }
 
-:host ::ng-deep .fb__1-container .form-group {
+:host ::ng-deep .fb-1-container .form-group {
     margin-right: 10px;
     margin-bottom: 0;
 }
 
-:host ::ng-deep .fb__1-container .date-range-picker {
+:host ::ng-deep .fb-1-container .date-range-picker {
     min-width: 150px;
 }
 
@@ -44,14 +44,14 @@ table {
 
 
 /* .table.basic tbody tr td {
-    background-color: #fff;
+    background-color: $white;
 }
 
 .table.basic .table tbody tr td {
     border: none;
 } */
 
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
@@ -67,7 +67,7 @@ table {
 }
 
 tfoot {
-    background: #fff;
+    background: $white;
 } */
 
 .flex-fill {
@@ -75,8 +75,8 @@ tfoot {
     padding-right: 2px;
 }
 
-.d-flex {
-    display: flex;
+.sh-select-dropdown{
+    width: 230px;
 }
 
 
@@ -95,7 +95,7 @@ tfoot {
 
 .td-search-box div i {
     margin-top: 1px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     padding-right: 8px;
     cursor: pointer;
     display: flex;
@@ -116,7 +116,7 @@ tfoot {
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
     background-color: $white-smoke;
 }
@@ -133,7 +133,7 @@ tfoot {
 }
 
 .basic>thead>tr>th {
-    border-right: 1px solid #cdcdcd;
+    border-right: 1px solid $gainsboro;
 }
 
 .icon-pointer .glyphicon {
@@ -146,7 +146,7 @@ tfoot {
 
 .dropdown-menu>li>a:hover {
     color: $chetwode-blue;
-    background: $gray-90;
+    background: $whisper;
 }
 
 .stock-input {
@@ -162,16 +162,16 @@ tfoot {
 }
 
 .footer-tr td {
-    background-color: $gray-90;
+    background-color: $whisper;
 }
 
 .total-footer {
     background-color: $white;
     display: flex;
-    .footitem {
+    .foot-item {
         padding: 41px;
         h2 {
-            color: #8f9091;
+            color: $wistful;
             font-size: 20px;
             margin-bottom: 10px;
         }
@@ -206,7 +206,7 @@ tfoot {
 .capitalize {
     text-transform: capitalize;
 }
-.bdrN {
+.border-none {
     border: none !important;
 }
 
@@ -222,10 +222,10 @@ tfoot {
 .icon-pointer .icon-sort-dsc {
     line-height: 20px;
     width: 15px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
 }
 
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 
@@ -248,7 +248,7 @@ tfoot {
         }
         .operators {
             font-size: 39px;
-            color: #8f9091;
+            color: $wistful;
         }
         h2 {
             font-size: 18px;
@@ -291,15 +291,15 @@ tfoot {
   z-index: 1;
 }*/
 
-.text-orange {
-    color: #5b64c9;
+.text-purple {
+    color: $chetwode-blue;
 }
 
 .btn-link-2 {
-    color: #0c8fe6;
+    color: $vivid-blue;
 }
 
-.mB100 {
+.mb-100 {
     margin-bottom: 100px;
 }
 
@@ -319,10 +319,10 @@ td.brNone {
     justify-content: center;
     align-items: center;
     font-size: 18px;
-    border: 1px solid #5b64c9;
+    border: 1px solid $chetwode-blue;
     border-radius: 2px;
-    color: #1a237e;
-    background: #fff;
+    color: $midnight-blue;
+    background: $white;
 }
 
 .inventory-stock-table{
@@ -338,10 +338,10 @@ td.brNone {
 }
 
 button.btn.btn-filter {
-    background: #e4e4e4;
-    border: 1px solid #e4e4e4;
+    background: $whisper;
+    border: 1px solid $gainsboro;
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
@@ -353,12 +353,12 @@ button.btn.btn-filter {
 }
 
 .inventory-stock-table input.form-control.stock-input {
-    color: #1c1c1c;
+    color: $nero;
     text-align: left;
 }
 
 .recept-modal .modal-title {
-    color: #fff;
+    color: $white;
 }
 
 .mt-0 {
diff --git a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.add.component.html b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.add.component.html
index 275ef2b4a09..01a9d893963 100644
--- a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.add.component.html
+++ b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.add.component.html
@@ -1,22 +1,22 @@
-<section class="reciptNote" autocomplete="off">
-    <div class="reciptNoteHeader d-flex pl-15 pr-15">
+<section class="receipt-note" autocomplete="off">
+    <div class="receipt-note-header d-flex pd-l15 pd-r15">
         <h3 *ngIf="branchTransferMode === 'receiptnote'">Receipt Note</h3>
         <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
-        <div class="closeRecipt pointer" (click)="closeBranchTransferPopup()">
+        <div class="close-receipt pointer" (click)="closeBranchTransferPopup()">
             <span class="icon-cross"></span>
         </div>
     </div>
-    <div class="reciptNoteContent">
-        <div class="reciptNoteRadioBtn pr-15 pl-15 mb-15" *ngIf="!editBranchTransferUniqueName">
-            <span class="pd0 mrR3">
-                <input id="multipleProducts" class="radio-custom cp ml0" type="radio" [ngClass]="{'radio_theme': 1 === 1, 'transfertype-checked': transferType === 'products'}"
+    <div class="receipt-note-content">
+        <div class="receipt-note-radio-btn pd-r15 pd-l15 mr-b15" *ngIf="!editBranchTransferUniqueName">
+            <span class="p-0 mr-r3">
+                <input id="multipleProducts" class="radio-custom cp ml-0" type="radio" [ngClass]="{'radio-theme': 1 === 1, 'transfer-type-checked': transferType === 'products'}"
                 name="transferType"
                 (click)="changeTransferType();" [(ngModel)]="transferType" [value]="'products'">
                 <label for="multipleProducts" class="radio-custom-label">Multiple Products</label>
             </span>
 
-            <span class="pd0 mrR3">
-                <input id="multipleSenders" class="radio-custom cp ml0" type="radio" [ngClass]="{'radio_theme': 1 === 1, 'transfertype-checked': transferType === 'senders'}"
+            <span class="p-0 mr-r3">
+                <input id="multipleSenders" class="radio-custom cp ml-0" type="radio" [ngClass]="{'radio-theme': 1 === 1, 'transfer-type-checked': transferType === 'senders'}"
                 name="transferType" type="radio"
                 (click)="changeTransferType();" [(ngModel)]="transferType" [value]="'senders'">
                 <label for="multipleSenders" class="radio-custom-label" *ngIf="branchTransferMode === 'receiptnote'">Multiple Senders</label>
@@ -26,9 +26,9 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
 
         </div>
         <div class="mb-2" *ngIf="editBranchTransferUniqueName"></div>
-        <div class="multiple-products-wrapper  ">
+        <div class="multiple-products-wrapper">
             <form #newBranchTransferForm="ngForm" novalidate="">
-                <div class="multiple-products row clearfix pl-15 pr-15">
+                <div class="multiple-products row clearfix pd-l15 pd-r15">
                     <div class="col-lg-6 col-md-8" *ngIf="branchTransferMode === 'deliverynote'">
                         <div class="row mr-b2">
                             <div class="col-xl-3 col-lg-4">
@@ -49,7 +49,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #defaultProduct name="productName" [notFoundLink]="true" (noResultsClicked)="onProductNoResultsClicked(0)" [isFilterEnabled]="true" [options]="stockList" [(ngModel)]="branchTransfer.products[0].uniqueName" [forceClearReactive]="forceClear$ | async"
-                                    (selected)="selectProduct($event, branchTransfer.products[0])" required></sh-select>
+                                    (selected)="selectProduct($event, branchTransfer.products[0])" required [isRequired]="true"></sh-select>
                             </div>
                         </div>
                         <div *ngIf="transferType === 'senders'" class="row mr-b2">
@@ -84,7 +84,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                                     [disabled]="(isBranch || isCompanyWithSingleBranch)">
                                 <sh-select *ngIf="isUpdateMode" #defaultSource name="sourceName" [isFilterEnabled]="true"
                                     [(ngModel)]="branchTransfer.sources[0].uniqueName"
-                                    [options]="branches$ | async" [forceClearReactive]="sourceBranchClear$ | async" (selected)="selectCompany($event, 'sources', 0); focusSourceWarehouse($event)" required
+                                    [options]="branches$ | async" [forceClearReactive]="sourceBranchClear$ | async" (selected)="selectCompany($event, 'sources', 0); focusSourceWarehouse($event)" required [isRequired]="true"
                                     [disabled]="isUpdateMode"></sh-select>
                             </div>
                         </div>
@@ -96,7 +96,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #sourceWarehouse name="sourceWarehouse" [options]="senderWarehouses[branchTransfer.sources[0].uniqueName]" [isFilterEnabled]="true" [forceClearReactive]="senderWarehouseClear$ | async" [(ngModel)]="branchTransfer.sources[0].warehouse.uniqueName" (selected)="getWarehouseDetails('sources', 0); focusDestinationName();"
-                                    required (onClear)="resetWarehouse('sources', 0)">
+                                    required [isRequired]="true" (onClear)="resetWarehouse('sources', 0)">
                                 </sh-select>
                             </div>
                         </div>
@@ -128,7 +128,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #destinationName name="destinationName" [(ngModel)]="branchTransfer.destinations[0].uniqueName" [isFilterEnabled]="true" [forceClearReactive]="destinationBranchClear$ | async" [options]="branches$ | async" (selected)="selectCompany($event, 'destinations', 0); focusDestinationWarehouse($event);"
-                                    required [disabled]="isUpdateMode"></sh-select>
+                                    required [isRequired]="true" [disabled]="isUpdateMode"></sh-select>
                             </div>
                         </div>
                         <div class="row mr-b2" *ngIf="transferType !== 'senders'">
@@ -139,7 +139,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #destinationWarehouse name="destinationWarehouse" [options]="destinationWarehouses[branchTransfer.destinations[0].uniqueName]" [isFilterEnabled]="true" [forceClearReactive]="destinationWarehouseClear$ | async" [(ngModel)]="branchTransfer.destinations[0].warehouse.uniqueName"
-                                    (selected)="getWarehouseDetails('destinations', 0); focusSelectDropdown(0, $event);" required (onClear)="resetWarehouse('destinations', 0)"></sh-select>
+                                    (selected)="getWarehouseDetails('destinations', 0); focusSelectDropdown(0, $event);" required [isRequired]="true" (onClear)="resetWarehouse('destinations', 0)"></sh-select>
                             </div>
                         </div>
                         <div class="row mr-b2" *ngIf="transferType !== 'senders' && formFields && formFields['taxName']">
@@ -183,7 +183,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #defaultProduct name="productName" [notFoundLink]="true" (noResultsClicked)="onProductNoResultsClicked(0)" [isFilterEnabled]="true" [forceClearReactive]="forceClear$ | async" [options]="stockList" [(ngModel)]="branchTransfer.products[0].uniqueName"
-                                    (selected)="selectProduct($event, branchTransfer.products[0]); focusDestinationWarehouse();" required></sh-select>
+                                    (selected)="selectProduct($event, branchTransfer.products[0]); focusDestinationWarehouse();" required [isRequired]="true"></sh-select>
                             </div>
                         </div>
                         <div *ngIf="transferType === 'senders'" class="row mr-b2">
@@ -214,7 +214,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                                 </label>
                             </div>
                             <div class="col-xl-6 col-lg-8">
-                                <sh-select #defaultSource name="sourceName" [isFilterEnabled]="true" [(ngModel)]="branchTransfer.sources[0].uniqueName" [options]="branches$ | async" (selected)="selectCompany($event, 'sources', 0)" required
+                                <sh-select #defaultSource name="sourceName" [isFilterEnabled]="true" [(ngModel)]="branchTransfer.sources[0].uniqueName" [options]="branches$ | async" (selected)="selectCompany($event, 'sources', 0)" required [isRequired]="true"
                                     [disabled]="isUpdateMode" (selected)="focusSourceWarehouse($event)" [forceClearReactive]="sourceBranchClear$ | async"></sh-select>
                             </div>
                         </div>
@@ -226,7 +226,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #sourceWarehouse name="sourceWarehouse" [isFilterEnabled]="true" [forceClearReactive]="senderWarehouseClear$ | async" [options]="senderWarehouses[branchTransfer.sources[0].uniqueName]" [(ngModel)]="branchTransfer.sources[0].warehouse.uniqueName" (selected)="focusDestinationWarehouse($event); getWarehouseDetails('sources', 0)"
-                                    required (onClear)="resetWarehouse('sources', 0)"></sh-select>
+                                    required [isRequired]="true" (onClear)="resetWarehouse('sources', 0)"></sh-select>
                             </div>
                         </div>
                         <div class="row mr-b2" *ngIf="transferType !== 'senders' && formFields && formFields['taxName']">
@@ -259,7 +259,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                                 <sh-select *ngIf="isUpdateMode" #destinationName name="destinationName"
                                     [(ngModel)]="branchTransfer.destinations[0].uniqueName" [isFilterEnabled]="true"
                                     [forceClearReactive]="destinationBranchClear$ | async" [options]="branches$ | async"
-                                    (selected)="selectCompany($event, 'destinations', 0); focusDestinationWarehouse($event);" required
+                                    (selected)="selectCompany($event, 'destinations', 0); focusDestinationWarehouse($event);" required [isRequired]="true"
                                     [disabled]="isUpdateMode"></sh-select>
                                 <input *ngIf="(isBranch || isCompanyWithSingleBranch) && !isUpdateMode" name="destinationName" class="form-control" [(ngModel)]="myCurrentCompany" required
                                     [disabled]="(isBranch || isCompanyWithSingleBranch)">
@@ -273,7 +273,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                             </div>
                             <div class="col-xl-6 col-lg-8">
                                 <sh-select #destinationWarehouse name="destinationWarehouse" [isFilterEnabled]="true" [forceClearReactive]="destinationWarehouseClear$ | async" [options]="destinationWarehouses[branchTransfer.destinations[0].uniqueName]" [(ngModel)]="branchTransfer.destinations[0].warehouse.uniqueName"
-                                    (selected)="getWarehouseDetails('destinations', 0); focusSelectDropdown(0, $event);" (onClear)="resetWarehouse('destinations', 0)" required></sh-select>
+                                    (selected)="getWarehouseDetails('destinations', 0); focusSelectDropdown(0, $event);" (onClear)="resetWarehouse('destinations', 0)" required [isRequired]="true"></sh-select>
                             </div>
                         </div>
                         <div class="row mr-b2" *ngIf="formFields && formFields['taxName']">
@@ -298,7 +298,7 @@ <h3 *ngIf="branchTransferMode === 'deliverynote'">Delivery Challan</h3>
                         </div>
                     </div>
                     <div class="col-lg-6 col-md-4">
-                        <div class="rightTotalAmount">
+                        <div class="right-total-amount">
                             <p>Total Amount</p>
                             <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                         </div>
@@ -332,7 +332,7 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                 <td class="min-wid-product">
                                     <div *ngIf="activeRow === i">
                                         <sh-select name="productName{{i}}" #selectDropdown [notFoundLink]="true" (noResultsClicked)="onProductNoResultsClicked(i)" [isFilterEnabled]="true" [forceClearReactive]="forceClear$ | async" [options]="stockList" [(ngModel)]="product.uniqueName" (selected)="selectProduct($event, product);"></sh-select>
-                                        <div class="pos-rel">
+                                        <div class="position-relative">
                                             <div class="skuCode" (click)="focusSkuNumber();" *ngIf="activeRow == i && product.uniqueName">
                                                 <label class="">SKU Code: </label>
                                                 <span>{{product.skuCode}}
@@ -341,10 +341,10 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                                     </span>
                                                 </span>
                                             </div>
-                                            <div class="hsnCodeDropdown skuNumberDropdown" *ngIf="skuNumberPopupShow && activeRow == i">
+                                            <div class="hsn-code-dropdown sku-number-dropdown" *ngIf="skuNumberPopupShow && activeRow == i">
                                                 <label>SKU Code:</label>
                                                 <input type="text" maxlength="50" placeholder="SKU Code" name="productSkuCode{{i}}" #productSkuCode [(ngModel)]="skuNumber" />
-                                                <div class="btngroup m-t-10">
+                                                <div class="btn-group m-t-10">
                                                     <button class="btn btn-sm btn-success" type="button" (click)="saveSkuNumberPopup(product)">Save</button>
                                                     <button class="btn btn-sm btn-primary" type="button" (click)="hideSkuNumberPopup()">Cancel</button>
                                                 </div>
@@ -360,8 +360,8 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                         <div *ngIf="product.description">{{product.description}}</div>
                                         <div *ngIf="(!product?.name && !product?.description && !(product?.hsnNumber || product?.sacNumber) && !product?.skuCode)" class="placeholder-for-table">Enter product details</div>
                                     </div>
-                                    <div class="pos-rel">
-                                        <div class="hsnCode text-right" (click)="focusHsnNumber();" *ngIf="activeRow == i">
+                                    <div class="position-relative">
+                                        <div class="hsn-code text-right" (click)="focusHsnNumber();" *ngIf="activeRow == i">
                                             <label>HSN/SAC Code: </label>
                                             <span>{{ (inventorySettings?.manageInventory || !product.sacNumber) ? product.hsnNumber : product.sacNumber}}
                                                 <span class="edit-icon cp">
@@ -369,10 +369,10 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="hsnCodeDropdown" *ngIf="hsnPopupShow && activeRow == i">
+                                        <div class="hsn-code-dropdown" *ngIf="hsnPopupShow && activeRow == i">
                                             <label>HSN/SAC Code</label>
                                             <input type="text" maxlength="8" placeholder="HSN/SAC Code" name="productHsnNumber{{i}}" #productHsnNumber [(ngModel)]="hsnNumber" />
-                                            <div class="btngroup m-t-10 d-block">
+                                            <div class="btn-group m-t-10 d-block">
                                                 <button class="btn btn-sm btn-success" type="button" (click)="saveHsnNumberPopup(product)">Save</button>
                                                 <button class="btn btn-sm btn-primary" type="button" (click)="hideHsnNumberPopup()">Cancel</button>
                                             </div>
@@ -396,7 +396,7 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                         <div class="text-right">{{activeCompany?.baseCurrencySymbol}} {{product.stockDetails.rate | giddhCurrency}}</div>
                                     </div>
                                 </td>
-                                <td class="pos-rel min-wid-amt">
+                                <td class="position-relative min-wid-amt">
                                     <div *ngIf="activeRow === i">
                                         <input type="text" class="form-control text-right" name="productAmount{{i}}" decimalDigitsDirective readonly [(ngModel)]="product.stockDetails.amount" [prefix]="activeCompany?.baseCurrencySymbol" [validation]="false" [mask]="inputMaskFormat" (blur)="dispatchDate.show(); hideActiveRow();">
                                     </div>
@@ -451,7 +451,7 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                         <div class="text-right">{{activeCompany?.baseCurrencySymbol}} {{destination.warehouse.stockDetails.rate | giddhCurrency}}</div>
                                     </div>
                                 </td>
-                                <td class="pos-rel">
+                                <td class="position-relative">
                                     <div *ngIf="activeRow === i">
                                         <input type="text" class="form-control text-right" name="destinationAmount{{i}}" decimalDigitsDirective readonly [(ngModel)]="destination.warehouse.stockDetails.amount" [prefix]="activeCompany?.baseCurrencySymbol" [validation]="false" [mask]="inputMaskFormat"
                                             (blur)="dispatchDate.show(); hideActiveRow();">
@@ -504,7 +504,7 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                                         <div class="text-right">{{activeCompany?.baseCurrencySymbol}} {{source.warehouse.stockDetails.rate | giddhCurrency}}</div>
                                     </div>
                                 </td>
-                                <td class="pos-rel">
+                                <td class="position-relative">
                                     <div *ngIf="activeRow === i">
                                         <input type="text" class="form-control text-right" name="sourceAmount{{i}}" decimalDigitsDirective readonly [(ngModel)]="source.warehouse.stockDetails.amount" [prefix]="activeCompany?.baseCurrencySymbol" [validation]="false" [mask]="inputMaskFormat" (blur)="dispatchDate.show(); hideActiveRow();">
                                     </div>
@@ -519,22 +519,22 @@ <h3>{{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}</h3>
                         </tbody>
                         <tfoot id="tfoot">
                             <tr>
-                                <td colspan="4" class="no-padding">
-                                        <div class="addNewLine mr-t1">
-                                                <a class="multipleRecivers" (click)="addReceiver()" *ngIf="transferType !== 'products' && branchTransferMode === 'deliverynote'"> + Add
+                                <td colspan="4" class="p-0">
+                                        <div class="add-new-line mr-t1">
+                                                <a class="multiple-receivers" (click)="addReceiver()" *ngIf="transferType !== 'products' && branchTransferMode === 'deliverynote'"> + Add
                                                     Multiple Receivers</a>
-                                                <a class="multipleRecivers" (click)="addSender()" *ngIf="transferType !== 'products' && branchTransferMode === 'receiptnote'"> + Add
+                                                <a class="multiple-receivers" (click)="addSender()" *ngIf="transferType !== 'products' && branchTransferMode === 'receiptnote'"> + Add
                                                     Multiple Senders</a>
-                                                <a class="multipleRecivers" (click)="addProduct()" *ngIf="transferType === 'products'"> <i class="icon-plus font-10"></i> Add Multiple Products</a>
+                                                <a class="multiple-receivers" (click)="addProduct()" *ngIf="transferType === 'products'"> <i class="icon-plus font-10"></i> Add Multiple Products</a>
                                             </div>
                                 </td>
                                 <td colspan="4">
-                                    <section class="tableSec form-group">
-                                        <div class="tableRow ">
-                                            <div class="tableCell bigger-dollar">
+                                    <section class="table-sec form-group">
+                                        <div class="table-row">
+                                            <div class="table-cell bigger-dollar">
                                                 <strong>Total</strong>
                                             </div>
-                                            <div class="tableCell figureCell">
+                                            <div class="table-cell figure-cell">
                                                 {{activeCompany?.baseCurrencySymbol}} {{overallTotal | giddhCurrency}}
                                             </div>
                                         </div>
@@ -596,7 +596,7 @@ <h3 class="mr-b1">Note</h3>
         <div class="form-header">
             <h3 class="aside-title">Manage Transporter</h3>
         </div>
-        <button type="button" class="mt-05" id="close" (click)="toggleTransporterModel()"><i
+        <button type="button" class="mr-t05" id="close" (click)="toggleTransporterModel()"><i
                 class="icon-cross"></i></button>
         <form #generateTransporterForm="ngForm" autocomplete="off">
             <div class="aside-body pt-2 pb-1 pr-2 pl-2 bg-gray">
@@ -616,11 +616,11 @@ <h3 class="aside-title">Manage Transporter</h3>
                 </div>
                 <div class="form-group mt-3">
                     <div class="clearfix" *ngIf="!transportEditMode">
-                        <button class="btn btn-md btn-success mrR1" [disabled]="generateTransporterForm.invalid" [ladda]="isGenarateTransporterInProcess$ | async" (click)="generateTransporter(generateTransporterForm)" type="submit">Save</button>
+                        <button class="btn btn-md btn-success mr-r1" [disabled]="generateTransporterForm.invalid" [ladda]="isGenarateTransporterInProcess$ | async" (click)="generateTransporter(generateTransporterForm)" type="submit">Save</button>
                         <button class="btn btn-md btn-danger" (click)="clearTransportForm()" type="submit">Clear</button>
                     </div>
                     <div class="clearfix" *ngIf="transportEditMode">
-                        <button class="btn btn-md btn-green mrR1" [ladda]="updateTransporterInProcess$ | async" (click)="updateTransporter(generateTransporterForm)" type="submit">Update</button>
+                        <button class="btn btn-md btn-green mr-r1" [ladda]="updateTransporterInProcess$ | async" (click)="updateTransporter(generateTransporterForm)" type="submit">Update</button>
                         <button class="btn btn-md btn-danger" (click)="clearTransportForm()">Clear</button>
                     </div>
                 </div>
@@ -632,18 +632,18 @@ <h3 class="aside-title">Manage Transporter</h3>
                     <tr>
                         <th width="45%">Name
                             <div class="icon-pointer pull-right">
-                                <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs" (click)="sortButtonClicked('asc', 'transporterName')" [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'asc'}">
+                                <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs" (click)="sortButtonClicked('asc', 'transporterName')" [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'asc'}">
                                 </div>
-                                <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs" (click)="sortButtonClicked('desc', 'transporterName')" [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'desc'}">
+                                <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs" (click)="sortButtonClicked('desc', 'transporterName')" [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'desc'}">
                                 </div>
                             </div>
                         </th>
                         <th width="45%">
                             Transporter ID
                             <div class="icon-pointer pull-right">
-                                <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs" (click)="sortButtonClicked('asc', 'transporterId')" [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'asc'}">
+                                <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs" (click)="sortButtonClicked('asc', 'transporterId')" [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'asc'}">
                                 </div>
-                                <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs" (click)="sortButtonClicked('desc', 'transporterId')" [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'desc'}">
+                                <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs" (click)="sortButtonClicked('desc', 'transporterId')" [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'desc'}">
                                 </div>
                             </div>
                         </th>
@@ -660,11 +660,11 @@ <h3 class="aside-title">Manage Transporter</h3>
                 </tr>
             </table>
         </div>
-        <div class="alC mt-4 mb-4" *ngIf="transporterListDetails">
+        <div class="text-center mt-4 mb-4" *ngIf="transporterListDetails">
             <pagination [totalItems]="transporterListDetails.totalPages" [(ngModel)]="transporterListDetails.page" [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="1" [rotate]="false" (pageChanged)="pageChanged($event)"></pagination>
         </div>
     </div>
 </div>
 <div class="aside-overlay" *ngIf="asideMenuState === 'in'"></div>
-<aside-menu-product-service *ngIf="asideMenuState === 'in'" [class]="asideMenuState" [@slideInOut]="asideMenuState" (closeAsideEvent)="onProductNoResultsClicked(null)">
+<aside-menu-product-service *ngIf="asideMenuState === 'in'" [class]="asideMenuState" [@slideInOut]="asideMenuState" (closeAsideEvent)="onProductNoResultsClicked(null)" [selectedVoucherType]="'sales'">
 </aside-menu-product-service>
diff --git a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.component.scss b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.component.scss
index 116591dca99..4aff0262fab 100644
--- a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.component.scss
@@ -1,26 +1,26 @@
 @import "../../../../assets/css/color.scss";
-.reciptNoteHeader {
+.receipt-note-header {
     display: flex;
     justify-content: space-between;
-    background-color: #fff;
-    border-bottom: 1px solid #c4c4c4;
+    background-color: $white;
+    border-bottom: 1px solid $silver;
     font-size: 18px;
     font-family: "opensans-bold";
     padding-top: 10px;
     padding-bottom: 10px;
     align-items: center;
-    color: #1a237e;
+    color: $midnight-blue;
 }
-section.reciptNote {
-    background-color: #fff;
+section.receipt-note {
+    background-color: $white;
 }
-.reciptNoteRadioBtn {
+.receipt-note-radio-btn {
     padding-top: 15px;
     padding-bottom: 15px;
-    color: #1c1c1c;
-    border-bottom: 1px solid #c4c4c4;
+    color: $nero;
+    border-bottom: 1px solid $silver;
 }
-.reciptNoteContent {
+.receipt-note-content {
     font-size: 14px;
     height: 86vh;
     overflow-y: auto;
@@ -30,16 +30,16 @@ section.reciptNote {
 .multiple-products label {
     vertical-align: middle;
     line-height: 2.5;
-    color: #1c1c1c;
+    color: $nero;
 }
 #table-recipt th,
 #table-recipt td {
-    border-left: 1px solid #ddd !important;
+    border-left: 1px solid $gainsboro !important;
 }
 #table-recipt td {
     vertical-align: top !important;
 }
-.tableSec .tableRow .tableCell {
+.table-sec .table-row .table-cell {
     vertical-align: middle;
     text-align: right;
     padding-bottom: 7px;
@@ -47,10 +47,10 @@ section.reciptNote {
     width: 200px;
 }
 button.btn.btn-filter {
-    background: #e4e4e4;
-    border: 1px solid #e4e4e4;
+    background: $whisper;
+    border: 1px solid $whisper;
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     display: -webkit-inline-box;
     display: inline-flex;
     -webkit-box-pack: justify;
@@ -65,42 +65,42 @@ button.btn.btn-filter {
     margin-bottom: 12px;
     margin-top: 5px;
 }
-.tableSec .tableRow .figureCell {
+.table-sec .table-row .figure-cell {
     width: 140px;
     padding-right: 0;
 }
-.tableSec {
+.table-sec {
     float: right;
     margin-right: 35px;
 }
-tfoot td .tableSec.form-group {
+tfoot td .table-sec.form-group {
     margin-right: 0;
 }
 #table-recipt #tfoot tr td {
     border: none !important;
 }
-.copyReciptNote {
+.copy-receipt-note {
     position: absolute;
     right: -60%;
     top: 9px;
     font-size: 12px;
-    color: #0c8fe6;
+    color: $primary;
     z-index: 9;
 }
-.senderDetails,
-.senderRecivers,
-.multipleRecivers {
+.sender-details,
+.sender-receivers,
+.multiple-receivers {
     font-size: 12px;
-    color: #0c8fe6;
+    color: $primary;
     margin-top: 7px;
     cursor: pointer;
 }
-.rightTotalAmount {
+.right-total-amount {
     text-align: right;
-    color: #1c1c1c;
+    color: $nero;
 }
 
-.rightTotalAmount h3 {
+.right-total-amount h3 {
     font-size: 26px;
     font-family: opensans-semibold;
 }
@@ -114,21 +114,21 @@ tfoot td .tableSec.form-group {
     border-bottom: 1px solid $gainsboro;
 }
 #actionPane {
-    background-color: #ccc;
+    background-color: $very-light-gray;
     padding: 20px 0;
 }
 .btn-success-text {
-    background-color: #e6e6e6;
-    color: #28ab00;
+    background-color: $whisper;
+    color: $success-green;
 }
 .btn-danger:hover {
-    background-color: #e6e6e6;
+    background-color: $whisper;
 }
 
-.hsnCodeDropdown {
+.hsn-code-dropdown {
     position: absolute;
-    background-color: #fff;
-    border: 1px solid #c7c7c7;
+    background-color: $white;
+    border: 1px solid $gainsboro;
     border-radius: 3px;
     width: 100%;
     max-width: 250px;
@@ -139,46 +139,46 @@ tfoot td .tableSec.form-group {
     right: 0;
     z-index: 4;
 }
-.skuNumberDropdown {
+.sku-number-dropdown {
     left: 0 !important;
 }
-.hsnCodeDropdown label {
+.hsn-code-dropdown label {
     font-size: 12px !important;
     margin-bottom: 5px;
     display: block;
 }
 
-.hsnCodeDropdown input {
+.hsn-code-dropdown input {
     width: 100%;
     height: 28px !important;
     padding: 5px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $gainsboro;
 }
 
-.hsnCodeDropdown input::placeholder,
-.hsnCodeDropdown input::-webkit-input-placeholder {
-    color: #c6c6c6;
+.hsn-code-dropdown input::placeholder,
+.hsn-code-dropdown input::-webkit-input-placeholder {
+    color: $silver;
 }
 
-.hsnCodeDropdown a {
+.hsn-code-dropdown a {
     display: inline-block;
     text-align: center;
-    color: #cccccc;
+    color: $very-light-gray;
     padding: 5px 8px;
     font-size: 16px;
 }
 
-.hsnCodeDropdown .btn-group {
+.hsn-code-dropdown .btn-group {
     margin-top: 5px;
 }
 
-.hsnCodeDropdown button.btn.btn-sm.btn-success,
-.bulkItemBtnGroup button.btn.btn-sm.btn-success {
-    background-color: #28ab00;
-    color: #fff;
+.hsn-code-dropdown button.btn.btn-sm.btn-success,
+.bulk-item-btn-group button.btn.btn-sm.btn-success {
+    background-color: $success-green;
+    color: $white;
 }
 .skuCode,
-.hsnCode {
+.hsn-code {
     padding: 5px 0;
 }
 /* new branch transfer list css  */
@@ -221,7 +221,7 @@ tfoot td .tableSec.form-group {
     display: inline !important;
 }
 .branch-transfer-report .btn-group a {
-    color: #333;
+    color: $night-rider;
 }
 .branch-transfer-report .basic > thead > tr > th {
     border-top: 1px solid $gainsboro !important;
@@ -273,9 +273,9 @@ tfoot td .tableSec.form-group {
     min-width: 100%;
     padding: 11px;
     padding-right: 0;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
 .advance-icon {
@@ -289,10 +289,10 @@ tfoot td .tableSec.form-group {
     border: 1px solid $gainsboro;
     border-radius: 2px;
     color: $midnight-express;
-    background: #fff;
+    background: $white;
 }
 .advance-icon:hover {
-    background: #eaeaea;
+    background: $whisper-color;
 }
 #table-recipt {
     width: 100%;
@@ -305,8 +305,8 @@ tfoot td .tableSec.form-group {
     transform: translateY(16px);
 }
 .trash-icon-delete a {
-    color: #999;
-    border: 1px solid #999;
+    color: $nobel;
+    border: 1px solid $gainsboro;
     border-radius: 50%;
     text-align: center;
     width: 20px;
@@ -315,25 +315,25 @@ tfoot td .tableSec.form-group {
     justify-content: center;
     align-items: center;
 }
-.addNewLine.mr-t1 {
+.add-new-line.mr-t1 {
     position: absolute;
     width: 100%;
 }
-.pdT3 {
+.pd-t3 {
     padding-top: 30px;
 }
 .recept-modal .modal-title {
-    color: #fff;
+    color: $white;
 }
-.transfertype-checked:before {
-    border: 1px solid #5b64c9;
+.transfer-type-checked:before {
+    border: 1px solid $chetwode-blue;
 }
-.transfertype-checked:after {
+.transfer-type-checked:after {
     content: " ";
     position: absolute;
     width: 8px;
     height: 8px;
-    background: #5b64c9;
+    background: $chetwode-blue;
     left: 5px;
     bottom: 5px;
     border-radius: 50%;
@@ -353,7 +353,7 @@ tfoot td .tableSec.form-group {
 
 .aside-right {
     font-size: 14px;
-    background: #fff;
+    background: $white;
     right: -530px;
     transition: 0.5s all ease;
     z-index: 999;
@@ -373,7 +373,7 @@ tfoot td .tableSec.form-group {
 }
 
 .aside-right .list-icon-group input:checked + label {
-    border: 1px solid #ff5f00;
+    border: 1px solid $orange;
     border-radius: 0px;
 }
 
@@ -396,15 +396,15 @@ tfoot td .tableSec.form-group {
     transition: 0.5s all ease;
     z-index: 9991;
 }
-.icon-pointer.activeTextColor {
-    color: #01a9f4;
+.icon-pointer.active-text-color {
+    color: $deep-sky-blue;
 }
-.closeRecipt {
-    color: #666666;
+.close-receipt {
+    color: $dark-gray;
     font-size: 24px;
 }
 .form-control[readonly] {
-    background-color: #fff !important;
+    background-color: $white !important;
 }
 .select-action-button {
     background: none;
diff --git a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.list.component.html b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.list.component.html
index 03a097c2816..3b44a453254 100644
--- a/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.list.component.html
+++ b/apps/web-giddh/src/app/inventory/components/new-branch-transfer/new.branch.transfer.list.component.html
@@ -1,4 +1,4 @@
-<div class="branch-transfer-report pt-1">
+<div class="branch-transfer-report pd-t1">
     <div class="container-fluid">
         <div class="d-flex date-advance-search">
             <div class="d-flex">
@@ -17,7 +17,7 @@
                                     </span>
                                     <span class="entity-details">
                                         <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                        <div class="item-unq giddh-limit single-line-clamp">
+                                        <div class="item-unique giddh-limit single-line-clamp">
                                             {{ option.name || '-' }}
                                         </div>
                                     </span>
@@ -51,7 +51,7 @@
                     <tr (clickOutside)="inlineSearch = null">
                         <th width="3%">#</th>
                         <th width="10%" (click)="sortBranchTransferList('dateOfSupply')">Date <span
-                                [ngClass]="{'sortingIcon icon-pointer': 1 === 1, 'activeTextColor' : branchTransferGetRequestParams.sortBy === 'dateOfSupply', 'icon-sort-asc': branchTransferGetRequestParams.sortBy !== 'dateOfSupply' || (branchTransferGetRequestParams.sortBy === 'dateOfSupply' && branchTransferGetRequestParams.sort === 'asc'), 'icon-sort-dsc': branchTransferGetRequestParams.sortBy === 'dateOfSupply' && branchTransferGetRequestParams.sort === 'desc'}"></span>
+                                [ngClass]="{'sorting-icon icon-pointer': 1 === 1, 'active-text-color' : branchTransferGetRequestParams.sortBy === 'dateOfSupply', 'icon-sort-asc': branchTransferGetRequestParams.sortBy !== 'dateOfSupply' || (branchTransferGetRequestParams.sortBy === 'dateOfSupply' && branchTransferGetRequestParams.sort === 'asc'), 'icon-sort-dsc': branchTransferGetRequestParams.sortBy === 'dateOfSupply' && branchTransferGetRequestParams.sort === 'desc'}"></span>
                         </th>
                         <th width="20%">Voucher Type</th>
                         <th width="20%">Voucher No.</th>
@@ -116,7 +116,7 @@
                         </th>
                         <th width="10%" (click)="sortBranchTransferList('totalAmount')" class="text-right">Total Amount
                             <span
-                                [ngClass]="{'sortingIcon icon-pointer': 1 === 1, 'activeTextColor' : branchTransferGetRequestParams.sortBy === 'totalAmount', 'icon-sort-asc': branchTransferGetRequestParams.sortBy !== 'totalAmount' || (branchTransferGetRequestParams.sortBy === 'totalAmount' && branchTransferGetRequestParams.sort === 'asc'), 'icon-sort-dsc': branchTransferGetRequestParams.sortBy === 'totalAmount' && branchTransferGetRequestParams.sort === 'desc'}"></span>
+                                [ngClass]="{'sorting-icon icon-pointer': 1 === 1, 'active-text-color' : branchTransferGetRequestParams.sortBy === 'totalAmount', 'icon-sort-asc': branchTransferGetRequestParams.sortBy !== 'totalAmount' || (branchTransferGetRequestParams.sortBy === 'totalAmount' && branchTransferGetRequestParams.sort === 'asc'), 'icon-sort-dsc': branchTransferGetRequestParams.sortBy === 'totalAmount' && branchTransferGetRequestParams.sort === 'desc'}"></span>
                         </th>
                         <th width="10%">Action</th>
                     </tr>
@@ -184,7 +184,7 @@
                 </tbody>
             </table>
         </div>
-        <div class="paginationWrapper" *ngIf="branchTransferResponse.totalPages > 1">
+        <div class="pagination-wrapper" *ngIf="branchTransferResponse.totalPages > 1">
             <pagination [totalItems]="branchTransferResponse.totalPages" [(ngModel)]="branchTransferResponse.page"
                 [maxSize]="6" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="1" [rotate]="false"
                 (pageChanged)="pageChanged($event)"></pagination>
@@ -199,7 +199,7 @@ <h4 class="modal-title bg pull-left">Advance Search</h4>
             <span aria-hidden="true">&times;</span>
         </button>
     </div>
-    <div class="modal-body pdL2 pdR2">
+    <div class="modal-body pd-l2 pd-r2">
         <form class="clearfix">
             <div class="row">
                 <div class="col-sm-4"><label>Voucher Type</label></div>
@@ -226,7 +226,7 @@ <h4 class="modal-title bg pull-left">Advance Search</h4>
                 </div>
             </div>
             <div class="pull-right">
-                <button class="btn btn-md btn-success mrR1" type="button" (click)="search()">
+                <button class="btn btn-md btn-success mr-r1" type="button" (click)="search()">
                     Search
                 </button>
                 <button class="btn btn-md btn-cancel" type="button" (click)="refreshTempPostParams(); hideModal(false)">
@@ -248,7 +248,7 @@ <h4 class="modal-title bg pull-left">Advance Search</h4>
 <!-- branch transfer modal -->
 <ng-template #branchtransfertemplate>
     <div class="recept-modal">
-        <div class="modal-body radius-none pr-0 pl-0 pt-0 no-padding">
+        <div class="modal-body radius-none pr-0 pl-0 pt-0 p-0">
             <new-branch-transfer (hideModal)="hideModal(true)"
                 [editBranchTransferUniqueName]="editBranchTransferUniqueName" [branchTransferMode]="branchTransferMode">
             </new-branch-transfer>
diff --git a/apps/web-giddh/src/app/inventory/components/sidebar-components/inventory.sidebar.component.scss b/apps/web-giddh/src/app/inventory/components/sidebar-components/inventory.sidebar.component.scss
index 071dd1e16be..94012895eac 100644
--- a/apps/web-giddh/src/app/inventory/components/sidebar-components/inventory.sidebar.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/sidebar-components/inventory.sidebar.component.scss
@@ -4,7 +4,7 @@
     display: none;
 }
 .parent-Group > ul > li ul li div {
-    color: #8a8a8a;
+    color: $gray;
 }
 .btn-group.show {
     display: inline-block !important;
@@ -13,7 +13,7 @@
     margin-left: 8px;
     margin-top: -3px;
     background: none;
-    color: #707070;
+    color: $gray;
     padding: 6px;
     margin-right: 0px !important;
     width: 23px;
@@ -22,7 +22,7 @@
     box-shadow: none;
 }
 .dropdown-menu > li > a:hover {
-    background: #e5e5e5;
+    background: $whisper;
     cursor: pointer;
 }
 .dropdown-menu > li > a {
@@ -32,7 +32,7 @@ span.caret {
     display: none;
 }
 #inventory-sidebar {
-    background: #fff;
+    background: $white;
     min-height: 100vh;
     width: 260px !important;
     padding-bottom: 220px;
diff --git a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockList.component.scss b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockList.component.scss
index d00864745c1..b68f744582d 100644
--- a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockList.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockList.component.scss
@@ -1,7 +1,7 @@
 @import "../../../../assets/css/color.scss";
 
 .stock-items .active {
-    background-color: #eeeff9;
+    background-color: $lavender;
 }
 .stock-items .active a .span {
     color: $jacksons-purple !important;
diff --git a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.html b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.html
index 27da92d8fb2..f172c5872c2 100644
--- a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.html
+++ b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.html
@@ -1,9 +1,9 @@
 <ul class="list-unstyled stock-grp-list clearfix">
-    <li class="clearfix main-group" [ngClass]="{'isGrp': grp.childStockGroups.length > 0,'grp_open': grp.isOpen}" *ngFor="let grp of Groups" style="padding: 0 !important;padding-left: 0 !important;">
+    <li class="clearfix main-group p-0" [ngClass]="{'isGrp': grp.childStockGroups.length > 0,'group-open': grp.isOpen}" *ngFor="let grp of Groups">
         <div class="item-group" [ngClass]="{'active': grp.isOpen && (activeGroup && activeGroup.uniqueName === grp.uniqueName) && !(activeStockUniqueName$ | async)}">
             <a (click)="OpenGroup(grp, $event)" class="d-flex">
                 <a class="text-black inventory-group-name">{{grp.name}}</a>
-                <i (click)="OpenGroup(grp, $event)"  class="icon-arrow-down pr" [ngClass]="{'open': grp.isOpen}"></i>
+                <i (click)="OpenGroup(grp, $event)"  class="icon-arrow-down position-relative" [ngClass]="{'open': grp.isOpen}"></i>
             </a>
             <!-- *ngIf="grp.isOpen && (activeGroup && activeGroup.uniqueName === grp.uniqueName) && (activeStockUniqueName$ | async)" -->
             <span class="pull-right">
diff --git a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.scss b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.scss
index 97de0d3f179..bcc764b530b 100644
--- a/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/sidebar-components/stockgrplist.component.scss
@@ -7,11 +7,11 @@
     outline: 0;
 }
 
-.grp_open {
-    background: rgb(255, 255, 255);
+.group-open {
+    background: $white;
 }
 
-.grp_open li {
+.group-open li {
     border: 0;
 }
 
@@ -23,13 +23,13 @@
 }
 
 .stock-grp-list .active a,
-s.tock-grp-list .active i,
+.stock-grp-list .active i,
 .stock-grp-list .active .btn-link i {
     color: $chetwode-blue !important;
 }
 
 .stock-grp-list .active {
-    background-color: #eeeff9;
+    background-color: $lavender;
 }
 
 .item-group {
@@ -52,17 +52,17 @@ s.tock-grp-list .active i,
 }
 
 stock-list ::ng-deep.in-list a div {
-    color: black !important;
+    color: $black !important;
 }
 .text-black {
-    color: #000000;
+    color: $black;
 }
 
 .item-group {
     text-transform: unset !important;
 }
 .no-data-box {
-    border-top: 1px solid #e0e0e0 !important;
+    border-top: 1px solid $whisper !important;
 }
 .stock-grp-list li .btn {
     line-height: 14px;
diff --git a/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.html b/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.html
index 7f2f9140b41..ed45d5c2f0f 100644
--- a/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.html
+++ b/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.html
@@ -1,9 +1,9 @@
 <section class="h100">
     <form [formGroup]="entityAndInventoryTypeForm" class="form-inline mr-b1">
-        <div class="pr d-flex mb-2 inventory-branch-dropdown" style="justify-content: space-between">
+        <div class="pr d-flex mb-2 inventory-branch-dropdown justify-content-between">
             <!-- enable branch selection after implimentation from api-->
             <div class="d-flex">
-                <div style="width: 230px;margin-right: 15px;">
+                <div class="mr-r15 sh-select-dropdown">
                     <div class="select-style middle">
                         <sh-select placeholder="Select Branch" formControlName="selectedEntity" (selected)="selectEntity($event)" [(ngModel)]="selectedEntity" [options]="entities$ | async" [ItemHeight]="33"></sh-select>
                         <!-- html dropdown <select class="form-control" formControlName="selectedEntity" [(ngModel)]="selectedEntity"
@@ -30,7 +30,7 @@
 
         </div>
 
-        <div class="d-flex w-100" style="justify-content: space-between">
+        <div class="d-flex w-100 justify-content-between">
             <div class="d-flex wrap-head-report">
                 <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                     <span>
@@ -51,10 +51,10 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
             <div>
 
                 <div class="btn-group" dropdown [autoClose]="true" placement="bottom right">
-                    <button class="btn-link icon-btn mr-15" (click)="editStock()" tooltip="Edit Stock">
+                    <button class="btn-link icon-btn mr-r15" (click)="editStock()" tooltip="Edit Stock">
                         <i class="icon-edit-pencil"></i>
                     </button>
-                    <button id="button-alignment" dropdownToggle type="button" class="btn-link mr-t cp mr-15 dropdown-toggle icon-btn" aria-controls="dropdown-alignment" tooltip="Download">
+                    <button id="button-alignment" dropdownToggle type="button" class="btn-link mr-t05 cp mr-r15 dropdown-toggle icon-btn" aria-controls="dropdown-alignment" tooltip="Download">
                         <i class="icon-download strong"></i>
                     </button>
                     <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-download" role="menu" aria-labelledby="button-alignment">
@@ -66,7 +66,7 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                 </div>
                 <!-- <div class="btn-group btn-download" dropdown [autoClose]="true" placement="bottom right">
                     <button id="button-alignment" dropdownToggle type="button"
-                        class="btn-link btn mr-t cp mr-1 dropdown-toggle" aria-controls="dropdown-alignment">
+                        class="btn-link btn mr-t05 cp mr-1 dropdown-toggle" aria-controls="dropdown-alignment">
                         <i class="icon-download"></i> Download
                     </button>
                     <ul *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-download" role="menu" aria-labelledby="button-alignment">
@@ -85,7 +85,7 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
 
     <section>
         <div class="mobile-card-wrapper">
-            <table class="table basic on-mobile-view table-responsive" [ngClass]="{'mB100': stockReport && stockReport.transactions && stockReport.transactions.length>6}">
+            <table class="table basic on-mobile-view table-responsive" [ngClass]="{'mb-100': stockReport && stockReport.transactions && stockReport.transactions.length>6}">
                 <thead>
                     <tr>
                         <th colspan="3" width="40%">
@@ -96,39 +96,39 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                                 </div>
                             </div>
                         </th>
-                        <th colspan="4" width="40%" class="text-center bdrR bdrB">Transactions</th>
-                        <th colspan="1" width="10%" class="bdrL text-center">Closing Stock</th>
+                        <th colspan="4" width="40%" class="text-center bd-rr bd-rb">Transactions</th>
+                        <th colspan="1" width="10%" class="bd-rl text-center">Closing Stock</th>
                     </tr>
-                    <tr class="bdrT">
+                    <tr class="bd-rt">
                         <th width="100">
                             <div class="d-flex">
                                 <div class="">Date</div>
                                 <div class="icon-pointer">
                                     <!-- <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                   (click)="sortButtonClicked('asc', 'entry_date')"
-                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
+                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
                 </div>
                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                   (click)="sortButtonClicked('desc', 'entry_date')"
-                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'}">
+                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'}">
                 </div> -->
 
                                     <!-- default -->
-                                    <div class="icon-sort-asc text-right " *ngIf="stockReportRequest.sortBy !== 'entry_date'" (click)="sortButtonClicked('asc', 'entry_date')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="stockReportRequest.sortBy !== 'entry_date'" (click)="sortButtonClicked('asc', 'entry_date')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc text-right" *ngIf="stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'entry_date')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc text-right" *ngIf="stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'entry_date')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc text-right " *ngIf="stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'entry_date')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc text-right " *ngIf="stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'entry_date')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'entry_date' && stockReportRequest.sort === 'asc'}">
                                     </div>
 
                                 </div>
                             </div>
                         </th>
 
-                        <th class="bdrR bdrB" width="14%">
+                        <th class="bd-rr bd-rb" width="14%">
                             <div class="btn-group btn-group-voucher-type" dropdown placement="bottom right" container="body">
-                                <button id="button-alignment" dropdownToggle type="button" class="btn-link btn cp p-0 dropdown-toggle c-3 p0" aria-controls="dropdown-alignment">Voucher Type
+                                <button id="button-alignment" dropdownToggle type="button" class="btn-link btn cp p-0 dropdown-toggle c-3 p-0" aria-controls="dropdown-alignment">Voucher Type
                                 <i class="fa fa-ellipsis-v pull-right text-light-2" aria-hidden="true"></i>
                             </button>
                                 <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu  dropdown-menu-right voucher-type" role="menu" aria-labelledby="button-alignment">
@@ -150,102 +150,102 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                             </div>
                         </th>
 
-                        <th class="bdrR">
+                        <th class="bd-rr">
                             <div class="d-flex">
                                 <div class="flex-fill text-right">Inwards</div>
                                 <div class="icon-pointer text-right">
                                     <!-- default -->
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'inward_quantity'" (click)="sortButtonClicked('asc', 'inward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'inward_quantity'" (click)="sortButtonClicked('asc', 'inward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'inward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'inward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'inward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'inward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'inward_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
                         </th>
 
 
-                        <th class="bdrR">
+                        <th class="bd-rr">
                             <div class="d-flex">
                                 <div class="flex-fill text-right">Outwards</div>
                                 <div class="icon-pointer text-right">
                                     <!-- default -->
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'outward_quantity'" (click)="sortButtonClicked('asc', 'outward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'outward_quantity'" (click)="sortButtonClicked('asc', 'outward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="ficon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'outward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'outward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'outward_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'outward_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'outward_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                 </div>
                             </div>
                         </th>
 
-                        <th class="bdrR">
+                        <th class="bd-rr">
                             <div class="d-flex">
                                 <div class="flex-fill text-right">Rate</div>
                                 <div class="icon-pointer text-right">
 
                                     <!-- default -->
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'rate'" (click)="sortButtonClicked('asc', 'rate')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'rate'" (click)="sortButtonClicked('asc', 'rate')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc " *ngIf="stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'rate')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc " *ngIf="stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'rate')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'rate')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'rate')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!--
                 <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                   (click)="sortButtonClicked('asc', 'rate')"
-                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
+                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'asc'}">
                 </div>
                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                   (click)="sortButtonClicked('desc', 'rate')"
-                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'}">
+                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'rate' && stockReportRequest.sort === 'desc'}">
                 </div> -->
                                 </div>
                             </div>
                         </th>
 
-                        <th class=" bdrR">
+                        <th class="bd-rr">
                             <div class="d-flex">
                                 <div class="flex-fill text-right">Value</div>
                                 <div class="icon-pointer text-right">
 
                                     <!-- default -->
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'transaction_val'" (click)="sortButtonClicked('asc', 'transaction_val')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'transaction_val'" (click)="sortButtonClicked('asc', 'transaction_val')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'transaction_val')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc" *ngIf="stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'transaction_val')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'transaction_val')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'transaction_val')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'transaction_val' && stockReportRequest.sort === 'asc'}">
                                     </div>
 
                                 </div>
                             </div>
                         </th>
 
-                        <th class="bdrR text-center">
+                        <th class="bd-rr text-center">
                             <div class="d-flex">
                                 <div class="flex-fill text-right">Qty</div>
                                 <div class="icon-pointer text-right">
 
                                     <!-- default -->
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'closing_quantity'" (click)="sortButtonClicked('asc', 'closing_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy !== 'closing_quantity'" (click)="sortButtonClicked('asc', 'closing_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
                                     <!-- after sort click -->
-                                    <div class="icon-sort-dsc " *ngIf="stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'closing_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'desc'}">
+                                    <div class="icon-sort-dsc " *ngIf="stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'desc'" (click)="sortButtonClicked('asc', 'closing_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'desc'}">
                                     </div>
-                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'closing_quantity')" [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'}">
+                                    <div class="icon-sort-asc" *ngIf="stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'" (click)="sortButtonClicked('desc', 'closing_quantity')" [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_quantity' && stockReportRequest.sort === 'asc'}">
                                     </div>
 
                                 </div>
                             </div>
                         </th>
 
-                        <!--          <th class="bdrL ">-->
+                        <!--          <th class="bd-rl ">-->
                         <!--            <div class="d-flex">-->
                         <!--              <div class="flex-fill"> Value</div>-->
                         <!--              <div class="icon-pointer text-right">-->
@@ -253,18 +253,18 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                         <!--                &lt;!&ndash; default &ndash;&gt;-->
                         <!--                <div class="fa fa-long-arrow-up" *ngIf="stockReportRequest.sortBy !== 'closing_val'"-->
                         <!--                  (click)="sortButtonClicked('asc', 'closing_val')"-->
-                        <!--                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'asc'}">-->
+                        <!--                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'asc'}">-->
                         <!--                </div>-->
                         <!--                &lt;!&ndash; after sort click &ndash;&gt;-->
                         <!--                <div class="fa fa-long-arrow-down"-->
                         <!--                  *ngIf="stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'desc'"-->
                         <!--                  (click)="sortButtonClicked('asc', 'closing_val')"-->
-                        <!--                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'desc'}">-->
+                        <!--                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'desc'}">-->
                         <!--                </div>-->
                         <!--                <div class="fa fa-long-arrow-up"-->
                         <!--                  *ngIf="stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'asc'"-->
                         <!--                  (click)="sortButtonClicked('desc', 'closing_val')"-->
-                        <!--                  [ngClass]="{'activeTextColor': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'asc'}">-->
+                        <!--                  [ngClass]="{'active-text-color': stockReportRequest.sortBy === 'closing_val' && stockReportRequest.sort === 'asc'}">-->
                         <!--                </div>-->
 
                         <!--              </div>-->
@@ -275,11 +275,11 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                 </thead>
                 <tbody *ngIf="!stockReportInProcess && stockReport">
                     <tr *ngFor="let txn of stockReport.transactions">
-                        <td class="bdrR" data-title="Date">{{txn.entryDate}}</td>
-                        <td class="bdrR {{txn.voucherType}}" data-title="Voucher Type">{{txn.voucherType}}</td>
-                        <td class="bdrR" data-title="Account Name">{{txn.account?.name}}</td>
+                        <td class="bd-rr" data-title="Date">{{txn.entryDate}}</td>
+                        <td class="bd-rr {{txn.voucherType}}" data-title="Voucher Type">{{txn.voucherType}}</td>
+                        <td class="bd-rr" data-title="Account Name">{{txn.account?.name}}</td>
                         <td data-title="Transactions -" class="td-mobile-head"></td>
-                        <td class="text-right bdrR" data-title="Inwards">
+                        <td class="text-right bd-rr" data-title="Inwards">
                             <span *ngIf="txn.type == 'dr'">
                             {{txn.quantity | giddhCurrency}}
                         </span>
@@ -289,7 +289,7 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                             <span *ngIf="txn.type == 'cr'">-</span>
                         </td>
 
-                        <td class="text-right bdrR" data-title="Outwards">
+                        <td class="text-right bd-rr" data-title="Outwards">
                             <span *ngIf="txn.type == 'cr'">
                             {{txn.quantity | giddhCurrency}}
                         </span>
@@ -299,17 +299,17 @@ <h2 class="head-report" *ngIf="stockReport && stockReport.stockUnit">
                             <span *ngIf="txn.type == 'dr'">-</span>
                         </td>
 
-                        <td class="text-right bdrR" data-title="Rate" [ngClass]="txn.type === 'cr'? 'cr' : 'dr' ">{{txn.rate | giddhCurrency}}</td>
+                        <td class="text-right bd-rr" data-title="Rate" [ngClass]="txn.type === 'cr'? 'cr' : 'dr' ">{{txn.rate | giddhCurrency}}</td>
 
                         <td data-title="Closing Stock -" class="td-mobile-head"></td>
 
-                        <td class="text-right bdrR" data-title="Value" [ngClass]="txn.type === 'cr'? 'cr' : 'dr' ">
+                        <td class="text-right bd-rr" data-title="Value" [ngClass]="txn.type === 'cr'? 'cr' : 'dr' ">
                             {{txn.amount | giddhCurrency}}
                         </td>
-                        <td class="text-right bdrR" data-title="Quantity">
+                        <td class="text-right bd-rr" data-title="Quantity">
                             {{txn.closingQuantity | giddhCurrency}}<span class="unit-badge">{{stockReport.stockUnit}}</span>
                         </td>
-                        <!--          <td class="text-right bdrR">-->
+                        <!--          <td class="text-right bd-rr">-->
                         <!--            {{txn.closingQuantity}}-->
                         <!--          </td>-->
                     </tr>
@@ -363,41 +363,41 @@ <h1 [class.stock-not-found]="stockNotFoundMessage">{{ (stockNotFoundMessage) ? s
 
                 <div class="row">
                     <div class="col-sm-3 pr-0">
-                        <div class="row">
-                            <div class="col-6 p-0">
-                                <h4 class="text-light text-left">Profit/Loss</h4>
-                            </div>
-                            <div class="col-12 p-0">
-                                <h4 class="text-orange text-left">&nbsp;{{stockReport.profit | giddhCurrency}} ({{selectedDateRangeUi | replaceHyphens}})</h4>
-                            </div>
+                    <div class="row">
+                        <div class="col-6 p-0">
+                            <h4 class="text-light text-left">Profit/Loss</h4>
+                        </div>
+                        <div class="col-12 p-0">
+                            <h4 class="text-purple text-left">&nbsp;{{stockReport.profit | giddhCurrency}} ({{dateRangePickerCmp.value | replaceHyphens}})</h4>
                         </div>
                     </div>
+                    </div>
                     <div class="col-sm-2 pr-0">
                         <div class="row">
-                            <div class="col-xs-10 p0">
+                            <div class="col-10 p-0">
                                 <h4 class="text-light">Transaction Count</h4>
                             </div>
-                            <div class="col-xs-2 p0">
-                                <h4 class="text-orange text-left">
+                            <div class="col-2 p-0">
+                                <h4 class="text-purple text-left">
                                     {{(stockReport.inwardBalance.transactionCount + stockReport.outwardBalance.transactionCount) | giddhCurrency}}
                                 </h4>
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-xs-10 p0">
+                            <div class="col-10 p-0">
                                 <h4>Inward</h4>
                             </div>
-                            <div class="col-xs-2 p0">
+                            <div class="col-2 p-0">
                                 <h4 class="text-left">
                                     &nbsp;<span *ngIf="stockReport.inwardBalance.transactionCount">{{stockReport.inwardBalance.transactionCount | giddhCurrency}}</span><span *ngIf="!stockReport.inwardBalance.transactionCount">0</span>
                                 </h4>
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-xs-10 p0">
+                            <div class="col-10 p-0">
                                 <h4>Outward</h4>
                             </div>
-                            <div class="col-xs-2 p0">
+                            <div class="col-2 p-0">
                                 <h4 class="text-left">
                                     &nbsp;<span *ngIf="stockReport.outwardBalance.transactionCount">{{stockReport.outwardBalance.transactionCount | giddhCurrency}}</span><span *ngIf="!stockReport.outwardBalance.transactionCount">0</span></h4>
                             </div>
@@ -433,7 +433,7 @@ <h4>({{stockReport.outwardBalance.quantity | giddhCurrency}} {{stockReport.outwa
                         <div class="flex-col">
                             <div class="cont">
                                 <h4 class="text-light">Closing Stock </h4>
-                                <h2 class="text-orange">{{stockReport.closingBalance.amount | giddhCurrency}}</h2>
+                                <h2 class="text-purple">{{stockReport.closingBalance.amount | giddhCurrency}}</h2>
                                 <h4>({{stockReport.closingBalance.quantity | giddhCurrency}} {{stockReport.closingBalance.stockUnit}})
                                 </h4>
                             </div>
@@ -454,11 +454,11 @@ <h4>({{stockReport.closingBalance.quantity | giddhCurrency}} {{stockReport.closi
 <div bsModal #advanceSearchModel="bs-modal" class="modal fade" role="dialog">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="modal-header themeBg clearfix">
+            <div class="modal-header theme-bg clearfix">
                 <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 <span aria-hidden="true" class="close" data-dismiss="modal" (click)="advanceSearchAction('cancel')">×</span>
             </div>
-            <div class="modal-body Advance-Search clearfix" *ngIf="advanceSearchModalShow">
+            <div class="modal-body advance-search clearfix" *ngIf="advanceSearchModalShow">
                 <form action="" [formGroup]="advanceSearchForm">
                     <div class="row">
                         <div class="col-sm-4">Date Range</div>
@@ -500,8 +500,8 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                         </div>
                     </div>
 
-                    <div class="row mr-t4 mrB3">
-                        <div class="col-xs-12 text-right">
+                    <div class="row mr-t4 mr-b3">
+                        <div class="col-12 text-right">
                             <button class="btn btn-success" type="button" [disabled]="!isFilterCorrect || !stockReportRequest.param || !stockReportRequest.expression || !stockReportRequest.val" (click)="advanceSearchAction('search')">Search
                             </button>
                             <button class="btn btn-danger" type="button" (click)="advanceSearchAction('clear')">Clear</button>
diff --git a/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.scss b/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.scss
index b61e10ee351..45ab726b31e 100644
--- a/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.scss
+++ b/apps/web-giddh/src/app/inventory/components/stock-report-component/inventory.stockreport.component.scss
@@ -1,17 +1,16 @@
 @import "../../../../assets/css/color.scss";
 
-.bdrT {
-    border-color: #ccc;
+.bd-rt {
+    border-color: $gainsboro;
 }
 
 .flex-fill {
     flex: 1 1 auto;
 }
 
-.d-flex {
-    display: flex;
+.sh-select-dropdown{
+    width: 230px;
 }
-
 /*td-in-searchbox_style*/
 
 .td-search-box div {
@@ -24,7 +23,7 @@
 
 .td-search-box div i {
     margin-top: 1px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     padding-right: 8px;
     cursor: pointer;
     display: flex;
@@ -44,7 +43,7 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
     background-color: $white-smoke;
 }
@@ -56,7 +55,7 @@
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #cdcdcd;
+    border-right: 1px solid $gainsboro;
 }
 
 .icon-pointer .glyphicon {
@@ -69,7 +68,7 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: $gray-90;
+    background: $whisper;
 }
 .stock-input {
     background-color: transparent !important;
@@ -83,23 +82,23 @@
     color: $white;
 }
 .inventory-stock-table input.form-control.stock-input {
-    color: #1c1c1c;
+    color: $nero;
     text-align: left;
 }
 .table-border input.form-control.stock-input {
-    color: #1c1c1c;
+    color: $nero;
     text-align: left;
 }
 .footer-tr td {
-    background-color: $gray-90;
+    background-color: $whisper;
 }
 .total-footer {
     background-color: $white;
     display: flex;
-    .footitem {
+    .foot-item {
         padding: 41px;
         h2 {
-            color: #8f9091;
+            color: $wistful;
             font-size: 20px;
             margin-bottom: 10px;
         }
@@ -109,37 +108,27 @@
     }
 }
 
-.Journal_Voucher {
-    color: #c4c0c0;
+.journal-voucher {
+    color: $silver;
 }
 
-.Purchase {
-    color: #0c8fe6;
+.purchase {
+    color: $primary;
 }
-.Sales {
-    color: #229e2b;
+.sales {
+    color: $success-green;
 }
 
-.Journal_Voucher {
-    color: #c4c0c0;
-}
 /* class name same as what we are getting data */
 
-.PURCHASE {
-    color: #0c8fe6;
-}
-.SALES {
-    color: #229e2b;
-}
-
-.JOURNAL {
-    color: #19c2d0;
+.journal {
+    color: $hint-of-cyan;
 }
-.CREDIT {
-    color: #0467a8;
+.credit {
+    color: $faux-true;
 }
-.DEBIT {
-    color: #f6b232;
+.debit {
+    color: $orange;
 }
 .modal-content {
     border-radius: 0px;
@@ -193,7 +182,7 @@
     border-radius: 0px;
     padding: 0px;
     input[type="checkbox"]:after {
-        border: 1px solid #cccccc;
+        border: 1px solid $gainsboro;
         width: 15px;
         height: 15px;
         top: 2px;
@@ -202,12 +191,12 @@
         top: 6px;
         width: 9px;
         height: 5px;
-        border: 2px solid #fff;
+        border: 2px solid $white;
         border-top-style: none;
         border-right-style: none;
     }
     li {
-        color: #333333;
+        color: $night-rider;
         padding: 3px 7px !important;
         font-size: 12px;
     }
@@ -217,7 +206,7 @@
     }
 }
 button[aria-expanded="true"] i {
-    color: #adadad;
+    color: $dim-gray;
 }
 /* voucher type DDL */
 
@@ -227,7 +216,7 @@ button[aria-expanded="true"] i {
 .table-border {
     border: 1px solid $gainsboro;
 }
-.bdrN {
+.border-none {
     border: none !important;
 }
 .unit-badge {
@@ -241,9 +230,9 @@ button[aria-expanded="true"] i {
 .icon-pointer .icon-sort-dsc {
     line-height: 20px;
     width: 15px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
 }
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 .sticky-footer-sale-amount {
@@ -260,7 +249,7 @@ button[aria-expanded="true"] i {
         }
         .operators {
             font-size: 39px;
-            color: #8f9091;
+            color: $wistful;
         }
         h2 {
             font-size: 18px;
@@ -279,16 +268,16 @@ button[aria-expanded="true"] i {
 .select-style select {
     width: 100% !important;
 }
-.text-orange {
-    color: #5b64c9;
+.text-purple {
+    color: $chetwode-blue;
 }
 .bg-white {
-    background: white;
+    background: $white;
 }
 .btn-link-2 {
-    color: #0c8fe6;
+    color: $primary;
 }
-.mB100 {
+.mb-100 {
     margin-bottom: 100px;
 }
 .advance-icon {
@@ -299,10 +288,10 @@ button[aria-expanded="true"] i {
     align-items: center;
     font-size: 18px;
     margin-left: 10px;
-    border: 1px solid #5b64c9;
+    border: 1px solid $chetwode-blue;
     border-radius: 2px;
-    color: #1a237e;
-    background: #fff;
+    color: $midnight-blue;
+    background: $white;
 }
 .inventory-stock-table .d-flex {
     align-items: center;
@@ -312,10 +301,10 @@ button[aria-expanded="true"] i {
     cursor: pointer;
 }
 button.btn.btn-filter {
-    background: #e4e4e4;
-    border: 1px solid #e4e4e4;
+    background: $whisper;
+    border: 1px solid $gainsboro;
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
diff --git a/apps/web-giddh/src/app/inventory/components/welcome-inventory/welcome-inventory.component.html b/apps/web-giddh/src/app/inventory/components/welcome-inventory/welcome-inventory.component.html
index d1fb25c2f4a..9b4c3b20428 100644
--- a/apps/web-giddh/src/app/inventory/components/welcome-inventory/welcome-inventory.component.html
+++ b/apps/web-giddh/src/app/inventory/components/welcome-inventory/welcome-inventory.component.html
@@ -1,7 +1,7 @@
 <div class="col-md-12 text-center inventory-welcome">
-    <div class="illustration_box">
+    <div class="illustration-box">
         <img src="assets/images/new/Inventory_welcome.svg" />
-        <h3 class="mr-t1 fs18"><strong>Manage your Inventory!</strong></h3>
+        <h3 class="mr-t1 font-18"><strong>Manage your Inventory!</strong></h3>
         <p class="mr-t1">Add & Manage product in the inventory</p>
         <button class="btn btn-sky-blue mr-t2" (click)="toggleAsidePane()">Start</button>
     </div>
diff --git a/apps/web-giddh/src/app/inventory/inventory.component.html b/apps/web-giddh/src/app/inventory/inventory.component.html
index b688b3c2467..8a12b0debdb 100644
--- a/apps/web-giddh/src/app/inventory/inventory.component.html
+++ b/apps/web-giddh/src/app/inventory/inventory.component.html
@@ -1,4 +1,4 @@
-<div style="min-height:100%;">
+<div class="inventory-main">
     <div class="relative">
         <hamburger-menu></hamburger-menu>
         <div class="inventory-control">
@@ -15,10 +15,10 @@
                         [ngClass]="{'welcome-inventory-page':!activeView}"
                         >
                             <!-- uiView: inventory-detail -->
-                            <section class="container-fluid  clearfix pt-15">
+                            <section class="container-fluid  clearfix pd-t15">
 
                             <div class="wrap-top-inventory">
-                                <div *ngIf="isMobileScreen && activeView === 'group'" class="mb-15">
+                                <div *ngIf="isMobileScreen && activeView === 'group'" class="mr-b15">
                                         <button class="btn btn-sky-blue" [routerLink]="['/pages/inventory/']" (click)="activeView = null">Back</button>
                                 </div>
                                 <div *ngIf="activeView" class="d-flex mr-b1 branch-warehouse-filter">
diff --git a/apps/web-giddh/src/app/inventory/inventory.component.scss b/apps/web-giddh/src/app/inventory/inventory.component.scss
index 213843880b2..abd2721beb2 100644
--- a/apps/web-giddh/src/app/inventory/inventory.component.scss
+++ b/apps/web-giddh/src/app/inventory/inventory.component.scss
@@ -1,10 +1,14 @@
 @import "../../assets/css/color.scss";
 
+.inventory-main{
+    min-height:100%;
+}
+
 .inventory-control ::ng-deep.nav > li > a {
     padding: 2px 0px !important;
     margin-right: 35px !important;
     border-bottom: 4px solid transparent !important;
-    color: black !important;
+    color: $black !important;
     border-top: transparent !important;
     border-right: transparent !important;
     border-left: transparent !important;
@@ -15,6 +19,7 @@
 .inventory-control ::ng-deep.nav.nav-tabs {
     margin-bottom: 0;
     padding: 0 0px 0 15px !important;
+    background-color: $white;
     position: absolute !important;
     top: 0;
     left: 0;
@@ -29,7 +34,7 @@
 .inventory-control ::ng-deep.nav-tabs > ::ng-deep li.active > a,
 .nav-tabs > ::ng-deep li.active > a:focus,
 ::ng-deep.nav-tabs > li.active > a:hover {
-    color: #1c1c1c !important;
+    color: $nero !important;
     border-bottom: 4px solid $deep-sky-blue !important;
     cursor: pointer !important;
     background-color: unset !important;
diff --git a/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.html b/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.html
index 825d8191aa3..fab294c6487 100644
--- a/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.html
+++ b/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.html
@@ -1,4 +1,4 @@
-<div style="min-height:100%;">
+<div class="jobwork-main">
     <!--sidebar-->
 
     <jobwork-sidebar></jobwork-sidebar>
@@ -7,28 +7,27 @@
         <welcome-jobwork></welcome-jobwork>
     </div>
     <section class="right-bar" *ngIf="!showWelcomePage">
-        <section class="container-fluid clearfix pt-15">
+        <section class="container-fluid clearfix pd-t15">
             <section class="h100">
-                <div class="fb__1-container">
-                    <div class="d-flex jobWorkContent">
+                <div class="fb-1-container">
+                    <div class="d-flex job-work-content">
 
                         <div class="d-flex form-inline">
-                            <h2 class="mr-2 ReportInfo"
-                                style="display: inline-block; font-size: 20px;font-weight: bold;text-transform:capitalize;">
-                                <span *ngIf="type==='stock'" class="ReportInfo">{{nameStockOrPerson}}</span>&nbsp;<span
+                            <h2 class="mr-2 report-info d-inline-block bold text-capitalize font-20">
+                                <span *ngIf="type==='stock'" class="report-info">{{nameStockOrPerson}}</span>&nbsp;<span
                                     *ngIf="type==='stock'">(Transaction Log)</span>
 
                                 <span *ngIf="type==='person'"
-                                    class="ReportInfo"><span>{{nameStockOrPerson}}</span></span>
+                                    class="report-info"><span>{{nameStockOrPerson}}</span></span>
                             </h2>
-                            <div class="form-group" style="margin-top: -7px;">
+                            <div class="form-group margin-datepicker">
                                 <input type="text" name="daterangeInput" daterangepicker [options]="datePickerOptions"
                                     class="form-control date-range-picker"
                                     (applyDaterangepicker)="dateSelected($event)" />
                             </div>
 
                             <div class="form-group">
-                                <div class="advance-icon" style="align-items: center" tooltip="Advance Search">
+                                <div class="advance-icon align-items-center" tooltip="Advance Search">
                                     <span class="icon-advance-filter" (click)="onOpenAdvanceSearch()"></span>
                                 </div>
 
@@ -46,7 +45,7 @@
                             <div class="pull-right">
                                 <div class="btn-group " dropdown placement="bottom right">
                                     <button id="buttonalignment" dropdownToggle type="button"
-                                        class="btn-link mrB cp mr-1 dropdown-toggle" aria-controls="dropdown-alignment">
+                                        class="btn-link mr-b05 cp mr-1 dropdown-toggle" aria-controls="dropdown-alignment">
                                         <i class="icon-download"></i> Download
                                     </button>
                                     <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"
@@ -70,12 +69,12 @@
 
                 </div>
 
-                <section style="margin-top: 15px">
+                <section class="mr-t15">
                     <div class="table-responsive">
                         <table class="table basic table-border m-0">
                             <thead>
                                 <tr>
-                                    <th class="bdrR" width="120">
+                                    <th class="bd-rr" width="120">
                                         <div class="d-flex">
                                             <div class=""> Date</div>
                                             <div class="icon-pointer">
@@ -83,23 +82,23 @@
                                                 <div class="icon-sort-asc text-right "
                                                     *ngIf="filter.sortBy !== 'entry_date'"
                                                     (click)="sortButtonClicked('asc', 'entry_date')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'entry_date' && filter.sort === 'asc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'entry_date' && filter.sort === 'asc'}">
                                                 </div>
                                                 <!-- after sort click -->
                                                 <div class="icon-sort-dsc text-right"
                                                     *ngIf="filter.sortBy === 'entry_date' && filter.sort === 'desc'"
                                                     (click)="sortButtonClicked('asc', 'entry_date')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'entry_date' && filter.sort === 'desc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'entry_date' && filter.sort === 'desc'}">
                                                 </div>
                                                 <div class="icon-sort-asc text-right "
                                                     *ngIf="filter.sortBy === 'entry_date' && filter.sort === 'asc'"
                                                     (click)="sortButtonClicked('desc', 'entry_date')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'entry_date' && filter.sort === 'asc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'entry_date' && filter.sort === 'asc'}">
                                                 </div>
                                             </div>
                                         </div>
                                     </th>
-                                    <th class="bdrR td-search-box" *ngIf="type ==='person'" width="15%"
+                                    <th class="bd-rr td-search-box" *ngIf="type ==='person'" width="15%"
                                         (clickOutside)="clickedOutside($event,null, 'product')">
                                         <div [hidden]="showProductSearch">
                                             <span>Product Name</span>
@@ -111,10 +110,10 @@
                     <i class="icon-search" (click)="showProductSearch = false;"></i>
                 </div> -->
                                     </th>
-                                    <th class="bdrR bdrB" *ngIf="type ==='stock'" width="15%">
+                                    <th class="bd-rr bd-rb" *ngIf="type ==='stock'" width="15%">
                                         <div class="btn-group btn-group-voucher-type" dropdown placement="bottom right">
                                             <button id="button-alignment" dropdownToggle type="button"
-                                                class="btn-link btn cp p-0 dropdown-toggle c-3 p0"
+                                                class="btn-link btn cp p-0 dropdown-toggle c-3"
                                                 aria-controls="dropdown-alignment">Voucher Type
                                                 <i class="fa fa-ellipsis-v pull-right text-light-2"
                                                     aria-hidden="true"></i>
@@ -129,7 +128,7 @@
                                             </ul>
                                         </div>
                                     </th>
-                                    <th class="bdrR bdrB td-search-box" width="15%"
+                                    <th class="bd-rr bd-rb td-search-box" width="15%"
                                         (clickOutside)="clickedOutside($event,null, 'sender')">
                                         <div [hidden]="showSenderSearch">
                                             <span>Sender's Name</span>
@@ -141,7 +140,7 @@
                                             <!-- <i class="icon-search" (click)="showSenderSearch = false;"></i> -->
                                         </div>
                                     </th>
-                                    <th class="bdrR bdrB td-search-box" width="15%"
+                                    <th class="bd-rr bd-rb td-search-box" width="15%"
                                         (clickOutside)="clickedOutside($event,null, 'receiver')">
                                         <div [hidden]="showReceiverSearch">
                                             <span>Receiver's Name</span>
@@ -153,8 +152,8 @@
                                             <!-- <i class="icon-search" (click)="showReceiverSearch = false;"></i> -->
                                         </div>
                                     </th>
-                                    <th class="bdrR bdrB">Description</th>
-                                    <th class="text-right bdrB" width="140">
+                                    <th class="bd-rr bd-rb">Description</th>
+                                    <th class="text-right bd-rb" width="140">
                                         <div class="d-flex">
                                             <div class="flex-fill mr-1">Trading Qty</div>
                                             <div class="icon-pointer">
@@ -162,18 +161,18 @@
                                                 <div class="icon-sort-asc text-right "
                                                     *ngIf="filter.sortBy !== 'QUANTITY'"
                                                     (click)="sortButtonClicked('asc', 'QUANTITY')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'QUANTITY' && filter.sort === 'asc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'QUANTITY' && filter.sort === 'asc'}">
                                                 </div>
                                                 <!-- after sort click -->
                                                 <div class="icon-sort-dsc text-right"
                                                     *ngIf="filter.sortBy === 'QUANTITY' && filter.sort === 'desc'"
                                                     (click)="sortButtonClicked('asc', 'QUANTITY')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'QUANTITY' && filter.sort === 'desc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'QUANTITY' && filter.sort === 'desc'}">
                                                 </div>
                                                 <div class="icon-sort-asc text-right "
                                                     *ngIf="filter.sortBy === 'QUANTITY' && filter.sort === 'asc'"
                                                     (click)="sortButtonClicked('desc', 'QUANTITY')"
-                                                    [ngClass]="{'activeTextColor': filter.sortBy === 'QUANTITY' && filter.sort === 'asc'}">
+                                                    [ngClass]="{'active-text-color': filter.sortBy === 'QUANTITY' && filter.sort === 'asc'}">
                                                 </div>
                                             </div>
                                         </div>
@@ -183,16 +182,16 @@
 
                             <tbody *ngIf="inventoryReport && inventoryReport.transactions.length>0">
                                 <tr *ngFor="let txn of inventoryReport.transactions; let idx = index">
-                                    <td class="bdrR">{{txn.date}}</td>
-                                    <td class="bdrR" *ngIf="type ==='person'">{{txn.stock.name}}</td>
-                                    <td class="bdrR" *ngIf="type ==='stock'">
+                                    <td class="bd-rr">{{txn.date}}</td>
+                                    <td class="bd-rr" *ngIf="type ==='person'">{{txn.stock.name}}</td>
+                                    <td class="bd-rr" *ngIf="type ==='stock'">
                                         <!-- in case of stock type -->
                                         <span
                                             class="{{txn.jobWorkTransactionType}}">{{txn.jobWorkTransactionType}}</span>
                                     </td>
-                                    <td class="bdrR">{{txn.sender.name}}</td>
-                                    <td class="bdrR">{{txn.receiver.name}}</td>
-                                    <td class="bdrR" (click)='updateDescriptionIdx = idx'>
+                                    <td class="bd-rr">{{txn.sender.name}}</td>
+                                    <td class="bd-rr">{{txn.receiver.name}}</td>
+                                    <td class="bd-rr" (click)='updateDescriptionIdx = idx'>
                                         <ng-container *ngIf='updateDescriptionIdx != idx'>
                                             <div class="stockDiscription">{{txn.description}}</div>
                                         </ng-container>
@@ -202,7 +201,7 @@
                                                 (blur)='updateDescription(txn)' />
                                         </ng-container>
                                     </td>
-                                    <td class="text-right bdrR">{{txn.quantity}}<span
+                                    <td class="text-right bd-rr">{{txn.quantity}}<span
                                             class="unit-badge">{{txn.stockUnit.code}}</span>
                                     </td>
                                 </tr>
@@ -229,7 +228,7 @@ <h1>No Report Found !!</h1>
                             <tfoot *ngIf="inventoryReport?.totalPages > 1">
                                 <tr>
                                     <td colspan="7">
-                                        <div class="alC">
+                                        <div class="text-center">
                                             <pagination [maxSize]="6" [totalItems]="inventoryReport.totalItems"
                                                 [(ngModel)]="inventoryReport.page" [itemsPerPage]="6"
                                                 (pageChanged)="applyFilters($event.page)" class="pagination-sm"
@@ -257,7 +256,7 @@ <h1>No Report Found !!</h1>
 <div bsModal #advanceSearchModel="bs-modal" class="modal fade" role="dialog">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="modal-header themeBg clearfix">
+            <div class="modal-header theme-bg clearfix">
                 <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 <span aria-hidden="true" class="close" data-dismiss="modal"
                     (click)="advanceSearchAction('cancel')">×</span>
@@ -282,8 +281,8 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                             </small>
                         </div>
                     </div>
-                    <div class="row mr-t4 mrB3">
-                        <div class="col-xs-12 text-right">
+                    <div class="row mr-t4 mr-b3">
+                        <div class="col-12 text-right">
                             <button class="btn btn-success" type="button"
                                 [disabled]="!isFilterCorrect && !filter.quantity"
                                 (click)="advanceSearchAction('search')">Search
diff --git a/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.scss b/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.scss
index 51649d4d43b..0e97aafb72f 100644
--- a/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.scss
+++ b/apps/web-giddh/src/app/inventory/jobwork/jobwork.component.scss
@@ -1,25 +1,29 @@
 @import "../../../assets/css/color.scss";
 
+.jobwork-main{
+    min-height:100%;
+}
+
 .btn-group.open.show {
     display: inline-block !important;
 }
-.bdrT {
-    border-color: #ccc;
+.bd-rt {
+    border-color: $gainsboro;
 }
 
-:host ::ng-deep .fb__1-container {
+:host ::ng-deep .fb-1-container {
     justify-content: flex-start;
 }
 
-:host ::ng-deep .fb__1-container .form-group {
+:host ::ng-deep .fb-1-container .form-group {
     margin-right: 10px;
     margin-bottom: 0;
 }
 
-:host ::ng-deep .fb__1-container .date-range-picker {
+:host ::ng-deep .fb-1-container .date-range-picker {
     min-width: 140px;
     font-weight: bolder;
-    border-bottom: 1px dotted #707070;
+    border-bottom: 1px dotted $gray;
     padding-bottom: 2px !important;
 }
 .flex-fill {
@@ -33,7 +37,7 @@
 }
 .td-search-box div i {
     margin-top: 1px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     padding-right: 8px;
     cursor: pointer;
     display: flex;
@@ -48,9 +52,9 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 .td-search-box .input-container i {
     position: absolute;
@@ -58,10 +62,10 @@
     top: 10px;
 }
 .table-border {
-    border: 1px solid #c6c6c6;
+    border: 1px solid $gainsboro;
 }
 .basic > thead > tr > th {
-    border-right: 1px solid #cdcdcd;
+    border-right: 1px solid $gainsboro;
 }
 .icon-pointer .glyphicon {
     cursor: pointer;
@@ -69,31 +73,31 @@
 .icon-pointer .glyphicon:hover {
 }
 .td-search-box div i:hover {
-    color: #999;
+    color: $nobel;
 }
 
 /* class name same as what we are getting data */
 
 .Inward.Note {
-    color: #229e2b;
+    color: $light-green;
 }
 .Outward.Note {
-    color: #0c8fe6;
+    color: $primary;
 }
 .Transfer.Note {
-    color: #666666;
+    color: $dark-gray;
 }
 
 /* voucher type DDL */
 .c-3 {
-    color: #fff;
+    color: $white;
 }
 .btn-group-voucher-type {
     width: 100%;
     button {
         text-align: left;
         width: 100%;
-        color: #1c1c1c;
+        color: $nero;
         &:focus,
         &:hover {
             text-decoration: none;
@@ -118,7 +122,7 @@
     border-radius: 0px;
     padding: 0px;
     input[type="checkbox"]:after {
-        border: 1px solid #cccccc;
+        border: 1px solid $gainsboro;
         width: 15px;
         height: 15px;
         top: 2px;
@@ -127,12 +131,12 @@
         top: 5px;
         width: 9px;
         height: 5px;
-        border: 2px solid #fff;
+        border: 2px solid $white;
         border-top-style: none;
         border-right-style: none;
     }
     li {
-        color: #333333;
+        color: $night-rider;
         padding: 3px 7px !important;
         font-size: 12px;
     }
@@ -142,7 +146,7 @@
     }
 }
 button[aria-expanded="true"] i {
-    color: #adadad;
+    color: $dim-gray;
 }
 .stockDiscription {
     white-space: normal;
@@ -167,9 +171,9 @@ button[aria-expanded="true"] i {
 .icon-pointer .icon-sort-asc {
     line-height: 20px;
     width: 15px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
 }
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 
@@ -184,10 +188,10 @@ button[aria-expanded="true"] i {
     align-items: center;
     font-size: 18px;
     margin-left: 10px;
-    border: 1px solid #5b64c9;
+    border: 1px solid $chetwode-blue;
     border-radius: 2px;
-    color: #1a237e;
-    background: #fff;
+    color: $midnight-blue;
+    background: $white;
 }
 .table-border .d-flex {
     align-items: center;
@@ -197,16 +201,20 @@ button[aria-expanded="true"] i {
     cursor: pointer;
 }
 button.btn.btn-filter {
-    background: #e4e4e4;
-    border: 1px solid #e4e4e4;
+    background: $whisper;
+    border: 1px solid $gainsboro;
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
     padding: 4px 10px;
 }
-.jobWorkContent {
+.job-work-content {
     width: 100%;
     justify-content: space-between;
 }
+
+.margin-datepicker{
+    margin-top: -7px !important;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.html b/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.html
index d73cefe728d..999c1a0c70b 100644
--- a/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.html
+++ b/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.html
@@ -9,10 +9,10 @@
                     </select>
                 </div>
             </div>
-            <div style="position: relative">
+            <div class="position-relative">
                 <input class="form-control width-sidebar-form-control-search" type="search"
                     placeholder="Search {{reportType}}" [(ngModel)]="nameSearch" #search>
-                <i class="fa fa-search text-light-2" style="position: absolute;top: 10px;left: 11px;"></i>
+                <i class="fa fa-search text-light-2 position-absolute"></i>
                 <!--<div class="btn-group" dropdown placement="bottom right">
           <button id="button-alignment" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
             aria-controls="dropdown-alignment">
diff --git a/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.scss b/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.scss
index 49480d7b776..aebd18e91b6 100644
--- a/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.scss
+++ b/apps/web-giddh/src/app/inventory/jobwork/sidebar-components/jobwork.sidebar.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../assets/css/color.scss";
 .parent-Group > ul > li ul li div {
-    color: #8a8a8a;
+    color: $gray;
 }
 .btn-group.show {
     display: inline-block !important;
@@ -9,12 +9,12 @@
     margin-left: 8px;
     margin-top: -3px;
     background: none;
-    color: #707070;
+    color: $gray;
     padding: 6px;
     margin-right: 0px !important;
 }
 .dropdown-menu > li > a:hover {
-    background: #e5e5e5;
+    background: $whisper;
     cursor: pointer;
 }
 .dropdown-menu > li > a {
@@ -24,23 +24,23 @@ span.caret {
     display: none;
 }
 #inventory-sidebar {
-    background: #fff;
+    background: $white;
     min-height: 100vh;
     width: 260px;
 }
 .stock-grp-list > li:hover {
-    background: #eeeff9;
+    background: $lavender;
 }
 .stock-grp-list > li.active {
-    background: #eeeff9;
+    background: $lavender;
 }
 .stock-grp-list > li > a:hover {
-    color: #333333;
+    color: $night-rider;
 }
 :host ::ng-deep .nav-tabs > li {
     width: 50%;
     text-align: center;
-    background: #f5f5f5;
+    background: $gray-95;
 }
 .width-sidebar-form-control {
     width: 205px;
@@ -51,8 +51,14 @@ span.caret {
     display: inline-block;
 }
 .btn-link-2 {
-    color: #0c8fe6;
+    color: $primary;
 }
 .no-data-box {
-    border-top: 1px solid #e0e0e0 !important;
+    border-top: 1px solid $whisper !important;
 }
+
+.text-light-2{
+    position: absolute;
+    top: 10px;
+    left: 11px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/inventory/jobwork/welcome-jobwork/welcome-jobwork.component.html b/apps/web-giddh/src/app/inventory/jobwork/welcome-jobwork/welcome-jobwork.component.html
index b7f934804f7..e5e00000569 100644
--- a/apps/web-giddh/src/app/inventory/jobwork/welcome-jobwork/welcome-jobwork.component.html
+++ b/apps/web-giddh/src/app/inventory/jobwork/welcome-jobwork/welcome-jobwork.component.html
@@ -1,7 +1,7 @@
 <div class="col-md-12 text-center">
-    <div class="illustration_box">
+    <div class="illustration-box">
         <img src="assets/images/new/Inventory_welcome.svg" />
-        <h3 class="mr-t1 fs18"><strong>Job Work</strong></h3>
+        <h3 class="mr-t1 font-18"><strong>Job Work</strong></h3>
         <p class="mr-t1">Add & Manage product in the inventory</p>
         <button class="btn btn-sky-blue mr-t2" (click)="toggleTransferAsidePane()">Start</button>
     </div>
diff --git a/apps/web-giddh/src/app/inventory/manufacturing/manufacturing.component.scss b/apps/web-giddh/src/app/inventory/manufacturing/manufacturing.component.scss
index c1c0d2b9887..dadb7888d08 100644
--- a/apps/web-giddh/src/app/inventory/manufacturing/manufacturing.component.scss
+++ b/apps/web-giddh/src/app/inventory/manufacturing/manufacturing.component.scss
@@ -1,3 +1,3 @@
-.illustration_box {
+.illustration-box {
     margin-top: 200px;
 }
diff --git a/apps/web-giddh/src/app/invoice/create/invoice.create.component.html b/apps/web-giddh/src/app/invoice/create/invoice.create.component.html
index 02e5960e4cd..d3cf5be2b17 100644
--- a/apps/web-giddh/src/app/invoice/create/invoice.create.component.html
+++ b/apps/web-giddh/src/app/invoice/create/invoice.create.component.html
@@ -1,8 +1,8 @@
 <!-- <form #invoiceForm="ngForm" (ngSubmit)="onSubmitInvoiceForm()" novalidate class="clearfix mr-b2" *ngIf="invoiceDataFound && templateHeader" autocomplete="off">
 
-    <div class="bdrB clearfix">
+    <div class="bd-rb clearfix">
         <div class="col-xs-6">
-            <div class="form-group size_380" *ngIf="templateHeader?.customerName?.display">
+            <div class="form-group size-380" *ngIf="templateHeader?.customerName?.display">
                 <label>Customer Name</label>
                 <input type="text" name="customerName" class="form-control" [(ngModel)]="invFormData.voucherDetails.customerName" />
             </div>
@@ -13,10 +13,10 @@
         </div>
     </div>
 
-    <section class="clearfix mrB4">
+    <section class="clearfix mr-b4">
         <section class="form-inline col-xs-12">
-            <div class="pdT2 clearfix">
-                <div class="form-group size_340">
+            <div class="pd-t2 clearfix">
+                <div class="form-group size-340">
                     <label>Attention to</label>
                     <input type="text" name="attention" class="form-control" [(ngModel)]="invFormData.accountDetails.attentionTo" />
                 </div>
@@ -51,9 +51,9 @@
 
             </div>
 
-            <div class="pdT2 clearfix flex-row">
+            <div class="pd-t2 clearfix flex-row">
                 <div class="flex-row-child">
-                    <div class="form-group size_340" *ngIf="templateHeader?.billingAddress?.display">
+                    <div class="form-group size-340" *ngIf="templateHeader?.billingAddress?.display">
                         <label>{{templateHeader?.billingAddress?.label}}</label>
                         <textarea name="billingDetails.address" class="form-control" [(ngModel)]="invFormData.accountDetails.billingDetails.address"></textarea>
                     </div>
@@ -69,7 +69,7 @@
                     </div>
                 </div>
                 <div class="flex-row-child">
-                    <div class="form-group size_340" *ngIf="templateHeader?.shippingAddress?.display">
+                    <div class="form-group size-340" *ngIf="templateHeader?.shippingAddress?.display">
                         <label>{{templateHeader?.shippingAddress?.label}}</label>
                         <textarea name="shippingDetails.address" class="form-control" [(ngModel)]="invFormData.accountDetails.shippingDetails.address"></textarea>
                     </div>
@@ -86,30 +86,30 @@
                 </div>
             </div>
 
-            <div class="pdT2 clearfix">
-                <div class="form-group size_175" *ngIf="templateHeader?.shippingDate?.display">
+            <div class="pd-t2 clearfix">
+                <div class="form-group size-175" *ngIf="templateHeader?.shippingDate?.display">
                     <label>{{templateHeader?.shippingDate?.label}}</label>
                     <input type="text" [placeholder]="giddhDateFormat" name="shippingDate" [(ngModel)]="invFormData.templateDetails.other.shippingDate" class="form-control" bsDatepicker [bsConfig]="{ dateInputFormat: giddhDateFormat }" #shippingDate="ngModel" [class.invalid-inp]="shippingDate.errors && (shippingDate.dirty || shippingDate.touched)"
                     />
                     <p class="text-danger" *ngIf="shippingDate.errors && (shippingDate.dirty || shippingDate.touched)">Invalid Date</p>
                 </div>
-                <div class="form-group size_175" *ngIf="templateHeader?.shippedVia?.display">
+                <div class="form-group size-175" *ngIf="templateHeader?.shippedVia?.display">
                     <label>{{templateHeader?.shippedVia?.label}}</label>
                     <input type="text" name="shippedVia" class="form-control" [(ngModel)]="invFormData.templateDetails.other.shippedVia" />
                 </div>
-                <div class="form-group size_175">
+                <div class="form-group size-175">
                     <label>Tracking No.</label>
                     <input type="text" name="country" class="form-control" [(ngModel)]="invFormData.templateDetails.other.trackingNumber" />
                 </div>
-                <div class="form-group size_175">
+                <div class="form-group size-175">
                     <label>{{templateHeader?.customField1?.label || 'Custom Field 1'}}</label>
                     <input type="text" name="customField1" class="form-control" [(ngModel)]="invFormData.templateDetails.other.customField1" />
                 </div>
-                <div class="form-group size_175">
+                <div class="form-group size-175">
                     <label>{{templateHeader?.customField2?.label || 'Custom Field 2' }}</label>
                     <input type="text" name="customField2" class="form-control" [(ngModel)]="invFormData.templateDetails.other.customField2" />
                 </div>
-                <div class="form-group size_175">
+                <div class="form-group size-175">
                     <label>{{templateHeader?.customField3?.label || 'Custom Field 3' }}</label>
                     <input type="text" name="customField3" class="form-control" [(ngModel)]="invFormData.templateDetails.other.customField3" />
                 </div>
@@ -117,9 +117,9 @@
         </section>
     </section>
 
-    <section class="clearfix mr-b2 whiteBg">
+    <section class="clearfix mr-b2 white-bg">
         <table class="table">
-            <thead class="t-h-bg1">
+            <thead class="thead-background1">
                 <tr>
                     <th [hidden]="!customThead['sNo']?.display">{{ customThead['sNo']?.label }}</th>
                     <th [hidden]="!customThead['date']?.display">{{ customThead['date']?.label }}</th>
@@ -184,10 +184,10 @@
     </section>
 
     <section class="row">
-        <section id="actionPane" class="text-center mrB4">
+        <section id="actionPane" class="text-center mr-b4">
             <div class="col-xs-12">
                 <div class="pull-right pr">
-                    <button *ngIf="showCloseButton" type="button" class="btn btn-default mrR1" (click)="closePopupEvent({ action: 'closed' })">Close
+                    <button *ngIf="showCloseButton" type="button" class="btn btn-default mr-r1" (click)="closePopupEvent({ action: 'closed' })">Close
           </button>
                     <button type="submit" class="btn btn-default" [disabled]="invoiceForm.invalid">
             <span *ngIf="updateMode">Update Voucher</span>
@@ -202,21 +202,21 @@
     *ngIf="invoiceDataFound && templateHeader" autocomplete="off">
     <div class="clearfix ">
         <div class="clearfix wrapper-customer-table ">
-            <table class="table customerInvoiceTable">
+            <table class="table customer-invoice-table">
                 <tr>
                     <td width="150px">
                         <label>Customers Name </label>
                     </td>
                     <td width="65%">
                         <div class="clearfix">
-                            <input style="width:48.5%; float: left;" type="text" name="customerName"
-                                class="form-control" [(ngModel)]="invFormData.voucherDetails.customerName" />
+                            <input type="text" name="customerName"
+                                class="form-control float-left input-width-name" [(ngModel)]="invFormData.voucherDetails.customerName" />
                         </div>
                         <!-- flex row child end -->
                     </td>
                     <td>
                         <div class=" text-right">
-                            <p class="fs20 b">
+                            <p class="font-20 b">
                                 <span class="balance-due">Balance Due: </span>
                                 <span class="sp-rupees">Rs
                                     {{invFormData.voucherDetails.grandTotal |giddhCurrency }}</span>
@@ -228,10 +228,10 @@
                     <td></td>
                     <td>
                         <ng-container>
-                            <section class="form-inline  ">
-                                <div class=" wrap-billing-address clearfix">
+                            <section class="form-inline">
+                                <div class="wrap-billing-address clearfix">
                                     <div class="row">
-                                        <div class="col-xs-6">
+                                        <div class="col-6">
                                             <div class="form-group">
                                                 <label>Billing Address</label>
                                                 <div class="billing-address clearfix">
@@ -239,7 +239,7 @@
                                                         [(ngModel)]="invFormData.accountDetails.billingDetails.address"
                                                         rows="3" autocomplete="off" autofocus="off"
                                                         aria-autocomplete="none"></textarea>
-                                                    <div class="">
+                                                    <div class="row">
                                                         <div class="col-sm-6 pd mr-b1">
 
                                                             <sales-sh-select [placeholder]="'Country'" [disabled]="true"
@@ -272,8 +272,8 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-xs-6">
-                                            <div class="form-group p0 width100">
+                                        <div class="col-6">
+                                            <div class="form-group p-0 width-100">
                                                 <label class="d-flex justify-content-center align-items-center">
                                                     <input type="checkbox" (change)="autoFillShippingDetails()"
                                                         name="autoFillShipping" [attr.checked]="true"
@@ -286,7 +286,7 @@
                                                         [(ngModel)]="invFormData.accountDetails.shippingDetails.address"
                                                         rows="3" autocomplete="off"></textarea>
                                                     <div class="clearfix">
-                                                        <div class="form-group">
+                                                        <div class="form-group row">
                                                             <div class="col-sm-6 pd mr-b1">
                                                                 <div class="form-group">
 
@@ -334,7 +334,7 @@
 
 
             </table>
-            <table class="innerTable table  customerInvoiceTable bg-white">
+            <table class="inner-table table customer-invoice-table bg-white">
                 <tr>
                     <td>
                         <label>Attention to</label>
@@ -383,19 +383,19 @@
                     <td>
                         <label> Invoice #</label>
                     </td>
-                    <td style="position:relative">
-                        <div class="col-xs-6 pl-0">
+                    <td class="position-relative row">
+                        <div class="col-6 pl-0">
                             <input type="text" [disabled]="updateMode" name="invoiceNumber" class="form-control"
                                 [(ngModel)]="invFormData.voucherDetails.voucherNumber" />
                         </div>
-                        <div class="col-xs-6 invoice-date-due-date">
+                        <div class="col-6 invoice-date-due-date">
                             <div class="form-inline ">
                                 <div class="form-group m-r-15">
 
                                     <label>Invoice Date</label>
 
                                     <input type="text" [placeholder]="giddhDateFormat" #voucherDate="ngModel"
-                                        class="form-control dateinvoice" bsDatepicker
+                                        class="form-control date-invoice" bsDatepicker
                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }" name="invoiceDate"
                                         [(ngModel)]="invFormData.voucherDetails.voucherDate" />
                                     <!-- <p class="text-danger" *ngIf="voucherDate.errors && (voucherDate.dirty || voucherDate.touched)">Invalid Date
@@ -405,7 +405,7 @@
 
 
                                 </div>
-                                <div class="form-group m-l-10 m-r-15">
+                                <div class="form-group mr-l1 m-r-15">
                                     <label>{{templateHeader?.dueDate?.label}}</label>
                                     <input type="text" [placeholder]="giddhDateFormat" name="dueDate"
                                         [(ngModel)]="invFormData.voucherDetails.dueDate" [minDate]="maxDueDate"
@@ -473,13 +473,13 @@
 
 
         </section> -->
-    <section class="staticInvoiceTable salseInvoicetable clearfix mr-b2 whiteBg container-fluid ng-tns-c8-0 ">
+    <section class="static-invoice-table sales-invoice-table clearfix mr-b2 white-bg container-fluid ng-tns-c8-0 ">
         <!-- <table class="table  table-custom-invoice  basic">
                 <tr>
                     <td colspan="2"> -->
 
-        <table class="table  table-custom-invoice  basic cursor-pointer">
-            <thead class="t-h-bg1" (click)="setActiveIndxs(1000)">
+        <table class="table table-custom-invoice  basic cursor-pointer">
+            <thead class="thead-background1" (click)="setActiveIndxs(1000)">
                 <tr>
                     <th *ngFor="let item of tthead" attr.data-field="{{item.label}}" [hidden]="!item.display">
                         {{item.label}}
@@ -493,23 +493,23 @@
                         <td>{{ entryIdx + 1 }}</td>
                         <!-- {{ getSerialNos(entryIndex, transIndex) }} -->
                         <td>
-                            <div class="productName">
-                                <label *ngIf="!transaction.accountName" class="selectAccountLabel">Click to Select
+                            <div class="product-name">
+                                <label *ngIf="!transaction.accountName" class="select-account-label">Click to Select
                                     Account </label>{{transaction.accountName}}
                                 <span
                                     *ngIf="transaction.stockDetails?.uniqueName">({{transaction.stockDetails?.name}})</span>
 
                             </div>
-                            <div class="skuNumber">
+                            <div class="sku-number">
                                 <label>SKU:</label>Number
                             </div>
-                            <div class="discription">
+                            <div class="description">
                                 {{transaction.description}}
 
                             </div>
-                            <div class="dateHsnCode">
+                            <div class="date-hsn-code">
                                 <div class="row">
-                                    <div class="col-xs-6">
+                                    <div class="col-6">
                                         <div class="entryDate">
                                             <label>Entry Date: </label> {{moment(entry.entryDate) | date: 'MM-dd-yyyy'}}
                                             <span class="edit-icon">
@@ -521,8 +521,8 @@
 
                                         </div>
                                     </div>
-                                    <div class="col-xs-6">
-                                        <div class="hsnCode text-right">
+                                    <div class="col-6">
+                                        <div class="hsn-code text-right">
                                             <label>HSN Code:</label>
                                             <span>
                                                 {{transaction?.hsnNumber}}
@@ -559,10 +559,8 @@
                         </td>
                         <td class="text-right">{{ getTransactionTotalTax(entry.taxes) |giddhCurrency }}</td>
 
-                        <td *ngIf="transaction.category === 'income'" style="vertical-align:top !important;"
-                            class="text-right">{{ getEntryTotal(entry, transIndex) |giddhCurrency }}</td>
-                        <td *ngIf="transaction.category !== 'income'" style="vertical-align:top !important;"
-                            class="text-right">{{ transaction.amount |giddhCurrency }}</td>
+                        <td *ngIf="transaction.category === 'income'" class="text-right align-top">{{ getEntryTotal(entry, transIndex) |giddhCurrency }}</td>
+                        <td *ngIf="transaction.category !== 'income'" class="text-right align-top">{{ transaction.amount |giddhCurrency }}</td>
 
 
 
@@ -575,7 +573,7 @@
                     <tr [hidden]="activeIndx !== entryIdx" class="row-active">
                         <td>{{ entryIdx + 1 }}</td>
                         <td>
-                            <div class="productName">
+                            <div class="product-name">
                                 <div class="ng-select-wrap">
                                     <input type="text" [(ngModel)]="transaction.accountName" [disabled]="true"
                                         name="transaction.accountName" [placeholder]="'Select A/c'" />
@@ -584,18 +582,18 @@
 
                             </div>
                             <div class="">
-                                <div class="skuNumber">
+                                <div class="sku-number">
                                     <label>SKU:</label>Number
                                 </div>
-                                <div class="discription">
+                                <div class="description">
                                     <textarea type="text" placeholder="Add Description"
                                         name="transaction.description_{{entryIdx}}" class="form-control"
                                         [(ngModel)]="transaction.description"></textarea>
 
                                 </div>
-                                <div class="dateHsnCode">
+                                <div class="date-hsn-code">
                                     <div class="row">
-                                        <div class="col-xs-6">
+                                        <div class="col-6">
                                             <div class="entryDate">
                                                 <label>Entry Date: </label>
                                                 <span>
@@ -614,9 +612,9 @@
 
                                             </div>
                                         </div>
-                                        <div class="col-xs-6">
-                                            <div class="wrap-hsnBox">
-                                                <div class="hsnCode text-right"
+                                        <div class="col-6">
+                                            <div class="wrap-hsn-box">
+                                                <div class="hsn-code text-right"
                                                     (click)="hsnDropdownShow=!hsnDropdownShow">
                                                     <label>HSN Code:</label>
                                                     <span>
@@ -624,7 +622,7 @@
                               name="transaction.hsnNumber_{{entryIdx}}" class="form-control text-right"
                               [(ngModel)]="transaction.hsnNumber"/> -->
                                                         {{transaction?.hsnNumber }} <span *ngIf="!transaction.hsnNumber"
-                                                            class="updateText">Update</span>
+                                                            class="update-text">Update</span>
                                                         <span class="edit-icon">
                                                             <img src="assets/images/edit-pencilicon.svg">
                                                         </span>
@@ -633,7 +631,7 @@
                                                 </div>
 
 
-                                                <div class="hsnCodeDropdown" *ngIf="hsnDropdownShow">
+                                                <div class="hsn-code-dropdown" *ngIf="hsnDropdownShow">
                                                     <label>HSN Code</label>
                                                     <input type="text" maxLength="10" placeholder="HSN Number"
                                                         name="transaction.hsnNumber_{{entryIdx}}" class=""
@@ -658,7 +656,7 @@
                                 name="transaction.quantity_{{entryIdx}}" class="form-control text-right"
                                 [(ngModel)]="transaction.quantity" />
 
-                            <select class="form-control" style=" max-width: 150px;" [disabled]="true"
+                            <select class="form-control stock-list-dropdown" [disabled]="true"
                                 name="transaction.stockUnit_{{entryIdx}}" [(ngModel)]="transaction.stockUnit"
                                 (ngModelChange)="transaction.setAmount(entry)">
                                 <option *ngFor="let stock of transaction.stockList" [ngValue]="stock.id">{{stock.text}}
@@ -693,18 +691,16 @@
                             <input type="text" [disabled]="true" placeholder="Tax" [value]="totalTax"
                                 class="form-control text-right" decimalDigitsDirective [DecimalPlaces]="2" />
 
-                            <!-- <sales-tax-list class="salesTax" [showTaxPopup]="false" (selectedTaxEvent)="selectedTaxEvent($event)" (closeOtherPopupEvent)="closeDiscountPopup()" (taxAmountSumEvent)="taxAmountEvent($event, transaction, entry)">
+                            <!-- <sales-tax-list class="sales-tax" [showTaxPopup]="false" (selectedTaxEvent)="selectedTaxEvent($event)" (closeOtherPopupEvent)="closeDiscountPopup()" (taxAmountSumEvent)="taxAmountEvent($event, transaction, entry)">
                             </sales-tax-list> -->
                         </td>
                         <td *ngIf="transaction.category !== 'income'">&nbsp;</td>
 
-                        <td *ngIf="transaction.category === 'income'" class="text-right"
-                            style="vertical-align:top !important;">
+                        <td *ngIf="transaction.category === 'income'" class="text-right align-top">
                             <input type="text" name="transaction.total_{{entryIdx}}" placeholder="Total"
                                 class="form-control text-right" [value]="tx_total" readonly decimalDigitsDirective
                                 [DecimalPlaces]="2" /></td>
-                        <td *ngIf="transaction.category !== 'income'" class="text-right"
-                            style="vertical-align:top !important;">
+                        <td *ngIf="transaction.category !== 'income'" class="text-right align-top">
                             <input type="text" name="transaction.total_{{entryIdx}}" placeholder="Total"
                                 class="form-control text-right" [value]="transaction.amount" readonly
                                 decimalDigitsDirective [DecimalPlaces]="2" /></td>
@@ -732,9 +728,9 @@
                                 </div>
                                 <div class="ico-head">Other Details</div>
                             </div>
-                            <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pdL3 mr0">
+                            <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pd-l3 m-0">
                                 <div class="row">
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Ship Date</label> -->
                                             <giddh-datepicker #shippingDate="ngModel" placeholder="Ship Date" name="shippingDate"
                                                 [(ngModel)]="invFormData.templateDetails.other.shippingDate"
@@ -746,13 +742,13 @@
                                             Invalid Date</p>
                                         <!--[placeholder]="giddhDateFormat"-->
                                     </div>
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Ship Via</label> -->
                                         <input type="text" name="shippedVia"
                                             [(ngModel)]="invFormData.templateDetails.other.shippedVia"
                                             class="form-control" placeholder="Ship Via" />
                                     </div>
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Tracking No.</label> -->
                                         <input type="text" name="trackingNumber"
                                             [(ngModel)]="invFormData.templateDetails.other.trackingNumber"
@@ -760,19 +756,19 @@
                                     </div>
                                 </div>
                                 <div class="row">
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Field 1</label> -->
                                         <input type="text" name="customField1"
                                             [(ngModel)]="invFormData.templateDetails.other.customField1"
                                             class="form-control" placeholder="Field 1" />
                                     </div>
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Field 2</label> -->
                                         <input type="text" name="customField2"
                                             [(ngModel)]="invFormData.templateDetails.other.customField2"
                                             class="form-control" placeholder="Field 2" />
                                     </div>
-                                    <div class="form-group col-xs-4">
+                                    <div class="form-group col-4">
                                         <!-- <label>Field 3</label> -->
                                         <input type="text" name="customField3"
                                             [(ngModel)]="invFormData.templateDetails.other.customField3"
@@ -782,9 +778,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="pd-t1 pl0 max-600">
+                    <div class="pd-t1 pl-0 max-600">
                         <label class="mr-b1">Message</label>
-                        <textarea style="height:120px !important;" class="form-control" name="message2"
+                        <textarea rows="3" class="form-control" name="message2"
                             [(ngModel)]="invFormData.templateDetails.other.message2"></textarea>
 
                     </div>
@@ -792,45 +788,45 @@
 -->
 
                 </td>
-                <td class="text-danger text-center" style="display:none;">Note:To edit current invoice amount or rate <a
+                <td class="text-danger text-center d-none">Note:To edit current invoice amount or rate <a
                         class="cursor-pointer" (click)="goToLeger();">Click here</a></td>
                 <td>
-                    <section class="tableSec form-group">
-                        <div class="tableRow">
-                            <div class="tableCell">Total Amount</div>
-                            <div class="tableCell figureCell">{{invFormData.voucherDetails.subTotal |giddhCurrency }}
+                    <section class="table-sec form-group">
+                        <div class="table-row">
+                            <div class="table-cell">Total Amount</div>
+                            <div class="table-cell figure-cell">{{invFormData.voucherDetails.subTotal |giddhCurrency }}
                             </div>
                         </div>
-                        <div class="tableRow">
-                            <div class="tableCell">Discount</div>
-                            <div class="tableCell figureCell">
+                        <div class="table-row">
+                            <div class="table-cell">Discount</div>
+                            <div class="table-cell figure-cell">
                                 -{{invFormData.voucherDetails.totalDiscount |giddhCurrency }}</div>
                         </div>
-                        <div class="tableRow">
-                            <div class="tableCell">Taxable Value</div>
-                            <div class="tableCell figureCell">
+                        <div class="table-row">
+                            <div class="table-cell">Taxable Value</div>
+                            <div class="table-cell figure-cell">
                                 {{invFormData.voucherDetails.totalTaxableValue |giddhCurrency }}
                             </div>
                         </div>
-                        <div class="tableRow">
-                            <div class="tableCell">Tax</div>
-                            <div class="tableCell figureCell">
+                        <div class="table-row">
+                            <div class="table-cell">Tax</div>
+                            <div class="table-cell figure-cell">
                                 {{invFormData.voucherDetails.gstTaxesTotal |giddhCurrency }}</div>
                         </div>
-                        <div class="tableRow">
-                            <div class="tableCell">
+                        <div class="table-row">
+                            <div class="table-cell">
                                 <strong>Total</strong>
                             </div>
-                            <div class="tableCell figureCell">
+                            <div class="table-cell figure-cell">
                                 <strong>{{invFormData.voucherDetails.grandTotal |giddhCurrency }}</strong>
                             </div>
                         </div>
 
-                        <!-- <div class="tableRow" *ngIf="toggleFieldForSales">
-                            <div class="tableCell">
+                        <!-- <div class="table-row" *ngIf="toggleFieldForSales">
+                            <div class="table-cell">
                                 <strong>Balance Due</strong>
                             </div>
-                            <div class="tableCell figureCell">
+                            <div class="table-cell figure-cell">
                                 <strong>{{invFormData.voucherDetails.balanceDue |giddhCurrency }}</strong>
                             </div>
                         </div> -->
@@ -848,7 +844,7 @@
 
             </div> -->
         <!-- sub total and total calc -->
-        <!-- <table class="table otherDetailTable">
+        <!-- <table class="table other-detail-table">
                 <tbody>
 
                 </tbody>
@@ -863,15 +859,15 @@
 
 
 
-    <section class="clearfix mr-b2 whiteBg container-fluid">
+    <section class="clearfix mr-b2 white-bg container-fluid">
 
 
     </section>
     <section>
-        <section id="actionPane" class="text-center mrB4">
-            <div class="col-xs-12">
-                <div class="pull-right pr">
-                    <button *ngIf="showCloseButton" type="button" class="btn btn-default mrR1"
+        <section id="actionPane" class="text-center mr-b4">
+            <div class="col-md-12">
+                <div class="pull-right position-relative">
+                    <button *ngIf="showCloseButton" type="button" class="btn btn-default mr-r1"
                         (click)="closePopupEvent({ action: 'closed' })">Close
                     </button>
                     <button type="submit" class="btn btn-default" [disabled]="invoiceForm.invalid">
diff --git a/apps/web-giddh/src/app/invoice/create/invoice.create.component.scss b/apps/web-giddh/src/app/invoice/create/invoice.create.component.scss
index a6438d17185..243c718c816 100644
--- a/apps/web-giddh/src/app/invoice/create/invoice.create.component.scss
+++ b/apps/web-giddh/src/app/invoice/create/invoice.create.component.scss
@@ -1,6 +1,6 @@
 @import '../../../assets/css/color.scss';
-.whiteBg {
-    background-color: #fff;
+.white-bg {
+    background-color: $white;
 }
 .flex-row {
     display: flex;
@@ -16,6 +16,14 @@
     background-color: $very-light-gray;
 }
 
+.input-width-name{
+    width:48.5% !important;
+}
+
+.stock-list-dropdown{
+    max-width: 150px !important;
+}
+
 // styles
 .form-inline {
     .form-group {
@@ -44,35 +52,35 @@
         font-weight: 400;
         margin-bottom: 5px;
     }
-    &.size_175 {
+    &.size-175 {
         input,
         select,
         textarea {
             width: 175px;
         }
     }
-    &.size_240 {
+    &.size-240 {
         input,
         select,
         textarea {
             width: 240px;
         }
     }
-    &.size_340 {
+    &.size-340 {
         input,
         select,
         textarea {
             width: 340px;
         }
     }
-    &.size_380 {
+    &.size-380 {
         input,
         select,
         textarea {
             width: 380px;
         }
     }
-    &.noMarg {
+    &.no-margin {
         margin: 0;
     }
 }
@@ -81,7 +89,7 @@
     width: 100%;
     height: 42px;
 }
-.staticInvoiceTable table {
+.static-invoice-table table {
     max-width: 1280px;
     width: 100%;
 }
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.html b/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.html
index c4f2fd2ea53..9a0f52cdf42 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.html
+++ b/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.html
@@ -2,32 +2,32 @@
 <div class="padd15">
     <div>
         <form #generateInvForm="ngForm" autocomplete="off">
-            <div class=" col-xs-9 ">
+            <div>
                 <!--part-A-->
                 <div><strong>PART A</strong></div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Sub Type*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
                         <sh-select class=" input " #subgrp [options]="SubsupplyTypesList"
-                            (selected)="subTypeElementSelected($event)" required placeholder="select type"
+                            (selected)="subTypeElementSelected($event)" required [isRequired]="true" placeholder="select type"
                             [isFilterEnabled]="true" name="subSupplyType"
                             [(ngModel)]="generateEwayBillform.subSupplyType" [ItemHeight]="33"></sh-select>
 
                     </div>
                 </div>
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Document Type*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <!-- <input type="text " placeholder="Mention Number " class="form-control input " /> -->
-                        <sh-select class="input" #doctypes autocomplete="xyz" [options]="TransporterDocType" required
+                        <sh-select class="input" #doctypes autocomplete="xyz" [options]="TransporterDocType" required [isRequired]="true"
                             placeholder="select type" [isFilterEnabled]="true" name="docType"
                             [(ngModel)]="generateEwayBillform.docType" [ItemHeight]="33"></sh-select>
 
@@ -35,11 +35,11 @@
                     </div>
                 </div>
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label for="toGstIn">GSTIN of Receiver*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15 d-inline">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15 d-inline">
 
                         <input type="text " disabled="true" name="toGstIn" required minlength="15" maxlength="15"
                             autocomplete="off" placeholder="Enter GSTIN of receiver"
@@ -51,11 +51,11 @@
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label for="toPinCode">PinCode of Receiver*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <input type="number " name="toPinCode" autocomplete="off" maxlength="6" digitsOnlyDirective
                             required [(ngModel)]="generateEwayBillform.toPinCode" placeholder="Enter pincode "
@@ -63,14 +63,14 @@
 
                     </div>
                 </div>
-                <div><strong class="mt-15 d-block ">Transportation Details</strong></div>
+                <div><strong class="mr-t15 d-block ">Transportation Details</strong></div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label for="transporterName">Transporter</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <!-- <input type="text " name="transporterName" [(ngModel)]="generateEwayBillform.transporterName" placeholder="Select Transporter " class="form-control input " /> -->
                         <sh-select class=" input " #trans [showClear]="showClear"
@@ -98,11 +98,11 @@
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Distance in KM*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <input type="number" maxLength="4" minlength="4" digitsOnlyDirective required
                             name="transDistance" [(ngModel)]="generateEwayBillform.transDistance"
@@ -115,11 +115,11 @@
                 <div><strong class="mt-3 d-block ">PART B</strong></div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Mode of Transportation</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <ul class="list-icon-group ">
                             <li>
@@ -153,23 +153,23 @@
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Vehicle Type</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
 
-                        <span class="pd0 mrR3">
-                            <input id="regular" class="radio-custom cp ml0" name="vehicleType" value="R"
+                        <span class="p-0 mr-r3">
+                            <input id="regular" class="radio-custom cp ml-0" name="vehicleType" value="R"
                             [(ngModel)]="generateEwayBillform.vehicleType" type="radio">
                             <label for="regular" class="radio-custom-label">Regular</label>
                         </span>
 
 
                         <ng-container *ngIf="!isTransModeRoad">
-                            <span class="pd0 mrR3">
-                                <input id="dimensional" class="radio-custom cp ml0" name="vehicleType" value="O" [(ngModel)]="generateEwayBillform.vehicleType" type="radio">
+                            <span class="p-0 mr-r3">
+                                <input id="dimensional" class="radio-custom cp ml-0" name="vehicleType" value="O" [(ngModel)]="generateEwayBillform.vehicleType" type="radio">
                                 <label for="dimensional" class="radio-custom-label">Over
                                     Dimensional Cargo {{isTransModeRoad}}</label>
                             </span>
@@ -179,11 +179,11 @@
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label>Vehicle No.*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <input #name="ngModel" type="text" name="vehicleNo" required
                             [ngClass]="{'hasError': name.invalid && name.touched && name.dirty, 'has-success':name.valid}"
@@ -198,11 +198,11 @@
 
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label for="transDocNo">Transporter’s Doc No.</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <input type="text " name="transDocNo" placeholder="Mention Number "
                             [(ngModel)]="generateEwayBillform.transDocNo" maxlength="15" class="form-control input " />
@@ -211,11 +211,11 @@
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-3 col-lg-3 col-sm-12 mt-15">
+                    <div class="col-md-3 col-lg-3 col-sm-12 mr-t15">
                         <label for="transDocDate">Transporter’s Doc Date</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                         <div style="position: relative " class="input ">
                             <input name="transDocDate" placeholder="dd/mm/yyyy " type="text "
@@ -249,13 +249,13 @@
                 <ng-container *ngFor='let invoice of selectedInvoices'>
                     <div class="card ">
                         <h2 class="mb-2 "><a class="btn-link ">{{invoice?.voucherNumber}}</a></h2>
-                        <div class="mb-1 ">
+                        <div class="mr-b1 ">
                             <label>Date: </label><span>{{invoice?.voucherDate}}</span>
                         </div>
-                        <div class="mb-1 ">
+                        <div class="mr-b1 ">
                             <label>To: </label><span>{{invoice?.account.name}}</span>
                         </div>
-                        <div class="mb-1 ">
+                        <div class="mr-b1 ">
                             <label>Amt: </label><span>{{invoice?.grandTotal?.amountForAccount}}</span>
                         </div>
                         <div><button (click)="removeInvoice(invoice)" class="btn btn-danger ">Remove</button></div>
@@ -327,15 +327,15 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
 
                 <div class="form-group mt-3">
                     <div class="clearfix" *ngIf="!transportEditMode">
-                        <!-- <button class="btn btn-md btn-green mrR1" (click)="saveTransportForm(generateTransporterForm)">Save</button> -->
-                        <button class="btn btn-md btn-success mrR1" [disabled]="generateTransporterForm.invalid"
+                        <!-- <button class="btn btn-md btn-green mr-r1" (click)="saveTransportForm(generateTransporterForm)">Save</button> -->
+                        <button class="btn btn-md btn-success mr-r1" [disabled]="generateTransporterForm.invalid"
                             [ladda]="isGenarateTransporterInProcess$ | async"
                             (click)="generateTransporter(generateTransporterForm)" type="submit">Save</button>
                         <button class="btn btn-md btn-danger" (click)="clearTransportForm()"
                             type="submit">Clear</button>
                     </div>
                     <div class="clearfix" *ngIf="transportEditMode">
-                        <button class="btn btn-md btn-green mrR1" [ladda]="updateTransporterInProcess$ | async"
+                        <button class="btn btn-md btn-green mr-r1" [ladda]="updateTransporterInProcess$ | async"
                             (click)="updateTransporter(generateTransporterForm)" type="submit">Update</button>
                         <button class="btn btn-md btn-danger" (click)="clearTransportForm()">Clear</button>
                     </div>
@@ -344,7 +344,7 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
             </div>
         </form>
         <!-- <div class="aside-body pd-2 bg-white">
-                <div class="input-group mb-1">
+                <div class="input-group mr-b1">
                     <input class="form-control" placeholder="Search Transporter">
                     <span class="input-group-btn">
                     <button class="btn btn-default text-light" type="button"><i class="icon-search2"></i>
@@ -360,11 +360,11 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
                             <div class="icon-pointer pull-right">
                                 <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                                     (click)="sortButtonClicked('asc', 'transporterName')"
-                                    [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'asc'}">
+                                    [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'asc'}">
                                 </div>
                                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                                     (click)="sortButtonClicked('desc', 'transporterName')"
-                                    [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'desc'}">
+                                    [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterName' && transporterFilterRequest.sort === 'desc'}">
                                 </div>
                             </div>
                         </th>
@@ -373,11 +373,11 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
                             <div class="icon-pointer pull-right">
                                 <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                                     (click)="sortButtonClicked('asc', 'transporterId')"
-                                    [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'asc'}">
+                                    [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'asc'}">
                                 </div>
                                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                                     (click)="sortButtonClicked('desc', 'transporterId')"
-                                    [ngClass]="{'activeTextColor': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'desc'}">
+                                    [ngClass]="{'active-text-color': transporterFilterRequest.sortBy === 'transporterId' && transporterFilterRequest.sort === 'desc'}">
                                 </div>
                             </div>
                         </th>
@@ -394,7 +394,7 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
                 </tr>
             </table>
         </div>
-        <div class="alC mt-4 mb-4" *ngIf="transporterListDetails">
+        <div class="text-center mt-4 mb-4" *ngIf="transporterListDetails">
             <pagination [totalItems]="transporterListDetails.totalPages" [(ngModel)]="transporterListDetails.page"
                 [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="1" [rotate]="false"
                 (pageChanged)="pageChanged($event)"></pagination>
@@ -446,8 +446,8 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
             <div class="form-group">
                 <label class="col-xs-3 pt-1">Vehicle Type</label>
                 <div class="col-xs-9">
-                    <label class="radio-inline pd0"><input class="radio_theme cp ml0" name="vehicleType"   value="R" type="radio" />Regular </label>
-                    <label class="radio-inline pd0"><input class="radio_theme cp ml0" name="vehicleType"  value="O" type="radio"/>Over Dimensional Cargo</label>
+                    <label class="radio-inline p-0"><input class="radio-theme cp ml-0" name="vehicleType"   value="R" type="radio" />Regular </label>
+                    <label class="radio-inline p-0"><input class="radio-theme cp ml-0" name="vehicleType"  value="O" type="radio"/>Over Dimensional Cargo</label>
                 </div>
             </div>
 
@@ -518,7 +518,7 @@ <h3 class="aside-title pl-2">Manage Transporter</h3>
             <div class="form-group mt-5">
                 <label class="col-xs-3 control-label"></label>
                 <div class="col-xs-8">
-                    <button class="btn btn-md btn-success mrR1" type="submit">Save</button>
+                    <button class="btn btn-md btn-success mr-r1" type="submit">Save</button>
                     <button class="btn btn-md btn-danger" type="submit">Cancel</button>
                 </div>
             </div>
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.scss b/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.scss
index 6bff125e649..a99a3f80911 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.scss
+++ b/apps/web-giddh/src/app/invoice/eWayBill/create/eWayBill.create.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../assets/css/color.scss";
 .right-penal {
-    border-left: 1px solid #c6c6c6;
+    border-left: 1px solid $silver;
     position: fixed;
     right: 0;
     bottom: 0;
@@ -12,21 +12,21 @@
         width: 100%;
         margin-bottom: 15px;
         border-radius: 4px;
-        background-color: white;
+        background-color: $white;
         padding: 15px;
         h2 {
             font-size: 14px;
-            color: #0c8fe6;
+            color: $primary;
         }
         label {
-            color: #666666;
+            color: $dark-gray;
             font-size: 12px;
             width: 20%;
             font-weight: 800;
         }
         span {
             font-size: 12px;
-            color: #333333;
+            color: $night-rider;
         }
     }
 }
@@ -82,7 +82,7 @@
 }
 
 .list-icon-group input:checked + label {
-    background-color: white;
+    background-color: $white;
     box-shadow: 2px 2px 5px $gainsboro;
 }
 
@@ -111,14 +111,14 @@
 
 .aside-right {
     font-size: 14px;
-    background: #fff;
+    background: $white;
     right: -530px;
     transition: 0.5s all ease;
     z-index: 999;
 }
 
 .bg-white {
-    background: #fff !important;
+    background: $white !important;
 }
 
 .aside-right .control-label {
@@ -127,7 +127,7 @@
 }
 
 .bg-gray {
-    background: #f7f8fa;
+    background: $alice-blue-light;
 }
 
 .aside-right .list-icon-group label {
@@ -151,21 +151,21 @@
 
 .table-modal tbody td {
     border-top: 0px solid !important;
-    border-right: 1px solid #c6c6c6;
+    border-right: 1px solid $gainsboro;
 }
 
 .table-modal thead th {
-    border-right: 1px solid #c6c6c6 !important;
+    border-right: 1px solid $gainsboro !important;
 }
 
 .table-modal {
-    border-bottom: 1px solid #c6c6c6 !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .table-modal tbody tr td button {
     background: none;
     border: 0px;
-    color: #c7c7c7;
+    color: $whisper;
     font-size: 16px;
     padding: 2px;
     margin-right: 3px;
@@ -173,7 +173,7 @@
 }
 
 .table-modal tbody tr td .icon-edit {
-    border-bottom: 2px solid #c7c7c7;
+    border-bottom: 2px solid $gainsboro;
 }
 
 .aside-overlay.out {
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/download-or-preview-eway/download-or-preview-eway.component.html b/apps/web-giddh/src/app/invoice/eWayBill/download-or-preview-eway/download-or-preview-eway.component.html
index 14cbca445dd..8c67bbee54a 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/download-or-preview-eway/download-or-preview-eway.component.html
+++ b/apps/web-giddh/src/app/invoice/eWayBill/download-or-preview-eway/download-or-preview-eway.component.html
@@ -1,6 +1,6 @@
 <div class="modal-body noPad clearfix" id="export-body">
     <!-- <div *ngIf="isErrOccured$ | async">
-        <p class="lead alC">Oops! Something went wrong.</p>
+        <p class="lead text-center">Oops! Something went wrong.</p>
     </div> -->
     <!-- <div class="loader mr-t4" *ngIf="!showPdfWrap">
         <span></span>
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.html b/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.html
index 76e22170813..472214b8d22 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.html
+++ b/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.html
@@ -1,7 +1,7 @@
 <hamburger-menu [pageHeading]="'E-way Bill'"></hamburger-menu>
-<div class="clearfix pt-15 pb-15">
+<div class="clearfix pd-t15 pd-b15">
     <div class="col-xs-12 col-sm-12">
-        <div class="d-inline-block pull-left mr-2 middle ewayBill-date">
+        <div class="d-inline-block pull-left mr-2 middle eway-bill-date">
             <div class="custom-datepicker" (click)="showGiddhDatepicker($event)">
                 <i class="icon-calender calendar-addon"></i>
                 <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker" />
@@ -17,9 +17,9 @@
                 <div class="col-md-12">
                     <div class="table-responsive">
                         <table class="table basic table-bordered giddh-table on-mobile-view">
-                            <thead class="t-h-bg1" (clickOutside)="clickedOutside();">
+                            <thead class="thead-background1" (clickOutside)="clickedOutside();">
                                 <tr>
-                                    <th style="width:50px">#</th>
+                                    <th width="50px">#</th>
                                     <th class="nowrap">
                                         <div class="d-flex">
                                             <div class="flex-fill">Date</div>
@@ -167,11 +167,11 @@ <h1>Do search with some other dates</h1>
 
         </tab>
         <!-- <tab heading="Consolidated Eway Bill Details">
-        <div class="mt-15 clearfix">
+        <div class="mr-t15 clearfix">
             <div class="col-md-12">
                 <div class="table-responsive">
                     <table class="table basic table-bordered">
-                        <thead class="t-h-bg1">
+                        <thead class="thead-background1">
                             <tr>
                                 <th>
                                     EWB.No & Date
@@ -302,11 +302,11 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
         <div class="modal-body pb-4">
 
             <div class="row d-flex e-way-body ">
-                <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                     <label>Mode of Transportation*</label>
                 </div>
 
-                <div class="col-md-8 col-lg-8 col-sm-12 mt-15">
+                <div class="col-md-8 col-lg-8 col-sm-12 mr-t15">
 
                     <ul class="list-icon-group ">
                         <li>
@@ -337,26 +337,26 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
             <div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label>Vehicle Type*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-8 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-8 col-sm-12 mr-t15 ">
 
-                        <!-- <span class="mr-1 ">  <input type="radio "class="radio_theme " style="margin-right: 10px "/> Regular</span>
-<span>  <input type="radio "class="radio_theme " style="margin-right: 10px "/> Over Dimensional Cargo</span> -->
+                        <!-- <span class="mr-1 ">  <input type="radio "class="radio-theme " style="margin-right: 10px "/> Regular</span>
+<span>  <input type="radio "class="radio-theme " style="margin-right: 10px "/> Over Dimensional Cargo</span> -->
 
 
 
 
-                        <span class="pd0 mrR3">
-                            <input id="regular" class="radio-custom cp ml0" type="radio" name="vehicleType" required
+                        <span class="p-0 mr-r3">
+                            <input id="regular" class="radio-custom cp ml-0" type="radio" name="vehicleType" required
                                 [(ngModel)]="updateEwayVehicleform.vehicleType" value="R">
                             <label for="regular" class="radio-custom-label">Regular</label>
                         </span>
 
-                        <span class="pd0 mrR3">
-                            <input id="dimensionalCargo" class="radio-custom cp ml0" type="radio" name="vehicleType"
+                        <span class="p-0 mr-r3">
+                            <input id="dimensionalCargo" class="radio-custom cp ml-0" type="radio" name="vehicleType"
                                 required value="O" [(ngModel)]="updateEwayVehicleform.vehicleType">
                             <label for="dimensionalCargo" class="radio-custom-label">Over Dimensional Cargo</label>
                         </span>
@@ -365,11 +365,11 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                 </div>
 
                 <div class="row d-flex e-way-body ">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">Vehicle No.*</label>
                     </div>
 
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
 
                         <input type="text" name="vehicleNo" required placeholder="Mention Number "
                             [(ngModel)]="updateEwayVehicleform.vehicleNo" maxlength="15" minlength="7"
@@ -379,10 +379,10 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">From Place*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15" id="form-place">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15" id="form-place">
                         <!-- <input type="text" required placeholder="" class="form-control input" /> -->
                         <!-- <input [ngbTypeahead]="dataSource" type="text" autocomplete="off" (keyup)="onChangeCityName()" [(ngModel)]="company.city" name="city" [resultTemplate]="rt" (selectItem)="typeaheadOnSelect($event)" class="form-control" required maxlength="50" placeholder="Branch City"
                                 pattern="^[^\s]+(\s+[^\s]+)*$"> -->
@@ -394,7 +394,7 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                         <ng-template #rt let-r="result" let-t="term">
                             <span>{{ r }}</span>
                         </ng-template> -->
-                        <sh-select [options]="searchResults" name="fromPlace" required maxlength="50"
+                        <sh-select [options]="searchResults" name="fromPlace" required [isRequired]="true" maxlength="50"
                             [(ngModel)]="updateEwayVehicleform.fromPlace" autocomplete="off"
                             (dynamicSearchedQuery)="onSearchQueryChanged($event)"
                             [enableDynamicSearch]="true"
@@ -406,24 +406,24 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">From State*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <sales-sh-select [placeholder]="'State'" [multiple]="false" [isFilterEnabled]="true"
-                            class="select-bdr-bottom" name="fromState" required
+                            class="select-bdr-bottom" name="fromState" required [isRequired]="true"
                             [(ngModel)]="updateEwayVehicleform.fromState" [options]="statesSource$ | async">
                         </sales-sh-select>
                     </div>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">Reason*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <!-- <sh-select class="input" [options]="ewayUpdateVehicleReason" required placeholder="select type" [multiple]="false" [isFilterEnabled]="true" name="reasonCode" [(ngModel)]="updateEwayVehicleform.reasonCode"></sh-select> -->
-                        <sh-select class=" input " [options]="ewayUpdateVehicleReasonList" required
+                        <sh-select class=" input " [options]="ewayUpdateVehicleReasonList" required [isRequired]="true"
                             placeholder="select type" [isFilterEnabled]="true" name="reasonCode"
                             [(ngModel)]="updateEwayVehicleform.reasonCode" [ItemHeight]="33"></sh-select>
 
@@ -431,10 +431,10 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">Remark*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <textarea name="reasonRem" class="form-control" required
                             [(ngModel)]="updateEwayVehicleform.reasonRem" placeholder="Enter the remarks"></textarea>
 
@@ -442,32 +442,31 @@ <h3 class="modal-title pull-left">Add vehicle</h3>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">Transporter's Doc No.*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <input type="text" placeholder="Enter transporter's doc no." required name="transDocNo"
                             [(ngModel)]="updateEwayVehicleform.transDocNo" class="form-control input" />
                     </div>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
                         <label class="pt-07">Transporter's Doc Date*</label>
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <input placeholder="dd/mm/yyyy " name="transDocDate" required type="text " placement="top"
                             [bsConfig]="{dateInputFormat: 'DD/MM/YYYY', adaptivePosition: true}"
-                            [(ngModel)]="updateEwayVehicleform.transDocDate" class="form-control " bsDatepicker
-                            style="padding-right: 27px !important; " />
+                            [(ngModel)]="updateEwayVehicleform.transDocDate" class="form-control pd-r3" bsDatepicker/>
                     </div>
                 </div>
 
                 <div class="row">
-                    <div class="col-md-4 col-lg-4 col-sm-12 mt-15 text-right">
+                    <div class="col-md-4 col-lg-4 col-sm-12 mr-t15 text-right">
 
                     </div>
-                    <div class="col-md-8 col-lg-6 col-sm-12 mt-15 ">
+                    <div class="col-md-8 col-lg-6 col-sm-12 mr-t15 ">
                         <button type="submit" [disabled]="updateVehicleForm.invalid"
                             [ladda]="updateEwayvehicleProcess$ | async" (click)="updateEwayTransport(updateVehicleForm)"
                             class="btn btn-success mr-2">Save
@@ -494,30 +493,30 @@ <h3 class="modal-title pull-left">Reasons For Cancellation</h3>
 
         <div class="modal-body pb-4">
             <div class="row">
-                <div class="col-md-3 col-lg-3 col-sm-12 mt-15 text-right">
+                <div class="col-md-3 col-lg-3 col-sm-12 mr-t15 text-right">
                     <label class="pt-07">Reason *</label>
                 </div>
-                <div class="col-md-8 col-lg-7 col-sm-12 mt-15">
-                    <sh-select class=" input " [options]="ewayCancelReason" required placeholder="select type"
+                <div class="col-md-8 col-lg-7 col-sm-12 mr-t15">
+                    <sh-select class=" input " [options]="ewayCancelReason" required [isRequired]="true" placeholder="select type"
                         [isFilterEnabled]="true" name="cancelRsnCode" [(ngModel)]="cancelEwayRequest.cancelRsnCode"
                         [ItemHeight]="33"></sh-select>
                 </div>
             </div>
             <div class="row">
-                <div class="col-md-3 col-lg-3 col-sm-12 mt-15 text-right">
+                <div class="col-md-3 col-lg-3 col-sm-12 mr-t15 text-right">
                     <label class="pt-07">Remark</label>
                 </div>
-                <div class="col-md-8 col-lg-7 col-sm-12 mt-15">
+                <div class="col-md-8 col-lg-7 col-sm-12 mr-t15">
                     <textarea name="cancelRmrk" class="form-control" [(ngModel)]="cancelEwayRequest.cancelRmrk"
                         placeholder="Enter the remarks"></textarea>
                 </div>
             </div>
 
             <div class="row">
-                <div class="col-md-3 col-lg-3 col-sm-12 mt-15 text-right">
+                <div class="col-md-3 col-lg-3 col-sm-12 mr-t15 text-right">
 
                 </div>
-                <div class="col-md-8 col-lg-7 col-sm-12 mt-15">
+                <div class="col-md-8 col-lg-7 col-sm-12 mr-t15">
                     <button type="submit" (click)="cancelEwayBill(cancelEwayForm)" [disabled]="cancelEwayForm.invalid"
                         [ladda]="cancelEwayInProcess$ | async" class="btn btn-success mr-2">Confirm
                     </button>
@@ -576,7 +575,7 @@ <h4 class="font-22 mb-2">1. Consolidated E-Way Bill Details</h4>
         <h4 class="font-22 mb-2">2. Item Details</h4>
         <div class="table-responsive">
             <table class="table basic table-bordered">
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr>
                         <th>#</th>
                         <th>E-Way Bill No. & Date</th>
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.scss b/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.scss
index 90921fb2d3a..e1dd0e0618c 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.scss
+++ b/apps/web-giddh/src/app/invoice/eWayBill/eWayBill/eWayBill.component.scss
@@ -5,7 +5,7 @@
     align-items: flex-start;
     flex-flow: row wrap;
 }
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
@@ -49,7 +49,7 @@
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #cdcdcd;
+    border-right: 1px solid $gainsboro;
 }
 
 .icon-pointer .glyphicon {
@@ -58,7 +58,7 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .dropdown-menu {
@@ -83,7 +83,7 @@ label {
 .width-125 {
     width: 125px;
 }
-.ewayBill-date .form-control {
+.eway-bill-date .form-control {
     background: $white !important;
     border: 1px solid $gainsboro ;
 }
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.html b/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.html
index db9b96db67c..0eab5d365e3 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.html
+++ b/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.html
@@ -1,22 +1,22 @@
 <div>
 
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">Enter E-way Bill Credentials</h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
 
-    <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
         <p class="mb-3 font-12 text-c-black">
             <!-- Lorem Ipsum Dummy text Lorem Ipsum Dummy text Lorem Ipsum Dummy text Lorem Ipsum Dummy text Lorem Ipsum Dummy text Lorem Ipsum Dummy text -->
         </p>
         <form #ewayBillform="ngForm" autocomplete="off">
             <div class="d-flex">
                 <div class="user-fill">
-                    <div class="mb-1"><label for="userName">Username</label>
+                    <div class="mr-b1"><label for="userName">Username</label>
                         <input type="text" name="userName" required autocomplete="false"
                             [(ngModel)]="ewayBillLogForm.userName" class="form-control" />
                     </div>
-                    <div class="mb-1" style="position: relative">
+                    <div class="mr-b1 position-relative">
                         <label for="password">Password</label>
                         <input id="password" [type]="togglePassword ? 'password' : 'text'" name="password"
                             autocomplete="false" required [(ngModel)]="ewayBillLogForm.password" class="form-control"
@@ -24,7 +24,7 @@ <h3 class="modal-title bg" id="modal-title">Enter E-way Bill Credentials</h3>
                         <img class="text-light-2" (click)="showPassword()" src="assets/icon/pass.svg"
                             style="position: absolute;top: 9px;right: 8px; cursor: pointer;" />
                     </div>
-                    <div class="mb-1"><label for="gstIn">GSTIN</label>
+                    <div class="mr-b1"><label for="gstIn">GSTIN</label>
                         <input type="text" class="form-control" autocomplete="false" required maxlength="15"
                             minlength="15" name="gstIn" [(ngModel)]="ewayBillLogForm.gstIn" />
                     </div>
@@ -36,7 +36,7 @@ <h3 class="modal-title bg" id="modal-title">Enter E-way Bill Credentials</h3>
             <!-- <p class="mt-3 font-12 text-c-black"><strong>Note: </strong>
             </p> -->
 
-            <div class="modal-footer d-flex" style="justify-content: center">
+            <div class="modal-footer d-flex justify-content-center">
 
                 <button class="btn btn-success" type="submit" [ladda]="isUserAdeedInProcess$ | async"
                     (click)="onSubmit(ewayBillform)" [disabled]="ewayBillform.invalid">Save & Validate</button>
diff --git a/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.scss b/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.scss
index fb3056f348e..2da11e948e3 100644
--- a/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.scss
+++ b/apps/web-giddh/src/app/invoice/eWayBill/eWayBillcredentialsModal/eWayBillCredentials.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/css/color.scss";
+
 .user-fill {
     width: 60%;
     margin: auto;
@@ -13,5 +15,14 @@
     font-size: 12px;
 }
 .text-c-black {
-    color: #333333;
+    color: $night-rider;
 }
+
+.text-light-2{
+    top: 9px;
+    right: 8px;
+}
+
+.theme-bg{
+    background-color: $davy-grey !important;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.html b/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.html
index 23e697b298d..bf6fe9f7219 100644
--- a/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.html
+++ b/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="!showEditMode">
-    <div class="invoice-genrate-container">
-        <div style="height: 44px;" *ngIf="selectedVoucher === 'debit note' || selectedVoucher === 'credit note'">
-            <div class="btn-group" dropdown triggers="mouseover" #dp="bs-dropdown" (mouseleave)="dp.hide()"
+    <div class="invoice-generate-container">
+        <div class="btn-dropdown-dr-cr" *ngIf="selectedVoucher === 'debit note' || selectedVoucher === 'credit note'">
+            <div class="btn-group d-inline-block mr-b1" dropdown triggers="mouseover" #dp="bs-dropdown" (mouseleave)="dp.hide()"
                 style="margin-bottom: 10px;display: inline-block !important;">
                 <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                     aria-controls="dropdown-basic">
@@ -21,7 +21,7 @@
             </div>
         </div>
 
-        <form #invoiceForm="ngForm" (ngSubmit)="getLedgersByFilters(invoiceForm)" novalidate class="form-inline mb-15">
+        <form #invoiceForm="ngForm" (ngSubmit)="getLedgersByFilters(invoiceForm)" novalidate class="form-inline mr-b15">
             <div class="d-flex w-100 flex-none">
                 <div class="d-flex form-group mobile-width-100 flex-none">
                     <div class="form-group date-advance-search pending-advance-search flex-fill">
@@ -65,11 +65,11 @@
 
         <table class="table basic table-bordered pending-table on-mobile-view">
 
-            <thead class="t-h-bg1">
+            <thead class="thead-background1">
                 <tr>
-                    <th style="width:4%" *ngIf="selectedLedgerItems.length > 0">
+                    <th width="4%" *ngIf="selectedLedgerItems.length > 0">
 
-                        <div class="mh18_img" style="justify-content: center;display: flex">
+                        <div class="check-image d-flex justify-content-center">
                             <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
                                 (click)="toggleAllItems(true)">
                             <img src="assets/images/checked.png" *ngIf="allItemsSelected"
@@ -78,17 +78,17 @@
                     </th>
 
                     <th *ngIf="selectedLedgerItems.length === 0" width="4%">
-                        <div class="mh18_img" style="justify-content: center;display: flex">
+                        <div class="check-image d-flex justify-content-center">
                             #
                         </div>
                     </th>
 
-                    <th style="width:12%">
+                    <th width="12%">
                         <div class="d-flex">
                             <div class="flex-fill"> Date</div>
                         </div>
                     </th>
-                    <th style="width:20%" class="td-search-box" #searchParticularContainer
+                    <th width="20%" class="td-search-box" #searchParticularContainer
                         (clickOutside)="clickedOutside($event, searchParticularContainer, 'particular')">
 
                         <div [hidden]="showParticularSearch">
@@ -104,7 +104,7 @@
                         </div>
                     </th>
 
-                    <th style="width:13%">
+                    <th width="13%">
                         <div class="d-flex">
                             <div class="flex-fill text-right"> Amount</div>
                             <!-- <div class="icon-pointer">
@@ -115,7 +115,7 @@
                         </div>
                     </th>
 
-                    <th style="width:20%" class="td-search-box" #searchAccountContainer
+                    <th width="20%" class="td-search-box" #searchAccountContainer
                         (clickOutside)="clickedOutside($event, searchAccountContainer, 'accountUniqueName')">
 
                         <div [hidden]="showAccountSearch">
@@ -132,7 +132,7 @@
 
                     </th>
 
-                    <th style="width:13%">
+                    <th width="13%">
                         <div class="d-flex">
                             <div class="flex-fill text-right"> Total</div>
                             <!-- <div class="icon-pointer">
@@ -143,7 +143,7 @@
                         </div>
                     </th>
 
-                    <th style="width:20%" class="td-search-box" #searchDescContainer
+                    <th width="20%" class="td-search-box" #searchDescContainer
                         (clickOutside)="clickedOutside($event, searchDescContainer, 'description')">
 
                         <div [hidden]="showDescSearch">
@@ -170,9 +170,9 @@
                 <tr *ngFor="let item of ledgersData?.results; let i = index;"
                     [ngClass]="{'danger': item.hasGenerationErr}" (mouseover)="hoveredItemForAction = item.uniqueName">
 
-                    <td class="mh18_img" data-title="#"
+                    <td class="check-image" data-title="#"
                         *ngIf="hoveredItemForAction === item.uniqueName || item.isSelected || selectedLedgerItems.length > 0">
-                        <div class="mh18_img justify-content-sm" style="justify-content: center;display: flex"
+                        <div class="check-image d-flex justify-content-center"
                             data-title="#">
                             <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                 (click)="toggleItem(item, true)" />
@@ -186,7 +186,7 @@
 
                     <td *ngIf="!item.isSelected && hoveredItemForAction !== item.uniqueName && selectedLedgerItems.length === 0"
                         data-title="#">
-                        <div style="justify-content: center;display: flex" class="justify-content-sm">
+                        <div class="d-flex justify-content-center">
                             {{ i + 1}}
                         </div>
                     </td>
@@ -274,8 +274,8 @@
         </table>
     </div>
 
-    <div *ngIf="ledgersData?.totalItems > 20" class="paginationWrapper">
-        <div class="alC">
+    <div *ngIf="ledgersData?.totalItems > 20" class="pagination-wrapper">
+        <div class="text-center">
             <pagination [totalItems]="ledgersData.totalItems" [(ngModel)]="ledgersData.page" [maxSize]="5"
                 class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="20" [rotate]="false"
                 (pageChanged)="pageChanged($event)"></pagination>
diff --git a/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.scss b/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.scss
index eaff2562a54..540922096ed 100644
--- a/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.scss
+++ b/apps/web-giddh/src/app/invoice/generate/invoice.generate.component.scss
@@ -18,7 +18,7 @@ table {
     border: none;
 } */
 
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
@@ -53,7 +53,7 @@ tfoot {
 
 .td-search-box div i {
     margin-top: 3px;
-    color: #8080808c;
+    color: $olive;
     padding-right: 8px;
     cursor: pointer;
 }
@@ -86,7 +86,7 @@ tfoot {
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .dropdown-menu {
@@ -132,8 +132,11 @@ tfoot {
     margin-bottom: 0;
 }
 
-.invoice-genrate-container {
+.invoice-generate-container {
     padding: 0 15px;
+    .btn-dropdown-dr-cr{
+        height: 44px;
+    }
 }
 
 .input-group {
@@ -279,6 +282,13 @@ span.close-modal.cp.pull-right {
     width: 85%;
 }
 
+.pending-advance-search{
+    flex: 1 1 auto !important;
+        div#dp-parent {
+            margin-right:8px;
+        }
+}
+
 // responsive
 @media (max-width: 1023px) {
     .pending-advance-search {
@@ -317,8 +327,8 @@ span.close-modal.cp.pull-right {
                 border: none;
                 margin-bottom: 10px;
                 &:first-child{
-                      padding-left: 15px !important;
-                          color: rgba(0, 0, 0, 0.55) !important;
+                    padding-left: 15px !important;
+                    color: rgba(0, 0, 0, 0.55) !important;
                 }
             }
         }
@@ -389,7 +399,7 @@ span.close-modal.cp.pull-right {
     .form-inline .form-group {
         margin: 0;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         margin-top: 20px;
         border: none;
         background-color: transparent;
diff --git a/apps/web-giddh/src/app/invoice/generate/model/invoice.generate.model.component.html b/apps/web-giddh/src/app/invoice/generate/model/invoice.generate.model.component.html
index 8133bc7ce41..bdcd5b1546c 100644
--- a/apps/web-giddh/src/app/invoice/generate/model/invoice.generate.model.component.html
+++ b/apps/web-giddh/src/app/invoice/generate/model/invoice.generate.model.component.html
@@ -1,5 +1,5 @@
 <section>
-    <div class="pd2">
+    <div class="pd-2">
         <h3 class="modal-title" id="modal-title">Invoice</h3>
     </div>
     <div class="modal-body">
diff --git a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.html b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.html
index 96c03d64317..16fe02c35b2 100644
--- a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.html
@@ -4,9 +4,9 @@
         <div class="d-flex date-advance-search" id="dateRangePickerParent">
             <!-- Invoice filter section -->
             <form #invoiceForm="ngForm" (ngSubmit)="getVoucherByFilters(invoiceForm)" novalidate
-                class="form-inline input-grp-dateRangePicker pr">
-                <div class="form-group mrR1 d-flex" style="flex: 1 1 auto;">
-                    <div class=" input-group custom-datepicker" (click)="showGiddhDatepicker($event)">
+            class="form-inline input-grp-date-range-picker position-relative">
+            <div class="form-group mr-r1 d-flex flex-fill">
+                    <div class="input-group custom-datepicker" (click)="showGiddhDatepicker($event)">
                         <i class="icon-calender calendar-addon"></i>
                         <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker border-radius-2"/>
                     </div>
@@ -61,7 +61,7 @@
                         </ul>
                     </div>
                 </div>
-                <button class="btn btn-default desktop-view-btn mr-15" tooltip="Export" (click)="exportCsvDownload()"
+                <button class="btn btn-default desktop-view-btn mr-r15" tooltip="Export" (click)="exportCsvDownload()"
                     [ladda]="exportInvoiceRequestInProcess$ | async"
                     *ngIf="selectedVoucher === 'sales' && selectedInvoicesList.length && isExported"
                     data-spinner-size="20px">
@@ -123,7 +123,7 @@
                     <div *ngIf="selectedItems.length === 1">
                         <div *ngIf="!isCompany" class="btn-group" dropdown triggers="mouseover" #dp="bs-dropdown" (mouseleave)="dp.hide()">
                             <button dropdownToggle type="button"
-                                class="btn mr-15 more-btn-dropdown btn-default dropdown-toggle"
+                                class="btn mr-r15 more-btn-dropdown btn-default dropdown-toggle"
                                 aria-controls="dropdown-basic">
                                 More
                                 <span class="caret"></span>
@@ -143,7 +143,7 @@
                             </ul>
                         </div>
                     </div>
-                    <button class="btn btn-default mr-15" tooltip="Export" (click)="exportCsvDownload()"
+                    <button class="btn btn-default mr-r15" tooltip="Export" (click)="exportCsvDownload()"
                         [ladda]="exportInvoiceRequestInProcess$ | async"
                         *ngIf="selectedVoucher === 'sales' && selectedInvoicesList.length && isExported"
                         data-spinner-size="20px">
@@ -171,13 +171,13 @@
 
                     </div>
                     <div *ngIf="selectedVoucher === 'credit note'" class="btn-wrapper">
-                        <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;"
+                        <button *ngIf="!isCompany" class="btn btn-sky-blue m-0"
                             (click)="goToInvoice('credit note')">+ New Cr.
                             Note
                         </button>
                     </div>
                     <div *ngIf="selectedVoucher === 'debit note'" class="btn-wrapper">
-                        <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;" (click)="goToInvoice('debit note')">+
+                        <button *ngIf="!isCompany" class="btn btn-sky-blue m-0" (click)="goToInvoice('debit note')">+
                             New Dr.
                             Note
                         </button>
@@ -226,20 +226,20 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
         <!-- For mobile screen sizes ends -->
 
         <div class="invoice-preview table-responsive">
-            <table class="table basic table-bordered mt-15 pt-15 invoice-table desktop-table giddh-table on-mobile-view">
+            <table class="table basic table-bordered mr-t15 pd-t15 invoice-table desktop-table giddh-table on-mobile-view">
                 <!--sales-->
-                <thead class="t-h-bg1" *ngIf="selectedVoucher === 'sales' || selectedVoucher === 'purchase'">
+                <thead class="thead-background1" *ngIf="selectedVoucher === 'sales' || selectedVoucher === 'purchase'">
                     <tr>
-                        <th style="width: 4%" *ngIf="selectedItems.length > 0" class="min-wid-check">
-                            <div class="mh18_img d-flex justify-content-start">
+                        <th width="4%" *ngIf="selectedItems.length > 0" class="min-wid-check">
+                            <div class="check-image d-flex justify-content-start">
                                 <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
                                     (click)="toggleAllItems(true, true)">
                                 <img src="assets/images/checked.png" *ngIf="allItemsSelected"
                                     (click)="toggleAllItems(false, true)">
                             </div>
                         </th>
-                        <th *ngIf="selectedItems.length === 0" style="width: 4%" class="min-wid-check">
-                            <div class="mh18_img d-flex justify-content-start">
+                        <th *ngIf="selectedItems.length === 0" width="4%" class="min-wid-check">
+                            <div class="check-image d-flex justify-content-start">
                                 #
                             </div>
                         </th>
@@ -264,7 +264,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         (clickOutside)="clickedOutside($event, searchPurchaseOrderContainer, 'purchaseOrderNumbers')">
                             <ng-container *ngTemplateOutlet="searchTemplate;context:{ $implicit: showPurchaseOrderSearch, fieldName: 'purchaseOrderNumbers', formControl: purchaseOrderNumbersInput, title: 'Purchase Order #'}"></ng-container>
                         </th>
-                        <th data-title="Amount" width="12%" class="mw-th-170">
+                        <th data-title="Amount" width="12%" class="min-wid-amount">
                             <div class="d-flex">
                                 <div> Amount</div>
                                 <div class="icon-pointer">
@@ -299,10 +299,10 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     </tr>
                 </thead>
                 <!--non sales-->
-                <thead class="t-h-bg1 input-h" *ngIf="selectedVoucher !== 'sales' && selectedVoucher !== 'purchase'">
+                <thead class="thead-background1 input-h" *ngIf="selectedVoucher !== 'sales' && selectedVoucher !== 'purchase'">
                     <tr>
-                        <th style="width: 4%" *ngIf="selectedItems.length > 0" class="min-wid-check">
-                            <div class="mh18_img d-flex justify-content-start">
+                        <th width="4%" *ngIf="selectedItems.length > 0" class="min-wid-check">
+                            <div class="check-image d-flex justify-content-start">
                                 <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
                                     (click)="toggleAllItems(true, true)">
                                 <img src="assets/images/checked.png" *ngIf="allItemsSelected"
@@ -311,7 +311,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         </th>
 
                         <th *ngIf="selectedItems.length === 0" style="width: 4%" class="min-wid-check">
-                            <div class="mh18_img d-flex justify-content-start">
+                            <div class="check-image d-flex justify-content-start">
                                 #
                             </div>
                         </th>
@@ -352,7 +352,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                         <th>
                             <div class="d-flex justify-content-end">
-                                <div class="flex-fill total-amt">Total amount</div>
+                                <div class="flex-fill total-amount">Total amount</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="sortTemplate;context: { column: 'grandTotal'}">
                                     </ng-container>
@@ -371,9 +371,9 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     <tr *ngFor="let item of voucherData.items; let i = index"
                         (mouseover)="hoveredItemForAction = item.uniqueName">
 
-                        <td width="4%" class="mh18_img"
+                        <td width="4%" class="check-image"
                             *ngIf="hoveredItemForAction === item.uniqueName || item.isSelected || selectedItems.length > 0">
-                            <div class="mh18_img d-flex justify-content-start">
+                            <div class="check-image d-flex justify-content-start">
                                 <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                     (click)="toggleItem(item, true)" />
                                 <img *ngIf="item.isSelected" src="assets/images/checked.png"
@@ -445,21 +445,21 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         <!-- Status -->
                         <!--for not cancelled status-->
                         <td width="10%" data-title="Status" class="cp" *ngIf="(selectedVoucher !== 'purchase') && item.balanceStatus !== 'cancel'">
-                            <div class="d-flex" style="align-items: center">
-                                <div class="flex-fill selectAction">
+                            <div class="d-flex align-items-center">
+                                <div class="flex-fill select-action">
                                     <span
                                         [ngClass]="{'text-light-2': !item.balanceStatus}">{{ item.balanceStatus ? item.balanceStatus : 'Select Action' }}</span>
                                 </div>
 
                                 <div>
-                                    <div *ngIf="!isCompany" dropdown container="body" class="icon-ellipse selectAction">
+                                    <div *ngIf="!isCompany" dropdown container="body" class="icon-ellipse select-action">
                                         <a id="edit-model-basic" dropdownToggle
                                             class="dropdown-toggle icon-dots-three-vertical pull-right"
                                             aria-controls="dropdown-basic"></a>
                                         <div id="dropdown-basic" *dropdownMenu
                                             class="dropdown-menu dropdown-menu-right width-150" role="menu"
                                             aria-labelledby="edit-model-basic">
-                                            <ul class="selectActionDropdown">
+                                            <ul class="select-action-dropdown">
                                                 <li (click)="onPerformAction(item, 'paid')">
                                                     <a class="cp" href="javascript:void(0)">Paid</a>
                                                 </li>
@@ -486,7 +486,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         <!--for cancelled status-->
                         <td width="10%" data-title="Status" *ngIf="(selectedVoucher !== 'purchase') && item.balanceStatus === 'cancel'">
                             <span>{{ item.balanceStatus}}</span>
-                            <!-- <div class="action-icon ml-15">
+                            <!-- <div class="action-icon mr-l15">
                                 <a tooltip="Convert to bill">
                                     <span class="icon-tick font-12"></span>
                                 </a>
@@ -502,7 +502,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                             </div> -->
                         </td>
 
-                        <td *ngIf="selectedVoucher === 'purchase'" class="cp d-flex status-mobile flex-column mw-th-260">
+                        <td *ngIf="selectedVoucher === 'purchase'" class="cp d-flex status-mobile flex-column min-wid-status">
                             <div class="d-flex flex-row align-items-center">
                                 <span class="d-flex balance-status">{{ item.balanceStatus}}</span>
                                 <!-- *ngIf="hoveredItemForAction === item.uniqueName || item.isSelected" -->
@@ -532,9 +532,9 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     <tr *ngFor="let item of voucherData.items; let i = index"
                         (mouseover)="hoveredItemForAction = item.uniqueName">
 
-                        <td class="mh18_img"
+                        <td class="check-image"
                             *ngIf="hoveredItemForAction === item.uniqueName || item.isSelected || selectedItems.length > 0">
-                            <div class="mh18_img d-flex justify-content-start">
+                            <div class="check-image d-flex justify-content-start">
                                 <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                     (click)="toggleItem(item, true)" />
                                 <img *ngIf="item.isSelected" src="assets/images/checked.png"
@@ -550,7 +550,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                         <!-- CR Note No. / DR Note No. -->
                         <td [attr.data-title]="selectedVoucher === 'debit note' ? 'Dr note no.' : 'Cr note no.'">
-                            <a style="cursor: pointer" (click)="onSelectInvoice(item)">
+                            <a class="cursor-pointer" (click)="onSelectInvoice(item)">
                                 {{item.voucherNumber }}</a>
                         </td>
 
@@ -601,19 +601,19 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
         </div>
 
         <ng-container *ngIf="voucherData && voucherData.items.length > 0 && !(isGetAllRequestInProcess$ | async) && (selectedVoucher === 'sales' || selectedVoucher === 'purchase') && isMobileView">
-            <div class="card mobileTable mt-15" *ngFor="let item of voucherData?.items; let i = index">
+            <div class="card mobile-table mr-t15" *ngFor="let item of voucherData?.items; let i = index">
                 <table class="table basic table-bordered invoice-table" *ngIf="selectedVoucher === 'sales' || selectedVoucher === 'purchase'">
                     <tbody>
                     <tr>
                         <td class="card-header clearfix row mr-0 ml-0">
                             <div class="col-4 p-0">
-                                <div class="mh18_img pull-left" style="justify-content: center;">
+                                <div class="check-image pull-left justify-content-center">
                                     <img src="assets/images/unchecked.png" *ngIf="!item.isSelected"
                                         (click)="toggleItem(item, true)">
                                     <img src="assets/images/checked.png" *ngIf="item.isSelected"
                                         (click)="toggleItem(item, false)">
                                 </div>
-                                <div style="justify-content: left;display: flex">#{{ i + 1}} </div>
+                                <div class="d-flex justify-content-start">#{{ i + 1}} </div>
                             </div>
                             <div class="col-8 p-0">
                                 <div class="d-flex">
@@ -626,17 +626,17 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         </td>
                     </tr>
                     <tr>
-                        <td id="inovice_td" class="row mr-0 ml-0">
+                        <td id="invoice-td" class="row mr-0 ml-0">
                             <div class="col-6 p-0">
                                 <strong> Invoice No.</strong>
                             </div>
                             <div class="col-6 p-0">
                                 <div class="invoice-name-download">
-                                    <a class="invoiceNumberA" (click)="onSelectInvoice(item)">
+                                    <a class="invoice-number-a" (click)="onSelectInvoice(item)">
                                         {{item.voucherNumber ?  item.voucherNumber : '-'}}</a>
                                     <span class="icon-download"></span>
                                 </div>
-                                <span *ngIf="item.dueDate" class="overDueDate">
+                                <span *ngIf="item.dueDate" class="over-due-date">
                                     <small class="text-danger" *ngIf="item.dueDays > 0">
                                         Overdue by {{ item.dueDays }} Days
                                     </small>
@@ -687,16 +687,16 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                                 </div>
 
                                 <div class="cp" *ngIf="item.balanceStatus !== 'cancel'">
-                                    <div class="d-flex" style="align-items: center">
-                                        <div class="flex-fill selectAction">
+                                    <div class="d-flex align-items-center">
+                                        <div class="flex-fill select-action">
                                             <span
                                                 [ngClass]="{'text-light-2': !item.balanceStatus}">{{ item.balanceStatus ? item.balanceStatus : 'Select Action' }}</span>
                                         </div>
-                                        <div class="click-dropdwon" [attachOutsideOnClick]="true"
+                                        <div class="click-dropdown" [attachOutsideOnClick]="true"
                                             (clickOutside)="showMoreBtn = false" [exclude]="'.dropdown-menu'">
                                             <i class="fa fa-ellipsis-v"
                                                 (click)="showMoreBtn=!showMoreBtn;selectedItemForMoreBtn = item.voucherNumber"></i>
-                                            <ul class="dropdown-menu displayBlock"
+                                            <ul class="dropdown-menu d-block"
                                                 *ngIf="showMoreBtn && selectedItemForMoreBtn === item.voucherNumber">
                                                 <li (click)="onPerformAction(item, 'paid')">
                                                     <a class="cp" href="javascript:void(0)">Paid</a>
@@ -717,7 +717,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                                 <div *ngIf="item.balanceStatus === 'cancel'">
                                     <span>{{ item.balanceStatus}}</span>
-                                    <!-- <div class="action-icon ml-15">
+                                    <!-- <div class="action-icon mr-l15">
                                         <a tooltip="Convert to bill">
                                             <span class="icon-tick font-12"></span>
                                         </a>
@@ -761,7 +761,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                 </table>
             </div>
         </ng-container>
-        <div *ngIf="voucherData && voucherData?.totalItems > paginationLimit" class="paginationWrapper">
+        <div *ngIf="voucherData && voucherData?.totalItems > paginationLimit" class="pagination-wrapper">
             <pagination [totalItems]="voucherData.totalItems" [(ngModel)]="voucherData.page" [maxSize]="5"
                 class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="paginationLimit" [rotate]="false"
                 previousText="&#9668;" nextText="&#9658;" (pageChanged)="pageChanged($event)"></pagination>
@@ -912,13 +912,13 @@ <h1>{{baseCurrencySymbol}}{{ totalDue | giddhCurrency }}<span *ngIf="baseCurrenc
 <!-- region sort icon template -->
 <ng-template #sortTemplate let-column="column">
     <div class="icon-sort-asc" *ngIf="sortRequestForUi.sortBy !== column" (click)="sortButtonClicked('asc', column)"
-        [ngClass]="{'activeTextColor': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'asc'}"></div>
     <div class="icon-sort-asc" *ngIf="sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'asc'"
         (click)="sortButtonClicked('desc', column)"
-        [ngClass]="{'activeTextColor': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'asc'}"></div>
     <div class="icon-sort-dsc" *ngIf="sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'desc'"
         (click)="sortButtonClicked('asc', column)"
-        [ngClass]="{'activeTextColor': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'desc'}"></div>
+        [ngClass]="{'active-text-color': sortRequestForUi.sortBy === column && sortRequestForUi.sort === 'desc'}"></div>
 </ng-template>
 <!-- endregion -->
 
@@ -927,7 +927,7 @@ <h1>{{baseCurrencySymbol}}{{ totalDue | giddhCurrency }}<span *ngIf="baseCurrenc
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <advance-receipt-adjustment-component *ngIf="showAdvanceReceiptAdjust" #advanceReceiptComponent [isUpdateMode]="isUpdateMode" [depositAmount]="depositAmount" [invoiceFormDetails]="invFormData" [advanceReceiptAdjustmentUpdatedData]="advanceReceiptAdjustmentData"
-                (closeModelEvent)="closeAdvanceReceiptModal()" (submitClicked)="getAdvanceReceiptAdjustData($event)" [isVoucherModule]="true">
+                (closeModelEvent)="closeAdvanceReceiptModal()" (submitClicked)="getAdvanceReceiptAdjustData($event)" [isVoucherModule]="true" [voucherForAdjustment]="voucherForAdjustment">
             </advance-receipt-adjustment-component>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.scss b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.scss
index 3dc0a6d7169..0d723b97597 100644
--- a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.scss
+++ b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.scss
@@ -6,20 +6,20 @@
     flex-flow: row wrap;
 }
 
-.mh18_img img {
+.check-image img {
     max-height: 17px;
     cursor: pointer;
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #c6c4c4;
+    border-right: 1px solid $gainsboro;
 }
 
 .flex-fill {
     flex: 1 1 auto;
 }
 
-.total-amt{
+.total-amount{
     flex: 0 !important;
 }
 .d-flex {
@@ -63,9 +63,9 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
 .td-search-box .input-container i {
@@ -85,7 +85,7 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue !important;
-    background: #eeeff9 !important;
+    background: $lavender !important;
 }
 
 .dropdown-menu {
@@ -100,39 +100,39 @@
     height: 50px !important;
 }
 
-.click-dropdwon ul {
+.click-dropdown ul {
     list-style: none;
     position: absolute;
     left: -114px;
-    background-color: white;
+    background-color: $white;
     width: 131px;
-    box-shadow: 0px 4px 7px #bfbfbf;
+    box-shadow: 0px 4px 7px $silver;
     border-radius: 3px;
     z-index: 100;
     border: 1px solid $gainsboro;
 }
 
-.click-dropdwon {
+.click-dropdown {
     position: relative;
 }
 
-.click-dropdwon ul li {
+.click-dropdown ul li {
     padding: 3px 6px;
     margin-bottom: 4px;
-    color: orange;
+    color: $orange;
     cursor: pointer;
 }
 
-.click-dropdwon ul li:hover {
+.click-dropdown ul li:hover {
     background-color: $gainsboro;
 }
 
-.click-dropdwon ul li:hover a {
+.click-dropdown ul li:hover a {
     color: orangered;
 }
 
-.click-dropdwon ul li a {
-    color: black;
+.click-dropdown ul li a {
+    color: $black;
 }
 
 .invoice-table tr:hover .dropdown-btn {
@@ -145,17 +145,22 @@
         word-break: break-word !important;
     }
 }
-.click-dropdwon .dropdown-btn {
+.click-dropdown .dropdown-btn {
     display: none;
 }
 
 .btn.btn-sky-blue:focus,
 .btn.btn-sky-blue:hover {
-    color: #fff;
+    color: $white;
     text-decoration: none;
     outline: none !important;
 }
 
+.input-grp-date-range-picker{
+    .form-group{
+        flex: 1 1 auto;
+    }
+}
 /* my css */
 
 .card {
@@ -183,7 +188,7 @@
 }
 
 td.card-header.clearfix {
-    background-color: #eee;
+    background-color: $whisper;
     padding: 10px !important;
 }
 
@@ -192,22 +197,22 @@ td.card-header.clearfix {
     padding-right: 10px;
 }
 
-.card #inovice_td {
-    border-bottom: 1px solid #ddd !important;
+.card #invoice-td {
+    border-bottom: 1px solid $gainsboro !important;
     padding-bottom: 20px !important;
-    background-color: #f9f9f9;
-    border-top: 1px solid #ddd !important;
+    background-color: $white-smoke;
+    border-top: 1px solid $gainsboro !important;
     padding-top: 10px !important;
 }
 
-.card .overDueDate {
+.card .over-due-date {
     position: absolute;
     font-size: 12px;
     bottom: -15px;
     right: 0;
 }
 
-.card .invoiceNumberA {
+.card .invoice-number-a {
     display: inline-block;
     padding-right: 20px;
 }
@@ -217,20 +222,20 @@ td.card-header.clearfix {
     text-align: right;
 }
 
-.card #inovice_td img {
+.card #invoice-td img {
     right: 0px !important;
     top: 5px;
     left: auto !important;
 }
 
-.card .moreBtn {
+.card .more-button {
     padding-bottom: 20px !important;
     text-align: right;
 }
 
-.card .moreBtn .moreBtnWrapper {
+.card .more-button .more-btn-wrapper {
     margin-right: 0;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
     padding-top: 8px;
 }
 
@@ -238,11 +243,11 @@ td.card-header.clearfix {
     padding: 0;
 }
 
-.mobileTable {
+.mobile-table {
     display: none;
 }
 
-.paginationWrapper {
+.pagination-wrapper {
     background-color: transparent;
     padding: 20px 0;
     margin-bottom: 0;
@@ -270,7 +275,7 @@ td.card-header.clearfix {
     margin-left: 6px;
 }
 
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 
@@ -284,24 +289,24 @@ button.btn.btn-orange.ladda-button {
     overflow: inherit;
 }
 
-ul.selectActionDropdown {
+ul.select-action-dropdown {
     list-style: none;
 }
 
-.selectActionDropdown a {
-    color: #333;
+.select-action-dropdown a {
+    color: $night-rider;
     font-size: 14px;
     padding: 5px 10px;
     display: block;
 }
 
-.selectActionDropdown a:hover {
+.select-action-dropdown a:hover {
     color: $chetwode-blue !important;
-    background: #eeeff9 !important;
+    background: $lavender !important;
 }
 
 .add-invoice .dropdown-toggle {
-    color: #fff;
+    color: $white;
 }
 
 .invoice-container {
@@ -339,7 +344,7 @@ ul.selectActionDropdown {
     justify-content: center;
     align-items: center;
     border-right: 1px solid $gainsboro;
-    color: #999999;
+    color: $nobel;
 }
 
 .advance-icon,
@@ -354,7 +359,7 @@ ul.selectActionDropdown {
     border: 1px solid $gainsboro;
     border-radius: 2px;
     color: $gray;
-    background: #fff;
+    background: $white;
     color: $gray;
 }
 
@@ -363,7 +368,7 @@ ul.selectActionDropdown {
 }
 
 .advance-icon:hover {
-    background: #eaeaea;
+    background: $whisper-color;
 }
 
 .dropdown-toggle.more-btn-dropdown {
@@ -377,21 +382,21 @@ ul.selectActionDropdown {
     align-items: center;
     margin-right: 15px;
     color: $midnight-express;
-    background-color: #fff;
+    background-color: $white;
 }
 
 .dropdown-toggle.more-btn-dropdown:hover {
     background: $chetwode-blue;
-    color: #fff !important;
+    color: $white !important;
     border-color: $chetwode-blue;
 }
 
 .dropdown-toggle.more-btn-dropdown:hover .caret {
-    color: #fff !important;
+    color: $white !important;
 }
 
 .dropdown-toggle.more-btn-dropdown .caret {
-    color: #999999;
+    color: $nobel;
 }
 
 button.btn.btn-default.ladda-button {
@@ -424,7 +429,7 @@ button.btn.btn-default.ladda-button {
 }
 
 .btn-link-2 {
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .input-wrapper {
@@ -448,14 +453,14 @@ button.btn.btn-default.ladda-button {
 
 .invoice-footer h3 {
     font-size: 16px;
-    color: #999999;
+    color: $nobel;
     display: inline-block;
     margin-right: 10px;
 }
 
 .invoice-footer h1 {
     font-size: 18px;
-    color: #333;
+    color: $night-rider;
     display: inline-block;
 }
 
@@ -583,10 +588,10 @@ span.icon-export-icon {
     .search-icon-block {
         display: flex;
     }
-    .card-header .mh18_img {
+    .card-header .check-image {
         margin-right: 5px;
     }
-    .mobileTable {
+    .mobile-table {
         display: block;
     }
     // .desktop-table {
@@ -596,7 +601,7 @@ span.icon-export-icon {
         display: block;
         text-align: center;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         margin-top: 20px;
         border: none;
         background-color: transparent;
@@ -622,24 +627,24 @@ span.icon-export-icon {
         right: 14px;
         box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.1);
         transform: rotate(45deg);
-        background-color: #fff;
+        background-color: $white;
         z-index: -1;
     }
-    .displayBlock {
+    .d-block {
         display: block !important;
     }
-    .click-dropdwon ul {
+    .click-dropdown ul {
         left: auto;
         right: 0;
     }
     .invoice-footer .font-xxlarge {
         font-size: 20px;
     }
-    .click-dropdwon ul {
+    .click-dropdown ul {
         left: auto;
         right: 0;
     }
-    .plusMoreBtn {
+    .plus-more-btn {
         font-size: 30px;
         width: 50px;
         height: 50px;
@@ -650,18 +655,18 @@ span.icon-export-icon {
         bottom: 120px;
         z-index: 99;
         line-height: 0;
-        background-color: #36a1ce;
-        color: #fff;
+        background-color: $vivid-blue;
+        color: $white;
         box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.3) !important;
         display: block;
     }
     .date-advance-search .dropdown-menu > li > a {
         padding: 8px 10px;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         top: 0px;
     }
-    .input-grp-dateRangePicker .form-group {
+    .input-grp-date-range-picker .form-group {
         margin-bottom: 2px;
     }
     .invoice-preview {
@@ -762,9 +767,9 @@ span.icon-export-icon {
 }
 
 @media (max-width: 420px) {
-    .smallLoading {
+    .small-loading {
         padding-left: 0;
-        color: #333333;
+        color: $night-rider;
         font-size: 12px;
         position: relative;
         top: 2px;
@@ -773,12 +778,12 @@ span.icon-export-icon {
 }
 
 @media (max-width: 360px) {
-    .input-grp-dateRangePicker .btn {
+    .input-grp-date-range-picker .btn {
         padding-left: 0;
         padding-top: 10px;
         padding-bottom: 0;
     }
-    .smallLoading {
+    .small-loading {
         top: 5px;
     }
 }
@@ -820,16 +825,16 @@ span.icon-export-icon {
 
 
 @media (min-width:768px){
-    .mw-th-260{
+    .min-wid-status{
         min-width:260px;
     }
-    .mw-th-170{
+    .min-wid-amount{
         min-width:170px;
     }
 
     .min-wid-check{
         min-width:40px;
-        .mh18-img{
+        .check-image{
             width:20px;
         }
     }
diff --git a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.ts b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.ts
index 832b1fffc16..36e91eaa9a2 100644
--- a/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.ts
+++ b/apps/web-giddh/src/app/invoice/preview/invoice.preview.component.ts
@@ -52,7 +52,7 @@ import { PurchaseRecordUpdateModel } from '../../purchase/purchase-record/consta
 import { InvoiceBulkUpdateService } from '../../services/invoice.bulkupdate.service';
 import { PurchaseRecordActions } from '../../actions/purchase-record/purchase-record.action';
 import { Location } from '@angular/common';
-import { VoucherAdjustments, AdjustAdvancePaymentModal } from '../../models/api-models/AdvanceReceiptsAdjust';
+import { VoucherAdjustments, AdjustAdvancePaymentModal, Adjustment } from '../../models/api-models/AdvanceReceiptsAdjust';
 import { SalesService } from '../../services/sales.service';
 import { GeneralService } from '../../services/general.service';
 import { OrganizationType } from '../../models/user-login-state';
@@ -274,17 +274,19 @@ export class InvoicePreviewComponent implements OnInit, OnChanges, OnDestroy {
     public giddhDateFormat: string = GIDDH_DATE_FORMAT;
     /** directive to get reference of element */
     @ViewChild('datepickerTemplate') public datepickerTemplate: ElementRef;
-    /* This will store selected date range to show on UI */
+    /** Stores the voucher eligible for adjustment */
+    public voucherForAdjustment: Array<Adjustment>;
+    /** This will store selected date range to show on UI */
     public selectedDateRangeUi: any;
-    /* This will store available date ranges */
+    /** This will store available date ranges */
     public datePickerOption: any = GIDDH_DATE_RANGE_PICKER_RANGES;
-    /* Selected from date */
+    /** Selected from date */
     public fromDate: string;
-    /* Selected to date */
+    /** Selected to date */
     public toDate: string;
-    /* Selected range label */
+    /** Selected range label */
     public selectedRangeLabel: any = "";
-    /* This will store the x/y position of the field to show datepicker under it */
+    /** This will store the x/y position of the field to show datepicker under it */
     public dateFieldPosition: any = { x: 0, y: 0 };
 
     constructor(
@@ -1727,6 +1729,7 @@ export class InvoicePreviewComponent implements OnInit, OnChanges, OnDestroy {
             this.salesService.getAllAdvanceReceiptVoucher(requestObject).subscribe(res => {
                 if (res && res.status === 'success') {
                     if (res.body && res.body.length) {
+                        this.voucherForAdjustment = res.body;
                         this.isAccountHaveAdvanceReceipts = true;
                         this.showAdvanceReceiptAdjust = true;
                         this.adjustPaymentModal.show();
diff --git a/apps/web-giddh/src/app/invoice/preview/models/advanceSearch/invoiceAdvanceSearch.component.html b/apps/web-giddh/src/app/invoice/preview/models/advanceSearch/invoiceAdvanceSearch.component.html
index fde29dec144..46fedfb7de4 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/advanceSearch/invoiceAdvanceSearch.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/advanceSearch/invoiceAdvanceSearch.component.html
@@ -1,16 +1,16 @@
 <div>
 
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
 
-    <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
 
         <form name="newRole" novalidate class="" autocomplete="off">
 
             <!--region invoice-->
-            <div class="modal_wrap mr-b2" *ngIf="type === 'invoice'">
+            <div class="modal-wrap mr-b2" *ngIf="type === 'invoice'">
 
                 <div class="row">
 
@@ -21,7 +21,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
                     <div class="col-md-8 col-sm-12">
                         <div class="row">
 
-                            <div class="col-md-6 col-sm-6 col-12 mb-1">
+                            <div class="col-md-6 col-sm-6 col-12 mr-b1">
                                 <sh-select placeholder="Select Action" [options]="dateOptions" [ItemHeight]="33"
                                     (selected)="dateChanged($event, 'invoice')"></sh-select>
                             </div>
@@ -160,7 +160,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
             <!--endregion-->
 
             <!--region drcr || receipt-->
-            <div class="modal_wrap mr-b2" *ngIf="type === 'drcr' || type === 'receipt'">
+            <div class="modal-wrap mr-b2" *ngIf="type === 'drcr' || type === 'receipt'">
 
                 <div class="row">
 
@@ -215,7 +215,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
             <!--endregion-->
 
             <!-- region proforma || estimates-->
-            <div class="modal_wrap mr-b2" *ngIf="type === 'proforma'">
+            <div class="modal-wrap mr-b2" *ngIf="type === 'proforma'">
 
                 <div class="row">
 
@@ -267,7 +267,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
             <!-- endregion -->
 
             <!-- Purchases region -->
-            <div class="modal_wrap mr-b2" *ngIf="type === 'purchase'">
+            <div class="modal-wrap mr-b2" *ngIf="type === 'purchase'">
                 <div class="row">
                     <div class="col-4">
                         <label>Date Range</label>
@@ -321,7 +321,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
             </div>
 
             <div class="pull-right">
-                <button type="submit" class="btn btn-md btn-success mrR1" (click)="save()">Search</button>
+                <button type="submit" class="btn btn-md btn-success mr-r1" (click)="save()">Search</button>
                 <button type="submit" class="btn btn-md btn-cancel" (click)="onCancel()">Cancel</button>
             </div>
 
diff --git a/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.html b/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.html
index 0d71c18b3cd..3234bdab385 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.html
@@ -4,10 +4,10 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
         <span class="close" aria-hidden="true" (click)="onCancel()">×</span>
     </div>
     <form #bulkUpdateForm="ngForm" autocomplete="off" (ngSubmit)="updateBulkInvoice();">
-        <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+        <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
 
             <small>Choose a field from the dropdown and update with new information.</small>
-            <div class="row mb-1 mt-2">
+            <div class="row mr-b1 mt-2">
                 <div class="col-md-6 col-sm-6">
                     <div class="form-group">
                         <sh-select placeholder="Select" [options]="fieldOptions" [isFilterEnabled]="true" [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedField" [forceClearReactive]="forceClear$ | async" [ItemHeight]="33" (selected)="onSelectEntryField($event)"></sh-select>
@@ -16,7 +16,7 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
 
                 <div class="col-md-6 col-sm-6">
                     <div class="form-group" *ngIf="selectedField === 'pdfTemplate'">
-                        <sh-select placeholder="Select" [options]="allTemplatesOptions" autocomplete="off" required [isFilterEnabled]="true" [ItemHeight]="33" name="templateUniqueName" [(ngModel)]="updateTemplatesRequest.templateUniqueName"></sh-select>
+                        <sh-select placeholder="Select" [options]="allTemplatesOptions" autocomplete="off" required [isRequired]="true" [isFilterEnabled]="true" [ItemHeight]="33" name="templateUniqueName" [(ngModel)]="updateTemplatesRequest.templateUniqueName"></sh-select>
                     </div>
 
                     <div class="form-group" *ngIf="selectedField === 'notes'">
@@ -28,12 +28,12 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
                     </div>
 
                     <div class="form-group" *ngIf="selectedField === 'signature'">
-                        <sh-select placeholder="Select option" [options]="templateSignaturesOptions" autocomplete="off" required [isFilterEnabled]="true" name="signatureOptions" [(ngModel)]="signatureOptions" [ItemHeight]="33"></sh-select>
+                        <sh-select placeholder="Select option" [options]="templateSignaturesOptions" autocomplete="off" required [isRequired]="true" [isFilterEnabled]="true" name="signatureOptions" [(ngModel)]="signatureOptions" [ItemHeight]="33"></sh-select>
                     </div>
 
                     <div class="relative form-group" *ngIf="selectedField === 'dueDate'">
                         <input name="lastInvoiceDate" required placeholder="Select Date" type="text" autocomplete="off" [bsConfig]="{dateInputFormat: giddhDateFormat}" [(ngModel)]="updateDueDatesRequest.dueDate" class="form-control" bsDatepicker required>
-                        <i class="fa fa-calendar text-light-2 inpute-date"></i>
+                        <i class="fa fa-calendar text-light-2 input-date"></i>
                     </div>
                 </div>
             </div>
@@ -45,7 +45,7 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
                             <input type="file" style="display: none;" name="bulkUploadfileInput"
                                 id="bulkUploadfileInput" [options]="fileUploadOptions" ngFileSelect
                                 [uploadInput]="uploadInput" (uploadOutput)="onUploadOutput($event)">
-                            <label class="cp fs16 text-gray font-14" for="bulkUploadfileInput">
+                            <label class="cp font-16 text-gray font-14" for="bulkUploadfileInput">
                                 Upload your logo
                             </label>
                         </label>
@@ -75,7 +75,7 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
 
                         <div class="col-md-6">
                             <div class="relative form-group">
-                                <sh-select placeholder="State" [options]="allTemplatesOptions" autocomplete="off" required [isFilterEnabled]="true" [ItemHeight]="33" name="templateUniqueName">
+                                <sh-select placeholder="State" [options]="allTemplatesOptions" autocomplete="off" required [isRequired]="true" [isFilterEnabled]="true" [ItemHeight]="33" name="templateUniqueName">
                                 </sh-select>
                             </div>
                         </div>
@@ -134,7 +134,7 @@ <h3 class="modal-title bg" id="modal-title">Bulk Update</h3>
                     <h3 class="modal-title bg" id="modal-title">Confirmation</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" (click)="onCancelBulkUpdateImageSloganModal()">×</span>
                 </div>
-                <div class="model-body clearfix pd2">
+                <div class="model-body clearfix pd-2">
                     <h3>The image / slogan will show only if the 'image / slogan' option is enabled from the invoice templates.
                     </h3>
                     <h4 class="mr-t2"><b> Do you want to proceed?</b></h4>
diff --git a/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.scss b/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.scss
index f835a84d1bd..d4f884455a1 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.scss
+++ b/apps/web-giddh/src/app/invoice/preview/models/bulkUpdateModal/invoiceBulkUpdateModal.component.scss
@@ -9,7 +9,7 @@
     justify-content: center;
     align-items: center;
 }
-.inpute-date {
+.input-date {
     position: absolute;
     top: 9px;
     right: 8px;
diff --git a/apps/web-giddh/src/app/invoice/preview/models/confirmation/confirmation.model.component.html b/apps/web-giddh/src/app/invoice/preview/models/confirmation/confirmation.model.component.html
index fa6ea4cc061..8d5950c3a53 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/confirmation/confirmation.model.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/confirmation/confirmation.model.component.html
@@ -1,16 +1,16 @@
 <div>
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">{{confirmationMessages[module]?.title}}</h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
-    <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
         <form name="newRole" novalidate class="" autocomplete="off">
-            <div class="modal_wrap mr-b2">
+            <div class="modal-wrap mr-b2">
                 <h3>{{confirmationMessages[module]?.message1}}</h3>
-                <p class="text-gray font-14 mt-05">{{confirmationMessages[module]?.message2}}</p>
+                <p class="text-gray font-14 mr-t05">{{confirmationMessages[module]?.message2}}</p>
             </div>
-            <div class="d-flex" style="justify-content: flex-start">
-                <button type="submit" class="btn btn-md btn-success mrR1" (click)="onConfirmation()">Yes</button>
+            <div class="d-flex justify-content-start">
+                <button type="submit" class="btn btn-md btn-success mr-r1" (click)="onConfirmation()">Yes</button>
                 <button type="submit" class="btn btn-md btn-cancel" (click)="onCancel()">No</button>
             </div>
         </form>
diff --git a/apps/web-giddh/src/app/invoice/preview/models/download-or-send-mail/download-or-send-mail.component.html b/apps/web-giddh/src/app/invoice/preview/models/download-or-send-mail/download-or-send-mail.component.html
index ea3db06ca41..6b12aff3032 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/download-or-send-mail/download-or-send-mail.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/download-or-send-mail/download-or-send-mail.component.html
@@ -1,11 +1,11 @@
 <div class="modal-header clearfix">
     <span *ngIf="showPdfWrap">
-        <button type="button" class="btn btn-md btn-info mrR1" *ngIf="showEditButton"
+        <button type="button" class="btn btn-md btn-info mr-r1" *ngIf="showEditButton"
             (click)="goToedit('sales')">Edit</button>
-        <button type="button" class="btn btn-md btn-default mrR1"
+        <button type="button" class="btn btn-md btn-default mr-r1"
             (click)="showMore = ! showMore; showEsign= false;">More <span class="caret"></span></button>
-        <!-- <button type="button" class="btn btn-md btn-default mrR1" (click)="showEmailTextarea = !showEmailTextarea; showMore = false;">Send Email</button> -->
-        <!-- <button type="button" class="btn btn-md btn-default mrR1" (click)="showEsign = !showEsign; showMore = false;">E-Signature</button> -->
+        <!-- <button type="button" class="btn btn-md btn-default mr-r1" (click)="showEmailTextarea = !showEmailTextarea; showMore = false;">Send Email</button> -->
+        <!-- <button type="button" class="btn btn-md btn-default mr-r1" (click)="showEsign = !showEsign; showMore = false;">E-Signature</button> -->
     </span>
     <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel('closed')"></i>
     <!-- drop down for email area -->
@@ -13,13 +13,13 @@
         <div class="form-group">
             <textarea class="form-control" #emailList placeholder="Enter email addresses"></textarea>
         </div>
-        <div class="pdL2 pdR2">
+        <div class="pd-l2 pd-r2">
             <button type="button" class="btn btn-md btn-success mr-b2" (click)="onSendInvoiceOnMail(emailList.value)">Send</button>
         </div>
     </div> -->
 
     <!-- drop down for Esignature area -->
-    <div class="dropdown-menu mrL3" [ngClass]="{open: showEsign}">
+    <div class="dropdown-menu mr-l3" [ngClass]="{open: showEsign}">
         <div class="form-group">
             <e-sign-modal-component></e-sign-modal-component>
 
@@ -27,7 +27,7 @@
     </div>
 
     <!-- drop down for invoice copies -->
-    <div class="dropdown-menu mrL3 pd0" id="setting-tab" [ngClass]="{open: showMore}">
+    <div class="dropdown-menu mr-l3 p-0" id="setting-tab" [ngClass]="{open: showMore}">
 
         <ul class="nav nav-tabs">
             <li class="nav-item" [ngClass]="{'active': emailTabActive}">
@@ -43,7 +43,7 @@
                     (click)="emailTabActive = false;downloadTabActive=false;smsTabActive=true">Send SMS</a>
             </li>
         </ul>
-        <div class="pd2 clearfix">
+        <div class="pd-2 clearfix">
 
             <div [hidden]="!emailTabActive" class="mr-b2">
                 <textarea class="form-control" #emailList placeholder="Enter email addresses"></textarea>
@@ -52,7 +52,7 @@
                 <textarea class="form-control" #smsList placeholder="Enter mobile no. with countryCode"></textarea>
             </div>
             <div class="clearfix" [hidden]="smsTabActive">
-                <h3 class="fs16 mrB">Invoice Copy</h3>
+                <h3 class="font-16 mr-b05">Invoice Copy</h3>
                 <hr />
                 <div class="checkbox">
                     <label><input type="checkbox" value="Transport"
@@ -80,9 +80,9 @@ <h3 class="fs16 mrB">Invoice Copy</h3>
     </div>
 
 </div>
-<div class="modal-body noPad clearfix" id="export-body">
+<div class="modal-body p-0 clearfix" id="export-body">
     <div *ngIf="isErrOccured$ | async">
-        <p class="lead alC">Oops! Something went wrong.</p>
+        <p class="lead text-center">Oops! Something went wrong.</p>
     </div>
     <div class="loader mr-t4" *ngIf="!showPdfWrap">
         <span></span>
diff --git a/apps/web-giddh/src/app/invoice/preview/models/download-voucher/download-voucher.component.html b/apps/web-giddh/src/app/invoice/preview/models/download-voucher/download-voucher.component.html
index 7f4beec1067..aea94308322 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/download-voucher/download-voucher.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/download-voucher/download-voucher.component.html
@@ -1,4 +1,4 @@
-<div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+<div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix dark-grey-bg">
     <h3 class="modal-title bg" id="modal-title">Download Voucher</h3>
     <i aria-hidden="true" class="icon-cross text-right close-modal" (click)="cancel()"></i>
 </div>
@@ -9,17 +9,17 @@ <h3 class="modal-title bg" id="modal-title">Download Voucher</h3>
     <ng-template>
         <div class="clearfix font-14">
             <div class="mb-5">
-                <p class="mb-1">Copies of tax invoices</p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Original Copy:</strong>  This is the first copy of the invoice for the buyer.</label></p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Duplicate Copy:</strong>   This is to be carried with the transporter.</label></p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Triplicate Copy:</strong>  This one is for the suppliers’ own record.</label></p>
+                <p class="mr-b1">Copies of tax invoices</p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Original Copy:</strong>  This is the first copy of the invoice for the buyer.</label></p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Duplicate Copy:</strong>   This is to be carried with the transporter.</label></p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Triplicate Copy:</strong>  This one is for the suppliers’ own record.</label></p>
             </div>
 
-            <div class="mb-05">
-                <p class="mb-1">Export in multi currency (optional) <a class="text-gray d-inline-block middle" tooltip="test" href="javascript:void(0)"><i class="icon-info"></i></a></p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Account Currency: </strong>  USD</label></p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Company Currency: </strong> INR</label></p>
-                <p class="mb-1"><label class="pointer"><input type="checkbox" checked> <strong>Both Currency:</strong> USD with conversion in INR</label></p>
+            <div class="mr-b05">
+                <p class="mr-b1">Export in multi currency (optional) <a class="text-gray d-inline-block middle" tooltip="test" href="javascript:void(0)"><i class="icon-info"></i></a></p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Account Currency: </strong>  USD</label></p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Company Currency: </strong> INR</label></p>
+                <p class="mr-b1"><label class="pointer"><input type="checkbox" checked> <strong>Both Currency:</strong> USD with conversion in INR</label></p>
             </div>
         </div>
 
@@ -34,7 +34,7 @@ <h3 class="modal-title bg" id="modal-title">Download Voucher</h3>
 
 
     <div class="clearfix">
-        <h3 class="fs16 mrB">Invoice Copy</h3>
+        <h3 class="font-16 mr-b05">Invoice Copy</h3>
         <hr>
 
         <div class="checkbox">
diff --git a/apps/web-giddh/src/app/invoice/preview/models/generateEWayBill/generateEWayBill.component.html b/apps/web-giddh/src/app/invoice/preview/models/generateEWayBill/generateEWayBill.component.html
index 8f05a017bed..db7c64c32ed 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/generateEWayBill/generateEWayBill.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/generateEWayBill/generateEWayBill.component.html
@@ -1,11 +1,11 @@
 <div>
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix dark-grey-bg">
         <h3 class="modal-title bg" id="modal-title">Generate E-way Bill</h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
 
-    <div class="modal-body p0 clearfix" id="export-body">
-        <div class="row mr0">
+    <div class="modal-body p-0 clearfix" id="export-body">
+        <div class="row m-0">
 
             <div class="col-md-6 p0 e-way-card" (click)="createEWayBill()">
                 <div>
@@ -79,7 +79,7 @@ <h3 class="modal-title bg" id="modal-title">Generate E-way Bill</h3>
                 </div>
             </div>
 
-            <div class="col-md-6 p0 e-way-card">
+            <div class="col-md-6 p-0 e-way-card">
                 <div>
                     <!-- (click)="openModal(template)" -->
                     <svg class="icon-link" xmlns="http://www.w3.org/2000/svg" width="73.813" height="21.527"
@@ -133,10 +133,10 @@ <h3 class="modal-title pull-left">Add E-Way Bill Details</h3>
     <div class="modal-body pd-2">
         <form action="">
             <div class="row">
-                <div class="col-xs-5">
-                    <label class="pt-05 font-14">E-Way Bill Number <span class="text-danger">*</span></label>
+                <div class="col-5">
+                    <label class="pd-t05 font-14">E-Way Bill Number <span class="text-danger">*</span></label>
                 </div>
-                <div class="col-xs-7">
+                <div class="col-7">
                     <input type="number" class="form-control" placeholder="Enter E-way Bill Number">
                 </div>
             </div>
diff --git a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.html b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.html
index d1655267256..fa4f864deea 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.html
@@ -38,7 +38,7 @@
 
                     <ul class="invoice-sidebar">
                         <perfect-scrollbar>
-                            <li class="singleInvoiceDetail cp" *ngFor="let item of filteredData"
+                            <li class="single-invoice-detail cp" *ngFor="let item of filteredData"
                                 [ngClass]="{'activeItem': item.uniqueName === selectedItem.uniqueName}"
                                 (click)="selectVoucher(item)">
 
@@ -47,7 +47,7 @@
                                     <div class="col-7 col-sm-7">
 
                                         <div class="invoice-number-date">
-                                            <span class="inoviceNumber">
+                                            <span class="invoice-number">
                                                 {{item.voucherNumber ? item.voucherNumber : '-'}}
                                             </span>
                                             <span class="invoice-date">
@@ -55,14 +55,14 @@
                                             </span>
                                         </div>
 
-                                        <div class="invoiceHolderName">
+                                        <div class="invoice-holder-name">
                                             <p> {{item?.account?.customerName || item?.account?.name}}</p>
                                         </div>
 
                                     </div>
 
                                     <div class="col-5 col-sm-5">
-                                        <div class="inovice-amount pull-right">
+                                        <div class="invoice-amount pull-right">
                                             {{item?.grandTotal | giddhCurrency}}
                                         </div>
                                     </div>
@@ -88,7 +88,7 @@
                                     <div class="invoice-num-holder">
                                         <h3 class="invoice-num">
                                             {{selectedItem?.voucherNumber ? selectedItem?.voucherNumber : '-'}}</h3>
-                                        <p class="acc-holderName">{{selectedItem?.account.name}}</p>
+                                        <p class="account-holder-name">{{selectedItem?.account.name}}</p>
                                     </div>
                                 </div>
 
@@ -99,7 +99,7 @@ <h3 class="invoice-num">
                                             <img src="assets/images/multiply.svg"></span>
 
                                         <!-- region for proforma and estimates -->
-                                        <div [class.disabled-change-status]="isCompany" class="btn-group changeStatus-dropdown pull-right" dropdown
+                                        <div [class.disabled-change-status]="isCompany" class="btn-group change-status-dropdown pull-right" dropdown
                                              *ngIf="!isCompany && only4ProformaEstimates">
 
                                             <button id="button-basic" dropdownToggle type="button"
@@ -139,7 +139,7 @@ <h3 class="invoice-num">
                                         <!-- endregion -->
 
                                         <!-- region for invoice -->
-                                        <div [class.disabled-change-status]="isCompany" class="btn-group changeStatus-dropdown pull-right" dropdown
+                                        <div [class.disabled-change-status]="isCompany" class="btn-group change-status-dropdown pull-right" dropdown
                                              *ngIf="!isCompany && !only4ProformaEstimates && selectedItem?.voucherType !== 'purchase'">
                                             <label *ngIf="selectedItem.voucherStatus === 'cancel'" class="labeled">
                                                 {{ selectedItem.voucherStatus }}
@@ -178,7 +178,7 @@ <h3 class="invoice-num">
                                         <!-- endregion -->
 
                                         <!-- region for purchase -->
-                                        <div [class.disabled-change-status]="isCompany" class="btn-group changeStatus-dropdown pull-right" dropdown
+                                        <div [class.disabled-change-status]="isCompany" class="btn-group change-status-dropdown pull-right" dropdown
                                              *ngIf="!isCompany && selectedItem?.voucherType === 'purchase'">
 
                                             <button id="button-basic2" dropdownToggle type="button" class="btn btn-pink dropdown-toggle" aria-controls="dropdown-basic2">Change Status <span class="caret"></span></button>
@@ -194,7 +194,7 @@ <h3 class="invoice-num">
                                         </div>
                                         <!-- endregion -->
                                         <div class="wrap-edit-history-btn">
-                                            <div class="edit-action-btn-grps pull-right">
+                                            <div class="edit-action-btn-groups pull-right">
                                                 <span *ngIf="!isCompany">
                                                     <a href="javascript:void 0" tooltip="Edit" placement="top"
                                                         (click)="isCompany ? '' : toggleEditMode()"><i class="icon-edit-pencil"></i></a>
@@ -262,7 +262,7 @@ <h3 class="invoice-num">
 
                                 <div class="col-md-4 col-12" *ngIf="!isCompany && (selectedItem?.voucherType !== 'credit note' && selectedItem?.voucherType !== 'debit note') &&
                                     (selectedItem.voucherStatus !== 'paid' && selectedItem.voucherStatus !== 'cancel')">
-                                    <div class="single-paymentDetail clearfix pr-4">
+                                    <div class="single-payment-detail clearfix pr-4">
                                         <div class="payment-icon"><img src="assets/images/dollar-icon.svg"></div>
                                         <p class="payment-content"> Receive payments in cash/check and record payments
                                             manually. </p>
@@ -274,7 +274,7 @@ <h3 class="invoice-num">
 
 
                                 <div class="col-md-4 col-12">
-                                    <div class="single-paymentDetail clearfix">
+                                    <div class="single-payment-detail clearfix">
                                         <div class="payment-icon"><img src="assets/images/send-icon.svg"></div>
                                         <p class="payment-content">You can now email this invoice to your customer or
                                             mark it as sent. </p>
@@ -291,10 +291,10 @@ <h3 class="invoice-num">
                         <div class="payment-log col-md-12" *ngIf="only4ProformaEstimates">
                             <div class="payment-log-div">
 
-                                <div style="padding: 10px 0 10px 10px;" *ngIf="moreLogsDisplayed">
+                                <div class="less-more-details" *ngIf="moreLogsDisplayed">
                                     <a href="javascript:void 0" (click)="filterVoucherVersions(false)">Less Details</a>
                                 </div>
-                                <div style="padding: 10px 0 10px 10px;"
+                                <div class="less-more-details"
                                      *ngIf="filteredVoucherVersions.length && !moreLogsDisplayed">
                                     <a href="javascript:void 0" (click)="filterVoucherVersions(true)">More Details</a>
                                 </div>
@@ -302,7 +302,7 @@ <h3 class="invoice-num">
                                 <ul>
                                     <li *ngFor="let log of filteredVoucherVersions">
                                         <span class="small-circle"></span>
-                                        <span class="aboutPaymentLog">{{ log.estimateDate }},
+                                        <span class="about-payment-log">{{ log.estimateDate }},
                                             <span *ngIf="voucherType==='estimates'">estimate</span>
                                         <span *ngIf="voucherType!=='estimates'">{{voucherType}}</span> {{ log.action }}
                                             for {{ log.grandTotal }} by {{ log.user.name }}</span>
@@ -312,8 +312,8 @@ <h3 class="invoice-num">
 
                             </div>
                         </div>
-                        <div class="linked-purchase-order font-14 mt-15" *ngIf="selectedItem?.voucherType === 'purchase' && purchaseOrderNumbers && purchaseOrderNumbers.length > 0">
-                            <p class="mt-1 mb-1"><span class="icon-file-path"></span> Linked Purchase Order(s):</p>
+                        <div class="linked-purchase-order font-14 mr-t15" *ngIf="selectedItem?.voucherType === 'purchase' && purchaseOrderNumbers && purchaseOrderNumbers.length > 0">
+                            <p class="mt-1 mr-b1"><span class="icon-file-path"></span> Linked Purchase Order(s):</p>
                             <div class="purchase-order-number">
                                 <a href="javascript:;" class="aqua-color" (click)="openPurchaseOrderPreviewPopup(purchaseOrderPreviewModal, order.uniqueName)" *ngFor="let order of purchaseOrderNumbers; let i = index;">{{order.number}}<span *ngIf="checkIfPipeSymbolRequired(i)">|</span></a>
                             </div>
@@ -322,7 +322,7 @@ <h3 class="invoice-num">
 
                     <div class="invoice-image-section">
                         <div class="relative">
-                            <div class="pos-rel" *ngIf="isVoucherDownloading || isFileUploading">
+                            <div class="position-relative" *ngIf="isVoucherDownloading || isFileUploading">
                                 <div class="loader"></div>
                             </div>
 
@@ -342,20 +342,20 @@ <h3 class="invoice-num">
                                     class="image-preview img-expand" [src]="imagePreviewSource"/>
                             </div>
                             <div *ngIf="shouldShowUploadAttachment && !isCompany"
-                                class="upload-excel max500 center-block box dashed-bdr">
+                                class="upload-excel max-width-500 center-block box dashed-border">
                                 <input type="file" id="csv-upload-input" placeholder="Upload an EXCEL or CSV file"
                                     droppable="true" class="form-control" [options]="fileUploadOptions" ngFileSelect
                                     [uploadInput]="uploadInput" (uploadOutput)="onUploadOutput($event)"/>
-                                <div class="clearfix pos-rel width100">
+                                <div class="clearfix position-relative width-100">
                                     <div class="file-input-wrapper text-center">
-                                        <div class="clearfix mrB2">
+                                        <div class="clearfix mr-b2">
                                             <img src="assets/images/new/import_icon.svg"/>
                                         </div>
-                                        <div class="clearfix pdR2 pdL2">
-                                            <label class="clearfix text-light-2" style="font-size: 14px">Drop file to
+                                        <div class="clearfix pd-r2 pd-l2">
+                                            <label class="clearfix text-light-2 font-14">Drop file to
                                                 upload</label>
-                                            <div class="mrT3">
-                                                <label class="file-uplod-penal" for="csv-upload-input"> <span>Browse
+                                            <div class="mr-t3">
+                                                <label class="file-upload-panel" for="csv-upload-input"> <span>Browse
                                                         file</span></label>
                                             </div>
                                         </div>
@@ -390,7 +390,7 @@ <h3 class="invoice-num">
 
         <div class="invoice-edit-wrapper">
 
-            <div class="invoice-editHeader">
+            <div class="invoice-edit-header">
 
                 <span>
                     <p>Edit {{ selectedItem?.voucherType | voucherTypeToNamePipe | titlecase }}</p>
@@ -402,7 +402,7 @@ <h3 class="invoice-num">
 
             </div>
 
-            <div class="invoice-editBody">
+            <div class="invoice-edit-body">
                 <proforma-invoice-component [accountUniqueName]="selectedItem.account.uniqueName"
                                             [selectedItem]="selectedItem"
                                             [invoiceNo]="(voucherType !== 'purchase') ? selectedItem?.voucherNumber : selectedItem?.uniqueName"
@@ -447,12 +447,12 @@ <h3 class="invoice-num">
 <div bsModal #showEmailSendModal="bs-modal" class="modal fade" role="dialog"
      [config]="{keyboard:true, ignoreBackdropClick: true}" tabindex="-1">
 
-    <div class="modal-dialog semdMailModal">
+    <div class="modal-dialog send-mail-modal">
 
         <div class="modal-content">
 
             <!--  region new email design -->
-            <!--      <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">-->
+            <!--      <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix" style="background-color: #525252">-->
             <!--        <h3 class="modal-title bg" id="modal-title">Send Mail </h3>-->
             <!--        <i aria-hidden="true" class="icon-cross text-right close-modal" (click)="showEmailSendModal.toggle()"></i>-->
             <!--      </div>-->
@@ -526,7 +526,7 @@ <h3 class="invoice-num">
 <div bsModal #downloadVoucherModal="bs-modal" class="modal fade" role="dialog"
      [config]="{keyboard:true, ignoreBackdropClick: true}" tabindex="-1">
 
-    <div class="modal-dialog semdMailModal">
+    <div class="modal-dialog send-mail-modal">
 
         <div class="modal-content">
 
diff --git a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.scss b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.scss
index f146a532f50..30de6abe713 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.scss
+++ b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.scss
@@ -53,41 +53,41 @@
     font-size: 12px;
 }
 
-.invoice-sidebar .invoice-number-date span.inoviceNumber {
-    color: #0c8fe6;
+.invoice-sidebar .invoice-number-date span.invoice-number {
+    color: $primary;
 }
 
 .invoice-sidebar .invoice-number-date span.invoice-date {
-    color: #666666;
+    color: $dark-gray;
 }
 
-.invoice-sidebar .invoiceHolderName p {
-    color: #333333;
+.invoice-sidebar .invoice-holder-name p {
+    color: $night-rider;
     font-size: 14px;
     margin-top: 3px;
     white-space: normal;
     word-break: break-all;
 }
 
-.invoice-sidebar .singleInvoiceDetail {
+.invoice-sidebar .single-invoice-detail {
     padding: 10px 15px;
-    border-bottom: 1px solid #dedede;
+    border-bottom: 1px solid $gainsboro;
     list-style: none;
 }
 
-.invoice-sidebar .singleInvoiceDetail:hover {
-    background-color: #f0f0f0;
+.invoice-sidebar .single-invoice-detail:hover {
+    background-color: $gray-95;
 }
 
-.invoice-sidebar .singleInvoiceDetail.activeItem {
-    background-color: #f0f0f0;
+.invoice-sidebar .single-invoice-detail.activeItem {
+    background-color: $gray-95;
 }
 
-.invoice-sidebar .singleInvoiceDetail:last-child {
+.invoice-sidebar .single-invoice-detail:last-child {
     border-bottom: none;
 }
 
-.invoice-sidebar .inovice-amount {
+.invoice-sidebar .invoice-amount {
     font-size: 12px;
     line-height: 3.4;
 }
@@ -110,7 +110,7 @@
     font-weight: 600;
 }
 
-.invoice-detail-header p.acc-holderName {
+.invoice-detail-header p.account-holder-name {
     font-size: 14px;
     margin-top: 3px;
 }
@@ -124,7 +124,7 @@
 }
 
 .invoice-detail-header .edit-change-status .edit-link {
-    color: #0c8fe6;
+    color: $primary;
     padding-right: 10px;
     font-size: 16px;
 }
@@ -133,13 +133,13 @@
     width: 15px;
 }
 
-.invoice-detail-header .edit-change-status .edit-action-btn-grps {
+.invoice-detail-header .edit-change-status .edit-action-btn-groups {
     display: flex;
     background-color: $white;
-    border: 1px solid #cbcbcb;
+    border: 1px solid $gainsboro;
     margin-right: 10px;
     span {
-        border-left: 1px solid #cbcbcb;
+        border-left: 1px solid $gainsboro;
         padding: 5px;
         height: 30px;
         width: 30px;
@@ -147,7 +147,7 @@
             border-left: none;
         }
         a {
-            color: #666666;
+            color: $dark-gray;
             display: block;
             text-align: center;
         }
@@ -174,7 +174,7 @@
 .payment-detail .payment-icon {
     width: 35px;
     height: 35px;
-    background-color: #cccccc;
+    background-color: $very-light-gray;
     border-radius: 50%;
     text-align: center;
     vertical-align: middle;
@@ -184,14 +184,14 @@
     margin-bottom: 5px;
 }
 
-.single-paymentDetail a {
-    color: #0c8fe6;
+.single-payment-detail a {
+    color: $primary;
 }
 
 .payment-detail p.payment-content {
     font-size: 14px;
     margin-bottom: 5px;
-    color: #333333;
+    color: $night-rider;
 }
 
 .payment-log {
@@ -225,7 +225,7 @@
         font-size: 36px;
         max-width: 60%;
         margin: 0 auto;
-        color: #ff0d0d;
+        color: $red;
     }
     .img-expand-collapse{
         padding: 50px 50px 0 50px;
@@ -254,8 +254,8 @@
     z-index: 40;
 }
 
-.single-paymentDetail {
-    color: #0c8fe6;
+.single-payment-detail {
+    color: $primary;
 }
 
 .payment-log-div li {
@@ -271,23 +271,23 @@
 .payment-log-div span.small-circle {
     height: 10px;
     width: 10px;
-    border: 1px solid #666666;
+    border: 1px solid $dark-gray;
     border-radius: 50%;
     display: inline-block;
     margin-right: 7px;
 }
 
 .payment-log-div .activeLog span.small-circle {
-    background-color: #0c8fe6;
-    border-color: #0c8fe6;
+    background-color: $primary;
+    border-color: $primary;
 }
 
-.payment-log-div .aboutPaymentLog {
-    color: #666;
+.payment-log-div .about-payment-log {
+    color: $dark-gray;
 }
 
-.payment-log-div .activeLog .aboutPaymentLog {
-    color: #0c8fe6;
+.payment-log-div .activeLog .about-payment-log {
+    color: $primary;
 }
 
 .payment-log-div ul {
@@ -299,13 +299,17 @@
     content: "";
     height: calc(100% - 30px);
     width: 1px;
-    border-left: 1px dashed #666666;
+    border-left: 1px dashed $gainsboro;
     top: 16px;
     left: 4.5px;
 }
 
+.less-more-details{
+    padding: 10px 0 10px 10px;
+}
+
 .invoice-detail {
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     padding-bottom: 20px;
 }
 
@@ -315,13 +319,13 @@ span.close-modal.cp.pull-right {
     align-items: center;
     height: 32px;
     width: 32px;
-    background-color: #ddd;
+    background-color: $gainsboro-light;
     border: 1px solid $gainsboro;
     position: static;
     transform: inherit;
 }
 
-.changeStatus-dropdown .dropdown-menu {
+.change-status-dropdown .dropdown-menu {
     width: 160px;
 }
 
@@ -329,7 +333,7 @@ span.close-modal.cp.pull-right {
     padding: 6px 16px;
 }
 
-.changeStatus-dropdown .dropdown-menu.show {
+.change-status-dropdown .dropdown-menu.show {
     display: inline-block !important;
     left: auto !important;
     right: 8px !important;
@@ -338,18 +342,18 @@ span.close-modal.cp.pull-right {
     opacity: 0.65;
 }
 
-.btn-group.changeStatus-dropdown.open.show {
+.btn-group.change-status-dropdown.open.show {
     display: inline-block !important;
 }
 
 .dropdown-menu>li>a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .invoice-search-box input {
     flex: 1;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
     height: 37px;
     padding: 0 30px;
     background-image: url("../../../../../assets/images/searchIcon.svg");
@@ -384,13 +388,13 @@ span.close-modal.cp.pull-right {
 .invoice-edit-wrapper {
     height: 100vh;
     overflow-y: auto;
-    .invoice-editHeader {
+    .invoice-edit-header {
         display: flex;
         justify-content: space-between;
         height: 54px;
         background-color: $white;
-        border-top: 1px solid #c6c6c6;
-        border-bottom: 1px solid #c6c6c6;
+        border-top: 1px solid $gainsboro;
+        border-bottom: 1px solid $gainsboro;
         align-items: center;
         span {
             padding: 10px;
@@ -402,7 +406,7 @@ span.close-modal.cp.pull-right {
         span.close-modal {
             height: 32px;
             width: 32px;
-            background-color: #ddd;
+            background-color: $gainsboro-light;
             border: 1px solid $gainsboro;
             display: flex;
             justify-content: center;
@@ -412,12 +416,12 @@ span.close-modal.cp.pull-right {
             transform: inherit;
         }
     }
-    .invoice-editBody {
+    .invoice-edit-body {
         padding-bottom: 140px;
     }
 }
 
-.changeStatus-dropdown #setting-tab {
+.change-status-dropdown #setting-tab {
     width: 340px;
     left: auto;
     right: 0;
@@ -442,17 +446,17 @@ span.close-modal.cp.pull-right {
     top: 0px;
     width: 200px;
     height: 4px;
-    background-color: #5b64c9;
+    background-color: $chetwode-blue;
     animation: loading 2s linear infinite;
 }
 
 label.labeled {
-    border: 1px solid #ddd;
-    color: #333;
+    border: 1px solid $gainsboro;
+    color: $night-rider;
     padding: 5px 10px;
     border-radius: 3px;
     margin: 0 10px 0 0;
-    background-color: #d6d6d6;
+    background-color: $light-gray;
     position: relative;
     top: -1px;
 }
@@ -502,35 +506,35 @@ label.labeled {
     }
 }
 
-.sendEmailModal {
+.send-email-modal {
     min-width: 240px;
     position: absolute;
     top: 40px;
     z-index: 10;
     right: 0;
-    border: 1px solid #c7c7c7;
-    .sendEmailModalWrapper {
+    border: 1px solid $gainsboro;
+    .send-email-modal-wrapper {
         background-color: $white;
         box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
         height: 200px;
-        .sendEmailModalHeader {
-            background-color: #e2e2e2;
+        .send-email-modal-header {
+            background-color: $whisper;
             padding: 8px 10px;
-            border-bottom: 1px solid #cccccc;
+            border-bottom: 1px solid $gainsboro;
             span {
                 width: unset;
             }
         }
     }
-    .sendEmailModalBody {
+    .send-email-modal-body {
         padding: 5px;
     }
-    .sendEmailModalBody label {
+    .send-email-modal-body label {
         font-size: 12px;
         margin-bottom: 7px;
     }
     .btn-success {
-        background: #28ab00;
+        background: $success-green;
         color: $white;
     }
     .aqua-color {
@@ -574,11 +578,11 @@ label.labeled {
     margin: 25px auto !important;
 }
 
-.max500 {
+.max-width-500 {
     max-width: 500px;
 }
 
-.dashed-bdr {
+.dashed-border {
     border: 2px dashed $gainsboro;
 }
 
@@ -594,16 +598,16 @@ label.labeled {
 }
 
 .select-file {
-    color: #089328;
+    color: $success-green;
 }
 
-.file-uplod-penal {
+.file-upload-panel {
     width: 100%;
     text-align: left;
     border: 1px solid $gainsboro;
     padding: 8px;
     border-radius: 4px;
-    color: #cccccc;
+    color: $very-light-gray;
 }
 
 .file-input-wrapper img {
@@ -979,7 +983,7 @@ p {
 
 #default .subfooter hr {
     width: 100%;
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
     margin: 3px 0;
 }
 
@@ -1135,7 +1139,7 @@ strong {
     .dropdown-toggle.btn-sky-blue {
         padding: 6px 8px;
     }
-    .invoice-sidebar .singleInvoiceDetail {
+    .invoice-sidebar .single-invoice-detail {
         padding: 4px 15px;
     }
 }
@@ -1165,7 +1169,7 @@ strong {
         li.activeItem
         .invoice-number-date
         span.invoice-date:before {
-        background-color: #f0f0f0;
+        background-color: $gray-95;
     }
     .invoice-preview-sidebar {
         padding-right: 15px;
@@ -1199,7 +1203,7 @@ strong {
         max-height: 46vmax;
         overflow-y: auto;
     }
-    .invoice-detail-header .edit-change-status .edit-action-btn-grps {
+    .invoice-detail-header .edit-change-status .edit-action-btn-groups {
         float: left !important;
     }
     .invoice-detail-header .edit-change-status {
@@ -1212,7 +1216,7 @@ strong {
     .invoice-modal-content {
         height: 100vh !important;
     }
-    .single-paymentDetail {
+    .single-payment-detail {
         margin-bottom: 10px;
     }
     .payment-detail .payment-icon {
@@ -1233,7 +1237,7 @@ strong {
         width: 100%;
         padding-top: 10px;
     }
-    .changeStatus-dropdown {
+    .change-status-dropdown{
         float: left;
     }
     span.close-modal.cp.pull-right {
diff --git a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.ts b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.ts
index 5972d27054d..6fea3a6f636 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.ts
+++ b/apps/web-giddh/src/app/invoice/preview/models/invoice-preview-details/invoice-preview-details.component.ts
@@ -178,10 +178,10 @@ export class InvoicePreviewDetailsComponent implements OnInit, OnChanges, AfterV
      * @memberof InvoicePreviewDetailsComponent
      */
     public get shouldShowPrintDocument(): boolean {
-        return (this.selectedItem) && this.selectedItem.voucherType !== VoucherTypeEnum.purchase ||
+        return this.selectedItem && (this.selectedItem.voucherType !== VoucherTypeEnum.purchase ||
             (this.selectedItem.voucherType === VoucherTypeEnum.purchase && this.pdfPreviewLoaded) ||
             (this.selectedItem.voucherType === VoucherTypeEnum.purchase && this.attachedDocumentType &&
-                (this.attachedDocumentType.type === 'pdf' || this.attachedDocumentType.type === 'image'));
+                (this.attachedDocumentType.type === 'pdf' || this.attachedDocumentType.type === 'image')));
     }
 
     ngOnInit() {
diff --git a/apps/web-giddh/src/app/invoice/preview/models/invoicePayment/invoice.payment.model.component.html b/apps/web-giddh/src/app/invoice/preview/models/invoicePayment/invoice.payment.model.component.html
index 6f8998baf06..47a57ca78d3 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/invoicePayment/invoice.payment.model.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/invoicePayment/invoice.payment.model.component.html
@@ -13,7 +13,7 @@ <h3>Perform Payment action</h3>
                 <div class="col-6 form-group payment-date">
                     <label>Payment Date <sup>*</sup></label>
 
-                    <input type="text" name="invoiceDateRange" bsDatepicker class="form-control" style="width: 100%"
+                    <input type="text" name="invoiceDateRange" bsDatepicker class="form-control width-100"
                         [(ngModel)]="paymentActionFormObj.paymentDate" [bsConfig]="{dateInputFormat: giddhDateFormat}" />
                 </div>
 
@@ -35,10 +35,10 @@ <h3>Perform Payment action</h3>
                     <sh-select name="accountUniqueName" [options]="paymentModes$ | async"
                         [(ngModel)]="paymentActionFormObj.accountUniqueName" (selected)="onSelectPaymentMode($event)"
                         [placeholder]="'Select Account'" [notFoundLink]="false" [multiple]="false" [ItemHeight]="33"
-                        [useInBuiltFilterForIOptionTypeItems]="true" class="text-left" required>
+                        [useInBuiltFilterForIOptionTypeItems]="true" class="text-left" required [isRequired]="true">
 
                         <ng-template #optionTemplate1 let-option="option">
-                            <a href="javascript:void(0)" class="list-item" style="border-bottom: 1px solid #ccc;">
+                            <a href="javascript:void(0)" class="list-item bb-1">
                                 <div class="item">{{ option.label }}</div>
                                 <div class="item-unique">{{ option.value }}</div>
                             </a>
@@ -78,12 +78,12 @@ <h3>Perform Payment action</h3>
 
             <!-- switch currency on click-->
             <div class="clearfix" *ngIf="isMulticurrencyAccount">
-                <div class="switch-currency mb-1" *ngIf="!showSwitchedCurr">
+                <div class="switch-currency mr-b1" *ngIf="!showSwitchedCurr">
                     <span class="text-light d-inline-block pr-1">Base Currency</span>
 
                     <span class="left-currency middle">1 {{accountCurrency}}</span>
 
-                    <img class="switchIcon middle mr-1 ml-1" src="assets/images/switch-icon.svg" alt="switch-icon"
+                    <img class="switch-icon middle mr-1 ml-1" src="assets/images/switch-icon.svg" alt="switch-icon"
                         (click)="switchCurrencyImg(true)">
                     <span class="edit-icon cp">
                         <img src="assets/images/edit-pencilicon.svg" class="edit-pencil mr-1"
@@ -104,10 +104,10 @@ <h3>Perform Payment action</h3>
                 </div>
 
 
-                <div class="switch-currency mb-1" *ngIf="showSwitchedCurr">
+                <div class="switch-currency mr-b1" *ngIf="showSwitchedCurr">
                     <span class="text-light d-inline-block pr-1">Base Currency</span>
                     <span class="left-currency middle">1 {{companyCurrencyName}}</span>
-                    <img class="switchIcon middle mr-1 ml-1" src="assets/images/switch-icon.svg" alt="switch-icon"
+                    <img class="switch-icon middle mr-1 ml-1" src="assets/images/switch-icon.svg" alt="switch-icon"
                         (click)="switchCurrencyImg(false)">
                     <span class="edit-icon cp">
                         <img src="assets/images/edit-pencilicon.svg" class="edit-pencil mr-1"
diff --git a/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.html b/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.html
index 0eff984d087..4aa159d307d 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.html
+++ b/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.html
@@ -11,7 +11,7 @@ <h4 class="modal-title pull-left">Purchase Bill</h4>
         <!--class="disabled-area"-->
         <div class="pl-3 pr-3">
             <div id="Template-header">
-                <header class="mb-1">
+                <header class="mr-b1">
                     <table cellspacing="0" cellpadding="0">
                         <tbody>
                             <tr>
@@ -67,7 +67,7 @@ <h3 class="text-right title-template">
                     <tbody>
                         <tr>
                             <td class="text-left">
-                                <p class="mb-05">
+                                <p class="mr-b05">
                                     From
                                 </p>
                                 <p class="strong"><strong>Walkover Web Solutions Pvt.
@@ -81,7 +81,7 @@ <h3 class="text-right title-template">
                                 <p>GSTIN:23AAAAAA000A1Z0</p>
                             </td>
                             <td class="text-left">
-                                <p class="mb-05">
+                                <p class="mr-b05">
                                     Shipped From
                                 </p>
                                 <p class="strong"><strong>Walkover Web Solutions Pvt.
@@ -101,7 +101,7 @@ <h3 class="text-right title-template">
                     <tbody>
                         <tr>
                             <td class="text-left">
-                                <p class="mb-05">
+                                <p class="mr-b05">
                                     Bill To:
                                 </p>
                                 <p class="strong"><strong>Walkover Web Solutions Pvt.
@@ -115,7 +115,7 @@ <h3 class="text-right title-template">
                                 <p>GSTIN:23AAAAAA000A1Z0</p>
                             </td>
                             <td class="text-left">
-                                <p class="mb-05">
+                                <p class="mr-b05">
                                     Shipped To:
                                 </p>
                                 <p class="strong"><strong>Walkover Web Solutions Pvt.
diff --git a/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.scss b/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.scss
index 04adb696c3a..571210dee4c 100644
--- a/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.scss
+++ b/apps/web-giddh/src/app/invoice/preview/models/purchase-bill-template-preview/purchase-bill-template-preview.component.scss
@@ -176,7 +176,7 @@ p {
 }
 .warehouse-table {
     width: 100%;
-    border-bottom: 1px solid $light-gray;
+    border-bottom: 1px solid $gainsboro;
     margin-bottom: 10px;
     padding-bottom: 5px;
     padding-right: 0px;
@@ -206,7 +206,7 @@ p {
 }
 #default table.item tfoot tr th {
     padding-right: 7px;
-    border-top: 1px solid $light-gray;
+    border-top: 1px solid $gainsboro;
 }
 /* tcs */
 .tcs hr {
@@ -224,7 +224,7 @@ p {
 .tcs table th {
     border-radius: 0;
     padding: 5px;
-    border: 1px solid $light-gray;
+    border: 1px solid $gainsboro;
     vertical-align: top;
     text-align: right;
 }
@@ -267,7 +267,7 @@ p {
 #default table.item td {
     border-radius: 0;
     padding: 7px;
-    border-top: 1px solid $light-gray;
+    border-top: 1px solid $gainsboro;
     line-height: 1.2rem;
     vertical-align: top;
 }
@@ -325,7 +325,7 @@ p {
 
 #default .subfooter hr {
     width: 100%;
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
     margin: 3px 0;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.html b/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.html
index d63f60bf810..9d4f576349a 100644
--- a/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.html
+++ b/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.html
@@ -1,9 +1,9 @@
 <div class="proforma-container">
 
     <div class="d-flex date-advance-search">
-        <form #invoiceForm="ngForm" novalidate class="form-inline input-grp-dateRangePicker pr">
+        <form #invoiceForm="ngForm" novalidate class="form-inline input-grp-date-range-picker position-relative">
             <div class="d-flex">
-                <div class="form-group mrR1 d-flex">
+                <div class="form-group mr-r1 d-flex">
                     <div class=" input-group custom-datepicker" (click)="showGiddhDatepicker($event)">
                         <i class="icon-calender calendar-addon"></i>
                         <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker border-radius-2"/>
@@ -31,7 +31,7 @@
 
         <div class="d-flex btn-wrapper">
             <!-- select app proforma -->
-            <div class="select-all-proformas-on-mobile-view mt-1 mr-15" *ngIf="selectedItems.length > 0">
+            <div class="select-all-proformas-on-mobile-view mt-1 mr-r15" *ngIf="selectedItems.length > 0">
                 <div class="checkbox-img mr-1">
                     <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected" (click)="toggleAllItems(true)">
                     <img src="assets/images/checked.png" *ngIf="allItemsSelected" (click)="toggleAllItems(false)">
@@ -40,10 +40,9 @@
             </div>
             <!--  -->
             <!-- region more items -->
-            <div *ngIf="selectedItems.length === 1" style="height: 30px;">
+            <div *ngIf="selectedItems.length === 1" class="btn-wrapper-more">
 
-                <div *ngIf="!isCompany" class="btn-group" dropdown #dp="bs-dropdown"
-                    style="margin-bottom: 10px;display: inline-block !important;">
+                <div *ngIf="!isCompany" class="btn-group d-inline-block mr-b1" dropdown #dp="bs-dropdown">
 
                     <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                         aria-controls="dropdown-basic">
@@ -64,13 +63,13 @@
             </div>
             <!-- endregion -->
             <div *ngIf="voucherType === 'proformas'" class="btn-wrapper">
-                <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;" (click)="goToInvoice('proformas')">+ New
+                <button *ngIf="!isCompany" class="btn btn-sky-blue m-0" (click)="goToInvoice('proformas')">+ New
                     Proforma
                 </button>
             </div>
 
             <div *ngIf="voucherType === 'estimates'" class="btn-wrapper">
-                <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;" (click)="goToInvoice('estimates')">+ New
+                <button *ngIf="!isCompany" class="btn btn-sky-blue m-0" (click)="goToInvoice('estimates')">+ New
                     Estimate
                 </button>
             </div>
@@ -95,20 +94,19 @@
             </div>
         </div>
         <div class="d-flex mt-1">
-            <div *ngIf="voucherType === 'proformas'" class="btn-wrapper mr-15">
-                <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;" (click)="goToInvoice('proformas')">+ New
+            <div *ngIf="voucherType === 'proformas'" class="btn-wrapper mr-r15">
+                <button *ngIf="!isCompany" class="btn btn-sky-blue m-0" (click)="goToInvoice('proformas')">+ New
                     Proforma
                 </button>
             </div>
 
-            <div *ngIf="voucherType === 'estimates'" class="btn-wrapper mr-15">
-                <button *ngIf="!isCompany" class="btn btn-sky-blue" style="margin: 0 !important;" (click)="goToInvoice('estimates')">+ New
+            <div *ngIf="voucherType === 'estimates'" class="btn-wrapper mr-r15">
+                <button *ngIf="!isCompany" class="btn btn-sky-blue m-0" (click)="goToInvoice('estimates')">+ New
                     Estimate
                 </button>
             </div>
-            <div *ngIf="selectedItems.length === 1" style="height: 30px;">
-                <div *ngIf="!isCompany" class="btn-group" dropdown #dp="bs-dropdown"
-                    style="margin-bottom: 10px;display: inline-block !important;">
+            <div *ngIf="selectedItems.length === 1" class="btn-wrapper-more">
+                <div *ngIf="!isCompany" class="btn-group mr-b1 d-inline-block" dropdown #dp="bs-dropdown">
 
                     <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                         aria-controls="dropdown-basic">
@@ -163,14 +161,14 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
     </ng-template>
     <!-- select app proforma -->
     <div class="clearfix">
-        <div class="table-responsive removeResponsive invoice-preview">
-            <table class="table basic table-bordered mt-15 invoice-table on-mobile-view">
-                <thead class="t-h-bg1">
+        <div class="table-responsive remove-responsive invoice-preview">
+            <table class="table basic table-bordered mr-t15 invoice-table on-mobile-view">
+                <thead class="thead-background1">
                     <tr>
 
-                        <th *ngIf="selectedItems.length > 0" style="min-width:50px; width: 4%">
+                        <th *ngIf="selectedItems.length > 0" width="4%" class="min-width-check">
 
-                            <div class="mh18_img" style="justify-content: center;display: flex">
+                            <div class="check-image d-flex justify-content-center">
                                 <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
                                     (click)="toggleAllItems(true)">
                                 <img src="assets/images/checked.png" *ngIf="allItemsSelected"
@@ -179,8 +177,8 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                         </th>
 
-                        <th *ngIf="selectedItems.length === 0" style="min-width:50px; width: 4%">
-                            <div class="mh18_img" style="justify-content: center;display: flex">
+                        <th *ngIf="selectedItems.length === 0" width="4%" class="min-width-check">
+                            <div class="check-image d-flex justify-content-center">
                                 #
                             </div>
                         </th>
@@ -258,9 +256,9 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     <tr *ngFor="let item of voucherData.results; let i = index"
                         (mouseover)="hoveredItemUniqueName = item.uniqueName">
 
-                        <td class="mh18_img" width="4%" data-title="#"
+                        <td class="check-image" width="4%" data-title="#"
                             *ngIf="hoveredItemUniqueName === item.uniqueName || item.isSelected || selectedItems.length > 0">
-                            <div class="mh18_img"
+                            <div class="check-image"
                                 class="d-flex checkbox-td">
                                 <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                     (click)="toggleItem(item, true)" />
@@ -331,15 +329,15 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
 
 
-                            <div class="d-flex" style="align-items: center">
-                                <div class="flex-fill selectAction">
+                            <div class="d-flex align-items-center">
+                                <div class="flex-fill select-action">
                                     <span
                                         [ngClass]="{'text-light-2': !item.action}">{{ item.action ? item.action : 'Select Action' }}</span>
                                 </div>
 
                                 <!-- dropdown -->
 
-                                <div *ngIf="!isCompany" class="btn-group icon-ellipse selectAction" dropdown #dropdown="bs-dropdown"
+                                <div *ngIf="!isCompany" class="btn-group icon-ellipse select-action" dropdown #dropdown="bs-dropdown"
                                     container="body">
                                     <a href="javascript:void(0)" id="button-basic" dropdownToggle
                                         class="dropdown-toggle icon-dots-three-vertical pull-right"
@@ -349,7 +347,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                                     <div id="dropdown-basic" *dropdownMenu
                                         class="dropdown-menu dropdown-menu-right wd00" role="menu"
                                         aria-labelledby="edit-model-basic">
-                                        <ul role="menu" class="selectActionDropdown" aria-labelledby="button-basic">
+                                        <ul role="menu" class="select-action-dropdown" aria-labelledby="button-basic">
                                             <li (click)="updateVoucherAction('Accepted', item)">
                                                 <a class="cp" href="javascript:void(0)">Accepted</a>
                                             </li>
@@ -374,13 +372,13 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                                 <!-- <div *ngIf="hoveredItemUniqueName === item.uniqueName || clickedItemUniqueName === item.uniqueName">
                 <div dropdown #dropdown="bs-dropdown" container="body" [autoClose]="false"
-                  class="icon-ellipse selectAction">
+                  class="icon-ellipse select-action">
                   <a id="edit-model-basic" dropdownToggle class="dropdown-toggle icon-dots-three-vertical pull-right"
                     aria-controls="dropdown-basic"></a>
 
                   <div id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right wd00" role="menu"
                     aria-labelledby="edit-model-basic">
-                    <ul class="selectActionDropdown">
+                    <ul class="select-action-dropdown">
 
                       <li (click)="updateVoucherAction('Accepted', item)">
                         <a class="cp" href="javascript:void(0)">Accepted</a>
@@ -426,7 +424,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                 <tfoot *ngIf="voucherData && voucherData?.totalItems > 20 && !(isGetAllInProcess$ | async)">
                     <tr>
                         <td colspan="100%">
-                            <div class="alC">
+                            <div class="text-center">
 
                                 <pagination [totalItems]="voucherData.totalItems" [(ngModel)]="voucherData.page"
                                     [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="20"
@@ -483,17 +481,17 @@ <h1>Do search with some other dates</h1>
 
         <div class="icon-sort-asc" *ngIf="advanceSearchFilter.sortBy !== column"
             (click)="sortButtonClicked('asc', column)"
-            [ngClass]="{'activeTextColor': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'asc'}">
+            [ngClass]="{'active-text-color': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'asc'}">
         </div>
 
         <div class="icon-sort-asc" *ngIf="advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'asc'"
             (click)="sortButtonClicked('desc', column)"
-            [ngClass]="{'activeTextColor': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'asc'}">
+            [ngClass]="{'active-text-color': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'asc'}">
         </div>
 
         <div class="icon-sort-dsc" *ngIf="advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'desc'"
             (click)="sortButtonClicked('asc', column)"
-            [ngClass]="{'activeTextColor': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'desc'}">
+            [ngClass]="{'active-text-color': advanceSearchFilter.sortBy === column && advanceSearchFilter.sort === 'desc'}">
         </div>
 
     </ng-template>
diff --git a/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.scss b/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.scss
index af67bd2a70a..8cc52bd9a58 100644
--- a/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.scss
+++ b/apps/web-giddh/src/app/invoice/proforma/proforma-list.component.scss
@@ -7,13 +7,13 @@
     flex-flow: row wrap;
 }
 
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #c6c4c4;
+    border-right: 1px solid $gainsboro;
 }
 
 .flex-fill {
@@ -56,9 +56,9 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
 .td-search-box .input-container i {
@@ -69,7 +69,7 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .dropdown-menu {
@@ -80,40 +80,40 @@
     height: 50px !important;
 }
 
-.click-dropdwon ul {
+.click-dropdown ul {
     list-style: none;
     position: absolute;
     left: -114px;
-    background-color: white;
+    background-color: $white;
     width: 131px;
-    box-shadow: 0px 4px 7px #bfbfbf;
+    box-shadow: 0px 4px 7px $silver;
     border-radius: 3px;
     z-index: 100;
     border: 1px solid $gainsboro;
 }
 
-.click-dropdwon {
+.click-dropdown {
     position: relative;
 }
 
-.click-dropdwon ul li {
+.click-dropdown ul li {
     padding: 3px 6px;
     margin-bottom: 4px;
 
-    color: orange;
+    color: $orange;
     cursor: pointer;
 }
 
-.click-dropdwon ul li:hover {
+.click-dropdown ul li:hover {
     background-color: $gainsboro;
 }
 
-.click-dropdwon ul li:hover a {
+.click-dropdown ul li:hover a {
     color: orangered;
 }
 
-.click-dropdwon ul li a {
-    color: black;
+.click-dropdown ul li a {
+    color: $black;
 }
 
 .invoice-table tr:hover .dropdown-btn {
@@ -121,7 +121,7 @@
     cursor: pointer;
 }
 
-.click-dropdwon .dropdown-btn {
+.click-dropdown .dropdown-btn {
     display: none;
 }
 
@@ -131,7 +131,7 @@
     margin-left: 6px;
 }
 
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 .date-advance-search {
@@ -144,18 +144,18 @@
     display: none;
     margin-bottom: 15px;
 }
-ul.selectActionDropdown {
+ul.select-action-dropdown {
     list-style: none;
 }
-.selectActionDropdown a {
-    color: #333;
+.select-action-dropdown a {
+    color: $night-rider;
     font-size: 14px;
     padding: 5px 10px;
     display: block;
 }
-.selectActionDropdown a:hover {
+.select-action-dropdown a:hover {
     color: $chetwode-blue !important;
-    background: #eeeff9 !important;
+    background: $lavender !important;
 }
 .dropdown-toggle.more-btn-dropdown {
     color: $navy;
@@ -167,18 +167,18 @@ ul.selectActionDropdown {
     justify-content: space-between;
     align-items: center;
     margin-right: 15px;
-    background-color: #fff;
+    background-color: $white;
 }
 .dropdown-toggle.more-btn-dropdown:hover {
     background: $chetwode-blue;
-    color: #fff !important;
+    color: $white !important;
     border-color: $chetwode-blue;
 }
 .dropdown-toggle.more-btn-dropdown .caret {
-    color: #999999;
+    color: $nobel;
 }
 .dropdown-toggle.more-btn-dropdown:hover .caret {
-    color: #fff !important;
+    color: $white !important;
 }
 
 .proforma-container {
@@ -225,7 +225,7 @@ ul.selectActionDropdown {
     border: 1px solid $gainsboro;
     border-radius: 2px;
     color: $gray;
-    background: #fff;
+    background: $white;
     align-items: center;
     justify-content: center;
 }
@@ -233,13 +233,13 @@ ul.selectActionDropdown {
     display: none;
 }
 .advance-icon:hover {
-    background: #eaeaea;
+    background: $whisper-color;
 }
 button.btn.btn-filter {
-    background: #e4e4e4;
-    border: 1px solid #e4e4e4;
+    background: $whisper;
+    border: 1px solid $gainsboro;
     font-size: 14px;
-    color: #1a237e;
+    color: $midnight-blue;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
@@ -248,14 +248,14 @@ button.btn.btn-filter {
 button.btn.btn-filter span.icon-cross {
     margin-right: 5px;
 }
-.icon-ellipse.selectAction a {
-    color: #333;
+.icon-ellipse.select-action a {
+    color: $night-rider;
 }
 .invoice-table th .d-flex {
     align-items: center;
 }
 a.btn-link-2 {
-    color: #1c1c1c;
+    color: $nero;
 }
 .input-wrapper {
     display: block !important;
@@ -342,7 +342,7 @@ span.icon-advance-filter {
         width: 100%;
         margin-top: 10px !important;
     }
-    .input-grp-dateRangePicker .form-group {
+    .input-grp-date-range-picker .form-group {
         margin-bottom: 10px;
     }
     .full-width-on-mobile {
@@ -363,9 +363,9 @@ span.icon-advance-filter {
     }
 }
 @media (max-width: 420px) {
-    .smallLoading {
+    .small-loading {
         padding-left: 0;
-        color: #333333;
+        color: $night-rider;
         font-size: 12px;
         position: relative;
         top: 2px;
@@ -382,12 +382,12 @@ span.icon-advance-filter {
     .form-group div {
         display: block;
     }
-    .input-grp-dateRangePicker .btn {
+    .input-grp-date-range-picker .btn {
         padding-left: 0;
         padding-top: 10px;
         padding-bottom: 0;
     }
-    .smallLoading {
+    .small-loading {
         top: 5px;
     }
     .date-advance-search .btn-wrapper {
diff --git a/apps/web-giddh/src/app/invoice/receipt/models/preview-download-receipt.component.html b/apps/web-giddh/src/app/invoice/receipt/models/preview-download-receipt.component.html
index 439968919cc..1036e879686 100644
--- a/apps/web-giddh/src/app/invoice/receipt/models/preview-download-receipt.component.html
+++ b/apps/web-giddh/src/app/invoice/receipt/models/preview-download-receipt.component.html
@@ -1,19 +1,19 @@
-<div id="" class="">
+<div>
 
-    <div class="modal-header clearfix" style="display: flex;">
+    <div class="modal-header clearfix d-flex">
         <span>
-            <!--<button type="button" class="btn btn-md btn-info mrR1" (click)="editButtonClicked()"-->
+            <!--<button type="button" class="btn btn-md btn-info mr-r1" (click)="editButtonClicked()"-->
             <!--*ngIf="activatedInvoice != 'receipt'">Edit</button>-->
         </span>
-        <h3 class="modal-title" id="modal-title" style="flex: 1;align-self: center;text-align: center;">
+        <h3 class="modal-title flex-fill text-center align-self-center" id="modal-title">
             {{activatedInvoice | titlecase }}</h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="closeModelEvent.emit()"></i>
 
     </div>
 
-    <div class="modal-body noPad clearfix" id="export-body">
+    <div class="modal-body p-0 clearfix" id="export-body">
         <div *ngIf="isError">
-            <p class="lead alC">Oops! Something went wrong.</p>
+            <p class="lead text-center">Oops! Something went wrong.</p>
         </div>
         <div class="loader mr-t4" *ngIf="isRequestInProcess">
             <span></span>
diff --git a/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.html b/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.html
index 03f82dc4543..9865705a8ef 100644
--- a/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.html
+++ b/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.html
@@ -1,31 +1,31 @@
-<div id="" class="">
+<div>
 
     <div class="modal-header clearfix">
         <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="closeModelEvent.emit()"></i>
 
     </div>
-    <div class="modal-body noPad clearfix" id="export-body">
+    <div class="modal-body p-0 clearfix" id="export-body">
         <form #invoiceForm="ngForm" novalidate class="clearfix mr-b2" autocomplete="off" *ngIf="voucherFormDetails">
 
-            <div class="bdrB clearfix">
-                <div class="col-xs-6">
-                    <div class="form-group size_380">
+            <div class="bd-rb clearfix row">
+                <div class="col-sm-6">
+                    <div class="form-group size-380">
                         <label>Customer Name</label>
                         <input type="text" name="customerName" class="form-control"
                             [(ngModel)]="voucherFormDetails.voucherDetails.customerName" />
                     </div>
                 </div>
-                <div class="col-xs-6 text-right">
+                <div class="col-sm-6 text-right">
                     <label>&nbsp;</label>
                     <p class="lead b">Balance Due: {{ voucherFormDetails.voucherDetails.grandTotal }}</p>
                 </div>
             </div>
 
-            <section class="clearfix mrB4">
-                <section class="form-inline col-xs-12">
-                    <div class="pdT2 clearfix">
-                        <div class="form-group size_340">
+            <section class="clearfix mr-b4 row">
+                <section class="form-inline col-sm-12">
+                    <div class="pd-t2 clearfix">
+                        <div class="form-group size-340">
                             <label>Attention to</label>
                             <input type="text" name="attention" class="form-control"
                                 [(ngModel)]="voucherFormDetails.accountDetails.attentionTo" />
@@ -50,9 +50,9 @@ <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
                         <!--</div>-->
                     </div>
 
-                    <div class="pdT2 clearfix flex-row">
+                    <div class="pd-t2 clearfix flex-row">
                         <div class="flex-row-child">
-                            <div class="form-group size_340">
+                            <div class="form-group size-340">
                                 <label>Billing Address</label>
                                 <textarea name="billingDetails.address" class="form-control"
                                     [(ngModel)]="voucherFormDetails.accountDetails.billingDetails.address"></textarea>
@@ -77,7 +77,7 @@ <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
                             </div>
                         </div>
                         <div class="flex-row-child">
-                            <div class="form-group size_340">
+                            <div class="form-group size-340">
                                 <label>Shipping Address</label>
                                 <textarea name="shippingDetails.address" class="form-control"
                                     [(ngModel)]="voucherFormDetails.accountDetails.shippingDetails.address"></textarea>
@@ -102,35 +102,35 @@ <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
                         </div>
                     </div>
 
-                    <div class="pdT2 clearfix">
-                        <div class="form-group size_175">
+                    <div class="pd-t2 clearfix">
+                        <div class="form-group size-175">
                             <label>Ship Date</label>
                             <input type="text" [placeholder]="giddhDateFormat" name="shippingDate"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.shippingDate" class="form-control"
                                 bsDatepicker
                                 value="{{ voucherFormDetails.templateDetails.other.shippingDate | date: giddhDateFormatUI }}" />
                         </div>
-                        <div class="form-group size_175">
+                        <div class="form-group size-175">
                             <label>Ship Via</label>
                             <input type="text" name="shippedVia" class="form-control"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.shippedVia" />
                         </div>
-                        <div class="form-group size_175">
+                        <div class="form-group size-175">
                             <label>Tracking No.</label>
                             <input type="text" name="country" class="form-control"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.trackingNumber" />
                         </div>
-                        <div class="form-group size_175">
+                        <div class="form-group size-175">
                             <label>Custom Field 1</label>
                             <input type="text" name="customField1" class="form-control"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.customField1" />
                         </div>
-                        <div class="form-group size_175">
+                        <div class="form-group size-175">
                             <label>Custom Field 2</label>
                             <input type="text" name="customField2" class="form-control"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.customField2" />
                         </div>
-                        <div class="form-group size_175">
+                        <div class="form-group size-175">
                             <label>Custom Field 3</label>
                             <input type="text" name="customField3" class="form-control"
                                 [(ngModel)]="voucherFormDetails.templateDetails.other.customField3" />
@@ -139,9 +139,9 @@ <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
                 </section>
             </section>
 
-            <section class="clearfix mr-b2 whiteBg">
+            <section class="clearfix mr-b2 white-bg">
                 <table class="table">
-                    <thead class="t-h-bg1">
+                    <thead class="thead-background1">
                         <tr *ngIf="customThead">
                             <th *ngFor="let item of customThead;" [hidden]="!item.display">{{item.label}}</th>
                         </tr>
@@ -205,10 +205,10 @@ <h3 class="modal-title" id="modal-title">{{activatedInvoice | titlecase }}</h3>
             </section>
 
             <section class="row">
-                <section id="actionPane" class="text-center mrB4">
-                    <div class="col-xs-12">
+                <section id="actionPane" class="text-center mr-b4 row">
+                    <div class="col-md-12">
                         <div class="pull-right">
-                            <button type="button" class="btn btn-default mrR1" (click)="closeModelEvent.emit()">Close
+                            <button type="button" class="btn btn-default mr-r1" (click)="closeModelEvent.emit()">Close
                             </button>
                             <button type="submit" class="btn btn-default" (click)="updateModelData()">
                                 <span>Update {{activatedInvoice | titlecase}}</span>
diff --git a/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.scss b/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.scss
index 3b0ea9bbf20..649dd99ded8 100644
--- a/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.scss
+++ b/apps/web-giddh/src/app/invoice/receipt/receipt-update/receiptUpdate.component.scss
@@ -1,15 +1,17 @@
-.whiteBg {
-    background-color: #fff;
+@import "../../../../assets/css/color.scss";
+
+.white-bg {
+    background-color: $white;
 }
 
 // .form-group input, .form-group select, .form-group textarea{
 //   max-width: 140px;
 // }
-// .form-group.size_240 input, .form-group.size_240 select, .form-group.size_240 textarea{
+// .form-group.size-240 input, .form-group.size-240 select, .form-group.size-240 textarea{
 //   max-width: 240px;
 //   width: 240px;
 // }
-// .form-group.size_360 input, .form-group.size_360 select, .form-group.size_360 textarea{
+// .form-group.size-360 input, .form-group.size-360 select, .form-group.size-360 textarea{
 //   max-width: 360px;
 // }
 .flex-row {
@@ -23,7 +25,7 @@
     width: 100%;
     height: 80px;
     padding: 20px 0;
-    background-color: #7d7d7d;
+    background-color: $gray;
 }
 
 // styles
@@ -53,35 +55,35 @@
         font-weight: 400;
         margin-bottom: 5px;
     }
-    &.size_175 {
+    &.size-175 {
         input,
         select,
         textarea {
             width: 175px;
         }
     }
-    &.size_240 {
+    &.size-240 {
         input,
         select,
         textarea {
             width: 240px;
         }
     }
-    &.size_340 {
+    &.size-340 {
         input,
         select,
         textarea {
             width: 340px;
         }
     }
-    &.size_380 {
+    &.size-380 {
         input,
         select,
         textarea {
             width: 380px;
         }
     }
-    &.noMarg {
+    &.no-margin {
         margin: 0;
     }
 }
diff --git a/apps/web-giddh/src/app/invoice/receipt/receipt.component.html b/apps/web-giddh/src/app/invoice/receipt/receipt.component.html
index c78b209c87f..4e5add82a22 100644
--- a/apps/web-giddh/src/app/invoice/receipt/receipt.component.html
+++ b/apps/web-giddh/src/app/invoice/receipt/receipt.component.html
@@ -1,13 +1,13 @@
-<section class="invoice-bg col-xs-12">
+<section class="invoice-bg">
     <nav class="navbar">
-        <div class="container-fluid pdL0">
+        <div class="container-fluid pl-0">
 
             <form #invoiceForm="ngForm" (ngSubmit)="getInvoiceReceiptByFilters(invoiceForm)" novalidate
-                class="form-inline input-grp-dateRangePicker pr">
+                class="form-inline input-grp-date-range-picker position-relative">
 
                 <div class="d-flex mt-2">
 
-                    <div class="form-group mrR1 d-flex" style="flex: 1 1 auto;">
+                    <div class="form-group mr-r1 d-flex flex-fill">
 
                         <div class="input-group">
                             <input type="text" name="dateRange" #dateRangePickerCmp daterangepicker
@@ -15,12 +15,11 @@
                                 class="form-control" />
                             <!-- <input name="dateRange" placeholder="Daterangepicker" type="text" class="form-control" [ngModel]="invoiceSearchRequest.dateRange" (bsValueChange)="bsValueChange($event)" bsDaterangepicker [bsConfig]="bsConfig" required /> -->
                         </div>
-                        <div class="d-flex" style="align-items: center">
-                            <a href="javascript:void(0);" class="btn btn-link" (click)="toggleAdvanceSearchPopup()"
-                                style="margin: 0px;padding-right: 8px">Advance search</a>
+                        <div class="d-flex align-items-center">
+                            <a href="javascript:void(0);" class="btn btn-link m-0 pd-r1" (click)="toggleAdvanceSearchPopup()">Advance search</a>
                             <a class="cp" href="javascript: void 0" (click)="resetAdvanceSearch()"
                                 *ngIf="showAdvanceSearchIcon">
-                                <i aria-hidden="true" class="icon-refresh" style="color: #333333"
+                                <i aria-hidden="true" class="icon-refresh"
                                     tooltip="Reset Filter"></i>
                             </a>
                         </div>
@@ -28,12 +27,11 @@
 
                     <div class="d-flex">
 
-                        <div style="height: 30px;" *ngIf="selectedItems.length > 0">
-                            <div class="btn-group" dropdown triggers="mouseover" #dp="bs-dropdown"
-                                (mouseleave)="dp.hide()" style="margin-bottom: 10px;display: inline-block !important;">
+                        <div *ngIf="selectedItems.length > 0" class="dropdown-height">
+                            <div class="btn-group mr-b1 d-inline-block" dropdown triggers="mouseover" #dp="bs-dropdown"
+                                (mouseleave)="dp.hide()">
 
-                                <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
-                                    style="margin-right: 0px !important;" aria-controls="dropdown-basic">
+                                <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle mr-0" aria-controls="dropdown-basic">
                                     More
                                     <span class="caret"></span>
                                 </button>
@@ -77,11 +75,11 @@
             <!-- grid -->
             <table class="table basic table-bordered mr-t2">
 
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr>
 
-                        <th style="width:4%" *ngIf="selectedItems.length > 0">
-                            <div class="mh18_img" style="justify-content: center;display: flex">
+                        <th width="4%" *ngIf="selectedItems.length > 0">
+                            <div class="check-image d-flex justify-content-center">
                                 <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
                                     (click)="toggleAllItems(true)">
                                 <img src="assets/images/checked.png" *ngIf="allItemsSelected"
@@ -90,7 +88,7 @@
                         </th>
 
                         <th *ngIf="selectedItems.length === 0" width="4%">
-                            <div class="mh18_img" style="justify-content: center;display: flex">
+                            <div class="check-image d-flex justify-content-center">
                                 #
                             </div>
                         </th>
@@ -134,11 +132,11 @@
                                 <!-- <div class="icon-pointer">
                 <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                      (click)="sortButtonClicked('asc', 'voucherDate')"
-                     [ngClass]="{'activeTextColor': receiptSearchRequest.sortBy === 'voucherDate' && receiptSearchRequest.sort === 'asc'}"
+                     [ngClass]="{'active-text-color': receiptSearchRequest.sortBy === 'voucherDate' && receiptSearchRequest.sort === 'asc'}"
                 ></div>
                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                      (click)="sortButtonClicked('desc', 'voucherDate')"
-                     [ngClass]="{'activeTextColor': receiptSearchRequest.sortBy === 'voucherDate' && receiptSearchRequest.sort === 'desc'}"
+                     [ngClass]="{'active-text-color': receiptSearchRequest.sortBy === 'voucherDate' && receiptSearchRequest.sort === 'desc'}"
                 ></div>
               </div> -->
                             </div>
@@ -150,11 +148,11 @@
                                 <!-- <div class="icon-pointer">
                 <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"
                      (click)="sortButtonClicked('asc', 'grandTotal')"
-                     [ngClass]="{'activeTextColor': receiptSearchRequest.sortBy === 'grandTotal' && receiptSearchRequest.sort === 'asc'}"
+                     [ngClass]="{'active-text-color': receiptSearchRequest.sortBy === 'grandTotal' && receiptSearchRequest.sort === 'asc'}"
                 ></div>
                 <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"
                      (click)="sortButtonClicked('desc', 'grandTotal')"
-                     [ngClass]="{'activeTextColor': receiptSearchRequest.sortBy === 'grandTotal' && receiptSearchRequest.sort === 'desc'}"
+                     [ngClass]="{'active-text-color': receiptSearchRequest.sortBy === 'grandTotal' && receiptSearchRequest.sort === 'desc'}"
                 ></div>
               </div> -->
                             </div>
@@ -166,7 +164,7 @@
                 <tfoot *ngIf="receiptData && receiptData?.totalPages > 1">
                     <tr>
                         <td colspan="100%">
-                            <div class="alC">
+                            <div class="text-center">
                                 <pagination [totalItems]="receiptData.totalPages" [(ngModel)]="receiptData.page"
                                     [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="1"
                                     [rotate]="false" (pageChanged)="pageChanged($event)"></pagination>
@@ -184,7 +182,7 @@
 
                         <td
                             *ngIf="hoveredItemForAction === item.uniqueName || item.isSelected || selectedItems.length > 0">
-                            <div class="mh18_img" style="justify-content: center;display: flex">
+                            <div class="check-image d-flex justify-content-center">
                                 <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                     (click)="toggleItem(item, true)" />
                                 <img *ngIf="item.isSelected" src="assets/images/checked.png"
@@ -194,10 +192,10 @@
 
                         <td
                             *ngIf="!item.isSelected && hoveredItemForAction !== item.uniqueName && selectedItems.length === 0">
-                            <div style="justify-content: center;display: flex">{{ i + 1}}</div>
+                            <div class="d-flex justify-content-center">{{ i + 1}}</div>
                         </td>
 
-                        <td><a style="cursor: pointer" (click)="downloadVoucherRequest(item.uniqueName, false)">
+                        <td><a class="cursor-pointer" (click)="downloadVoucherRequest(item.uniqueName, false)">
                                 {{item.voucherNumber }}</a></td>
 
                         <td (dblclick)="modalUniqueName = item.uniqueName" class="cp no-dbl-click-select"
diff --git a/apps/web-giddh/src/app/invoice/receipt/receipt.component.scss b/apps/web-giddh/src/app/invoice/receipt/receipt.component.scss
index 10d1eb43228..56037ec78d8 100644
--- a/apps/web-giddh/src/app/invoice/receipt/receipt.component.scss
+++ b/apps/web-giddh/src/app/invoice/receipt/receipt.component.scss
@@ -12,7 +12,7 @@
 
 .td-search-box div i {
     margin-top: 3px;
-    color: #8080808c;
+    color: $olive;
     padding-right: 8px;
     cursor: pointer;
 }
@@ -44,23 +44,31 @@
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #c6c4c4;
+    border-right: 1px solid $gainsboro;
 }
 
 .icon-pointer .glyphicon {
     cursor: pointer;
 }
 
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 
 .dropdown-menu {
     margin-top: 0;
 }
+
+.icon-refresh{
+    color: $night-rider;
+}
+
+.dropdown-height{
+    height: 30px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/invoice/recurring/recurring.component.html b/apps/web-giddh/src/app/invoice/recurring/recurring.component.html
index dcc8c27dec5..76b8da21616 100644
--- a/apps/web-giddh/src/app/invoice/recurring/recurring.component.html
+++ b/apps/web-giddh/src/app/invoice/recurring/recurring.component.html
@@ -1,9 +1,9 @@
 <div class="recurring-container">
 
 
-    <form #recurringForm="ngForm" novalidate class="form-inline input-grp-dateRangePicker pr" (ngSubmit)="submit()">
+    <form #recurringForm="ngForm" novalidate class="form-inline input-grp-date-range-picker position-relative" (ngSubmit)="submit()">
 
-        <div class="d-flex search-icon-block mb-15"  *ngIf="isMobileScreen">
+        <div class="d-flex search-icon-block mr-b15"  *ngIf="isMobileScreen">
             <div (click)="openModal(template)">
                 <i class="icon-search"></i>
             </div>
@@ -23,8 +23,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                                     [(ngModel)]="filter.status" [options]="invoiceTypeOptions" [notFoundLink]="false"
                                     [multiple]="false" [ItemHeight]="33" [useInBuiltFilterForIOptionTypeItems]="true">
                                     <ng-template #optionTemplate let-option="option">
-                                        <a href="javascript:void(0)" class="list-item"
-                                            style="border-bottom: 1px solid #ccc;">
+                                        <a href="javascript:void(0)" class="list-item">
                                             <div class="item">{{ option.label }}</div>
                                         </a>
                                     </ng-template>
@@ -38,8 +37,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                                     [notFoundLink]="false" [multiple]="false" [(ngModel)]="filter.duration"
                                     [ItemHeight]="33" [useInBuiltFilterForIOptionTypeItems]="true">
                                     <ng-template #optionTemplate let-option="option">
-                                        <a href="javascript:void(0)" class="list-item"
-                                            style="border-bottom: 1px solid #ccc;">
+                                        <a href="javascript:void(0)" class="list-item">
                                             <div class="item">{{ option.label }}</div>
                                         </a>
                                     </ng-template>
@@ -53,7 +51,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                             </div>
                         </div>
                         <div class="form-group search-invoice-filed">
-                            <div class="searchInvoiceNo">
+                            <div class="search-invoice-no">
                                 <label class="d-block">Search Invoice No.</label>
                                 <div class="input-group">
                                     <input type="text" placeholder="Search Invoice No." class="w100"
@@ -63,7 +61,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                             </div>
                         </div>
                         <div class="form-group search-invoice-filed">
-                            <div class="searchCustomerNo">
+                            <div class="search-customer-no">
                                 <div class="input-container">
                                     <label class="d-block">Search Customer Name</label>
                                     <input type="text" placeholder="Search Customer Name" class="w100"
@@ -87,28 +85,28 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
         </div>
         <div class="recurring-form-wrapper">
             <div class="recurring-form" *ngIf="!isMobileScreen">
-                <div class="form-group mrR1">
-                    <label class="d-block mr-15">Invoice Type</label>
+                <div class="form-group mr-r1">
+                    <label class="d-block mr-r15">Invoice Type</label>
                     <div class="ng-select-wrap input-group">
                         <sh-select name="invoiceType" [placeholder]="'Select Account'" [(ngModel)]="filter.status"
                             [options]="invoiceTypeOptions" [notFoundLink]="false" [multiple]="false" [ItemHeight]="33"
                             [useInBuiltFilterForIOptionTypeItems]="true">
                             <ng-template #optionTemplate let-option="option">
-                                <a href="javascript:void(0)" class="list-item" style="border-bottom: 1px solid #ccc;">
+                                <a href="javascript:void(0)" class="list-item">
                                     <div class="item">{{ option.label }}</div>
                                 </a>
                             </ng-template>
                         </sh-select>
                     </div>
                 </div>
-                <div class="form-group mrR1">
-                    <label class="d-block mr-15">Interval</label>
+                <div class="form-group mr-r1">
+                    <label class="d-block mr-r15">Interval</label>
                     <div class="ng-select-wrap input-group">
                         <sh-select name="interval" [placeholder]="'Select Account'" [options]="intervalOptions"
                             [notFoundLink]="false" [multiple]="false" [(ngModel)]="filter.duration" [ItemHeight]="33"
                             [useInBuiltFilterForIOptionTypeItems]="true">
                             <ng-template #optionTemplate let-option="option">
-                                <a href="javascript:void(0)" class="list-item" style="border-bottom: 1px solid #ccc;">
+                                <a href="javascript:void(0)" class="list-item">
                                     <div class="item">{{ option.label }}</div>
                                 </a>
                             </ng-template>
@@ -116,15 +114,15 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     </div>
                 </div>
 
-                <div class="form-group mrR1">
-                    <label class="d-block mr-15">Last Invoice Date</label>
+                <div class="form-group mr-r1">
+                    <label class="d-block mr-r15">Last Invoice Date</label>
                     <div class="input-group">
                         <giddh-datepicker name="lastInvoiceDate" [(ngModel)]="filter.lastInvoiceDate" [placeholder]="'Select Date'"></giddh-datepicker>
                     </div>
                 </div>
 
-                <div class="form-group mrR1" *ngIf="isMobileScreen">
-                    <div class="searchInvoiceNo">
+                <div class="form-group mr-r1" *ngIf="isMobileScreen">
+                    <div class="search-invoice-no">
                         <label class="d-block">Search Invoice No.</label>
                         <div class="input-group">
                             <input type="text" placeholder="Search Invoice No." class="w100" [formControl]="invoiceNumberInput"
@@ -133,8 +131,8 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                         </div>
                     </div>
                 </div>
-                <div class="form-group mrR1" *ngIf="isMobileScreen">
-                    <div class="searchCustomerNo">
+                <div class="form-group mr-r1" *ngIf="isMobileScreen">
+                    <div class="search-customer-no">
                         <div class="input-container">
                             <label class="d-block">Search Customer Name</label>
                             <input type="text" placeholder="Search Customer Name" class="w100" name="customerName"
@@ -144,7 +142,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                     </div>
                 </div>
 
-                <div class="form-group mrR1">
+                <div class="form-group mr-r1">
                     <label class="d-block">&nbsp;</label>
                     <button class="btn btn-success btn-sm">Search</button>
                     <a class="cp" href="javascript: void 0">
@@ -154,9 +152,8 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                 </div>
             </div>
             <div class="d-flex mb-2">
-                <div style="height: 30px;" *ngIf="selectedItems.length < 0">
-                    <div class="btn-group" dropdown triggers="mouseover" #dp="bs-dropdown" (mouseleave)="dp.hide()"
-                        style="margin-bottom: 10px;display:inline-block !important;">
+                <div class="more-dropdown" *ngIf="selectedItems.length < 0">
+                    <div class="btn-group d-inline-block mr-b1" dropdown triggers="mouseover" #dp="bs-dropdown" (mouseleave)="dp.hide()">
 
                         <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                             aria-controls="dropdown-basic">
@@ -164,8 +161,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
                             <span class="caret"></span>
                         </button>
 
-                        <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic"
-                            style="right: -53px !important;">
+                        <ul *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
 
                             <li role="menuitem">
                                 <a class="dropdown-item cp" href="javascript:void(0)">Bulk Note</a>
@@ -207,7 +203,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
     <div class="table-responsive">
         <table class="table basic giddh-table table-bordered on-mobile-view">
 
-            <thead class="t-h-bg1">
+            <thead class="thead-background1">
                 <tr>
 
                     <!-- <th width="4%" *ngIf="selectedItems.length > 0">
@@ -318,7 +314,7 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
 
                     <!-- <td *ngIf="hoveredItemForAction === col.uniqueName || col.isSelected || selectedItems.length > 0"
                         data-title="#">
-                        <div class="mh18_img justify-content-sm" style="justify-content: center;display: flex">
+                        <div class="check-image d-flex justify-content-center">
                             <img *ngIf="!col?.isSelected" src="assets/images/unchecked.png"
                                 (click)="toggleItem(col, true)" />
                             <img *ngIf="col?.isSelected" src="assets/images/checked.png"
@@ -347,8 +343,8 @@ <h4 class="modal-title bg pull-left">Search here...</h4>
         </table>
     </div>
 
-    <div class="paginationWrapper" *ngIf="(recurringData$ | async)?.totalItems > 20">
-        <div class="alC">
+    <div class="pagination-wrapper" *ngIf="(recurringData$ | async)?.totalItems > 20">
+        <div class="text-center">
             <pagination [maxSize]="5" [totalItems]="(recurringData$ | async)?.totalItems" [itemsPerPage]="20"
                 (pageChanged)="pageChanged($event)" class="pagination-sm" [boundaryLinks]="true" [rotate]="false">
             </pagination>
@@ -385,15 +381,15 @@ <h1>No Recurring Vouchers Found!</h1>
 <ng-template #sortTemplate let-column="column">
 
     <div class="icon-sort-asc " *ngIf="filter.sortBy !== column" (click)="sortButtonClicked('asc', column)"
-        [ngClass]="{'activeTextColor': filter.sortBy === column && filter.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': filter.sortBy === column && filter.sort === 'asc'}"></div>
 
     <div class="icon-sort-asc " *ngIf="filter.sortBy === column && filter.sort === 'asc'"
         (click)="sortButtonClicked('desc', column)"
-        [ngClass]="{'activeTextColor': filter.sortBy === column && filter.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': filter.sortBy === column && filter.sort === 'asc'}"></div>
 
     <div class="icon-sort-dsc " *ngIf="filter.sortBy === column && filter.sort === 'desc'"
         (click)="sortButtonClicked('asc', column)"
-        [ngClass]="{'activeTextColor': filter.sortBy === column && filter.sort === 'desc'}"></div>
+        [ngClass]="{'active-text-color': filter.sortBy === column && filter.sort === 'desc'}"></div>
 
 </ng-template>
 <!-- endregion -->
diff --git a/apps/web-giddh/src/app/invoice/recurring/recurring.component.scss b/apps/web-giddh/src/app/invoice/recurring/recurring.component.scss
index bc21cc60bbf..d47f479a00a 100644
--- a/apps/web-giddh/src/app/invoice/recurring/recurring.component.scss
+++ b/apps/web-giddh/src/app/invoice/recurring/recurring.component.scss
@@ -15,8 +15,8 @@
     font-size: 18px;
     border: 1px solid $gainsboro;
     border-radius: 2px;
-    color: gray;
-    background: #fff;
+    color: $gray;
+    background: $white;
     align-items: center;
     justify-content: center;
 }
@@ -48,7 +48,7 @@
     padding: 11px;
     padding-right: 40px;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
 .td-search-box .input-container i {
@@ -61,16 +61,20 @@
     flex: 1 1 auto;
 }
 
+.list-item{
+    border-bottom: 1px solid $gainsboro !important;
+}
+
 .d-flex {
     display: flex;
 }
 
-.activeTextColor {
+.active-text-color {
     color: $deep-sky-blue !important;
 }
 
 .basic > thead > tr > th {
-    border-right: 1px solid #c6c4c4;
+    border-right: 1px solid $gainsboro;
 }
 .icon-pointer {
     margin-left: 6px;
@@ -84,7 +88,7 @@
     color: $deep-sky-blue;
 }
 
-.mh18_img img {
+.check-image img {
     max-height: 20px;
     cursor: pointer;
 }
@@ -105,8 +109,16 @@
     align-items: center;
 }
 .btn-link-2 {
-    color: #1c1c1c;
+    color: $nero;
 }
+
+.more-dropdown{
+    height: 30px !important;
+    .dropdown-menu{
+        right: -53px !important;
+    }
+}
+
 .search-invoice-filed {
     display: none;
 }
@@ -117,6 +129,11 @@
         right: -53px !important;
     }
 }
+
+.search-invoice-filed {
+    display: none;
+}
+
 .giddh-table{
     td{
         white-space: normal !important;
@@ -189,17 +206,17 @@
         background: transparent;
         border: none;
     }
-    .input-grp-dateRangePicker.form-inline .form-group {
+    .input-grp-date-range-picker.form-inline .form-group {
         display: inline-block;
         width: 49%;
         margin-bottom: 5px;
     }
-    .input-grp-dateRangePicker .form-group .input-group,
-    .input-grp-dateRangePicker .form-group button {
+    .input-grp-date-range-picker .form-group .input-group,
+    .input-grp-date-range-picker .form-group button {
         width: 100%;
         display: block;
     }
-    .input-grp-dateRangePicker.form-inline .form-group:nth-child(2n) {
+    .input-grp-date-range-picker.form-inline .form-group:nth-child(2n) {
         margin-right: 0 !important;
     }
     .search-invoice-filed {
@@ -207,14 +224,14 @@
     }
 }
 @media (max-width: 530px) {
-    .input-grp-dateRangePicker.form-inline .form-group {
+    .input-grp-date-range-picker.form-inline .form-group {
         display: inline-block;
         width: 48.5%;
         margin-bottom: 5px;
     }
 }
 @media (max-width: 375px) {
-    .input-grp-dateRangePicker.form-inline .form-group {
+    .input-grp-date-range-picker.form-inline .form-group {
         display: inline-block;
         width: 48.2%;
         margin-bottom: 5px;
diff --git a/apps/web-giddh/src/app/invoice/settings/invoice.setting.component.scss b/apps/web-giddh/src/app/invoice/settings/invoice.setting.component.scss
index 522596f43c9..da88488cce1 100644
--- a/apps/web-giddh/src/app/invoice/settings/invoice.setting.component.scss
+++ b/apps/web-giddh/src/app/invoice/settings/invoice.setting.component.scss
@@ -1,11 +1,11 @@
 @import '../../../assets/css/color.scss';
-.webookList li {
+.webook-list li {
     list-style: none;
     margin-bottom: 7px;
     position: relative;
 }
 
-.webookList li > div > label {
+.webook-list li > div > label {
     position: absolute;
     bottom: 7px;
 }
@@ -14,27 +14,27 @@
     font-size: 14px;
 } */
 
-.lh34 {
+.lh-34 {
     line-height: 34px;
 }
 
-.lh49 {
+.lh-49 {
     line-height: 49px;
 }
 
 .icon-estimate .path1:before {
     content: "\e900";
-    color: #ffceb1;
+    color: $skin-tone;
 }
 
-.genral-tab h4,
+.general-tab h4,
 .email-tab h4,
 .estimate-tab h4 {
     padding-bottom: 10px;
     margin-bottom: 15px;
 }
 
-.genral-tab,
+.general-tab,
 .email-tab,
 .estimate-tab {
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
@@ -45,7 +45,7 @@
 }
 
 h4 > span {
-    color: #939292 !important;
+    color: $nobel !important;
     font-size: 12px !important;
 }
 
@@ -53,13 +53,13 @@ h4 > span {
     flex: initial !important;
 }
 
-.estimateProforma {
+.estimate-proforma {
     width: 100%;
     max-width: 270px;
     display: inline-flex;
 }
 
-.headingName input[type="checkbox"] {
+.heading-name input[type="checkbox"] {
     left: 10px;
 }
 
@@ -70,7 +70,7 @@ h4 > span {
 }
 
 .default-expiry span,
-.sendAlert span {
+.send-alert span {
     vertical-align: middle;
     padding-left: 5px;
     line-height: 2.4;
@@ -82,27 +82,27 @@ input.form-control.send-alert {
     display: inline;
 }
 
-.sendAlert .form-control {
+.send-alert .form-control {
     position: static;
     float: none;
     width: auto;
 }
 
-.sendAlert .send-alert {
+.send-alert .send-alert {
     width: 100px;
     text-align: right;
 }
 
-.sendAlert a {
+.send-alert a {
     padding-left: 5px;
-    color: #0c8fe6;
+    color: $primary;
 }
 
 .p-0 {
     padding: 0px !important;
 }
 
-.nextStepEstimate {
+.next-step-estimate {
     margin-bottom: 10px;
 }
 
@@ -124,7 +124,7 @@ input.form-control.send-alert {
     }
 }
 
-.initialnumber {
+.initial-number {
     width: 70px;
     margin: 0 15px;
 }
@@ -133,7 +133,7 @@ input.form-control.send-alert {
     line-height: 2.2;
 }
 
-.estimationCheck {
+.estimation-check {
     top: 7px;
 }
 
@@ -146,7 +146,7 @@ span.viasocket {
 }
 
 span.viasocket a {
-    color: #c6c6c6;
+    color: $silver;
 }
 
 .invoice-lock-date {
@@ -162,7 +162,7 @@ span.viasocket a {
     position: absolute;
     right: 10px;
     top: 25%;
-    color: #666666;
+    color: $dark-gray;
     font-size: 16px;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/settings/invoice.settings.component.html b/apps/web-giddh/src/app/invoice/settings/invoice.settings.component.html
index 0dc07c60f6d..5174ca5d6cb 100644
--- a/apps/web-giddh/src/app/invoice/settings/invoice.settings.component.html
+++ b/apps/web-giddh/src/app/invoice/settings/invoice.settings.component.html
@@ -1,6 +1,6 @@
 <section id="invoice-setting">
 
-    <tabset class="tab-integraton">
+    <tabset class="tab-integration">
 
         <!-- region general tab-->
         <tab>
@@ -9,14 +9,14 @@
                 <span class="icon-chat2"></span> General
             </ng-template>
 
-            <div class="genral-tab single-tab-block">
+            <div class="general-tab single-tab-block">
 
                 <div class="box clearfix">
 
                     <form class="row" autocomplete="off">
 
                         <div class="col-sm-12">
-                            <h4 class="clearfix bdrB">General <span>(These settings will be applicable on Estimates,
+                            <h4 class="clearfix bd-rb">General <span>(These settings will be applicable on Estimates,
                                     Proforma and
                                     Invoices) </span>
                             </h4>
@@ -173,7 +173,7 @@ <h4 class="clearfix bdrB">General <span>(These settings will be applicable on Es
 
                 <div class="box clearfix mb-2">
 
-                    <h4 class="clearfix bdrB">Email/SMS <span>(These settings will be applicable on Estimates, Proforma
+                    <h4 class="clearfix bd-rb">Email/SMS <span>(These settings will be applicable on Estimates, Proforma
                             and
                             Invoices)</span>
                     </h4>
@@ -182,7 +182,7 @@ <h4 class="clearfix bdrB">Email/SMS <span>(These settings will be applicable on
 
                         <div class="row">
 
-                            <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>From Email</label></div>
+                            <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>From Email</label></div>
 
                             <div class="col-sm-12 col-md-12 col-lg-9">
 
@@ -205,7 +205,7 @@ <h4 class="clearfix bdrB">Email/SMS <span>(These settings will be applicable on
 
                                     <div class="col-md-6 col-sm-12 row pl-0">
                                         <div class="btn-wrapper d-flex align-items-center justify-content-center">
-                                            <button class="btn btn-success ml-15 mr-15" (click)="verfiyEmail(invoiceSetting.email)" [disabled]="!isEmailChanged && (!invoiceSetting.email || invoiceSetting.email.length < 4)" *ngIf="!invoiceSetting.emailVerified">
+                                            <button class="btn btn-success mr-l15 mr-r15" (click)="verfiyEmail(invoiceSetting.email)" [disabled]="!isEmailChanged && (!invoiceSetting.email || invoiceSetting.email.length < 4)" *ngIf="!invoiceSetting.emailVerified">
                                                 Verify
                                             </button>
                                             <span *ngIf="invoiceSetting.emailVerified" class="verified-text">Verified</span>
@@ -232,7 +232,7 @@ <h4 class="clearfix bdrB">Email/SMS <span>(These settings will be applicable on
                                 <label>Send email through Gmail</label>
                             </div>
 
-                            <div class="col-lg-9 col-md-12 col-sm-12 form-group" style="display: flex;align-items: center">
+                            <div class="col-lg-9 col-md-12 col-sm-12 form-group d-flex align-items-center">
                                 <input type="checkbox" [(ngModel)]="companyEmailSettings.sendThroughGmail" name="sendThroughGmail" [disabled]="!isGmailIntegrated" class="hide-on-mobile" />
 
                                 <span class="ml-1 integrated-email" *ngIf="!isGmailIntegrated">
@@ -262,19 +262,19 @@ <h4 class="clearfix bdrB">Email/SMS <span>(These settings will be applicable on
 
                 <div class="box clearfix mb-2">
 
-                    <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
+                    <h4 class="clearfix bd-rb">Estimate/Quotation <span></span></h4>
 
                     <div class="clearfix">
 
-                        <div class="row headingName">
-                            <div class="col-sm-12 col-md-12 col-lg-3  lh34"><label>Heading Name<span
+                        <div class="row heading-name">
+                            <div class="col-sm-12 col-md-12 col-lg-3  lh-34"><label>Heading Name<span
                                         class="red-text">*</span></label></div>
 
                             <div class="col-sm-12 col-md-12 col-lg-9">
-                                <div class="">
-                                    <div class="">
+                                <div>
+                                    <div>
                                         <div class=" form-group">
-                                            <div class="estimateProforma" [ngClass]="{'input-group': true}">
+                                            <div class="estimate-proforma" [ngClass]="{'input-group': true}">
                                                 <input type="text" class="form-control" [(ngModel)]="estimateSetting.headerName" placeholder="Eg. Estimate/Quotation/Proforma" name="estimateHeaderName" />
                                             </div>
                                             <!--                                            <input type="checkbox" name="estimate-checkbox" />-->
@@ -288,14 +288,14 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
 
                         <div class="row">
 
-                            <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>Default expiry days</label></div>
+                            <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>Default expiry days</label></div>
 
                             <div class="col-sm-12 col-md-12 col-lg-3">
 
                                 <div class="default-expiry">
-                                    <div class="">
+                                    <div>
                                         <div class=" form-group">
-                                            <div class="" [ngClass]="{'input-group': true}">
+                                            <div [ngClass]="{'input-group': true}">
                                                 <input type="tel" class="form-control flex-initial" [(ngModel)]="estimateSetting.duePeriod" maxlength="3" placeholder="00" decimalDigitsDirective name="estimate-default-expiry" />
                                                 <span> Days </span>
 
@@ -310,18 +310,18 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
 
                         <!--will use in v2 -->
                         <!--                      <div class="row">-->
-                        <!--                        <div class="col-xs-5 lh34"><label>Send alert</label></div>-->
+                        <!--                        <div class="col-xs-5 lh-34"><label>Send alert</label></div>-->
                         <!--                        <div class="col-xs-7">-->
 
-                        <!--                          <div class="row sendAlert">-->
-                        <!--                            <ul class="webookList form-group">-->
+                        <!--                          <div class="row send-alert">-->
+                        <!--                            <ul class="webook-list form-group">-->
                         <!--                              <li *ngFor="let webhook of estimateWebhook; let i = index" class="clearfix">-->
                         <!--                                <div  [ngClass]="{'input-group': true}">-->
 
                         <!--                                  <input type="text" class="form-control send-alert" name='alertDuedate_+{{i}}' [(ngModel)]='webhook.triggerAt' (ngModelChange)="checkDueDays(webhook.triggerAt, i, 'alpha')" (blur)="checkDueDays(webhook.triggerAt, i, 'length')" [disabled]='webhook.uniqueName' />-->
                         <!--                                  <span> Days </span>-->
 
-                        <!--                                  <div class="d-inline-flex pos-rel">-->
+                        <!--                                  <div class="d-inline-flex position-relative">-->
                         <!--                                    <input type="text" class="form-control" name='webhookUrl_+{{i}}' [(ngModel)]='webhook.url' [disabled]='webhook.uniqueName' />-->
                         <!--                                    <span class="viasocket"><a href="#">viasocket.com</a></span>-->
                         <!--                                  </div>-->
@@ -334,24 +334,24 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
                         <!--                        </div>-->
                         <!--                      </div>-->
 
-                        <div class="row nextStepEstimate">
+                        <div class="row next-step-estimate">
 
-                            <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>Next step to Estimate<span
+                            <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>Next step to Estimate<span
                                         class="red-text">*</span></label>
                             </div>
 
                             <div class="col-sm-12 col-md-12 col-lg-12">
 
-                                <div class="select-estimate mr-3">
+                                <div class="select-estimate mr-r3">
 
                                     <div class="col-md-12 col-xs-12 p-0">
-                                        <span class="pd0 mrR3">
-                                            <input id="radio-5" class="radio-custom cp ml0" name="signatureType" type="radio" [(ngModel)]="estimateSetting.nextStepToEstimate" [value]="'salesorder'" >
+                                        <span class="p-0 mr-r3">
+                                            <input id="radio-5" class="radio-custom cp ml-0" name="signatureType" type="radio" [(ngModel)]="estimateSetting.nextStepToEstimate" [value]="'salesorder'" >
                                             <label for="radio-5" class="radio-custom-label">Proforma</label>
                                         </span>
 
-                                        <span class="pd0 mrR3">
-                                            <input id="radio-6" class="radio-custom cp ml0" name="signatureType" type="radio" [(ngModel)]="estimateSetting.nextStepToEstimate" [value]="'invoice'">
+                                        <span class="p-0 mr-r3">
+                                            <input id="radio-6" class="radio-custom cp ml-0" name="signatureType" type="radio" [(ngModel)]="estimateSetting.nextStepToEstimate" [value]="'invoice'">
                                             <label for="radio-6" class="radio-custom-label">Invoice</label>
                                         </span>
 
@@ -361,7 +361,7 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
                             </div>
                         </div>
 
-                        <div class="clearfix  pd-t1">
+                        <div class="clearfix pd-t1">
 
                             <div class="row">
 
@@ -377,7 +377,7 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
 
                         </div>
 
-                        <div class="clearfix  pd-t1">
+                        <div class="clearfix pd-t1">
                             <div class="row">
                                 <div class="col-sm-12 col-md-12 col-lg-3">
                                     <input type="checkbox" [(ngModel)]="estimateSetting.autoMail" name="estimateAutomail" class="show-on-mobile" /> <label>Auto mail when
@@ -410,13 +410,13 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
                         <!--                                <div class="col-xs-5"><label>Custom Estimation</label></div>-->
                         <!--                                <div class="col-xs-7 p-0">-->
                         <!--                                    <div class="form-group clearfix ">-->
-                        <!--                                        <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left d-inline-flex estimationCheck" name="customInvoice" />-->
+                        <!--                                        <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left d-inline-flex estimation-check" name="customInvoice" />-->
                         <!--                                        <div class=" d-inline-flex custom-estimation " *ngIf="invoiceSetting.useCustomInvoiceNumber">-->
-                        <!--                                            <div class="d-inline-flex pos-rel">-->
+                        <!--                                            <div class="d-inline-flex position-relative">-->
                         <!--                                                <label>Initial No.</label>-->
-                        <!--                                                <input type="text" class="form-control text-right initialnumber" name="initialNumber" [(ngModel)]="invoiceSetting.initialInvoiceNumber">-->
+                        <!--                                                <input type="text" class="form-control text-right initial-number" name="initialNumber" [(ngModel)]="invoiceSetting.initialInvoiceNumber">-->
                         <!--                                            </div>-->
-                        <!--                                            <div class="d-inline-flex pos-rel">-->
+                        <!--                                            <div class="d-inline-flex position-relative">-->
                         <!--                                                <label style="right:0px;">Prefix</label>-->
                         <!--                                                <input type="text" class="form-control text-right" name="prefixNumber" [(ngModel)]="invoiceSetting.invoiceNumberPrefix">-->
                         <!--                                            </div>-->
@@ -444,18 +444,18 @@ <h4 class="clearfix bdrB">Estimate/Quotation <span></span></h4>
 
                 <div class="box clearfix mb-2">
 
-                    <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
+                    <h4 class="clearfix bd-rb">Proforma Invoice <span></span></h4>
 
                     <div class="clearfix">
 
-                        <div class="row headingName">
-                            <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>Heading Name<span
+                        <div class="row heading-name">
+                            <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>Heading Name<span
                                         class="red-text">*</span></label></div>
                             <div class="col-sm-12 col-md-12 col-lg-9">
-                                <div class="">
-                                    <div class="">
+                                <div>
+                                    <div>
                                         <div class=" form-group">
-                                            <div class="estimateProforma" [ngClass]="{'input-group': true}">
+                                            <div class="estimate-proforma" [ngClass]="{'input-group': true}">
                                                 <input type="text" class="form-control" placeholder="Eg. Estimate/Quotation/Proforma" name="proformaHeaderName" [(ngModel)]="proformaSetting.headerName" />
 
                                             </div>
@@ -468,12 +468,12 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
                         </div>
 
                         <div class="row">
-                            <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>Default expiry days</label></div>
+                            <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>Default expiry days</label></div>
                             <div class="col-sm-12 col-md-12 col-lg-9">
-                                <div class=" default-expiry">
-                                    <div class="">
-                                        <div class=" form-group">
-                                            <div class="" [ngClass]="{'input-group': true}">
+                                <div class="default-expiry">
+                                    <div>
+                                        <div class="form-group">
+                                            <div [ngClass]="{'input-group': true}">
                                                 <input type="tel" class="form-control flex-initial" placeholder="00" name="proformaDuePeriod" decimalDigitsDirective maxlength="3" [(ngModel)]="proformaSetting.duePeriod" />
                                                 <span> Days </span>
 
@@ -486,18 +486,18 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
                         </div>
                         <!--will use in v2 -->
                         <!--                        <div class="row">-->
-                        <!--                            <div class="col-xs-5 lh34"><label>Send alert</label></div>-->
+                        <!--                            <div class="col-xs-5 lh-34"><label>Send alert</label></div>-->
                         <!--                            <div class="col-xs-7">-->
 
-                        <!--                              <div class="row sendAlert">-->
-                        <!--                                <ul class="webookList form-group">-->
+                        <!--                              <div class="row send-alert">-->
+                        <!--                                <ul class="webook-list form-group">-->
                         <!--                                  <li *ngFor="let webhook of proformaWebhook; let i = index" class="clearfix">-->
                         <!--                                    <div  [ngClass]="{'input-group': true}">-->
 
                         <!--                                      <input type="text" class="form-control send-alert" name='alertDuedate_+{{i}}' [(ngModel)]='webhook.triggerAt' (ngModelChange)="checkDueDays(webhook.triggerAt, i, 'alpha')" (blur)="checkDueDays(webhook.triggerAt, i, 'length')" [disabled]='webhook.uniqueName' />-->
                         <!--                                      <span> Days </span>-->
 
-                        <!--                                      <div class="d-inline-flex pos-rel">-->
+                        <!--                                      <div class="d-inline-flex position-relative">-->
                         <!--                                        <input type="text" class="form-control" name='webhookUrl_+{{i}}' [(ngModel)]='webhook.url' [disabled]='webhook.uniqueName' />-->
                         <!--                                        <span class="viasocket"><a href="#">viasocket.com</a></span>-->
                         <!--                                      </div>-->
@@ -522,7 +522,7 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
                             </div>
                         </div>
 
-                        <div class="clearfix  pd-t1">
+                        <div class="clearfix pd-t1">
                             <div class="row">
                                 <div class="col-sm-12 col-md-12 col-lg-3">
                                     <input type="checkbox" [(ngModel)]="proformaSetting.autoMail" name="proformaAutomail" class="show-on-mobile" />
@@ -542,7 +542,7 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
                                 <div class="col-sm-12 col-md-12 col-lg-9">
                                     <div class="form-group clearfix">
                                         <input type="checkbox" [(ngModel)]="proformaSetting.sendSms" class="pull-left" name="proformaCreatePaymentEntry" class="hide-on-mobile" />
-                                        <!-- <div class="mr-t1 max250 mrT3" *ngIf="invoiceSetting.sendInvLinkOnSms">
+                                        <!-- <div class="mr-t1 max250 mr-t3" *ngIf="invoiceSetting.sendInvLinkOnSms">
     <textarea [(ngModel)]="invoiceSetting.smsContent" class="pull-left form-control" name="sendInvLinkOnSms" rows="3"></textarea>
 </div> -->
                                     </div>
@@ -556,7 +556,7 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
                         <!--                                <div class="col-xs-5"><label>Custom Proforma#</label></div>-->
                         <!--                                <div class="col-xs-7 p-0">-->
                         <!--                                    <div class="form-group clearfix ">-->
-                        <!--                                        <input type="checkbox" class="pull-left d-inline-flex estimationCheck" name="customInvoice" />-->
+                        <!--                                        <input type="checkbox" class="pull-left d-inline-flex estimation-check" name="customInvoice" />-->
 
                         <!--                                    </div>-->
                         <!--                                </div>-->
@@ -583,18 +583,18 @@ <h4 class="clearfix bdrB">Proforma Invoice <span></span></h4>
             <div class="estimate-tab invoice-tab single-tab-block">
 
                 <div class="box clearfix mb-2">
-                    <h4 class="clearfix bdrB">Invoice <span></span></h4>
+                    <h4 class="clearfix bd-rb">Invoice <span></span></h4>
                     <div class="clearfix">
 
-                        <!--                        <div class="row headingName">-->
+                        <!--                        <div class="row heading-name">-->
 
-                        <!--                            <div class="col-xs-5 lh34"><label>Heading Name</label></div>-->
+                        <!--                            <div class="col-xs-5 lh-34"><label>Heading Name</label></div>-->
 
                         <!--                            <div class="col-xs-7">-->
                         <!--                                <div class="row">-->
                         <!--                                    <div class="">-->
                         <!--                                        <div class=" form-group">-->
-                        <!--                                            <div class="estimateProforma" [ngClass]="{'input-group': true}">-->
+                        <!--                                            <div class="estimate-proforma" [ngClass]="{'input-group': true}">-->
                         <!--                                                <input type="text" class="form-control" [(ngModel)]="invoiceSetting.headerName" placeholder="Eg. Estimate/Quotation/Proforma" name="estimateProforma" />-->
 
                         <!--                                            </div>-->
@@ -608,12 +608,12 @@ <h4 class="clearfix bdrB">Invoice <span></span></h4>
 
                         <div class="row">
 
-                            <div class="col-xs-12 col-sm-12 col-lg-3 lh34"><label>Default expiry days</label></div>
+                            <div class="col-xs-12 col-sm-12 col-lg-3 lh-34"><label>Default expiry days</label></div>
                             <div class="col-xs-12 col-sm-12 col-lg-9">
                                 <div class="default-expiry">
                                     <div>
                                         <div class="form-group">
-                                            <div class="" [ngClass]="{'input-group': true}">
+                                            <div [ngClass]="{'input-group': true}">
                                                 <input type="tel" class="form-control flex-initial" placeholder="00" maxlength="3" decimalDigitsDirective [(ngModel)]="invoiceSetting.duePeriod" name="default-expiry" />
                                                 <span> Days </span>
 
@@ -626,17 +626,17 @@ <h4 class="clearfix bdrB">Invoice <span></span></h4>
                         </div>
                         <!--will use in v2 -->
                         <!--                        <div class="row">-->
-                        <!--                            <div class="col-xs-5 lh34"><label>Send alert</label></div>-->
+                        <!--                            <div class="col-xs-5 lh-34"><label>Send alert</label></div>-->
                         <!--                            <div class="col-xs-7">-->
-                        <!--                                <div class="row sendAlert">-->
-                        <!--                                    <ul class="webookList form-group">-->
+                        <!--                                <div class="row send-alert">-->
+                        <!--                                    <ul class="webook-list form-group">-->
                         <!--                                      <li *ngFor="let webhook of invoiceWebhook; let i = index" class="clearfix">-->
                         <!--                                        <div  [ngClass]="{'input-group': true}">-->
 
                         <!--                                          <input type="text" class="form-control send-alert" name='alertDuedate_+{{i}}' [(ngModel)]='webhook.triggerAt' (ngModelChange)="checkDueDays(webhook.triggerAt, i, 'alpha')" (blur)="checkDueDays(webhook.triggerAt, i, 'length')" [disabled]='webhook.uniqueName' />-->
                         <!--                                          <span> Days </span>-->
 
-                        <!--                                          <div class="d-inline-flex pos-rel">-->
+                        <!--                                          <div class="d-inline-flex position-relative">-->
                         <!--                                            <input type="text" class="form-control" name='webhookUrl_+{{i}}' [(ngModel)]='webhook.url' [disabled]='webhook.uniqueName' />-->
                         <!--                                            <span class="viasocket"><a href="#">viasocket.com</a></span>-->
                         <!--                                          </div>-->
@@ -653,11 +653,11 @@ <h4 class="clearfix bdrB">Invoice <span></span></h4>
 
                             <div class="row">
                                 <div class="col-sm-12 col-md-12 col-lg-3">
-                                    <label style="vertical-align:middle">Invoice Lock Date</label>
+                                    <label class="lock-date-label">Invoice Lock Date</label>
                                 </div>
 
                                 <div class="col-sm-12 col-md-9">
-                                    <div class="form-group date-pickerInvoice invoice-lock-date  mb-0">
+                                    <div class="form-group date-picker-invoice invoice-lock-date  mb-0">
                                         <giddh-datepicker name="invoiceLockDate" [(ngModel)]="invoiceSetting.lockDate"></giddh-datepicker>
                                     </div>
                                 </div>
@@ -730,21 +730,21 @@ <h4 class="clearfix bdrB">Invoice <span></span></h4>
                         <div class="clearfix pd-t1">
                             <div class="row">
                                 <div class="col-sm-12 col-md-12 col-lg-3">
-                                    <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left estimationCheck show-on-mobile" name="customInvoice" />
+                                    <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left estimation-check show-on-mobile" name="customInvoice" />
                                     <label>Custom Invoice#</label></div>
                                 <div class="col-sm-12 col-md-9">
                                     <div class="form-group clearfix ">
-                                        <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left estimationCheck hide-on-mobile" name="customInvoice" />
+                                        <input type="checkbox" [(ngModel)]="invoiceSetting.useCustomInvoiceNumber" class="pull-left estimation-check hide-on-mobile" name="customInvoice" />
                                         <div class="d-inline-flex custom-estimation" *ngIf="invoiceSetting.useCustomInvoiceNumber">
-                                            <div class="d-inline-flex pos-rel">
+                                            <div class="d-inline-flex position-relative">
                                                 <label>Branch Prefix</label>
                                                 <input type="text" class="form-control" name="branchPrefix" [(ngModel)]="invoiceSetting.branchInvoiceNumberPrefix">
                                             </div>
-                                            <div class="d-inline-flex pos-rel">
+                                            <div class="d-inline-flex position-relative">
                                                 <label>Sub Prefix</label>
                                                 <input type="text" class="form-control" name="prefixNumber" [(ngModel)]="invoiceSetting.invoiceNumberPrefix">
                                             </div>
-                                            <div class="d-inline-flex pos-rel">
+                                            <div class="d-inline-flex position-relative">
                                                 <label>Initial No.</label>
                                                 <input type="text" class="form-control" name="initialNumber" [(ngModel)]="invoiceSetting.initialInvoiceNumber">
                                             </div>
@@ -782,7 +782,7 @@ <h4 class="clearfix bdrB">Invoice <span></span></h4>
 <ng-template #buttonsSection>
 
     <div class="btn-group mr-t2" role="group" aria-label="Basic example">
-        <button type="button" class="btn btn-success mrR1" (click)="UpdateForm()">Save</button>
+        <button type="button" class="btn btn-success mr-r1" (click)="UpdateForm()">Save</button>
         <button type="button" class="btn btn-cancel" (click)="resetForm()">Cancel</button>
     </div>
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/edit-template.component.scss b/apps/web-giddh/src/app/invoice/templates/edit-template/edit-template.component.scss
index fc8606c9720..58cd3d44e30 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/edit-template.component.scss
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/edit-template.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../assets/css/color.scss";
 .template-grid {
-    background: #fff;
+    background: $white;
     max-width: 255px;
     width: 100%;
     padding: 20px;
@@ -17,22 +17,22 @@
     font-size: 18px;
 }
 
-.template_action {
+.template-action {
     overflow: hidden;
     text-align: center;
     padding: 16px 0 0;
     margin-top: 50px;
 }
 
-.template_meta {
+.template-meta {
     padding: 15px 0 0;
 }
 
 @import "../../../../../../web-giddh/src/assets/css/color.scss";
 .btn-warning {
-    color: #fff;
-    background-color: #ec971f;
-    border-color: #d58512;
+    color: $white;
+    background-color: $bright-yellow;
+    border-color: $bright-yellow;
 }
 
 .more-btn-dropdown {
@@ -41,7 +41,7 @@
     border-radius: 0 !important;
     font-size: 14px;
     padding: 5px 10px;
-    background: rgb(255, 255, 255) !important;
+    background: $white !important;
     width: 160px;
     text-align: left;
     display: flex;
@@ -53,10 +53,10 @@
 
 .dropdown-menu > li > a:hover {
     color: $chetwode-blue;
-    background: #e5e5e5;
+    background: $whisper;
 }
 .badge {
-    background: #eaeaea;
+    background: $whisper-color;
     color: $charcoal;
     font-family: opensans-regular;
     border: none;
@@ -65,16 +65,16 @@
     border-radius: 50px;
 }
 .badge.btn-success:hover {
-    background: #ddd;
+    background: $gainsboro-light;
     color: $charcoal;
 }
 .badge.btn-sky-blue,
 .badge.btn-sky-blue:hover {
-    background: #313a97 !important;
+    background: $jacksons-purple !important;
     border: none !important;
-    color: #fff !important;
+    color: $white !important;
 }
-.templteGrid-container {
+.template-grid-container {
     padding: 0 15px;
 }
 .full-modal{
@@ -82,9 +82,17 @@
     margin:0;
     max-width:100% !important;
 }
+.select-design{
+    height: 44px;
+}
+
+.border-radius-none{
+    border-radius:0px !important; 
+}
+
 @media (max-width: 414px) {
     .template-grid {
-        background: #fafafa;
+        background: $gray-95;
         max-width: 100%;
     }
 }
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.html
index 25f59d3ffa3..9975df378e3 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.html
@@ -1,11 +1,10 @@
-<div class="templteGrid-container">
+<div class="template-grid-container">
     <div class="clearfix" id="template-grid-wrapper">
 
-        <label style="margin-bottom: 5px;">Select Design for</label>
+        <label class="mr-b05">Select Design for</label>
 
-        <div style="height: 44px;">
-            <div class="btn-group" dropdown triggers="mouseover" #dp="bs-dropdown"
-                style="margin-bottom: 10px;display: inline-block !important;">
+        <div class="select-design">
+            <div class="btn-group d-inline-block mr-b1" dropdown triggers="mouseover" #dp="bs-dropdown">
                 <button dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                     aria-controls="dropdown-basic">
                     {{ (voucherType === "debit note" || voucherType === "credit note") ? 'Credit/Debit Note' : voucherType | titlecase}}
@@ -26,7 +25,7 @@
 
         <div class="template-grid">
             <h3 class="text-left">Design Template</h3>
-            <small class="mrT3 text-left grey d-block">
+            <small class="mr-t3 text-left grey d-block">
                 Click to add a template from our gallery. You can customize the template title, columns,and headers in
                 line item
                 table.
@@ -37,8 +36,8 @@ <h3 class="text-left">Design Template</h3>
         <ng-container *ngFor="let template of customCreatedTemplates; let i = index">
 
             <div class="template-grid" *ngIf="template.type === 'invoice' && voucherType==='sales' ">
-                <div class="template_info text-center">
-                    <h3 class="primary_clr ellp">{{template.name}}</h3>
+                <div class="template-info text-center">
+                    <h3 class="primary-color text-ellipsis">{{template.name}}</h3>
 
                     <span *ngIf="template.isDefault" class="badge btn-sky-blue mr-t2"><i
                             class="icon-favorite-selected"></i> Default
@@ -49,7 +48,7 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
                         Default</span>
                 </div>
 
-                <div class="template_action">
+                <div class="template-action">
                     <!-- [hidden]="template.uniqueName === 'gst_template_b' || template.uniqueName === 'gst_template_c' || template.uniqueName === 'gst_template_d' || template.uniqueName === 'gst_template_e'" -->
                     <button class="btn btn-default" (click)="onPreview(template)">
                         <i class="icon-eye" tooltip="Preview" aria-hidden="true"></i>
@@ -63,8 +62,8 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
                         <i class="icon-trash" tooltip="Delete" aria-hidden="true"></i>
                     </button>
 
-                    <div class="template_meta">
-                        <small class="ellp">Created by: {{template.createdBy.name}}</small>
+                    <div class="template-meta">
+                        <small class="text-ellipsis">Created by: {{template.createdBy.name}}</small>
                     </div>
 
 
@@ -73,8 +72,8 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
 
             <ng-container *ngIf="voucherType === 'credit note' || voucherType === 'debit note'">
                 <div class="template-grid" *ngIf="template.type === 'voucher'">
-                    <div class="template_info text-center">
-                        <h3 class="primary_clr ellp">{{template.name}}</h3>
+                    <div class="template-info text-center">
+                        <h3 class="primary-color text-ellipsis">{{template.name}}</h3>
 
                         <span *ngIf="template.isDefaultForVoucher" class="badge btn-sky-blue mr-t2"><i
                                 class="icon-favorite-selected"></i> Default Template</span>
@@ -84,7 +83,7 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
                             Default</span>
                     </div>
 
-                    <div class="template_action">
+                    <div class="template-action">
                         <!-- [hidden]="template.uniqueName === 'gst_template_b' || template.uniqueName === 'gst_template_c' || template.uniqueName === 'gst_template_d' || template.uniqueName === 'gst_template_e'" -->
                         <button class="btn btn-default" (click)="onPreview(template)">
                             <i class="icon-eye" tooltip="Preview" aria-hidden="true"></i>
@@ -98,8 +97,8 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
                             <i class="icon-trash" tooltip="Delete" aria-hidden="true"></i>
                         </button>
 
-                        <div class="template_meta">
-                            <small class="ellp">Created by: {{template.createdBy.name}}</small>
+                        <div class="template-meta">
+                            <small class="text-ellipsis">Created by: {{template.createdBy.name}}</small>
                         </div>
 
 
@@ -113,30 +112,30 @@ <h3 class="primary_clr ellp">{{template.name}}</h3>
 <div bsModal #templateModal="bs-modal" class="modal fade" role="dialog" [config]="{keyboard:true}" tabindex="-1">
     <div class="modal-dialog full-modal">
         <!-- modal-liq-90 class is removed for now-->
-        <div class="modal-content" style="border-radius:0px;">
+        <div class="modal-content border-radius-none">
             <invoice-template-modal [templateSections]="currentTemplateSections" [templateId]="templateId"
                 (closeModelEvent)="onCloseTemplateModal()" [editMode]="transactionMode"></invoice-template-modal>
         </div>
     </div>
-    <div class="sticky-footer pd2">
+    <div class="sticky-footer pd-2">
         <!--<button class="btn btn-default">Preview</button>-->
-        <div class="pull-right mrR4" *ngIf="voucherType ==='sales' ">
+        <div class="pull-right mr-r4" *ngIf="voucherType ==='sales' ">
             <button *ngIf="transactionMode == 'create'" class="btn btn-success" (click)="createTemplate('invoice')">Save
             </button>
             <button *ngIf="transactionMode == 'update'" class="btn btn-success"
                 (click)="updateTemplate('invoice')">Update
                 Invoice
             </button>
-            <button class="btn btn-danger mrR4" (click)="onCloseTemplateModal()">Close</button>
+            <button class="btn btn-danger mr-r4" (click)="onCloseTemplateModal()">Close</button>
         </div>
-        <div class="pull-right mrR4" *ngIf="voucherType === 'credit note' || voucherType === 'debit note'">
+        <div class="pull-right mr-r4" *ngIf="voucherType === 'credit note' || voucherType === 'debit note'">
             <button *ngIf="transactionMode == 'create'" class="btn btn-success" (click)="createTemplate('voucher')">Save
             </button>
             <button *ngIf="transactionMode == 'update'" class="btn btn-success"
                 (click)="updateTemplate('voucher')">Update
                 Voucher
             </button>
-            <button class="btn btn-danger mrR4" (click)="onCloseTemplateModal()">Close</button>
+            <button class="btn btn-danger mr-r4" (click)="onCloseTemplateModal()">Close</button>
         </div>
     </div>
 </div>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.ts b/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.ts
index 0554c856bee..6df29e8f737 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.ts
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/edit.invoice.component.ts
@@ -719,7 +719,7 @@ export class EditInvoiceComponent implements OnInit, OnChanges, OnDestroy {
             }
         });
 
-        if (defaultTemplate.sections.footer.data.companyName) { // slogan default company on new template creation
+        if (defaultTemplate && defaultTemplate.sections && defaultTemplate.sections.footer && defaultTemplate.sections.footer.data && defaultTemplate.sections.footer.data.companyName) { // slogan default company on new template creation
             defaultTemplate.sections.footer.data.slogan.label = defaultTemplate.sections.footer.data.companyName.label;
         }
         this._invoiceUiDataService.initCustomTemplate(companyUniqueName, companies, defaultTemplate);
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.html
index 346ee4d5870..17c9f4fa791 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.html
@@ -1,8 +1,8 @@
-<div id="contentTab" class="tabcontent mr-t2 templateEditor" *ngIf="content && customTemplate && customTemplate.sections">
+<div id="contentTab" class="design-tab-content mr-t2 template-editor" *ngIf="content && customTemplate && customTemplate.sections">
     <!-- start header -->
     <div id="headerDiv" *ngIf="templateUISectionVisibility.header">
         <h2>Header</h2>
-        <div class="scrollAuto">
+        <div class="scroll-auto">
             <div class="clearfix">
                 <div *ngIf="fieldsAndVisibility.header.companyName && (customTemplate?.templateType !== 'gst_template_b' && customTemplate?.templateType !== 'gst_template_d' && customTemplate?.templateType !== 'gst_template_e')" class="form-group">
                     <input type="checkbox" [(ngModel)]="customTemplate.sections['header'].data['companyName'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null)" checked /> Company Name
@@ -24,7 +24,7 @@ <h2>Header</h2>
                 <div *ngIf="fieldsAndVisibility.header.gstin && customTemplate?.templateType !== 'gst_template_e'" class="form-group">
                     <input type="checkbox" [(ngModel)]="customTemplate.sections['header'].data['gstin'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null)" checked /> GSTIN
                 </div>
-                <div class="form-group clearfix customField" *ngIf="showGstComposition === true && (customTemplate?.templateType === 'gst_template_a' || customTemplate?.templateType === 'gst_template_e') && voucherType==='sales'">
+                <div class="form-group clearfix custom-field" *ngIf="showGstComposition === true && (customTemplate?.templateType === 'gst_template_a' || customTemplate?.templateType === 'gst_template_e') && voucherType==='sales'">
                     <input type="checkbox" name="gstCompositionLabel" [(ngModel)]="customTemplate.sections['header'].data['gstComposition'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null)" checked />
                     <span>
                         <input class="form-control" maxlength="70" type="text" name="gstComposition" placeholder="Registered under Composition Scheme" [(ngModel)]="customTemplate.sections['header'].data['gstComposition'].label" (ngModelChange)='onFieldChange(null, null, null)'>
@@ -208,7 +208,7 @@ <h3>
                     </div>
                 </div>
             </div>
-            <div class="clearfix customField mr-b2" *ngIf="customTemplate?.templateType !== 'gst_template_b' && customTemplate?.templateType !== 'gst_template_d'">
+            <div class="clearfix custom-field mr-b2" *ngIf="customTemplate?.templateType !== 'gst_template_b' && customTemplate?.templateType !== 'gst_template_d'">
                 <h3>
                     <i class="cp collapse-icons" aria-hidden="true" (click)="showCustomField = !showCustomField" [ngClass]="{'icon-minus': showCustomField, 'icon-plus': !showCustomField}"></i> Custom Field
                 </h3>
@@ -247,7 +247,7 @@ <h3>
     <div id="tableDiv" *ngIf="templateUISectionVisibility.table">
         <h2>Table</h2>
 
-        <div class="clearfix scrollAuto">
+        <div class="clearfix scroll-auto">
             <table class="table">
                 <thead>
                     <tr>
@@ -324,12 +324,12 @@ <h2>Table</h2>
                             <input type="checkbox" checked /> Tax Bifurcation
                         </div>
                         <div class="ml-3">
-                            <div class="clearfix mb-05">
-                                <input type="radio" class="radio_theme" name="tax-rate" /> Tax Rate
+                            <div class="clearfix mr-b05">
+                                <input type="radio" class="radio-theme" name="tax-rate" /> Tax Rate
                             </div>
 
                             <div class="clearfix">
-                                <input type="radio" class="radio_theme point" name="tax-rate" /> HSN/SAC
+                                <input type="radio" class="radio-theme point" name="tax-rate" /> HSN/SAC
                             </div>
                         </div>
                     </div> -->
@@ -497,13 +497,13 @@ <h2>Table</h2>
                             <input type="checkbox" [(ngModel)]="customTemplate.sections['table'].data['taxBifurcation'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null); checkedTaxBifurcation('taxRateBifurcation', 'table')" /> Tax Bifurcation
                         </div>
                         <div class="ml-3" *ngIf="customTemplate.sections['table'].data['taxBifurcation'].display">
-                            <div class="clearfix mb-05">
-                                <input type="radio" class="radio_theme" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('taxRateBifurcation','table' )" [checked]="customTemplate.sections['table'].data['taxBifurcation'].label === 'taxRateBifurcation'"
+                            <div class="clearfix mr-b05">
+                                <input type="radio" class="radio-theme" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('taxRateBifurcation','table' )" [checked]="customTemplate.sections['table'].data['taxBifurcation'].label === 'taxRateBifurcation'"
                                     [disabled]="!customTemplate.sections['table'].data['taxBifurcation'].display" /> Tax Rate
                             </div>
 
                             <div class="clearfix">
-                                <input type="radio" class="radio_theme point" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('hsnSac', 'table')" [checked]="customTemplate.sections['table'].data['taxBifurcation'].label === 'hsnSac'"
+                                <input type="radio" class="radio-theme point" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('hsnSac', 'table')" [checked]="customTemplate.sections['table'].data['taxBifurcation'].label === 'hsnSac'"
                                     [disabled]="!customTemplate.sections['table'].data['taxBifurcation'].display" /> HSN/SAC
                             </div>
                         </div>
@@ -515,7 +515,7 @@ <h2>Table</h2>
     <div id="footerDiv" *ngIf="templateUISectionVisibility.footer">
         <div class="clearfix">
             <h2>Footer</h2>
-            <div class="clearfix bdrB scrollAuto">
+            <div class="clearfix bd-rb scroll-auto">
                 <ng-container *ngIf="customTemplate?.templateType === 'gst_template_a' && voucherType==='sales'">
                     <div *ngIf="isTcsTdsApplicable" class="form-group">
                         <input type="checkbox" name="tcs" checked [(ngModel)]="customTemplate.sections['footer'].data['tcs'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null)" checked="true" /> TCS
@@ -570,12 +570,12 @@ <h2>Footer</h2>
                         <input type="checkbox" [(ngModel)]="customTemplate.sections['footer'].data['taxBifurcation'].display" (ngModelChange)="onChangeFieldVisibility(null, null, null); checkedTaxBifurcation('taxRateBifurcation', 'footer')" /> Tax Bifurcation
                     </div>
                     <div class="ml-3" *ngIf="customTemplate.sections['footer'].data['taxBifurcation'].display">
-                        <div class="clearfix mb-05">
-                            <input type="radio" class="radio_theme" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('taxRateBifurcation','footer')" [checked]="customTemplate.sections['footer'].data['taxBifurcation'].label === 'taxRateBifurcation'"
+                        <div class="clearfix mr-b05">
+                            <input type="radio" class="radio-theme" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('taxRateBifurcation','footer')" [checked]="customTemplate.sections['footer'].data['taxBifurcation'].label === 'taxRateBifurcation'"
                                 [disabled]="!customTemplate.sections['footer'].data['taxBifurcation'].display" /> Tax Rate
                         </div>
                         <div class="clearfix">
-                            <input type="radio" class="radio_theme point" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('hsnSac','footer')" [checked]="customTemplate.sections['footer'].data['taxBifurcation'].label === 'hsnSac'"
+                            <input type="radio" class="radio-theme point" name="tax-rate" (ngModelChange)='onFieldChange(null, null, null)' (change)="checkedTaxBifurcation('hsnSac','footer')" [checked]="customTemplate.sections['footer'].data['taxBifurcation'].label === 'hsnSac'"
                                 [disabled]="!customTemplate.sections['footer'].data['taxBifurcation'].display" /> HSN/SAC
                         </div>
                     </div>
@@ -614,11 +614,11 @@ <h2>Footer</h2>
                 <div class="clearfix mr-t1 row">
                     <div class="clearfix" class="col-lg-6 col-md-12">
                         <div class="mb-4px">
-                            <input type="radio" class="radio_theme" style="margin-left: 0px !important;" name="signatureType" (change)="chooseSigntureType('image')" (ngModelChange)='onFieldChange(null, null, null)' [checked]="customTemplate.sections.footer.data.imageSignature.display"
+                            <input type="radio" class="radio-theme ml-0" name="signatureType" (change)="chooseSigntureType('image')" (ngModelChange)='onFieldChange(null, null, null)' [checked]="customTemplate.sections.footer.data.imageSignature.display"
                             /> Image Signature
                         </div>
-                        <div class="form-group mrL clearfix">
-                            <span class="claerfix">
+                        <div class="form-group mr-l05 clearfix">
+                            <span class="clearfix">
                                 <label class="upload-button" for="signatureImg-edit" [hidden]="signatureImgAttached">
                                     <!--  -->
                                     <!--   -->
@@ -642,7 +642,7 @@ <h2>Footer</h2>
                     </div>
                     <div class="clearfix" class="col-lg-6 col-md-12">
                         <div>
-                            <input type="radio" class="radio_theme" name="signatureType" (change)="chooseSigntureType('slogan')" (ngModelChange)='onFieldChange(null, null, null)' [checked]="customTemplate.sections.footer.data.slogan.display" /> Slogan
+                            <input type="radio" class="radio-theme" name="signatureType" (change)="chooseSigntureType('slogan')" (ngModelChange)='onFieldChange(null, null, null)' [checked]="customTemplate.sections.footer.data.slogan.display" /> Slogan
                         </div>
                         <div class="form-group ml-3 clearfix">
                             <div>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.scss b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.scss
index d83034546bf..8e6f28380d7 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.scss
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../../../assets/css/color.scss";
 
-.templateEditor h3 i {
+.template-editor h3 i {
     margin-right: 9px;
     font-size: 22px;
 }
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.ts b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.ts
index 1bd22979e60..d74c9aea5bc 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.ts
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/content-filters/content.filters.component.ts
@@ -69,18 +69,6 @@ export class ContentFilterComponent implements OnInit, OnChanges, OnDestroy {
 
         this.sessionId$ = this.store.pipe(select(p => p.session.user.session.id), takeUntil(this.destroyed$));
         this.companyUniqueName$ = this.store.pipe(select(p => p.session.companyUniqueName), takeUntil(this.destroyed$));
-
-        this.companyUniqueName$.pipe(take(1)).subscribe(activeCompanyUniqueName => {
-            if (companies) {
-                companies.forEach(company => {
-                    if (company.uniqueName === activeCompanyUniqueName) {
-                        if (company.country === "India") {
-                            this.showGstComposition = true;
-                        }
-                    }
-                });
-            }
-        });
     }
 
     /**
@@ -89,6 +77,13 @@ export class ContentFilterComponent implements OnInit, OnChanges, OnDestroy {
      * @memberof ContentFilterComponent
      */
     public ngOnInit(): void {
+        this.store.pipe(select(state => state.session.activeCompany), take(1)).subscribe(activeCompany => {
+            if (activeCompany?.countryV2?.countryName) {
+                this.showGstComposition = activeCompany.countryV2.countryName === 'India';
+            } else {
+                this.showGstComposition = false;
+            }
+        });
         this.store.pipe(select(appState => appState.company), takeUntil(this.destroyed$)).subscribe((companyData: CurrentCompanyState) => {
             if (companyData) {
                 this.isTcsTdsApplicable = companyData.isTcsTdsApplicable;
@@ -326,10 +321,12 @@ export class ContentFilterComponent implements OnInit, OnChanges, OnDestroy {
      */
     public changeDisableQuantity(): void {
         let template = _.cloneDeep(this.customTemplate);
-        if (!template.sections.table.data.quantity.display) {
-            template.sections.table.data.totalQuantity.display = false;
-        } else {
-            template.sections.table.data.totalQuantity.display = true;
+        if(template && template.sections && template.sections.table && template.sections.table.data && template.sections.table.data.totalQuantity) {
+            if (!template.sections.table.data.quantity.display) {
+                template.sections.table.data.totalQuantity.display = false;
+            } else {
+                template.sections.table.data.totalQuantity.display = true;
+            }
         }
         this._invoiceUiDataService.setCustomTemplate(template);
     }
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.html
index 6b988c783ae..53cb3fcec3b 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.html
@@ -1,4 +1,4 @@
-<div id="design" class="tabcontent pdT2 pdB2" [hidden]="!design" [attachOutsideOnClick]="true"
+<div id="design" class="design-tab-content pd-t2 pd-b2" [hidden]="!design" [attachOutsideOnClick]="true"
     (clickOutside)="clickedOutside()" (click)="$event.stopPropagation()">
 
 
@@ -17,15 +17,15 @@
   <button type="button" class="start-upload-btn" (click)="startUpload()">
   Start Upload
 </button> {{imagePreview}} -->
-    <div class="clearfix scrollAuto">
-        <ul class="designTool">
+    <div class="clearfix scroll-auto">
+        <ul class="design-tool">
             <li [hidden]="templateUISectionVisibility.templates" (click)="onChangeVisibility('templates')">
                 <i class="ico-template"></i> <label>Change up to template</label>
             </li>
             <li [hidden]="!templateUISectionVisibility.templates">
                 <i class="ico-template"></i> <label>Change up to template</label>
                 <div class="clearfix">
-                    <ul class="templateView">
+                    <ul class="template-view">
                         <!-- {{ sampleTemplates | json}} -->
                         <ng-container *ngFor="let template of sampleTemplates">
                             <li (click)="onDesignChange('uniqueName', template.uniqueName)"
@@ -79,7 +79,7 @@
             <li [hidden]="!templateUISectionVisibility.logo">
                 <i class="ico-edit"></i> <label>Make logo edit</label>
                 <div class="clearfix mr-t1">
-                    <div class="logoTool">
+                    <div class="logo-tool">
                         <span class="logo-preview" [class.cursor-disable]="isFileUploaded">
                             <label class="upload-button" for="logo-edit" [hidden]="logoAttached">
                                 <input type="file" #fileInput accept="image/png, image/jpeg" id="logo-edit"
@@ -112,7 +112,7 @@
                                 <label for="fontL">L</label>
                             </div>
                             <div class="d-block">
-                                <a class="primary_clr" [attr.disabled]="isFileUploaded"
+                                <a class="primary-color" [attr.disabled]="isFileUploaded"
                                     [class.cursor-disable]="isFileUploaded" [hidden]="!logoAttached"
                                     (click)="toogleLogoVisibility()"><span [hidden]="showLogo">Show</span><span
                                         [hidden]="!showLogo">Hide</span> logo</a> </div>
@@ -194,9 +194,9 @@
                 <i class="ico-print"></i> <label>Edit print setting</label>
 
                 <div class="clearfix mr-t1">
-                    <div class="printTool pos-rel">
+                    <div class="print-tool position-relative">
                         <p>Page margins (in pixel)</p>
-                        <table class="table mr0">
+                        <table class="table m-0">
                             <thead>
                                 <tr>
                                     <th>Top</th>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.scss
similarity index 68%
rename from apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.css
rename to apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.scss
index b7832472d08..5e2e5f6372e 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.scss
@@ -1,92 +1,94 @@
+@import "../../../../../../assets/css/color.scss";
+
 .swatch ul {
     max-width: 260px;
 }
 
 .swatch ul li,
-.templateView li {
+.template-view li {
     cursor: pointer;
 }
 
 .swatch ul li:nth-child(1) {
-    background: #bdbdbd;
+    background: $silver;
 }
 
 .swatch ul li:nth-child(2) {
-    background: #636363;
+    background: $dark-gray;
 }
 
 .swatch ul li:nth-child(3) {
-    background: #000000;
+    background: $black;
 }
 
 .swatch ul li:nth-child(4) {
-    background: #e34818;
+    background: $cinnabar-orange;
 }
 
 .swatch ul li:nth-child(5) {
-    background: #7889a1;
+    background: $grayish-blue;
 }
 
 .swatch ul li:nth-child(6) {
-    background: #48565f;
+    background: $charcoal;
 }
 
 .swatch ul li:nth-child(7) {
-    background: #79bd58;
+    background: $bud-green;
 }
 
 .swatch ul li:nth-child(8) {
-    background: #0e909a;
+    background: $eastern-blue;
 }
 
 .swatch ul li:nth-child(9) {
-    background: #202e5a;
+    background: $cloud-burst;
 }
 
 .swatch ul li:nth-child(10) {
-    background: #96bc2d;
+    background: $atlantis;
 }
 
 .swatch ul li:nth-child(11) {
-    background: #2a651d;
+    background: $green;
 }
 
 .swatch ul li:nth-child(12) {
-    background: #004254;
+    background: $sherpa-blue;
 }
 
 .swatch ul li:nth-child(13) {
-    background: #ff8c00;
+    background: $bright-yellow;
 }
 
 .swatch ul li:nth-child(14) {
-    background: #82001d;
+    background: $burgundy;
 }
 
 .swatch ul li:nth-child(15) {
-    background: #6b1438;
+    background: $dull-pink;
 }
 
 .swatch ul li:nth-child(16) {
-    background: #f4749b;
+    background: $bright-pink;
 }
 
 .swatch ul li:nth-child(17) {
-    background: #950069;
+    background: $deep-pink;
 }
 
 .swatch ul li:nth-child(18) {
-    background: #542852;
+    background: $dark-magenta;
 }
 
 .upload-button {
     width: 100px !important;
-    background: #fff;
+    background: $white;
     display: table-cell;
     text-align: center;
     height: 100px;
     vertical-align: middle;
-    border: 4px dashed #969696;
+    border: 4px dashed $nobel;
     cursor: pointer;
 }
 
@@ -101,11 +103,11 @@
     margin-left: 20px;
 }
 
-.logoTool {
+.logo-tool {
     float: left;
 }
 
-.logoTool ul li {
+.logo-tool ul li {
     margin-right: 5px;
     cursor: pointer;
     transition: all 0.5s ease;
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.ts b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.ts
index c406e5f20e9..59e794283a4 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.ts
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/design-filters/design.filters.component.ts
@@ -28,7 +28,7 @@ export class TemplateDesignUISectionVisibility {
 @Component({
     selector: 'design-filters',
     templateUrl: 'design.filters.component.html',
-    styleUrls: ['design.filters.component.css']
+    styleUrls: ['design.filters.component.scss']
 })
 
 export class DesignFiltersContainerComponent implements OnInit {
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.html
index 29da7845091..8bae85037d1 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.html
@@ -14,10 +14,10 @@
     <content-selector [hidden]="!ifContentSelected" [content]="ifContentSelected"></content-selector>
     <invoice-email-filter-component *ngIf="ifEmailSelected"></invoice-email-filter-component>
 
-    <div id="emails" class="tabcontent" *ngIf="ifEmailSelected">
+    <div id="emails" class="design-tab-content" *ngIf="ifEmailSelected">
 
         <div class="clearfix mr-t2">
-            <h2 style="margin-bottom: 0;">Standard email</h2>
+            <h2 class="mb-0">Standard email</h2>
             <small>Edit the email content your customer gets</small>
         </div>
         <div class="clearfix mr-t2">
@@ -32,23 +32,23 @@ <h2 style="margin-bottom: 0;">Standard email</h2>
                 <div class="col-12">
                     <input type="checkbox" /> Use greeting
                 </div>
-                <div class="col-4 pdL0">
-                    <div class="custom-select pos-rel">
+                <div class="col-4 pl-0">
+                    <div class="custom-select position-relative">
                         <select class="form-control">
                             <option value="dear">dear</option>
                         </select>
-                        <span class="select_drop">
+                        <span class="select-drop">
                             <i class="fa fa-caret-down"></i>
                         </span>
                     </div>
                 </div>
                 <div class="col-8">
                     <div>
-                        <div class="custom-select pos-rel">
+                        <div class="custom-select position-relative">
                             <select class="form-control">
                                 <option value="dear">Customer name</option>
                             </select>
-                            <span class="select_drop">
+                            <span class="select-drop">
                                 <i class="fa fa-caret-down"></i>
                             </span>
                         </div>
@@ -60,7 +60,7 @@ <h2 style="margin-bottom: 0;">Standard email</h2>
         <div class="clearfix mr-t2">
             <div class="form-group">
                 Message to customer
-                <div class="">
+                <div>
                     <textarea class="form-control" rows="5">Here’s your invoice! We appreciate your prompt payment. Thanks for your business. Walkover Web Solutions Private
             Limited
           </textarea>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.scss b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.scss
index c1460df017d..d04e02fabfd 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.scss
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/edit.filters.component.scss
@@ -1,8 +1,10 @@
+@import "../../../../../assets/css/color.scss";
+
 .active-tab {
-    background: #313a97 !important;
-    color: #fff !important;   
+    background: $jacksons-purple !important;
+    color: $white !important;   
 }
 .inactive-tab {
-    background: #fff !important;
-    color: #313a97 !important;   
+    background: $white !important;
+    color: $jacksons-purple !important;   
 }
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/email-filter/email-filter.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/email-filter/email-filter.component.html
index 95af16b732b..eaa1cdbcf3f 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/email-filter/email-filter.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/filters-container/email-filter/email-filter.component.html
@@ -1,7 +1,7 @@
-<div id="emails" class="tabcontent">
+<div id="emails" class="design-tab-content">
 
 	<div class="clearfix mr-t2">
-		<h2 style="margin-bottom: 0;">Standard email</h2>
+		<h2 class="mb-0">Standard email</h2>
 		<small>Edit the email content your customer gets</small>
 	</div>
 	<div class="clearfix mr-t2">
@@ -13,34 +13,32 @@ <h2 style="margin-bottom: 0;">Standard email</h2>
 	</div>
 
 	<div class="clearfix mr-t2">
-		<div class="form-group">
-			<div class="">
+		<div class="form-group row">
+			<div class="col-12">
 				<input type="checkbox" name="useGreeting" [(ngModel)]="emailObject.useGreeting"
 					(change)="onUpdateEmailObject()" /> Use greeting
 			</div>
-			<div class="col-xs-4 pdL0">
-				<div class="custom-select pos-rel">
+			<div class="col-4 pl-0">
+				<div class="custom-select position-relative">
 					<select class="form-control" name="greeting" [(ngModel)]="emailObject.greeting"
 						(change)="onUpdateEmailObject()">
 						<option value="">Blank</option>
 						<option value="To">To</option>
 						<option value="Dear">Dear</option>
 					</select>
-					<span class="select_drop"><i class="fa fa-caret-down"></i></span>
+					<span class="select-drop"><i class="fa fa-caret-down"></i></span>
 				</div>
 			</div>
-			<div class="col-xs-8">
-				<div class="row">
-					<div class="custom-select pos-rel">
+			<div class="col-8">
+					<div class="custom-select position-relative">
 						<select class="form-control" name="username" [(ngModel)]="emailObject.username"
 							(change)="onUpdateEmailObject()">
 							<option value="Customer name">Customer name</option>
 							<option value="Company name">Company name</option>
 							<option value="Attention to">Attention to</option>
 						</select>
-						<span class="select_drop"><i class="fa fa-caret-down"></i></span>
+						<span class="select-drop"><i class="fa fa-caret-down"></i></span>
 					</div>
-				</div>
 			</div>
 		</div>
 	</div>
@@ -48,7 +46,7 @@ <h2 style="margin-bottom: 0;">Standard email</h2>
 	<div class="clearfix mr-t2">
 		<div class="form-group">
 			Message to customer
-			<div class="">
+			<div>
 				<textarea name="body" [(ngModel)]="emailObject.body" (keyup)="onUpdateEmailObject()"
 					class="form-control"
 					rows="5">Here’s your invoice! We appreciate your prompt payment. Thanks for your business. Walkover Web Solutions Private Limited</textarea>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/confirmation-modal/confirmation.modal.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/confirmation-modal/confirmation.modal.component.html
index d229f4dfd3e..1da0dd67e8b 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/confirmation-modal/confirmation.modal.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/confirmation-modal/confirmation.modal.component.html
@@ -7,9 +7,9 @@ <h3>Confirmation</h3>
         <form name="newRole" novalidate class="" autocomplete="off">
             <h3 *ngIf="!isMessageTextOrHeading" [innerHTML]="message"></h3>
             <ng-container *ngIf="isMessageTextOrHeading">
-                <div class="modal_wrap mr-b2">
+                <div class="modal-wrap mr-b2">
                     <h3>{{messageHeader}} </h3>
-                    <p class="text-gray font-14 mt-05">{{messageBody}}</p>
+                    <p class="text-gray font-14 mr-t05">{{messageBody}}</p>
                 </div>
             </ng-container>
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.html
index 98473115651..e8c059bce9a 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.html
@@ -1,13 +1,13 @@
-<div class="">
+<div>
     <div class="panel-body" id="customInvoice">
         <ng-container>
-            <div style="width: 100%">
-                <edit-template-filters class="templateEditor" [editMode]="editMode" (selectTab)="selectedTab($event)">
+            <div class="width-100">
+                <edit-template-filters class="template-editor" [editMode]="editMode" (selectTab)="selectedTab($event)">
                 </edit-template-filters>
                 <!--[templateSections]="templateSections" [templateId]="templateId"-->
-                <invoice-template [hidden]="isEmailTabSelected" class="invoice-preview scrollAuto"
+                <invoice-template [hidden]="isEmailTabSelected" class="invoice-preview scroll-auto"
                     [isPreviewMode]="isPreviewMode">this is pre</invoice-template>
-                <div class="invoice-preview scrollAuto" [hidden]="!isEmailTabSelected" PageHeight>
+                <div class="invoice-preview scroll-auto" [hidden]="!isEmailTabSelected" PageHeight>
                     <!--{{ emailObject | json}}-->
                     <!--<div id="email-template" class="clearfix">
               <div class="input-group">
@@ -18,9 +18,9 @@
                   <span class="input-group-addon grey-color">From</span>
                   <input type="text" class="form-control" disabled placeholder="From" [value]="emailObject.form">
               </div>
-              <div class="pd2" id="email-body">
+              <div class="pd-2" id="email-body">
                   <p [hidden]="!emailObject.useGreeting"><b>{{emailObject.greeting}} {{emailObject.username}}</b> </p>
-                  <p class="pdT2">{{emailObject.body}}</p>
+                  <p class="pd-t2">{{emailObject.body}}</p>
               </div>
           </div>-->
                 </div>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.scss
similarity index 73%
rename from apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.css
rename to apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.scss
index fc60c8aceeb..f3158681cf2 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.scss
@@ -1,4 +1,6 @@
-.templateEditor {
+@import "../../../../../../assets/css/color.scss";
+
+.template-editor {
     width: 30%;
     float: left;
     /* overflow: auto; */
@@ -13,16 +15,16 @@
 }
 
 #email-template {
-    background-color: #fff;
-    border: 1px solid #ddd;
+    background-color: $white;
+    border: 1px solid $gainsboro;
 }
 
 #email-template .form-control {
     min-height: 45px;
     border: 0;
     border-radius: 0 !important;
-    color: #000;
-    border-bottom: 1px solid #ddd;
+    color: $black;
+    border-bottom: 1px solid $gainsboro;
     background: transparent !important;
 }
 
@@ -32,7 +34,7 @@
     text-align: left;
     border: 0;
     border-radius: 0;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
 #email-body {
@@ -44,7 +46,7 @@
         width: 75%;
         padding-left: 15px;
     }
-    .templateEditor {
+    .template-editor {
         width: 25%;
     }
 }
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.ts b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.ts
index 168f2b1a162..ad13ee597be 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.ts
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-modal/template-modal.component.ts
@@ -9,7 +9,7 @@ import { EditFiltersContainersComponent } from '../../filters-container/edit.fil
 @Component({
     selector: 'invoice-template-modal',
     templateUrl: './template-modal.component.html',
-    styleUrls: ['./template-modal.component.css']
+    styleUrls: ['./template-modal.component.scss']
 })
 
 export class InvoiceTemplateModalComponent implements OnChanges {
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-preview-modal/template-preview.modal.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-preview-modal/template-preview.modal.component.html
index b46b9896659..63db4470d78 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-preview-modal/template-preview.modal.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/modals/template-preview-modal/template-preview.modal.component.html
@@ -1,9 +1,9 @@
-<div id="" class="">
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+<div>
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">Invoice template preview </h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
-    <div class="modal-body pdT5 pdB5 pdL2 pdR2 clearfix" id="export-body">
-        <invoice-template class="invoice-preview scrollAuto" [isPreviewMode]="true"></invoice-template>
+    <div class="modal-body pd-t5 pd-b5 pd-l2 pd-r2 clearfix" id="export-body">
+        <invoice-template class="invoice-preview scroll-auto" [isPreviewMode]="true"></invoice-template>
     </div>
 </div>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/out.template.component.ts b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/out.template.component.ts
index d62aac3a48a..916f77e65a7 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/out.template.component.ts
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/out.template.component.ts
@@ -50,20 +50,8 @@ export class OutTemplateComponent implements OnInit, OnDestroy, OnChanges {
 			companies = ss.companies;
 			this.companyUniqueName = ss.companyUniqueName;
         });
-        
-        this.companyUniqueName$ = this.store.pipe(select(state => state.session.companyUniqueName), takeUntil(this.destroyed$));
 
-        this.companyUniqueName$.pipe(take(1)).subscribe(activeCompanyUniqueName => {
-            if (companies) {
-                companies.forEach(company => {
-                    if (company.uniqueName === activeCompanyUniqueName) {
-                        if (company.country === "India") {
-                            this.showGstComposition = true;
-                        }
-                    }
-                });
-            }
-        });
+        this.companyUniqueName$ = this.store.pipe(select(state => state.session.companyUniqueName), takeUntil(this.destroyed$));
 
 		this.store.pipe(select(s => s.invoiceTemplate), take(1)).subscribe(ss => {
 			defaultTemplate = ss.defaultTemplate;
@@ -72,7 +60,13 @@ export class OutTemplateComponent implements OnInit, OnDestroy, OnChanges {
 	}
 
 	public ngOnInit() {
-
+        this.store.pipe(select(state => state.session.activeCompany), take(1)).subscribe(activeCompany => {
+            if (activeCompany?.countryV2?.countryName) {
+                this.showGstComposition = activeCompany.countryV2.countryName === 'India';
+            } else {
+                this.showGstComposition = false;
+            }
+        });
 		this._activatedRoute.params.pipe(takeUntil(this.destroyed$)).subscribe(a => {
 			if (!a) {
 				return;
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.html
index 083720260c2..d9961c4ce67 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.html
@@ -28,7 +28,7 @@
                         </div>
                     </div>
                 </figure>
-                <table class="mb-05" cellspacing="0" cellpadding="0">
+                <table class="mr-b05" cellspacing="0" cellpadding="0">
                     <tbody>
                         <tr class="header-table">
                             <td>
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.scss b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.scss
index 3309f2dc693..3cee6ef37f5 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.scss
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-a/gst-template-a.component.scss
@@ -37,7 +37,7 @@
 p {
     line-height: 17px;
   }
-  .mb-05 {
+  .mr-b05 {
     margin-bottom: 5px;
   }
   /* heading */
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.css
index 82b3cf4d47f..c02f234d5df 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.css
@@ -81,11 +81,11 @@ body {
     padding: 7px 7px;
 }
 
-#template2 .mrL2 {
+#template2 .mr-l2 {
     margin-left: 20px;
 }
 
-#template2 .mrR2 {
+#template2 .mr-r2 {
     margin-right: 20px;
 }
 
@@ -121,7 +121,7 @@ body {
 line-height: 1.2rem; */
 }
 
-#template2 .bdrB {
+#template2 .bd-rb {
     border-bottom: 1px solid #666;
 }
 
@@ -144,7 +144,7 @@ line-height: 1.2rem; */
     /* color: #df4927; */
 }
 
-#template2 .vmiddle {
+#template2 .vertical-align-middle  {
     vertical-align: middle;
 }
 
@@ -241,7 +241,7 @@ line-height: 1.2rem; */
     height: 18px;
 }
 
-#template2 .pos-rel {
+#template2 .position-relative {
     position: relative;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.html
index 707c47880ec..2ad8ac1f5a1 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-b/gst-template-b.component.html
@@ -29,7 +29,7 @@
                                             <span *ngIf="fieldsAndVisibility.header.invoiceNumber?.display">{{(fieldsAndVisibility.header.invoiceNumber?.label.length > 0) ? fieldsAndVisibility.header.invoiceNumber?.label
                                             : 'Invoice Number'}}: 20170911-1</span>
                                             <span
-                                                [ngClass]="{'mrL2': fieldsAndVisibility.header.invoiceNumber?.display}"
+                                                [ngClass]="{'mr-l2': fieldsAndVisibility.header.invoiceNumber?.display}"
                                                 *ngIf="fieldsAndVisibility.header.invoiceDate?.display">{{(fieldsAndVisibility.header.invoiceDate?.label.length > 0) ? fieldsAndVisibility.header.invoiceDate?.label
                                             : 'Date'}}: 11-09-2017</span>
                                         </ng-container>
@@ -37,7 +37,7 @@
                                             <span *ngIf="fieldsAndVisibility.header.voucherNumber?.display">{{(fieldsAndVisibility.header.voucherNumber?.label.length > 0) ? fieldsAndVisibility.header.voucherNumber?.label
                                                         : 'Voucher Number'}}: 20170911-1</span>
                                             <span
-                                                [ngClass]="{'mrL2': fieldsAndVisibility.header.voucherNumber?.display}"
+                                                [ngClass]="{'mr-l2': fieldsAndVisibility.header.voucherNumber?.display}"
                                                 *ngIf="fieldsAndVisibility.header.voucherDate?.display">{{(fieldsAndVisibility.header.voucherDate?.label.length > 0) ? fieldsAndVisibility.header.voucherDate?.label
                                                         : 'Voucher Date'}}: 11-09-2017</span>
                                         </ng-container>
@@ -49,19 +49,19 @@
                                         <span class="bold">10-09-2018</span>
                                     </p>
 
-                                    <p class="mrR2" *ngIf="fieldsAndVisibility.header.attentionTo?.display">
+                                    <p class="mr-r2" *ngIf="fieldsAndVisibility.header.attentionTo?.display">
                                         <strong>Attention to: </strong>
                                         <span>Mr. Alok Gangrade</span>
                                     </p>
 
                                     <p>
-                                        <span class="mrR2" [hidden]="!fieldsAndVisibility.header.gstin?.display">{{(fieldsAndVisibility.header.gstin?.label.length > 0) ? fieldsAndVisibility.header.gstin?.label
+                                        <span class="mr-r2" [hidden]="!fieldsAndVisibility.header.gstin?.display">{{(fieldsAndVisibility.header.gstin?.label.length > 0) ? fieldsAndVisibility.header.gstin?.label
                                             : 'GSTIN'}}: {{companyGSTIN ? companyGSTIN : '23AAUCS7548A1Z4'}}</span>
                                         <!-- <span [hidden]="!fieldsAndVisibility.header.pan?.display">{{fieldsAndVisibility.header.pan?.label}}: {{companyPAN ? companyPAN : 'AAACW9768L'}}</span> -->
                                     </p>
                                 </figure>
                             </td>
-                            <td class="text-right vmiddle">
+                            <td class="text-right vertical-align-middle ">
                                 <figure class="col-xs-12">
                                     <img [src]="logoSrc" alt="" class="max-width-180"
                                         [ngStyle]="{ 'height': inputTemplate.logoSize+'px'}" [hidden]='!showLogo' />
@@ -95,12 +95,12 @@
                             <p class="bold"
                                 *ngIf="fieldsAndVisibility.header.shippingDate?.display || fieldsAndVisibility.header.shippedVia?.display || fieldsAndVisibility.header.trackingNumber?.display">
                                 Shipping Detail:</p>
-                            <p *ngIf="fieldsAndVisibility?.header?.shippingDate?.display" class="mrR2">
+                            <p *ngIf="fieldsAndVisibility?.header?.shippingDate?.display" class="mr-r2">
                                 <span>{{(fieldsAndVisibility.header.shippingDate?.label.length > 0) ? fieldsAndVisibility.header.shippingDate?.label
                                     : 'Ship Date'}}:</span>
                                 <span>10-09-2018</span>
                             </p>
-                            <p *ngIf="fieldsAndVisibility?.header?.shippedVia?.display" class="mrR2">
+                            <p *ngIf="fieldsAndVisibility?.header?.shippedVia?.display" class="mr-r2">
                                 <span>{{(fieldsAndVisibility.header.shippedVia?.label.length > 0) ? fieldsAndVisibility.header.shippedVia?.label
                                     : 'Ship Via'}}:</span>
                                 <span>FedEx</span>
@@ -111,7 +111,7 @@
                                 <span>213456</span>
                             </p>
                         </td>
-                        <td class="text-right vmiddle total-amount">
+                        <td class="text-right vertical-align-middle  total-amount">
                             <h2 class="">8166.00/-</h2>
                         </td>
                     </tr>
@@ -119,7 +119,7 @@ <h2 class="">8166.00/-</h2>
             </table>
 
         </div>
-        <div id="template-table" class="pos-rel"
+        <div id="template-table" class="position-relative"
             [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }"
             (click)="onClickSection('table')">
             <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
@@ -277,15 +277,15 @@ <h2 class="">8166.00/-</h2>
                 </tbody>
                 <tfoot>
                     <tr>
-                        <th class="bdrB" *ngIf="fieldsAndVisibility.table.sNo?.display"></th>
-                        <th class="bdrB text-right" *ngIf="fieldsAndVisibility.table.hsnSac?.display"></th>
-                        <th class="bdrB" *ngIf="fieldsAndVisibility.table.taxes?.display"></th>
-                        <th class="bdrB text-right" *ngIf="fieldsAndVisibility.table.taxableValue?.display">
+                        <th class="bd-rb" *ngIf="fieldsAndVisibility.table.sNo?.display"></th>
+                        <th class="bd-rb text-right" *ngIf="fieldsAndVisibility.table.hsnSac?.display"></th>
+                        <th class="bd-rb" *ngIf="fieldsAndVisibility.table.taxes?.display"></th>
+                        <th class="bd-rb text-right" *ngIf="fieldsAndVisibility.table.taxableValue?.display">
                             <strong>Total</strong>
-                            <strong class="mrL2">7200.00</strong>
+                            <strong class="mr-l2">7200.00</strong>
                         </th>
 
-                        <th class="text-right bdrB" *ngIf="fieldsAndVisibility.table.taxes?.display">
+                        <th class="text-right bd-rb" *ngIf="fieldsAndVisibility.table.taxes?.display">
                             <strong>966.00</strong>
                         </th>
                     </tr>
@@ -323,7 +323,7 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
                         </td>
 
                         <!-- <td style="text-align: center;vertical-align: bottom; width: 300px;">
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <p>
                                 <strong class="font-10">{{fieldsAndVisibility.header.companyName?.label}}</strong>
                             </p>
@@ -332,14 +332,14 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
 
                         <td class="text-center" style="vertical-align: bottom; width: 35%;" *ngIf="!showImageSignature">
                             <ng-container *ngIf="fieldsAndVisibility.footer.slogan?.display">
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong class="slogan-pre-line">
                                     <small *ngIf="fieldsAndVisibility.footer.slogan?.label">
                                         {{fieldsAndVisibility.footer.slogan?.label }}
                                     </small>
                                 </strong>
 
-                                <!--   <p class="bdrB"></p> -->
+                                <!--   <p class="bd-rb"></p> -->
 
                                 <!--<strong>
                                                  <small *ngIf="fieldsAndVisibility.header.companyName?.label">
@@ -353,7 +353,7 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
                             <ng-container>
                                 <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180"
                                     alt="" style="min-width: 60px;height: 60px;" />
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <!--<strong>
                                             <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                                {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.css
index 1c81c13987f..c08056f83ad 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.css
@@ -34,7 +34,7 @@
 .mrT60 {
     margin-top: 60px;
 }
-.mb-1 {
+.mr-b1 {
     margin-bottom: 10px;
 }
 .mb-2 {
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.html
index 556b8175990..1093e0d223e 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-c/gst-template-c.component.html
@@ -231,7 +231,7 @@ <h2 [ngStyle]="{ 'color': inputTemplate.templateColor}">
             </tbody>
         </table>
     </div>
-    <div id="template-table" class="pos-rel" (click)="onClickSection('table')"
+    <div id="template-table" class="position-relative" (click)="onClickSection('table')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }">
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
             <i class="icon-edit-pencil"></i>
@@ -403,7 +403,7 @@ <h2 [ngStyle]="{ 'color': inputTemplate.templateColor}">
                                         {{fieldsAndVisibility.footer.slogan?.label }}
                                     </small>
                                 </strong>
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
@@ -416,7 +416,7 @@ <h2 [ngStyle]="{ 'color': inputTemplate.templateColor}">
                             <ng-container>
                                 <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180"
                                     alt="" style="min-width: 60px;height: 60px;" />
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.css
index b7f502cace2..254d673ad64 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.css
@@ -94,7 +94,7 @@ body {
     text-align: right;
 }
 
-#template3 .mrL2 {
+#template3 .mr-l2 {
     margin-left: 20px;
 }
 
@@ -171,7 +171,7 @@ body {
     font-weight: bold;
 }
 
-#template3 .bdrB {
+#template3 .bd-rb {
     border-bottom: 1px solid #666;
     margin-bottom: 10px;
 }
@@ -193,7 +193,7 @@ body {
     font-weight: 100;
 }
 
-#template3 .vmiddle {
+#template3 .vertical-align-middle  {
     vertical-align: middle;
 }
 
@@ -218,7 +218,7 @@ body {
     font-size: 10px;
 }
 
-#template3 .pos-rel {
+#template3 .position-relative {
     position: relative;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.html
index 3e6374a624b..89ada0b594e 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-d/gst-template-d.component.html
@@ -23,7 +23,7 @@
             <table class="mr-b1">
                 <tbody>
                     <tr>
-                        <td class="text-left vmiddle">
+                        <td class="text-left vertical-align-middle ">
                             <figure class="col-xs-12">
                                 <img [hidden]='!showLogo' [src]="logoSrc" class="pull-left max-width-180" alt=""
                                     [ngStyle]="{ 'height': inputTemplate.logoSize+'px'}" />
@@ -86,7 +86,7 @@
             </tbody>
         </table>
     </div>
-    <div id="template-table" class="pos-rel" (click)="onClickSection('table')"
+    <div id="template-table" class="position-relative" (click)="onClickSection('table')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }">
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
             <i class="icon-edit-pencil"></i>
@@ -231,13 +231,13 @@
             </tbody>
             <tfoot>
                 <tr>
-                    <th class="bdrB text-right" *ngIf="fieldsAndVisibility.table.hsnSac?.display"></th>
-                    <th class="bdrB text-right" *ngIf="fieldsAndVisibility.table.taxableValue?.display">
+                    <th class="bd-rb text-right" *ngIf="fieldsAndVisibility.table.hsnSac?.display"></th>
+                    <th class="bd-rb text-right" *ngIf="fieldsAndVisibility.table.taxableValue?.display">
                         <strong>Total</strong>
-                        <strong class="mrL2">7200.00</strong>
+                        <strong class="mr-l2">7200.00</strong>
                     </th>
-                    <th class="bdrB" *ngIf="fieldsAndVisibility.table.taxes?.display"></th>
-                    <th class="text-right bdrB" *ngIf="fieldsAndVisibility.table.taxes?.display">
+                    <th class="bd-rb" *ngIf="fieldsAndVisibility.table.taxes?.display"></th>
+                    <th class="text-right bd-rb" *ngIf="fieldsAndVisibility.table.taxes?.display">
                         <strong>966.00</strong>
                     </th>
                 </tr>
@@ -282,7 +282,7 @@
         </table> -->
     </div>
 
-    <div id="template-footer" class="clearfix pos-rel" (click)="onClickSection('footer')"
+    <div id="template-footer" class="clearfix position-relative" (click)="onClickSection('footer')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.footer, ' ': templateUISectionVisibility.footer }">
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.footer">
             <i class="icon-edit-pencil"></i>
@@ -312,7 +312,7 @@
                         </ul>
                     </td>
                     <!-- <td style="text-align: center;vertical-align: bottom;">
-                        <p class="bdrB"></p>
+                        <p class="bd-rb"></p>
                         <p>
                             <strong class="font-10">{{fieldsAndVisibility.header.companyName?.label}}</strong>
                         </p>
@@ -327,7 +327,7 @@
                                     {{fieldsAndVisibility.footer.slogan?.label }}
                                 </small>
                             </strong>
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <strong>
                                 <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                     {{fieldsAndVisibility.header.companyName?.label}}
@@ -340,7 +340,7 @@
                         <ng-container>
                             <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180" alt=""
                                 style="min-width: 60px;height: 60px;" />
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <strong>
                                 <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                     {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.html
index a8a933850d2..30be82d4934 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.html
@@ -27,13 +27,13 @@ <h4 class="sub_head" *ngIf="fieldsAndVisibility.header.formNameTaxInvoice?.displ
                                 <strong
                                     *ngIf="(!fieldsAndVisibility.header.formNameInvoice?.label && fieldsAndVisibility.header.formNameTaxInvoice?.label) || (fieldsAndVisibility.header.formNameInvoice?.label && fieldsAndVisibility.header.formNameTaxInvoice?.label)">{{fieldsAndVisibility.header.formNameTaxInvoice?.label}}</strong>
                             </h4>
-                            <p class="mt-05" *ngIf="showGstComposition && fieldsAndVisibility.header.gstComposition?.display">{{(fieldsAndVisibility.header.gstComposition?.label) ? fieldsAndVisibility.header.gstComposition?.label : "Registered under Composition Scheme"}}</p>
-                            <p class="mt-05">
+                            <p class="mr-t05" *ngIf="showGstComposition && fieldsAndVisibility.header.gstComposition?.display">{{(fieldsAndVisibility.header.gstComposition?.label) ? fieldsAndVisibility.header.gstComposition?.label : "Registered under Composition Scheme"}}</p>
+                            <p class="mr-t05">
                                 <ng-container *ngIf="voucherType==='sales'">
                                     <span *ngIf="fieldsAndVisibility.header.invoiceNumber?.display">{{(fieldsAndVisibility.header.invoiceNumber?.label?.length > 0) ? fieldsAndVisibility.header.invoiceNumber?.label
                                     : 'Number'}}: 20170911-1</span>
                                     <span *ngIf="fieldsAndVisibility.header.invoiceDate?.display"
-                                        [class.mrL2]="fieldsAndVisibility.header.invoiceNumber?.display">{{fieldsAndVisibility.header.invoiceDate?.label ? fieldsAndVisibility.header.invoiceDate?.label
+                                        [class.mr-l2]="fieldsAndVisibility.header.invoiceNumber?.display">{{fieldsAndVisibility.header.invoiceDate?.label ? fieldsAndVisibility.header.invoiceDate?.label
                                     : 'Date'}}: 11/09/2017</span>
                                 </ng-container>
 
@@ -41,7 +41,7 @@ <h4 class="sub_head" *ngIf="fieldsAndVisibility.header.formNameTaxInvoice?.displ
                                     <span *ngIf="fieldsAndVisibility.header.voucherNumber?.display">{{(fieldsAndVisibility.header.voucherNumber?.label?.length > 0) ? fieldsAndVisibility.header.voucherNumber?.label
                                                 : 'Voucher Number'}}: 20170911-1</span>
                                     <span *ngIf="fieldsAndVisibility.header.voucherDate?.display"
-                                        [class.mrL2]="fieldsAndVisibility.header.voucherNumber?.display">{{fieldsAndVisibility.header.voucherDate?.label ? fieldsAndVisibility.header.voucherDate?.label
+                                        [class.mr-l2]="fieldsAndVisibility.header.voucherNumber?.display">{{fieldsAndVisibility.header.voucherDate?.label ? fieldsAndVisibility.header.voucherDate?.label
                                                 : 'Voucher Date'}}: 11/09/2017</span>
                                 </ng-container>
                             </p>
@@ -85,7 +85,7 @@ <h4 class="sub_head" *ngIf="fieldsAndVisibility.header.formNameTaxInvoice?.displ
                 <tr>
                     <td colspan="2">
                         <figure>
-                            <p class="pt-05 pb-05" *ngIf="fieldsAndVisibility.header.attentionTo?.display">
+                            <p class="pd-t05 pd-b05" *ngIf="fieldsAndVisibility.header.attentionTo?.display">
                                 <strong>Attention to: </strong> Alok Gangrade</p>
                         </figure>
                     </td>
@@ -162,7 +162,7 @@ <h2 *ngIf="fieldsAndVisibility.table.totalDue?.display">6166.00/- </h2>
             </tbody>
         </table>
     </div>
-    <div id="template-table" class="pos-rel" (click)="onClickSection('table')"
+    <div id="template-table" class="position-relative" (click)="onClickSection('table')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }">
         <!-- <span class="arrow-down"></span> -->
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
@@ -451,7 +451,7 @@ <h2 *ngIf="fieldsAndVisibility.table.totalDue?.display">6166.00/- </h2>
                         </ul>
                     </td>
                     <!-- <td style="text-align: center;vertical-align: bottom;">
-                        <p class="bdrB"></p>
+                        <p class="bd-rb"></p>
                         <p>
                             <strong class="font-10">{{fieldsAndVisibility.header.companyName?.label}}</strong>
                         </p>
@@ -468,7 +468,7 @@ <h2 *ngIf="fieldsAndVisibility.table.totalDue?.display">6166.00/- </h2>
                                     {{fieldsAndVisibility.footer.slogan?.label }}
                                 </small>
                             </strong>
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <strong>
                                 <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                     {{fieldsAndVisibility.header.companyName?.label}}
@@ -480,7 +480,7 @@ <h2 *ngIf="fieldsAndVisibility.table.totalDue?.display">6166.00/- </h2>
                         <ng-container>
                             <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180" alt=""
                                 style="min-width: 60px;height: 60px;" />
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <strong>
                                 <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                     {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.scss b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.scss
index 8eb05bb3695..a8a383708ee 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.scss
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-e/gst-template-e.component.scss
@@ -91,7 +91,7 @@ body {
 tfoot.table-details tr th {
     font-weight: normal;
 }
-#royal .mrL2 {
+#royal .mr-l2 {
     margin-left: 20px;
 }
 #royal .mr-b2 {
@@ -189,7 +189,7 @@ tfoot.table-details tr th {
     font-weight: bold;
 }
 
-#royal .bdrB {
+#royal .bd-rb {
     border-bottom: 1px solid$nobel;
     margin-bottom: 10px;
 }
@@ -209,7 +209,7 @@ tfoot.table-details tr th {
     vertical-align: baseline;
 }
 
-#royal .vmiddle {
+#royal .vertical-align-middle  {
     vertical-align: middle;
 }
 
@@ -233,7 +233,7 @@ tfoot.table-details tr th {
     width: auto;
 }
 
-#royal .pos-rel {
+#royal .position-relative {
     position: relative;
 }
 
@@ -245,7 +245,7 @@ tfoot.table-details tr th {
     text-align: center;
 }
 
-#royal .mrB {
+#royal .mr-b05 {
     margin-bottom: 10px;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.css
index fd8486e59cd..5c0219ec4a5 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.css
@@ -128,7 +128,7 @@ body {
     /* text-align:left; */
 }
 
-#gold .mrL2 {
+#gold .mr-l2 {
     margin-left: 20px;
 }
 
@@ -254,7 +254,7 @@ body {
     font-weight: bold;
 }
 
-#gold .bdrB {
+#gold .bd-rb {
     border-bottom: 1px solid #666;
     margin-bottom: 6px;
 }
@@ -277,7 +277,7 @@ body {
     vertical-align: baseline;
 }
 
-#gold .vmiddle {
+#gold .vertical-align-middle  {
     vertical-align: middle;
 }
 
@@ -308,7 +308,7 @@ body {
     font-size: 10px;
 }
 
-#gold .pos-rel {
+#gold .position-relative {
     position: relative;
 }
 
@@ -320,7 +320,7 @@ body {
     text-align: center;
 }
 
-#gold .mrB {
+#gold .mr-b05 {
     margin-bottom: 10px;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.html
index b4fcbd7fbea..dfecae95cad 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-f/gst-template-f.component.html
@@ -250,7 +250,7 @@
             </tbody>
         </table>
     </div>
-    <div class="clearfix" id="template-table" class="pos-rel" (click)="onClickSection('table')"
+    <div class="clearfix" id="template-table" class="position-relative" (click)="onClickSection('table')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }">
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
             <i class="icon-edit-pencil"></i>
@@ -452,7 +452,7 @@ <h1 *ngIf="fieldsAndVisibility.footer.thanks?.display">
                         </td>
                         <td colspan="1"></td>
                         <!-- <td style="text-align: center;vertical-align: bottom;">
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <p><strong class="font-10">{{fieldsAndVisibility.header.companyName?.label}}</strong></p>
                             <p *ngIf="fieldsAndVisibility.footer.slogan?.display">
                                 <small>{{fieldsAndVisibility.footer.slogan?.label ? fieldsAndVisibility.footer.slogan?.label: '(Signature)'}}
@@ -469,7 +469,7 @@ <h1 *ngIf="fieldsAndVisibility.footer.thanks?.display">
                                         {{fieldsAndVisibility.footer.slogan?.label }}
                                     </small>
                                 </strong>
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
@@ -481,7 +481,7 @@ <h1 *ngIf="fieldsAndVisibility.footer.thanks?.display">
                             <ng-container>
                                 <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180"
                                     alt="" style="min-width: 60px;height: 60px;" />
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.css b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.css
index 3798a1b6e05..8e126e556de 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.css
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.css
@@ -151,7 +151,7 @@ contenteditable {
     /* text-align:left; */
 }
 
-#silver .mrL2 {
+#silver .mr-l2 {
     margin-left: 20px;
 }
 
@@ -295,7 +295,7 @@ contenteditable {
     font-weight: bold;
 }
 
-#silver .bdrB {
+#silver .bd-rb {
     border-bottom: 1px solid#666;
     margin-bottom: 6px;
 }
@@ -324,7 +324,7 @@ contenteditable {
     vertical-align: baseline;
 }
 
-#silver .vmiddle {
+#silver .vertical-align-middle  {
     vertical-align: middle;
 }
 
@@ -352,7 +352,7 @@ contenteditable {
     border-top: 1px solid;
 }
 
-#silver .pos-rel {
+#silver .position-relative {
     position: relative;
 }
 
@@ -364,7 +364,7 @@ contenteditable {
     text-align: center;
 }
 
-#silver .mrB {
+#silver .mr-b05 {
     margin-bottom: 10px;
 }
 
diff --git a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.html b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.html
index be19e1e0c11..7e4933eeb63 100644
--- a/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.html
+++ b/apps/web-giddh/src/app/invoice/templates/edit-template/out-tempate/templates/gst-template-g/gst-template-g.component.html
@@ -204,7 +204,7 @@
             </tbody>
         </table>
     </div>
-    <div id="template-table" class="pos-rel" (click)="onClickSection('table')"
+    <div id="template-table" class="position-relative" (click)="onClickSection('table')"
         [ngClass]="{ 'disabled-area': !templateUISectionVisibility.table, ' ': templateUISectionVisibility.table }">
         <!-- <span class="arrow-down"></span> -->
         <a href="javascript:void(0);" class="edit-template" *ngIf="!templateUISectionVisibility.table">
@@ -404,7 +404,7 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
                         </td>
                         <td colspan="1"></td>
                         <!-- <td style="text-align: center;vertical-align: bottom;">
-                            <p class="bdrB"></p>
+                            <p class="bd-rb"></p>
                             <p>
                                 <strong class="font-10">{{fieldsAndVisibility.header.companyName?.label}}</strong>
                             </p>
@@ -421,7 +421,7 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
                                         {{fieldsAndVisibility.footer.slogan?.label }}
                                     </small>
                                 </strong>
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
@@ -434,7 +434,7 @@ <h4 [ngStyle]="{ 'color': inputTemplate.templateColor}">FOR YOUR BUSINESS.</h4>
                             <ng-container>
                                 <img [hidden]="!showImageSignature" [src]="imageSignatureSrc" class="max-width-180"
                                     alt="" style="min-width: 60px;height: 60px;" />
-                                <p class="bdrB"></p>
+                                <p class="bd-rb"></p>
                                 <strong>
                                     <small *ngIf="fieldsAndVisibility.header.companyName?.label">
                                         {{fieldsAndVisibility.header.companyName?.label}}
diff --git a/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.html b/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.html
index 87ee4a0b693..99d80079b5b 100644
--- a/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.html
+++ b/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.html
@@ -1,8 +1,8 @@
-<div id="" class="Advance-Search">
-    <div class="modal-header themeBg">
+<div class="advance-search">
+    <div class="modal-header theme-bg">
         <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
         <div class="clear-filter-close">
-            <a class="cp" href="javascript: void 0" (click)="resetAdvanceSearchModal()" tooltip="Reset Advance Search">
+            <a class="cp" href="javascript:void(0);" (click)="resetAdvanceSearchModal()" tooltip="Reset Advance Search">
                 <i aria-hidden="true" class="icon-refresh"></i> Clear Filter
             </a>
             <span aria-hidden="true" class="close" data-dismiss="modal" (click)="onCancel()">×</span>
@@ -17,7 +17,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                     </div>
                     <div class="col-sm-7">
                         <div class="input-group" (click)="showGiddhDatepicker($event)">
-                            <input type="text" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" required placeholder="Select range" class="form-control" />
+                            <input type="text" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" required placeholder="Select range" class="form-control"/>
                             <span class="input-group-addon cursor-pointer">
                                 <i class="icon-calender" aria-hidden="true"></i>
                             </span>
@@ -33,8 +33,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                     </div>
                     <div class="col-sm-7">
                         <div class="form-group">
-                            <sh-select [options]="accounts$ | async" name="particulars" (onClear)="onDDClear( 'accountUniqueNames')"  formControlName="accountUniqueNames" [isFilterEnabled]="true" [multiple]="true
-                                " [placeholder]=" 'Select Accounts'"></sh-select>
+                            <sh-select [options]="accounts$ | async" name="particulars" (onClear)="onDDClear( 'accountUniqueNames')"  formControlName="accountUniqueNames" [isFilterEnabled]="true" [multiple]="true" [placeholder]=" 'Select Accounts'"></sh-select>
                         </div>
                     </div>
                 </div>
@@ -55,7 +54,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
             </div>
 
-            <div class="clearfix mt-2 pt-2 bdrT mb-1">
+            <div class="clearfix mt-2 pt-2 bd-rt mr-b1">
                 <div class="row">
                     <div class="col-md-5">
                         <label for="">Particulars</label>
@@ -65,7 +64,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                     </div>
                     <div class="col-md-7">
                         <div class="row">
-                            <div class="pr-0 col-sm-3 col-xs-4">
+                            <div class="pr-0 col-sm-3 col-4">
                                 <div class="checkbox square-switch">
                                     <input type="checkbox" id="includeParticulars" formControlName="includeParticulars" />
                                     <label for="includeParticulars">
@@ -76,10 +75,9 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                                     </label>
                                 </div>
                             </div>
-                            <div class="col-sm-9 col-xs-8 col-xs-9">
+                            <div class="col-sm-9 col-8">
                                 <div class="form-group">
-                                    <sh-select [options]="accounts$ | async" name="particulars" (onClear)="onDDClear( 'particulars')" formControlName="particulars" [isFilterEnabled]="true" [multiple]="true
-                                " [placeholder]=" 'Select Accounts'"></sh-select>
+                                    <sh-select [options]="accounts$ | async" name="particulars" (onClear)="onDDClear( 'particulars')" formControlName="particulars" [isFilterEnabled]="true" [multiple]="true" [placeholder]=" 'Select Accounts'"></sh-select>
                                 </div>
                             </div>
                         </div>
@@ -87,7 +85,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
             </div>
 
-            <div class="clearfix mb-1">
+            <div class="clearfix mr-b1">
                 <div class="row">
                     <div class="col-md-5">
                         <label for="">Voucher Type</label>
@@ -97,7 +95,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                     </div>
                     <div class="col-md-7">
                         <div class="row">
-                            <div class="pr-0 col-sm-3 col-xs-4">
+                            <div class="pr-0 col-sm-3 col-4">
                                 <div class="checkbox square-switch">
                                     <input type="checkbox" id="includeVouchers" formControlName="includeVouchers" />
                                     <label for="includeVouchers">
@@ -108,10 +106,9 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                                     </label>
                                 </div>
                             </div>
-                            <div class="col-sm-9 col-xs-8 col-xs-9">
+                            <div class="col-sm-9 col-8">
                                 <div class="form-group">
-                                    <sh-select [options]="voucherTypeList | async" name="particulars" (onClear)="onDDClear( 'vouchers')" formControlName="vouchers" [isFilterEnabled]="true" [multiple]="true
-                                " [placeholder]=" 'Select Accounts'"></sh-select>
+                                    <sh-select [options]="voucherTypeList | async" name="particulars" (onClear)="onDDClear( 'vouchers')" formControlName="vouchers" [isFilterEnabled]="true" [multiple]="true" [placeholder]=" 'Select Accounts'"></sh-select>
                                 </div>
                             </div>
                         </div>
@@ -119,7 +116,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
             </div>
 
-            <div class="clearfix mb-1">
+            <div class="clearfix mr-b1">
                 <div class="row">
                     <div class="col-sm-5">
                         <label for="">Amount</label>
@@ -141,7 +138,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
             </div>
 
-            <div class="clearfix mb-1">
+            <div class="clearfix mr-b1">
                 <div class="row">
                     <div class="col-sm-5">
                         <label for="">Show cancelled entries</label>
@@ -158,8 +155,8 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                 </div>
             </div>
 
-            <div class="clearfix mb-1">
-                <div class="form-group toggle-btn mrB">
+            <div class="clearfix mr-b1">
+                <div class="form-group toggle-btn mr-b05">
                     <label class="cp" (click)="toggleOtherDetails()">
                         <i class="cp collapse-icons" aria-hidden="true"
                             [ngClass]="{ 'icon-minus': showOtherDetails, 'icon-plus': !showOtherDetails}"></i>Other
@@ -212,7 +209,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search</h3>
                                 <div class="row">
                                     <div class="col-xs-6 col-md-6">
                                         <div class="form-group">
-                                            <sh-select [showClear]="false" [width]=" '100%'" (selected)="onRangeSelect( 'inventoryVal', $event)" [options]="comparisonFilterDropDown$ | async" name="particulars" [placeholder]=" 'Select Range'"></sh-select>
+                                            <sh-select [showClear]="false" [width]="'100%'" (selected)="onRangeSelect( 'inventoryVal', $event)" [options]="comparisonFilterDropDown$ | async" name="particulars" [placeholder]=" 'Select Range'"></sh-select>
                                         </div>
                                     </div>
                                     <div class="col-xs-6 col-md-6">
diff --git a/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.scss b/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.scss
index 9d1c3e83a26..9703fd6aa24 100644
--- a/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/advance-search/advance-search.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../assets/css/color.scss";
+@import '../../../../assets/css/color.scss';
 
 .clear-filter-close {
     justify-content: flex-end;
@@ -66,7 +66,7 @@
         position: relative;
         padding-left: 80px !important;
     }
-    .Advance-Search{
+    .advance-search{
         p{
             line-height: 18px;
             margin-bottom: 10px;
@@ -77,7 +77,7 @@
         .mt-2{
             margin-top: 10px;
         }
-        .mb-1{
+        .mr-b1{
             margin-bottom: 0;
         }
     }
diff --git a/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.html b/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.html
index eb92e7c3d42..26705ffb6e4 100644
--- a/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.html
+++ b/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.html
@@ -1,24 +1,23 @@
 <div id="share-modal">
-    <div id="share-modal" class="" ng-if="ledgerCtrl.toggleShare">
-        <div class="pd2 bg_grey">
+    <div id="share-modal" ng-if="ledgerCtrl.toggleShare">
+        <div class="pd-2 bg-grey">
             <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeBaseAccountModal.emit()"
                 aria-label="Close">×</span>
             <h3>Are you sure you want to change the base account?</h3>
         </div>
 
         <div class="modal-body" id="SharePop">
-            <div class="modal_wrap">
+            <div class="modal-wrap">
                 <p>Note: Please update if any changes made in the ledger before changing base account, unsaved changes
                     will be removed.</p>
                 <div class="mr-t2">
                     <sh-select [disabled]="false" placeholder="Select Account" filterPlaceholder="Search Account"
-                        name="accountUniqueName" [(ngModel)]="accountUniqueName" [options]="flattenAccountList" class=""
+                        name="accountUniqueName" [(ngModel)]="accountUniqueName" [options]="flattenAccountList"
                         [useInBuiltFilterForFlattenAc]="true">
                         <ng-template #optionTemplate let-option="option">
-                            <a href="javascript:void(0)" class="" (click)="changeBaseAccount(option)"
-                                style="border-bottom: 1px solid #ccc;">
-                                <div class="item fs14">{{option?.label}}</div>
-                                <div class="item-unique fs14">{{option.additional?.uniqueName}}</div>
+                            <a href="javascript:void(0)" class="bd-rb" (click)="changeBaseAccount(option)">
+                                <div class="item font-14">{{option?.label}}</div>
+                                <div class="item-unique font-14">{{option.additional?.uniqueName}}</div>
                             </a>
                         </ng-template>
                     </sh-select>
diff --git a/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.ts b/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.ts
index 204fa53423f..acf8f9809c8 100644
--- a/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.ts
+++ b/apps/web-giddh/src/app/ledger/components/baseAccountModal/baseAccountModal.component.ts
@@ -10,11 +10,6 @@ import { LedgerActions } from '../../../actions/ledger/ledger.actions';
 @Component({
     selector: 'base-account',
     templateUrl: './baseAccountModal.component.html',
-    styles: [`
-    .bg_grey {
-        background: #eaebed;
-    }
-    `]
 })
 export class BaseAccountComponent implements OnInit {
     @Input() public accountUniqueName: string = '';
diff --git a/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.html b/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.html
index ec08b30c2b7..7e157b55640 100644
--- a/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.html
+++ b/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.html
@@ -1,28 +1,28 @@
-<div id="exportModal" class="" ng-if="ledgerCtrl.LedgerExport">
+<div id="exportModal" ng-if="ledgerCtrl.LedgerExport">
     <div class="modal-header">
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeExportLedgerModal.emit()" aria-label="Close">×</span>
         <h3>Export Ledger</h3>
     </div>
-    <div class="modal-body mrB4" id="export-body">
-        <form name="addShareEmailForm" novalidate class="" autocomplete="off">
-            <div class="pdB2 clearfix export-type">
+    <div class="modal-body mr-b4" id="export-body">
+        <form name="addShareEmailForm" novalidate autocomplete="off">
+            <div class="pd-b2 clearfix export-type">
                 <label class="w100">Type:</label>
 
                 <div>
-                <span class="pd0 mrR3">
-                    <input id="mini" class="radio-custom cp ml0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
+                <span class="p-0 mr-r3">
+                    <input id="mini" class="radio-custom cp ml-0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeMini">
                     <label for="mini" class="radio-custom-label">Mini</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="detailed" class="radio-custom cp ml0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
+                <span class="p-0 mr-r3">
+                    <input id="detailed" class="radio-custom cp ml-0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeDetail">
                     <label for="detailed" class="radio-custom-label">Detailed</label>
                 </span>
 
-                <span class="pd0 mrR3 columnar-radio">
-                    <input id="columnar" class="radio-custom cp ml0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
+                <span class="p-0 mr-r3 columnar-radio">
+                    <input id="columnar" class="radio-custom cp ml-0" type="radio" name="emailTypeSelected" (ngModelChange)="handleReportTypeChange($event)"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeColumnar">
                     <label for="columnar" class="radio-custom-label">Columnar</label>
                 </span>
@@ -30,57 +30,57 @@ <h3>Export Ledger</h3>
 
 
             </div>
-            <div class="pdB2 clearfix export-type">
+            <div class="pd-b2 clearfix export-type">
                 <label class="w100">Export As:</label>
                 <div>
-                    <span class="pd0 mrR3" [hidden]="emailTypeSelected === 'columnar'">
-                        <input id="pdf" class="radio-custom cp ml0" type="radio" name="exportAs" [(ngModel)]="exportAs"
+                    <span class="p-0 mr-r3" [hidden]="emailTypeSelected === 'columnar'">
+                        <input id="pdf" class="radio-custom cp ml-0" type="radio" name="exportAs" [(ngModel)]="exportAs"
                             [value]="'pdf'">
                         <label for="pdf" class="radio-custom-label">PDF</label>
                     </span>
 
-                    <span class="pd0 mrR3">
-                        <input id="excel" class="radio-custom cp ml0" type="radio" name="exportAs" [(ngModel)]="exportAs"
+                    <span class="p-0 mr-r3">
+                        <input id="excel" class="radio-custom cp ml-0" type="radio" name="exportAs" [(ngModel)]="exportAs"
                             [value]="'xlsx'">
                         <label for="excel" class="radio-custom-label">Excel</label>
                     </span>
                 </div>
             </div>
-            <div class="pdB2 clearfix export-type">
+            <div class="pd-b2 clearfix export-type">
                 <label class="w100">Order:</label>
                 <div>
-                    <span class="pd0 mrR3">
-                        <input id="ascending" class="radio-custom cp ml0" type="radio" name="order" [(ngModel)]="order"
+                    <span class="p-0 mr-r3">
+                        <input id="ascending" class="radio-custom cp ml-0" type="radio" name="order" [(ngModel)]="order"
                             [value]="'asc'">
                         <label for="ascending" class="radio-custom-label">Ascending</label>
                     </span>
 
-                    <span class="pd0 mrR3">
-                        <input id="descending" class="radio-custom cp ml0" type="radio" name="order" [(ngModel)]="order"
+                    <span class="p-0 mr-r3">
+                        <input id="descending" class="radio-custom cp ml-0" type="radio" name="order" [(ngModel)]="order"
                             [value]="'desc'">
                         <label for="descending" class="radio-custom-label">Descending</label>
                     </span>
                 </div>
             </div>
-            <div class="pdB2 clearfix" [hidden]="emailTypeSelected === 'admin-condensed' || emailTypeSelected === 'columnar'">
+            <div class="pd-b2 clearfix" [hidden]="emailTypeSelected === 'admin-condensed' || emailTypeSelected === 'columnar'">
                 <label class="w100">Invoice no.:</label>
-                <label class="radio-inline pd0">
+                <label class="radio-inline p-0">
                     <input type="checkbox" name="withInvoiceNumber" [(ngModel)]="withInvoiceNumber">
                 </label>
             </div>
-            <div class="pdB2 clearfix" [hidden]="emailTypeSelected !== 'columnar'">
+            <div class="pd-b2 clearfix" [hidden]="emailTypeSelected !== 'columnar'">
                 <label class="w100">Cr/Dr with +/-</label>
-                <label class="radio-inline pd0">
+                <label class="radio-inline p-0">
                     <input type="checkbox"  name="balanceTypeAsSign" [(ngModel)]="balanceTypeAsSign">
                 </label>
             </div>
             <button class="btn-success btn" (click)="exportLedger()">Download</button>
             <button class="btn-success btn show-columnar-button" [hidden]="emailTypeSelected !== 'columnar'" (click)="showColumnarReport()">Show</button>
-            <div class="modal_wrap" [hidden]="emailTypeSelected === 'columnar'">
+            <div class="modal-wrap" [hidden]="emailTypeSelected === 'columnar'">
                 <div class="clearfix"></div>
                 <h3 class="pd-t1 pd-b1">Or</h3>
                 <div>
-                    <h3 class="l8grey pdB size-xs">You can add multiple id's separated comma</h3>
+                    <h3 class="light-gray pd-b05 size-xs">You can add multiple id's separated comma</h3>
                     <textarea [(ngModel)]="emailData" required name="email" class="form-control" placeholder="Recipient Email Id's"></textarea>
                     <button ng-disabled="ledgerEmailSendForm.$invalid" class="btn btn-success mr-t1" (click)="sendLedgEmail()">Send
                         email
diff --git a/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.ts b/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.ts
index c97104bcd7f..885ae52d286 100644
--- a/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.ts
+++ b/apps/web-giddh/src/app/ledger/components/exportLedger/exportLedger.component.ts
@@ -106,7 +106,7 @@ export class ExportLedgerComponent implements OnInit {
         this._toaster.clearAllToaster();
         let data = this.emailData;
         const sendData = new MailLedgerRequest();
-        data = data.replace(RegExp(' ', 'g'), '');
+        data = (data) ? data.replace(RegExp(' ', 'g'), '') : "";
         const cdata = data.split(',');
 
         if(cdata && cdata.length > 0) {
diff --git a/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.html b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.html
new file mode 100644
index 00000000000..3f8ba84a01a
--- /dev/null
+++ b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.html
@@ -0,0 +1,25 @@
+<div id="import-statement-modal">
+    <div class="modal-header">
+        <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeModal.emit()" aria-label="Close">×</span>
+        <h3>Import Statement (PDF only)</h3>
+    </div>
+    <div class="modal-body mr-b4">
+        <form name="importStatementForm" novalidate autocomplete="off">
+            <div class="pd-b2 clearfix">
+                <label class="w100 file-upload-label">File <sup>*</sup></label>
+                <label class="radio-inline p-0">
+                    <input type="file" name="file" class="form-control file-upload-field" [(ngModel)]="selectedFile" (change)="onFileChange($event.target.files)" required accept="application/pdf">
+                </label>
+            </div>
+            <div class="pd-b2 clearfix">
+                <label class="w100">Password</label>
+                <label class="radio-inline p-0">
+                    <input type="password" name="password" class="form-control" [(ngModel)]="postRequest.password">
+                </label>
+            </div>
+            <div class="modal-wrap">
+                <button [disabled]="!postRequest.file" class="btn btn-success mr-t1" (click)="importStatement()">Upload</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.scss b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.scss
new file mode 100644
index 00000000000..25f64267e65
--- /dev/null
+++ b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.scss
@@ -0,0 +1,17 @@
+@import "../../../../assets/css/color.scss";
+
+.file-upload-label {
+    vertical-align: top;
+}
+.file-upload-field {
+    white-space:normal;
+    word-break: break-all;
+}
+.file-upload-label sup {
+    font-size: 14px;
+    color: $red;
+    top: 0px;
+}
+#import-statement-modal label.radio-inline.p-0 {
+    width: 287px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.ts b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.ts
new file mode 100644
index 00000000000..dea594879e7
--- /dev/null
+++ b/apps/web-giddh/src/app/ledger/components/import-statement/import-statement.component.ts
@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { LedgerService } from '../../../services/ledger.service';
+import { ToasterService } from '../../../services/toaster.service';
+import { GeneralService } from '../../../services/general.service';
+
+@Component({
+    selector: 'import-statement',
+    templateUrl: './import-statement.component.html',
+    styleUrls: ['./import-statement.component.scss']
+})
+
+export class ImportStatementComponent {
+    /** Account unique name */
+    @Input() public accountUniqueName: string = '';
+    /** Directives to emit true if API call successful */
+    @Output() public closeModal: EventEmitter<boolean> = new EventEmitter();
+    /** Variable for File Upload */
+    public selectedFile: any;
+    /** Object for API request parameters */
+    public getRequest: any = {entity: 'pdf', companyUniqueName: '', accountUniqueName: ''};
+    /** Object for API post parameters */
+    public postRequest: any = {file: '', password: ''};
+
+    constructor(
+        private ledgerService: LedgerService, 
+        public generalService: GeneralService, 
+        private toaster: ToasterService) {
+        
+    }
+
+    /**
+     * This will verify the file extension
+     *
+     * @param {FileList} file
+     * @returns {void}
+     * @memberof ImportStatementComponent
+     */
+    public onFileChange(file: FileList): void {
+        let validExtensions = ['pdf'];
+        let type = (file && file.item(0)) ? this.generalService.getFileExtension(file.item(0).name) : 'null';
+        let isValidFileType = validExtensions.some(extension => type === extension);
+
+        if (!isValidFileType) {
+            if(file && file.length > 0) {
+                this.toaster.errorToast('Only PDF files are supported for Import');
+            }
+            this.selectedFile = null;
+            this.postRequest.file = null;
+            return;
+        }
+
+        this.postRequest.file = file.item(0);
+    }
+
+    /**
+     * This will call the api to upload file
+     *
+     * @memberof ImportStatementComponent
+     */
+    public importStatement(): void {
+        this.getRequest.companyUniqueName = this.generalService.companyUniqueName;
+        this.getRequest.accountUniqueName = this.accountUniqueName;
+        
+        this.ledgerService.importStatement(this.getRequest, this.postRequest).subscribe(response => {
+            if (response.status === 'success') {
+                this.toaster.successToast("File has been uploaded successfully.");
+                this.closeModal.emit(true);
+            } else {
+                this.toaster.errorToast(response.message, response.code);
+            }
+        });
+    }
+}
diff --git a/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.html b/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.html
index 5629fd8226a..58b2ec07d75 100644
--- a/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.html
+++ b/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.html
@@ -1,8 +1,8 @@
 <div class="reverse-table-report" *ngIf="!isLoading">
     <div class="container-fluid">
-        <div class="invoice-preview  table-responsive">
+        <div class="invoice-preview table-responsive">
             <table class="table basic giddh-table on-mobile-view">
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr>
                         <th class="text-center">#</th>
                         <th>Date
@@ -45,7 +45,7 @@
                 </thead>
                 <tbody>
                     <tr *ngFor="let item of reportResponseResult; let itemIndexOfElement = index;">
-                        <td data-title="S. No" class="text-center">{{ itemIndexOfElement + 1 }} </td>
+                        <td data-title="#" class="text-center">{{ itemIndexOfElement + 1 }} </td>
                         <td data-title="Date" class="text-center">{{ item.date }} </td>
                         <td data-title="Particulars" class="text-center">{{ item.baseAccount }} </td>
                         <td data-title="Address" class="text-center">{{ item.address }} </td>
@@ -76,7 +76,7 @@
                 </tbody>
             </table>
         </div>
-        <div class="paginationWrapper" *ngIf="reportResponse && reportResponse?.totalPages > 1">
+        <div class="pagination-wrapper" *ngIf="reportResponse && reportResponse?.totalPages > 1">
             <pagination [totalItems]="reportResponse.totalItems" [(ngModel)]="reportResponse.page" [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="paginationLimit" [rotate]="false" (pageChanged)="pageChanged($event)"></pagination>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.scss b/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.scss
index a2b7caed1df..0ba2b54e807 100644
--- a/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/ledger-columnar-report-table/ledger.columnar.report.table.component.scss
@@ -3,7 +3,7 @@
     border-top: 1px solid $gainsboro !important;
 }
 
-.icon-pointer.activeTextColor {
+.icon-pointer.active-text-color {
     color:$deep-sky-blue;
 }
 
@@ -29,7 +29,7 @@
 }
 .btn-filter {
     background: $whisper-color;
-    border: 1px solid $whisper-color;
+    border: 1px solid $gainsboro;
     font-size: 16px;
     color: $midnight-blue;
     display: inline-flex;
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.html b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.html
index 1fd0353ae6b..105d000adc7 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.html
+++ b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.html
@@ -7,21 +7,7 @@ <h3 class="aside-title">Create Account</h3>
 
     <div class="aside-body">
         <div class="aside-pane-form">
-            <!--
-                <div class="form-group pdT2">
-                    <label class="mr-b1">Select Group</label>
-                    <div class="ng-select-wrap liq">
-                        <ng-select placeholder="Select Group" filterPlaceholder="Type to search..." name="activeGroupUniqueName" [(ngModel)]="activeGroupUniqueName" [options]="flattenGroupsArray" style="width:100%" (selected)="checkSelectedGroup($event)">
-                            <ng-template #optionTemplate let-option="option">
-                                <div class="account-list-item">{{option?.label}}</div>
-                                <div class="account-list-item fs12">{{option?.value}}</div>
-                            </ng-template>
-                        </ng-select>
-                    </div>
-                </div>
-            -->
-
-            <div class="">
+            <div>
                 <account-add-new-details [activeGroupUniqueName]="activeGroupUniqueName"
                     [flatGroupsOptions]="flattenGroupsArray" [fetchingAccUniqueName$]="fetchingAccUniqueName$"
                     (isGroupSelected)="isGroupSelected($event)" [isAccountNameAvailable$]="isAccountNameAvailable$"
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.scss b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.scss
index e5591609ff4..bb335a1f575 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/component/ledger-aside-pane-account/ledger-aside.pane.account.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -21,7 +23,7 @@
     border: 0;
     border-radius: 0;
     background: transparent;
-    color: #fff;
+    color: $white;
 }
 
 :host .container-fluid {
@@ -37,8 +39,8 @@
     padding: 0 15px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -92,7 +94,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle  {
     position: absolute;
     top: 50%;
     bottom: 0;
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.html b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.html
index 47e81d621a9..13bd216aef0 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.html
+++ b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.html
@@ -5,18 +5,18 @@ <h3>Add</h3>
     </div>
 
 
-    <button id="close" [ngClass]="!hideFirstScreen ? 'closeBtnPosAbs' : 'defaultBtn' " (click)="closeAsidePane()"><i
+    <button id="close" [ngClass]="!hideFirstScreen ? 'close-btn-absolute' : 'defaultBtn' " (click)="closeAsidePane()"><i
             class="icon-cross"></i></button>
 
 
 
     <button id="back" (click)="backButtonPressed()" *ngIf="hideFirstScreen">Back</button>
 
-    <div class="aside-body flexy-child vmiddle asidePanelLedger" *ngIf="!hideFirstScreen" vr-item>
-        <div class="pd-1 alC">
+    <div class="aside-body flexy-child vertical-align-middle aside-panel-ledger" *ngIf="!hideFirstScreen" vr-item>
+        <div class="pd-1 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleAccountPane()">Add Account</button>
         </div>
-        <div class="pd-1 alC">
+        <div class="pd-1 text-center">
             <button class="btn btn-lg btn-primary" (click)="toggleStockPane()">Add Stock</button>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.scss b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.scss
index 3672be76a44..da4ae92bec7 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/ledgerAsidePane/ledgerAsidePane.component.scss
@@ -1,10 +1,12 @@
-#close.closeBtnPosAbs {
+@import "../../../../assets/css/color.scss";
+
+#close.close-btn-absolute {
     position: absolute !important;
     left: auto !important;
     right: 0 !important;
     z-index: 9999999 !important;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 9px !important;
     margin-right: 0;
@@ -30,7 +32,7 @@
     right: 10px !important;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px !important;
     margin-right: 0;
@@ -46,7 +48,7 @@
 :host .aside-pane {
     width: 100%;
     max-width: 760px;
-    background: #fff;
+    background: $white;
 }
 
 .aside-pane {
@@ -64,7 +66,7 @@
     flex-grow: 1;
 }
 
-.vmiddle {
+.vertical-align-middle  {
     position: absolute;
     top: 50%;
     bottom: 0;
@@ -91,15 +93,15 @@
     border-radius: 0;
     right: 58px;
     background-color: transparent;
-    border: 1px solid #fff;
-    color: #fff;
+    border: 1px solid $white;
+    color: $white;
     padding: 3px 14px;
     font-size: 14px;
 }
 :host.in #back:hover {
-    color: #1a237e;
-    background-color: #fff;
-    border-color: #fff;
+    color: $midnight-blue;
+    background-color: $white;
+    border-color: $white;
 }
 .btn-lg {
     min-width: 130px;
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.html b/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.html
index 97eb94e8e74..758ee48b43f 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.html
+++ b/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.html
@@ -10,47 +10,47 @@
 		</div>
 	</a>
 
-	<div class="my-dropdown-menu pd" (click)="$event.stopPropagation()" style="padding: 10px;"
+	<div class="my-dropdown-menu pd-1" (click)="$event.stopPropagation()"
 		[ngStyle]="{'display': discountMenu ? 'block': 'none'}" #disInptEle>
 
 		<div>
 
-			<div class="d-flex mb-1">
+			<div class="d-flex mr-b1">
 
-				<label class="mr-1 align-items-center d-flex" style="width: 50px">Percent</label>
+				<label class="mr-1 align-items-center d-flex percent-label">Percent</label>
 
-				<div class="pos-rel">
-					<input type="text" id="ledger-discount-percent" class="form-control text-right cursor-pointer" [disabled]="!discountFromPer"
+				<div class="position-relative">
+					<input type="text" id="ledger-discount-percent" class="form-control text-right cursor-pointer ledger-percent-wrapper" [disabled]="!discountFromPer"
 						decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountPercentageModal"
-						(input)="discountFromInput('PERCENTAGE', $event.target.value)"
-						style="width: 100px;padding-right: 20px !important;">
-					<i class="fa fa-percent pos-abs" style="top: 9px;right: 6px;color: #acb0b9;"></i>
+						(input)="discountFromInput('PERCENTAGE', $event.target.value)">
+					<i class="fa fa-percent pos-abs"></i>
 				</div>
 
 			</div>
 
-			<div class="d-flex mb-1">
-				<label class="mr-1 align-items-center d-flex" style="width: 50px">Value</label>
-				<input type="text" id="ledger-discount-value"  class="form-control text-right cursor-pointer" [disabled]="!discountFromVal"
+			<div class="d-flex mr-b1">
+				<label class="mr-1 align-items-center d-flex value-label">Value</label>
+				<div class="position-relative">
+				<input type="text" id="ledger-discount-value"  class="form-control text-right cursor-pointer ledger-discount-wrapper" [disabled]="!discountFromVal"
 					decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountFixedValueModal"
-					(input)="discountFromInput('FIX_AMOUNT', $event.target.value)" style="width: 100px">
+					(input)="discountFromInput('FIX_AMOUNT', $event.target.value)">
+				</div>
 			</div>
 
 		</div>
 
-		<div class="d-flex flex-col" style="justify-content: center" *ngIf="discountAccountsDetails?.length > 1">
+		<div class="d-flex flex-col justify-content-center" *ngIf="discountAccountsDetails?.length > 1">
 			<span class="or-line">AND</span>
 		</div>
 
 		<div *ngIf="discountAccountsDetails?.length > 1">
-			<ul style="list-style: none;overflow: auto;max-height: 100px">
-
+			<ul class="discount-list">
 				<ng-container *ngFor="let discount of discountAccountsDetails;trackBy: trackByFn; let idx = index">
-					<li *ngIf="idx > 0" class="customItem" style="padding: 5px;margin-bottom: 5px;">
-						<label class="checkbox oh width100 p0 m0" (click)="$event.stopPropagation()">
+					<li *ngIf="idx > 0" class="custom-item pd mr-b05">
+						<label class="checkbox overflow-hidden width-100 p-0 m-0" (click)="$event.stopPropagation()">
 							<input id="{{'discount-checkbox-' + idx}}" class="pull-left" name="tax_{{idx}}" type="checkbox" [(ngModel)]="discount.isActive"
 								(change)="change($event, discount)" (click)="$event.stopPropagation()" />
-							<span class="pull-left ellp">{{discount.name}}</span>
+							<span class="pull-left text-ellipsis">{{discount.name}}</span>
 						</label>
 					</li>
 				</ng-container>
diff --git a/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.scss b/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.scss
index 6066ae54a94..3d45f3340bf 100644
--- a/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/ledgerDiscount/ledgerDiscount.component.scss
@@ -1,13 +1,15 @@
+@import "../../../../assets/css/color.scss";
+
 .or-line::before {
     content: " ";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $dim-gray;
     display: inline-block;
     width: 57px;
     margin-right: 13px;
 }
 .or-line::after {
     content: "";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $dim-gray;
     display: inline-block;
     width: 57px;
     margin-left: 13px;
@@ -15,6 +17,29 @@
 .or-line {
     display: flex;
     align-items: center;
-    color: #a2a2a2;
+    color: $dim-gray;
     margin-bottom: 10px;
 }
+.my-dropdown-men{
+    padding: 10px;
+}
+.percent-label, .value-label{
+    width: 50px;
+}
+.ledger-percent-wrapper{
+    width: 100px;
+    padding-right: 20px !important;
+}
+.ledger-discount-wrapper{
+    width: 100px;
+}
+.fa-percent.pos-abs{
+    top: 9px;
+    right: 6px;
+    color: $gray;
+}
+.discount-list{
+    list-style: none;
+    overflow: auto;
+    max-height: 100px;
+}
diff --git a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.html b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.html
index 6be6d62bb7d..c23b4cbc770 100644
--- a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.html
+++ b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.html
@@ -8,18 +8,18 @@
         <ng-container *ngTemplateOutlet="touristSchemeTemplate"></ng-container>
         <!--        tourist scheme template end-->
         <div class="basic_detail mr-b1" *ngIf="showTaxationDiscountBox || shouldShowAdvanceReceiptMandatoryFields">
-            <table class="width100 total-detail-table">
+            <table class="width-100 total-detail-table">
 
-                <tbody class="">
+                <tbody>
 
                     <tr *ngIf="currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields">
 
-                        <td class="pItem qty-unit" *ngIf="currentTxn?.selectedAccount?.stock">
+                        <td class="item-padding qty-unit" *ngIf="currentTxn?.selectedAccount?.stock">
                             <table>
                                 <tbody>
                                     <tr>
                                         <td class="text-right width-70">
-                                            <label class="mr-05 font-12">Qty</label>
+                                            <label class="mr-r05 font-12">Qty</label>
                                             <input id="ledger-quantity" type="text" name="" class="form-control text-right"
                                                 [disabled]="shouldShowAdvanceReceiptMandatoryFields || isReadOnly ? 'disabled' : null"
                                                 (change)="changeQuantity($event.target.value)"
@@ -29,7 +29,7 @@
 
                                         <td *ngIf="currentTxn?.unitRate">
                                             <label class="font-12">Unit</label>
-                                            <select id="ledger-unit" class="form-control" style="width: 78px;"
+                                            <select id="ledger-unit" class="form-control"
                                                 [disabled]="shouldShowAdvanceReceiptMandatoryFields ? 'disabled' : null"
                                                 (change)="unitChanged($event.target.value)"
                                                 [value]="currentTxn?.inventory.unit.code">
@@ -49,10 +49,10 @@
 
                         <td class="text-center table-plus" *ngIf="currentTxn?.selectedAccount?.stock">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20 pt-04">x</label>
+                            <label class="font-20 pt-04">x</label>
                         </td>
 
-                        <td class="pItem text-right price" *ngIf="currentTxn?.selectedAccount?.stock">
+                        <td class="item-padding text-right price" *ngIf="currentTxn?.selectedAccount?.stock">
                             <label class="font-12">Price</label>
                             <input [disabled]="isReadOnly" type="text" id="ledger-price" [(ngModel)]="currentTxn.inventory.unit.rate"
                                 [prefix]="selectedPrefixForCurrency" [suffix]="selectedSuffixForCurrency"
@@ -60,7 +60,7 @@
                                 [mask]="inputMaskFormat" [customDecimalPlaces]="ratePrecision"
                                 (ngModelChange)="changePrice($event)" name="unitPrice"
                                 (keyup)="isInclusiveEntry = false" class="form-control text-right" />
-                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                 <ng-container *ngTemplateOutlet="totalWithCurrencySymbol"></ng-container>
                                 {{ currentTxn?.convertedRate | giddhCurrency: ratePrecision: true}}
                             </p>
@@ -68,12 +68,12 @@
 
                         <td class="text-center equal-2" *ngIf="currentTxn?.selectedAccount?.stock">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </td>
 
                         <td *ngIf="currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields"
-                            class="pItem text-right amount">
-                            <label class="primary_clr font-12">Amount</label>
+                            class="item-padding text-right amount">
+                            <label class="primary-color font-12">Amount</label>
                             <input [disabled]="isReadOnly" id="new-ledger-enter-amount" *ngIf="!isAdvanceReceipt" type="text" name="amount" class="form-control text-right"
                                 [prefix]="selectedPrefixForCurrency" [suffix]="selectedSuffixForCurrency"
                                 [mask]="inputMaskFormat" [(ngModel)]="currentTxn.amount" (focus)="hideDiscountTax()"
@@ -84,7 +84,7 @@
                                 [suffix]="selectedSuffixForCurrency" disabled [mask]="inputMaskFormat"
                                 [(ngModel)]="currentTxn.advanceReceiptAmount" (focus)="hideDiscountTax()"
                                 (keyup)="amountChanged();calculateTotal()" />
-                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                 <ng-container *ngTemplateOutlet="totalWithCurrencySymbol"></ng-container>
                                 {{ currentTxn?.convertedAmount | giddhCurrency}}
                             </p>
@@ -93,18 +93,18 @@
                         <td *ngIf="(showTaxationDiscountBox && currentTxn?.selectedAccount) && !shouldShowAdvanceReceiptMandatoryFields"
                             class="text-center table-minus">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20">-</label>
+                            <label class="font-20">-</label>
                         </td>
 
                         <!--discount-->
                         <td [attr.disabled]="isReadOnly ? 'disabled' : null" *ngIf="(showTaxationDiscountBox && currentTxn?.selectedAccount) && !shouldShowAdvanceReceiptMandatoryFields"
-                            class="custom-component pItem text-right price new-ledger-text-right" (click)="$event.stopPropagation()">
+                            class="custom-component item-padding text-right price new-ledger-text-right" (click)="$event.stopPropagation()">
                             <ledger-discount #discount id="ledger-discount" [discountAccountsDetails]="currentTxn.discounts"
                                 [maskInput]="inputMaskFormat" [prefixInput]="selectedPrefixForCurrency"
                                 [suffixInput]="selectedSuffixForCurrency" [ledgerAmount]="currentTxn.amount"
                                 (hideOtherPopups)="hideTax()" (discountTotalUpdated)="calculateDiscount($event);">
                             </ledger-discount>
-                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                 <ng-container *ngTemplateOutlet="totalWithCurrencySymbol"></ng-container>
                                 {{ currentTxn?.convertedDiscount | giddhCurrency}}
                             </p>
@@ -113,17 +113,17 @@
                         <td class="text-center equal-2"
                             *ngIf="(currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields) && (companyTaxesList$ | async)?.length">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20">+</label>
+                            <label class="font-20">+</label>
                         </td>
 
                         <td class="text-center equal-2"
                             *ngIf="(currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields) && !(companyTaxesList$ | async)?.length">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </td>
 
                         <td [attr.disabled]="isReadOnly ? 'disabled' : null" *ngIf="(currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields) && (companyTaxesList$ | async)?.length"
-                            class="custom-component pItem amount pos-rel dropdown-container text-right dropdown-width"
+                            class="custom-component item-padding amount position-relative dropdown-container text-right dropdown-width"
                             (clickOutside)="hideTax()" (click)="$event.stopPropagation()">
                             <!--tax control component-->
                             <!-- Login Changes by Sagar  -->
@@ -143,7 +143,7 @@
                             <!-- TODO: After design finalization
                                 <span class="eligible-ITC">Eligible for ITC <span class="icon-edit"></span> </span> -->
 
-                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                 <ng-container *ngTemplateOutlet="totalWithCurrencySymbol"></ng-container>
                                 {{ currentTxn.convertedTax |giddhCurrency}}
                             </p>
@@ -152,17 +152,17 @@
                         <td class="text-center equal-2"
                             *ngIf="(currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields) && (companyTaxesList$ | async)?.length">
                             <label class="d-block">&nbsp;</label>
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </td>
 
                         <td *ngIf="currentTxn?.selectedAccount || shouldShowAdvanceReceiptMandatoryFields"
-                            class="pItem text-right total-amn" id="totalTd" (resized)="onResized($event)">
-                            <label class="primary_clr font-12">Total</label>
+                            class="item-padding text-right total-amount-ledger" id="totalTd" (resized)="onResized($event)">
+                            <label class="primary-color font-12">Total</label>
                             <input [disabled]="isReadOnly" type="text" id="ledger-total-amount" [prefix]="selectedPrefixForCurrency" [suffix]="selectedSuffixForCurrency"
                                 [mask]="inputMaskFormat" name="totalAmount" class="form-control text-right"
                                 [(ngModel)]="currentTxn.total" (blur)="calculateAmount()"
                                 [disabled]="isAdvanceReceipt ? 'disabled' : null" />
-                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                 <ng-container *ngTemplateOutlet="totalWithCurrencySymbol"></ng-container>
                                 {{ currentTxn.convertedTotal | giddhCurrency}}
                             </p>
@@ -182,7 +182,7 @@
                 </div>
             </div>
             <div class="col-md-8 col-12" [ngClass]="{'offset-md-4' : !(currentTxn?.selectedAccount?.stock)}">
-                <div class="text-right mb-1" *ngIf="currentTxn.selectedAccount && showTaxationDiscountBox">
+                <div class="text-right mr-b1" *ngIf="currentTxn.selectedAccount && showTaxationDiscountBox">
 
                     <ng-container *ngIf="isTcsTdsApplicable">
                         <input [disabled]="isReadOnly" id="ledger-other-tax" type="checkbox" [(ngModel)]="blankLedger.isOtherTaxesApplicable"
@@ -217,7 +217,7 @@
         </div>
         <ng-container *ngIf="shouldShowRcmTaxableAmount">
             <div class="taxable-amount-section mr-1">
-                <label class="primary_clr">Taxable Amount</label>
+                <label class="primary-color">Taxable Amount</label>
                 <input [disabled]="isReadOnly" id="ledger-taxable-amount" type="text" name="taxable-amount" class="form-control text-right"
                     [prefix]="selectedPrefixForCurrency" [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                     [(ngModel)]="currentTxn.reverseChargeTaxableAmount" />
@@ -225,7 +225,7 @@
         </ng-container>
         <ng-container *ngIf="shouldShowItcSection">
             <div class="taxable-amount-section">
-                <label class="primary_clr">ITC Type</label>
+                <label class="primary-color">ITC Type</label>
                 <sh-select [disabled]="isReadOnly" [class.disabled-ledger]="isReadOnly" id="ledger-itc-type" [(ngModel)]="currentTxn.itcAvailable" [placeholder]="'ITC Type'"
                     [options]="availableItcList">
                 </sh-select>
@@ -237,17 +237,17 @@
                 [(ngModel)]="blankLedger.description"></textarea>
         </div>
 
-        <table class="width100 mr-t">
+        <table class="width-100 mr-t05">
             <tbody>
                 <tr>
-                    <td class="primary_clr pl-0" (click)="toggleMoreDetail();">
+                    <td class="primary-color pl-0" (click)="toggleMoreDetail();">
                         <i class="cp collapse-icons"
                             [ngClass]="{'icon-minus':showAdvanced, 'icon-plus': !showAdvanced}"></i>
-                        <button id="ledger-more-details" class="no-btn pdL0">&nbsp;More Details</button>
+                        <button id="ledger-more-details" class="no-btn pl-0">&nbsp;More Details</button>
                     </td>
 
                     <td class="text-right">
-                        <span class="primary_clr">
+                        <span class="primary-color">
                             Total in
                             {{ selectedCurrency === 0 ? baseCurrencyDetails?.code : foreignCurrencyDetails?.code }}:
                             <span>{{ selectedCurrency === 0 ? baseCurrencyDetails?.symbol : foreignCurrencyDetails?.symbol }}</span>
@@ -258,49 +258,46 @@
             </tbody>
         </table>
 
-        <div class="pd-1 mrB mr-t more-details" style="background: #fff;" *ngIf="showAdvanced">
+        <div class="pd-1 mr-b05 mr-t05 more-details" *ngIf="showAdvanced">
 
-            <div class="">
+            <div>
 
-                <div class="cheq pdT clearfix">
+                <div class="cheq pd-t05 clearfix">
 
                     <table>
                         <tr>
 
                             <td class="select2-parent pd-r1">
                                 <div class="form-group">
-                                    <label class="default_clr">Voucher Type</label>
+                                    <label class="default-color">Voucher Type</label>
                                     <sh-select [disabled]="isReadOnly" [class.disabled-ledger]="isReadOnly" id="ledger-voucher-type" #sh [options]="voucherTypeList | async" [isFilterEnabled]="true"
                                         (selected)="getInvoiceListsData($event)" [placeholder]="'Select Vouchers'"
                                         [(ngModel)]="blankLedger.voucherType" [ItemHeight]="'auto'"
                                         [style.width.px]="161"></sh-select>
                                 </div>
                             </td>
-                            <!-- <td class="pd-l1">
-    <span>{{""}}</span>
-</td> -->
                             <td class="pd-r1"
                                 *ngIf="(blankLedger.voucherType === 'sal' || blankLedger.voucherType === 'pur' || blankLedger.voucherType == 'pay')">
-                                <label class="default_clr">Invoice No.</label>
+                                <label class="default-color">Invoice No.</label>
                                 <input [disabled]="isReadOnly" id="ledger-invoice-number" type="text" placeholder="Invoice no." class="form-control"
                                     [(ngModel)]="blankLedger.invoiceNumberAgainstVoucher" />
                             </td>
 
                             <!-- <td class="pd-r1" *ngIf="blankLedger.voucherType == 'rcpt'">
                                 <div class="form-group">
-                                    <label class="default_clr">Invoice No.</label>
+                                    <label class="default-color">Invoice No.</label>
 
                                     <div class="btn-group btn-block invoice-btn" dropdown>
 
                                         <button dropdownToggle type="button"
                                             class="form-control text-left btn-block dropdown-toggle">
                                             Select Invoices
-                                            <span class="select_drop pull-right mr-t1">
+                                            <span class="select-drop pull-right mr-t1">
                                                 <i class="fa fa-caret-down"></i>
                                             </span>
                                         </button>
 
-                                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-2 width100" role="menu">
+                                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-2 width-100" role="menu">
                                             <li *ngIf="invoiceList.length==0">No results found</li>
                                             <li *ngFor="let invoice of invoiceList">
 
@@ -316,7 +313,7 @@
 
                             <td class="pd-r1" *ngIf="blankLedger.voucherType == 'credit note' || blankLedger.voucherType === 'debit note'">
                                 <div class="form-group">
-                                    <label class="default_clr">Voucher No.</label>
+                                    <label class="default-color">Voucher No.</label>
 
                                     <sh-select [disabled]="isReadOnly" [class.disabled-ledger]="isReadOnly" id="ledger-voucher-type-debit-note" [options]="invoiceList" #invoice placeholder="Select Invoice"
                                         [(ngModel)]="selectedInvoiceForCreditNote" [notFoundLink]="false"
@@ -369,7 +366,7 @@
                             </td>
                             <td (click)="isReadOnly ? '' : handleVoucherAdjustment()"
                                 class="cp pd-r1 pt-2" *ngIf="currentTxn?.voucherAdjustments?.totalAdjustmentAmount">
-                                <span class="text-gray advance-receipt-edit ml-05">
+                                <span class="text-gray advance-receipt-edit mr-l05">
                                     <i class="icon-edit-pencil"></i>
                                     Adjusted Amt.: {{currentTxn?.voucherAdjustments?.totalAdjustmentAmount}}</span>
                             </td>
@@ -384,13 +381,13 @@
                             <tr>
 
                                 <td class="pd-r1">
-                                    <label class="default_clr">Cheque Number</label>
+                                    <label class="default-color">Cheque Number</label>
                                     <input [disabled]="isReadOnly" id="ledger-cheque-number" type="text" placeholder="XXXX2619" class="form-control"
                                         [(ngModel)]="blankLedger.chequeNumber" />
                                 </td>
 
                                 <td>
-                                    <label class="default_clr">Cheque Clearance Date</label>
+                                    <label class="default-color">Cheque Clearance Date</label>
                                     <input [disabled]="isReadOnly" type="text" autocomplete="off" class="form-control" id="chequeClearanceDate"
                                         [(ngModel)]="blankLedger.chequeClearanceDate" bsDatepicker #chbs='bsDatepicker'
                                         [outsideClick]="true"
@@ -408,8 +405,8 @@
 
                             <tr>
 
-                                <td class="">
-                                    <label class="default_clr">Assign Tag</label>
+                                <td>
+                                    <label class="default-color">Assign Tag</label>
                                     <sh-select [disabled]="isReadOnly" [class.disabled-ledger]="isReadOnly" id="ledger-assign-tag" [options]="tags$ | async" [multiple]="true" [isFilterEnabled]="true"
                                         [placeholder]="'Select Tag'" [(ngModel)]="blankLedger.tagNames"
                                         [ItemHeight]="'auto'"></sh-select>
@@ -428,7 +425,7 @@
         <!--map bank transactions-->
         <div class="row">
 
-            <div [class.disabled-item]="isReadOnly" class="col-7 form-group pr" *ngIf="isBankTransaction">
+            <div [class.disabled-item]="isReadOnly" class="col-7 form-group position-relative" *ngIf="isBankTransaction">
                 <a href="javascript:void(0)" (click)="getReconciledEntries()">Map Transaction
                     <span *ngIf="showMatchingEntries">with</span>
                 </a>
@@ -437,7 +434,7 @@
 
                     <li class="cp" *ngFor="let entry of matchingEntriesData;"
                         (click)="confirmBankTransactionMap(entry)">
-                        <table class="table table-bordered mr0">
+                        <table class="table table-bordered m-0">
                             <tbody>
                                 <tr *ngFor="let txn of entry.transactions;">
                                     <td>{{entry.entryDate}}</td>
@@ -456,9 +453,9 @@
 
             <div class="col-12 col-md-12 clearfix mr-t1">
 
-                <div class="mrR1 form-group pull-left cp">
+                <div class="mr-r1 form-group pull-left cp">
 
-                    <label class="pull-left cp fs16">
+                    <label class="pull-left cp font-16">
                         <input id="ledger-generate-voucher" class="pull-left" type="checkbox" name="generateInvoice" [disabled]="((isAdvanceReceipt || isAdjustReceiptSelected || isAdjustVoucherSelected || blankLedger.voucherType === 'credit note' || blankLedger.voucherType === 'debit note') && blankLedger.generateInvoice) || isReadOnly ? 'disabled' : null"
                             [(ngModel)]="blankLedger.generateInvoice">
                         Generate Voucher
@@ -468,7 +465,7 @@
 
                 <div class="pull-right">
                     <div class="clearfix">
-                        <p class="primary_clr" *ngIf="isLedgerAccountAllowsMultiCurrency">Total in
+                        <p class="primary-color" *ngIf="isLedgerAccountAllowsMultiCurrency">Total in
                             {{ selectedCurrency === 0 ? foreignCurrencyDetails?.code : baseCurrencyDetails?.code }}: {{ selectedCurrency
               === 0 ? foreignCurrencyDetails?.symbol : baseCurrencyDetails?.symbol }} {{ blankLedger.convertedCompoundTotal
               | giddhCurrency }}
@@ -479,12 +476,11 @@
 
             <div class="clearfix w-100">
 
-                <div class="pull-left pl-15">
+                <div class="pull-left pd-l15">
 
                     <ul class="list-inline font-14" *ngIf="isLedgerAccountAllowsMultiCurrency">
                         <li>
-                            1 {{ blankLedger.selectedCurrencyToDisplay === 0 ? blankLedger.baseCurrencyToDisplay?.code : blankLedger.foreignCurrencyToDisplay?.code
-              }}
+                            1 {{ blankLedger.selectedCurrencyToDisplay === 0 ? blankLedger.baseCurrencyToDisplay?.code : blankLedger.foreignCurrencyToDisplay?.code}}
                         </li>
 
                         <li>
@@ -506,13 +502,13 @@
                     <input [disabled]="isReadOnly" type="file" [hidden]="true" name="invoiceFile" id="invoiceFile" [options]="fileUploadOptions"
                         ngFileSelect [uploadInput]="uploadInput" (uploadOutput)="onWebUpload($event)" #webFileInput
                         (click)="onUploadOutput()">
-                    <label class="upload_div pr-15"
+                    <label class="upload-div pd-r15"
                         [ngClass]="{hide:blankLedger?.generateInvoice || blankLedger?.attachedFile}">
 
-                        <label for="invoiceFile" class="cp fs16">
+                        <label for="invoiceFile" class="cp font-16">
                             <i [ngClass]="!isFileUploading ? 'icon-file-path' : 'fa fa-spinner rotate'"></i> Attach file</label>
                     </label>
-                    <div class="file_attached clearfix text-right pr-15" *ngIf="blankLedger?.attachedFile?.length > 0">
+                    <div class="file_attached clearfix text-right pd-r15" *ngIf="blankLedger?.attachedFile?.length > 0">
                         <span>{{ blankLedger.attachedFileName }}</span>
                         <label class="remove cp text-danger pl-1"
                             (click)="showDeleteAttachedFileModal()">(remove)</label>
@@ -605,7 +601,7 @@
     </div>
 </ng-template>
 <ng-template #touristSchemeTemplate>
-    <div class="row font-14 mb-1" *ngIf="isTouristSchemeApplicable">
+    <div class="row font-14 mr-b1" *ngIf="isTouristSchemeApplicable">
         <div class="col-md-6">
             <div class="d-flex align-items-center">
                 <span class="pull-left">
diff --git a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.scss b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.scss
index 9cd73cbe191..a2278ce3262 100644
--- a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.scss
@@ -3,6 +3,7 @@
 .ledger-panel {
     overflow: visible;
     .more-details {
+        background-color: $white;
         .cheq {
             table {
                 td.remove-invoice {
@@ -23,9 +24,9 @@
 }
 
 .ledger-panel table tbody tr td a {
-    color: #333;
+    color: $night-rider;
 }
-.pItem {
+.item-padding {
     padding: 0 4px;
 }
 
@@ -34,9 +35,9 @@
     overflow-y: scroll;
 }
 
-.amnt-total {
+.amount-total {
     font-size: 12px;
-    color: #999999;
+    color: $nobel;
     padding-left: 5px;
 }
 
@@ -99,17 +100,24 @@ span.eligible-ITC {
         color: $deep-sky-blue;
     }
 }
+
 .disabled-item {
     pointer-events: none;
 }
 .custom-component[disabled] {
     pointer-events: none;
 }
+
+#ledger-unit{
+    width: 78px;
+}
+
 .collapse-icons{
     font-size: 10px;
     border: 1px solid $black;
     padding: 2px;
 }
+
 @media only screen and (max-width: 767px) {
     .ledger-panel .btn {
         margin-bottom: 13px;
@@ -142,7 +150,7 @@ span.eligible-ITC {
         width: 10%;
         text-align: center;
     }
-    .total-amn {
+    .total-amount-ledger {
         width: 100%;
     }
     .total-detail-table > tbody > tr {
@@ -178,5 +186,5 @@ span.eligible-ITC {
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg) } }
 .sh-template {
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
 }
diff --git a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.ts b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.ts
index d8a6546133c..8f59f99e237 100644
--- a/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.ts
+++ b/apps/web-giddh/src/app/ledger/components/newLedgerEntryPanel/newLedgerEntryPanel.component.ts
@@ -36,7 +36,7 @@ import { UploaderOptions, UploadInput, UploadOutput } from 'ngx-uploader';
 import { createSelector } from 'reselect';
 import { BehaviorSubject, Observable, of as observableOf, ReplaySubject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
-
+import * as moment from 'moment/moment';
 import {
     CONFIRMATION_ACTIONS,
     ConfirmationModalConfiguration,
@@ -881,8 +881,8 @@ export class NewLedgerEntryPanelComponent implements OnInit, OnDestroy, OnChange
         let o: ReconcileRequest = {};
         o.chequeNumber = (this.blankLedger.chequeNumber) ? this.blankLedger.chequeNumber : '';
         o.accountUniqueName = this.trxRequest.accountUniqueName;
-        o.from = this.trxRequest.from;
-        o.to = this.trxRequest.to;
+        o.from = (this.trxRequest.from) ? moment(this.trxRequest.from).format(GIDDH_DATE_FORMAT) : "";
+        o.to = (this.trxRequest.to) ? moment(this.trxRequest.to).format(GIDDH_DATE_FORMAT) : "";
         this._ledgerService.GetReconcile(o.accountUniqueName, o.from, o.to, o.chequeNumber).subscribe((res) => {
             let data: BaseResponse<ReconcileResponse[], string> = res;
             if (data.status === 'success') {
@@ -1034,13 +1034,15 @@ export class NewLedgerEntryPanelComponent implements OnInit, OnDestroy, OnChange
      */
     public creditNoteInvoiceSelected(event: any): void {
         if (event && event.value && event.additional) {
-            this.currentTxn.invoiceLinkingRequest = {
-                linkedInvoices: [
-                    {
-                        invoiceUniqueName: event.value,
-                        voucherType: event.additional.voucherType
-                    }
-                ]
+            if(this.currentTxn) {
+                this.currentTxn.invoiceLinkingRequest = {
+                    linkedInvoices: [
+                        {
+                            invoiceUniqueName: event.value,
+                            voucherType: event.additional.voucherType
+                        }
+                    ]
+                }
             }
             this.selectedInvoiceAmount = event.additional.balanceDue.amountForAccount;
             this.blankLedger.generateInvoice = true;
@@ -1054,7 +1056,9 @@ export class NewLedgerEntryPanelComponent implements OnInit, OnDestroy, OnChange
      */
     public removeSelectedInvoice(): void {
         this.forceClear$ = observableOf({ status: true });
-        this.currentTxn.invoiceLinkingRequest = null;
+        if(this.currentTxn) {
+            this.currentTxn.invoiceLinkingRequest = null;
+        }
         this.selectedInvoiceForCreditNote = null;
         this.blankLedger.generateInvoice = false;
     }
diff --git a/apps/web-giddh/src/app/ledger/components/shareLedger/shareLedger.component.html b/apps/web-giddh/src/app/ledger/components/shareLedger/shareLedger.component.html
index 5d23b5ad262..c6c5c420487 100644
--- a/apps/web-giddh/src/app/ledger/components/shareLedger/shareLedger.component.html
+++ b/apps/web-giddh/src/app/ledger/components/shareLedger/shareLedger.component.html
@@ -1,16 +1,16 @@
 <div id="share-modal">
-	<div id="share-modal" class="" ng-if="ledgerCtrl.toggleShare">
+	<div id="share-modal" ng-if="ledgerCtrl.toggleShare">
 		<div class="modal-header">
 			<span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeShareLedgerModal.emit()"
 				aria-label="Close">×</span>
 			<h3>Share Ledger</h3>
 		</div>
 
-		<div class="modal-body mrB4" id="SharePop">
+		<div class="modal-body mr-b4" id="SharePop">
 			<div class="row">
 				<div class="col-md-10">
 
-					<div class="modal_wrap">
+					<div class="modal-wrap">
 						<!-- <h3 class="pd-b1">Share with</h3> -->
 						<div class="form-group add-mailer">
 							<label>Share with</label>
@@ -31,13 +31,13 @@ <h3>Share Ledger</h3>
 							<!--shared with array-->
 							<div class="row mr-b2" *ngIf="activeAccountSharedWith?.length > 0">
 								<div class="col-sm-8">
-									<ul class="shared_list">
+									<ul class="shared-list">
 										<li *ngFor="let val of activeAccountSharedWith" class="clearfix">
 											<span class="pull-left">
 												<small class="Useremail">{{ val.emailId }}</small>
 											</span>
 											<span>
-												<span class="delIcon pull-right">
+												<span class="delete-icon pull-right">
 													<i (click)="unShareAccount(val.uniqueName, val.emailId)"
 														class="icon-cross" aria-hidden="true"></i>
 												</span>
@@ -48,12 +48,12 @@ <h3>Share Ledger</h3>
 							</div>
 						</div>
 					</div>
-					<!-- <h3 class="pdB2 clearfix"></h3> -->
-					<div class="modal_wrap clearfix">
+					<!-- <h3 class="pd-b2 clearfix"></h3> -->
+					<div class="modal-wrap clearfix">
 						<div class="clearfix">
 							<span>Or</span>
 							<button class="btn-link btn" (click)="getMagicLink()">Get shareable link</button>
-							<!-- <span class="l8grey">Get shareable link</span> -->
+							<!-- <span class="light-gray">Get shareable link</span> -->
 							<span class="success" *ngIf="isCopied">Copied..</span>
 						</div>
 						<div class="input-group">
@@ -66,7 +66,7 @@ <h3>Share Ledger</h3>
 							<!-- /btn-group -->
 						</div>
 						<!-- /input-group -->
-						<small class="mr-t1 l8grey">Anyone can see the ledger who gets this URL.</small>
+						<small class="mr-t1 light-gray">Anyone can see the ledger who gets this URL.</small>
 					</div>
 
 				</div>
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.html b/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.html
index 9ca70366b0f..49645902e3c 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.html
+++ b/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.html
@@ -1,4 +1,4 @@
-<span class="pr c-dropdown" [ngClass]="{'open': showTaxPopup}" [attachOutsideOnClick]="true"
+<span class="position-relative custom-dropdown-ledger" [ngClass]="{'open': showTaxPopup}" [attachOutsideOnClick]="true"
     (clickOutside)="toggleTaxPopup(false)">
     <label *ngIf="showHeading">{{ customHeading ? customHeading : 'Tax' }} <sup class="mandatory-asterisk" *ngIf="isMandatory">*</sup></label>
 
@@ -16,11 +16,11 @@
         <ul class="dropdown-menu pd update-ledger-tax-dropdown" [ngStyle]="{'display': showTaxPopup ? 'block': 'none'}"
             (click)="$event.stopPropagation()">
             <li *ngFor="let tax of taxRenderData;trackBy: trackByFn; let i = index">
-                <label class="checkbox oh width100 p0 m0 customItem bdrB" style="padding: 5px;margin-bottom: 5px;"
+                <label class="checkbox overflow-hidden width-100 p-0 m-0 custom-item bd-rb px-1 py-1 mr-b05"
                     (click)="$event.stopPropagation()" [ngClass]="{'disabled-label': tax.isDisabled}">
                     <input class="pull-left" id="{{ 'update-ledger-tax-checkbox-' + i }}" type="checkbox" [(ngModel)]="tax.isChecked" [disabled]="tax.isDisabled"
                         (change)="change()" (click)="$event.stopPropagation()" />
-                    <span class="pull-left ellp">{{tax.name}}</span>
+                    <span class="pull-left text-ellipsis">{{tax.name}}</span>
                 </label>
             </li>
         </ul>
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.scss b/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.scss
index 4f071935973..03d387e1361 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/updateLedger-tax-control/updateLedger-tax-control.component.scss
@@ -1,7 +1,7 @@
 .dropdown-menu {
     height: auto !important;
 }
-.c-dropdown {
+.custom-dropdown-ledger {
     .dropdown-menu li label span {
         max-width: calc(100% - 31px) !important;
     }
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.html b/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.html
index c7170bdb060..4baf238ba41 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.html
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.html
@@ -11,47 +11,46 @@
 	</a>
 
 	<div class="my-dropdown-menu pd" [ngStyle]="{'display': discountMenu ? 'block': 'none'}"
-		(click)="$event.stopPropagation()" style="padding: 10px;">
+		(click)="$event.stopPropagation()">
 
 		<div>
 
-			<div class="d-flex mb-1">
+			<div class="d-flex mr-b1">
 
-				<label class="mr-1 align-items-center d-flex" style="width: 50px">Percent</label>
+				<label class="mr-1 align-items-center d-flex percent-label">Percent</label>
 
-				<div class="pos-rel">
+				<div class="position-relative percent-wrapper">
 					<input type="text" id="update-ledger-discount-percent" class="form-control text-right cursor-pointer" [disabled]="!discountFromPer"
 						decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountPercentageModal"
-						(input)="discountFromInput('PERCENTAGE', $event.target.value)"
-						style="width: 100px;padding-right: 20px !important;">
-					<i class="fa fa-percent pos-abs" style="top: 9px;right: 6px;color: #acb0b9;"></i>
+						(input)="discountFromInput('PERCENTAGE', $event.target.value)">
+					<i class="fa fa-percent pos-abs"></i>
 				</div>
 
 			</div>
 
-			<div class="d-flex mb-1">
-				<label class="mr-1 align-items-center d-flex" style="width: 50px">Value</label>
-				<input type="text" id="update-ledger-discount-value" class="form-control text-right cursor-pointer" [disabled]="!discountFromVal"
+			<div class="d-flex mr-b1">
+				<label class="mr-1 align-items-center d-flex value-label">Value</label>
+				<input type="text" id="update-ledger-discount-value" class="form-control text-right cursor-pointer w100" [disabled]="!discountFromVal"
 					decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountFixedValueModal"
-					(input)="discountFromInput('FIX_AMOUNT', $event.target.value)" style="width: 100px">
+					(input)="discountFromInput('FIX_AMOUNT', $event.target.value)">
 			</div>
 
 		</div>
 
-		<div class="d-flex flex-col" style="justify-content: center" *ngIf="discountAccountsDetails?.length > 1">
+		<div class="d-flex flex-col justify-content-center" *ngIf="discountAccountsDetails?.length > 1">
 			<span class="or-line">AND</span>
 		</div>
 
 		<div *ngIf="discountAccountsDetails?.length > 1">
-			<ul style="list-style: none;overflow: auto;max-height: 100px">
+			<ul class="discount-list">
 
 
 				<ng-container *ngFor="let discount of discountAccountsDetails;trackBy: trackByFn; let idx = index">
-					<li *ngIf="idx > 0" class="discount-item" style="padding: 5px;margin-bottom: 5px;">
-						<label class="checkbox oh width100 p0 m0" (click)="$event.stopPropagation()">
+					<li *ngIf="idx > 0" class="discount-item">
+						<label class="checkbox overflow-hidden width-100 p-0 m-0" (click)="$event.stopPropagation()">
 							<input class="pull-left" id="{{'update-ledger-discount-checkbox-' + idx }}" name="tax_{{idx}}" type="checkbox" [(ngModel)]="discount.isActive"
 								(change)="change()" (click)="$event.stopPropagation()" />
-							<span class="pull-left ellp">{{discount.name}}</span>
+							<span class="pull-left text-ellipsis">{{discount.name}}</span>
 						</label>
 					</li>
 				</ng-container>
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.scss b/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.scss
index a96532c100b..b96dcb074cf 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerDiscount/updateLedgerDiscount.component.scss
@@ -1,6 +1,8 @@
+@import "../../../../assets/css/color.scss";
+
 .or-line::before {
     content: " ";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $gainsboro;
     display: inline-block;
     width: 57px;
     margin-right: 13px;
@@ -8,7 +10,7 @@
 
 .or-line::after {
     content: "";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $gainsboro;
     display: inline-block;
     width: 57px;
     margin-left: 13px;
@@ -17,7 +19,7 @@
 .or-line {
     display: flex;
     align-items: center;
-    color: #a2a2a2;
+    color: $dim-gray;
     margin-bottom: 10px;
 }
 .discount-item{
@@ -25,3 +27,28 @@
          height: 19px;
      }
 }
+
+.my-dropdown-menu{
+    padding: 10px;
+}
+.percent-label, .value-label{
+    width: 50px;
+}
+.percent-wrapper{
+   width: 100px;
+   padding-right: 20px !important;
+   .fa-percent{
+       top: 9px;
+       right: 6px;
+       color: $gray;
+   }
+}
+.discount-list{
+   list-style: none;
+   overflow: auto;
+   max-height: 100px;
+   .discount-item{
+       padding: 5px;
+       margin-bottom: 5px;
+   }
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedger.vm.ts b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedger.vm.ts
index d16ec6ae960..06010d6fdde 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedger.vm.ts
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedger.vm.ts
@@ -659,11 +659,19 @@ export class UpdateLedgerVm {
     public getUnderstandingText(selectedLedgerAccountType, accountName) {
         let data = _.cloneDeep(underStandingTextData.find(p => p.accountType === selectedLedgerAccountType));
         if (data) {
-            data.balanceText.cr = data.balanceText.cr.replace('<accountName>', accountName);
-            data.balanceText.dr = data.balanceText.dr.replace('<accountName>', accountName);
+            if(data.balanceText && data.balanceText.cr) {
+                data.balanceText.cr = data.balanceText.cr.replace('<accountName>', accountName);
+            }
+            if(data.balanceText && data.balanceText.dr) {
+                data.balanceText.dr = data.balanceText.dr.replace('<accountName>', accountName);
+            }
 
-            data.text.dr = data.text.dr.replace('<accountName>', accountName);
-            data.text.cr = data.text.cr.replace('<accountName>', accountName);
+            if(data.text && data.text.dr) {
+                data.text.dr = data.text.dr.replace('<accountName>', accountName);
+            }
+            if(data.text && data.text.cr) {
+                data.text.cr = data.text.cr.replace('<accountName>', accountName);
+            }
             this.ledgerUnderStandingObj = _.cloneDeep(data);
         }
     }
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.html b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.html
index 568e2a6964d..b2003bf4a4d 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.html
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.html
@@ -13,19 +13,19 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
             [enableDynamicSearch]="true" [notFoundMsg]="noResultsFoundLabel" (onHide)="handleSuggestionHide()"
             [class.disabled-ledger]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1"
             filterPlaceholder="Type to filter.." name="accountUniqueName" [(ngModel)]="baseAccountName$" [showClear]="false"
-            [options]="searchResults" style="width:30%">
+            [options]="searchResults">
             <ng-template #optionTemplate let-option="option">
                 <ng-container *ngIf="!option.additional?.stock">
-                    <a href="javascript:void(0)" (click)="changeBaseAccount(option)" style="border-bottom: 1px solid #ccc;">
+                    <a href="javascript:void(0)" (click)="changeBaseAccount(option)" class="bd-rb">
                         <div class="item">{{option?.label}}</div>
-                        <div class="item-unique fs12">{{option.additional?.uniqueName}}</div>
+                        <div class="item-unique font-12">{{option.additional?.uniqueName}}</div>
                     </a>
                 </ng-container>
                 <ng-container *ngIf="option.additional?.stock">
-                    <a href="javascript:void(0)" (click)="changeBaseAccount(option)" style="border-bottom: 1px solid #ccc;">
+                    <a href="javascript:void(0)" (click)="changeBaseAccount(option)" class="bd-rb">
                         <div class="item">{{option?.label}}</div>
-                        <div class="item-unique fs12">{{option.additional?.uniqueName}}</div>
-                        <div class="item_stock">Stock: {{option.additional?.stock.name}}</div>
+                        <div class="item-unique font-12">{{option.additional?.uniqueName}}</div>
+                        <div class="item-stock">Stock: {{option.additional?.stock.name}}</div>
                     </a>
                 </ng-container>
             </ng-template>
@@ -67,22 +67,22 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
             <div class="ledger-book">
                 <!-- region debit transaction -->
-                <div class="left-col-new bdrR" [ngClass]="Shown ? 'active' : ''">
+                <div class="left-col-new bd-rr" [ngClass]="Shown ? 'active' : ''">
 
                     <!-- region debit transaction header -->
-                    <table class="width100 card-table">
+                    <table class="width-100 card-table">
 
                         <thead class="hidden-xs">
-                            <tr class="t-h-bg1 row">
+                            <tr class="thead-background1 row">
 
-                                <th class="col-3" style="border-top:none">
+                                <th class="col-3 border-top-none">
                                     <span class="cursor-pointer">
                                         Date
                                     </span>
                                 </th>
-                                <th class="col-5" style="border-top:none">Particular</th>
+                                <th class="col-5 border-top-none">Particular</th>
 
-                                <th class="col-4 text-right" style="border-top:none">
+                                <th class="col-4 text-right border-top-none">
                                     Amount
                                 </th>
                             </tr>
@@ -90,7 +90,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         <tbody class="ledger-main">
                             <tr class="debit-blank-row row"
-                                *ngFor="let txn of vm.selectedLedger.transactions; let i = index; ">
+                                *ngFor="let txn of vm.selectedLedger.transactions; let i = index; trackBy: trackByFunction">
                                 <ng-container *ngIf="txn.type === 'DEBIT'">
 
                                     <td class="col-3" data-title="Date">
@@ -102,8 +102,8 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                     </td>
 
                                     <td data-title="Particular" id="{{'debit-id-' + i}}"
-                                        [ngClass]="{ 'otherAccountEntry': txn.particular.uniqueName === 'others' }"
-                                        class="col-5 pos-rel select2-parent select2-ledger">
+                                        [ngClass]="{ 'other-account-entry': txn.particular.uniqueName === 'others' }"
+                                        class="col-5 position-relative select2-parent select2-ledger">
 
 
                                         <ng-template [ngIf]="!txn.isDiscount">
@@ -124,7 +124,6 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                                     (selected)="selectAccount($event,txn, dbtSelect)"
                                                     [showClear]="false" [(ngModel)]="txn.particular.uniqueName"
                                                     [ItemHeight]="67" (onShow)="dbs.hide()"
-                                                    [useInBuiltFilterForFlattenAc]="true"
                                                     [fixedValue]="txn.particular.name"
                                                     [defaultValue]="txn.particular.name"
                                                     [placeholder]="'To Select Accounts'">
@@ -132,8 +131,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                                     <ng-template #optionTemplate let-option="option">
 
                                                         <ng-container *ngIf="!option.additional?.stock">
-                                                            <a href="javascript:void(0)" class="list-item"
-                                                                style="border-bottom: 1px solid #ccc;">
+                                                            <a href="javascript:void(0)" class="list-item bd-rb">
                                                                 <div class="item">{{ option.label }}</div>
                                                                 <div class="item-unique">
                                                                     {{ option.additional?.uniqueName }}
@@ -142,8 +140,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                                         </ng-container>
 
                                                         <ng-container *ngIf="option.additional?.stock">
-                                                            <a href="javascript:void(0)" class="list-item"
-                                                                style="border-bottom: 1px solid #ccc;">
+                                                            <a href="javascript:void(0)" class="list-item bd-rb">
                                                                 <div class="item">{{ option.label }}</div>
                                                                 <div class="item-unique">
                                                                     {{ option.additional?.uniqueName }}
@@ -174,7 +171,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                         <ng-template [ngIf]="txn.isDiscount">
                                             To
                                             <input [disabled]="true" [(ngModel)]="txn.particular.name"
-                                                class="trxFakeInput" />
+                                                class="transaction-particular-name" />
                                         </ng-template>
 
                                         <span class="download-invoice-ledger"
@@ -185,7 +182,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                             <i class="icon-download-circle pull-left" ></i>
                                         </span>
 
-                                        <span class="download-invoice-ledger "
+                                        <span class="download-invoice-ledger"
                                             *ngIf="vm.selectedLedger.voucherNumber && vm.selectedLedger.voucherNumber.length> 0 && (txn?.particular?.name || txn?.particular?.uniqueName)"
                                             [placement]="'left'" [containerClass]="'col-xs-3'"
                                             tooltip="Download {{vm.selectedLedger.voucherGeneratedType === 'sales' ? 'Invoice': 'Voucher'}} : {{vm.selectedLedger.voucherNumber}}"
@@ -203,7 +200,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                             [suffix]="vm.selectedSuffixForCurrency"
                                             (click)="addBlankTrx('DEBIT', txn, $event)" (blur)="onTxnAmountChange(txn)">
 
-                                        <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                                        <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                             <ng-container
                                                 *ngTemplateOutlet="totalWithCurrencySymbol;context:{ $implicit: txn.convertedAmount }">
                                             </ng-container>
@@ -225,7 +222,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                             <tr class="total-col row">
 
                                 <td colspan="12" class="col-12 col-sm-12 text-right h32">
-                                    <span *ngIf="vm.entryTotal.crTotal > vm.entryTotal.drTotal" class="pd2"
+                                    <span *ngIf="vm.entryTotal.crTotal > vm.entryTotal.drTotal" class="pd-2"
                                         [tooltip]="vm.ledgerUnderStandingObj.balanceText.cr" [placement]="'top'">
                                         C/F: CR {{ vm.baseCurrencyDetails?.symbol}} {{ vm.compoundTotal | giddhCurrency}}
                                     </span>
@@ -237,12 +234,12 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 <!-- reckoning -->
                                 <td colspan="12" class="col-12 col-sm-12 text-right h32">
 
-                                    <span class="bdrT pr-1 pl-1 width-200">
+                                    <span class="bd-rt pr-1 pl-1 width-200">
                                         {{ vm.baseCurrencyDetails?.symbol}} {{ (vm.entryTotal.drTotal > vm.entryTotal.crTotal ? vm.entryTotal.drTotal : vm.entryTotal.crTotal)
                                         | giddhCurrency}}
                                     </span>
 
-                                    <p class="mb-0 amnt-total pr-1" *ngIf="vm.isMultiCurrencyAvailable">
+                                    <p class="mb-0 amount-total pr-1" *ngIf="vm.isMultiCurrencyAvailable">
                                         <ng-container *ngTemplateOutlet="totalWithCurrencySymbol;context: {
                       $implicit: (vm.convertedEntryTotal.drTotal > vm.convertedEntryTotal.crTotal ? vm.convertedEntryTotal.drTotal : vm.convertedEntryTotal.crTotal)
                     }"></ng-container>
@@ -263,17 +260,17 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                 <div class="right-col-new" [ngClass]="isHide ? 'active' : 'right-col-new'">
 
                     <!-- region credit transaction header -->
-                    <table class="width100 card-table">
+                    <table class="width-100 card-table">
                         <thead class="xs-hidden">
-                            <tr class="t-h-bg1 row">
-                                <th class="col-3" style="border-top:none">
+                            <tr class="thead-background1 row">
+                                <th class="col-3 border-top-none">
                                     <span class="cursor-pointer">
                                         Date
                                     </span>
 
                                 </th>
-                                <th class="col-5" style="border-top:none">Particular</th>
-                                <th class="col-4 text-right" style="border-top:none">Amount</th>
+                                <th class="col-5 border-top-none">Particular</th>
+                                <th class="col-4 text-right border-top-none">Amount</th>
                             </tr>
                         </thead>
 
@@ -290,8 +287,8 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                     </td>
 
                                     <td data-title="Particular" id="{{'credit-id-' + i}}"
-                                        class="pos-rel col-5 select2-parent select2-ledger"
-                                        [ngClass]="{ otherAccountEntry: txn.particular.uniqueName === 'others' }">
+                                        class="position-relative col-5 select2-parent select2-ledger"
+                                        [ngClass]="{ 'other-account-entry': txn.particular.uniqueName === 'others' }">
 
                                         <ng-template [ngIf]="!txn?.isDiscount">
                                             <div class="d-flex update-ledger-account">
@@ -312,15 +309,13 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                                     [fixedValue]="txn.particular.name"
                                                     (onShow)="cbs.hide()" [showClear]="false"
                                                     [(ngModel)]="txn.particular.uniqueName" [ItemHeight]="67"
-                                                    [useInBuiltFilterForFlattenAc]="true"
                                                     [defaultValue]="txn.particular.name"
                                                     [fixedValue]="txn.particular.name"
                                                     [placeholder]="'By Select Accounts'">
 
                                                     <ng-template #optionTemplate let-option="option">
                                                         <ng-container *ngIf="!option.additional?.stock">
-                                                            <a href="javascript:void(0)" class="list-item"
-                                                                style="border-bottom: 1px solid #ccc;">
+                                                            <a href="javascript:void(0)" class="list-item bd-rb">
                                                                 <div class="item">{{ option.label }}</div>
                                                                 <div class="item-unique">
                                                                     {{ option.additional?.uniqueName }}
@@ -329,8 +324,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                                         </ng-container>
 
                                                         <ng-container *ngIf="option.additional?.stock">
-                                                            <a href="javascript:void(0)" class="list-item"
-                                                                style="border-bottom: 1px solid #ccc;">
+                                                            <a href="javascript:void(0)" class="list-item bd-rb">
                                                                 <div class="item">{{ option.label }}</div>
                                                                 <div class="item-unique">
                                                                     {{ option.additional?.uniqueName }}
@@ -358,7 +352,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                                         <ng-template [ngIf]="txn?.isDiscount">
                                             <input id="update-ledger-discount" [disabled]="true" [(ngModel)]="txn.particular.name"
-                                                class="trxFakeInput" />
+                                                class="transaction-particular-name" />
                                         </ng-template>
 
                                         <span class="download-invoice-ledger"
@@ -384,7 +378,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                             [suffix]="vm.selectedSuffixForCurrency" [rawInputValue]="txn.amount"
                                             (click)="addBlankTrx('CREDIT', txn, $event)"
                                             (blur)="onTxnAmountChange(txn)">
-                                        <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                                        <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                             <ng-container
                                                 *ngTemplateOutlet="totalWithCurrencySymbol;context:{ $implicit: txn.convertedAmount}">
                                             </ng-container>
@@ -404,7 +398,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                             <tr class="total-col row">
                                 <td colspan="12" class="col-12  col-sm-12 text-right h32">
                                     <span *ngIf="vm.entryTotal.drTotal > vm.entryTotal.crTotal">C/F: Dr
-                                        <span class="primary_clr pd2"
+                                        <span class="primary-color pd-2"
                                             [tooltip]="vm.ledgerUnderStandingObj.balanceText.dr" [placement]="'top'">
                                             {{ vm?.baseCurrencyDetails?.symbol }}
                                             {{ vm.compoundTotal | giddhCurrency}}</span>
@@ -413,14 +407,13 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                             </tr>
                             <tr class="total-col row">
                                 <!-- reckoning -->
-                                <td colspan="12" class="col-12 col-sm-12 text-right h32"
-                                    style="padding-right:10px !important;">
-                                    <span class="bdrT">
+                                <td colspan="12" class="col-12 col-sm-12 text-right h32 pd-r1">
+                                    <span class="bd-rt">
                                         {{ vm.baseCurrencyDetails?.symbol }} {{ (vm.entryTotal.crTotal > vm.entryTotal.drTotal ? vm.entryTotal.crTotal : vm.entryTotal.drTotal)
                                         | giddhCurrency }}
                                     </span>
 
-                                    <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                                    <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                         <ng-container *ngTemplateOutlet="totalWithCurrencySymbol;context: {
                       $implicit: (vm.convertedEntryTotal.crTotal > vm.convertedEntryTotal.drTotal ? vm.convertedEntryTotal.crTotal : vm.convertedEntryTotal.drTotal)
                     }"></ng-container>
@@ -437,7 +430,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
         <!-- endregion -->
 
         <!-- region new entry -->
-        <div class="entrypanel width100 pt-2">
+        <div class="entrypanel width-100 pt-2">
             <!-- reverse charge transction start -->
             <div *ngIf="shouldShowRcmEntry" class="pd-b1 mt-1 tourist-scheme-wrapper">
                 <input id="tourist-scheme-1" class="checkbox-custom" type="checkbox" [ngModel]="isRcmEntry"
@@ -459,7 +452,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
             <!-- region amount and discount container -->
             <div class="clearfix">
                 <ng-container *ngIf="vm.showNewEntryPanel || shouldShowAdvanceReceiptMandatoryFields">
-                    <div class="width100 total-detail-table"
+                    <div class="width-100 total-detail-table"
                         [ngClass]="{'add-multicurrency': vm.isMultiCurrencyAvailable}">
                         <!-- <div *ngIf="vm.stockTrxEntry" class="table-amount">
                           <table>
@@ -521,7 +514,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                     [prefix]="vm.selectedPrefixForCurrency" [suffix]="vm.selectedSuffixForCurrency"
                                     [rawInputValue]="vm.stockTrxEntry.inventory.rate"
                                     [(ngModel)]="vm.stockTrxEntry.inventory.rate" class="form-control text-right" />
-                                <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                                <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                     <span>
                                         {{ vm.selectedCurrency === 0 ? vm.foreignCurrencyDetails?.symbol : vm.baseCurrencyDetails?.symbol }} {{ vm.convertedRate |
                                         giddhCurrency: ratePrecision:true }}
@@ -531,7 +524,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                         </ng-template>
 
                         <div class="icon-box" *ngIf="(vm.showNewEntryPanel && vm.stockTrxEntry)">
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </div>
 
                         <div *ngIf="vm.showNewEntryPanel || shouldShowAdvanceReceiptMandatoryFields"
@@ -547,7 +540,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 [prefix]="vm.selectedPrefixForCurrency" [suffix]="vm.selectedSuffixForCurrency"
                                 (focus)="hideDiscountTax()" (blur)="vm.inventoryAmountChanged()"
                                 [(ngModel)]="vm.totalAmount" />
-                            <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                            <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                 <ng-container
                                     *ngTemplateOutlet="totalWithCurrencySymbol;context: { $implicit: vm.convertedTotalAmount }">
                                 </ng-container>
@@ -570,7 +563,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 </update-ledger-discount>
                             </span>
 
-                            <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                            <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                 <ng-container
                                     *ngTemplateOutlet="totalWithCurrencySymbol;context: { $implicit: vm.convertedDiscountTrxTotal }">
                                 </ng-container>
@@ -584,7 +577,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         <div class="text-center icon-box"
                             *ngIf="(vm.showNewEntryPanel || shouldShowAdvanceReceiptMandatoryFields) && !(vm.companyTaxesList$ | async)?.length">
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </div>
 
                         <div [attr.disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1 ? 'disabled' : null" class="dropdown-container dropdown-left text-right table-amount"
@@ -606,7 +599,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                     <span class="eligible-ITC">Eligible for ITC <span class="icon-edit"></span> </span> -->
                             </span>
 
-                            <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                            <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                 <ng-container
                                     *ngTemplateOutlet="totalWithCurrencySymbol;context: { $implicit: vm.convertedTaxTrxTotal }">
                                 </ng-container>
@@ -615,7 +608,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         <div class="text-center icon-box"
                             *ngIf="(vm.showNewEntryPanel || shouldShowAdvanceReceiptMandatoryFields) && (vm.companyTaxesList$ | async)?.length">
-                            <label class="fs20">=</label>
+                            <label class="font-20">=</label>
                         </div>
 
                         <div *ngIf="(vm.showNewEntryPanel || shouldShowAdvanceReceiptMandatoryFields)"
@@ -625,7 +618,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency"
                                 [rawInputValue]="vm.grandTotal" [suffix]="vm.selectedSuffixForCurrency"
                                 (blur)="vm.inventoryTotalChanged()" />
-                            <p class="mb-0 amnt-total" *ngIf="vm.isMultiCurrencyAvailable">
+                            <p class="mb-0 amount-total" *ngIf="vm.isMultiCurrencyAvailable">
                                 <ng-container
                                     *ngTemplateOutlet="totalWithCurrencySymbol;context: { $implicit: vm.convertedGrandTotal }">
                                 </ng-container>
@@ -633,7 +626,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                         </div>
 
                         <div *ngIf="vm.showNewEntryPanel && isTcsTdsApplicable"
-                            class="text-right table-amount last-ttable-amount">
+                            class="text-right table-amount last-table-amount">
                             <div class="text-right">
 
                                 <div *ngIf="!vm.selectedLedger.isOtherTaxesApplicable" class="other-tax">
@@ -647,7 +640,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 <div *ngIf="vm.selectedLedger.isOtherTaxesApplicable" class="pl-1">
                                     <label>Other Tax <a href="javascript: void(0)" class="text-gray"
                                             (click)="(currentOrganizationType === 'COMPANY' && branches?.length === 1) || (currentOrganizationType === 'BRANCH') ? toggleOtherTaxesAsideMenu.emit(vm) : ''">
-                                            <i class="icon-edit11 font-12 ml-05"></i>
+                                            <i class="icon-edit11 font-12 mr-l05"></i>
                                         </a>
                                     </label>
 
@@ -675,7 +668,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                     <!-- make it functional (Developer end) -->
                     <div *ngIf="shouldShowWarehouse" class="row mr-b1">
                         <div class="col-sm-6 pd-r1">
-                            <div class="selectWarehouse">
+                            <div class="select-warehouse">
                                 <label class="font-12">Select Warehouse</label>
                                 <sh-select id="update-ledger-select-warehouse" [(ngModel)]="selectedWarehouse" [placeholder]="'Select Warehouse'"
                                     [options]="warehouses" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" [class.disabled-ledger]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1">
@@ -713,7 +706,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                     <ng-container *ngIf="shouldShowRcmTaxableAmount">
                         <div class="taxable-amount-section">
-                            <label class="primary_clr">Taxable Amount</label>
+                            <label class="primary-color">Taxable Amount</label>
                             <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-taxable-amount" type="text" name="taxable-amount" class="form-control text-right"
                                 [prefix]="vm.selectedPrefixForCurrency" [suffix]="vm.selectedSuffixForCurrency"
                                 [mask]="vm.inputMaskFormat"
@@ -722,7 +715,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                     </ng-container>
                     <ng-container *ngIf="shouldShowItcSection">
                         <div class="taxable-amount-section">
-                            <label class="primary_clr itc-label">ITC Type</label>
+                            <label class="primary-color itc-label">ITC Type</label>
                             <sh-select id="update-ledger-itc-type" [(ngModel)]="vm.selectedLedger.itcAvailable" [placeholder]="'ITC Type'"
                                 [options]="availableItcList" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" [class.disabled-ledger]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1">
                             </sh-select>
@@ -748,38 +741,38 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                         </p>
                         <ng-template #adjustmentPopOverTemplate>
                             <div class="adjusted-info">
-                                <p class="mb-1"><strong>Adjustment</strong></p>
+                                <p class="mr-b1"><strong>Adjustment</strong></p>
                                 <p class="info-text">The selected entry is a part of {{vm.selectedLedger?.voucherNumber}}. All the
                                     adjustment will reflect
                                     to subsequent entries as well. Here we
                                     are adjusting the Invoice not just the selected entry. Please note that linked entries cannot be updated from here.</p>
                             </div>
                         </ng-template>
-                        <p class="font-12 text-light mb-1">
+                        <p class="font-12 text-light mr-b1">
                             {{ vm.baseCurrencyDetails?.symbol}}{{vm.selectedLedger?.voucherAdjustments?.totalAdjustmentAmount | giddhCurrency}}
                         </p>
                         <div class="clearfix adjustment-field">
                             <div class="row" *ngFor="let item of vm.selectedLedger?.voucherAdjustments?.adjustments; let entryIdx = index;">
-                                <div class="col-md-5 col-sm-5 pr-05">
+                                <div class="col-md-5 col-sm-5 pd-r05">
                                     <div class="form-group">
                                         <label>Adjustment Vouchers
                                             <span class="text-danger">*</span>
                                         </label>
-                                        <input id="update-ledger-adjust-voucher" type="text" class="form-control mb-1" [(ngModel)]="item.voucherNumber" disabled>
+                                        <input id="update-ledger-adjust-voucher" type="text" class="form-control mr-b1" [(ngModel)]="item.voucherNumber" disabled>
                                     </div>
                                 </div>
-                                <div class="col-md-5 col-sm-5 pl-05 pr-05">
+                                <div class="col-md-5 col-sm-5 pd-l05 pd-r05">
                                     <div class="form-group">
-                                        <label>Amount<span class="text-danger">*</span> <span *ngIf="item.voucherType === 'receipt' && isAdvanceReceipt" class="text-light font-12 ml-05">(Inclusive
+                                        <label>Amount<span class="text-danger">*</span> <span *ngIf="item.voucherType === 'receipt' && isAdvanceReceipt" class="text-light font-12 mr-l05">(Inclusive
                             Tax)</span></label>
-                                        <input id="update-ledger-inclusive-tax-edit-mode" type="text" class="form-control mb-1" *ngIf="!selectedAdvanceReceiptAdjustInvoiceEditMode" [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" decimalDigitsDirective [(ngModel)]="item.adjustmentAmount.amountForAccount" disabled>
-                                        <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-inclusive-tax" type="text" class="form-control mb-1" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" (blur)="adjustedInvoiceAmountChange()" *ngIf="selectedAdvanceReceiptAdjustInvoiceEditMode" [(ngModel)]="item.adjustmentAmount.amountForAccount">
+                                        <input id="update-ledger-inclusive-tax-edit-mode" type="text" class="form-control mr-b1" *ngIf="!selectedAdvanceReceiptAdjustInvoiceEditMode" [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" decimalDigitsDirective [(ngModel)]="item.adjustmentAmount.amountForAccount" disabled>
+                                        <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-inclusive-tax" type="text" class="form-control mr-b1" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" (blur)="adjustedInvoiceAmountChange()" *ngIf="selectedAdvanceReceiptAdjustInvoiceEditMode" [(ngModel)]="item.adjustmentAmount.amountForAccount">
                                     </div>
                                 </div>
-                                <div *ngIf="item.voucherType === 'receipt' && item.subVoucher === 'ADVANCE_RECEIPT'" class="col-sm-2 pl-05">
+                                <div *ngIf="item.voucherType === 'receipt' && item.subVoucher === 'ADVANCE_RECEIPT'" class="col-sm-2 pd-l05">
                                     <div class="form-group">
                                         <label>Tax</label>
-                                        <input type="text" id="update-ledger-voucher-tax" class="form-control mb-1" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" [(ngModel)]="item.calculatedTaxAmount" disabled>
+                                        <input type="text" id="update-ledger-voucher-tax" class="form-control mr-b1" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" [(ngModel)]="item.calculatedTaxAmount" disabled>
                                     </div>
                                 </div>
                             </div>
@@ -796,7 +789,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 <i class="icon-edit11 font-10"></i>
                                 <i class="icon-info"></i>
                                 <div class="adjusted-info">
-                                    <p class="mb-1"><strong>Adjustment</strong></p>
+                                    <p class="mr-b1"><strong>Adjustment</strong></p>
                                     <p class="info-text">The selected entry is a part of Invoice# 43242. All the
                                         adjustment will reflect
                                         to subsequent entries as well. Here we
@@ -805,33 +798,33 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 <i class="icon-edit11 font-10"></i>
                             </a>
                         </p>
-                        <p class="font-12 text-light mb-1">
+                        <p class="font-12 text-light mr-b1">
                             {{ vm.baseCurrencyDetails?.symbol}}{{totalAdjustedAmount | giddhCurrency}}
                         </p>
                         <div class="clearfix adjustment-field">
                             <div class="row" *ngFor="let item of vm.selectedLedger?.voucherAdjustments?.adjustments; let entryIdx = index;">
-                                <div class="col-md-4 col-sm-5 pr-05">
+                                <div class="col-md-4 col-sm-5 pd-r05">
                                     <div class="form-group">
                                         <label>Adjustment Voucher<span class="text-danger">*</span>
                                         </label>
-                                        <input type="text" class="form-control mb-1" name="voucherNumber"
+                                        <input type="text" class="form-control mr-b1" name="voucherNumber"
                                             [(ngModel)]="item.voucherNumber" disabled>
                                     </div>
                                 </div>
-                                <div class="col-md-4 col-sm-5 pl-05 pr-05">
+                                <div class="col-md-4 col-sm-5 pd-l05 pd-r05">
                                     <div class="form-group">
-                                        <label>Amount<span class="text-danger">*</span> <span class="text-light font-12 ml-05">(Inclusive
+                                        <label>Amount<span class="text-danger">*</span> <span class="text-light font-12 mr-l05">(Inclusive
                             Tax)</span></label>
-                                        <input type="text" class="form-control mb-1" name="amountForAccount" *ngIf="!selectedAdvanceReceiptAdjustInvoiceEditMode" [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" decimalDigitsDirective [(ngModel)]="item.adjustmentAmount.amountForAccount"
+                                        <input type="text" class="form-control mr-b1" name="amountForAccount" *ngIf="!selectedAdvanceReceiptAdjustInvoiceEditMode" [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" decimalDigitsDirective [(ngModel)]="item.adjustmentAmount.amountForAccount"
                                             disabled>
-                                        <input type="text" class="form-control mb-1" name="amountForAccount" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" (blur)="adjustedReceiptsAmountChange()" *ngIf="selectedAdvanceReceiptAdjustInvoiceEditMode"
+                                        <input type="text" class="form-control mr-b1" name="amountForAccount" decimalDigitsDirective [mask]="vm.inputMaskFormat" [prefix]="vm.selectedPrefixForCurrency" (blur)="adjustedReceiptsAmountChange()" *ngIf="selectedAdvanceReceiptAdjustInvoiceEditMode"
                                             [(ngModel)]="item.adjustmentAmount.amountForAccount">
                                     </div>
                                 </div>
-                                <div class="col-sm-2 pl-05">
+                                <div class="col-sm-2 pd-l05">
                                     <div class="form-group">
                                         <label>Tax</label>
-                                        <input type="text" class="form-control mb-1" name="calculatedTaxAmount"
+                                        <input type="text" class="form-control mr-b1" name="calculatedTaxAmount"
                                             decimalDigitsDirective [mask]="vm.inputMaskFormat"
                                             [prefix]="vm.selectedPrefixForCurrency"
                                             [(ngModel)]="item.calculatedTaxAmount" disabled>
@@ -848,16 +841,16 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                 </div>
 
                 <div class="col-md-6 font-14 pt-1 bl-1 remove-border-left-onmo">
-                    <table class="width100">
+                    <table class="width-100">
                         <tbody>
                             <tr>
-                                <td class="primary_clr" (click)="getInvoiveLists(); toggleMoreDetail()">
+                                <td class="primary-color" (click)="getInvoiveLists(); toggleMoreDetail()">
                                     <i class="cp collapse-icons"
                                         [ngClass]="{'icon-minus':showAdvanced, 'icon-plus': !showAdvanced}"></i>
-                                    <button class="no-btn pdL0">&nbsp; More Details</button>
+                                    <button class="no-btn pl-0">&nbsp; More Details</button>
                                 </td>
                                 <td class="text-right">
-                                    <span class="primary_clr" *ngIf="vm.isMultiCurrencyAvailable">
+                                    <span class="primary-color" *ngIf="vm.isMultiCurrencyAvailable">
                                         Total in {{ vm.baseCurrencyDetails?.code }}:
                                         <span>{{ vm.baseCurrencyDetails?.symbol }}</span>
                                         {{vm.compoundTotal | giddhCurrency}}
@@ -868,12 +861,12 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         </tbody>
                     </table>
-                    <div class="pd-1 mrB mr-t advanced" style="background: #F1F5F8;" *ngIf="showAdvanced">
+                    <div class="pd-1 mr-b05 mr-t05 advanced" *ngIf="showAdvanced">
                         <table class="xs-table-block">
                             <tr>
                                 <td class="select2-parent pd-r1">
                                     <div class="form-group">
-                                        <label class="default_clr">Voucher Type</label>
+                                        <label class="default-color">Voucher Type</label>
                                         <sh-select id="update-ledger-voucher-type-default" [options]="vm.voucherTypeList" [isFilterEnabled]="true"
                                             [(ngModel)]="vm.selectedLedger.voucher.shortCode" [showClear]="false"  [class.disabled-ledger]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1"
                                             (selected)="getInvoiceListsData($event)" [ItemHeight]="'auto'" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1"
@@ -885,7 +878,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 <td class="pd-r1"
                                     *ngIf="(vm.selectedLedger.voucher.shortCode === 'sal' || vm.selectedLedger.voucher.shortCode === 'pur' || vm.selectedLedger.voucher.shortCode == 'pay')">
                                     <div class="form-group">
-                                        <label class="default_clr">Invoice No.</label>
+                                        <label class="default-color">Invoice No.</label>
                                         <input *ngIf="(vm.selectedLedger.voucher.shortCode === 'sal')" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-invoice-number" type="text" placeholder="Invoice no." class="form-control"
                                             [(ngModel)]="vm.selectedLedger.voucherNumber" />
                                         <input *ngIf="(vm.selectedLedger.voucher.shortCode !== 'sal')" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-invoice-number" type="text" placeholder="Invoice no." class="form-control"
@@ -897,16 +890,16 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                                     <div class="form-group">
 
-                                        <label class="default_clr">Invoice No.</label>
+                                        <label class="default-color">Invoice No.</label>
                                         <div class="btn-group btn-block invoice-btn" dropdown>
                                             <button dropdownToggle type="button"
                                                 class="form-control text-left btn-block dropdown-toggle">
                                                 Select Invoices
-                                                <span class="select_drop pull-right mr-t1">
+                                                <span class="select-drop pull-right mr-t1">
                                                     <i class="fa fa-caret-down"></i>
                                                 </span>
                                             </button>
-                                            <ul *dropdownMenu class="dropdown-menu dropdown-menu-2 width100"
+                                            <ul *dropdownMenu class="dropdown-menu dropdown-menu-2 width-100"
                                                 role="menu">
                                                 <li *ngIf="invoiceList.length==0">No results found</li>
                                                 <li *ngFor="let invoice of invoiceList">
@@ -922,7 +915,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                                 <td class="pd-r1" *ngIf="vm.selectedLedger.voucher.shortCode == 'credit note' || vm.selectedLedger.voucher.shortCode == 'debit note'">
                                     <div class="form-group">
-                                        <label class="default_clr">{{vm.selectedLedger.voucher.shortCode == 'debit note' ? 'Voucher' : 'Invoice'}} No.</label>
+                                        <label class="default-color">{{vm.selectedLedger.voucher.shortCode == 'debit note' ? 'Voucher' : 'Invoice'}} No.</label>
 
                                         <sh-select id="update-ledger-invoice-voucher-number" [options]="invoiceList" placeholder="Select Accounts"
                                             [(ngModel)]="selectedInvoice" [notFoundLink]="false" [forceClearReactive]="forceClear$ | async"
@@ -945,13 +938,13 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                         </sh-select>
                                     </div>
                                 </td>
-                                <td *ngIf="(vm.selectedLedger.voucher.shortCode === 'credit note' || vm.selectedLedger.voucher.shortCode === 'debit note') && selectedInvoice" class="cp remove-invoice pdR2 hidden-xs" (click)="removeSelectedInvoice()">
+                                <td *ngIf="(vm.selectedLedger.voucher.shortCode === 'credit note' || vm.selectedLedger.voucher.shortCode === 'debit note') && selectedInvoice" class="cp remove-invoice pd-r2 hidden-xs" (click)="removeSelectedInvoice()">
                                     <span class=“remove-invoice-icon”>×</span>
                                     <span class="remove-invoice-label">Remove</span>
                                 </td>
                                 <td class="pd-r1">
                                     <div class="form-group">
-                                        <label class="default_clr">Voucher No.</label>
+                                        <label class="default-color">Voucher No.</label>
                                         <input id="update-ledger-voucher-type" type="text" placeholder="Voucher no." class="form-control"
                                             [ngModel]="vm.selectedLedger.voucherNo" [disabled]="true"
                                             [style.width.px]="80" />
@@ -990,13 +983,13 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                             <tbody>
                                 <tr>
                                     <td class="pd-r1">
-                                        <label class="default_clr">Cheque Number</label>
+                                        <label class="default-color">Cheque Number</label>
                                         <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" type="text" id="update-ledger-cheque-number" placeholder="XXXX2619" class="form-control"
                                             [(ngModel)]="vm.selectedLedger.chequeNumber" />
                                     </td>
 
                                     <td>
-                                        <label class="default_clr">Cheque Clearance Date</label>
+                                        <label class="default-color">Cheque Clearance Date</label>
                                         <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="update-ledger-cheque-clearance" type="text" autocomplete="off" class="form-control"
                                             [(ngModel)]="vm.selectedLedger.chequeClearanceDate" bsDatepicker
                                             #chbs='bsDatepicker' [bsConfig]="{ dateInputFormat: giddhDateFormat }" />
@@ -1014,7 +1007,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                                 <tr>
                                     <td class="pd-r1">
-                                        <label class="default_clr">Assign Tag</label>
+                                        <label class="default-color">Assign Tag</label>
                                         <sh-select id="update-ledger-assign-tag" [options]="tags$ | async" [isFilterEnabled]="true" [class.disabled-ledger]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1"
                                             [placeholder]="'Select Tag'" [showClear]="false" [multiple]="true" [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1"
                                             name="tagNames" [(ngModel)]="vm.selectedLedger.tagNames"
@@ -1032,8 +1025,8 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         <div class="col-12 col-sm-12 clearfix mr-t1">
 
-                            <div class="mrR1 form-group pull-left cp">
-                                <label class="pull-left cp fs16">
+                            <div class="mr-r1 form-group pull-left cp">
+                                <label class="pull-left cp font-16">
                                     <input id="update-ledger-generate-voucher" class="pull-left" type="checkbox" name="generateInvoice"
                                         [(ngModel)]="vm.selectedLedger.generateInvoice"
                                         [disabled]="(vm.isInvoiceGeneratedAlready || (!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1) || (isAdvanceReceipt && vm.selectedLedger.generateInvoice)) ? 'disabled': null">
@@ -1044,12 +1037,12 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                             <div class="pull-right">
 
-                                <span class="primary_clr" *ngIf="!vm.isMultiCurrencyAvailable">
+                                <span class="primary-color" *ngIf="!vm.isMultiCurrencyAvailable">
                                     Compound Total:
                                     {{ vm.baseCurrencyDetails?.symbol}}{{vm.compoundTotal | giddhCurrency}}
                                 </span>
 
-                                <span *ngIf="vm.isMultiCurrencyAvailable" class="primary_clr">
+                                <span *ngIf="vm.isMultiCurrencyAvailable" class="primary-color">
                                     Total in {{ vm.foreignCurrencyDetails?.code }}
                                     : {{ vm.foreignCurrencyDetails?.symbol }} {{ vm.convertedCompoundTotal | giddhCurrency
                                     }}
@@ -1061,7 +1054,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 
                         <div class="d-flex w-100 mb-2 justify-content-between">
 
-                            <div class="w-100 d-flex pl-15" *ngIf="vm.isMultiCurrencyAvailable">
+                            <div class="w-100 d-flex pd-l15" *ngIf="vm.isMultiCurrencyAvailable">
                                 <ul class="list-inline d-flex font-14 currency-convertor">
 
                                     <li>
@@ -1085,7 +1078,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                 </ul>
                             </div>
 
-                            <div class="d-flex justify-content-end w-100 pr-15" *ngIf="!isPettyCash">
+                            <div class="d-flex justify-content-end w-100 pd-r15" *ngIf="!isPettyCash">
                                 <div class="file_attached pull-right text-right"
                                     *ngIf="(vm.selectedLedger)?.attachedFile?.length > 0">
                                     <span>{{ (vm.selectedLedger)?.attachedFileName }}</span>
@@ -1093,10 +1086,10 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                                         (click)="showDeleteAttachedFileModal()">(remove)</label>
                                 </div>
 
-                                <label class="upload_div" [ngClass]="{hide:vm.selectedLedger.attachedFile}">
+                                <label class="upload-div" [ngClass]="{hide:vm.selectedLedger.attachedFile}">
                                     <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" type="file" name="invoiceFile" #fileInputUpdate id="invoiceFile" ngFileSelect
                                         [uploadInput]="uploadInput" (uploadOutput)="onUploadOutputUpdate($event)">
-                                    <label for="invoiceFile" class="cp fs16">
+                                    <label for="invoiceFile" class="cp font-16">
                                         <i [ngClass]="!isFileUploading ? 'icon-file-path' : 'fa fa-spinner rotate'"></i> Attach file</label>
                                 </label>
                             </div>
@@ -1104,7 +1097,7 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
                         </div>
 
                         <div class="col-12 col-sm-12 pd-t1 d-flex align-items-center xs-d-block" *ngIf="!isPettyCash">
-                            <!--                            <div class="width-100 mb-05">-->
+                            <!--                            <div class="width-100 mr-b05">-->
                             <!--                                    <p *ngIf="isAdjustedAmountExcess">Note: The adjusted amount of the linked invoice/s is more than the receipt;-->
                             <!--                                        update them first and try again.</p>-->
                             <!--                            </div>-->
@@ -1175,8 +1168,8 @@ <h3 *ngIf="!openDropDown" (dblclick)="openHeaderDropDown()" class="d-inline-bloc
 <!-- endregion -->
 <!-- Tourist scheme template block-->
 <ng-template #touristSchemeTemplate>
-    <div class="font-14 mb-1 d-flex align-items-center xs-d-block" *ngIf="isTouristSchemeApplicable">
-        <div class="mr-3 xs-mr-0 mb-1">
+    <div class="font-14 mr-b1 d-flex align-items-center xs-d-block" *ngIf="isTouristSchemeApplicable">
+        <div class="mr-r3 xs-mr-0 mr-b1">
             <div class="d-flex align-items-center">
                 <span class="pull-left">
                     <input [disabled]="!isPettyCash && currentOrganizationType === 'COMPANY' && branches?.length > 1" id="tourist-scheme" type="checkbox" name="touristSchemeApplicable"
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.scss b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.scss
index 53b26e2df20..a3920693daa 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.scss
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.scss
@@ -1,5 +1,5 @@
 @import "../../../../assets/css/color.scss";
-.pItem {
+.item-padding {
     padding: 0 4px;
 }
 
@@ -12,22 +12,22 @@
     margin-top: 1px;
 }
 
-.mr-15 {
+.mr-r15 {
     margin-right: -15px;
 }
 
-table.width100 {
+table.width-100 {
     position: relative;
 }
 
-.currency_type {
+.currency-type {
     position: absolute;
     top: 50%;
     right: 6px;
     transform: translateY(-50%);
 }
 
-.multicurrency_input {
+.multi-currency-input {
     padding-right: 35px !important;
 }
 
@@ -66,22 +66,22 @@ ng-select>div {
     border: none;
 }
 
-ng-select .select_drop i.fa.fa-caret-up::before {
+ng-select .select-drop i.fa.fa-caret-up::before {
     color: $white;
     font-size: 20px;
 }
 
-.trxFakeInput {
+.transaction-particular-name {
     width: 100%;
     height: 38px;
     background: transparent;
     border: none !important;
     padding: 5px;
-    color: #b5b5b5;
+    color: $silver;
 }
 
 .notfound-option.active {
-    background: #efeff1 !important;
+    background: $whisper-color !important;
     padding: 2px 5px !important;
 }
 
@@ -89,9 +89,9 @@ ng-select .select_drop i.fa.fa-caret-up::before {
     padding: 0px !important;
 }
 
-.amnt-total {
+.amount-total {
     font-size: 12px;
-    color: #999999;
+    color: $nobel;
 }
 
 .other-tax {
@@ -102,7 +102,7 @@ ng-select .select_drop i.fa.fa-caret-up::before {
     padding-left: 8px;
 }
 
-.total-col span.bdrT {
+.total-col span.bd-rt {
     width: 150px;
     display: inline-block;
     padding: 2px 0;
@@ -199,11 +199,11 @@ span.eligible-ITC {
     position: relative;
 }
 
-.pr-05 {
+.pd-r05 {
     padding-right: 5px;
 }
 
-.pl-05 {
+.pd-l05 {
     padding-left: 5px;
 }
 
@@ -254,6 +254,10 @@ span.eligible-ITC {
     }
 }
 
+#update-ledger-select-account{
+    width:30%
+}
+
 .edit-adjustment {
     padding: 0 5px 0;
 }
@@ -350,7 +354,7 @@ p.edit-message{
 }
 
 @media only screen and (max-width: 767px) {
-    .last-ttable-amount {
+    .last-table-amount {
         max-width: 100% !important;
     }
     .ledger-book .h-table tbody .ledger-row td {
@@ -381,7 +385,7 @@ p.edit-message{
     .entrypanel:before {
         display: none;
     }
-    .total-amn {
+    .total-amount-ledger {
         width: 100%;
     }
     .xs-table-block {
@@ -391,7 +395,7 @@ p.edit-message{
     .xs-table-block tbody tr td {
         display: block;
     }
-    .ledg-head .ledger-book .left-col-new.bdrR {
+    .ledg-head .ledger-book .left-col-new.bd-rr {
         border-right: 0 !important;
     }
     .remove-border-left-onmo {
@@ -406,7 +410,7 @@ p.edit-message{
         width: 100%;
         display: inline-block;
     }
-    .entrypanel .primary_clr {
+    .entrypanel .primary-color {
         padding-left: 15px;
         padding-top: 5px;
     }
@@ -426,7 +430,7 @@ p.edit-message{
         width: 185px;
         height: 36px !important;
     }
-    .debit-blank-row .amnt-total {
+    .debit-blank-row .amount-total {
         width: 185px;
         margin-top: 5px;
     }
@@ -446,10 +450,10 @@ p.edit-message{
     .xs-pt-0 {
         padding-top: 0px !important;
     }
-    .adjustment-field .pr-05 {
+    .adjustment-field .pd-r05 {
         padding-right: 15px;
     }
-    .adjustment-field .pl-05 {
+    .adjustment-field .pd-l05 {
         padding-left: 15px;
     }
 }
diff --git a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.ts b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.ts
index 6534f351612..1e8d0c692c4 100644
--- a/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.ts
+++ b/apps/web-giddh/src/app/ledger/components/updateLedgerEntryPanel/updateLedgerEntryPanel.component.ts
@@ -28,7 +28,7 @@ import { LedgerActions } from '../../../actions/ledger/ledger.actions';
 import { SettingsTagActions } from '../../../actions/settings/tag/settings.tag.actions';
 import { ConfirmationModalConfiguration, CONFIRMATION_ACTIONS } from '../../../common/confirmation-modal/confirmation-modal.interface';
 import { LoaderService } from '../../../loader/loader.service';
-import { cloneDeep, filter, last, orderBy } from '../../../lodash-optimized';
+import { cloneDeep, filter, last, orderBy, uniqBy } from '../../../lodash-optimized';
 import { AccountResponse } from '../../../models/api-models/Account';
 import { AdjustAdvancePaymentModal, VoucherAdjustments } from '../../../models/api-models/AdvanceReceiptsAdjust';
 import { ICurrencyResponse, TaxResponse } from '../../../models/api-models/Company';
@@ -296,6 +296,11 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
         this.isHide = !this.isHide;
     }
 
+    /** Track by function for items */
+    public trackByFunction(index: number, item: ILedgerTransactionItem): any {
+        return item.particular.uniqueName;
+    }
+
     public ngOnInit() {
         this.currentOrganizationType = this.generalService.currentOrganizationType;
         this.currentCompanyBranches$ = this.store.pipe(select(appStore => appStore.settings.branches), takeUntil(this.destroyed$));
@@ -692,7 +697,7 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
                                 }];
                             }
                             initialAccounts.push({
-                                label: `${t.particular.name}(${t.inventory.stock.uniqueName})`,
+                                label: `${t.particular.name} (${t.inventory.stock.uniqueName})`,
                                 value: `${t.particular.uniqueName}#${t.inventory.stock.uniqueName}`,
                                 additional: {
                                     stock: {
@@ -723,7 +728,7 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
                     });
                     // this.vm.flatternAccountList4Select = observableOf(orderBy(initialAccounts, 'label'));
                     initialAccounts.push(...this.defaultSuggestions);
-                    this.searchResults = orderBy(initialAccounts, 'label');
+                    this.searchResults = orderBy(uniqBy(initialAccounts, 'value'), 'label');
                     this.vm.isInvoiceGeneratedAlready = this.vm.selectedLedger.voucherGenerated;
 
                     // check if entry allows to show discount and taxes box
@@ -1554,7 +1559,7 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
                     this.forceClear$ = observableOf({ status: true });
                 }
                 let invoiceSelected;
-                const selectedInvoice = (this.vm.selectedLedger.invoiceLinkingRequest && this.vm.selectedLedger.invoiceLinkingRequest.linkedInvoices) ? this.vm.selectedLedger.invoiceLinkingRequest.linkedInvoices[0] : false;
+                const selectedInvoice = (this.vm.selectedLedger && this.vm.selectedLedger.invoiceLinkingRequest && this.vm.selectedLedger.invoiceLinkingRequest.linkedInvoices) ? this.vm.selectedLedger.invoiceLinkingRequest.linkedInvoices[0] : false;
                 if (selectedInvoice) {
                     selectedInvoice['voucherDate'] = selectedInvoice['invoiceDate'];
                     invoiceSelected = {
@@ -1617,16 +1622,20 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
      */
     public creditNoteInvoiceSelected(event: any): void {
         if (event && event.value && event.additional) {
-            this.vm.selectedLedger.invoiceLinkingRequest = {
-                linkedInvoices: [
-                    {
-                        invoiceUniqueName: event.value,
-                        voucherType: event.additional.voucherType
-                    }
-                ]
+            if(this.vm.selectedLedger) {
+                this.vm.selectedLedger.invoiceLinkingRequest = {
+                    linkedInvoices: [
+                        {
+                            invoiceUniqueName: event.value,
+                            voucherType: event.additional.voucherType
+                        }
+                    ]
+                }
             }
         } else {
-            this.vm.selectedLedger.invoiceLinkingRequest = null;
+            if(this.vm.selectedLedger) {
+                this.vm.selectedLedger.invoiceLinkingRequest = null;
+            }
         }
     }
 
@@ -1868,12 +1877,11 @@ export class UpdateLedgerEntryPanelComponent implements OnInit, AfterViewInit, O
                     }) || [];
                     this.noResultsFoundLabel = SearchResultText.NotFound;
                     if (page === 1) {
-                        this.searchResults = searchResults;
+                        this.searchResults = uniqBy(searchResults, 'value');
                     } else {
-                        this.searchResults = [
-                            ...this.searchResults,
-                            ...searchResults
-                        ];
+                        const uniqueResults = uniqBy([...this.searchResults,
+                            ...searchResults], 'value');
+                        this.searchResults = uniqueResults;
                     }
                     this.searchResultsPaginationData.page = data.body.page;
                     this.searchResultsPaginationData.totalPages = data.body.totalPages;
diff --git a/apps/web-giddh/src/app/ledger/ledger.component.html b/apps/web-giddh/src/app/ledger/ledger.component.html
index a382a5b6396..95f13e12a38 100644
--- a/apps/web-giddh/src/app/ledger/ledger.component.html
+++ b/apps/web-giddh/src/app/ledger/ledger.component.html
@@ -14,9 +14,9 @@
 </hamburger-menu>
 <section class="container ledger-section" [hidden]="isShowLedgerColumnarReportTable">
     <!-- region ledger table-->
-    <div class="ledg-head transactions-page mt-15 pos-rel">
+    <div class="ledg-head transactions-page mr-t15 position-relative">
         <!-- region ledger header -->
-        <div class="clearfix row mb-15">
+        <div class="clearfix row mr-b15">
             <!-- region currency toggle -->
             <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 search-ledger-wrapper">
                 <div class="d-flex search-ledger-field">
@@ -26,7 +26,7 @@
                             <input id="select-all-entries" type="checkbox" [(ngModel)]="debitCreditSelectAll"
                                 (click)="selectAllEntries($event, visibleTransactionTypeMobile)"> Select All
                         </div>
-                        <div class="d-flex ml-15">
+                        <div class="d-flex mr-l15">
                             <button [disabled]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2" class="btn btn-danger" id="delete-ledger-mobile-view" (click)="performBulkAction('delete')" container="body"
                                 tooltip="Delete" [placement]="'top'"><i class="icon-trash"></i>
                             </button>
@@ -65,7 +65,7 @@
                         <img (click)="showGiddhDatepicker($event)" src="{{imgPath}}calender-icon.svg">
                     </div>
                     <span class="input-wrapper ipad-view-datepicker">
-                        <!-- <input type="text" class="form-control daterange_picker_ledger" daterangepicker
+                        <!-- <input type="text" class="form-control daterange-picker-ledger" daterangepicker
                             [options]="datePickerOptions" (applyDaterangepicker)="selectedDate($event)"
                             name="daterangeInput" /> -->
                         <input id="giddh-datepicker-ipad-view" type="text" name="selectedDateRange" (click)="showGiddhDatepicker($event)"
@@ -94,13 +94,13 @@
                         <button [disabled]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2" class="btn btn-success mr-0" id="attach-file" (click)="performBulkAction('upload', BulkUploadfileInput)"
                             container="body" tooltip="Attach File" [placement]="'top'"><i class="icon-file-path"></i>
                         </button>
-                        <input type="file" #BulkUploadfileInput style="display: none;" name="BulkUploadfileInput"
+                        <input type="file" #BulkUploadfileInput name="BulkUploadfileInput"
                             id="BulkUploadfileInput" [options]="fileUploadOptions" ngFileSelect
-                            [uploadInput]="uploadInput" (uploadOutput)="onUploadOutput($event)">
+                            [uploadInput]="uploadInput" (uploadOutput)="onUploadOutput($event)" class="d-none">
                     </div>
 
                 </div>
-                <div class="form-group mr-15 linked-entities" *ngIf="showBranchSwitcher && currentCompanyBranches?.length > 2 && isMobileScreen">
+                <div class="form-group mr-r15 linked-entities" *ngIf="showBranchSwitcher && currentCompanyBranches?.length > 2 && isMobileScreen">
                     <div class="form-group">
                         <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName"
                             [borderConfiguration]="branchDropdownBorderConfiguration" [showClear]="false" [ItemHeight]="33" width="100%"
@@ -117,7 +117,7 @@
                                         </span>
                                         <span class="entity-details">
                                             <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                            <div class="item-unq giddh-limit single-line-clamp">
+                                            <div class="item-unique giddh-limit single-line-clamp">
                                                 {{ option.name || '-' }}
                                             </div>
                                         </span>
@@ -129,12 +129,12 @@
                 </div>
             </div>
 
-            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center daterngoption" *ngIf="!isMobileScreen">
+            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-center date-range-option" *ngIf="!isMobileScreen">
                 <!-- (hideDaterangepicker)="selectedDate($event)"  -->
-                <div class="advanceSearchByDate date-advance-search">
+                <div class="advance-search-by-date date-advance-search">
                     <!-- <span class="icon-calender "></span> -->
                     <span class="input-wrapper">
-                        <!-- <input type="text" class="form-control daterange_picker_ledger" daterangepicker
+                        <!-- <input type="text" class="form-control daterange-picker-ledger" daterangepicker
                             [options]="datePickerOptions" (applyDaterangepicker)="selectedDate($event)"
                             name="daterangeInput" /> -->
                         <input id="giddh-datepicker" type="text" name="selectedDateRange" (click)="showGiddhDatepicker($event)"
@@ -149,7 +149,7 @@
             <!-- endregion -->
             <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12 text-right C-flex-end search-options" *ngIf="!isMobileScreen">
                 <div class="d-flex xs-width-100 ledger-head-top">
-                    <div class="form-group mr-15 linked-entities" *ngIf="showBranchSwitcher && currentCompanyBranches?.length > 2">
+                    <div class="form-group mr-r15 linked-entities" *ngIf="showBranchSwitcher && currentCompanyBranches?.length > 2">
                         <div class="form-group">
                             <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [borderConfiguration]="branchDropdownBorderConfiguration"
                                 [showClear]="false" [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)"
@@ -165,7 +165,7 @@
                                             </span>
                                             <span class="entity-details">
                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                <div class="item-unq giddh-limit single-line-clamp">
+                                                <div class="item-unique giddh-limit single-line-clamp">
                                                     {{ option.name || '-' }}
                                                 </div>
                                             </span>
@@ -175,10 +175,10 @@
                             </sh-select>
                         </div>
                     </div>
-                    <div *ngIf="isLedgerAccountAllowsMultiCurrency" class="advanc-search-block">
-                        <span class="mr-15 d-inilne-block font-14">{{ baseCurrencyDetails?.code }}</span>
+                    <div *ngIf="isLedgerAccountAllowsMultiCurrency" class="advance-search-block">
+                        <span class="mr-r15 d-inline-block font-14">{{ baseCurrencyDetails?.code }}</span>
 
-                        <div class="toggle d-inline-block currencyToggler" data-key="disabled">
+                        <div class="toggle d-inline-block currency-toggler" data-key="disabled">
 
                             <input type="checkbox" class="toggle-checkbox" id="disabled"
                                 [(ngModel)]="currencyTogglerModel" (click)="toggleCurrency($event)">
@@ -190,18 +190,21 @@
 
                         </div>
 
-                        <span class="ml-15 d-inline-block font-14">{{ foreignCurrencyDetails?.code }}</span>
+                        <span class="mr-l15 d-inline-block font-14">{{ foreignCurrencyDetails?.code }}</span>
                     </div>
 
                     <div class="d-flex">
-
-                        <a href="javascript:void(0)" id="share" class="icomoon_ico d-flex align-items-center"
+                        <a href="javascript:void(0)" id="upload" class="icomoon-ico d-flex align-items-center"
+                            [tooltip]="'Import Statement'" [placement]="'top'" (click)="showUploadBankStatementModal()">
+                            <i class="icon-upload-icon lh-0"></i>
+                        </a>
+                        <a href="javascript:void(0)" id="share" class="icomoon-ico d-flex align-items-center"
                             [tooltip]="'Share Ledger'" [placement]="'top'" (click)="showShareLedgerModal()">
-                            <i class="icon-ledger-path" style="line-height: 0px"></i>
+                            <i class="icon-ledger-path lh-0"></i>
                         </a>
-                        <a class="icomoon_ico d-flex align-items-center mr-0" id="export-ledger" href="javascript:void(0)" title=""
+                        <a class="icomoon-ico d-flex align-items-center mr-0" id="export-ledger" href="javascript:void(0)" title=""
                             [tooltip]="'Export'" [placement]="'top'" (click)="showExportLedgerModal()">
-                            <i class="icon-ledger-union-5" style="line-height: 0px"></i>
+                            <i class="icon-ledger-union-5 lh-0"></i>
                         </a>
 
                     </div>
@@ -209,11 +212,11 @@
                 </div>
             </div>
         </div>
-        <div *ngIf="isLedgerAccountAllowsMultiCurrency && isMobileScreen" class="advanc-search-block
-            mt-05">
-            <span class="mr-15 d-inilne-block font-14">{{ baseCurrencyDetails?.code }}</span>
+        <div *ngIf="isLedgerAccountAllowsMultiCurrency && isMobileScreen" class="advance-search-block
+            mr-t05">
+            <span class="mr-r15 d-inilne-block font-14">{{ baseCurrencyDetails?.code }}</span>
 
-            <div class="toggle d-inline-block currencyToggler" data-key="disabled">
+            <div class="toggle d-inline-block currency-toggler" data-key="disabled">
 
                 <input type="checkbox" class="toggle-checkbox" id="disabled-mobile-view" [(ngModel)]="currencyTogglerModel"
                     (click)="toggleCurrency($event)">
@@ -225,7 +228,7 @@
 
             </div>
 
-            <span class="ml-15 d-inline-block font-14">{{ foreignCurrencyDetails?.code }}</span>
+            <span class="mr-l15 d-inline-block font-14">{{ foreignCurrencyDetails?.code }}</span>
         </div>
         <!-- endregion -->
         <div class="custom-tabs mt-2 mb-2">
@@ -246,343 +249,243 @@
 
         <!-- region bank ledgers-->
         <div class="clearfix"></div>
-        <h1 class="mr-t2 primary_clr" *ngIf="isBankTransactionLoading">Loading Transactions...</h1>
-        <section id="eledgerwrap" class="mr-t2" *ngIf="lc.showEledger">
-            <div class="alert alert-danger ledger-book fade in pr" style="padding-right:15px">
-                <button type="button" class="close">
-                    <span style="font-size:12px;font-weight:normal"
-                        (click)="lc.showEledger = !lc.showEledger">Close</span>
-                </button>
-
-                <table class="table ledgerTable transaction-mapped-table" style="margin-bottom:0">
-                    <thead>
-                        <th class="nopad top-head-table" colspan="6">
-                            <div class="clearfix ldgTheadL">
-                                <h3 class="ledgerHead">
-                                    <span>Transactions from mapped account</span>
-                                </h3>
-                            </div>
-                        </th>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td width="100%" colspan="100%" class="ledger-head transaction-mapped">
-                                <table class="table" width="100%">
+        <div *ngIf="!isMobileScreen">
+            <h1 class="mr-t2 primary-color" *ngIf="isBankTransactionLoading">Loading Transactions...</h1>
+            <section id="eledgerwrap" class="mr-t2" *ngIf="lc.showEledger">
+                <div class="alert alert-danger ledger-book fade in position-relative pr-15">
+                    <button type="button" class="close">
+                        <span class="font-12 font-weight-normal"
+                            (click)="lc.showEledger = !lc.showEledger">Close</span>
+                    </button>
+
+                    <div>
+                        <div class="clearfix ledger-top-header-left">
+                            <h3 class="ledger-main-head">
+                                <span>Transactions from mapped account</span>
+                            </h3>
+                        </div>
+                    </div>
+                    <div class="wrap-transaction-map clearfix">
+                        <div class="row">
+                            <div class="px-3 w-100">
+                                <table class="ledger-head transaction-mapped mt-0" width="100%" colspan="100%">
                                     <tr>
-                                        <th colspan="6">Debit <span class="pull-right text-gray">Dr</span></th>
-                                        <th colspan="6">Credit <span class="pull-right text-gray">Cr</span></th>
+                                        <th colspan="6" class="pl-15 pr-2 font-14">Debit <span class="pull-right text-gray">Dr</span></th>
+                                        <th colspan="6" class="pr-15 pl-1 font-14">Credit <span class="pull-right text-gray">Cr</span></th>
                                     </tr>
                                 </table>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="nopad bdrL bdrR hidden-xs transaction-mapped-head" style="width:50%" colspan="3">
-                                <table class="table">
+                            </div>
+                        </div>
+                        <div class="ledger-book">
+                            <div class="left-col-new">
+                                <table class="table ledger-table transaction-mapped-table mb-0">
                                     <thead>
-                                        <tr class="dgreyBg row">
+                                        <tr class="row">
                                             <th class="col-3 col-md-3 col-lg-3">Date
                                             </th>
                                             <th class="col-5 col-md-6 col-lg-6">Particular</th>
-                                            <th class="col-4 col-md-3 col-lg-3 alR">Amount</th>
+                                            <th class="col-4 col-md-3 col-lg-3 text-right">Amount</th>
                                         </tr>
                                     </thead>
                                 </table>
-                            </td>
-                            <!-- main left td end here -->
-                            <td class="nopad bdrL bdrR hidden-xs transaction-mapped-head" style="width:50%" colspan="3">
-                                <table class="table">
+                                <table  id="ledger-transaction-left-list" class="width-100" (clickOutside)="hideBankLedgerPopup(true)" (click)="$event.stopPropagation()">
+                                    <tbody>
+                                        <ng-container *ngFor="let item of lc.bankTransactionsData; let i = index">
+                                            <ng-container *ngFor="let txn of item.transactions;">
+                                                <ng-container *ngIf="txn.type === 'DEBIT'">
+                                                    <tr class="ledger-row row" (mouseenter)="txn.showDropdown = true;" (mouseleave)="txn.showDropdown = false;" [ngClass]="{'compoundEntry': txn.id === lc.selectedBankTxnUniqueName}">
+                                                        <td class="col-3 col-md-3 col-lg-3">
+                                                            <div class="d-flex align-items-center">
+                                                                <span class="pl-05 checkbox-span">
+                                                                    <input type="checkbox" id="{{'transaction-mapped-select-entry-dr-' + i}}"
+                                                                        (click)="selectEntryForBulkAction($event, item)" />
+                                                                </span>
+                                                                <span class="ml-05">
+                                                                    <input class="form-control" [maxlength]="10" autocomplete="off" name="bsdateledger" type="text" [(ngModel)]="item.entryDate" bsDatepicker [bsConfig]="{ dateInputFormat: giddhDateFormat }" (ngModelChange)="onChangeEntryDate(item)">
+                                                                </span>
+                                                            </div>
+                                                        </td>
+                                                        <td class="col-5 col-md-6 col-lg-6 select2-parent select2-ledger">
+                                                            <div class="w-100" *ngIf="txn.type === 'DEBIT'" (click)="showBankLedgerPopup(txn, item);">
+                                                                <span [ngClass]="{'account-placeholder': true, 'account-placeholder-text': txn.selectedAccount && txn.selectedAccount.name}" *ngIf="!txn.showDropdown">{{txn.selectedAccount ? (txn.selectedAccount.name) : 'Select Accounts'}}</span>
+                                                                <sh-select *ngIf="txn.showDropdown" class="transaction-list-sh-select" [options]="searchResults" [(ngModel)]="txn.particular" [isPaginationEnabled]="true"
+                                                                    (scrollEnd)="handleScrollEnd()" (dynamicSearchedQuery)="onSearchQueryChanged($event)"
+                                                                    [notFoundMsg]="noResultsFoundLabel"
+                                                                    [showSearchSuggestion]="!(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
+                                                                    [readonlyInput]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2"
+                                                                    [enableDynamicSearch]="true" (selected)="selectAccount($event,txn)" [placeholder]="'Select Accounts'"
+                                                                    [notFoundLink]="true" (noResultsClicked)="showQuickAccountModal()" [showClear]="false"
+                                                                    [multiple]="false" [ItemHeight]="67" [useInBuiltFilterForFlattenAc]="true">
+                                                                    <ng-template #optionTemplate let-option="option">
+                                                                        <ng-container *ngIf="!option.additional?.stock">
+                                                                            <a href="javascript:void(0)" class="list-item">
+                                                                                <div class="item">{{ option.label }}
+                                                                                </div>
+                                                                                <div class="item-unique">
+                                                                                    {{ option.additional?.uniqueName }}
+                                                                                </div>
+                                                                            </a>
+                                                                        </ng-container>
+                                                                        <ng-container *ngIf="option.additional?.stock">
+                                                                            <a href="javascript:void(0)" class="list-item">
+                                                                                <div class="item">{{ option.label }}
+                                                                                </div>
+                                                                                <div class="item-unique">
+                                                                                    {{ option.additional?.uniqueName }}
+                                                                                </div>
+                                                                                <div class="item-stock">Stock:
+                                                                                    {{ option.additional?.stock.name }}
+                                                                                </div>
+                                                                            </a>
+                                                                        </ng-container>
+                                                                    </ng-template>
+                                                                </sh-select>
+                                                                <ul class="no-result-template" *ngIf="lc.noAccountChosenForNewEntry">
+                                                                    <li>Create New Account</li>
+                                                                </ul>
+                                                            </div>
+                                                        </td>
+
+                                                        <td class="col-4 col-md-3 col-lg-3 position-relative">
+                                                            <input class="form-control text-right" type="text" id="{{'enter-amount-dr-' + i}}" decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="txn.amount" (input)="needToReCalculate.next(true)" (click)="blankLedgerAmountClick()" *ngIf="txn.type === 'DEBIT'" (click)="showBankLedgerPopup(txn, item);">
+                                                        </td>
+                                                    </tr>
+                                                    <div class="pos-abs entry-modal"
+                                                        *ngIf="lc.showBankLedgerPanel && lc.currentBlankTxn?.id === txn.id && txn.type === 'DEBIT'">
+                                                        <new-ledger-entry-panel #newLedPanel [trxRequest]="advanceSearchRequest" [isBankTransaction]="true"
+                                                            [blankLedger]="item" [currentTxn]="lc.currentBlankTxn" [needToReCalculate]="needToReCalculate"
+                                                            [isReadOnly]="(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
+                                                            (moreDetailOpen)="handleOpenMoreDetail($event)" (changeTransactionType)="toggleTransactionType($event)"
+                                                            [showTaxationDiscountBox]="lc.currentBlankTxn.showTaxationDiscountBox" (saveBlankLedger)="saveBankTransaction()"
+                                                            (clickedOutsideEvent)="hideBankLedgerPopup($event)" (clickUnpaidInvoiceList)="clickUnpaidInvoiceList($event)"
+                                                            [invoiceList]="invoiceList" (getInvoiceListsForCreditNote)="getInvoiceListsForCreditNote($event)"
+                                                            [isTouristSchemeApplicable]="isTouristSchemeApplicable" (saveOtherTax)="saveOtherTax(item, $event)">
+                                                        </new-ledger-entry-panel>
+                                                    </div>
+                                                </ng-container>
+                                            </ng-container>
+                                        </ng-container>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="right-col-new">
+                                <table class="table ledger-table transaction-mapped-table mb-0">
                                     <thead>
                                         <tr class="row">
                                             <th class="col-3 col-md-3 col-lg-3">Date
                                             </th>
                                             <th class="col-5 col-md-6 col-lg-6">Particular</th>
-                                            <th class="col-4 col-md-3 col-lg-3 alR">Amount</th>
+                                            <th class="col-4 col-md-3 col-lg-3 text-right">Amount</th>
                                         </tr>
                                     </thead>
                                 </table>
-                            </td>
-                            <!-- main right td end here -->
-                        </tr>
-                        <tr class="transaction-table-row">
-                            <td class="nopad bdrL bdrR" colspan="3">
-                                <ng-container *ngFor="let item of lc.bankTransactionsData; let i = index">
-                                <table class="width100"
-                                    (clickOutside)="hideBankLedgerPopup(true)" (click)="$event.stopPropagation()">
-                                    <tbody>
-                                    <ng-container *ngFor="let txn of item.transactions;">
-                                        <ng-container *ngIf="txn.type === 'DEBIT'">
-                                        <tr>
-                                            <td class="width100 pos-rel upper-td">
-                                                <table class="width100">
-                                                    <tbody class="ledger-main">
-                                                        <tr class="ledger-row row"
-                                                            [ngClass]="{compoundEntry: txn.id === lc.selectedBankTxnUniqueName}">
-                                                            <td class="col-3 col-md-3 col-lg-3">
-                                                                <div class="d-flex align-items-center"
-                                                                     >
-                                                                    <span class="pl-05">
-                                                                        <input type="checkbox" id="{{'transaction-mapped-select-entry-dr-' + i}}" (click)="selectEntryForBulkAction($event, item)" /></span>
-                                                                    <span class="ml-05">
-                                                                        <input class="form-control" [maxlength]="10"
-                                                                            autocomplete="off" name="bsdateledger"
-                                                                            type="text" [(ngModel)]="item.entryDate"
-                                                                            bsDatepicker
-                                                                            [bsConfig]="{ dateInputFormat: giddhDateFormat }"
-                                                                            [outsideClick]="true"></span>
-                                                                </div>
-                                                            </td>
-                                                            <td
-                                                                class="col-5 col-md-6 col-lg-6 select2-parent select2-ledger">
-                                                                <div class="w-100" *ngIf="txn.type === 'DEBIT'"
-                                                                    (click)="showBankLedgerPopup(txn, item);">
-                                                                    <sh-select [options]="searchResults"
-                                                                        [(ngModel)]="txn.particular"
-                                                                        [isPaginationEnabled]="true" (scrollEnd)="handleScrollEnd()"
-                                                                        (dynamicSearchedQuery)="onSearchQueryChanged($event)"
-                                                                        [notFoundMsg]="noResultsFoundLabel"
-                                                                        [showSearchSuggestion]="!(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
-                                                                        [readonlyInput]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2"
-                                                                        [enableDynamicSearch]="true"
-                                                                        (selected)="selectAccount($event,txn)"
-                                                                        [placeholder]="'Select Accounts'"
-                                                                        [notFoundLink]="true"
-                                                                        (noResultsClicked)="showQuickAccountModal()"
-                                                                        [showClear]="false" [multiple]="false"
-                                                                        [ItemHeight]="67"
-                                                                        [useInBuiltFilterForFlattenAc]="true">
-                                                                        <ng-template #optionTemplate
-                                                                            let-option="option">
-                                                                            <ng-container
-                                                                                *ngIf="!option.additional?.stock">
-                                                                                <a href="javascript:void(0)"
-                                                                                    class="list-item"
-                                                                                    style="border-bottom: 1px solid #ccc;">
-                                                                                    <div class="item">{{ option.label }}
-                                                                                    </div>
-                                                                                    <div class="item-unique">
-                                                                                        {{ option.additional?.uniqueName }}
-                                                                                    </div>
-                                                                                </a>
-                                                                            </ng-container>
-                                                                            <ng-container
-                                                                                *ngIf="option.additional?.stock">
-                                                                                <a href="javascript:void(0)"
-                                                                                    class="list-item"
-                                                                                    style="border-bottom: 1px solid #ccc;">
-                                                                                    <div class="item">{{ option.label }}
-                                                                                    </div>
-                                                                                    <div class="item-unique">
-                                                                                        {{ option.additional?.uniqueName }}
-                                                                                    </div>
-                                                                                    <div class="item-stock">Stock:
-                                                                                        {{ option.additional?.stock.name }}
-                                                                                    </div>
-                                                                                </a>
-                                                                            </ng-container>
-                                                                        </ng-template>
-                                                                    </sh-select>
-                                                                    <ul class="no-result-template"
-                                                                        *ngIf="lc.noAccountChosenForNewEntry">
-                                                                        <li>Create New Account</li>
-                                                                    </ul>
-                                                                </div>
-                                                            </td>
-
-                                                            <td class="col-4 col-md-3 col-lg-3  pos-rel">
-                                                                <input class="form-control alR" type="text" id="{{'enter-amount-dr-' + i}}"
-                                                                    decimalDigitsDirective [DecimalPlaces]="2"
-                                                                    [(ngModel)]="txn.amount"
-                                                                    (input)="needToReCalculate.next(true)"
-                                                                    (click)="blankLedgerAmountClick()"
-                                                                    *ngIf="txn.type === 'DEBIT'"
-                                                                    (click)="showBankLedgerPopup(txn, item);">
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                                <!--new ledge popup-->
-                                                <div class="pos-abs entry-modal"
-                                                    *ngIf="lc.showBankLedgerPanel && lc.currentBlankTxn?.id === txn.id && txn.type === 'DEBIT'">
-                                                    <new-ledger-entry-panel #newLedPanel
-                                                        [trxRequest]="advanceSearchRequest" [isBankTransaction]="true"
-                                                        [blankLedger]="item" [currentTxn]="lc.currentBlankTxn"
-                                                        [needToReCalculate]="needToReCalculate" [isReadOnly]="(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
-                                                        (moreDetailOpen)="handleOpenMoreDetail($event)"
-                                                        (changeTransactionType)="toggleTransactionType($event)"
-                                                        [showTaxationDiscountBox]="lc.currentBlankTxn.showTaxationDiscountBox"
-                                                        (saveBlankLedger)="saveBankTransaction()"
-                                                        (clickedOutsideEvent)="hideBankLedgerPopup($event)"
-                                                        (clickUnpaidInvoiceList)="clickUnpaidInvoiceList($event)"
-                                                        [invoiceList]="invoiceList"
-                                                        (getInvoiceListsForCreditNote)="getInvoiceListsForCreditNote($event)"
-                                                        [isTouristSchemeApplicable]="isTouristSchemeApplicable"
-                                                        (saveOtherTax)="saveOtherTax(item, $event)">
-                                                    </new-ledger-entry-panel>
-                                                </div>
-                                                <!-- end  -->
-                                            </td>
-                                        </tr>
-                                        </ng-container>
-                                    </ng-container>
-                                    </tbody>
-                                </table>
-                                </ng-container>
-                            </td>
-                            <td colspan="3" class="nopad bdrL bdrR">
-                                <ng-container *ngFor="let item of lc.bankTransactionsData; let i = index">
-                                <table class="width100"
-                                    (clickOutside)="hideBankLedgerPopup(true)" (click)="$event.stopPropagation()">
+                                <table id="ledger-transaction-right-list" class="width-100" (clickOutside)="hideBankLedgerPopup(true)" (click)="$event.stopPropagation()">
                                     <tbody>
-                                    <ng-container *ngFor="let txn of item.transactions;" >
-                                        <ng-container *ngIf="txn.type === 'CREDIT'">
-                                        <tr >
-                                            <td class="width100 pos-rel upper-td">
-                                                <table class="width100">
-                                                    <tbody class="ledger-main">
-                                                        <tr class="ledger-row row">
-                                                            <td class="col-3 col-md-3 col-lg-3">
-                                                                <div class="d-flex align-items-center"
-                                                                    >
-                                                                    <span class="pl-05">
-                                                                        <input type="checkbox" id="{{'transaction-mapped-select-entry-cr-' + i}}"[(ngModel)]="txn.isChecked"
-                                                                            (click)="selectEntryForBulkAction($event, item)" />
-                                                                    </span>
-                                                                    <span class="ml-05">
-                                                                        <input class="form-control" [maxlength]="10"
-                                                                            name="bsDates" autocomplete="off"
-                                                                            type="text" #cbs='bsDatepicker'
-                                                                            [(ngModel)]="item.entryDate" bsDatepicker
-                                                                            [bsConfig]="{ dateInputFormat: giddhDateFormat }"
-                                                                            [outsideClick]="true">
-
-                                                                    </span>
-                                                                </div>
-                                                            </td>
-                                                            <td
-                                                                class="col-5 col-md-6 col-lg-6 select2-parent select2-ledger ">
-                                                                <div class="w-100" *ngIf="txn.type === 'CREDIT'"
-                                                                    (click)="showBankLedgerPopup(txn, item);">
-                                                                    <sh-select [options]="searchResults"
-                                                                        [(ngModel)]="txn.particular"
-                                                                        (selected)="selectAccount($event,txn)"
-                                                                        [isPaginationEnabled]="true" (scrollEnd)="handleScrollEnd()"
-                                                                        (dynamicSearchedQuery)="onSearchQueryChanged($event)"
-                                                                        [notFoundMsg]="noResultsFoundLabel"
-                                                                        [showSearchSuggestion]="!(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
-                                                                        [readonlyInput]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2"
-                                                                        [enableDynamicSearch]="true"
-                                                                        [placeholder]="'Select Accounts'"
-                                                                        [notFoundLink]="true"
-                                                                        (noResultsClicked)="showQuickAccountModal()"
-                                                                        [multiple]="false" [ItemHeight]="67"
-                                                                        [showClear]="false"
-                                                                        [useInBuiltFilterForFlattenAc]="true">
-                                                                        <ng-template #optionTemplate
-                                                                            let-option="option">
-                                                                            <ng-container
-                                                                                *ngIf="!option.additional?.stock">
-                                                                                <a href="javascript:void(0)"
-                                                                                    class="list-item"
-                                                                                    style="border-bottom: 1px solid #ccc;">
-                                                                                    <div class="item">{{ option.label }}
-                                                                                    </div>
-                                                                                    <div class="item-unique">
-                                                                                        {{ option.additional?.uniqueName }}
-                                                                                    </div>
-                                                                                    <!-- <span class="list-item" style="visibility: hidden;font-size:11px">&nbsp;</span> -->
-                                                                                </a>
-                                                                            </ng-container>
-                                                                            <ng-container
-                                                                                *ngIf="option.additional?.stock">
-                                                                                <a href="javascript:void(0)"
-                                                                                    class="list-item"
-                                                                                    style="border-bottom: 1px solid #ccc;">
-                                                                                    <div class="item">{{ option.label }}
-                                                                                    </div>
-                                                                                    <div class="item-unique">
-                                                                                        {{ option.additional?.uniqueName }}
-                                                                                    </div>
-                                                                                    <div class="item-stock">Stock:
-                                                                                        {{ option.additional?.stock.name }}
-                                                                                    </div>
-                                                                                </a>
-                                                                            </ng-container>
-                                                                        </ng-template>
-                                                                    </sh-select>
-                                                                    <ul class="no-result-template"
-                                                                        *ngIf="lc.noAccountChosenForNewEntry">
-                                                                        <li>Create New Account</li>
-                                                                    </ul>
-                                                                </div>
-                                                            </td>
-
-                                                            <td class="col-4 col-md-3 col-lg-3 pos-rel">
-                                                                <input class="form-control alR" type="text"  id="{{'enter-amount-cr-' + i}}"
-                                                                    decimalDigitsDirective [DecimalPlaces]="2"
-                                                                    [(ngModel)]="txn.amount"
-                                                                    (input)="needToReCalculate.next(true)"
-                                                                    (click)="blankLedgerAmountClick()"
-                                                                    *ngIf="txn.type === 'CREDIT'"
-                                                                    (click)="showBankLedgerPopup(txn, item);">
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                                <!--new ledge popup-->
-                                                <div class="pos-abs entry-modal"
-                                                    *ngIf="lc.showBankLedgerPanel && lc.currentBlankTxn?.id === txn.id && txn.type === 'CREDIT'">
-                                                    <new-ledger-entry-panel #newLedPanel
-                                                        [trxRequest]="advanceSearchRequest" [isBankTransaction]="true"
-                                                        [blankLedger]="item" [currentTxn]="lc.currentBlankTxn"
-                                                        [needToReCalculate]="needToReCalculate" [isReadOnly]="(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
-                                                        (moreDetailOpen)="handleOpenMoreDetail($event)"
-                                                        (changeTransactionType)="toggleTransactionType($event)"
-                                                        [showTaxationDiscountBox]="lc.currentBlankTxn.showTaxationDiscountBox"
-                                                        (saveBlankLedger)="saveBankTransaction()"
-                                                        (clickedOutsideEvent)="hideBankLedgerPopup($event)"
-                                                        (clickUnpaidInvoiceList)="clickUnpaidInvoiceList($event)"
-                                                        (getInvoiceListsForCreditNote)="getInvoiceListsForCreditNote($event)"
-                                                        [invoiceList]="invoiceList"
-                                                        (saveOtherTax)="saveOtherTax(item, $event)">
-                                                    </new-ledger-entry-panel>
-                                                </div>
-                                                <!-- end  -->
-                                            </td>
-                                        </tr>
+                                        <ng-container *ngFor="let item of lc.bankTransactionsData; let i = index">
+                                            <ng-container *ngFor="let txn of item.transactions;">
+                                                <ng-container *ngIf="txn.type === 'CREDIT'">
+                                                    <tr class="ledger-row row" (mouseenter)="txn.showDropdown = true;" (mouseleave)="txn.showDropdown = false;">
+                                                        <td class="col-3 col-md-3 col-lg-3">
+                                                            <div class="d-flex align-items-center">
+                                                                <span class="pl-05 checkbox-span">
+                                                                    <input type="checkbox" id="{{'transaction-mapped-select-entry-cr-' + i}}" [(ngModel)]="txn.isChecked"
+                                                                        (click)="selectEntryForBulkAction($event, item)" />
+                                                                </span>
+                                                                <span class="ml-05">
+                                                                    <input class="form-control" [maxlength]="10" name="bsDates" autocomplete="off" type="text" #cbs='bsDatepicker' [(ngModel)]="item.entryDate" bsDatepicker [bsConfig]="{ dateInputFormat: giddhDateFormat }" (ngModelChange)="onChangeEntryDate(item)">
+                                                                </span>
+                                                            </div>
+                                                        </td>
+                                                        <td class="col-5 col-md-6 col-lg-6 select2-parent select2-ledger">
+                                                            <div class="w-100" *ngIf="txn.type === 'CREDIT'" (click)="showBankLedgerPopup(txn, item);">
+                                                                <span [ngClass]="{'account-placeholder': true, 'account-placeholder-text': txn.selectedAccount && txn.selectedAccount.name}" *ngIf="!txn.showDropdown">{{txn.selectedAccount ? (txn.selectedAccount.name) : 'Select Accounts'}}</span>
+                                                                <sh-select *ngIf="txn.showDropdown" class="transaction-list-sh-select" [options]="searchResults" [(ngModel)]="txn.particular" (selected)="selectAccount($event,txn)"
+                                                                    [isPaginationEnabled]="true" (scrollEnd)="handleScrollEnd()"
+                                                                    (dynamicSearchedQuery)="onSearchQueryChanged($event)" [notFoundMsg]="noResultsFoundLabel"
+                                                                    [showSearchSuggestion]="!(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
+                                                                    [readonlyInput]="currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2"
+                                                                    [enableDynamicSearch]="true" [placeholder]="'Select Accounts'" [notFoundLink]="true"
+                                                                    (noResultsClicked)="showQuickAccountModal()" [multiple]="false" [ItemHeight]="67" [showClear]="false"
+                                                                    [useInBuiltFilterForFlattenAc]="true">
+                                                                    <ng-template #optionTemplate let-option="option">
+                                                                        <ng-container *ngIf="!option.additional?.stock">
+                                                                            <a href="javascript:void(0)" class="list-item">
+                                                                                <div class="item">{{ option.label }}
+                                                                                </div>
+                                                                                <div class="item-unique">
+                                                                                    {{ option.additional?.uniqueName }}
+                                                                                </div>
+                                                                            </a>
+                                                                        </ng-container>
+                                                                        <ng-container *ngIf="option.additional?.stock">
+                                                                            <a href="javascript:void(0)" class="list-item">
+                                                                                <div class="item">{{ option.label }}
+                                                                                </div>
+                                                                                <div class="item-unique">
+                                                                                    {{ option.additional?.uniqueName }}
+                                                                                </div>
+                                                                                <div class="item-stock">Stock:
+                                                                                    {{ option.additional?.stock.name }}
+                                                                                </div>
+                                                                            </a>
+                                                                        </ng-container>
+                                                                    </ng-template>
+                                                                </sh-select>
+                                                                <ul class="no-result-template" *ngIf="lc.noAccountChosenForNewEntry">
+                                                                    <li>Create New Account</li>
+                                                                </ul>
+                                                            </div>
+                                                        </td>
+
+                                                        <td class="col-4 col-md-3 col-lg-3 position-relative">
+                                                            <input class="form-control text-right" type="text" id="{{'enter-amount-cr-' + i}}" decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="txn.amount" (input)="needToReCalculate.next(true)" (click)="blankLedgerAmountClick()" *ngIf="txn.type === 'CREDIT'" (click)="showBankLedgerPopup(txn, item);">
+                                                        </td>
+                                                    </tr>
+                                                    <!--new ledge popup-->
+                                                    <div class="pos-abs entry-modal"
+                                                        *ngIf="lc.showBankLedgerPanel && lc.currentBlankTxn?.id === txn.id && txn.type === 'CREDIT'">
+                                                        <new-ledger-entry-panel #newLedPanel [trxRequest]="advanceSearchRequest" [isBankTransaction]="true"
+                                                            [blankLedger]="item" [currentTxn]="lc.currentBlankTxn" [needToReCalculate]="needToReCalculate"
+                                                            [isReadOnly]="(currentOrganizationType === 'COMPANY' && currentCompanyBranches?.length > 2)"
+                                                            (moreDetailOpen)="handleOpenMoreDetail($event)" (changeTransactionType)="toggleTransactionType($event)"
+                                                            [showTaxationDiscountBox]="lc.currentBlankTxn.showTaxationDiscountBox" (saveBlankLedger)="saveBankTransaction()"
+                                                            (clickedOutsideEvent)="hideBankLedgerPopup($event)" (clickUnpaidInvoiceList)="clickUnpaidInvoiceList($event)"
+                                                            (getInvoiceListsForCreditNote)="getInvoiceListsForCreditNote($event)" [invoiceList]="invoiceList"
+                                                            (saveOtherTax)="saveOtherTax(item, $event)">
+                                                        </new-ledger-entry-panel>
+                                                    </div>
+                                                    <!-- end  -->
+                                                </ng-container>
+                                            </ng-container>
                                         </ng-container>
-                                    </ng-container>
                                     </tbody>
                                 </table>
-                                </ng-container>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <!-- end main tbody -->
-                    <tfoot>
-                        <tr class="fw600 dgreyBg">
-                            <td colspan="2" class="bdrL" style="width:36%">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-center mr-t2 page-count position-absolute">
+                        <span class="grey ng-binding">{{ bankTransactionsResponse?.totalItems }} transactions, </span>
+                        <span class="black ng-binding">{{ bankTransactionsResponse?.totalPages }} pages</span>
+                        <pagination [totalItems]="(bankTransactionsResponse?.countPerPage)*(bankTransactionsResponse?.totalPages)" [itemsPerPage]="bankTransactionsResponse?.countPerPage" [maxSize]="5" class="pagination-sm" [(ngModel)]="bankTransactionsResponse.page" (pageChanged)="bankTransactionPageChanged($event)" [boundaryLinks]="true"></pagination>
+                    </div>
+                    <table class="w-100">
+                        <tr>
+                            <td colspan="12" class="py-2 px-3 font-14">
                                 <div class="pull-right" *ngIf="eLedgType == 'CREDIT'">
                                     C/F Balance
+                                    <span class="pl-15 digit-blue" *ngIf="eLedgType == 'CREDIT'" >{{eDrBalAmnt | giddhCurrency}}</span>
                                 </div>
                             </td>
-                            <td style="width:14%" class="bdrR alR">
-                                <span *ngIf="eLedgType == 'CREDIT'">{{eDrBalAmnt | giddhCurrency}}</span>
-                            </td>
-                            <td colspan="2" style="width:36%" class="bdrL">
-                                <div class="pull-right" *ngIf="eLedgType == 'DEBIT'">
-                                    C/F Balance
+                            <td colspan="12" class="bd-rl py-2 px-3 font-14" *ngIf="eLedgType == 'DEBIT'">
+                                <div class="pull-right">
+                                    C/F Balance <span  class="pl-15 digit-blue" *ngIf="eLedgType == 'DEBIT'">{{eCrBalAmnt | giddhCurrency}}</span>
                                 </div>
                             </td>
-                            <td style="width:14%" class="bdrR alR">
-                                <span *ngIf="eLedgType == 'DEBIT'">{{eCrBalAmnt | giddhCurrency}}</span>
-                            </td>
                         </tr>
-
-                    </tfoot>
-                    <!-- end main tfoot -->
-                </table>
-            </div>
-        </section>
+                    </table>
+                </div>
+            </section>
+        </div>
         <!-- endregion -->
         <!-- region account table-->
         <!-- Need to make this code correctly working -->
@@ -611,11 +514,11 @@ <h3 class="ledgerHead">
                     <td class="border-none pt-0 pb-0">
                         <table width="100%">
                             <tr>
-                                <td class="transction-date pl-15 pr-15 pt-05" colspan="2">{{transactionDate}}</td>
+                                <td class="transaction-date pd-l15 pd-r15 pd-t05" colspan="2">{{transactionDate}}</td>
                             </tr>
                             <tr class="second-row" *ngFor="let transactions of allTransactionsList[transactionDate]; let i = index">
-                                <td class="pl-15 pr-15 relative"
-                                    [ngClass]="{compoundEntry: transactions.entryUniqueName === lc.selectedTxnUniqueName || transactions.isChecked}"
+                                <td class="pd-l15 pd-r15 relative"
+                                    [ngClass]="{'compound-entry': transactions.entryUniqueName === lc.selectedTxnUniqueName || transactions.isChecked}"
                                     tooltip="{{transactions.description}}"
                                     (mouseover)="entryHovered(transactions.entryUniqueName)"
                                     (mouseout)="selectedTrxWhileHovering = ''">
@@ -626,8 +529,8 @@ <h3 class="ledgerHead">
                                             (click)="entrySelected($event, transactions.entryUniqueName)">
                                     </span>
                                     <span class="account-holder-name">
-                                        <span *ngIf="transactions.type === 'CREDIT'" class="text-gray mr-05">By</span>
-                                        <span *ngIf="transactions.type === 'DEBIT'" class="text-gray mr-05">To</span>
+                                        <span *ngIf="transactions.type === 'CREDIT'" class="text-gray mr-r05">By</span>
+                                        <span *ngIf="transactions.type === 'DEBIT'" class="text-gray mr-r05">To</span>
                                         <span>{{ transactions?.inventory ? transactions?.particular?.name + ' (' + transactions?.inventory?.stock?.name + ')' : transactions?.particular?.name }}</span>
                                         <span class="download-invoice-ledger d-flex"
                                             *ngIf="transactions.attachedFileUniqueName"
@@ -641,11 +544,11 @@ <h3 class="ledgerHead">
                                         </span>
                                     </span>
                                 </td>
-                                <td class="pl-15 pr-15 text-right">
+                                <td class="pd-l15 pd-r15 text-right">
                                     <div class="d-flex justify-content-end">
                                         <div>
                                             {{ transactions.currencySymbol }}{{ transactions.amount | giddhCurrency }}
-                                            <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                            <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                                 {{ transactions.convertedCurrencySymbol }}{{ transactions.convertedAmount | giddhCurrency }}
                                             </p>
                                         </div>
@@ -658,7 +561,7 @@ <h3 class="ledgerHead">
                 </tbody>
             </table>
             <!-- region pagination -->
-            <div class="text-center mr-t2 page-count pa">
+            <div class="text-center mr-t2 page-count position-absolute">
                 <span class="grey ng-binding">{{ (lc.transactionData$ | async)?.totalItems }} transactions, </span>
                 <span class="black ng-binding">{{ (lc.transactionData$ | async)?.totalPages }} pages</span>
 
@@ -682,12 +585,12 @@ <h3 class="ledgerHead">
             <div [ngClass]="Shown ? 'active' : ''" hr-item
                 (ngInit)="initNavigator(navigator,$event.nativeElement); navigator.nextVertical();"
                 class="left-col-new"
-                [ngClass]="{'bdrR': (lc.transactionData$ | async)?.debitTransactions?.length >= (lc.transactionData$ | async)?.creditTransactions?.length}">
+                [ngClass]="{'bd-rr': (lc.transactionData$ | async)?.debitTransactions?.length >= (lc.transactionData$ | async)?.creditTransactions?.length}">
 
                 <!-- region debit transaction header-->
-                <table class="width100 h-table table-head hidden-xs">
+                <table class="width-100 h-table table-head hidden-xs">
                     <thead>
-                        <tr class="t-h-bg1 row">
+                        <tr class="thead-background1 row">
                             <th class="col-xs-3 col-md-3 col-lg-3" width="25%">
                                 <span class="cp">Date</span>
                             </th>
@@ -699,7 +602,7 @@ <h3 class="ledgerHead">
                 <!-- endregion -->
 
 
-                <table class="width100 h-table">
+                <table class="width-100 h-table">
                     <tbody>
                         <!-- region debit transaction if forwardedBalance -->
                         <tr class="ledger-row row" container="body" vr-item tabindex="-1"
@@ -722,12 +625,12 @@ <h3 class="ledgerHead">
                                 <span *ngIf="ledgerTxnBalance?.forwardedBalance?.type === 'DEBIT'" class="">
                                     {{ ledgerTxnBalance?.currencySymbol }}{{ ledgerTxnBalance?.forwardedBalance?.amount  | giddhCurrency }}
                                 </span><br>
-                                <span class="amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <span class="amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedForwardedBalance?.amount | giddhCurrency}}
                                 </span>
                                 <span *ngIf="ledgerTxnBalance?.forwardedBalance?.type === 'CREDIT'" class="">0</span>
 
-                                <!--              <p class="mb-0 amnt-total">$454</p>-->
+                                <!--              <p class="mb-0 amount-total">$454</p>-->
                                 </ng-container>
                             </td>
                         </tr>
@@ -754,7 +657,7 @@ <h3 class="ledgerHead">
                         <tr vr-item tabindex="-1" class="ledger-row row"
                             *ngFor="let txn of (lc.transactionData$ | async)?.debitTransactions; let i = index;"
                             (dblclick)="showUpdateLedgerModal(txn)" (keydown.enter)="showUpdateLedgerModal(txn)"
-                            [ngClass]="{compoundEntry: txn.entryUniqueName === lc.selectedTxnUniqueName || txn.isChecked}"
+                            [ngClass]="{'compound-entry': txn.entryUniqueName === lc.selectedTxnUniqueName || txn.isChecked}"
                             tooltip="{{txn.description}}" (mouseover)="entryHovered(txn.entryUniqueName)"
                             (mouseout)="selectedTrxWhileHovering = ''">
 
@@ -765,7 +668,7 @@ <h3 class="ledgerHead">
                             <td class="col-xs-3 col-md-3 col-lg-3" data-title="Date">
 
                                 <div class="d-flex align-items-center">
-                                    <span style="float: left">
+                                    <span class="float-left">
                                         <input type="checkbox" id="{{ 'select-entry-dr-' + i}}"
                                             [ngClass]="{'d-none': (selectedTrxWhileHovering !== txn.entryUniqueName && !(txn.isChecked) && checkedTrxWhileHovering?.length === 0)}"
                                             class="d-none" [(ngModel)]="txn.isChecked"
@@ -779,33 +682,29 @@ <h3 class="ledgerHead">
                             <td class="col-xs-5 col-md-6 col-lg-6" data-title="Particular">
                                 <div class="d-flex align-items-center justify-content-between w-100">
 
-                                    <div class="ellp">
+                                    <div class="text-ellipsis">
                                         To
                                         {{ txn.inventory ? txn.particular.name + ' (' + txn.inventory.stock.name + ')' : txn.particular.name }}
                                     </div>
 
                                     <span class="download-invoice-ledger d-flex" *ngIf="txn.attachedFileUniqueName"
-                                        style="position: unset;align-items: center"
                                         (click)="downloadAttachedFile(txn.attachedFileUniqueName , $event)"
                                         tooltip="Download file : {{txn.attachedFileName}}" [placement]="'right'">
-                                        <i class="icon-download-circle pull-left"
-                                            style="font-size:15px;top: 0 !important;margin-top: 1px !important;"></i>
+                                        <i class="icon-download-circle pull-left"></i>
                                     </span>
                                     <span class="download-invoice-ledger d-flex" *ngIf="txn.voucherGenerated"
-                                        style="position: unset;align-items: center"
                                         (click)="downloadInvoice(txn.voucherNumber, txn.voucherGeneratedType, $event)"
                                         tooltip="Download {{txn.voucherGeneratedType === 'sales' ? 'Invoice': 'Voucher'}} : {{txn.voucherNumber}}"
                                         [placement]="'right'">
-                                        <i class="icon-download-circle pull-left"
-                                            style="font-size:15px;top: 0 !important;margin-top: 1px !important;"></i>
+                                        <i class="icon-download-circle pull-left"></i>
                                     </span>
                                 </div>
                             </td>
 
-                            <td  [ngClass]="{'multicurrency-amount':isLedgerAccountAllowsMultiCurrency}"  class="col-xs-4 col-md-3 col-lg-3 pos-rel text-right" data-title="Amount">
+                            <td  [ngClass]="{'multicurrency-amount':isLedgerAccountAllowsMultiCurrency}"  class="col-xs-4 col-md-3 col-lg-3 position-relative text-right" data-title="Amount">
                                 {{ txn.currencySymbol }}{{ txn.amount | giddhCurrency }}
 
-                                <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ txn.convertedCurrencySymbol }}{{ txn.convertedAmount | giddhCurrency }}</p>
                             </td>
                         </tr>
@@ -814,26 +713,26 @@ <h3 class="ledgerHead">
                 </table>
 
                 <!-- region blank ledger-->
-                <table class="width100 h-table" no-tree (click)="$event.stopPropagation();" id="blank-ledger-container"
+                <table class="width-100 h-table" no-tree (click)="$event.stopPropagation();" id="blank-ledger-container"
                     (clickOutside)="hideNewLedgerEntryPopup($event)">
                     <tbody>
 
                         <tr *ngFor="let txn of lc.blankLedger.transactions; let i = index">
 
-                            <td class="width100 no-left-border" *ngIf="txn.type === 'DEBIT'">
+                            <td class="width-100 no-left-border" *ngIf="txn.type === 'DEBIT'">
 
-                                <table class="width100">
+                                <table class="width-100">
                                     <tbody class="ledger-main">
                                         <tr class="ledger-row row" container="body">
 
                                             <td class="col-xs-3 col-md-3 col-lg-3" data-title="Date">
                                                 <div class="d-flex align-items-center">
-                                                    <span class="ledger-checkbox" style="float: left">
+                                                    <span class="ledger-checkbox" class="float-left">
                                                         <!--<input type="checkbox"/>-->
                                                     </span>
                                                     <input type="text" name="ledgDate" [maxlength]="10"
-                                                        #bs="bsDatepicker" class="form-control dateStep focusUnset"
-                                                        style="padding-left: 7px !important;" bsDatepicker
+                                                        #bs="bsDatepicker" class="form-control date-step focus-unset"
+                                                        bsDatepicker
                                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                                         [(ngModel)]="lc.blankLedger.entryDate"
                                                         [placeholder]="lc.formatPlaceholder" [outsideClick]="true"
@@ -866,16 +765,14 @@ <h3 class="ledgerHead">
                                                         [useInBuiltFilterForFlattenAc]="true">
                                                         <ng-template #optionTemplate let-option="option">
                                                             <ng-container *ngIf="!option.additional?.stock">
-                                                                <a href="javascript:void(0)" class="list-item"
-                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                <a href="javascript:void(0)" class="list-item">
                                                                     <div class="item">{{ option.label }}</div>
                                                                     <div class="item-unique">
                                                                         {{ option.additional?.uniqueName }}</div>
                                                                 </a>
                                                             </ng-container>
                                                             <ng-container *ngIf="option.additional?.stock">
-                                                                <a href="javascript:void(0)" class="list-item"
-                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                <a href="javascript:void(0)" class="list-item">
                                                                     <div class="item">{{ option.label }}</div>
                                                                     <div class="item-unique">
                                                                         {{ option.additional?.uniqueName }}</div>
@@ -903,8 +800,8 @@ <h3 class="ledgerHead">
 
                                             </td>
 
-                                            <td data-title="Amount" class="col-xs-4 col-md-3 col-lg-3 pos-rel">
-                                                <input class="form-control alR" type="text"  id="{{'enter-bank-amount-dr-' + i}}"
+                                            <td data-title="Amount" class="col-xs-4 col-md-3 col-lg-3 position-relative">
+                                                <input class="form-control text-right" type="text"  id="{{'enter-bank-amount-dr-' + i}}"
                                                     [prefix]="selectedPrefixForCurrency"
                                                     [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                                                     [(ngModel)]="txn.amount" (input)="handleAmountInput(txn);"
@@ -957,11 +854,11 @@ <h3 class="ledgerHead">
             <!-- region credit transaction-->
             <div [ngClass]="isHide ? 'active' : 'right-col-new'" class="right-col-new" hr-item
                 (ngInit)="initNavigator(navigator,$event.nativeElement); navigator.nextVertical();"
-                [ngClass]="{'bdrL': (lc.transactionData$ | async)?.debitTransactions?.length < (lc.transactionData$ | async)?.creditTransactions?.length}">
+                [ngClass]="{'bd-rl': (lc.transactionData$ | async)?.debitTransactions?.length < (lc.transactionData$ | async)?.creditTransactions?.length}">
                 <!-- region credit transaction header-->
-                <table class="width100 h-table hidden-xs">
+                <table class="width-100 h-table hidden-xs">
                     <thead>
-                        <tr class="t-h-bg1 row">
+                        <tr class="thead-background1 row">
                             <th class="col-xs-3 col-md-3 col-lg-3" width="25%">
                                 <span class="cp">Date</span>
                             </th>
@@ -972,7 +869,7 @@ <h3 class="ledgerHead">
                 </table>
                 <!-- endregion -->
 
-                <table class="width100 h-table">
+                <table class="width-100 h-table">
                     <tbody>
 
                         <!-- region credit transaction if forwardedBalance -->
@@ -996,11 +893,11 @@ <h3 class="ledgerHead">
                                 <span *ngIf="ledgerTxnBalance?.forwardedBalance?.type === 'CREDIT'">
                                     {{ ledgerTxnBalance?.currencySymbol }}{{ ledgerTxnBalance?.forwardedBalance?.amount | giddhCurrency}}
                                 </span><br>
-                                <span class="amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <span class="amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol }}{{ledgerTxnBalance?.convertedForwardedBalance?.amount | giddhCurrency }}
                                 </span>
                                 <span *ngIf="ledgerTxnBalance?.forwardedBalance?.type === 'DEBIT'">0</span>
-                                <!--              <p class="mb-0 amnt-total">$454</p>-->
+                                <!--              <p class="mb-0 amount-total">$454</p>-->
                                 </ng-container>
                             </td>
                         </tr>
@@ -1028,7 +925,7 @@ <h3 class="ledgerHead">
                         <tr class="ledger-row row" *ngFor="let txn of (lc.transactionData$ | async)?.creditTransactions; let i = index"
                             (dblclick)="showUpdateLedgerModal(txn)" vr-item tabindex="-1"
                             (keydown.enter)="showUpdateLedgerModal(txn)"
-                            [ngClass]="{compoundEntry: txn.entryUniqueName === lc.selectedTxnUniqueName || txn.isChecked}"
+                            [ngClass]="{'compound-entry': txn.entryUniqueName === lc.selectedTxnUniqueName || txn.isChecked}"
                             tooltip="{{txn.description}}" data-toggle="tooltip"
                             (mouseover)="entryHovered(txn.entryUniqueName)" (mouseout)="selectedTrxWhileHovering = ''">
 
@@ -1039,7 +936,7 @@ <h3 class="ledgerHead">
                             <td class="col-xs-3 col-md-3 col-lg-3" data-title="Date">
 
                                 <div class="d-flex align-items-center">
-                                    <span class="ledger-checkbox" style="float: left">
+                                    <span class="ledger-checkbox" class="float-left">
 
                                         <input type="checkbox" id="{{'select-entry-cr-' + i }}"
                                             [ngClass]="{'d-none': (selectedTrxWhileHovering !== txn.entryUniqueName && !(txn.isChecked) && checkedTrxWhileHovering?.length === 0)}"
@@ -1055,32 +952,28 @@ <h3 class="ledgerHead">
                             <td class="col-xs-5 col-md-6 col-lg-6" data-title="Particular">
 
                                 <div class="d-flex align-items-center justify-content-between w-100">
-                                    <div class="ellp">
+                                    <div class="text-ellipsis">
                                         By
                                         {{ txn.inventory ? txn.particular.name + ' (' + txn.inventory.stock.name + ')' : txn.particular.name }}
                                     </div>
 
                                     <span class="download-invoice-ledger d-flex" *ngIf="txn.attachedFileUniqueName"
-                                        style="position: unset;align-items: center"
                                         (click)="downloadAttachedFile(txn.attachedFileUniqueName , $event)"
                                         tooltip="Download file : {{txn.attachedFileName}}" [placement]="'right'">
-                                        <i class="icon-download-circle pull-left"
-                                            style="font-size:15px;top: 0 !important;margin-top: 1px !important;"></i>
+                                        <i class="icon-download-circle pull-left"></i>
                                     </span>
                                     <span class="download-invoice-ledger d-flex" *ngIf="txn.voucherGenerated"
-                                        style="position: unset;align-items: center"
                                         (click)="downloadInvoice(txn.voucherNumber, txn.voucherGeneratedType, $event)"
                                         tooltip="Download {{txn.voucherGeneratedType === 'sales' ? 'Invoice': 'Voucher'}} : {{txn.voucherNumber}}"
                                         [placement]="'right'">
-                                        <i class="icon-download-circle pull-left"
-                                            style="font-size:15px;top: 0 !important;margin-top: 1px !important;"></i>
+                                        <i class="icon-download-circle pull-left"></i>
                                     </span>
                                 </div>
                             </td>
 
-                            <td  [ngClass]="{'multicurrency-amount':isLedgerAccountAllowsMultiCurrency}"  data-title="Amount" class="col-xs-4 col-md-3 col-lg-3 pos-rel text-right">
+                            <td  [ngClass]="{'multicurrency-amount':isLedgerAccountAllowsMultiCurrency}"  data-title="Amount" class="col-xs-4 col-md-3 col-lg-3 position-relative text-right">
                                 {{ txn.currencySymbol }} {{txn.amount | giddhCurrency}}
-                                <p class="mb-0 amnt-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <p class="mb-0 amount-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ txn.convertedCurrencySymbol }}{{ txn.convertedAmount | giddhCurrency}}
                                 </p>
 
@@ -1091,15 +984,15 @@ <h3 class="ledgerHead">
                 </table>
 
                 <!-- region blank ledger-->
-                <table class="width100 " no-tree (clickOutside)="hideNewLedgerEntryPopup($event)"
+                <table class="width-100" no-tree (clickOutside)="hideNewLedgerEntryPopup($event)"
                     (click)="$event.stopPropagation()">
                     <tbody>
 
                         <tr *ngFor="let txn of lc.blankLedger.transactions; let i = index">
 
-                            <td class="width100" *ngIf="txn.type === 'CREDIT'">
+                            <td class="width-100" *ngIf="txn.type === 'CREDIT'">
 
-                                <table class="width100 h-table">
+                                <table class="width-100 h-table">
                                     <tbody class="ledger-main">
                                         <tr class="ledger-row row" container="body">
 
@@ -1110,19 +1003,19 @@ <h3 class="ledgerHead">
                                             <td class="col-xs-3 col-md-3 col-lg-3" data-title="Date">
 
                                                 <div class="d-flex align-items-center">
-                                                    <span class="ledger-checkbox" style="float: left">
+                                                    <span class="ledger-checkbox" class="float-left">
                                                         <!--<input type="checkbox"/>-->
                                                     </span>
                                                     <input type="text" name="bsdateledger" [maxlength]="10"
-                                                        #bsd='bsDatepicker' class="form-control dateStep focusUnset"
-                                                        [outsideClick]="true" style="padding-left: 7px !important;"
+                                                        #bsd='bsDatepicker' class="form-control date-step focus-unset"
+                                                        [outsideClick]="true"
                                                         bsDatepicker [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                                         [(ngModel)]="lc.blankLedger.entryDate"
                                                         [placeholder]="lc.formatPlaceholder" autocomplete="off" />
                                                 </div>
 
                                             </td>
-                                            <td class="col-xs-5 col-md-6 col-lg-6 select2-parent select2-ledger "
+                                            <td class="col-xs-5 col-md-6 col-lg-6 select2-parent select2-ledger"
                                                 data-title="Particular" (click)="bsd.hide()"
                                                 (mousedown)="showNewLedgerEntryPopup(txn);">
 
@@ -1147,16 +1040,14 @@ <h3 class="ledgerHead">
                                                         [useInBuiltFilterForFlattenAc]="true">
                                                         <ng-template #optionTemplate let-option="option">
                                                             <ng-container *ngIf="!option.additional?.stock">
-                                                                <a href="javascript:void(0)" class="list-item"
-                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                <a href="javascript:void(0)" class="list-item">
                                                                     <div class="item">{{ option.label }}</div>
                                                                     <div class="item-unique">
                                                                         {{ option.additional?.uniqueName }}</div>
                                                                 </a>
                                                             </ng-container>
                                                             <ng-container *ngIf="option.additional?.stock">
-                                                                <a href="javascript:void(0)" class="list-item"
-                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                <a href="javascript:void(0)" class="list-item">
                                                                     <div class="item">{{ option.label }}</div>
                                                                     <div class="item-unique">
                                                                         {{ option.additional?.uniqueName }}</div>
@@ -1185,8 +1076,8 @@ <h3 class="ledgerHead">
                                                 </ul>
                                             </td>
 
-                                            <td class="col-xs-4 col-md-3 col-lg-3 pos-rel" data-title="Amount">
-                                                <input class="form-control alR" type="text"  id="enter-bank-amount-cr"
+                                            <td class="col-xs-4 col-md-3 col-lg-3 position-relative" data-title="Amount">
+                                                <input class="form-control text-right" type="text"  id="enter-bank-amount-cr"
                                                     [prefix]="selectedPrefixForCurrency"
                                                     [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                                                     [(ngModel)]="txn.amount" (input)="handleAmountInput(txn);"
@@ -1237,14 +1128,13 @@ <h3 class="ledgerHead">
             <!--endregion-->
 
             <!-- region footer-->
-            <div style="width: 100%">
-                <table class="ledger-footer-1" style="width:50%;left:0;bottom:0;float: left;">
+            <div class="w-100">
+                <table class="ledger-footer-1 left-align">
                     <tbody>
 
                         <tr class="total-col">
 
-                            <td colspan="12" class="col-xs-12 text-right white h32"
-                                style="padding-right:10px !important">
+                            <td colspan="12" class="col-xs-12 text-right white h32 pd-r1">
 
                                 <span *ngIf="ledgerTxnBalance?.closingBalance?.type === 'CREDIT'"
                                     [tooltip]="lc.ledgerUnderStandingObj.balanceText.cr" [placement]="'left'">
@@ -1263,16 +1153,15 @@ <h3 class="ledgerHead">
 
                         <tr class="total-col">
 
-                            <td colspan="12" class="col-xs-12 text-right white h32 border-top"
-                                style="padding-right:10px !important;">
+                            <td colspan="12" class="col-xs-12 text-right white h32 border-top pd-r1">
 
-                                <div class="d-flex" style="flex-direction: column;">
+                                <div class="d-flex flex-column">
 
-                                    <span class="bdrT ng-binding" style="padding: 1px 0;">
+                                    <span class="bd-rt ng-binding" style="padding: 1px 0;">
                                         {{ ledgerTxnBalance?.currencySymbol }}{{lc.reckoningDebitTotal  | giddhCurrency }}
                                     </span>
 
-                                    <span class="bdrT ng-binding text-gray" style="padding: 1px 0;"
+                                    <span class="bd-rt ng-binding text-gray" style="padding: 1px 0;"
                                         *ngIf="isLedgerAccountAllowsMultiCurrency">
                                         {{ ledgerTxnBalance?.convertedCurrencySymbol }}{{lc.convertedReckoningDebitTotal  | giddhCurrency }}
                                     </span>
@@ -1284,13 +1173,12 @@ <h3 class="ledgerHead">
                     </tbody>
                 </table>
 
-                <table class=" ledger-footer-1 " style="width:50%;right:0;bottom:0;">
+                <table class="ledger-footer-1 right-align">
                     <tbody>
 
                         <tr class="total-col">
 
-                            <td colspan="12" class="col-xs-12 text-right white h32"
-                                style="padding-right:10px !important">
+                            <td colspan="12" class="col-xs-12 text-right white h32 pd-r1">
                                 <span *ngIf="ledgerTxnBalance?.closingBalance?.type === 'DEBIT'"
                                     [tooltip]="lc.ledgerUnderStandingObj.balanceText.dr" [placement]="'left'">
                                     <!-- By -->
@@ -1304,15 +1192,14 @@ <h3 class="ledgerHead">
                         </tr>
 
                         <tr class="total-col">
-                            <td colspan="12" class="col-xs-12 text-right white h32 border-top"
-                                style="padding-right:10px !important;">
+                            <td colspan="12" class="col-xs-12 text-right white h32 border-top pd-r1">
 
-                                <div class="d-flex" style="flex-direction: column;">
-                                    <span class="bdrT" style="padding: 1px 0;">
+                                <div class="d-flex flex-column">
+                                    <span class="bd-rt" style="padding: 1px 0;">
                                         {{ ledgerTxnBalance?.currencySymbol }}{{lc.reckoningCreditTotal | giddhCurrency }}
                                     </span>
 
-                                    <span class="bdrT text-gray" *ngIf="isLedgerAccountAllowsMultiCurrency"
+                                    <span class="bd-rt text-gray" *ngIf="isLedgerAccountAllowsMultiCurrency"
                                         style="padding: 1px 0;">
                                         {{ ledgerTxnBalance?.convertedCurrencySymbol }}{{lc.convertedReckoningCreditTotal | giddhCurrency }}
                                     </span>
@@ -1353,12 +1240,12 @@ <h3 class="ledgerHead">
             <div *ngIf="closingBalanceBeforeReconcile  showLoader" class="box balance-detail mr-t2 mr-b2 clearfix text-center">
                 <div class="row">
                     <div class="col-md-6 col-sm-6 col-12 text-right">Balance as per bank
-                        <h3 class="fs20 primary_clr">{{reconcileClosingBalanceForBank?.amount}}
+                        <h3 class="font-20 primary-color">{{reconcileClosingBalanceForBank?.amount}}
                             {{reconcileClosingBalanceForBank?.type}}
                         </h3>
                     </div>
                     <div class="col-md-6 col-sm-6 col-12 text-left">Pending cheque
-                        <h3 class="fs20 primary_clr">{{closingBalanceBeforeReconcile?.amount}}
+                        <h3 class="font-20 primary-color">{{closingBalanceBeforeReconcile?.amount}}
                             {{closingBalanceBeforeReconcile?.type}}
                         </h3>
                     </div>
@@ -1375,7 +1262,7 @@ <h3 class="fs20 primary_clr">{{closingBalanceBeforeReconcile?.amount}}
 <!-- commented due to API  -->
 <div class="transaction-in-short" *ngIf="!isShowLedgerColumnarReportTable">
     <div class="container">
-        <section class="ledger-stat mrT3"
+        <section class="ledger-stat mr-t3"
             *ngIf="!showLoader">
 
             <div class="row">
@@ -1385,9 +1272,9 @@ <h1>Total Transactions
                             <span class="digit-blue">{{(lc.transactionData$ | async)?.debitTransactionsCount + (lc.transactionData$ |
                 async)?.creditTransactionsCount}}</span>
                         </h1>
-                        <span class=" mrR2 greyTextClr">Debit <span
+                        <span class=" mr-r2 grey-text-color">Debit <span
                                 class="digit-blue">{{(lc.transactionData$ | async)?.debitTransactionsCount}}</span></span><br>
-                        <span class=" mrR2 greyTextClr">Credit <span class="digit-blue">
+                        <span class=" mr-r2 grey-text-color">Credit <span class="digit-blue">
                                 {{(lc.transactionData$ | async)?.creditTransactionsCount}}</span></span>
                     </div>
                 </div>
@@ -1400,7 +1287,7 @@ <h3 class="digit-blue">
                             {{ ledgerTxnBalance?.forwardedBalance?.amount > 0 ? (ledgerTxnBalance?.forwardedBalance?.type === 'DEBIT' ? 'Dr' : 'Cr') : '' }}
                         </h3>
 
-                        <h3 class="digit-blue font-12 subTotal" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                        <h3 class="digit-blue font-12 sub-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                             {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedForwardedBalance?.amount | giddhCurrency}}
                             {{ ledgerTxnBalance?.convertedForwardedBalance?.amount > 0 ? (ledgerTxnBalance?.forwardedBalance?.type === 'DEBIT' ? 'Dr' : 'Cr') : '' }}
                         </h3>
@@ -1421,7 +1308,7 @@ <h3 class="digit-blue">
                                     Cr.
                                 </h3>
 
-                                <h3 class="digit-blue subTotal font-12" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <h3 class="digit-blue sub-total font-12" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedCreditTotal - ledgerTxnBalance?.convertedDebitTotal | giddhCurrency}}
                                     Cr.
                                 </h3>
@@ -1429,7 +1316,7 @@ <h3 class="digit-blue subTotal font-12" *ngIf="isLedgerAccountAllowsMultiCurrenc
 
                         </div>
 
-                        <div class="d-flex" style="justify-content: space-between">
+                        <div class="d-flex justify-content-between">
 
                             <div *ngIf="ledgerTxnBalance?.creditTotal < ledgerTxnBalance?.debitTotal">
                                 <h3 class="digit-blue">
@@ -1437,7 +1324,7 @@ <h3 class="digit-blue">
                                     Dr.
                                 </h3>
 
-                                <h3 class="digit-blue subTotal font-12" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <h3 class="digit-blue sub-total font-12" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedDebitTotal - ledgerTxnBalance?.convertedCreditTotal | giddhCurrency}}
                                     Dr.
                                 </h3>
@@ -1448,20 +1335,20 @@ <h3 class="digit-blue subTotal font-12" *ngIf="isLedgerAccountAllowsMultiCurrenc
 
                         <div class="d-flex debit-credit-amount">
 
-                            <h1 class="mr-t font16 greyTextClr d-flex" style="flex-direction: column">Debit
+                            <h1 class="mr-t05 font-16 grey-text-color d-flex flex-column">Debit
                                 <span class="digit-blue mt-1">
                                     {{ ledgerTxnBalance?.currencySymbol}}{{ledgerTxnBalance?.debitTotal | giddhCurrency}}
                                 </span>
-                                <span class="digit-blue font-12 subTotal" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <span class="digit-blue font-12 sub-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedDebitTotal | giddhCurrency}}
                                 </span>
                             </h1>
 
-                            <h1 class="mr-t font16 greyTextClr d-flex" style="flex-direction: column">Credit
+                            <h1 class="mr-t05 font-16 grey-text-color d-flex flex-column">Credit
                                 <span class="digit-blue mt-1">
                                     {{ ledgerTxnBalance?.currencySymbol}}{{ledgerTxnBalance?.creditTotal | giddhCurrency}}
                                 </span>
-                                <span class="digit-blue font-12 subTotal" *ngIf="isLedgerAccountAllowsMultiCurrency">
+                                <span class="digit-blue font-12 sub-total" *ngIf="isLedgerAccountAllowsMultiCurrency">
                                     {{ ledgerTxnBalance?.convertedCurrencySymbol}}{{ledgerTxnBalance?.convertedCreditTotal | giddhCurrency}}
                                 </span>
                             </h1>
@@ -1475,7 +1362,7 @@ <h1 class="mr-t font16 greyTextClr d-flex" style="flex-direction: column">Credit
 
                     <div class="ledger-state-box">
                         <h1>Closing Balance</h1>
-                        <div class="d-flex" style="justify-content: space-between;flex-direction: column">
+                        <div class="d-flex flex-column justify-content-between">
                             <h3 class="digit-blue" container="body">
                                 <span
                                     [tooltip]="(ledgerTxnBalance?.closingBalance?.type === 'DEBIT' ? lc.ledgerUnderStandingObj.balanceText.dr : lc.ledgerUnderStandingObj.balanceText.cr)">{{ ledgerTxnBalance?.currencySymbol}}{{ledgerTxnBalance?.closingBalance?.amount | giddhCurrency}}
@@ -1501,7 +1388,7 @@ <h3 class="digit-blue" container="body" *ngIf="isLedgerAccountAllowsMultiCurrenc
 <!-- modal sections -->
 
 <div *ngIf="isShowLedgerColumnarReportTable">
-    <div class="back-btn text-right pr-1 mt-1 mb-1">
+    <div class="back-btn text-right pr-1 mt-1 mr-b1">
         <button class="btn btn-default" (click)="isShowLedgerColumnarReportTable=false">Back</button>
     </div>
     <ledger-columnar-report-table [columnarReportExportRequest]="columnarReportExportRequest"
@@ -1579,21 +1466,21 @@ <h3 class="digit-blue" container="body" *ngIf="isLedgerAccountAllowsMultiCurrenc
 <div bsModal #bulkActionConfirmationModal="bs-modal" tabindex="-1" class="modal fade" role="dialog">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div id="" class="">
-                <div class="modal-header themeBg pdL2 pdR2 clearfix">
+            <div>
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title">Confirmation </h3>
                     <i class="icon-cross text-right close-modal" aria-hidden="true"
                         (click)="onCancelBulkActionConfirmation()"></i>
                 </div>
-                <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
-                    <form name="newRole" novalidate class="" autocomplete="off">
-                        <div class="modal_wrap mr-b2">
+                <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
+                    <form name="newRole" novalidate autocomplete="off">
+                        <div class="modal-wrap mr-b2">
                             <h3>Do you want to delete the selected entrie(s)? </h3>
-                            <p class="text-gray font-14 mt-05">All their corresponding vouchers and invoices will be
+                            <p class="text-gray font-14 mr-t05">All their corresponding vouchers and invoices will be
                                 deleted permanently and will no longer be accessible from other modules.</p>
                         </div>
                         <div class="pull-right">
-                            <button type="submit" class="btn btn-md btn-success mrR1"
+                            <button type="submit" class="btn btn-md btn-success mr-r1"
                                 (click)="onConfirmationBulkActionConfirmation()">Yes
                             </button>
                             <button type="submit" class="btn btn-md btn-primary"
@@ -1614,14 +1501,14 @@ <h3>Do you want to delete the selected entrie(s)? </h3>
     <div class="modal-dialog modal-md">
         <div class="modal-content">
             <div>
-                <div class="modal-header themeBg pdL2 pdR2 clearfix">
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title">Confirmation</h3>
                     <i class="icon-cross text-right close-modal" aria-hidden="true"
                         (click)="onCancelSelectInvoiceModal()"></i>
                 </div>
-                <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+                <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
                     <form name="newRole" novalidate class="" autocomplete="off">
-                        <div class="modal_wrap mr-b2 text-center">
+                        <div class="modal-wrap mr-b2 text-center">
                             <h2>Select voucher generate option</h2>
                         </div>
                         <div class="row mr-t2 ledger-btn">
@@ -1671,3 +1558,12 @@ <h2>Select voucher generate option</h2>
         </div>
     </div>
 </ng-template>
+
+<!-- share ladger popup -->
+<div bsModal #importStatementModal="bs-modal" class="modal fade" role="dialog" tabindex="-1" (onHidden)="isImportStatementVisible = false">
+    <div class="modal-dialog modal-md">
+        <div class="modal-content">
+            <import-statement *ngIf="isImportStatementVisible" [accountUniqueName]="lc.accountUnq" (closeModal)="hideUploadBankStatementModal()"></import-statement>
+        </div>
+    </div>
+</div>
diff --git a/apps/web-giddh/src/app/ledger/ledger.component.scss b/apps/web-giddh/src/app/ledger/ledger.component.scss
index b0d1989bce1..9e5fa953fac 100644
--- a/apps/web-giddh/src/app/ledger/ledger.component.scss
+++ b/apps/web-giddh/src/app/ledger/ledger.component.scss
@@ -1,5 +1,62 @@
 @import "../../assets/css/color.scss";
+.wrap-transaction-map{
+    border:1px solid $gainsboro;
+    border-bottom: none !important;
+    .ledger-book{
+        box-shadow: none;
+        .left-col-new{
+            border-right: 1px solid $gainsboro;
+        }
+        .checkbox-span{
+            height: 49px;
+            min-height: 49px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .ledger-row{
+            &:hover{
+                background-color: transparent;
+            }
+        }
+    }
+}
+#ledger-transaction-left-list , #ledger-transaction-right-list {
+    td{
+        padding: 0 !important;
+        &:first-child{
+            border-bottom: none !important;
+        }
+        .d-flex.align-item-center{
+            align-items: stretch !important;
+        }
+        input, sh-select, .form-control{
+            min-height: 49px;
+            height: 49px;
+            border:0 !important;
+
+        }
+        input[type="checkbox"]{
+            min-height: 20px;
+            height: 20px;
+        }
 
+    }
+}
+ #ledger-transaction-left-list td,
+ #ledger-transaction-right-list td {
+    border-bottom: 1px solid $gainsboro;
+}
+#ledger-transaction-right-list tr, #ledger-transaction-left-list tr{
+        border-bottom: 1px solid $gainsboro;
+}
+#ledger-transaction-right-list tr td:last-child, #ledger-transaction-left-list tr td:last-child{
+    border-right: none !important;
+}
+.transaction-mapped-table thead th{
+    padding: 10px 15px !important;
+    border-bottom: 1px solid $gainsboro !important;
+}
 .form-control,
 input {
     color: $nero;
@@ -23,7 +80,7 @@ input {
  table.ledger-footer-1 td[class*="col-"]{
     justify-content: flex-end;
 }
-.ledg-head table td.pdR25imp {
+.ledg-head table td.pr-25 {
     padding-right: 25px !important;
 }
 
@@ -43,7 +100,7 @@ input {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.ledg-head.entry-popup table td.pdR25imp {
+.ledg-head.entry-popup table td.pr-25 {
     padding-right: 25px !important;
 }
 .transaction-mapped-table{
@@ -70,10 +127,10 @@ input {
             }
         }
     }
-    .row{
-        margin-left: 0;
-        margin-right: 0 ;
-    }
+    // .row{
+    //     margin-left: 0;
+    //     margin-right: 0 ;
+    // }
     .ledger-head{
         th{
             padding-left: 15px;
@@ -92,7 +149,7 @@ input {
 .ledger-main .form-control {
     border: 0;
 }
-.t-h-bg1 th {
+.thead-background1 th {
     border-left: 0;
 }
 .ledg-head input[type="search"] {
@@ -111,8 +168,8 @@ input {
     }
 }
 .ledger-head-top i.icon-search.pos-abs {
-    background-color: #5b64c9;
-    color: #fff;
+    background-color: $chetwode-blue;
+    color: $white;
     width: 32px;
     height: 36px;
     top: 0px !important;
@@ -125,29 +182,40 @@ input {
 }
 .ledger-stat {
     padding: 10px 15px 0;
-    background: #fff;
-    color: #808080;
+    background: $white;
+    color: $gray;
     font-size: 18px;
     margin: 0px 0 0;
-    box-shadow: 0px 2px 6px #0000001a;
+    box-shadow: 0px 2px 6px $black-russian;
 }
 .ledger-stat .row {
     display: flex;
     flex-wrap: wrap;
 }
-.icomoon_ico {
+.icomoon-ico {
     margin-left: 0;
     margin-right: 8px;
 }
 .account_Name {
     color: rgba(0, 0, 0, 0.8);
-    font-family: "" opensans-semibold "";
+    font-family: " opensans-semibold ";
     text-transform: capitalize;
 }
+
 .ledger-footer-1 {
     position: absolute;
     bottom: 0;
+    width:50%;
+}
+
+.left-align{
+    left: 0;
 }
+
+.right-align{
+    right: 0;
+}
+
 .ledger-head th {
     color: $jacksons-purple;
     padding-top: 5px;
@@ -176,7 +244,7 @@ input {
     width: 100% !important;
     left: 0% !important;
     bottom: 100px;
-    background: #fff;
+    background: $white;
     padding: 5px;
     font-size: 12px;
     z-index: 0;
@@ -187,37 +255,32 @@ input {
     width: 100%;
     text-align: center;
 }
-.pagination > .active > a {
-    background: #d35f29 !important;
-    color: #fff !important;
-    border-color: #bd501d !important;
-}
 .pagination > li > a:hover {
-    color: #d35f29;
+    color: $midnight-blue;
 }
 .ledger-panel label {
     font-weight: 400;
 }
-.upload_div {
+.upload-div {
     float: left;
     text-decoration: underline;
     margin: 0px 5px;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
 }
-.upload_div label {
+.upload-div label {
     padding: 6px;
 }
-.pdR25imp {
+.pr-25 {
     padding-right: 25px !important;
 }
-.t-h-bg1 th {
-    background: #fff;
-    color: #000000;
+.thead-background1 th {
+    background: $white;
+    color: $black;
     border-right: 1px solid $gainsboro;
     padding: 15px 11px !important;
     font-weight: 400;
     border-bottom: 1px solid $gainsboro;
-    font-family: opensans-semibold;
+    font-family: 'opensans-semibold';
     font-size: 14px;
     border-top: 1px solid $gainsboro;
 }
@@ -233,7 +296,7 @@ input {
     float: left;
     width: 100%;
     margin-bottom: 16px;
-    background: #fff;
+    background: $white;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
 }
 .Width600 {
@@ -241,7 +304,7 @@ input {
     width: 600px;
 }
 
-.daterange_picker_ledger {
+.daterange-picker-ledger {
     border: 0;
     background-color: transparent !important;
     text-decoration-line: none;
@@ -285,12 +348,17 @@ input {
 .d-none {
     display: none;
 }
-.dateStep {
+
+.date-step {
     padding: 0 !important;
     font-size: 13px;
     height: 48px;
     line-height: 1;
+    &.focus-unset{
+        padding-left: 7px !important;
+    }
 }
+
 input[type="date"]::-webkit-inner-spin-button,
 input[type="date"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -299,42 +367,42 @@ input[type="date"]::-webkit-outer-spin-button {
     display: none;
 }
 
-.focusUnset.ledger-main .form-control:focus {
+.focus-unset.ledger-main .form-control:focus {
     border: unset !important;
 }
 tr[vr-item]:focus {
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     outline: 0;
 }
 sh-select:focus {
-    outline: 1px #d35f29 solid;
+    outline: 1px $cinnabar-orange solid;
 }
 .notfound-option.active {
-    background: #efeff1 !important;
+    background: $lavender-light !important;
     padding: 2px 5px !important;
 }
-.amnt-total {
+.amount-total {
     font-size: 12px;
-    color: #999999;
+    color: $nobel;
     padding-left: 5px;
 }
 .ledger-book .left-col-new,
 .ledger-book .right-col-new {
-    background: #fff;
+    background: $white;
     padding: 0 15px 350px;
 }
-.left-col-new table.width100.h-table tbody tr td:last-child,
-.left-col-new table.width100.h-table thead tr th:last-child {
+.left-col-new table.width-100.h-table tbody tr td:last-child,
+.left-col-new table.width-100.h-table thead tr th:last-child {
     border-right: 0px !important;
 }
-.left-col-new table.width100.h-table tbody tr td:first-child,
-.left-col-new table.width100.h-table thead tr th:first-child {
+.left-col-new table.width-100.h-table tbody tr td:first-child,
+.left-col-new table.width-100.h-table thead tr th:first-child {
     border-left: 1px solid $gainsboro !important;
 }
 .custom-tabs {
     display: none;
 }
-.ledg-head .icomoon_ico {
+.ledg-head .icomoon-ico {
     color: $gray;
     width: 36px;
     height: 36px;
@@ -343,16 +411,16 @@ sh-select:focus {
     display: flex;
     justify-content: center;
     border-top-width: 1px;
-    background-color: #fff;
+    background-color: $white;
     border-radius: 50%;
 }
-.advanc-search-block input {
+.advance-search-block input {
     background: $solitude !important;
     height: 28px;
     border-color: $solitude !important;
 }
-.advanc-search-block input::placeholder {
-    color: #666666;
+.advance-search-block input::placeholder {
+    color: $dark-gray;
 }
 
 .left-col-new,
@@ -363,14 +431,14 @@ sh-select:focus {
 .ledger-section {
     display: flex;
 }
-.advanc-search-block .icon-search {
+.advance-search-block .icon-search {
     right: 0;
     top: 0;
     background-color: $chetwode-blue;
     padding: 6px 9px;
-    color: #fff;
+    color: $white;
 }
-.left-col-new table.width100.h-table#blank-ledger-container .no-left-border{
+.left-col-new table.width-100.h-table#blank-ledger-container .no-left-border{
     border-left: none !important;
 }
 .ledger-row input[type="checkbox"] {
@@ -379,17 +447,17 @@ sh-select:focus {
 .ledger-book .ledger-footer-1 .total-col .border-top {
     border-top: 1px solid $gainsboro !important;
 }
-.ledger-book .ledger-footer-1 .total-col .bdrT {
+.ledger-book .ledger-footer-1 .total-col .bd-rt {
     border: none;
 }
 
-.advanceSearchByDate {
+.advance-search-by-date {
     display: inline-flex;
     border: 1px solid $gainsboro;
     border-radius: 20px;
     position: relative;
 }
-.advanceSearchByDate:before {
+.advance-search-by-date:before {
     position: absolute;
     content: "";
     height: 1px;
@@ -398,7 +466,7 @@ sh-select:focus {
     left: -33%;
     top: 17px;
 }
-.advanceSearchByDate:after {
+.advance-search-by-date:after {
     position: absolute;
     content: "";
     height: 1px;
@@ -419,8 +487,8 @@ sh-select:focus {
 .digit-blue {
     color: $midnight-blue;
 }
-.greyTextClr {
-    color: #666 !important;
+.grey-text-color {
+    color: $dark-gray !important;
     font-size: 14px;
 }
 
@@ -457,7 +525,7 @@ sh-select:focus {
     }
 }
 
-.ledg-head .advanc-search-block {
+.ledg-head .advance-search-block {
     height: 34px;
     vertical-align: middle;
     display: flex;
@@ -542,6 +610,17 @@ sh-select:focus {
         width: 203px !important;
     }
 }
+
+.download-invoice-ledger {
+    padding-left: 6px;
+}
+.icon-download-circle{
+    font-size:15px;
+    top: 0 !important;
+    margin-top: 1px !important;
+}
+
+
 /*mobile ledger view css*/
 .mobile-ledger-view {
     margin: 0 -15px;
@@ -549,20 +628,20 @@ sh-select:focus {
         width: 100%;
         tbody {
             background-color: $white;
-            .transction-date {
+            .transaction-date {
                 font-size: 16px;
                 font-family: "opensans-semibold";
             }
             td {
                 padding-top: 8px;
                 padding-bottom: 8px;
-                border-bottom: 1px solid #d1d1d1;
+                border-bottom: 1px solid $gainsboro;
                 font-size: 14px;
             }
             .second-row {
                 td {
                     &:first-child {
-                        border-right: 1px solid #d9d9d9;
+                        border-right: 1px solid $gainsboro;
                         width: 60%;
                     }
                     span.account-holder-checkbox {
@@ -634,7 +713,7 @@ sh-select:focus {
         }
     }
     .transaction-table-row table td {
-        border-bottom: 1px solid #d9d9d9;
+        border-bottom: 1px solid $gainsboro;
     }
     .transaction-table-row table:last-child td {
         border-bottom: none;
@@ -656,12 +735,17 @@ sh-select:focus {
     padding-right: 0 !important;
 }
 .ledger-row{
-    .ellp{
+    .text-ellipsis{
         min-width: 160px;
         max-width: 400px;
         width: 100%;
     }
 }
+
+.list-item{
+    border-bottom: 1px solid $gainsboro;
+}
+
 /*responsive*/
 .modal-ledger {
     width: 70%;
@@ -752,14 +836,14 @@ sh-select:focus {
         margin-top: 10px;
         margin-bottom: 0;
     }
-    .daterngoption {
+    .date-range-option {
         margin-bottom: 10px;
         text-align: left !important;
         z-index: 1;
         margin-left: 0;
     }
-    .advanceSearchByDate:before,
-    .advanceSearchByDate:after {
+    .advance-search-by-date:before,
+    .advance-search-by-date:after {
         display: none;
     }
     .ledger-head-top {
@@ -772,7 +856,7 @@ sh-select:focus {
         }
     }
 
-    .advanc-search-block {
+    .advance-search-block {
         padding: 0;
     }
     .ledg-head input[type="search"] {
@@ -789,14 +873,14 @@ sh-select:focus {
     }
     .ledg-head table td[class*="col-"],
     .ledg-head table td .select2-container {
-        border-bottom: 0px solid #ccc;
-        border-right: 0px solid #ccc;
+        border-bottom: 0px solid $gainsboro;
+        border-right: 0px solid $gainsboro;
     }
     .ledger-state-box {
         margin-bottom: 0;
     }
     .amount-total {
-        background: #efefef;
+        background: $whisper-light;
     }
     .page-count {
         width: 100%;
@@ -833,7 +917,7 @@ sh-select:focus {
         display: block;
     }
     .right-col-new .ledger-head {
-        background: #f7f8fa;
+        background: $alice-blue-light
     }
     .ledger-row td:empty {
         display: none !important;
@@ -855,8 +939,8 @@ sh-select:focus {
         font-size: 12px !important;
         padding: 6px;
     }
-    .left-col-new table.width100.h-table tbody tr td:first-child,
-    .left-col-new table.width100.h-table thead tr th:first-child {
+    .left-col-new table.width-100.h-table tbody tr td:first-child,
+    .left-col-new table.width-100.h-table thead tr th:first-child {
         border-left: 0px solid $gainsboro !important;
     }
     .ledg-head.some.transactions-page {
@@ -869,9 +953,6 @@ sh-select:focus {
     .justify-content-between {
         justify-content: inherit;
     }
-    .download-invoice-ledger {
-        padding-left: 6px;
-    }
     .custom-tabs {
         display: block;
     }
@@ -919,8 +1000,8 @@ sh-select:focus {
         .ledger-datepicker {
             width: 36px;
             height: 36px;
-            background-color: #fff;
-            border: 1px solid #d9d9d9;
+            background-color: $white;
+            border: 1px solid $gainsboro;
             text-align: center;
             align-items: center;
             justify-content: center;
@@ -1071,7 +1152,7 @@ sh-select:focus {
     .search-ledger-field {
         min-width: 200px;
     }
-    .icomoon_ico {
+    .icomoon-ico {
         margin-top: 7px;
     }
     .ledg-head {
@@ -1094,3 +1175,18 @@ sh-select:focus {
         }
     }
 }
+.icon-upload-icon {
+    font-size: 16px;
+}
+.account-placeholder {
+    color: $nobel;
+    padding-left: 12px;
+    font-size: 14px;
+    min-height: 49px;
+    display: flex;
+    padding-top: 14px;
+    border-bottom: 1px solid $white;
+}
+.account-placeholder-text {
+    color: $black !important;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/ledger/ledger.component.ts b/apps/web-giddh/src/app/ledger/ledger.component.ts
index 1b055340984..630b9c45c92 100644
--- a/apps/web-giddh/src/app/ledger/ledger.component.ts
+++ b/apps/web-giddh/src/app/ledger/ledger.component.ts
@@ -3,7 +3,7 @@ import { ChangeDetectorRef, Component, ComponentFactoryResolver, ElementRef, Eve
 import { ActivatedRoute } from '@angular/router';
 import { select, Store } from '@ngrx/store';
 import { LoginActions } from 'apps/web-giddh/src/app/actions/login.action';
-import { Configuration, SearchResultText, GIDDH_DATE_RANGE_PICKER_RANGES, RATE_FIELD_PRECISION } from 'apps/web-giddh/src/app/app.constant';
+import { Configuration, SearchResultText, GIDDH_DATE_RANGE_PICKER_RANGES, RATE_FIELD_PRECISION, PAGINATION_LIMIT } from 'apps/web-giddh/src/app/app.constant';
 import { ShareLedgerComponent } from 'apps/web-giddh/src/app/ledger/components/shareLedger/shareLedger.component';
 import { GIDDH_DATE_FORMAT, GIDDH_NEW_DATE_FORMAT_UI, GIDDH_DATE_FORMAT_MM_DD_YYYY } from 'apps/web-giddh/src/app/shared/helpers/defaultDateFormat';
 import { ShSelectComponent } from 'apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component';
@@ -53,6 +53,7 @@ import { download } from "@giddh-workspaces/utils";
 import { SearchService } from '../services/search.service';
 import { SettingsBranchActions } from '../actions/settings/branch/settings.branch.action';
 import { OrganizationType } from '../models/user-login-state';
+import { UploadBankStatementComponent } from './components/upload-bank-statement/upload-bank-statement.component';
 
 @Component({
     selector: 'ledger',
@@ -99,6 +100,8 @@ export class LedgerComponent implements OnInit, OnDestroy {
     @ViewChild('bulkActionConfirmationModal', {static: true}) public bulkActionConfirmationModal: ModalDirective;
     @ViewChild('bulkActionGenerateVoucherModal', {static: true}) public bulkActionGenerateVoucherModal: ModalDirective;
     @ViewChild('ledgerSearchTerms', {static: true}) public ledgerSearchTerms: ElementRef;
+    /** upload bank statement modal instance */
+    @ViewChild('importStatementModal', {static: true}) public importStatementModal: ModalDirective;
     /** datepicker element reference  */
     @ViewChild('datepickerTemplate', {static: true}) public datepickerTemplate: ElementRef;
     public showUpdateLedgerForm: boolean = false;
@@ -240,6 +243,15 @@ export class LedgerComponent implements OnInit, OnDestroy {
     public currentOrganizationType: OrganizationType;
     /** This is used to show hide bottom spacing when more detail is opened while CREATE/UPDATE ledger */
     public isMoreDetailsOpened: boolean = false;
+    /** This will hold if import statement modal is visible */
+    public isImportStatementVisible: boolean = false;
+    /** This will hold bank transactions api response */
+    public bankTransactionsResponse: any = {totalItems: 0, totalPages: 0, page: 1, countPerPage: 500};
+    /** Set to true the first time advance search modal is opened, done
+     * to prevent the API call only when the advance search filter is opened
+     * by user and not when the user visits the page
+     */
+    public isAdvanceSearchOpened: boolean = false;
 
     constructor(
         private store: Store<AppState>,
@@ -919,6 +931,7 @@ export class LedgerComponent implements OnInit, OnDestroy {
                     this.getCurrencyRate();
                 } else {
                     this.baseCurrencyDetails = this.foreignCurrencyDetails;
+                    this.lc.blankLedger = { ...this.lc.blankLedger, exchangeRate: 1, exchangeRateForDisplay: 1 };
                 }
                 this.selectedCurrency = 0;
                 this.assignPrefixAndSuffixForCurrency();
@@ -1042,21 +1055,29 @@ export class LedgerComponent implements OnInit, OnDestroy {
         this.getTransactionData();
     }
 
-    public getBankTransactions() {
-        // && this.advanceSearchRequest.from
+    /**
+     * This will get the bank transactions of the account
+     *
+     * @memberof LedgerComponent
+     */
+    public getBankTransactions(): void {
         if (this.trxRequest.accountUniqueName) {
             this.isBankTransactionLoading = true;
-            this._ledgerService.GetBankTranscationsForLedger(this.trxRequest.accountUniqueName, this.trxRequest.from).subscribe((res: BaseResponse<IELedgerResponse[], string>) => {
+
+            let getRequest = {accountUniqueName: this.trxRequest.accountUniqueName, from: this.trxRequest.from, count: this.bankTransactionsResponse.countPerPage, page: this.bankTransactionsResponse.page}
+            this._ledgerService.GetBankTranscationsForLedger(getRequest).subscribe(res => {
                 this.isBankTransactionLoading = false;
                 if (res.status === 'success') {
-                    this.lc.getReadyBankTransactionsForUI(res.body,
-                        (this.generalService.currentOrganizationType === OrganizationType.Company && (this.currentCompanyBranches && this.currentCompanyBranches.length > 2)));
+                    if(res.body) {
+                        this.bankTransactionsResponse.totalItems = res.body.totalItems;
+                        this.bankTransactionsResponse.totalPages = res.body.totalPages;
+                        this.bankTransactionsResponse.page = res.body.page;
+
+                        this.lc.getReadyBankTransactionsForUI(res.body.transactionsList, (this.generalService.currentOrganizationType === OrganizationType.Company && (this.currentCompanyBranches && this.currentCompanyBranches.length > 2)));
+                    }
                 }
             });
         }
-        // else {
-        //   this._toaster.warningToast('Something went wrong please reload page');
-        // }
     }
 
     public selectBankTxn(txn: TransactionVM) {
@@ -2340,4 +2361,52 @@ export class LedgerComponent implements OnInit, OnDestroy {
         item.otherTaxModal = event.otherTaxModal;
         item.otherTaxType = event.otherTaxType;
     }
+
+    /**
+     * This will show the bank statement upload modal
+     *
+     * @memberof LedgerComponent
+     */
+    public showUploadBankStatementModal(): void {
+        if(this.importStatementModal) {
+            this.isImportStatementVisible = true;
+            this.importStatementModal.show();
+        }
+    }
+
+    /**
+     * This will hide the bank statement upload modal
+     *
+     * @memberof LedgerComponent
+     */
+    public hideUploadBankStatementModal(): void {
+        if(this.importStatementModal) {
+            this.importStatementModal.hide();
+        }
+    }
+
+    /**
+     * Callback for date change
+     *
+     * @param {*} item
+     * @memberof LedgerComponent
+     */
+    public onChangeEntryDate(item: any): void {
+        if (item && item.entryDate) {
+            if (typeof item.entryDate !== 'string') {
+                item.entryDate = moment(item.entryDate).format(GIDDH_DATE_FORMAT);
+            }
+        }
+    }
+
+    /**
+     * This will change bank transactions pagination page number
+     *
+     * @param {*} event
+     * @memberof LedgerComponent
+     */
+    public bankTransactionPageChanged(event: any): void {
+        this.bankTransactionsResponse.page = event.page;
+        this.getBankTransactions();
+    }
 }
diff --git a/apps/web-giddh/src/app/ledger/ledger.module.ts b/apps/web-giddh/src/app/ledger/ledger.module.ts
index 034f77152cb..afd615cd990 100644
--- a/apps/web-giddh/src/app/ledger/ledger.module.ts
+++ b/apps/web-giddh/src/app/ledger/ledger.module.ts
@@ -49,6 +49,8 @@ import { UpdateLedgerDiscountComponent } from './components/updateLedgerDiscount
 import { UpdateLedgerEntryPanelComponent } from './components/updateLedgerEntryPanel/updateLedgerEntryPanel.component';
 import { LedgerComponent } from './ledger.component';
 import { LedgerRoutingModule } from './ledger.routing.module';
+import { ImportStatementComponent } from './components/import-statement/import-statement.component';
+
 
 // import { ElementViewContainerRef } from '../shared/helpers/pipes/element.viewchild.directive';
 @NgModule({
@@ -66,7 +68,8 @@ import { LedgerRoutingModule } from './ledger.routing.module';
         LedgerAsidePaneComponent,
         LedgerAsidePaneAccountComponent,
         BaseAccountComponent,
-        LedgerColumnarReportTableComponent
+        LedgerColumnarReportTableComponent,
+        ImportStatementComponent
     ],
     exports: [
         LedgerComponent, UpdateLedgerEntryPanelComponent
diff --git a/apps/web-giddh/src/app/ledger/ledger.vm.ts b/apps/web-giddh/src/app/ledger/ledger.vm.ts
index 886cfa3bd58..59d310f4850 100644
--- a/apps/web-giddh/src/app/ledger/ledger.vm.ts
+++ b/apps/web-giddh/src/app/ledger/ledger.vm.ts
@@ -236,11 +236,19 @@ export class LedgerVM {
         }
 
         if (data) {
-            data.balanceText.cr = data.balanceText.cr.replace('<accountName>', accountName);
-            data.balanceText.dr = data.balanceText.dr.replace('<accountName>', accountName);
+            if(data.balanceText && data.balanceText.cr) {
+                data.balanceText.cr = data.balanceText.cr.replace('<accountName>', accountName);
+            }
+            if(data.balanceText && data.balanceText.dr) {
+                data.balanceText.dr = data.balanceText.dr.replace('<accountName>', accountName);
+            }
 
-            data.text.dr = data.text.dr.replace('<accountName>', accountName);
-            data.text.cr = data.text.cr.replace('<accountName>', accountName);
+            if(data.text && data.text.dr) {
+                data.text.dr = data.text.dr.replace('<accountName>', accountName);
+            }
+            if(data.text && data.text.cr) {
+                data.text.cr = data.text.cr.replace('<accountName>', accountName);
+            }
             this.ledgerUnderStandingObj = _.cloneDeep(data);
         }
     }
@@ -414,6 +422,7 @@ export class TransactionVM {
     public advanceReceiptAmount?: number = 0;
     public invoiceLinkingRequest?: IInvoiceLinkingRequest;
     public voucherAdjustments?: VoucherAdjustments;
+    public showDropdown?: boolean = false;
 }
 
 export interface IInventory {
diff --git a/apps/web-giddh/src/app/login/login.component.html b/apps/web-giddh/src/app/login/login.component.html
index 93bfe01aa7d..4e7a6a8309f 100644
--- a/apps/web-giddh/src/app/login/login.component.html
+++ b/apps/web-giddh/src/app/login/login.component.html
@@ -19,7 +19,7 @@
                             <div class="accounting-space bg-white">
                                 <section id="full-view">
                                     <h4 class="mb-4">Login to your secure accounting space</h4>
-                                    <form class="pos-rel mt-2 mb-3" id="login-with-pwd"
+                                    <form class="position-relative mt-2 mb-3" id="login-with-pwd"
                                         [formGroup]="loginWithPasswdForm"
                                         (ngSubmit)="loginWithPasswd(loginWithPasswdForm)"
                                         *ngIf="loginUsing === 'userName'"
@@ -34,7 +34,7 @@ <h4 class="mb-4">Login to your secure accounting space</h4>
                                                 Login
                                             </button>
                                         </div>
-                                        <a href="javascript:void(0)" class="pull-right btn-link fs14 forget-pw"
+                                        <a href="javascript:void(0)" class="pull-right btn-link font-14 forget-pw"
                                             (click)="showForgotPasswordModal()">Forgot
                                             password?</a>
                                     </form>
@@ -164,10 +164,10 @@ <h1 class="brand-heading arvo">Enter your accounting space</h1>
 </section> -->
 
 <!--email varify modal  -->
-<div class="modal fade" tabindex="-1" bsModal #emailVerifyModal="bs-modal" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
+<div class="modal fade" tabindex="-1" bsModal #emailVerifyModal="bs-modal" role="dialog" aria-hidden="true" [config]="modalConfig">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
 
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
@@ -210,10 +210,10 @@ <h3>Sign Up with Giddh</h3>
 <!--email varify modal  -->
 
 <!--mobile varify form  -->
-<div class="modal fade" tabindex="-1" bsModal #mobileVerifyModal="bs-modal" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
+<div class="modal fade" tabindex="-1" bsModal #mobileVerifyModal="bs-modal" role="dialog" aria-hidden="true" [config]="modalConfig">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" (click)="hideMobileModal()">×</span>
@@ -254,10 +254,10 @@ <h3>Sign Up with Giddh</h3>
 <!--mobile verify form  -->
 
 <!-- two way auth popup -->
-<div class="modal fade" tabindex="-1" bsModal #twoWayAuthModal="bs-modal" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}" (onHidden)="onHiddenAuthModal($event)">
+<div class="modal fade" tabindex="-1" bsModal #twoWayAuthModal="bs-modal" role="dialog" aria-hidden="true" [config]="modalConfig" (onHidden)="onHiddenAuthModal($event)">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal"
@@ -288,7 +288,7 @@ <h3>Sign Up with Giddh</h3>
 <!-- <div class="modal fade" tabindex="-1" bsModal #forgotPasswordModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
                 <div class="modal-header">
                     <h3>Forgot Password</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" (click)="hideForgotPasswordModal()">×</span>
diff --git a/apps/web-giddh/src/app/login/login.component.scss b/apps/web-giddh/src/app/login/login.component.scss
index adc5c4928dd..fecbeb11f55 100644
--- a/apps/web-giddh/src/app/login/login.component.scss
+++ b/apps/web-giddh/src/app/login/login.component.scss
@@ -194,7 +194,7 @@ button.close {
 } */
 
 .email {
-    background: #10aae0;
+    background: $deep-sky-blue-hover;
 }
 
 /************* end login page *************/
@@ -322,7 +322,7 @@ small {
     position: absolute;
     width: 40px;
     left: 0;
-    background: #fff8eb;
+    background: $floral-white;
     line-height: 38px;
     vertical-align: middle;
 }
diff --git a/apps/web-giddh/src/app/login/login.component.spec.ts b/apps/web-giddh/src/app/login/login.component.spec.ts
index bc88f318236..8a166ed0698 100644
--- a/apps/web-giddh/src/app/login/login.component.spec.ts
+++ b/apps/web-giddh/src/app/login/login.component.spec.ts
@@ -361,7 +361,7 @@ describe('Login Component', () => {
 
             it('should display login heading text in h1', waitForAsync(() => {
                 expect(
-                    fixture.debugElement.query(By.css('h1.mrB3')).nativeElement.innerText
+                    fixture.debugElement.query(By.css('h1.mr-b3')).nativeElement.innerText
                 ).toContain('Login to your secure accounting space');
             }));
 
@@ -515,7 +515,7 @@ describe('Login Component', () => {
                 component.showForgotPasswordModal();
 
                 expect(
-                    fixture.debugElement.query(By.css('h1.mrB3')).nativeElement.innerText
+                    fixture.debugElement.query(By.css('h1.mr-b3')).nativeElement.innerText
                 ).toContain('Login to your secure accounting space');
             }));
 
diff --git a/apps/web-giddh/src/app/login/login.component.ts b/apps/web-giddh/src/app/login/login.component.ts
index ff03a68a66f..63c8341215a 100644
--- a/apps/web-giddh/src/app/login/login.component.ts
+++ b/apps/web-giddh/src/app/login/login.component.ts
@@ -90,6 +90,10 @@ export class LoginComponent implements OnInit, OnDestroy {
 
     //Button to hide linkedIn button till functionality is available
     public showLinkedInButton = false;
+    /** Modal config */
+    public modalConfig: {
+        backdrop: 'static'
+    };
 
     // tslint:disable-next-line:no-empty
     constructor(private _fb: FormBuilder,
diff --git a/apps/web-giddh/src/app/magic-link/magic-link.component.css b/apps/web-giddh/src/app/magic-link/magic-link.component.css
index e2d09554097..6aae93f8c40 100644
--- a/apps/web-giddh/src/app/magic-link/magic-link.component.css
+++ b/apps/web-giddh/src/app/magic-link/magic-link.component.css
@@ -19,7 +19,7 @@
     font-weight: regular;
 }
 
-.account_name {
+.account-name {
     font-weight: 300;
     font-size: 14px;
 }
@@ -37,15 +37,15 @@
     color: #000;
 }
 
-.bg-f9 {
+.light-gray-bg {
     background: #f9f9f9;
 }
 
-.bg-gr {
+.gray-bg {
     background: #ccc;
 }
 
-.bg-wh {
+.white-bg {
     background: #fff;
 }
 
@@ -57,7 +57,7 @@
     width: 50%;
 }
 
-.bg-bl {
+.blue-bg {
     background: #27273b;
 }
 
@@ -78,8 +78,8 @@ table th[class*="col-"] {
     padding: 8px;
 }
 
-.compoundEntry td,
-.compoundEntry td .form-control {
+.compound-entry td,
+.compound-entry td .form-control {
     background: #fddfa4 !important;
     border-left: 1px solid #ccc;
 }
@@ -104,7 +104,7 @@ table th[class*="col-"] {
     border: 0;
 }
 
-.pd350 {
+.pt-350 {
     padding-bottom: 350px;
 }
 
@@ -141,8 +141,8 @@ table th[class*="col-"] {
 
 /*footer style start*/
 
-#contact p.mrT3,
-.mrT3 {
+#contact p.mr-t3,
+.mr-t3 {
     margin-top: 30px;
 }
 
@@ -156,7 +156,7 @@ table th[class*="col-"] {
     /* font-family: 'Arvo', serif; */
 }
 
-.headerline {
+.header-line {
     font-size: 30px;
     /* font-family: 'Arvo', serif; */
     color: white;
@@ -364,7 +364,7 @@ h4 {
         line-height: 28px;
     }
 
-    :host ::ng-deep .headerline {
+    :host ::ng-deep .header-line {
         font-size: 18px;
     }
 
@@ -453,7 +453,7 @@ h4 {
         font-size: 16 !important;
     }
 
-    .headerline {
+    .header-line {
         font-size: 22px !important;
     }
 }
diff --git a/apps/web-giddh/src/app/manufacturing/edit/mf.edit.component.html b/apps/web-giddh/src/app/manufacturing/edit/mf.edit.component.html
index 1aeb1d15db8..be9055833cc 100644
--- a/apps/web-giddh/src/app/manufacturing/edit/mf.edit.component.html
+++ b/apps/web-giddh/src/app/manufacturing/edit/mf.edit.component.html
@@ -4,10 +4,10 @@
       {{ manufacturingDetails | json }}
   </div>-->
 <hamburger-menu *ngIf="!isInventoryPage" [pageHeading]="'Manufacture of Product'"></hamburger-menu>
-<!-- <label *ngIf="isUpdateCase" class="mrL2">No.
+<!-- <label *ngIf="isUpdateCase" class="mr-l2">No.
                 {{manufacturingDetails.voucherNumber}}</label>
 -->
-<div class="col-sm-12 mt-15 clearfix">
+<div class="col-sm-12 mr-t15 clearfix">
     <button class="btn btn-default pull-right" (click)="goBackToListPage()" type="button">Back</button>
 </div>
     <!-- form -->
@@ -24,7 +24,7 @@
                         </div>
                     </div>
                     <div class="col-xs-3 col-sm-3">
-                        <div class="form-group pos-rel">
+                        <div class="form-group position-relative">
                             <label class="d-block">Quantity</label>
                             <input type="text" class="form-control" [disabled]="!manufacturingDetails.stockUniqueName" decimalDigitsDirective [DecimalPlaces]="4" (keyup)="onQuantityChange(manufacturingDetails.manufacturingMultipleOf)" (blur)="onQuantityChange(manufacturingDetails.manufacturingMultipleOf)"
                                 [(ngModel)]="manufacturingDetails.manufacturingMultipleOf" name="manufacturingMultipleOf" />
@@ -34,14 +34,14 @@
                         </div>
                     </div>
                     <div class="col-xs-3 col-sm-3">
-                        <div class="form-group mrR1">
+                        <div class="form-group mr-r1">
                             <label class="d-block">Date</label>
                             <div class="col-xs-8" style="padding: 0">
                                 <input type="text" name="invoiceDateRange" bsDatepicker required class="form-control" style="width: 100%" [(ngModel)]="manufacturingDetails.date" [bsValue]="bsValue" [bsConfig]="{dateInputFormat: giddhDateFormat}" />
                             </div>
                         </div>
 
-                        <!-- <div class="form-group mrR1" [attachOutsideOnClick]="true" (clickOutside)="showFromDatePicker=false;">
+                        <!-- <div class="form-group mr-r1" [attachOutsideOnClick]="true" (clickOutside)="showFromDatePicker=false;">
                             <label class="d-block">Date</label>
                             <div class="input-group">
                                 <input type="text" name="from" [ngModel]="moment(manufacturingDetails.date).format(giddhDateFormat)" (focus)="showFromDatePicker = true;" class="form-control" required />
@@ -57,9 +57,9 @@
                                     <li>
                                         <datepicker name="fromDate" (click)="$event.stopPropagation()" [(ngModel)]="manufacturingDetails.date" (selectionDone)="showFromDatePicker=!showFromDatePicker" [showWeeks]="false"></datepicker>
                                     </li>
-                                    <li class="pd-1 clearfix pdT pdB">
+                                    <li class="pd-1 clearfix pd-t05 pd-b05">
                                         <span class="btn-group pull-left">
-                                            <button type="button" class="btn btn-xs btn-primary mrR"
+                                            <button type="button" class="btn btn-xs btn-primary mr-r05"
                                                 (click)="setToday();showFromDatePicker = false;">Today</button>
                                             <button type="button" class="btn btn-xs btn-success"
                                                 (click)="showFromDatePicker = false">Done</button>
@@ -88,7 +88,7 @@
                 <div class="col-md-12 col-lg-6 source resources-table">
                     <h1 class="section-head">Source(Consumption)</h1>
                     <section class="linkstock">
-                        <table class="col-xs-12 col-sm-12 linkStockTbl" *ngIf="manufacturingDetails">
+                        <table class="col-xs-12 col-sm-12 link-stock-table" *ngIf="manufacturingDetails">
                             <thead>
                                 <tr>
                                     <th colspan="2">Product Name</th>
@@ -119,7 +119,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                                 <tr *ngIf="toggleAddLinkedStocks" class="new-row">
                                     <td colspan="2">
                                         <span class="hr"></span>
-                                        <sh-select [forceClearReactive]="needForceClearProductList$ | async" placeholder="--Select--" [options]="allStocksDropDown$ | async" name="linkedStocks.stockUniqueName" [(ngModel)]="linkedStocks.stockUniqueName" required #linkedStockList="ngModel" (selected)="getStockUnit(linkedStocks.stockUniqueName, linkedStocks.quantity)"
+                                        <sh-select [forceClearReactive]="needForceClearProductList$ | async" placeholder="--Select--" [options]="allStocksDropDown$ | async" name="linkedStocks.stockUniqueName" [(ngModel)]="linkedStocks.stockUniqueName" required [isRequired]="true" #linkedStockList="ngModel" (selected)="getStockUnit(linkedStocks.stockUniqueName, linkedStocks.quantity)"
                                             [ItemHeight]="33"></sh-select>
                                     </td>
                                     <td>
@@ -131,7 +131,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                                     <td> {{ getCalculatedAmount(linkedStockQuantity, linkedStockRate) | number:'1.0-2' }}
                                     </td>
                                     <td class="action">
-                                        <button [disabled]="linkedStockQuantity.invalid || linkedStockRate.invalid || linkedStockList.invalid" (click)="addConsumption(linkedStocks, $event)" class="ico-btn pd0"><i
+                                        <button [disabled]="linkedStockQuantity.invalid || linkedStockRate.invalid || linkedStockList.invalid" (click)="addConsumption(linkedStocks, $event)" class="ico-btn p-0"><i
                                                 class="icon-plus text-danger" aria-hidden="true"></i></button>
                                     </td>
                                 </tr>
@@ -142,7 +142,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                                     </td>
                                 </tr>
                             </tbody>
-                            <tfoot class="bdrT pdT2 pdB2 bdrB">
+                            <tfoot class="bd-rt pd-t2 pd-b2 bd-rb">
                                 <tr>
                                     <th colspan="2">Total:</th>
                                     <th class="text-right"> {{ getTotal('linkedStocks', 'quantity') | number:'1.0-4' }}
@@ -161,7 +161,7 @@ <h1 class="section-head">Source(Consumption)</h1>
 
                 <!-- left column / total cost table -->
                 <div class="col-md-12 col-lg-5">
-                    <div class="form_title">
+                    <div class="form-title">
                         <p>Total Cost</p>
                     </div>
                     <form class="form-theme clearfix" name="expenseForm">
@@ -169,7 +169,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                             <p class="col-xs-9 col-sm-9">Total Consumption Cost:</p>
                             <p class="col-xs-3 col-sm-3 text-right">{{ getTotal('linkedStocks', 'amount') | number:'1.0-2' }}</p>
                         </div>
-                        <table class="width100">
+                        <table class="width-100">
                             <thead class="tcaption">
                                 <tr>
                                     <td class="cp btn-link" (click)="onToggleAddExpensesBlock(toggleAddExpenses);" tooltip="Add A/C where expense entries will be done." placement="top" colspan="5"><i class="icon-plus" aria-hidden="true"></i> Add Expense
@@ -179,7 +179,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                             <tbody *ngIf="manufacturingDetails && liabilityGroupAccounts$ | async">
                                 <tr *ngFor="let expense of manufacturingDetails.otherExpenses; let i = index;">
                                     <td colspan="1">
-                                        <div class="custom-select pos-rel">
+                                        <div class="custom-select position-relative">
                                             <sh-select [options]="liabilityGroupAccounts$ | async" [ItemHeight]="56" [isFilterEnabled]="true" name="baseAccount{{i}}" [(ngModel)]="expense.baseAccount.uniqueName" class="pull-left  select-caret" style="width: 100%">
                                             </sh-select>
                                         </div>
@@ -188,7 +188,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                                         <label class="pd">to</label>
                                     </td>
                                     <td>
-                                        <div class="custom-select pos-rel">
+                                        <div class="custom-select position-relative">
                                             <sh-select [options]="expenseGroupAccounts$ | async" [ItemHeight]="56" [isFilterEnabled]="true" name="expense{{i}}" [(ngModel)]="expense.transactions[0].account.uniqueName" class="pull-left  select-caret" style="width: 100%">
                                             </sh-select>
                                         </div>
@@ -208,7 +208,7 @@ <h1 class="section-head">Source(Consumption)</h1>
                                         <label class="pd">to</label>
                                     </td>
                                     <td>
-                                        <div class="pos-rel">
+                                        <div class="position-relative">
                                             <sh-select [forceClearReactive]="needForceClearGroup$ | async" (selected)="addExpense(otherExpenses)" [options]="expenseGroupAccounts$ | async" [(ngModel)]="otherExpenses.baseAccountUniqueName" name="baseAccountUniqueName" [placeholder]="'Expense A/c'"
                                                 [ItemHeight]="56"></sh-select>
                                         </div>
@@ -219,13 +219,13 @@ <h1 class="section-head">Source(Consumption)</h1>
                                                 #transactionAmount></div>
                                     </td>
                                     <td>
-                                        <button [disabled]="transactionAmount.invalid" (click)="addExpense(otherExpenses)" style="margin-top: 12px;" class="ico-btn pd0"><i class="icon-plus text-danger"
+                                        <button [disabled]="transactionAmount.invalid" (click)="addExpense(otherExpenses)" style="margin-top: 12px;" class="ico-btn p-0"><i class="icon-plus text-danger"
                                                 aria-hidden="true"></i></button>
                                     </td>
                                 </tr>
                             </tbody>
                         </table>
-                        <div class="bdrT clearfix pd-t1 mr-t1 mr-b1 row">
+                        <div class="bd-rt clearfix pd-t1 mr-t1 mr-b1 row">
                             <span class="col-xs-7 col-sm-7"><strong>Total Manufacturing Expense:</strong></span>
                             <span class="col-xs-5 col-sm-5 text-right"><strong>{{ getTotal('otherExpenses', 'amount') | number:'1.0-2' }}</strong></span>
                         </div>
diff --git a/apps/web-giddh/src/app/manufacturing/edit/modal/confirmation.model.component.html b/apps/web-giddh/src/app/manufacturing/edit/modal/confirmation.model.component.html
index 79f4b0217c7..5307a588fcd 100644
--- a/apps/web-giddh/src/app/manufacturing/edit/modal/confirmation.model.component.html
+++ b/apps/web-giddh/src/app/manufacturing/edit/modal/confirmation.model.component.html
@@ -1,14 +1,14 @@
-<div id="" class="">
-    <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+<div>
+    <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
         <h3 class="modal-title bg" id="modal-title">Confirmation </h3>
         <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
     </div>
-    <div class="modal-body pdT5 pdB5 pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-t5 pd-b5 pd-l2 pd-r2 clearfix" id="export-body">
         <form name="newRole" novalidate class="" autocomplete="off">
-            <div class="modal_wrap mr-b2">
+            <div class="modal-wrap mr-b2">
                 <h3>Are you sure you want to delete this manufacturing entry?</h3>
-                <div class="pull-right mrT5">
-                    <button type="submit" class="btn btn-md btn-success mrR1" (click)="onConfirmation()">Yes</button>
+                <div class="pull-right mr-t5">
+                    <button type="submit" class="btn btn-md btn-success mr-r1" (click)="onConfirmation()">Yes</button>
                     <button type="submit" class="btn btn-md btn-primary" (click)="onCancel()">No</button>
                 </div>
             </div>
diff --git a/apps/web-giddh/src/app/manufacturing/report/mf.report.component.html b/apps/web-giddh/src/app/manufacturing/report/mf.report.component.html
index f60c2bc706a..30c3888674d 100644
--- a/apps/web-giddh/src/app/manufacturing/report/mf.report.component.html
+++ b/apps/web-giddh/src/app/manufacturing/report/mf.report.component.html
@@ -2,7 +2,7 @@
     <!-- page Title -->
     <hamburger-menu *ngIf="!isInventoryPage" [pageHeading]="'Mfg. Journal Register'"></hamburger-menu>
     <div class="clearfix">
-        <div class="mt-15 justify-content-between pr-3" [ngClass]="{'d-flex' : currentCompanyBranches?.length > 2}">
+        <div class="mr-t15 justify-content-between pr-3" [ngClass]="{'d-flex' : currentCompanyBranches?.length > 2}">
             <div *ngIf="currentCompanyBranches?.length > 2" class="form-group col-lg-2 col-md-6 linked-entities">
                 <label class="d-block pb-1">Entity</label>
                 <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" class="branch-dropdown"
@@ -37,8 +37,8 @@
     </div>
     <!-- form -->
     <div class="col-12 col-sm-12">
-        <div class="mfStockSearchRequestForm clearfix">
-            <form #mfStockSearchRequestForm="ngForm" class="mt-0 col-12 pl-0 pr-0 mt-15 mb-05 manufacturing-form" (submit)="getReports()"
+        <div class="mf-stock-search-request-form clearfix">
+            <form #mfStockSearchRequestForm="ngForm" class="mt-0 col-12 pl-0 pr-0 mr-t15 mr-b05 manufacturing-form" (submit)="getReports()"
                 autocomplete="off">
                 <div class="row">
                     <div class="form-group col-xl-2 col-lg-2 col-md-6">
@@ -82,8 +82,8 @@
         </div>
     </div>
     <!-- search form end -->
-    <section *ngIf="(isReportLoading$ | async)" class="clearfix mart100 col-xs-12">
-        <p class="lead alC mr-t4">Loading...</p>
+    <section *ngIf="(isReportLoading$ | async)" class="clearfix mt-100 col-md-12">
+        <p class="lead text-center mr-t4">Loading...</p>
     </section>
     <div class="no-data mt-100 col-12 col-sm-12"
         *ngIf="!(isReportLoading$ | async) && reportData && reportData.results.length === 0">
@@ -123,8 +123,8 @@ <h1>Do search with some other dates</h1>
                         </tr>
                     </tbody>
                 </table>
-                <div *ngIf="reportData?.totalPages > 1" class="paginationWrapper">
-                    <div class="alC">
+                <div *ngIf="reportData?.totalPages > 1" class="pagination-wrapper">
+                    <div class="text-center">
                         <pagination [totalItems]="reportData.totalItems" [(ngModel)]="reportData.page" [maxSize]="5"
                             class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="20" [rotate]="false"
                             (pageChanged)="pageChanged($event)"></pagination>
diff --git a/apps/web-giddh/src/app/manufacturing/report/mf.report.component.scss b/apps/web-giddh/src/app/manufacturing/report/mf.report.component.scss
index 7506d47efcc..93c2731243a 100644
--- a/apps/web-giddh/src/app/manufacturing/report/mf.report.component.scss
+++ b/apps/web-giddh/src/app/manufacturing/report/mf.report.component.scss
@@ -1,4 +1,4 @@
-.mfStockSearchRequestForm .col-xs-1 {
+.mf-stock-search-request-form .col-xs-1 {
     width: 11.33333333%;
 }
 
diff --git a/apps/web-giddh/src/app/mobile-home/mobile-home-sidebar/mobile-home-sidebar.component.html b/apps/web-giddh/src/app/mobile-home/mobile-home-sidebar/mobile-home-sidebar.component.html
index 3780fac6217..db660252c05 100644
--- a/apps/web-giddh/src/app/mobile-home/mobile-home-sidebar/mobile-home-sidebar.component.html
+++ b/apps/web-giddh/src/app/mobile-home/mobile-home-sidebar/mobile-home-sidebar.component.html
@@ -41,7 +41,7 @@
                 <a href="javascript:;" hidden>API</a>
             </li>
 
-            <hr class="mt-1 mb-1 mr-15 ml-15">
+            <hr class="mt-1 mr-b1 mr-r15 mr-l15">
             <li (click)="logout()">
                 <a href="javascript:;">Logout</a>
             </li>
diff --git a/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.html b/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.html
index 1fd84b14e3f..64f1f87d2b1 100644
--- a/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.html
+++ b/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.html
@@ -1,5 +1,5 @@
-<div class="search-copmany-page">
-    <div class="search-compnay-field">
+<div class="search-company-page">
+    <div class="search-company-field">
         <div class="input-group">
             <span class="input-group-addon">
                 <i class="icon-search2"></i>
@@ -16,7 +16,7 @@
     <!--
         Hide for now, will use it on next version
         <div class="mt-2">
-        <button href="javascript:void(0)" class="btn-link pd0 btn bold pl-0">+ Create  Company</button>
+        <button href="javascript:void(0)" class="btn-link p-0 btn bold pl-0">+ Create  Company</button>
     </div> -->
     <div class="all-company-list">
         <ul>
diff --git a/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.scss b/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.scss
index 1e9d5c2eaf4..0e3500fd591 100644
--- a/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.scss
+++ b/apps/web-giddh/src/app/mobile-home/mobile-search-company/mobile-search-company.component.scss
@@ -1,8 +1,8 @@
 @import '.././../../assets/css/color.scss';
-.search-copmany-page{
+.search-company-page{
     background-color: $alice-blue-light;
     padding: 15px;
-    .search-compnay-field{
+    .search-company-field{
         .input-group{
             background-color: $white;
             border-radius: 50px;
diff --git a/apps/web-giddh/src/app/models/api-models/Daybook.ts b/apps/web-giddh/src/app/models/api-models/Daybook.ts
index 1c4897001e1..711a31b1190 100644
--- a/apps/web-giddh/src/app/models/api-models/Daybook.ts
+++ b/apps/web-giddh/src/app/models/api-models/Daybook.ts
@@ -1,4 +1,6 @@
 export interface DayBookResponseModel {
+    file?: any;
+    type?: string;
     entries: Entry[];
     page: number;
     count: number;
diff --git a/apps/web-giddh/src/app/models/api-models/DaybookRequest.ts b/apps/web-giddh/src/app/models/api-models/DaybookRequest.ts
index 6e4d3bfe779..d1f7c81bf52 100644
--- a/apps/web-giddh/src/app/models/api-models/DaybookRequest.ts
+++ b/apps/web-giddh/src/app/models/api-models/DaybookRequest.ts
@@ -1,7 +1,9 @@
+import { PAGINATION_LIMIT } from '../../app.constant';
+
 export class DaybookQueryRequest {
 	public q: string = '';
 	public page: number = 0;
-	public count: number = 20;
+	public count: number = PAGINATION_LIMIT;
 	public from: string = '';
 	public to: string = '';
 	public format: 'pdf' | 'xlsx' = 'pdf';
diff --git a/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.html b/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.html
index c9c078bc8d6..e11d6479dff 100644
--- a/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.html
+++ b/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.html
@@ -5,32 +5,32 @@
 
             <form #carried="ngForm" (ngSubmit)="go(carried)">
                 <div class="pull-left d-flex align-start select-fields">
-                    <div class="form-group mrR1 max500 d-initial">
+                    <div class="form-group mr-r1 max-width-500 d-initial">
                         <label>Select Year</label>
                         <sh-select placeholder="Search Year..." [multiple]='false' name="selectedYear" [(ngModel)]="selectedYear" #SelectYear="ngModel" [options]="yearOptions" required>
                         </sh-select>
                     </div>
-                    <div class="form-group mrR1 max500 d-initial">
+                    <div class="form-group mr-r1 max-width-500 d-initial">
                         <label>Select Type</label>
                         <sh-select placeholder="Search Type..." [multiple]='false' name="selectedType" [(ngModel)]="selectedType" #SelectType="ngModel" [options]="GetTypeOptions" required (selected)="ChangingValue($event)"></sh-select>
-                        <div class="h-25px"  *ngIf="SelectType.invalid">
+                        <div class="height-25px"  *ngIf="SelectType.invalid">
                             <div class="text-danger">please select type</div>
                         </div>
                     </div>
 
-                    <div class="form-group mrR1 max500  d-initial flex-column" *ngIf="selectedType==='month'">
+                    <div class="form-group mr-r1 max-width-500  d-initial flex-column" *ngIf="selectedType==='month'">
                         <label>Select Month</label>
                         <sh-select placeholder="Search Month..." [multiple]='false' name="selectedmonth" [(ngModel)]="selectedmonth" #SelectMonth="ngModel" [options]="monthOptions" required [customSorting]="customMonthSorting"></sh-select>
-                        <div class="h-25px" *ngIf="SelectMonth.invalid">
+                        <div class="height-25px" *ngIf="SelectMonth.invalid">
                             <div class="text-danger">please select month</div>
                         </div>
                     </div>
 
-                    <div class="form-group mrR1 max500  d-initial flex-column" *ngIf="selectedType==='quater'">
+                    <div class="form-group mr-r1 max-width-500  d-initial flex-column" *ngIf="selectedType==='quater'">
                         <label>Select Quarter</label>
                         <sh-select placeholder="Search Quarter..." [multiple]='false' name="selectedQuater" [(ngModel)]="selectedQuater" #SelectQuater="ngModel" [options]="quaterOptions" required>
                         </sh-select>
-                        <div class="h-25px" *ngIf="SelectQuater.invalid">
+                        <div class="height-25px" *ngIf="SelectQuater.invalid">
                             <div class="text-danger">please select quarter</div>
                         </div>
                     </div>
@@ -49,7 +49,7 @@
         </div>
     </div>
 
-    <div style="display: flex;" *ngIf="selectedType==='month'">
+    <div class="d-flex" *ngIf="selectedType==='month'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -57,7 +57,7 @@
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{columnName }} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.totalSales.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.totalSales.total | giddhCurrency}}</div>
@@ -65,19 +65,19 @@
             </div>
         </div>
     </div>
-    <div style="display: flex;" *ngIf="selectedType==='month'">
-        <div class="div-table" style="background-color: #E5E5E5;">
+    <div class="d-flex" *ngIf="selectedType==='month'">
+        <div class="div-table bg-gray-color">
             <div>
                 <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
-            <div class="div-row" style="margin: 30px 0">
-                <div class="div-cell" style="font-size: 16px;font-weight: bold">From new Clients</div>
+            <div class="div-row mr-t3 mr-b3">
+                <div class="div-cell font-16 strong">From new Clients</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.total | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.invoiceCount | giddhCurrency}}</div>
             </div>
-            <div class="div-row" style="margin: 30px 0">
-                <div class="div-cell" style="font-size: 16px;font-weight: bold">From old Clients</div>
+            <div class="div-row mr-t3 mr-b3">
+                <div class="div-cell font-16 strong">From old Clients</div>
                 <div class="div-cell align-end">{{clientTotal | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{crdTotal | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{invTotal | giddhCurrency}}</div>
@@ -114,7 +114,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
         </div>
     </div>
-    <div style="display: flex;margin-top: 30px " *ngIf="selectedType==='month'">
+    <div class="d-flex mr-t3" *ngIf="selectedType==='month'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -122,7 +122,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.month}} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.total | giddhCurrency}}</div>
@@ -130,7 +130,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
         </div>
     </div>
-    <div style="display: flex;margin-top: 30px" *ngIf="selectedType==='month'">
+    <div class="d-flex mr-t3" *ngIf="selectedType==='month'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -138,7 +138,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.month}} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.total | giddhCurrency}}</div>
@@ -147,7 +147,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
         </div>
     </div>
 
-    <div style="display: flex;" *ngIf="selectedType==='quater'">
+    <div class="d-flex" *ngIf="selectedType==='quater'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -155,7 +155,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{columnName }} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{clientAllTotal | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{totalAmount | giddhCurrency}}</div>
@@ -163,19 +163,19 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
         </div>
     </div>
-    <div style="display: flex;" *ngIf="selectedType==='quater'">
-        <div class="div-table" style="background-color: #E5E5E5;">
+    <div class="d-flex" *ngIf="selectedType==='quater'">
+        <div class="div-table bg-gray-color">
             <div>
                 <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
-            <div class="div-row" style="margin: 30px 0">
-                <div class="div-cell" style="font-size: 16px;font-weight: bold">From new Clients</div>
+            <div class="div-row mr-t3 mr-b3">
+                <div class="div-cell font-16 strong">From new Clients</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.total | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.newSales.invoiceCount | giddhCurrency}}</div>
             </div>
-            <div class="div-row" style="margin: 30px 0">
-                <div class="div-cell" style="font-size: 16px;font-weight: bold">From old Clients</div>
+            <div class="div-row mr-t3 mr-b3">
+                <div class="div-cell font-16 strong">From old Clients</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.totalSales.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.totalSales.total | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.totalSales.invoiceCount | giddhCurrency}}</div>
@@ -200,7 +200,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
         </div>
     </div>
-    <div style="display: flex; margin-top: 30px" *ngIf="selectedType==='quater'">
+    <div class="d-flex mr-t3" *ngIf="selectedType==='quater'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -208,7 +208,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.month}} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[0]?.total | giddhCurrency}}</div>
@@ -216,7 +216,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
             </div>
         </div>
     </div>
-    <div style="display: flex;margin-top: 30px" *ngIf="selectedType==='quater'">
+    <div class="d-flex mr-t3" *ngIf="selectedType==='quater'">
         <div class="div-table">
             <div class="head-row">
                 <div class="div-cell">Sales from</div>
@@ -224,7 +224,7 @@ <h3 class="h3-heading">Bifurcation of clients in {{columnName}} </h3>
                 <div class="div-cell align-end">Amount</div>
                 <div class="div-cell align-end">No.of Invoices</div>
             </div>
-            <div class="div-row" style="font-weight: bold">
+            <div class="div-row">
                 <div class="div-cell">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.month}} {{selectedYear}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.uniqueCount | giddhCurrency}}</div>
                 <div class="div-cell align-end">{{(NewVsOldInvoicesData$ | async)?.carriedSales[1]?.total | giddhCurrency}}</div>
diff --git a/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.scss b/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.scss
index c105c355ccc..d6f26ae9674 100644
--- a/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.scss
+++ b/apps/web-giddh/src/app/new-vs-old-Invoices/new-vs-old-Invoices.component.scss
@@ -1,5 +1,5 @@
 @import "../../assets/css/color.scss";
-.h-25px {
+.height-25px {
     height: 25px;
 }
 
@@ -59,6 +59,15 @@
         }
     }
 }
+
+.bg-gray-color{
+    background-color: $whisper;
+}
+
+.strong{
+    font-weight: bold;
+}
+
 @media(max-width:991px){
     .div-table {
         display: block;
diff --git a/apps/web-giddh/src/app/onboarding/onboarding.component.html b/apps/web-giddh/src/app/onboarding/onboarding.component.html
index e7ffc7b1224..de0523352df 100644
--- a/apps/web-giddh/src/app/onboarding/onboarding.component.html
+++ b/apps/web-giddh/src/app/onboarding/onboarding.component.html
@@ -3,28 +3,28 @@
     <div class="">
         <div class="row mt-2 mr-0 ml-0">
             <div class="col-xs-12 col-md-5 col-sm-6">
-                <h1 class="borderbtm">Try things out</h1>
-                <ul class="manage_invoice">
+                <h1 class="border-btm">Try things out</h1>
+                <ul class="manage-invoice">
                     <li>
                         <!-- <i class="icon-Create-Invoice"></i>proforma-invoice/invoice/sales -->
-                        <a [routerLink]="['/pages','proforma-invoice','invoice','sales']"> <img src="{{imgPath}}create-invoice.svg" alt="" class="mrR1"> Create and send an Invoice</a>
+                        <a [routerLink]="['/pages','proforma-invoice','invoice','sales']"> <img src="{{imgPath}}create-invoice.svg" alt="" class="mr-r1"> Create and send an Invoice</a>
                     </li>
                     <li>
                         <!-- <i class="icon-Add-customer"></i> -->
-                        <a [routerLink]="['/pages','contact', 'customer']"> <img src="{{imgPath}}add-customer.svg" alt="" class="mrR1"> Add a customer
+                        <a [routerLink]="['/pages','contact', 'customer']"> <img src="{{imgPath}}add-customer.svg" alt="" class="mr-r1"> Add a customer
                         </a>
                     </li>
                     <li>
                         <!-- <i class="icon-Invite-Accountant"></i> -->
-                        <a [routerLink]="['/pages','settings', 'taxes']"> <img src="{{imgPath}}updateGST.svg" alt="" class="mrR1"> Update Taxes </a>
+                        <a [routerLink]="['/pages','settings', 'taxes']"> <img src="{{imgPath}}updateGST.svg" alt="" class="mr-r1"> Update Taxes </a>
                     </li>
                     <li>
 
-                        <a href="javascript:void 0" (click)="selectConfigureBank()"> <img src="{{imgPath}}configure-bank-account.svg" alt="" class="mrR1"> Configure your bank account
+                        <a href="javascript:void 0" (click)="selectConfigureBank()"> <img src="{{imgPath}}configure-bank-account.svg" alt="" class="mr-r1"> Configure your bank account
                         </a>
                     </li>
                 </ul>
-                <h1 class="borderbtm m-t-50">Have data on Tally?</h1>
+                <h1 class="border-btm m-t-50">Have data on Tally?</h1>
                 <p>
                     Don't worry!<br> Easily get your accounting data on Giddh
                 </p>
@@ -36,8 +36,8 @@ <h1 class="borderbtm m-t-50">Have data on Tally?</h1>
                 Download TCP
                 </a>
 
-                <div class="mt-2 right_section">
-                    <h1 class="borderbtm">Have a question to ask?</h1>
+                <div class="mt-2 right-section">
+                    <h1 class="border-btm">Have a question to ask?</h1>
                     <span>Request a demo:</span>
                     <button class="btn btn-success m-t-10" (click)="scheduleNow()">Schedule Now</button>
                     <br>
@@ -59,19 +59,19 @@ <h1 class="borderbtm">Have a question to ask?</h1>
 
             </div>
             <div class="col-xs-12 col-md-5 col-sm-6 ">
-                <div class="right_section">
-                    <h1 class="borderbtm">Select Inventory Type</h1>
+                <div class="right-section">
+                    <h1 class="border-btm">Select Inventory Type</h1>
                     <span>Inventory type</span>
                     <div class="pd-b1 clearfix">
 
-                        <span class="pd0 mrR3 d-inline-block">
-                            <input id="product" class="radio-custom cp ml0" type="radio" [checked]="CompanySettingsObj?.companyInventorySettings?.manageInventory"
+                        <span class="p-0 mr-r3 d-inline-block">
+                            <input id="product" class="radio-custom cp ml-0" type="radio" [checked]="CompanySettingsObj?.companyInventorySettings?.manageInventory"
                             (change)="updateInventorySetting(true)" name="inventoryType">
                             <label for="product" class="radio-custom-label">Product</label>
                         </span>
 
-                        <span class="pd0 mrR3 d-inline-block">
-                            <input id="service" class="radio-custom cp ml0" type="radio" [checked]="!CompanySettingsObj?.companyInventorySettings?.manageInventory"
+                        <span class="p-0 mr-r3 d-inline-block">
+                            <input id="service" class="radio-custom cp ml-0" type="radio" [checked]="!CompanySettingsObj?.companyInventorySettings?.manageInventory"
                             (change)="updateInventorySetting(false)" name="inventoryType">
                             <label for="service" class="radio-custom-label">Service</label>
                         </span>
@@ -79,11 +79,11 @@ <h1 class="borderbtm">Select Inventory Type</h1>
                     </div>
                     <br><br><br>
 
-                    <div class="importData">
-                        <h1 class="borderbtm">Import Data</h1>
+                    <div class="import-data">
+                        <h1 class="border-btm">Import Data</h1>
                         <span>Have data in CSV or Excel files?</span>
 
-                        <div class="importData-blocks">
+                        <div class="import-data-blocks">
                             <div class="d-inline-flex">
                                 <a [routerLink]="['/pages','import','account']"> <img src="assets/images/new/acc-import.svg">
                                     <p>Accounts</p>
diff --git a/apps/web-giddh/src/app/onboarding/onboarding.component.css b/apps/web-giddh/src/app/onboarding/onboarding.component.scss
similarity index 84%
rename from apps/web-giddh/src/app/onboarding/onboarding.component.css
rename to apps/web-giddh/src/app/onboarding/onboarding.component.scss
index 8fc5e179e36..2e0fb802efb 100644
--- a/apps/web-giddh/src/app/onboarding/onboarding.component.css
+++ b/apps/web-giddh/src/app/onboarding/onboarding.component.scss
@@ -1,4 +1,6 @@
-    .welcome-header {
+@import "../../assets/css/color.scss";
+
+.welcome-header {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -6,7 +8,7 @@
     }
 
     .welcome-container hr {
-        border: 0.5px solid #707070;
+        border: 0.5px solid $gray;
         background: transparent;
         width: 98%;
         margin: auto;
@@ -16,15 +18,15 @@
         margin-top: 35px;
     }
 
-    .borderbtm {
+    .border-btm {
         font-size: 16px;
         font-family: "" opensans-semibold "";
-        border-bottom: 1px solid #cccccc;
+        border-bottom: 1px solid $gainsboro;
         padding: 7px 0;
         margin-bottom: 10px;
     }
 
-    .manage_invoice {
+    .manage-invoice {
         list-style: none;
     }
 
@@ -45,24 +47,24 @@
         padding-top: 0;
     }
 
-    .manage_invoice li a {
-        background: #fff;
+    .manage-invoice li a {
+        background: $white;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
         padding: 9px 15px;
-        color: #10aae0;
+        color: $deep-sky-blue-hover;
         font-size: 16px;
         margin-top: 15px;
         display: block;
         max-width: 356px;
     }
 
-    .manage_invoice li a i {
+    .manage-invoice li a i {
         margin-right: 20px;
         font-size: 23px;
-        color: #535353;
+        color: $davy-grey;
     }
 
-    .manage_invoice li a:hover {
+    .manage-invoice li a:hover {
         text-decoration: none;
     }
 
@@ -71,32 +73,32 @@
     }
 
     .btn-sync {
-        color: #125446;
+        color: $deep-green-cyan;
         margin-top: 12px;
-        background: #c9e6ca;
+        background: $granny-apple;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.16);
         font-size: 16px;
         font-family: "opensans-regular";
     }
 
     p {
-        color: #b1b1b3;
+        color: $pink-swan;
     }
 
-    .right_section span {
+    .right-section span {
         font-size: 14px;
-        color: #b2b2b4;
+        color: $silver;
         display: block;
     }
 
     .btn-default {
-        background: #e6e6e6;
-        color: #2fab4a;
+        background: $whisper;
+        color: $success-green;
         padding: 8px 16px;
     }
 
     .text-dark {
-        color: #707070;
+        color: $gray;
         font-size: 20px;
     }
 
@@ -107,24 +109,24 @@
     .your-account span {
         display: block;
         font-size: 16px;
-        color: #9b9b9b;
+        color: $nobel;
         margin-bottom: 10px;
     }
 
     .your-account p {
-        color: #2c2c2c;
+        color: $nero;
         font-size: 16px;
     }
 
     .your-account p.success-text {
-        color: #2fab4a !important;
+        color: $success-green !important;
     }
 
-    .importData-blocks .d-inline-flex {
+    .import-data-blocks .d-inline-flex {
         display: inline-flex;
         width: 130px;
         height: 100px;
-        background-color: #fff;
+        background-color: $white;
         margin-right: 11px;
         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
         text-align: center;
@@ -134,20 +136,20 @@
         flex-direction: column;
     }
 
-    .importData-blocks {
+    .import-data-blocks {
         padding-top: 30px;
         padding-bottom: 40px;
     }
 
-    .importData-blocks img {
+    .import-data-blocks img {
         width: 60px;
     }
 
-    .importData-blocks a p {
-        color: #0c8fe6;
+    .import-data-blocks a p {
+        color: $primary;
     }
 
-    .right_section {
+    .right-section {
         background: none !important;
     }
 
@@ -173,14 +175,14 @@
         padding: 0;
         border-bottom: none;
         padding: 15px;
-        border-bottom: 1px solid #e5e5e5;
-        background: #ececec;
+        border-bottom: 1px solid $gainsboro;
+        background: $whisper-light;
     }
 
     .custom-dialog .modal-header h3 {
         font-family: "CambriaBold";
         font-size: 20px;
-        color: #333333 !important;
+        color: $night-rider !important;
         margin-bottom: 15px;
     }
 
@@ -197,7 +199,7 @@
         position: absolute;
         top: 4px;
         right: 10px;
-        color: #222 !important;
+        color: $night-rider !important;
         cursor: pointer;
         font-weight: bold;
         text-decoration: none !important;
@@ -206,7 +208,7 @@
 
     #talk_sales {
         padding-bottom: 2px;
-        border-bottom: 1px solid #c3c3c3;
+        border-bottom: 1px solid $gainsboro;
         margin-bottom: 0;
     }
 
@@ -235,7 +237,7 @@
     }
 
     #talk_sales>li>a {
-        color: #333;
+        color: $night-rider;
         font-family: "CambriaBold";
         padding-left: 28px !important;
         line-height: 35px;
@@ -269,7 +271,7 @@
     }
 
     .tab-content-modal {
-        background: #fff;
+        background: $white;
         padding: 20px;
         margin-top: 0;
         margin-bottom: 0;
@@ -320,7 +322,7 @@
 
     #sFSection-V6Lc {
         font-family: Roboto;
-        background: #fefdfe;
+        background: $lavender;
     }
 
     .talktosale-superform .sFSection .sFformfield {
@@ -332,8 +334,8 @@
 
     .sFSection .sFformfield {
         padding: 40px;
-        background: #fafafa;
-        border: 1px solid #ccc;
+        background: $whisper-color;
+        border: 1px solid $gainsboro;
     }
 
     .sFSection .fieldset {
@@ -359,7 +361,7 @@
 
     .talktosale-superform .sFSection .sFformfield label {
         font-size: 15px !important;
-        color: #333 !important;
+        color: $night-rider !important;
         line-height: 26px !important;
     }
 
@@ -396,7 +398,7 @@
     #sFform-xZyf input,
     #sFform-xZyf textarea,
     #sFform-xZyf select {
-        border: 1px solid #525265 !important;
+        border: 1px solid $gainsboro !important;
         background: transparent !important;
         width: 230px !important;
     }
@@ -406,11 +408,11 @@
     }
 
     #sFformfield-xZyf label {
-        color: #73737f !important;
+        color: $gray !important;
     }
 
     #sFSection-Jkvq .sFsubmit.btn-primary {
-        background: #28ab00 !important;
+        background: $light-green !important;
         font-size: 14px;
     }
 
@@ -448,9 +450,8 @@
         top: 15px;
         right: 15px;
         background: none;
-        color: red;
         border: 0px;
-        color: #fff;
+        color: $white;
         cursor: pointer;
         font-size: 20px;
         z-index: 9999;
diff --git a/apps/web-giddh/src/app/onboarding/onboarding.component.ts b/apps/web-giddh/src/app/onboarding/onboarding.component.ts
index 64a8215df05..77be045fd8c 100644
--- a/apps/web-giddh/src/app/onboarding/onboarding.component.ts
+++ b/apps/web-giddh/src/app/onboarding/onboarding.component.ts
@@ -17,7 +17,7 @@ import { SUPPORT_TEAM_NUMBERS } from '../app.constant';
 @Component({
     selector: 'onboarding-component',
     templateUrl: './onboarding.component.html',
-    styleUrls: ['./onboarding.component.css']
+    styleUrls: ['./onboarding.component.scss']
 
 })
 
diff --git a/apps/web-giddh/src/app/permissions/components/confirmation/permission.model.component.html b/apps/web-giddh/src/app/permissions/components/confirmation/permission.model.component.html
index 1f2bfc189cd..13a6e4698a8 100644
--- a/apps/web-giddh/src/app/permissions/components/confirmation/permission.model.component.html
+++ b/apps/web-giddh/src/app/permissions/components/confirmation/permission.model.component.html
@@ -1,21 +1,21 @@
-<div id="" class="">
-	<div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+<div>
+	<div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
 		<h3 class="modal-title bg" id="modal-title">Add Role </h3>
 		<i class="icon-cross text-right close-modal" aria-hidden="true" (click)="closePopupEvent()"></i>
 	</div>
-	<div class="modal-body pdT5 pdB5 pdL2 pdR2 clearfix" id="export-body">
-		<form name="newRole" novalidate class="" autocomplete="off">
-			<div class="modal_wrap mr-b2">
+	<div class="modal-body pd-t5 pd-b5 pd-l2 pd-r2 clearfix" id="export-body">
+		<form name="newRole" novalidate autocomplete="off">
+			<div class="modal-wrap mr-b2">
 				<div class="form-group">
 					<label>New Role</label>
 					<input type="text" name="rolename" class="form-control" [(ngModel)]="newRole.name" />
 				</div>
 
-				<div class="col-xs-6 pdL0">
-					<div class="col-xs-12 pdL0 mr-b1">
+				<div class="col-xs-6 pl-0">
+					<div class="col-xs-12 pl-0 mr-b1">
 
-                        <span class="pd0 mrR3">
-                            <input id="copyPermission" class="radio-custom cp ml0" type="radio" [(ngModel)]="newRole.copyoption" name="copypermissionornot"
+                        <span class="p-0 mr-r3">
+                            <input id="copyPermission" class="radio-custom cp ml-0" type="radio" [(ngModel)]="newRole.copyoption" name="copypermissionornot"
 							[value]="'copy_permission'">
                             <label for="copyPermission" class="radio-custom-label">Copy Permission</label>
                         </span>
@@ -29,11 +29,11 @@ <h3 class="modal-title bg" id="modal-title">Add Role </h3>
 					</div>
 				</div>
 
-				<div class="col-xs-6 pdR0">
-					<div class="col-xs-12 pdR0 mr-b1">
+				<div class="col-xs-6 pr-0">
+					<div class="col-xs-12 pr-0 mr-b1">
 
-                        <span class="pd0 mrR3">
-                            <input id="selectHeads" class="radio-custom cp ml0" type="radio" [(ngModel)]="newRole.copyoption" name="copypermissionornot"
+                        <span class="p-0 mr-r3">
+                            <input id="selectHeads" class="radio-custom cp ml-0" type="radio" [(ngModel)]="newRole.copyoption" name="copypermissionornot"
 							[value]="'select_heads'">
                             <label for="selectHeads" class="radio-custom-label">Select Heads</label>
                         </span>
@@ -53,8 +53,8 @@ <h3 class="modal-title bg" id="modal-title">Add Role </h3>
 						</ul>
 					</div>
 				</div>
-				<div class="pull-right mrT5">
-					<button type="submit" class="btn btn-md btn-success mrR1"
+				<div class="pull-right mr-t5">
+					<button type="submit" class="btn btn-md btn-success mr-r1"
 						(click)="addNewRole(newRole)">Save</button>
 					<button type="submit" class="btn btn-md btn-cancel" (click)="hideRoleModel()">Cancel</button>
 				</div>
diff --git a/apps/web-giddh/src/app/permissions/components/details/permission.details.html b/apps/web-giddh/src/app/permissions/components/details/permission.details.html
index 5053bc0cf53..448e4ea80db 100644
--- a/apps/web-giddh/src/app/permissions/components/details/permission.details.html
+++ b/apps/web-giddh/src/app/permissions/components/details/permission.details.html
@@ -1,7 +1,7 @@
 <section id="single_role" *ngIf="roleObj">
 
 
-    <div class="pd3 pd-t1 pd-b1 bdrB clearfix text-center mb-15">
+    <div class="pd-1 bd-rb clearfix text-center mr-b15">
         <span class="lead">{{ newRole.name }}</span>
         <button class="btn btn-md btn-primary pull-left" (click)="goToRoles()">Back</button>
         <button *ngIf="!newRole.isUpdateCase" class="btn btn-md btn-success pull-right mr-0"
@@ -14,7 +14,7 @@
         <!--*ngIf="roleObj.isUpdateCase"-->
         <div class="row mr-b2">
             <div class="col-sm-12 form-inline">
-                <div class="form-group custom-select pos-rel mr-15">
+                <div class="form-group custom-select position-relative mr-r15">
                     <select class="form-control" [disabled]="newRole.isFixed" required [(ngModel)]="pageName"
                         name="pageName">
                         <option value="">--Select Pages--</option>
@@ -23,7 +23,7 @@
                             {{page}}
                         </option>
                     </select>
-                    <!--<span class="select_drop"><i class="fa fa-caret-down"></i></span>-->
+                    <!--<span class="select-drop"><i class="fa fa-caret-down"></i></span>-->
                 </div>
                 <div class="form-group">
                     <button class="btn btn-success" (click)="addNewPage(pageName)" [disabled]="!pageName">Add</button>
@@ -40,7 +40,7 @@
                         <a class="close pull-right" href="javascript:void(0);" (click)="removePageFromScope(page.name)"
                             *ngIf="!newRole.isFixed">×</a>
                     </div>
-                    <div class="panel-body pd0">
+                    <div class="panel-body p-0">
                         <table class="table basic">
                             <thead>
                                 <tr>
diff --git a/apps/web-giddh/src/app/permissions/components/details/permission.details.scss b/apps/web-giddh/src/app/permissions/components/details/permission.details.scss
index 9b423f75ca8..abfd320e272 100644
--- a/apps/web-giddh/src/app/permissions/components/details/permission.details.scss
+++ b/apps/web-giddh/src/app/permissions/components/details/permission.details.scss
@@ -4,6 +4,7 @@
 }
 .panel-heading{
     padding: 10px 0 !important;
+    background:transparent !important;
 }
 .panel-body .table td{
     border-bottom: 1px solid $gainsboro;
diff --git a/apps/web-giddh/src/app/permissions/components/list/permission-list.html b/apps/web-giddh/src/app/permissions/components/list/permission-list.html
index 3a369b61fd4..52e90298414 100644
--- a/apps/web-giddh/src/app/permissions/components/list/permission-list.html
+++ b/apps/web-giddh/src/app/permissions/components/list/permission-list.html
@@ -1,10 +1,10 @@
 <hamburger-menu [pageHeading]="'Permissions'"></hamburger-menu>
 <div class="container-fluid clearfix" *ngIf="allRoles.length > 0">
-    <a href="javascript:void(0)" *ngIf="showBackButton" class="btn btn-sky-blue pull-right mt-1" [routerLink]="['/pages/settings/permission']">Back</a>
-    <div class="col-sm-12 mt-15 pd0 role clearfix" *ngFor="let role of allRoles">
+    <a href="javascript:void(0)" *ngIf="showBackButton" class="btn btn-sky-blue pull-right mr-t1 mr-b1" [routerLink]="['/pages/settings/permission']">Back</a>
+    <div class="col-sm-12 mr-t15 p-0 role clearfix" *ngFor="let role of allRoles">
         <div class="row mr-0 ml-0">
-        <div class="col-md-3 col-sm-3 col-12 pd0 role-head cp">
-            <span class="vcenter">
+        <div class="col-md-3 col-sm-3 col-12 p-0 role-head cp">
+            <span class="vertical-center">
                 <h1>{{role.name}}</h1>
                 <div class="text-center mr-t2 onHover">
                     <button *ngIf="!role.isFixed" class="btn btn-sm btn-primary"
@@ -24,7 +24,7 @@ <h1>{{role.name}}</h1>
     </div>
     </div>
 
-    <div class="col-sm-12 mr-t2 mr-b2 role text-center clearfix pd4 new-box">
+    <div class="col-sm-12 mr-t2 mr-b2 role text-center clearfix pd-4 new-box">
         <h1 class="inline-block cursor-pointer" (click)="openPermissionModal()">+ Add New Role</h1>
     </div>
 
diff --git a/apps/web-giddh/src/app/permissions/components/list/permission.component.scss b/apps/web-giddh/src/app/permissions/components/list/permission.component.scss
index 55495f2b455..2eaa4c3ed7e 100644
--- a/apps/web-giddh/src/app/permissions/components/list/permission.component.scss
+++ b/apps/web-giddh/src/app/permissions/components/list/permission.component.scss
@@ -32,7 +32,7 @@
 }
 
 #single-role td {
-    border-bottom: 1px solid #c2cdd3;
+    border-bottom: 1px solid $gainsboro;
 }
 
 #single-role thead th {
@@ -43,20 +43,20 @@
 
 #single-role tbody tr td:first-child,
 #single-role thead th:first-child {
-    color: #858585;
+    color: $gray;
     text-align: left;
-    border-right: 1px solid #c2cdd3;
+    border-right: 1px solid $gainsboro;
 }
 
 #single-role tbody tr td:first-child input[type="checkbox"]:checked:after {
-    background: #d4602a;
-    border-color: #d4602a;
+    background: $cinnabar-orange;
+    border-color: $cinnabar-orange;
 }
 
 .headName {
     padding: 13px;
-    background: #d4602a;
-    color: #fff;
+    background: $cinnabar-orange;
+    color: $white;
     position: relative;
 }
 
@@ -66,7 +66,7 @@
 }
 
 #single-role tbody tr:first-child {
-    background: #ffffff;
+    background: $white;
 }
 
 #single-role thead th:first-child {
@@ -84,11 +84,11 @@
 
 .new_col {
     background: $white-smoke;
-    border: 1px solid #c2cdd3;
+    border: 1px solid $gainsboro;
 }
 
 .role-head {
-    background: #fff;
+    background: $white;
     min-height: 170px;
     display: flex;
     flex-direction: column;
@@ -112,7 +112,7 @@
 }
 
 .not-allowed {
-    color: #c7c9c9 !important;
+    color: $very-light-gray !important;
 }
 
 .new-box h1 {
@@ -133,8 +133,8 @@
 }
 
 #single-role input[type="checkbox"]:checked:after {
-    background: #d4602a;
-    border-color: #d4602a;
+    background: $cinnabar-orange;
+    border-color: $cinnabar-orange;
 }
 
 #headsList {
@@ -142,7 +142,7 @@
 }
 
 #single-role tbody tr td:nth-child(1n + 2) input[type="checkbox"]:before {
-    border-color: #000;
+    border-color: $black;
 }
 
 #single-role
@@ -175,7 +175,7 @@
     background: $white-smoke;
     border-color: $white-smoke;
 }
-.role-head .vcenter {
+.role-head .vertical-center {
     max-width: 100%;
     padding: 0 18px;
     display: flex;
diff --git a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.html b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.html
index b8922f801e3..df4d5fdd145 100644
--- a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.html
+++ b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.html
@@ -5,25 +5,25 @@ <h3>Add Role</h3>
     </div>
     <div class="modal-body clearfix" id="export-body">
         <form #newRoleForm="ngForm" (submit)="addNewRole()" autocomplete="off">
-            <div class="">
+            <div>
                 <div class="form-group">
                     <label>Role Name</label>
                     <input type="text" required name="name" class="form-control" [(ngModel)]="newRoleObj.name"
                         placeholder="Role Name" #name="ngModel" />
                 </div>
-                <div class="form-group custom-select pos-rel">
+                <div class="form-group custom-select position-relative">
                     <label>Role Type</label>
                     <select class="form-control" required [(ngModel)]="newRoleObj.isFresh" name="isFresh"
                         #isFresh="ngModel">
                         <option [ngValue]="true">Fresh Start</option>
                         <option [ngValue]="false">Copy From Other Role</option>
                     </select>
-                    <span class="select_drop"><i class="fa fa-caret-down"></i></span>
+                    <span class="select-drop"><i class="fa fa-caret-down"></i></span>
                 </div>
-                <div class="form-group" *ngIf="newRoleObj.isFresh">
+                <div class="form-group select-page position-relative" *ngIf="newRoleObj.isFresh">
                     <div class="btn-group btn-block" dropdown (onShown)="onDDShown()" (onHidden)="onDDHidden()">
                         <button dropdownToggle type="button" class="form-control text-left btn-block dropdown-toggle">
-                            {{ dropdownHeading}} <span class="select_drop pull-right mr-t1"><i
+                            {{ dropdownHeading}} <span class="select-drop pull-right mr-t1"><i
                                     class="fa fa-caret-down"></i></span>
                         </button>
                         <ul id="pageListDD" *dropdownMenu class="dropdown-menu pd-l1 pd-r1" role="menu">
@@ -44,13 +44,13 @@ <h3>Add Role</h3>
                         </ul>
                     </div>
                 </div>
-                <div class="form-group custom-select pos-rel" *ngIf="!newRoleObj.isFresh">
+                <div class="form-group custom-select position-relative" *ngIf="!newRoleObj.isFresh">
                     <label>Copy Permission</label>
                     <select class="form-control text-capitalize" name="somename" [(ngModel)]="newRoleObj.uniqueName">
                         <option [ngValue]="">Please Select</option>
                         <option *ngFor="let role of allRoles" [ngValue]="role.uniqueName"> {{ role.name }}</option>
                     </select>
-                    <span class="select_drop"><i class="fa fa-caret-down"></i></span>
+                    <span class="select-drop"><i class="fa fa-caret-down"></i></span>
                 </div>
                 <div class="clearfix text-right mr-t4">
                     <button type="submit" class="btn btn-sm btn-success" [disabled]="!isFormValid">Next</button>
diff --git a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.css b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.scss
similarity index 58%
rename from apps/web-giddh/src/app/permissions/components/model/permission.model.component.css
rename to apps/web-giddh/src/app/permissions/components/model/permission.model.component.scss
index ceff14b9651..775eff04808 100644
--- a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.css
+++ b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.scss
@@ -10,3 +10,14 @@
     display: block;
     cursor: pointer;
 }
+.custom-select {
+    .select-drop{
+        top: 40px;
+    }
+}
+.select-page{
+    .select-drop{
+        top: 0 !important;
+        margin-top: 0 !important;
+    }
+}
diff --git a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.ts b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.ts
index f89972f9b27..cc16e26920e 100644
--- a/apps/web-giddh/src/app/permissions/components/model/permission.model.component.ts
+++ b/apps/web-giddh/src/app/permissions/components/model/permission.model.component.ts
@@ -14,7 +14,7 @@ import { IRoleCommonResponseAndRequest } from 'apps/web-giddh/src/app/models/api
 @Component({
 	selector: 'permission-model',
 	templateUrl: './permission.model.component.html',
-	styleUrls: ['./permission.model.component.css'],
+	styleUrls: ['./permission.model.component.scss'],
 	providers: [{ provide: BsDropdownConfig, useValue: { autoClose: false } }]
 })
 
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.html b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.html
index bce5dc8ff42..431bb49e835 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.html
@@ -6,10 +6,10 @@ <h3>Add</h3>
     <button id="close" *ngIf="!hideFirstStep" (click)="closeAsidePane()"><i class="icon-cross"></i></button>
     <div class="aside-pane">
         <div class="aside-body flexy-child" *ngIf="!hideFirstStep">
-            <div class="pb-3 alC">
+            <div class="pb-3 text-center">
                 <button class="btn btn-lg btn-primary" (click)="toggleStockPane()">Add Product</button>
             </div>
-            <div class="pb-3 alC">
+            <div class="pb-3 text-center">
                 <button class="btn btn-lg btn-primary" (click)="toggleServicePane()">Add Service</button>
             </div>
         </div>
@@ -18,7 +18,7 @@ <h3>Add</h3>
             <sales-create-stock [autoFocusInChild]="autoFocusInChild" (closeAsideEvent)="closeAsidePane($event)" (animateAside)="animateAside($event)"></sales-create-stock>
         </div>
         <div class="aside-body flexy-child-1" *ngIf="isAddServiceOpen">
-            <create-account-service (closeAsideEvent)="closeAsidePane($event)" [selectedVoucherType]="selectedVoucherType"></create-account-service>
+            <generic-aside-menu-account [class]="accountAsideMenuState" [@slideInOut]="accountAsideMenuState" (closeAsideEvent)="closeAsidePane($event)" [selectedGroupUniqueName]="selectedVoucherType" [isDebtorCreditor]="false" [isBankAccount]="false" [keyboardShortcut]="{'esc':accountAsideMenuState ==='in'}" *ngIf="accountAsideMenuState === 'in'" (addEvent)="addNewServiceAccount($event)"></generic-aside-menu-account>
         </div>
     </div>
 </div>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.scss b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.scss
index 345e342022f..5f5992141bb 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -23,7 +25,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -41,15 +43,15 @@
     border-radius: 0;
     right: 58px;
     background-color: transparent;
-    border: 1px solid #fff;
-    color: #fff;
+    border: 1px solid $white;
+    color: $white;
     padding: 3px 14px;
     font-size: 14px;
 }
 #back:hover {
-    color: #1a237e;
-    background-color: #fff;
-    border-color: #fff;
+    color: $midnight-blue;
+    background-color: $white;
+    border-color: $white;
 }
 .aside-pane {
     display: flex;
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.ts b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.ts
index 482440860dd..34902f43d79 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.ts
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/component.ts
@@ -1,13 +1,27 @@
 import { Component, EventEmitter, Output, Input } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '../../../store/roots';
-import { ReplaySubject } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { AddAccountRequest } from '../../../models/api-models/Account';
+import { AccountService } from '../../../services/account.service';
+import { ToasterService } from '../../../services/toaster.service';
 
 @Component({
     selector: 'aside-menu-product-service',
     styleUrls: ['./component.scss'],
-    templateUrl: './component.html'
+    templateUrl: './component.html',
+    animations: [
+        trigger('slideInOut', [
+            state('in', style({
+                transform: 'translate3d(0, 0, 0)'
+            })),
+            state('out', style({
+                transform: 'translate3d(100%, 0, 0)'
+            })),
+            transition('in => out', animate('400ms ease-in-out')),
+            transition('out => in', animate('400ms ease-in-out'))
+        ]),
+    ]
 })
+
 export class AsideMenuProductServiceComponent {
 
     @Output() public closeAsideEvent: EventEmitter<boolean> = new EventEmitter(true);
@@ -19,14 +33,14 @@ export class AsideMenuProductServiceComponent {
     public isAddStockOpen: boolean = false;
     public isAddServiceOpen: boolean = false;
     public hideFirstStep: boolean = false;
-
-    // private below
-    private destroyed$: ReplaySubject<boolean> = new ReplaySubject(1);
+    /** Aside menu state */
+    public accountAsideMenuState: string = "in";
 
     constructor(
-        private store: Store<AppState>
+        private accountService: AccountService,
+        private toasterService: ToasterService
     ) {
-        // constructor methods
+
     }
 
     public toggleStockPane() {
@@ -60,4 +74,21 @@ export class AsideMenuProductServiceComponent {
         this.isAddStockOpen = false;
         this.isAddServiceOpen = false;
     }
+
+    /**
+     * This will create the service account
+     *
+     * @param {AddAccountRequest} item
+     * @memberof AsideMenuProductServiceComponent
+     */
+    public addNewServiceAccount(item: AddAccountRequest): void {
+        this.accountService.CreateAccountV2(item.accountRequest, item.activeGroupUniqueName).subscribe(response => {
+            if(response.status === "success") {
+                this.toasterService.successToast("Account Created Successfully");
+                this.closeAsideEvent.emit();
+            } else {
+                this.toasterService.errorToast(response.message);
+            }
+        });
+    }
 }
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-modal/create.account.modal.html b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-modal/create.account.modal.html
index bff4468f73b..ac78dbd2035 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-modal/create.account.modal.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-modal/create.account.modal.html
@@ -1,4 +1,4 @@
-<div class="modal-header pd2 pdL2 pdR2 clearfix">
+<div class="modal-header pd-2 pd-l2 pd-r2 clearfix">
 	<h3 class="modal-title bg" id="modal-title">Create Account</h3>
 	<i class="icon-cross text-right close-modal" aria-hidden="true" (click)="closeCreateAcModal()"></i>
 </div>
@@ -7,14 +7,14 @@ <h3 class="modal-title bg" id="modal-title">Create Account</h3>
 	<form name="addAcForm" [formGroup]="addAcForm" novalidate>
 
 		<div class="row">
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Name<span class="required">*</span></label>
 				<input type="text" name="name" (change)="generateUniqueName()" class="form-control"
 					formControlName="name"
 					style="background-image: url(data:image/png;base64:iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=);">
 			</div>
 
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Unique Name<span class="required">*</span></label>
 				<input type="text" name="uniqueName" UniqueNameDirective formControlName="uniqueName"
 					class="form-control">
@@ -22,12 +22,12 @@ <h3 class="modal-title bg" id="modal-title">Create Account</h3>
 		</div>
 
 		<div class="row">
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Opening Balance</label>
 				<input type="text" maxLength="21" class="form-control" decimalDigitsDirective [DecimalPlaces]="2"
 					formControlName="openingBalance">
 			</div>
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Opening Balance Type</label>
 				<select class="form-control" formControlName="openingBalanceType">
 					<option value="CREDIT">Credit</option>
@@ -37,7 +37,7 @@ <h3 class="modal-title bg" id="modal-title">Create Account</h3>
 		</div>
 
 		<div class="row">
-			<div class="col-xs-6 form-group">
+			<div class="col-6 form-group">
 				<label class="d-block">HSN</label>
 				<div class="input-group">
 					<span class="input-group-addon">
@@ -47,7 +47,7 @@ <h3 class="modal-title bg" id="modal-title">Create Account</h3>
 						class="form-control" name="hsnNumber" maxLength="10">
 				</div>
 			</div>
-			<div class="col-xs-6 form-group">
+			<div class="col-6 form-group">
 				<label class="d-block">SAC</label>
 				<div class="input-group">
 					<span class="input-group-addon">
@@ -60,8 +60,8 @@ <h3 class="modal-title bg" id="modal-title">Create Account</h3>
 		</div>
 
 		<div class="row">
-			<div class="form-group col-xs-12 text-right mr-t2">
-				<button type="submit" class="btn btn-md btn-success mrR" [ladda]="createAccountInProcess$ | async"
+			<div class="form-group col-12 text-right mr-t2">
+				<button type="submit" class="btn btn-md btn-success mr-r05" [ladda]="createAccountInProcess$ | async"
 					(click)="addAcFormSubmit()" [disabled]="addAcForm.invalid">Save
 				</button>
 				<button (click)="addAcFormReset()" class="btn btn-md btn-primary">Cancel</button>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.html b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.html
index bffd4e0ba3a..bcf8ccfaaa6 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.html
@@ -7,12 +7,12 @@ <h3>Create Service</h3>
     <div class="row">
         <div class="form-group col-12">
             <label class="mr-b1">Select Group</label>
-            <div class="ng-select-wrap liq">
+            <div class="ng-select-wrap select-list">
                 <ng-select placeholder="Sales Group" filterPlaceholder="Type to search..." name="flatAccountWGroupsList"
                     [(ngModel)]="activeGroupUniqueName" [options]="flatAccountWGroupsList$ | async" style="width:100%">
                     <ng-template #optionTemplate let-option="option">
                         <div class="account-list-item">{{option?.label}}</div>
-                        <div class="account-list-item fs12">{{option?.value}}</div>
+                        <div class="account-list-item font-12">{{option?.value}}</div>
                     </ng-template>
                 </ng-select>
             </div>
@@ -80,7 +80,7 @@ <h3>Create Service</h3>
 
         <div class="row">
             <div class="form-group col-12 text-right mr-t2">
-                <button type="submit" class="btn btn-md btn-success mrR" [ladda]="createAccountInProcess$ | async"
+                <button type="submit" class="btn btn-md btn-success mr-r05" [ladda]="createAccountInProcess$ | async"
                     (click)="addAcFormSubmit()" [disabled]="addAcForm.invalid">Save
                 </button>
                 <button (click)="closeCreateAcModal()" class="btn btn-md btn-primary">Cancel</button>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.scss b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.scss
index 838d120c3fc..8f56fc7c8b9 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-account-service/create.account.service.scss
@@ -1,9 +1,11 @@
+@import "../../../../../../assets/css/color.scss";
+
 .form-group label {
     margin-bottom: 5px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -13,8 +15,8 @@
 }
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
 }
 #close {
     position: absolute;
@@ -22,7 +24,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock-group-modal/create.stock.group.modal.html b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock-group-modal/create.stock.group.modal.html
index 94c899bc7ca..5f3360e96e7 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock-group-modal/create.stock.group.modal.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock-group-modal/create.stock.group.modal.html
@@ -1,18 +1,18 @@
-<div class="modal-header pd2 pdL2 pdR2 clearfix">
+<div class="modal-header pd-2 pd-l2 pd-r2 clearfix">
 	<h3 class="modal-title bg" id="modal-title">Create New Group</h3>
 	<i class="icon-cross text-right close-modal" aria-hidden="true" (click)="closeCreateGroupModal()"></i>
 </div>
 <div class="modal-body">
 	<form name="addStockGroupForm" autocomplete="off" [formGroup]="addStockGroupForm" novalidate>
 		<div class="row">
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Name<span class="required">*</span></label>
 				<input type="text" name="name" (change)="generateUniqueName()" class="form-control"
 					formControlName="name" autocomplete="off"
 					style="background-image: url(data:image/png;base64:iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=);">
 			</div>
 
-			<div class="form-group col-xs-6">
+			<div class="form-group col-6">
 				<label>Unique Name<span class="required">*</span></label>
 				<input type="text" autocomplete="off" name="uniqueName" UniqueNameDirective formControlName="uniqueName"
 					class="form-control">
@@ -20,7 +20,7 @@ <h3 class="modal-title bg" id="modal-title">Create New Group</h3>
 		</div>
 
 		<div class="row">
-			<div class="form-group col-xs-12">
+			<div class="form-group col-12">
 				<label>Parent Group</label>
 				<select class="form-control" formControlName="parentStockGroupUniqueName">
 					<option [ngValue]="null">Select</option>
@@ -30,7 +30,7 @@ <h3 class="modal-title bg" id="modal-title">Create New Group</h3>
 		</div>
 
 		<div class="row">
-			<div class="form-group col-xs-12">
+			<div class="form-group col-12">
 				<div class="checkbox">
 					<label for="isSelfParentUpdt"><input type="checkbox" formControlName="isSelfParent"
 							id="isSelfParentUpdt" name="parentStockGroup">Assign as a Parent Group</label>
@@ -39,8 +39,8 @@ <h3 class="modal-title bg" id="modal-title">Create New Group</h3>
 		</div>
 
 		<div class="row">
-			<div class="form-group col-xs-12 text-right mr-t2">
-				<button type="submit" class="btn btn-md btn-success mrR" [ladda]="isAddStockGroupInProcess"
+			<div class="form-group col-12 text-right mr-t2">
+				<button type="submit" class="btn btn-md btn-success mr-r05" [ladda]="isAddStockGroupInProcess"
 					(click)="addStockGroupFormSubmit()" [disabled]="addStockGroupForm.invalid">Save
 				</button>
 				<button (click)="addStockGroupFormReset()" class="btn btn-md btn-primary">Cancel</button>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.html b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.html
index 1432dec2369..13d7bcbd0c4 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.html
@@ -9,8 +9,8 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                 </div>
                 <button id="close" (click)="closeAsidePane()"><i class="icon-cross"></i></button>
                 <div class="aside-pane-form">
-                    <section class="form_body witBg clearfix margin-child-label">
-                        <div class="form_bg clearfix">
+                    <section class="form-body white-bg clearfix margin-child-label">
+                        <div class="clearfix">
                             <div class="row">
                                 <div class="form-group col-5 col-sm-5">
                                     <label>Under Group</label>
@@ -51,7 +51,7 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                             <!-- other details -->
                             <div class="row">
                                 <div class="col-12 col-sm-12">
-                                    <div class="form-group toggle-btn mrB"
+                                    <div class="form-group toggle-btn mr-b05"
                                         (click)="showOtherDetails = !showOtherDetails">
                                         <label class="cp">
                                             <i class="cp collapse-icons" aria-hidden="true"
@@ -232,7 +232,7 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                             </ng-container>
                         </div>
 
-                        <div class="pdL pdR pdT row">
+                        <div class="pd-l05 pd-r05 pd-t05 row">
                             <div class="col-6 col-sm-6">
                                 <div class="checkbox">
                                     <label class="" for="enablePurchase">
@@ -280,10 +280,10 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                                                     [DecimalPlaces]="4" formControlName="rate"
                                                     (blur)="enableSales.focus()" #purchaseRate />
                                             </div>
-                                            <div class="pull-right unit_add">
-                                                <button class="btn-link btn mr-0" (click)="addPurchaseUnitRates(i)" *ngIf="l"><i class="icon-plus add_row"></i></button>
+                                            <div class="pull-right unit-add">
+                                                <button class="btn-link btn mr-0" (click)="addPurchaseUnitRates(i)" *ngIf="l"><i class="icon-plus add-row"></i></button>
                                                 <button class="btn-link btn" (click)="removePurchaseUnitRates(i)" *ngIf="!l"><i
-                                                        class="icon-cross dlet"></i></button>
+                                                        class="icon-cross delete"></i></button>
                                             </div>
                                         </div>
 
@@ -338,10 +338,10 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                                                     [DecimalPlaces]="4" formControlName="rate"
                                                     (blur)="isFsStock.focus()" #salesRate />
                                             </div>
-                                            <div class="pull-right unit_add">
-                                                <button class="btn-link btn mr-0" (click)="addSaleUnitRates(i)" *ngIf="l"><i class="icon-plus add_row"></i></button>
+                                            <div class="pull-right unit-add">
+                                                <button class="btn-link btn mr-0" (click)="addSaleUnitRates(i)" *ngIf="l"><i class="icon-plus add-row"></i></button>
                                                 <button class="btn-link btn mr-0" (click)="removeSaleUnitRates(i)" *ngIf="!l"><i
-                                                        class="icon-cross dlet"></i></button>
+                                                        class="icon-cross delete"></i></button>
                                             </div>
                                         </div>
 
@@ -352,7 +352,7 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                         </div>
 
 
-                        <div class="mr-t1 pdL pdR row">
+                        <div class="mr-t1 pd-l05 pd-r05 row">
                             <div class="col-12 col-sm-12">
                                 <div class="checkbox">
                                     <label class="" for="isFsStock">
@@ -365,13 +365,13 @@ <h3 *ngIf="isUpdatingStockForm">Update Stock</h3>
                         </div>
 
 
-                        <section class="mr-t2 mrB3 col-12 col-sm-12 row" *ngIf="addStockForm.value.isFsStock">
-                            <div class="pdL pdR">
-                                <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (Made
+                        <section class="mr-t2 mr-b3 col-12 col-sm-12 row" *ngIf="addStockForm.value.isFsStock">
+                            <div class="pd-l05 pd-r05">
+                                <h1 class="section-head bd-rb"><strong>{{addStockForm.controls['name'].value}} (Made
                                         with)</strong></h1>
-                                <table class="noHover  width100">
+                                <table class="no-hover width-100">
                                     <tbody formGroupName="manufacturingDetails">
-                                        <tr class="output_row">
+                                        <tr class="output-row">
                                             <td class="form-group">
                                                 <label>Output Qty <sup>*</sup></label>
                                                 <input type="text" class="form-control" decimalDigitsDirective
@@ -390,14 +390,14 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
                                             <td *ngIf="addStockForm.controls['manufacturingDetails'].controls['manufacturingQuantity'].value"
                                                 colspan="2">
                                                 <label class="d-block">&nbsp;</label>
-                                                <span class="width100"><strong>= (
+                                                <span class="width-100"><strong>= (
                                                         {{addStockForm.controls['manufacturingDetails'].controls['manufacturingQuantity'].value}}
                                                         {{addStockForm.controls['manufacturingDetails'].controls['manufacturingUnitCode'].value}}
                                                         {{addStockForm.controls['name'].value}} )</strong></span>
                                             </td>
                                             <!-- <td colspan="1">&nbsp;</td> -->
                                         </tr>
-                                        <tr class="noHover  table_label" style="border-color:#ccc;">
+                                        <tr class="no-hover table-label">
                                             <td [style.width.px]="200"><strong>Input Stock Name</strong></td>
                                             <td><strong>Stock Qty</strong></td>
                                             <td><strong>Stock Unit</strong></td>
@@ -432,9 +432,9 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
                                                 <td>
                                                     <button class="btn-link btn mr-0" (click)="addItemInLinkedStocks(list, i, i)"
                                                         *ngIf="l" [disabled]="disableStockButton"><i
-                                                            class="icon-plus add_row"></i></button>
+                                                            class="icon-plus add-row"></i></button>
                                                     <button class="btn-link" (click)="removeItemInLinkedStocks(i)"
-                                                        *ngIf="!l"><i class="icon-cross dlet"></i></button>
+                                                        *ngIf="!l"><i class="icon-cross delete"></i></button>
                                                 </td>
                                             </tr>
                                         </ng-container>
@@ -444,7 +444,7 @@ <h1 class="section-head bdrB"><strong>{{addStockForm.controls['name'].value}} (M
                         </section>
 
                         <div class="col-12 col-sm-12 text-left">
-                            <div class="mr-t1 pdL pdR row">
+                            <div class="mr-t1 pd-l05 pd-r05 row">
 
                                 <button type="submit" *ngIf="!isUpdatingStockForm"
                                     [ladda]="isStockAddInProcess$ | async" (click)="submit()" class="btn btn-success"
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.scss b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.scss
index bb848b31e97..658a47399d4 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/aside-menu-product-service/components/create-stock/sales.create.stock.component.scss
@@ -1,5 +1,5 @@
 @import "../../../../../../assets/css/color.scss";
-.output_row > td {
+.output-row > td {
     padding: 12px 10px 12px 0 !important;
 }
 
@@ -7,10 +7,13 @@
     padding: 2px 10px 2px 0;
 }
 
-.table_label td {
-    padding-top: 12px !important;
-    padding-bottom: 5px;
-}
+.table-label{
+    border-color: $gainsboro !important;
+    td {
+        padding-top: 12px !important;
+        padding-bottom: 5px;
+    }
+} 
 
 .dropdown-menu {
     max-height: 168px;
@@ -61,7 +64,7 @@
 tr.fsstock td {
     padding-bottom: 15px;
 }
-.table_label strong {
+.table-label strong {
     color: $charcoal;
     font-weight: normal !important;
     font-size: 14px;
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.html b/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.html
index 34fb4ec7524..fbd6c2afd5f 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.html
@@ -1,4 +1,4 @@
-<div class="addBulkItemmodal">
+<div class="add-bulk-item-modal">
 
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
@@ -16,17 +16,17 @@ <h4 class="modal-title pull-left">Add bulk items</h4>
 
                     <!-- region left side -->
                     <div class="col-md-6 col-sm-6">
-                        <div class="leftContent">
+                        <div class="left-content">
 
-                            <div class="searchBox">
+                            <div class="search-box">
                                 <input type="text" placeholder="Search stock" #searchElement class="pr-1 pl-1 form-control">
                             </div>
 
-                            <div class="productList">
+                            <div class="product-list">
 
                                 <perfect-scrollbar (psYReachEnd)="onScrollEnd()">
 
-                                    <div class="singleProductWrapper cp" *ngFor="let item of filteredData"
+                                    <div class="single-product-wrapper cp" *ngFor="let item of filteredData"
                                         (click)="addItemToSelectedArr(item)">
                                         <h5>{{ item.name }}</h5>
                                     </div>
@@ -42,18 +42,18 @@ <h5>{{ item.name }}</h5>
                     <!-- region right side -->
                     <div class="col-md-6 pl-0 col-sm-6">
 
-                        <div class="rightContent">
+                        <div class="right-content">
 
-                            <h4>Selected Stocks <span class="selectdStockNumber">({{ selectedItems.length }})</span>
+                            <h4>Selected Stocks <span class="selected-stock-number">({{ selectedItems.length }})</span>
                             </h4>
                             <hr>
 
-                            <div class="rightSideWrapper">
+                            <div class="right-side-wrapper">
                                 <perfect-scrollbar>
-                                    <div class="wrapSelectedStocks" *ngFor="let item of selectedItems">
-                                        <div class="singleSelectdStock clearfix d-flex">
+                                    <div class="wrap-selected-stocks" *ngFor="let item of selectedItems">
+                                        <div class="single-selected-stock clearfix d-flex">
 
-                                            <div class="" style="flex: 1">
+                                            <div class="flex-fill">
                                                 <div class="stockName">
                                                     <p>{{ item.name }}</p>
                                                     <p>
@@ -63,7 +63,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">({{ selectedItems.length }}
                                                 </div>
                                             </div>
 
-                                            <div class="d-flex" style="align-items: center">
+                                            <div class="d-flex align-items-center">
 
                                                 <div class="input-group add-item-btn">
 
@@ -87,7 +87,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">({{ selectedItems.length }}
 
                                                 </div>
 
-                                                <span class="ml-15" (click)="removeSelectedItem(item.uniqueName)">
+                                                <span class="mr-l15" (click)="removeSelectedItem(item.uniqueName)">
                                                     <i class="icon-cross"></i>
                                                 </span>
                                             </div>
@@ -97,11 +97,11 @@ <h4>Selected Stocks <span class="selectdStockNumber">({{ selectedItems.length }}
                                 </perfect-scrollbar>
                             </div>
 
-                            <div class="temapletFooter">
+                            <div class="template-footer">
 
                                 <hr>
 
-                                <div class="btn-group bulkItemBtnGroup">
+                                <div class="btn-group bulk-item-btn-group">
                                     <button class="btn btn-sm btn-success" type="button"
                                         (click)="saveItemsEvent.emit(selectedItems);closeEvent.emit()">
                                         Add
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.scss b/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.scss
index 440e369fd79..d02f8a976d4 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-add-bulk-items/proforma-add-bulk-items.component.scss
@@ -1,12 +1,12 @@
 /* ADD BULK ITEM */
 
 @import "../../../../assets/css/color.scss";
-.addBulkItemmodal.modal-dialog {
+.add-bulk-item-modal.modal-dialog {
     width: 870px !important;
     margin: 30px auto;
 }
 
-.searchBox input[type="text"] {
+.search-box input[type="text"] {
     outline: none;
     width: 100%;
     height: 34px !important;
@@ -16,12 +16,12 @@
     margin-left: 10px;
 }
 
-.addBulkItemmodal .singleProductWrapper {
+.add-bulk-item-modal .single-product-wrapper {
     margin-bottom: 20px;
     padding: 4px;
 
     &:hover {
-        background-color: #eeeff9;
+        background-color: $lavender;
         color: $chetwode-blue;
     }
 
@@ -36,102 +36,102 @@
     vertical-align: middle;
 }
 
-.addBulkItemmodal .singleProductWrapper h5 {
-    color: #333333;
+.add-bulk-item-modal .single-product-wrapper h5 {
+    color: $night-rider;
     font-size: 14px;
 }
 
-.addBulkItemmodal .singleProductWrapper p {
+.add-bulk-item-modal .single-product-wrapper p {
     font-size: 12px;
     padding-top: 4px;
 }
 
-.addBulkItemmodal .productList {
+.add-bulk-item-modal .product-list {
     padding-top: 15px;
     height: 600px;
     overflow-y: auto;
 }
 
-.addBulkItemmodal .rightContent span.selectdStockNumber {
+.add-bulk-item-modal .right-content span.selected-stock-number {
     font-size: 20px;
 }
 
-.addBulkItemmodal .rightContent h4 {
+.add-bulk-item-modal .right-content h4 {
     font-size: 14px;
 }
 
-.addBulkItemmodal .rightContent hr {
-    color: black;
-    border-color: #ccc;
+.add-bulk-item-modal .right-content hr {
+    color: $black;
+    border-color: $gainsboro;
     margin: 10px -15px;
     margin-left: -15px;
 }
 
-.addBulkItemmodal .pl-0 {
+.add-bulk-item-modal .pl-0 {
     padding-left: 0;
 }
 
-.addBulkItemmodal .singleSelectdStock p {
+.add-bulk-item-modal .single-selected-stock p {
     font-size: 14px;
 }
 
-.addBulkItemmodal .wrapSelectedStocks {
+.add-bulk-item-modal .wrap-selected-stocks {
     margin-top: 15px;
     padding-right: 20px;
 }
 
-.addBulkItemmodal .input-group {
+.add-bulk-item-modal .input-group {
     position: relative;
     display: table;
     border-collapse: separate;
     width: 138px;
 }
 
-.addBulkItemmodal input.form-control.input-number {
+.add-bulk-item-modal input.form-control.input-number {
     width: 60px !important;
     text-align: center;
     height: 28px !important;
 }
 
-.addBulkItemmodal .input-group .input-group-btn .btn {
-    background: #fff;
-    border-left: 1px solid #ccc;
+.add-bulk-item-modal .input-group .input-group-btn .btn {
+    background: $white;
+    border-left: 1px solid $gainsboro;
 }
 
-.addBulkItemmodal .btn {
+.add-bulk-item-modal .btn {
     padding: 3px 13px;
 }
 
-.addBulkItemmodal .input-group-btn .fa {
-    color: #c6c6c6;
+.add-bulk-item-modal .input-group-btn .fa {
+    color: $silver;
 }
 
-.addBulkItemmodal .singleSelectdStock {
+.add-bulk-item-modal .single-selected-stock {
     margin-bottom: 20px;
 }
 
-.addBulkItemmodal .leftContent {
-    border-right: 1px solid #ddd;
+.add-bulk-item-modal .left-content {
+    border-right: 1px solid $gainsboro;
     padding-right: 15px;
 }
 
-.addBulkItemmodal .modal-title {
+.add-bulk-item-modal .modal-title {
     font-size: 22px !important;
-    color: #fff;
+    color: $white;
 }
 
-.table-custom-invoice .salesTax .dropdown-menu-right li label {
+.table-custom-invoice .sales-tax .dropdown-menu-right li label {
     padding-left: 10px;
 }
 
-.temapletFooter {
+.template-footer {
     position: absolute;
     bottom: 0;
     width: calc(100% - 30px);
     max-width: 100%;
 }
 
-.rightSideWrapper {
+.right-side-wrapper {
     height: 600px;
     overflow-y: auto;
     padding-bottom: 60px;
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.html b/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.html
index 4208628b7c0..5bd1efd0b9a 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.html
@@ -2,7 +2,7 @@
 
     <div class="gst-treatment-header d-flex">
 
-        <span style="flex: 1">Gst Treatment</span>
+        <span class="flex-fill">Gst Treatment</span>
 
         <span class="cp" (click)="closeEvent.emit()">
             <i class="icon-cross"></i>
@@ -11,23 +11,23 @@
 
     <div class="gst-treatment-body">
 
-        <form class="" name="gstTreatmentForm" novalidate="">
+        <form name="gstTreatmentForm" novalidate="">
             <div class="container-fluid mr-t1">
 
-                <div class="">
+                <div>
 
                     <div class="form-group">
                         <label>Party Type</label>
                         <sh-select [options]="[]" [showClear]="false"></sh-select>
                     </div>
 
-                    <div class="form-group" style="margin-bottom: 5px">
+                    <div class="form-group mr-b05">
                         <label>GSTIN*</label>
                         <input class="form-control" placeholder="Enter Unique Name" type="text">
                     </div>
 
-                    <div class="d-flex" style="justify-content: flex-end">
-                        <span style="font-size: 12px" class="cp aqua-color">
+                    <div class="d-flex justify-content-end">
+                        <span class="cp aqua-color font-12">
                             <a href="javascript: void 0">Validate</a>
                         </span>
                     </div>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.scss b/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.scss
index 10e35509774..2b57f380895 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-gst-treatment/proforma-gst-treatment.component.scss
@@ -1,13 +1,13 @@
 @import "../../../../assets/css/color.scss";
 .gst-treatment-wrapper {
-    background-color: #fff;
+    background-color: $white;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     height: 290px;
 
     .gst-treatment-header {
-        background-color: #e2e2e2;
+        background-color: $whisper;
         padding: 8px 10px;
-        border-bottom: 1px solid #cccccc;
+        border-bottom: 1px solid $gainsboro;
     }
 }
 .gst-treatment-body {
@@ -18,8 +18,8 @@
     margin-bottom: 7px;
 }
 .btn-success {
-    background: #28ab00;
-    color: #fff;
+    background: $success-green;
+    color: $white;
 }
 .aqua-color a {
     color: $deep-sky-blue;
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.html b/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.html
index a0dfd37d23a..f75e6f0309a 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.html
@@ -1,12 +1,12 @@
-<div class="previuos-estimate-wrapper" (click)="clickInside($event)">
-    <ul style="list-style: none">
+<div class="previous-estimate-wrapper" (click)="clickInside($event)">
+    <ul>
         <perfect-scrollbar>
             <li *ngFor="let item of data" (click)="onInvoiceSelected(item)">
-                <div class="d-flex" style="justify-content: space-between; padding: 4px;">
+                <div class="d-flex justify-content-between pd">
 
-                    <div style="display: flex;flex-direction: column">
-                        <span class="left-txtOrange">{{ item.versionNumber }}</span>
-                        <span class="left-txtOrange">{{ item.date }} ( {{ item.account?.name }} )</span>
+                    <div class="d-flex flex-column">
+                        <span class="left-text-purple">{{ item.versionNumber }}</span>
+                        <span class="left-text-purple">{{ item.date }} ( {{ item.account?.name }} )</span>
                     </div>
 
                     <span>{{ item.grandTotal?.amountForAccount }}</span>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.scss b/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.scss
index 8ca5d050342..8378e21dd94 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-last-invoices/proforma-last-invoices.component.scss
@@ -1,6 +1,9 @@
-.previuos-estimate-wrapper {
+@import "../../../../assets/css/color.scss";
+
+.previous-estimate-wrapper {
     ul {
-        background-color: #fff;
+        list-style: none !important;
+        background-color: $white;
         box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
         padding: 5px;
         height: 210px;
@@ -8,11 +11,11 @@
 
         li {
             font-size: 12px;
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid $gainsboro;
             padding-right: 12px;
 
             &:hover {
-                background-color: #e5e5e5;
+                background-color: $whisper;
             }
 
             &:last-child {
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.html b/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.html
index 65e03ae6c2e..55dda3a4e4a 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.html
@@ -1,4 +1,4 @@
-<div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+<div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
     <h3 class="modal-title bg" id="modal-title">Print Voucher </h3>
     <i aria-hidden="true" class="icon-cross text-right close-modal" (click)="cancelEvent.emit()"></i>
 </div>
diff --git a/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.scss b/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.scss
index e962a1dc1f1..a8ac51d37de 100644
--- a/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/components/proforma-print-inplace/proforma-print-in-place.component.scss
@@ -1,6 +1,12 @@
+@import "../../../../assets/css/color.scss";
+
+.modal-header{
+    background-color: $davy-grey;
+}
+
 .invoice-image-section {
     text-align: center;
-    background-color: #fff;
+    background-color: $white;
     margin-bottom: 35px;
     z-index: -9;
     height: 73vh;
@@ -13,6 +19,6 @@
         font-size: 36px;
         max-width: 60%;
         margin: 0 auto;
-        color: #ff0d0d;
+        color: $red;
     }
 }
diff --git a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.html b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.html
index de1f202bcfc..6b37fa99213 100644
--- a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.html
+++ b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.html
@@ -8,11 +8,11 @@
     <!-- region page change menu -->
         <div class="d-flex border-bottom mobile-view-padding">
             <hamburger-menu></hamburger-menu>
-        <div class="form-group mrB clearfix">
+        <div class="form-group mr-b05 clearfix">
 
             <div class="clearfix">
 
-                <div class="btn-group proformaSalesTime" dropdown>
+                <div class="btn-group proforma-sales-time" dropdown>
 
                     <button id="giddh-page-heading-link" dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                         aria-controls="dropdown-basic">
@@ -45,7 +45,7 @@
 
     <!-- region update mode loader-->
     <ng-container *ngIf="isUpdateDataInProcess">
-        <div class="loaderClass">
+        <div class="loader-class">
             <div class="no-data mr-t2 loader-main">
                 <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
                 <div class="spinner2">
@@ -62,14 +62,14 @@
         <form #invoiceForm="ngForm" novalidate autocomplete="off"
             [ngClass]="{ 'customer-invoice-form' : !invFormData.voucherDetails.customerName,
             'customer-invoice-form-purchase': isPurchaseInvoice || isCreditNote || isDebitNote,
-            'slaesPrEsti': isSalesInvoice || isProformaInvoice || isEstimateInvoice,
-            'forMultiCurrency' : isMulticurrencyAccount} ">
+            'sales-proforma-estimate': isSalesInvoice || isProformaInvoice || isEstimateInvoice,
+            'for-multi-currency' : isMulticurrencyAccount} ">
 
             <div class="clearfix" [keyboardShortcut]="'alt+c'" (onShortcutPress)="addAccountFromShortcut()">
 
-                <div class="clearfix wrapper-customer-table  pt-15">
+                <div class="clearfix wrapper-customer-table pd-t15">
                     <!-- region customer and address section -->
-                    <div class="customerInvoiceTable">
+                    <div class="customer-invoice-table">
 
                         <div class="inner-container">
 
@@ -77,7 +77,7 @@
                                 *ngIf="isSalesInvoice || isProformaInvoice || isEstimateInvoice">
 
                                 <div class="text-right">
-                                    <p class="fs20 b pbR1">
+                                    <p class="font-20 b pb-r1">
                                         <span
                                             class="balance-due">{{isProformaInvoice || isEstimateInvoice ? 'Total Amount' : 'Balance Due'}}</span>
                                         <span class="sp-rupees"
@@ -107,13 +107,13 @@
                                     <!-- endregion -->
 
                                     <!-- region customer dropdown -->
-                                    <div class="col-sm-12 col-xl-7 col-lg-8 col-md-9 col-xs-12 selectCustomerName">
+                                    <div class="col-sm-12 col-xl-7 col-lg-8 col-md-9 col-xs-12 select-customer-name">
 
                                         <div class="clearfix d-flex flex-column">
                                             <div class="d-flex">
                                                 <!-- region if not cashinvoice show customer dropdown -->
                                                 <ng-container *ngIf="!isCashInvoice">
-                                                    <sales-sh-select style="width:62.7%; float: left;"
+                                                    <sales-sh-select class="float-left sales-select"
                                                         name="voucherDetails.customerName" #customerNameDropDown
                                                         [options]="customerAcList$ | async"
                                                         [(ngModel)]="invFormData.voucherDetails.customerUniquename"
@@ -131,6 +131,7 @@
                                                         [notFoundLinkText]="customerNotFoundText"
                                                         (keyup)="resetCustomerName($event)"
                                                         (onClear)="resetCustomerName(null)"
+                                                        [isOpen]="!isUpdateMode && !invFormData.voucherDetails.customerUniquename"
                                                         [disabled]="isUpdateMode && invoiceType !== 'sales' && invoiceType !== 'cash' && invoiceType !== 'purchase'">
 
                                                         <ng-template #optionTemplate let-option="option">
@@ -141,7 +142,7 @@
                                                         </ng-template>
 
                                                         <ng-template #notFoundLinkTemplate>
-                                                            <a href="javascript:void(0)" class="list-item pl-05 pr-05 border-none d-flex justify-content-between w-100"
+                                                            <a href="javascript:void(0)" class="list-item pd-l05 pd-r05 border-none d-flex justify-content-between w-100"
                                                                 [keyboardShortcut]="'alt+c'">
                                                                 <div class="item">{{ customerNotFoundText }}</div>
                                                                 <div class="item">Alt+C</div>
@@ -155,7 +156,7 @@
                                                 <ng-container *ngIf="isCashInvoice">
                                                     <input type="text" name="voucherDetails.customerName"
                                                         [autofocus]="true" #inputCustomerName
-                                                        class="form-control cashInvoiceInput"
+                                                        class="form-control cash-invoice-input"
                                                         [(ngModel)]="invFormData.voucherDetails.customerName"
                                                         (change)="handleCustomerChange($event)"
                                                         (blur)='selectDefaultbank()'
@@ -164,9 +165,8 @@
                                                 <!-- endregion -->
 
                                                 <!-- region previous details commented for multicurrency changes-->
-                                                <div class="d-flex cp aqua-color" #copyPreviousEstimate
-                                                    *ngIf="!isPurchaseInvoice && !(isPendingVoucherType && isCashInvoice) && invFormData.voucherDetails.customerName && lastInvoices.length && !isUpdateMode"
-                                                    style="align-items: center;margin-left: 2%">
+                                                <div class="d-flex cp aqua-color align-items-center ml-3" #copyPreviousEstimate
+                                                    *ngIf="!isPurchaseInvoice && !(isPendingVoucherType && isCashInvoice) && invFormData.voucherDetails.customerName && lastInvoices.length && !isUpdateMode">
                                                     <a href="javascript: void 0"
                                                         (click)="showLastEstimateModal = !showLastEstimateModal">
                                                         <i class="icon-copy-file"></i> Copy Previous
@@ -187,7 +187,7 @@
                                                     *ngTemplateOutlet="gstTreatmentModal;context:{ $implicit: showGstTreatmentModal}">
                                                 </ng-container>
 
-                                                <span style="margin-right: 5px" class="cp aqua-color"
+                                                <span class="cp aqua-color mr-r05"
                                                     *ngIf="!isCashInvoice && !isUpdateMode">
                                                     <a href="javascript:void(0)"
                                                         (click)="getCustomerDetails()">{{!isPurchaseInvoice ? 'Customer' : 'Vendor'}}
@@ -227,7 +227,7 @@
 
                                 <div class="col-sm-12 col-xl-9 offset-lg-3 col-lg-8 col-md-9 offset-xl-2 offset-md-3">
                                     <ng-container>
-                                        <section [ngClass]="{' billing-addressWrap' : !invFormData.voucherDetails.customerName }">
+                                        <section [ngClass]="{'billing-address-wrap' : !invFormData.voucherDetails.customerName }">
 
                                             <div class="wrap-billing-address clearfix w-100">
 
@@ -236,8 +236,24 @@
                                                     <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
                                                         <div class="form-group">
-                                                            <label class="pb-0">Billing Address</label>
-
+                                                            <div class="d-flex align-items-center pb-1">
+                                                                <span class="pb-0 pd-r15">Billing Address</span>
+                                                                <span>
+                                                                    <div class="btn-group btn-block change-address-dropdown" dropdown #billingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="billingAddressDropDownWeb.hide()" *ngIf="accountAddressList?.length > 1">
+                                                                        <a dropdownToggle type="button" class="dropdown-toggle"> Change</a>
+                                                                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
+                                                                            <li role="menuitem" *ngFor="let address of accountAddressList">
+                                                                                <a class="dropdown-item" (click)="selectAddress(invFormData.accountDetails.billingDetails, address)">
+                                                                                    {{address.address}} {{address.state?.name}}
+                                                                                    <span class="d-block">
+                                                                                    {{ address.gstNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.gstNumber : "" }}
+                                                                                    </span>
+                                                                                </a>
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                </span>
+                                                            </div>
                                                             <div class="billing-address clearfix">
                                                                 <textarea name="billingDetails.address"
                                                                     class="form-control"
@@ -294,17 +310,33 @@
                                                     <!-- region shipping address -->
                                                     <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
-                                                        <div class="form-group p0 width100">
-                                                            <label class="pb-0">
-                                                                <input type="checkbox" autocomplete="None"
-                                                                    (change)="autoFillShippingDetails()"
-                                                                    name="autoFillShipping"
-                                                                    [(ngModel)]="autoFillShipping"> Shipping Address
-                                                                Same as
-                                                                Billing
-                                                                Address
-                                                            </label>
-
+                                                        <div class="form-group p-0 width-100">
+                                                            <div class="d-flex align-items-center pb-1">
+                                                                <span class="pb-0 pd-r15">
+                                                                    <input type="checkbox" autocomplete="None"
+                                                                        (change)="autoFillShippingDetails()"
+                                                                        name="autoFillShipping"
+                                                                        [(ngModel)]="autoFillShipping"> Shipping Address
+                                                                    Same as
+                                                                    Billing
+                                                                    Address
+                                                                </span>
+                                                                <span>
+                                                                    <div class="btn-group btn-block change-address-dropdown" dropdown #shippingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="shippingAddressDropDownWeb.hide()" *ngIf="accountAddressList?.length > 1 && !autoFillShipping">
+                                                                        <a dropdownToggle type="button" class="dropdown-toggle"> Change</a>
+                                                                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
+                                                                            <li role="menuitem" *ngFor="let address of accountAddressList">
+                                                                                <a class="dropdown-item" (click)="selectAddress(invFormData.accountDetails.shippingDetails, address)">
+                                                                                    {{address.address}} {{address.state?.name}}
+
+                                                                                    <span class="d-block">{{ address.gstNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.gstNumber : "" }}
+                                                                                    </span>
+                                                                                </a>
+                                                                            </li>
+                                                                        </ul>
+                                                                    </div>
+                                                                </span>
+                                                            </div>
                                                             <div class="billing-address"
                                                                 [ngClass]="{'disabled': autoFillShipping}">
 
@@ -383,7 +415,7 @@
                             *ngIf="isSalesInvoice || isProformaInvoice || isEstimateInvoice">
 
                             <div class="text-right">
-                                <p class="fs20 b pbR1">
+                                <p class="font-20 pb-r1">
                                     <span
                                         class="balance-due">{{isProformaInvoice || isEstimateInvoice ? 'Total Amount' : 'Balance Due'}}</span>
                                     <span class="sp-rupees"
@@ -414,7 +446,7 @@
                     <!-- endregion -->
 
                     <!-- region attention to, email, mobile, voucher section -->
-                    <div class="customerInvoiceTable bg-white pdB2 pdT2">
+                    <div class="customer-invoice-table bg-white pd-b2 pd-t2">
                         <div class="inner-container">
 
                             <!-- region attention to -->
@@ -425,7 +457,7 @@
                                 </div>
 
                                 <div class="col-sm-12 col-xl-9 col-lg-8 col-md-9 col-xs-12">
-                                    <div class="pl0 col-sm-12 col-xl-6 col-lg-10 col-md-10">
+                                    <div class="pl-0 col-sm-12 col-xl-6 col-lg-10 col-md-10">
 
                                         <input type="text" name="accountDetails.attention" placeholder="Attention to"
                                             class="form-control attentionTo"
@@ -485,7 +517,7 @@
                             </div>
                             <!-- end warehouse field -->
 
-                            <div class="row mb-1 delivery-from-field" *ngIf="isPurchaseInvoice">
+                            <div class="row mt-1 delivery-from-field" *ngIf="isPurchaseInvoice">
                                 <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                                     <label>Deliver To<span class="red-text">*</span></label>
                                 </div>
@@ -496,7 +528,22 @@
                                                 <!-- region billing address -->
                                                 <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
                                                     <div class="form-group">
-                                                        <label>Billing Address</label>
+                                                        <div class="d-flex align-items-center pb-1">
+                                                            <span class="pd-r15">Billing Address</span>
+                                                            <span>
+                                                                <div class="btn-group btn-block change-address-dropdown" dropdown #companyBillingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="companyBillingAddressDropDownWeb.hide()" *ngIf="companyAddressList?.length > 1">
+                                                                    <a dropdownToggle type="button" class="dropdown-toggle"> Change</a>
+                                                                    <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
+                                                                        <li role="menuitem" *ngFor="let address of companyAddressList">
+                                                                            <a class="dropdown-item" (click)="selectAddress(purchaseBillCompany.billingDetails, address, true)">
+                                                                                {{address.address}} {{address.stateName}}
+                                                                                <span class="d-block">{{ address.taxNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.taxNumber : "" }}</span>
+                                                                            </a>
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                            </span>
+                                                        </div>
                                                         <div class="billing-address clearfix">
                                                             <textarea name="companyBillingDetailsAddress"
                                                                 (keyup)="autoFillCompanyShippingDetails()"
@@ -540,14 +587,16 @@
                                                 <!-- region shipping address -->
                                                 <div class="col-sm-12 col-xl-6 col-md-10  bill-add">
 
-                                                    <div class="form-group p-0 width100">
-                                                        <label>
-                                                            <input type="checkbox" autocomplete="None"
-                                                                name="autoFillCompanyShipping"
-                                                                [(ngModel)]="autoFillCompanyShipping"
-                                                                (change)="autoFillCompanyShippingDetails()"> Shipping Address
-                                                            Same as Billing Address
-                                                        </label>
+                                                    <div class="form-group p-0 width-100">
+                                                        <div class="d-flex align-items-center pb-1">
+                                                            <span class="pd-r15">
+                                                                <input type="checkbox" autocomplete="None"
+                                                                    name="autoFillCompanyShipping"
+                                                                    [(ngModel)]="autoFillCompanyShipping"
+                                                                    (change)="autoFillCompanyShippingDetails()"> Shipping Address
+                                                                Same as Billing Address
+                                                            </span>
+                                                        </div>
                                                         <div
                                                             [ngClass]="{'billing-address': true, 'disabled': autoFillCompanyShipping}">
                                                             <textarea name="companyShippingDetailsAddress"
@@ -609,10 +658,10 @@
                                                         <span><input type="checkbox" [checked]="linkedPo && linkedPo.includes(option.value)" [value]="option.value"></span>&nbsp;
                                                         <span>
                                                             <div class="item">{{ option.label }}</div>
-                                                            <div class="item-unq" *ngIf="option.additional?.pending">
+                                                            <div class="item-unique" *ngIf="option.additional?.pending">
                                                                 Pending: {{ option.additional?.pending }}
                                                             </div>
-                                                            <div class="item-unq" *ngIf="option.additional?.grandTotal">
+                                                            <div class="item-unique" *ngIf="option.additional?.grandTotal">
                                                                 Amount: {{ option.additional?.grandTotal }}
                                                             </div>
                                                         </span>
@@ -636,8 +685,8 @@
                                         <div>
                                             <input *ngIf="(!isCreditNote && !isDebitNote)" type="text"
                                                 name="accountDetails.invoiceNum"
-                                                class="form-control invoiceDate attentionTo"
-                                                [ngClass]="{'dateinvoice': !isPurchaseInvoice }"
+                                                class="form-control invoice-date attentionTo"
+                                                [ngClass]="{'date-invoice': !isPurchaseInvoice }"
                                                 [disabled]="(isUpdateMode && !(isDebitNote || isPurchaseInvoice)) ? 'disabled' : null"
                                                 [(ngModel)]="invFormData.voucherDetails.voucherNumber" />
 
@@ -669,7 +718,7 @@
                                         <div *ngIf="(isCreditNote || isDebitNote) && selectedInvoice"
                                             class="cp for-mobile-screen remove-invoice"
                                             (click)="removeSelectedInvoice()">
-                                            <span class="remove-invoice-icon mr-05">×</span>
+                                            <span class="remove-invoice-icon mr-r05">×</span>
                                             <span class="remove-invoice-label">Remove</span>
                                         </div>
                                     </div>
@@ -677,7 +726,7 @@
                                         <div class="form-inline flex-row flex-nowrap">
                                             <div *ngIf="(isCreditNote || isDebitNote) && selectedInvoice"
                                                 class="cp remove-invoice" (click)="removeSelectedInvoice()">
-                                                <span class="remove-invoice-icon mr-05">×</span>
+                                                <span class="remove-invoice-icon mr-r05">×</span>
                                                 <span class="remove-invoice-label">Remove</span>
                                             </div>
                                             <div class="form-group">
@@ -700,12 +749,12 @@
 
                                             </div>
 
-                                            <div class="form-group m-l-10"
+                                            <div class="form-group mr-l1"
                                                 *ngIf="isSalesInvoice || isPurchaseInvoice || isProformaInvoice || isEstimateInvoice">
                                                 <label>{{ invoiceDueDateLabel }}</label>
 
                                                 <input type="text" [placeholder]="giddhDateFormat" #dueDate="ngModel"
-                                                    name="dueDate" class="form-control dateinvoice" bsDatepicker
+                                                    name="dueDate" class="form-control date-invoice" bsDatepicker
                                                     [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                                     [(ngModel)]="invFormData.voucherDetails.dueDate"
                                                     [class.invalid-inp]="dueDate.errors && (dueDate.dirty || dueDate.touched)"
@@ -729,7 +778,7 @@
                                 <div class="col-sm-12 col-xl-9 col-lg-8 col-md-9 col-xs-12">
                                     <div class="col-sm-12 col-xl-6 col-lg-10 col-md-10 pl-0">
                                         <input type="text" [placeholder]="giddhDateFormat" #voucherDate="ngModel"
-                                            name="voucherDate" class="form-control dateinvoice" bsDatepicker
+                                            name="voucherDate" class="form-control date-invoice" bsDatepicker
                                             [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                             [(ngModel)]="invFormData.voucherDetails.voucherDate"
                                             (focus)="onFocusInvoiceDate()"
@@ -753,7 +802,7 @@
                                 <div class="col-sm-12 col-xl-9 col-lg-8 col-md-9 col-xs-12">
                                     <div class="col-sm-12 col-xl-6 col-lg-10 col-md-10 pl-0">
                                         <input type="text" [placeholder]="giddhDateFormat" #dueDate="ngModel"
-                                            name="dueDate" class="form-control dateinvoice" bsDatepicker
+                                            name="dueDate" class="form-control date-invoice" bsDatepicker
                                             [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                             [(ngModel)]="invFormData.voucherDetails.dueDate"
                                             [class.invalid-inp]="dueDate.errors && (dueDate.dirty || dueDate.touched)" />
@@ -809,7 +858,7 @@
                                 </div>
 
                                 <!-- endregion -->
-                                <div class="row mt-1 "
+                                <div class="row mt-1"
                                     *ngIf="(isSalesInvoice || isCashInvoice) && invFormData.touristSchemeApplicable ">
                                     <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                                         <label>Passport Number</label>
@@ -839,7 +888,7 @@
             <ng-container>
 
                 <!-- region normal view -->
-                <section class="staticInvoiceTable salseInvoicetable clearfix mr-b2 whiteBg container-fluid ng-tns-c8-0"
+                <section class="static-invoice-table sales-invoice-table clearfix mr-b2 white-bg container-fluid ng-tns-c8-0"
                     *ngIf="!isMobileScreen">
 
                     <ng-container
@@ -847,7 +896,7 @@
                         <!-- switch currency on click, remaining functional work , UI is completed -->
                         <div class="switch-currency" *ngIf="isMulticurrencyAccount && !showSwitchedCurr">
                             <span class="left-currency">1 {{companyCurrencyName}}</span>
-                            <img class="switchIcon" src="assets/images/switch-icon.svg" alt="switch-icon"
+                            <img class="switch-icon" src="assets/images/switch-icon.svg" alt="switch-icon"
                                 (click)="switchCurrencyImg(true)">
                             <span class="right-currency">
                                 <span class="currency-digits"
@@ -869,7 +918,7 @@
                         <!-- switch currency on click, remaining functional work , UI is completed -->
                         <div class="switch-currency" *ngIf="isMulticurrencyAccount && showSwitchedCurr">
                             <span class="left-currency">1 {{companyCurrency}}</span>
-                            <img class="switchIcon" src="assets/images/switch-icon.svg" alt="switch-icon"
+                            <img class="switch-icon" src="assets/images/switch-icon.svg" alt="switch-icon"
                                 (click)="switchCurrencyImg(false)">
                             <span class="right-currency">
                                 <span class="currency-digits"
@@ -892,7 +941,7 @@
                         <thead>
                             <tr>
                                 <th *ngFor="let item of theadArrReadOnly;" [hidden]="!item.display"
-                                    class="theadOfSalesInvoice" [ngClass]="item.label">
+                                    class="thead-sales-invoice" [ngClass]="item.label">
                                     {{item.label}} <span *ngIf="item.label === 'Tax' && isRcmEntry">(RCM)<sup
                                             class="mandatory-asterisk">*</sup></span>
                                 </th>
@@ -907,13 +956,13 @@
                                 <!-- region static entries-->
                                 <tr (click)="setActiveIndx(entryIdx);$event.stopPropagation()"
                                     [hidden]="activeIndx === entryIdx" class="entriesTr set-active"
-                                    [ngClass]="{'isOtherTax' : entry.isOtherTaxApplicable && isMulticurrencyAccount}">
+                                    [ngClass]="{'is-other-tax' : entry.isOtherTaxApplicable && isMulticurrencyAccount}">
 
                                     <td>{{ entryIdx + 1 }}</td>
 
                                     <td>
-                                        <div class="productName">
-                                            <label *ngIf="!transaction.accountName" class="selectAccountLabel">Click to
+                                        <div class="product-name">
+                                            <label *ngIf="!transaction.accountName" class="select-account-label">Click to
                                                 Select
                                                 Account</label> {{transaction.accountName}}
                                             <span
@@ -922,23 +971,23 @@
 
                                         </div>
 
-                                        <div class="skuNumber">
+                                        <div class="sku-number">
                                             <label>SKU:</label>Number
                                         </div>
 
-                                        <div class="discription">
+                                        <div class="description">
                                             {{transaction.description}}
 
                                         </div>
-                                        <p class="small text-muted sku_and_customfields"
+                                        <p class="small text-muted sku-and-custom-fields"
                                             *ngIf="transaction.sku_and_customfields">
                                             {{transaction.sku_and_customfields}}</p>
-                                        <div class="dateHsnCode">
+                                        <div class="date-hsn-code">
 
                                             <div class="row">
 
-                                                <div class="col-6 col-sm-6 pdR0" *ngIf="entry.entryDate">
-                                                    <div class="entryDate">
+                                                <div class="col-6 col-sm-6 pr-0" *ngIf="entry.entryDate">
+                                                    <div class="entry-date">
                                                         <label>Entry Date: </label>
                                                         {{entry.entryDate | date: 'dd-MM-yyyy'}}
                                                         <span class="edit-icon cp" *ngIf="!isUpdateMode">
@@ -948,9 +997,9 @@
                                                     </div>
                                                 </div>
 
-                                                <div class="col-6 col-sm-6 pdL0"
+                                                <div class="col-6 col-sm-6 pl-0"
                                                     *ngIf="transaction.hsnNumber || transaction.sacNumber">
-                                                    <div class="hsnCode text-right">
+                                                    <div class="hsn-code text-right">
                                                         <label>HSN/SAC:</label>
                                                         <span>
                                                             {{(inventorySettings?.manageInventory || !transaction.sacNumberExists) ? transaction.hsnNumber : transaction.sacNumber}}
@@ -968,10 +1017,10 @@
                                             {{transaction.quantity | giddhCurrency}} {{transaction.stockUnit}}
                                         </div>
                                     </td>
-                                    <td class="text-right tra-rate item-rate " style="height:1px;">
+                                    <td class="text-right trans-rate item-rate height-rate">
                                         <div *ngIf="transaction.rate > 0 || transaction.isStockTxn">
                                             <div class="td-wrapper">
-                                                <div style="flex: 1;">
+                                                <div class="flex-fill">
                                                     <div class="wrap-td-data"> <span
                                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">
                                                             {{invFormData.accountDetails.currencySymbol}}</span>
@@ -988,9 +1037,9 @@
                                             </div>
                                         </div>
                                     </td>
-                                    <td class="text-right  item-amount" style="height:1px;">
+                                    <td class="text-right item-amount height-rate">
                                         <div class="td-wrapper">
-                                            <div style="flex: 1;">
+                                            <div class="flex-fill">
                                                 <div class="wrap-td-data"><span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}
                                                     </span>{{transaction.amount | giddhCurrency}}</div>
@@ -1003,10 +1052,10 @@
                                             <span *ngIf="transaction.isStockTxn">{{(transaction.quantity * ((transaction.rate * exchangeRate) ? transaction.rate * exchangeRate : 0)) | giddhCurrency}}</span>
                                         </div>
                                     </td>
-                                    <td class="item-discount" style="height:1px;">
-                                        <div class=" text-right td-wrapper">
+                                    <td class="item-discount">
+                                        <div class="text-right td-wrapper">
 
-                                            <div style="flex: 1;">
+                                            <div class="flex-fill">
                                                 <div class="wrap-td-data"> <span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}
                                                     </span>{{ entry.discountSum | giddhCurrency}}</div>
@@ -1019,10 +1068,9 @@
                                         </div>
 
                                     </td>
-                                    <td [class.error-box]="transaction.requiredTax" class="text-right item-tax"
-                                        style="height:1px;" (focus)="transaction.requiredTax = false;">
+                                    <td [class.error-box]="transaction.requiredTax" class="text-right item-tax" (focus)="transaction.requiredTax = false;">
                                         <div class="td-wrapper">
-                                            <div style="flex:1;">
+                                            <div class="flex-fill">
                                                 <div class="wrap-td-data"><span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}
                                                     </span>{{(entry.taxSum + entry.cessSum) | giddhCurrency}}</div>
@@ -1034,9 +1082,9 @@
                                             <span>{{(entry.taxSum + entry.cessSum) * exchangeRate | giddhCurrency}}</span>
                                         </div>
                                     </td>
-                                    <td class="text-right item-tax delete-btn-absolute" style="height:1px;">
+                                    <td class="text-right item-tax delete-btn-absolute">
                                         <div class="td-wrapper">
-                                            <div style="flex:1;">
+                                            <div class="flex-fill">
                                                 <div class="wrap-td-data">
                                                     <span><span
                                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}
@@ -1048,7 +1096,7 @@
                                                         </span>{{ entry.otherTaxSum | giddhCurrency}}
                                                     </span>
                                                 </div>
-                                                <div class="texIncurrency"
+                                                <div class="tax-in-currency"
                                                     *ngIf="entry.isOtherTaxApplicable && isMulticurrencyAccount && !isPurchaseInvoice">
                                                     {{ entry.otherTaxModal?.appliedOtherTax?.name }} :
                                                     <span>{{baseCurrencySymbol}}</span>
@@ -1075,12 +1123,12 @@
 
                                 <!-- region dynamic entries-->
                                 <!-- added new element in td which is content amount element class is 'differ-currency' (multicurrency feature)-->
-                                <tr [hidden]="activeIndx !== entryIdx" class="entriesTr defaultActive"
+                                <tr [hidden]="activeIndx !== entryIdx" class="entriesTr default-active"
                                     (click)="$event.stopPropagation();">
                                     <td (click)="closeDiscountPopup(); closeTaxControlPopup();">{{ entryIdx + 1 }}</td>
                                     <td (click)="closeDiscountPopup(); closeTaxControlPopup();">
 
-                                        <div class="productName">
+                                        <div class="product-name">
                                             <div class="ng-select-wrap">
                                                 <sh-select [options]="salesAccounts$ | async" #selectAccount
                                                     [(ngModel)]="transaction.fakeAccForSelect2"
@@ -1121,25 +1169,25 @@
                                         </div>
 
                                         <div *ngIf="transaction.fakeAccForSelect2">
-                                            <div class="skuNumber">
+                                            <div class="sku-number">
                                                 <label>SKU:</label>Number
                                             </div>
 
-                                            <div class="discription">
+                                            <div class="description">
                                                 <textarea type="text" placeholder="Add Description"
                                                     name="transaction.description_{{entryIdx}}" class="form-control"
                                                     [(ngModel)]="transaction.description" #description>
                                                 </textarea>
-                                                <p class="small text-muted sku_and_customfields"
+                                                <p class="small text-muted sku-and-custom-fields"
                                                     *ngIf="transaction.sku_and_customfields">
                                                     {{transaction.sku_and_customfields}}</p>
                                             </div>
 
                                             <!-- region entry date/ hsncode -->
-                                            <div class="dateHsnCode">
+                                            <div class="date-hsn-code">
                                                 <div class="row">
-                                                    <div class="col-6 col-sm-6 pdR0">
-                                                        <div class="entryDate">
+                                                    <div class="col-6 col-sm-6 pr-0">
+                                                        <div class="entry-date">
                                                             <label>Entry Date: </label>
                                                             <span *ngIf="!isUpdateMode">
                                                                 <input type="text" [placeholder]="giddhDateFormat"
@@ -1165,16 +1213,16 @@
                                                         </div>
                                                     </div>
 
-                                                    <div class="col-6 col-sm-6 pdL0">
-                                                        <div class="wrap-hsnBox">
-                                                            <div class="hsnCode text-right"
+                                                    <div class="col-6 col-sm-6 pl-0">
+                                                        <div class="wrap-hsn-box">
+                                                            <div class="hsn-code text-right"
                                                                 (click)="toggleHsnSacDropDown(transaction)">
                                                                 <label>HSN/SAC:</label>
                                                                 <span>
                                                                     {{(inventorySettings?.manageInventory || !transaction.sacNumber) ? transaction.hsnNumber : transaction.sacNumber }}
                                                                     <span
                                                                         *ngIf="!transaction.hsnNumber && !transaction.sacNumber"
-                                                                        class="updateText">Update
+                                                                        class="update-text">Update
                                                                     </span>
                                                                     <span class="edit-icon cp">
                                                                         <img src="assets/images/edit-pencilicon.svg">
@@ -1196,7 +1244,7 @@
                                                                     [(ngModel)]="transaction.sacNumber" />
                                                                 <a>
                                                                 </a>
-                                                                <div class="btngroup m-t-10">
+                                                                <div class="btn-group m-t-10">
                                                                     <button class="btn btn-sm btn-success" type="button"
                                                                         (click)="hsnDropdownShow=!hsnDropdownShow">Save
                                                                     </button>
@@ -1233,10 +1281,10 @@
                                         </select>
                                     </td>
 
-                                    <td (click)="closeDiscountPopup(); closeTaxControlPopup();" class="text-right item-rate" style="height: 1px;">
+                                    <td (click)="closeDiscountPopup(); closeTaxControlPopup();" class="text-right item-rate">
                                         <div class="td-wrapper">
 
-                                            <div style="flex: 1;">
+                                            <div class="flex-fill">
                                                 <input type="text" [disabled]="!transaction.isStockTxn"
                                                     (blur)="calculateStockEntryAmount(transaction);calculateWhenTrxAltered(entry, transaction)"
                                                     placeholder="Rate" name="transaction.rate_{{entryIdx}}"
@@ -1255,9 +1303,9 @@
                                         </div>
                                     </td>
 
-                                    <td (click)="closeDiscountPopup(); closeTaxControlPopup();" class="text-right item-amount" style="height:1px;">
+                                    <td (click)="closeDiscountPopup(); closeTaxControlPopup();" class="text-right item-amount">
                                         <div class="td-wrapper">
-                                            <div style="flex: 1;">
+                                            <div class="flex-fill">
                                                 <input type="text" (blur)="calculateWhenTrxAltered(entry, transaction, true, $event)"
                                                     (click)="transactionAmountClicked(transaction)" placeholder="Amount"
                                                     (input)="checkVoucherEntries()"
@@ -1276,9 +1324,9 @@
                                         </div>
                                     </td>
 
-                                    <td (click)="closeTaxControlPopup();" class="item-discount" style="height:1px;">
+                                    <td (click)="closeTaxControlPopup();" class="item-discount">
                                         <div class="td-wrapper">
-                                            <div class="text-right" style="flex:1;">
+                                            <div class="text-right flex-fill">
                                                 <discount-control-component #discountComponent [discountMenu]="false"
                                                     [discountAccountsDetails]="entry.discounts"
                                                     [discountSum]="entry.discountSum" [showHeaderText]="false"
@@ -1297,16 +1345,16 @@
                                         </div>
                                     </td>
 
-                                    <td (click)="closeDiscountPopup();" class="pos-rel dropdown-container item-tax" style="height:1px;">
+                                    <td (click)="closeDiscountPopup();" class="position-relative dropdown-container item-tax">
                                         <div class="td-wrapper">
-                                            <div class="text-right" style="flex:1;">
+                                            <div class="text-right flex-fill">
                                                 <tax-control #taxControlComponent [taxes]="companyTaxesList" [date]="entry.entryDate"
                                                     [taxRenderData]="entry.taxes"
                                                     [totalForTax]="transaction.taxableValue"
                                                     [applicableTaxes]="transaction.applicableTaxes"
                                                     [exceptTaxTypes]="exceptTaxTypes"
                                                     [allowedSelectionOfAType]="allowedSelectionOfAType"
-                                                    [showHeading]="false" [rootClass]="'salseInvoicetable'"
+                                                    [showHeading]="false" [rootClass]="'sales-invoice-table'"
                                                     (taxAmountSumEvent)="calculateWhenTrxAltered(entry, transaction)"
                                                     (hideOtherPopups)="closeDiscountPopup()"
                                                     [maskInput]="inputMaskFormat"
@@ -1330,7 +1378,7 @@
                                     <td (click)="closeDiscountPopup(); closeTaxControlPopup();" class="text-right item-total delete-btn-absolute">
                                         <div class="td-wrapper">
 
-                                            <div style="flex:1;">
+                                            <div class="flex-fill">
                                                 <input type="text" name="transaction.total_{{entryIdx}}"
                                                     class="form-control text-right" [(ngModel)]="transaction.total"
                                                     decimalDigitsDirective
@@ -1338,8 +1386,8 @@
                                                     [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                                                     (blur)="calculateTransactionValueInclusively(entry, transaction)" />
 
-                                                <div *ngIf="isTcsTdsApplicable" class="wrap-otherTax">
-                                                    <input type="checkbox" class="other-taxes-checkobx"
+                                                <div *ngIf="isTcsTdsApplicable" class="wrap-other-tax">
+                                                    <input type="checkbox" class="other-taxes-checkbox"
                                                         [(ngModel)]="entry.isOtherTaxApplicable"
                                                         (click)="tcsTdsIndex = entryIdx"
                                                         *ngIf="!entry.isOtherTaxApplicable"
@@ -1347,15 +1395,14 @@
                                                         id="entry.isOtherTaxApplicable_{{entryIdx}}"
                                                         (ngModelChange)="toggleOtherTaxesAsidePane(entry.isOtherTaxApplicable, entryIdx)">
                                                     <label for="entry.isOtherTaxApplicable_{{entryIdx}}"
-                                                        *ngIf="!entry.isOtherTaxApplicable" class="otherTaxLable"
-                                                        style="font-size:13px;vertical-align: middle">Other Tax?</label>
+                                                        *ngIf="!entry.isOtherTaxApplicable" class="other-tax-label font-13 align-middle">Other Tax?</label>
                                                 </div>
                                                 <div *ngIf="entry.isOtherTaxApplicable" class="mr-t1">
 
                                                     <span>
 
-                                                        <div style="display: flex;align-items: center">
-                                                            <span style="margin-right: 5px">
+                                                        <div class="d-flex align-items-center">
+                                                            <span class="mr-r05">
                                                                 <a href="javascript: void 0"
                                                                     (click)="toggleOtherTaxesAsidePane(true, entryIdx)">
                                                                     <img src="assets/images/edit-pencilicon.svg">
@@ -1369,15 +1416,14 @@
                                                                 name="entry.otherTaxesSum_{{entryIdx}}" />
                                                         </div>
 
-                                                        <p
-                                                            style="margin-top: 5px; font-size: 12px; text-transform: capitalize; margin-bottom: 20px;">
+                                                        <p class="mr-r05 font-12 text-capitalize mr-b2">
                                                             {{ entry.otherTaxModal?.appliedOtherTax?.name}}</p>
                                                     </span>
 
                                                 </div>
                                             </div>
                                             <div *ngIf="entry.isOtherTaxApplicable && isMulticurrencyAccount && !isPurchaseInvoice"
-                                                class="texIncurrency" style="color:#999;">
+                                                class="tax-in-currency">
                                                 {{ entry.otherTaxModal?.appliedOtherTax?.name }}
                                                 <span>{{baseCurrencySymbol}}</span> :
                                                 <span>{{entry.otherTaxSum * exchangeRate | giddhCurrency}}</span>
@@ -1407,9 +1453,9 @@
                         </tbody>
 
                         <!-- region add bulk items -->
-                        <div class="p-1 aqua-color add-line-bulk-item" style="width: max-content;">
+                        <div class="p-1 aqua-color add-line-bulk-item width-100">
                             <a href="javascript:void 0" (click)="addBlankRow(null)">+ Add New Line</a>
-                            <span style="font-size:14px; color: #c5c5c5;"> | </span>
+                            <span class="font-14 add-bulk-button"> | </span>
                             <a (click)="showBulkItemModal = true; bulkItemsModal.show()" href="javascript:void 0">+ Add
                                 Bulk
                                 Entries</a>
@@ -1433,7 +1479,7 @@
                                                     <div class="ico-head">Other Details</div>
                                                 </div>
 
-                                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pdL3 mr0">
+                                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pd-l3 m-0">
                                                     <div class="row">
                                                     <div class="form-group col-xs-4 col-sm-4 mb-0">
                                                             <giddh-datepicker #shippingDate="ngModel" [placeholder]="templatePlaceholder?.shippedDateLabel" name="shippingDate" [(ngModel)]="invFormData.templateDetails.other.shippingDate" [class.invalid-inp]="shippingDate.errors && (shippingDate.dirty || shippingDate.touched)">
@@ -1479,22 +1525,22 @@
                                         <!-- endregion -->
 
                                         <!-- region note/messages -->
-                                        <div class="pd-t1 pl0 max-600" *ngIf="!isPurchaseInvoice">
+                                        <div class="pd-t1 pl-0 max-600" *ngIf="!isPurchaseInvoice">
 
                                             <label class="mr-b1">Note</label>
-                                            <textarea style="height:120px !important" class="form-control"
+                                            <textarea class="form-control textarea-height"
                                                 name="message2"
                                                 [(ngModel)]="invFormData.templateDetails.other.message2">
                                              </textarea>
                                         </div>
                                         <!-- endregion -->
 
-                                        <div class="pd-t1 pl0 max-600 pos-rel" *ngIf="isPurchaseInvoice">
+                                        <div class="pd-t1 pl-0 max-600 position-relative" *ngIf="isPurchaseInvoice">
 
                                             <label class="mr-b1"><i class="icon-file-path"></i>
                                                 Attachment</label>
 
-                                            <label class="custom-file-label form-control cp pos-rel" for="invoiceFile">
+                                            <label class="custom-file-label form-control cp position-relative" for="invoiceFile">
                                                 <em *ngIf="!selectedFileName && !isFileUploading">Drag/Drop file or
                                                     click here</em>
                                                 <div *ngIf="isFileUploading"
@@ -1518,55 +1564,55 @@
                                 <!-- region total section -->
                                 <td colspan="4">
 
-                                    <section class="tableSec form-group">
+                                    <section class="table-sec form-group">
 
-                                        <div class="tableRow">
-                                            <div class="tableCell">Total Amount</div>
-                                            <div class="tableCell figureCell">
+                                        <div class="table-row">
+                                            <div class="table-cell">Total Amount</div>
+                                            <div class="table-cell figure-cell">
                                                 <span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.subTotal | giddhCurrency}}
                                             </div>
                                         </div>
 
-                                        <div class="tableRow">
-                                            <div class="tableCell">Discount</div>
-                                            <div class="tableCell figureCell">
+                                        <div class="table-row">
+                                            <div class="table-cell">Discount</div>
+                                            <div class="table-cell figure-cell">
                                                 <span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>
                                                 {{invFormData.voucherDetails.totalDiscount * -1 | giddhCurrency}}
                                             </div>
                                         </div>
 
-                                        <div class="tableRow">
-                                            <div class="tableCell">Taxable Value</div>
-                                            <div class="tableCell figureCell">
+                                        <div class="table-row">
+                                            <div class="table-cell">Taxable Value</div>
+                                            <div class="table-cell figure-cell">
                                                 <span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.totalTaxableValue | giddhCurrency}}
                                             </div>
                                         </div>
 
-                                        <div class="tableRow" *ngIf="!excludeTax">
-                                            <div class="tableCell">Tax</div>
-                                            <div class="tableCell figureCell">
+                                        <div class="table-row" *ngIf="!excludeTax">
+                                            <div class="table-cell">Tax</div>
+                                            <div class="table-cell figure-cell">
                                                 <span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.gstTaxesTotal | giddhCurrency}}
                                             </div>
                                         </div>
 
-                                        <div class="tableRow" *ngIf="!excludeTax">
-                                            <div class="tableCell">CESS</div>
-                                            <div class="tableCell figureCell"><span
+                                        <div class="table-row" *ngIf="!excludeTax">
+                                            <div class="table-cell">CESS</div>
+                                            <div class="table-cell figure-cell"><span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.cessTotal | giddhCurrency}}
                                             </div>
                                         </div>
-                                        <div class="tableRow"
+                                        <div class="table-row"
                                             *ngIf="(calculatedRoundOff > 0 || calculatedRoundOff < 0)">
 
-                                            <div class="tableCell">
+                                            <div class="table-cell">
                                                 <strong>Round Off</strong>
                                             </div>
 
-                                            <div class="tableCell figureCell">
+                                            <div class="table-cell figure-cell">
                                                 <strong> <span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>
                                                     {{calculatedRoundOff | giddhCurrency}}</strong>
@@ -1574,14 +1620,14 @@
 
                                         </div>
 
-                                        <div class="tableRow ">
+                                        <div class="table-row ">
 
-                                            <div class="tableCell bigger-dollar">
+                                            <div class="table-cell bigger-dollar">
                                                 <strong>Total <span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span></strong>
                                             </div>
 
-                                            <div class="tableCell figureCell">
+                                            <div class="table-cell figure-cell">
                                                 <strong><span
                                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.grandTotal | giddhCurrency}}
                                                 </strong>
@@ -1589,13 +1635,13 @@
 
                                         </div>
                                         <!-- multicurrency feature (editable grand total make it functional) -->
-                                        <div class="tableRow" *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">
-                                            <div class="tableCell bigger-dollar">
+                                        <div class="table-row" *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">
+                                            <div class="table-cell bigger-dollar">
                                                 <strong>Total <span>{{baseCurrencySymbol}}</span>
                                                 </strong>
                                             </div>
 
-                                            <div class="tableCell figureCell">
+                                            <div class="table-cell figure-cell">
                                                 <input #grandTotalInr type="text" class="form-control"
                                                     name="grandTotalMulDum" [prefix]="baseCurrencySymbol"
                                                     [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
@@ -1605,25 +1651,25 @@
                                             </div>
                                         </div>
 
-                                        <div class="tableRow" *ngIf="invFormData.voucherDetails.tcsTotal > 0">
-                                            <div class="tableCell">TCS</div>
-                                            <div class="tableCell figureCell"><span
+                                        <div class="table-row" *ngIf="invFormData.voucherDetails.tcsTotal > 0">
+                                            <div class="table-cell">TCS</div>
+                                            <div class="table-cell figure-cell"><span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>
                                                 {{invFormData.voucherDetails.tcsTotal | giddhCurrency}}</div>
                                         </div>
 
-                                        <div class="tableRow" *ngIf="invFormData.voucherDetails.tdsTotal > 0">
-                                            <div class="tableCell">TDS</div>
-                                            <div class="tableCell figureCell"><span
+                                        <div class="table-row" *ngIf="invFormData.voucherDetails.tdsTotal > 0">
+                                            <div class="table-cell">TDS</div>
+                                            <div class="table-cell figure-cell"><span
                                                     *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.tdsTotal | giddhCurrency}}
                                             </div>
                                         </div>
 
                                         <!--region balance due for non-purchase-->
-                                        <div class="tableRow"
+                                        <div class="table-row"
                                             *ngIf="((isSalesInvoice || isCashInvoice)) && !(isPendingVoucherType && isCashInvoice) && !(!(isAccountHaveAdvanceReceipts || isInvoiceAdjustedWithAdvanceReceipts) && isUpdateMode)">
 
-                                            <div class="tableCell deposit-section">
+                                            <div class="table-cell deposit-section">
 
                                                 <div class="btn-group">
 
@@ -1635,12 +1681,12 @@
                                                                 *ngIf="isSalesInvoice && (isAccountHaveAdvanceReceipts || isInvoiceAdjustedWithAdvanceReceipts)">
                                                                 <li role="menuitem" class="mr-t1 ">
                                                                     <div
-                                                                        class="clearfix paymentMode deposit-payment-mode">
+                                                                        class="clearfix payment-mode deposit-payment-mode">
 
-                                                                        <div class="pull-right balanceDueText">
-                                                                            <div class="clearfix mb-1 text-left">
-                                                                                <span class="pd0 mr-2 d-inline-block">
-                                                                                    <input class="radio-custom cp ml0"
+                                                                        <div class="pull-right balance-due-text">
+                                                                            <div class="clearfix mr-b1 text-left">
+                                                                                <span class="p-0 mr-2 d-inline-block">
+                                                                                    <input class="radio-custom cp ml-0"
                                                                                         name="advanceReceipt"
                                                                                         [value]="false"
                                                                                         name="isAdjustAmount"
@@ -1652,8 +1698,8 @@
                                                                                         for="adjustAmountNo"
                                                                                         (click)="clickAdjustAmount(false)">No</label>
                                                                                 </span>
-                                                                                <span class="pd0 d-inline-block">
-                                                                                    <input class="radio-custom cp ml0"
+                                                                                <span class="p-0 d-inline-block">
+                                                                                    <input class="radio-custom cp ml-0"
                                                                                         name="advanceReceipt"
                                                                                         [value]="true"
                                                                                         name="isAdjustAmount"
@@ -1689,7 +1735,7 @@
 
                                                             <ng-container *ngIf="!isUpdateMode">
                                                                 <li role="menuitem" class="mr-t1 ">
-                                                                    <div class="clearfix paymentMode">
+                                                                    <div class="clearfix payment-mode">
 
                                                                         <sh-select class="pull-right "
                                                                             name="depositAccountUniqueName"
@@ -1705,8 +1751,7 @@
                                                                             <ng-template #optionTemplate1
                                                                                 let-option="option">
                                                                                 <a href="javascript:void(0)"
-                                                                                    class="list-item"
-                                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                                    class="list-item">
                                                                                     <div class="item">{{ option.label }}
                                                                                     </div>
                                                                                     <div class="item-unique">
@@ -1722,7 +1767,7 @@
                                                                 <li class="clearfix mr-t1 d-flex align-items-center payment-mode-amount" *ngIf="isSalesInvoice">
                                                                     <input type="text" (blur)="calculateBalanceDue()"
                                                                         placeholder="Amount" name="dueAmount"
-                                                                        class="form-control amountField text-right pull-right max100"
+                                                                        class="form-control amount-field text-right pull-right max100"
                                                                         [(ngModel)]="depositAmount"
                                                                         [prefix]="depositCurrSymbol"
                                                                         [suffix]="selectedSuffixForCurrency"
@@ -1732,7 +1777,7 @@
 
                                                                 <li class="clearfix mr-t1  d-flex align-items-center payment-mode-amount" *ngIf="isCashInvoice">
                                                                     <span
-                                                                        class="amountField pull-right max100 amountFiledCash">
+                                                                        class="amount-field pull-right max100 amount-filed-cash">
                                                                         <span
                                                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span> {{invFormData.voucherDetails.balanceDue
                                                 | giddhCurrency}}</span>
@@ -1741,7 +1786,7 @@
 
                                                                 <li class="clearfix mr-t1 bigger-dollar"
                                                                     *ngIf="isSalesInvoice ">
-                                                                    <strong class="pull-right balanceDueText"> <span
+                                                                    <strong class="pull-right balance-due-text"> <span
                                                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>
                                                                         <ng-container
                                                                             *ngIf="adjustPaymentData?.totalAdjustedAmount">
@@ -1764,11 +1809,11 @@
                                         <!--endregion-->
 
                                         <!-- region balance due for purchase -->
-                                        <div class="tableRow" *ngIf="isPurchaseInvoice">
-                                            <div class="tableCell">
+                                        <div class="table-row" *ngIf="isPurchaseInvoice">
+                                            <div class="table-cell">
                                                 <strong>Balance Due</strong>
                                             </div>
-                                            <div class="tableCell figureCell">
+                                            <div class="table-cell figure-cell">
                                                 <strong>{{invFormData.voucherDetails.balanceDue | giddhCurrency}}</strong>
                                             </div>
                                         </div>
@@ -1791,13 +1836,13 @@
                         *ngFor="let entry of invFormData.entries; let entryIdx = index; let first = first; let last = last">
                         <ng-container *ngFor="let transaction of entry.transactions;">
                             <!-- region static entry -->
-                            <div class="card-invoiceTable" [hidden]="activeIndx === entryIdx">
+                            <div class="card-invoice-table" [hidden]="activeIndx === entryIdx">
                                 <div class="row">
-                                    <div class="col-xs-12 col-sm-12">
+                                    <div class="col-sm-12">
                                         <div class="single-card-row">
-                                            <div class="productName">
+                                            <div class="product-name">
                                                 <label class="card-label">Product/Service Description</label>
-                                                <label *ngIf="!transaction.accountName" class="selectAccountLabel">Click
+                                                <label *ngIf="!transaction.accountName" class="select-account-label">Click
                                                     to Select
                                                     Account</label>
                                                 <p>{{transaction.accountName}}</p>
@@ -1805,24 +1850,24 @@
                                                     )</span>
                                             </div>
 
-                                            <p class="discription">
+                                            <p class="description">
                                                 {{transaction.description}}
                                             </p>
-                                            <p class="small text-muted sku_and_customfields" *ngIf="transaction.sku_and_customfields">
+                                            <p class="small text-muted sku-and-custom-fields" *ngIf="transaction.sku_and_customfields">
                                                 {{transaction.sku_and_customfields}}</p>
 
-                                            <div class="dateHsnCode pdR0">
+                                            <div class="date-hsn-code pr-0">
                                                 <div class="row">
 
-                                                    <div class="col-xs-6 col-sm-6" *ngIf="entry.entryDate">
-                                                        <div class="entryDate">
+                                                    <div class="col-sm-6" *ngIf="entry.entryDate">
+                                                        <div class="entry-date">
                                                             <label>Entry Date: {{entry.entryDate | date: 'dd-MM-yyyy'}}
                                                             </label>
                                                         </div>
                                                     </div>
 
-                                                    <div class="col-xs-6 col-sm-6 pdL0" *ngIf="transaction.hsnNumber || transaction.sacNumber">
-                                                        <div class="hsnCode text-right">
+                                                    <div class="col-sm-6 pl-0" *ngIf="transaction.hsnNumber || transaction.sacNumber">
+                                                        <div class="hsn-code text-right">
                                                             <label>HSN/SAC:
                                                                 {{(inventorySettings?.manageInventory || !transaction.sacNumberExists) ? transaction.hsnNumber : transaction.sacNumber}}</label>
                                                         </div>
@@ -1834,7 +1879,7 @@
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="qty-unit">
                                                 <label class="card-label">Qty/Unit</label>
@@ -1844,7 +1889,7 @@
 
                                     </div>
 
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="card-rate">
                                                 <label class="card-label">Rate</label>
@@ -1865,7 +1910,7 @@
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="card-amount">
                                                 <label class="card-label">Amount</label>
@@ -1882,7 +1927,7 @@
                                         </div>
                                     </div>
 
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="card-discount">
                                                 <label class="card-label">Discount</label>
@@ -1899,7 +1944,7 @@
                                 </div>
 
                                 <div class="row">
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="card-tax">
                                                 <label class="card-label">Tax</label>
@@ -1914,7 +1959,7 @@
                                         </div>
                                     </div>
 
-                                    <div class="col-xs-6 col-sm-6">
+                                    <div class="col-sm-6">
                                         <div class="single-card-row">
                                             <div class="card-total">
                                                 <label class="card-label">Total</label>
@@ -1943,13 +1988,13 @@
                             <!-- endregion -->
 
                             <!-- region dynamic entry -->
-                            <div class="card-invoiceTable edit-card-invoiceTable" [hidden]="activeIndx !== entryIdx">
+                            <div class="card-invoice-table edit-card-invoice-table" [hidden]="activeIndx !== entryIdx">
                                 <div class="row">
-                                    <div class="col-xs-12 col-sm-12">
+                                    <div class="col-sm-12">
                                         <div class="single-card-row">
-                                            <div class="productName">
+                                            <div class="product-name">
                                                 <label class="card-label">Product/Service Description</label>
-                                                <div class="productName">
+                                                <div class="product-name">
                                                     <div class="ng-select-wrap">
                                                         <sh-select [options]="salesAccounts$ | async"
                                                             [(ngModel)]="transaction.fakeAccForSelect2"
@@ -1989,26 +2034,26 @@
                                                 </div>
 
                                                 <div *ngIf="transaction.fakeAccForSelect2">
-                                                    <div class="skuNumber">
+                                                    <div class="sku-number">
                                                         <label>SKU:</label>Number
                                                     </div>
 
-                                                    <div class="discription">
+                                                    <div class="description">
                                                         <textarea type="text" placeholder="Add Description"
                                                             name="transaction.description_{{entryIdx}}" class="form-control"
                                                             [(ngModel)]="transaction.description">
                                                           </textarea>
-                                                        <p class="small text-muted sku_and_customfields"
+                                                        <p class="small text-muted sku-and-custom-fields"
                                                             *ngIf="transaction.sku_and_customfields">
                                                             {{transaction.sku_and_customfields}}</p>
                                                     </div>
 
                                                     <!-- region entry date/ hsncode -->
-                                                    <div class="dateHsnCode">
+                                                    <div class="date-hsn-code">
 
                                                         <div class="row">
-                                                            <div class="col-xs-6 col-sm-6 pdR0">
-                                                                <div class="entryDate">
+                                                            <div class="col-xs-6 col-sm-6 pr-0">
+                                                                <div class="entry-date">
                                                                     <label>Entry Date: </label>
 
                                                                     <span *ngIf="!isUpdateMode">
@@ -2034,16 +2079,16 @@
                                                                 </div>
                                                             </div>
 
-                                                            <div class="col-xs-6 col-sm-6 pdL0">
-                                                                <div class="wrap-hsnBox">
-                                                                    <div class="hsnCode text-right"
+                                                            <div class="col-xs-6 col-sm-6 pl-0">
+                                                                <div class="wrap-hsn-box">
+                                                                    <div class="hsn-code text-right"
                                                                         (click)="toggleHsnSacDropDown(transaction)">
                                                                         <label>HSN/SAC:</label>
                                                                         <span>
                                                                             {{(inventorySettings?.manageInventory || !transaction.sacNumber) ? transaction.hsnNumber : transaction.sacNumber }}
                                                                             <span
                                                                                 *ngIf="!transaction.hsnNumber && !transaction.sacNumber"
-                                                                                class="updateText">Update
+                                                                                class="update-text">Update
                                                                             </span>
                                                                             <span class="edit-icon cp">
                                                                                 <img src="assets/images/edit-pencilicon.svg">
@@ -2063,7 +2108,7 @@
                                                                             [(ngModel)]="transaction.sacNumber" />
                                                                         <a>
                                                                         </a>
-                                                                        <div class="btngroup m-t-10">
+                                                                        <div class="btn-group m-t-10">
                                                                             <button class="btn btn-sm btn-success" type="button"
                                                                                 (click)="hsnDropdownShow=!hsnDropdownShow">
                                                                                 Save
@@ -2088,7 +2133,7 @@
                                     </div>
                                 </div>
 
-                                <div class="row quantityUnitW100">
+                                <div class="row quantity-unit-w100">
                                     <div class="col-xs-6 col-sm-6">
 
                                         <div class="single-card-row">
@@ -2128,7 +2173,7 @@
 
                                             <div class="card-rate">
                                                 <label class="card-label text-right">Rate</label>
-                                                <div style="flex: 1;">
+                                                <div class="flex-fill">
                                                     <input type="text" [disabled]="!transaction.isStockTxn"
                                                         (blur)="calculateStockEntryAmount(transaction);calculateWhenTrxAltered(entry, transaction, false, $event)"
                                                         placeholder="Rate" name="transaction.rate_{{entryIdx}}"
@@ -2158,7 +2203,7 @@
                                             <div class="card-amount">
 
                                                 <label class="card-label text-right">Amount</label>
-                                                <div style="flex: 1;">
+                                                <div class="flex-fill">
 
                                                     <input type="tel" (blur)="calculateWhenTrxAltered(entry, transaction, true, $event)" (input)="checkVoucherEntries()"
                                                         (click)="transactionAmountClicked(transaction)" placeholder="Amount"
@@ -2183,7 +2228,7 @@
 
                                             <div class="card-discount">
                                                 <label class="card-label text-right">Discount</label>
-                                                <div class="text-right" style="flex:1;">
+                                                <div class="text-right flex-fill">
 
                                                     <discount-control-component #discountComponent [discountMenu]="false"
                                                         [discountAccountsDetails]="entry.discounts" [discountSum]="entry.discountSum"
@@ -2213,13 +2258,13 @@
                                             <div class="card-tax">
                                                 <label class="card-label text-right">Tax</label>
 
-                                                <div class="text-right" style="flex:1;">
+                                                <div class="text-right flex-fill">
                                                     <tax-control #taxControlComponent [taxes]="companyTaxesList" [date]="entry.entryDate"
                                                         [taxRenderData]="entry.taxes" [totalForTax]="transaction.taxableValue"
                                                         [applicableTaxes]="transaction.applicableTaxes"
                                                         [exceptTaxTypes]="exceptTaxTypes"
                                                         [allowedSelectionOfAType]="allowedSelectionOfAType" [showHeading]="false"
-                                                        [rootClass]="'salseInvoicetable'"
+                                                        [rootClass]="'sales-invoice-table'"
                                                         (taxAmountSumEvent)="calculateWhenTrxAltered(entry, transaction)"
                                                         (hideOtherPopups)="closeDiscountPopup()" [maskInput]="inputMaskFormat"
                                                         [prefixInput]="invFormData.accountDetails.currencySymbol"
@@ -2239,7 +2284,7 @@
                                         <div class="single-card-row">
                                             <div class="card-total">
                                                 <label class="card-label text-right">Total</label>
-                                                <div style="flex:1;">
+                                                <div class="flex-fill">
                                                     <input type="tel" name="transaction.total_{{entryIdx}}"
                                                         class="form-control text-right"
                                                         (blur)="calculateTransactionValueInclusively(entry, transaction)"
@@ -2247,24 +2292,23 @@
                                                         [prefix]="invFormData.accountDetails.currencySymbol"
                                                         [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat" />
 
-                                                    <div *ngIf="isTcsTdsApplicable" class="wrap-otherTax">
-                                                        <input type="checkbox" class="other-taxes-checkobx"
+                                                    <div *ngIf="isTcsTdsApplicable" class="wrap-other-tax">
+                                                        <input type="checkbox" class="other-taxes-checkbox"
                                                             [(ngModel)]="entry.isOtherTaxApplicable" *ngIf="!entry.isOtherTaxApplicable"
                                                             (click)="tcsTdsIndex = entryIdx"
                                                             name="entry.isOtherTaxApplicable_{{entryIdx}}"
                                                             id="entry.isOtherTaxApplicable_{{entryIdx}}"
                                                             (ngModelChange)="toggleOtherTaxesAsidePane(entry.isOtherTaxApplicable, entryIdx)">
                                                         <label for="entry.isOtherTaxApplicable_{{entryIdx}}"
-                                                            *ngIf="!entry.isOtherTaxApplicable" class="otherTaxLable"
-                                                            style="font-size:13px;vertical-align: middle">Other
+                                                            *ngIf="!entry.isOtherTaxApplicable" class="other-tax-label font-13 align-middle">Other
                                                             Tax?</label>
                                                     </div>
-                                                    <div *ngIf="entry.isOtherTaxApplicable" class="mr-t1 othertaxes">
+                                                    <div *ngIf="entry.isOtherTaxApplicable" class="mr-t1 other-taxes">
 
                                                         <span>
 
-                                                            <div style="display: flex;align-items: center">
-                                                                <span style="margin-right: 5px">
+                                                            <div class="d-flex align-items-center">
+                                                                <span class="mr-r05">
                                                                     <a href="javascript: void 0"
                                                                         (click)="toggleOtherTaxesAsidePane(true, entryIdx)">
                                                                         <img src="assets/images/edit-pencilicon.svg">
@@ -2278,15 +2322,14 @@
                                                                     name="entry.otherTaxesSum_{{entryIdx}}" />
                                                             </div>
 
-                                                            <p
-                                                                style="margin-top: 5px; font-size: 12px; text-transform: capitalize; margin-bottom: 20px;">
+                                                            <p class="mr-t05 font-12 text-capitalize mr-b2">
                                                                 {{ entry.otherTaxModal?.appliedOtherTax?.name}}</p>
                                                         </span>
 
                                                     </div>
                                                 </div>
                                                 <div *ngIf="entry.isOtherTaxApplicable && isMulticurrencyAccount && !isPurchaseInvoice"
-                                                    class="texIncurrency" style="color:#999;">
+                                                    class="tax-in-currency">
                                                     {{ entry.otherTaxModal?.appliedOtherTax?.name }}
                                                     <span>{{baseCurrencySymbol}}</span> :
                                                     <span>{{entry.otherTaxSum * exchangeRate | giddhCurrency}}</span>
@@ -2303,7 +2346,7 @@
                                     </div>
                                 </div>
 
-                                <div class="saveCard-data pointer" (click)="handleOutsideClick()">
+                                <div class="save-card-data pointer" (click)="handleOutsideClick()">
                                     <i class="fa fa-floppy-o" aria-hidden="true"></i>
                                 </div>
 
@@ -2333,7 +2376,7 @@
                                     <div class="ico-head">Other Details</div>
                                 </div>
 
-                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600  mr0">
+                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 mr-0">
 
                                     <div class="row">
 
@@ -2382,88 +2425,88 @@
 
                             </div>
 
-                            <div class="pd-t1 pl0 max-600" *ngIf="!isPurchaseInvoice">
+                            <div class="pd-t1 pl-0 max-600" *ngIf="!isPurchaseInvoice">
                                 <label class="mr-b1">Note</label>
-                                <textarea style="height:120px" class="form-control" name="message2"
+                                <textarea rows="3" class="form-control" name="message2"
                                     [(ngModel)]="invFormData.templateDetails.other.message2"></textarea>
                             </div>
 
                         </div>
                     </div>
 
-                    <div class="total-amountDiscription">
+                    <div class="total-amount-description">
 
-                        <section class="tableSec form-group">
+                        <section class="table-sec form-group">
 
-                            <div class="tableRow">
-                                <div class="tableCell">Total Amount</div>
-                                <div class="tableCell figureCell">
+                            <div class="table-row">
+                                <div class="table-cell">Total Amount</div>
+                                <div class="table-cell figure-cell">
                                     <span
                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.subTotal | giddhCurrency}}
                                 </div>
                             </div>
 
-                            <div class="tableRow">
-                                <div class="tableCell">Discount</div>
-                                <div class="tableCell figureCell"><span
+                            <div class="table-row">
+                                <div class="table-cell">Discount</div>
+                                <div class="table-cell figure-cell"><span
                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.totalDiscount * -1 | giddhCurrency}}
                                 </div>
                             </div>
 
-                            <div class="tableRow">
-                                <div class="tableCell">Taxable Value</div>
-                                <div class="tableCell figureCell">
+                            <div class="table-row">
+                                <div class="table-cell">Taxable Value</div>
+                                <div class="table-cell figure-cell">
                                     <span
                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.totalTaxableValue | giddhCurrency}}
                                 </div>
                             </div>
 
-                            <div class="tableRow" *ngIf="!excludeTax">
-                                <div class="tableCell">Tax</div>
-                                <div class="tableCell figureCell"><span
+                            <div class="table-row" *ngIf="!excludeTax">
+                                <div class="table-cell">Tax</div>
+                                <div class="table-cell figure-cell"><span
                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.gstTaxesTotal | giddhCurrency}}
                                 </div>
                             </div>
 
-                            <div class="tableRow" *ngIf="!excludeTax">
-                                <div class="tableCell">CESS</div>
-                                <div class="tableCell figureCell"><span
+                            <div class="table-row" *ngIf="!excludeTax">
+                                <div class="table-cell">CESS</div>
+                                <div class="table-cell figure-cell"><span
                                         *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.cessTotal | giddhCurrency}}
                                 </div>
                             </div>
-                            <div class="tableRow"
+                            <div class="table-row"
                                 *ngIf="(calculatedRoundOff > 0 || calculatedRoundOff < 0)">
 
-                                <div class="tableCell">
+                                <div class="table-cell">
                                     <strong>Round Off</strong>
                                 </div>
 
-                                <div class="tableCell figureCell">
+                                <div class="table-cell figure-cell">
                                     <strong> <span
                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>
                                         {{calculatedRoundOff | giddhCurrency}}</strong>
                                 </div>
 
                             </div>
-                            <div class="tableRow">
-                                <div class="tableCell">
+                            <div class="table-row">
+                                <div class="table-cell">
                                     <strong>Total <span
                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span></strong>
                                 </div>
 
-                                <div class="tableCell figureCell">
+                                <div class="table-cell figure-cell">
                                     <strong><span
                                             *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">{{invFormData.accountDetails.currencySymbol}}</span>{{invFormData.voucherDetails.grandTotal | giddhCurrency}}
                                     </strong>
                                 </div>
                             </div>
-                            <div class="tableRow" *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">
-                                <div class="tableCell bigger-dollar">
+                            <div class="table-row" *ngIf="isMulticurrencyAccount && !isPurchaseInvoice">
+                                <div class="table-cell bigger-dollar">
                                     <strong>Total <span>{{baseCurrencySymbol}}</span>
                                     </strong>
                                 </div>
 
-                                <div class="tableCell figureCell">
+                                <div class="table-cell figure-cell">
                                     <input #grandTotalInr type="text" class="form-control" name="grandTotalMulDum"
                                         [prefix]="baseCurrencySymbol" [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                                         [(ngModel)]="grandTotalMulDum" (blur)="updateExchangeRate(grandTotalInr.value)">
@@ -2471,21 +2514,21 @@
                                 </div>
                             </div>
 
-                            <div class="tableRow" *ngIf="invFormData.voucherDetails.tcsTotal > 0">
-                                <div class="tableCell">TCS</div>
-                                <div class="tableCell figureCell">
+                            <div class="table-row" *ngIf="invFormData.voucherDetails.tcsTotal > 0">
+                                <div class="table-cell">TCS</div>
+                                <div class="table-cell figure-cell">
                                     {{invFormData.voucherDetails.tcsTotal | giddhCurrency}}</div>
                             </div>
 
-                            <div class="tableRow" *ngIf="invFormData.voucherDetails.tdsTotal > 0">
-                                <div class="tableCell">TDS</div>
-                                <div class="tableCell figureCell">
+                            <div class="table-row" *ngIf="invFormData.voucherDetails.tdsTotal > 0">
+                                <div class="table-cell">TDS</div>
+                                <div class="table-cell figure-cell">
                                     {{invFormData.voucherDetails.tdsTotal | giddhCurrency}}</div>
                             </div>
                             <!--region balance due for non-purchase-->
-                            <div class="tableRow" *ngIf="((isSalesInvoice || isCashInvoice) && !isUpdateMode )">
+                            <div class="table-row" *ngIf="((isSalesInvoice || isCashInvoice) && !isUpdateMode )">
 
-                                <div class="tableCell deposit-section">
+                                <div class="table-cell deposit-section">
 
                                     <div class="btn-group">
 
@@ -2496,17 +2539,16 @@
 
 
                                                 <li role="menuitem" class="mr-t1 ">
-                                                    <div class="clearfix paymentMode deposit-payment-mode">
+                                                    <div class="clearfix payment-mode deposit-payment-mode">
 
-                                                        <sh-select class="pull-right " name="depositAccountUniqueName"
+                                                        <sh-select class="pull-right" name="depositAccountUniqueName"
                                                             [options]="bankAccounts$ | async" [(ngModel)]="depositAccountUniqueName"
                                                             (selected)="onSelectPaymentMode($event)" [placeholder]="'Select Account'"
                                                             [notFoundLink]="false" [forceClearReactive]="forceClear$ | async"
                                                             [multiple]="false" [ItemHeight]="33"
                                                             [useInBuiltFilterForIOptionTypeItems]="true" class="text-left">
                                                             <ng-template #optionTemplate1 let-option="option">
-                                                                <a href="javascript:void(0)" class="list-item"
-                                                                    style="border-bottom: 1px solid #ccc;">
+                                                                <a href="javascript:void(0)" class="list-item">
                                                                     <div class="item">{{ option.label }}</div>
                                                                     <div class="item-unique">{{ option.value }}</div>
                                                                 </a>
@@ -2518,14 +2560,14 @@
 
                                                 <li class="clearfix mr-t1  d-flex align-items-center payment-mode-amount" *ngIf="isSalesInvoice">
                                                     <input type="text" (blur)="calculateBalanceDue()" placeholder="Amount"
-                                                        name="dueAmount" class="form-control amountField text-right pull-right max100"
+                                                        name="dueAmount" class="form-control amount-field text-right pull-right max100"
                                                         [(ngModel)]="depositAmount" [prefix]="depositCurrSymbol"
                                                         [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat" />
                                                     <label class="pull-right pt-1">Amount</label>
                                                 </li>
 
                                                 <li class="clearfix mr-t1  d-flex align-items-center payment-mode-amount" *ngIf="isCashInvoice">
-                                                    <span class="amountField pull-right max100 amountFiledCash">
+                                                    <span class="amount-field pull-right max100 amount-filed-cash">
                                                         <span
                                                             *ngIf="isMulticurrencyAccount">{{invFormData.accountDetails.currencySymbol}}</span>
                                                         {{invFormData.voucherDetails.balanceDue | giddhCurrency}}</span>
@@ -2533,7 +2575,7 @@
                                                 </li>
 
                                                 <li class="clearfix mr-t1 bigger-dollar" *ngIf="isSalesInvoice ">
-                                                    <strong class="pull-right balanceDueText"> <span
+                                                    <strong class="pull-right balance-due-text"> <span
                                                             *ngIf="isMulticurrencyAccount">{{invFormData.accountDetails.currencySymbol}}</span>
                                                         {{invFormData.voucherDetails.balanceDue | giddhCurrency}}
                                                     </strong>
@@ -2549,11 +2591,11 @@
                             <!--endregion-->
 
                             <!-- region balance due for purchase -->
-                            <div class="tableRow" *ngIf="isPurchaseInvoice">
-                                <div class="tableCell">
+                            <div class="table-row" *ngIf="isPurchaseInvoice">
+                                <div class="table-cell">
                                     <strong>Balance Due</strong>
                                 </div>
-                                <div class="tableCell figureCell">
+                                <div class="table-cell figure-cell">
                                     <strong>{{invFormData.voucherDetails.balanceDue | giddhCurrency}}</strong>
                                 </div>
                             </div>
@@ -2578,7 +2620,7 @@
                     <div class="col-12">
 
                         <!-- region generate mode -->
-                        <div class="pull-right pr updateMode" *ngIf="!isUpdateMode">
+                        <div class="pull-right pr update-mode" *ngIf="!isUpdateMode">
                             <button type="button" (click)="resetInvoiceForm(invoiceForm)"
                                 class="btn btn-danger d-inline-block v-align-middle">Clear
                             </button>
@@ -2610,7 +2652,7 @@
                                 <div *ngIf="!isCompany" class="btn-group" [dropup]="isDropup" dropdown  [isDisabled]="!hasVoucherEntry">
                                     <button type="button" [disabled]="!hasVoucherEntry"
                                         (click)="doAction(0);triggerSubmitInvoiceForm(invoiceForm, false)"
-                                        class="btn btn-default generateInvoie">Generate
+                                        class="btn btn-default generate-invoice">Generate
                                         <span *ngIf="isCashInvoice; else invoiceTypeDisplayRef">
                                             Cash
                                         </span>
@@ -2767,7 +2809,7 @@
 
     <!-- region gst treatment modal-->
     <ng-template #gstTreatmentModal let-show>
-        <div *ngIf="show" class="gstTreatmentModal">
+        <div *ngIf="show" class="gst-treatment-modal">
             <proforma-gst-treatment-component (closeEvent)="showGstTreatmentModal = false">
             </proforma-gst-treatment-component>
         </div>
@@ -2848,7 +2890,8 @@
                     [isUpdateMode]="isUpdateMode" [depositAmount]="depositAmount" [invoiceFormDetails]="invFormData"
                     [isVoucherModule]="true" [advanceReceiptAdjustmentUpdatedData]="advanceReceiptAdjustmentData"
                     (closeModelEvent)="closeAdvanceReceiptModal()"
-                    (submitClicked)="getAdvanceReceiptAdjustData($event)">
+                    (submitClicked)="getAdvanceReceiptAdjustData($event)"
+                    [voucherForAdjustment]="voucherForAdjustment">
                 </advance-receipt-adjustment-component>
             </div>
         </div>
@@ -2921,7 +2964,7 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
             </div>
             <div class="row">
                 <div class="col-sm-3">
-                    <div class="mb-1">
+                    <div class="mr-b1">
                         <sh-select class="text-left dropdown-arrow" name="adjustmentVoucher" [(ngModel)]="tempDateParams.adjustmentVoucher" [placeholder]="'Select Voucher'" [notFoundLink]="false" [multiple]="false" [ItemHeight]="33">
                             <ng-template #optionTemplate1 let-option="option">
                                 <a href="javascript:void(0)" class="list-item">
@@ -2936,34 +2979,34 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                     </div>
                 </div>
                 <div class="col-sm-3">
-                    <div class="mb-1">
+                    <div class="mr-b1">
                         <input id="name" type="text" class="form-control" placeholder="Enter Amount" [(ngModel)]="tempDateParams.Amount">
                     </div>
                 </div>
                 <div class="col-sm-3">
-                    <div class="mb-1">
+                    <div class="mr-b1">
                         <input id="name" type="text" class="form-control" placeholder="00.00" [(ngModel)]="tempDateParams.Tax" readonly disabled>
                     </div>
                 </div>
                 <div class="col-sm-3">
-                    <a href="javascript:void(0)" class="font-22 text-light pt-05 d-inline-block"><i
+                    <a href="javascript:void(0)" class="font-22 text-light pd-t05 d-inline-block"><i
                             class="icon-trash"></i></a>
                 </div>
             </div>
             <p><a href="javascript:void(0)" class="font-14"><span class="font-16">+</span> Add New Line</a></p>
             <div class="clearfix">
-                <div class="clearfix mb-1 mt-2 row">
+                <div class="clearfix mr-b1 mt-2 row">
                     <div class="col-md-2 col-sm-3 col-xs-5">
                         <span class="d-inline-block font-14">Tax Deducted?</span>
                     </div>
                     <div class="col-md-8 col-sm-8 col-xs-7">
                         <span class="pd0 mr-2 d-inline-block">
-                            <input name="options" class="radio-custom cp ml0" id="deductedNo" [(ngModel)]="options"
+                            <input name="options" class="radio-custom cp ml-0" id="deductedNo" [(ngModel)]="options"
                                 type="radio" [value]="true" [checked]="options" />
                             <label for="deductedNo" class="radio-custom-label">No</label>
                         </span>
                         <span class="pd0 mr-2 d-inline-block">
-                            <input name="options" class="radio-custom cp ml0" [(ngModel)]="options" id="deductedYes"
+                            <input name="options" class="radio-custom cp ml-0" [(ngModel)]="options" id="deductedYes"
                                 type="radio" [value]="false" [checked]="!options" />
                             <label for="deductedYes" class="radio-custom-label">Yes</label>
                         </span>
@@ -2987,7 +3030,7 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                     </div>
                 </div>
                 <div class="mt-4">
-                    <button type="button" class="btn btn-success mrR1" (click)="confirm()">Save</button>
+                    <button type="button" class="btn btn-success mr-r1" (click)="confirm()">Save</button>
                     <button type="button" class="btn btn-cancel" (click)="decline()">Cancel</button>
                 </div>
             </div>
diff --git a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.scss b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.scss
index 72f5191501a..ef428ef6dd6 100644
--- a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.scss
+++ b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.scss
@@ -70,8 +70,8 @@ $greyClr: #6d6d6d;
 }
 
 // common class for extend
-.whiteBg {
-    background-color: white;
+.white-bg {
+    background-color: $white;
 }
 
 .cp {
@@ -95,7 +95,7 @@ $greyClr: #6d6d6d;
     }
 }
 
-.item-unq{
+.item-unique{
     font-size:12px;
 }
 // select box
@@ -134,12 +134,12 @@ $greyClr: #6d6d6d;
         right: 0;
         bottom: 0;
         padding: 0 1em;
-        color: #cccccc;
+        color: $very-light-gray;
         pointer-events: none;
     }
     /* Transition */
     &:hover::after {
-        color: #bbbbbb;
+        color: $silver;
     }
     &::after {
         -webkit-transition: 0.25s all ease;
@@ -167,35 +167,35 @@ $greyClr: #6d6d6d;
         font-weight: 400;
         @include marg(B, 0px);
     }
-    &.size_175 {
+    &.size-175 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 175px;
         }
     }
-    &.size_240 {
+    &.size-240 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 240px;
         }
     }
-    &.size_340 {
+    &.size-340 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 340px;
         }
     }
-    &.size_380 {
+    &.size-380 {
         input:not([type="checkbox"]),
         select,
         textarea {
             width: 380px;
         }
     }
-    &.noMarg {
+    &.no-margin {
         @include marg(A, 0);
     }
     .form-control.voucher-selector {
@@ -229,7 +229,7 @@ $greyClr: #6d6d6d;
         li {
             a {
                 &:hover {
-                    background: #f4f5f8;
+                    background: $solitude;
                 }
             }
         }
@@ -297,32 +297,32 @@ $greyClr: #6d6d6d;
 
 .list-item {
     font-size: 14px;
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
     display:flex !important;
 }
 
-.fs12 {
+.font-12 {
     font-size: 12px;
 }
 
-.fs11 {
+.font-11 {
     font-size: 11px;
 }
 
-.tableSec {
+.table-sec {
     display: table;
     width: 100%;
-    .tableRow {
+    .table-row {
         display: table-row;
         vertical-align: top;
-        .tableCell {
+        .table-cell {
             // line-height: 40px;
             vertical-align: middle;
             text-align: right;
             padding-bottom: 7px;
             display: table-cell;
         }
-        .figureCell {
+        .figure-cell {
             width: 140px;
             padding-right: 0;
             input {
@@ -365,17 +365,17 @@ ng-select.splSales {
     font-weight: 100;
 }
 
-.salesTax .taxInput {
+.sales-tax .tax-input {
     text-align: right;
 }
 
 .billing-address {
-    background: #fff;
-    border: 1px solid #d6d6d6;
+    background: $white;
+    border: 1px solid $gainsboro;
     padding: 5px;
     padding-bottom: 10px;
     &.disabled {
-        background: #eee;
+        background: $whisper-light;
     }
     textarea {
         border: none;
@@ -396,16 +396,16 @@ textarea:focus {
 
 .input-custom {
     border: none;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
-.pl0 {
+.pl-0 {
     padding-left: 0;
 }
 
 .balance-due {
     display: block;
-    color: #6b6c72;
+    color: $dark-gray;
     line-height: 1.2rem;
     font-size: 14px;
     font-weight: 500;
@@ -425,7 +425,7 @@ textarea:focus {
     > thead {
         > tr {
             > th {
-                border: 1px solid #c7c7c7 !important;
+                border: 1px solid $gainsboro !important;
                 padding: 10px 8px;
                 white-space: nowrap;
                 text-align: right;
@@ -454,7 +454,7 @@ textarea:focus {
     > tbody {
         > tr {
             > td {
-                border: 1px solid #c7c7c7 !important;
+                border: 1px solid $gainsboro !important;
                 padding: 10px 8px;
                 white-space: nowrap;
                 position: relative;
@@ -467,7 +467,7 @@ textarea:focus {
                     width: 90px;
                 }
                 &.error-box.item-tax {
-                    border: 2px solid red !important;
+                    border: 2px solid $red !important;
                 }
             }
         }
@@ -492,7 +492,7 @@ textarea:focus {
 }
 
 .disabled {
-    background: #eee;
+    background: $whisper-light;
     pointer-events: none;
     opacity: 0.7;
 }
@@ -505,7 +505,7 @@ textarea:focus {
     z-index: 97;
 }
 
-.search-arrow-image.for_purchase_invoice {
+.search-arrow-image.for-purchase-invoice {
     top: 230px;
 }
 
@@ -515,19 +515,19 @@ textarea:focus {
     top: 50%;
     left: inherit;
     width: 282px;
-    background: #f4f5f8;
+    background: $solitude;
     display: block;
 }
 
 #deposit-dropdown .caret,
 #deposit-dropdown-normal .caret {
-    border-top: 7px dashed #d0d0d3;
+    border-top: 7px dashed $gainsboro;
     border-right: 7px solid transparent;
     border-left: 7px solid transparent;
     right: -15px;
     position: absolute;
     top: 47%;
-    background: #f4f5f8;
+    background: $solitude;
     transform: rotate(-90deg) translateY(-50%);
 }
 
@@ -572,25 +572,25 @@ textarea:focus {
     background: rgba(112, 112, 112, 0.92);
     bottom: 0;
     width: 100%;
-    color: #fff;
+    color: $white;
     padding: 10px;
     text-align: center;
 }
 
 .modal-invoice-footer .btn {
-    background: #a7a7a7;
+    background: $dim-gray;
     font-size: 12px;
     border-radius: 90px;
     padding: 1px 6px;
     vertical-align: middle;
     margin-right: 0px;
     transition: 0.5s all ease;
-    color: #fff;
+    color: $white;
 }
 
 .modal-invoice-footer .btn:hover {
-    background: #229e2b;
-    color: #fff;
+    background: $success-green;
+    color: $white;
 }
 
 .sales-invoice-modal .modal-body perfect-scrollbar {
@@ -602,22 +602,22 @@ textarea:focus {
 }
 
 .modal-invoice-footer ul > li > input:checked + label {
-    background: #229e2b;
-    color: #fff;
+    background: $success-green;
+    color: $white;
 }
 
 // my css
-.add-entryAgainst {
+.add-entry-against {
     display: none;
 }
 
 .other-options {
-    color: #a9a9a9;
+    color: $dim-gray;
     padding-top: 5px;
 }
 
 .other-options a {
-    color: #0c8fe6;
+    color: $primary;
     font-size: 12px;
 }
 
@@ -632,15 +632,15 @@ form label {
 // .billing-address input, .billing-address textarea{
 //     background-color: transparent !important;
 // }
-.billing-address .selectedVal {
+.billing-address .selected-val {
     border: none !important;
     padding-right: 2px !important;
     background-color: transparent !important;
-    border-bottom: 1px solid #c7c7c7 !important;
+    border-bottom: 1px solid $gainsboro !important;
     height: 28px;
 }
 
-input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
+input.form-control.selected-val.cp.bottom-border-only.ng-star-inserted {
     background-color: transparent !important;
     padding-left: 0 !important;
 }
@@ -657,18 +657,18 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
 }
 
 .billing-address
-    input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
+    input.form-control.selected-val.cp.bottom-border-only.ng-star-inserted {
     background: transparent !important;
     padding-left: 0 !important;
 }
 
-.billingaddresFull p {
+.billing-address-full p {
     font-size: 14px;
-    color: #666666;
+    color: $dark-gray;
     margin-bottom: 5px;
 }
 
-.wrappAdress {
+.wrap-address {
     margin-top: 8px;
 }
 
@@ -677,24 +677,24 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
 }
 
 .change-label {
-    color: #0c8fe6;
+    color: $primary;
 }
 
-.wrap-invoiceNumberDetails .form-group {
+.wrap-invoice-number-details .form-group {
     display: block !important;
 }
 
-.wrap-invoiceNumberDetails .invoiceDate {
+.wrap-invoice-number-details .invoice-date {
     max-width: 100% !important;
 }
 
 .bg-white {
-    background-color: #fff;
+    background-color: $white;
     // padding: 10px 0;
     margin: 0 0;
 }
 
-.wrap-inputField {
+.wrap-input-field {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -704,23 +704,23 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
     margin-bottom: 20px;
 }
 
-.discription textarea {
-    border: 1px solid #ccc;
+.description textarea {
+    border: 1px solid $gainsboro;
     width: 100%;
     min-height: 55px;
     margin-top: 10px;
 }
 
-.salseInvoicetable table input[disabled] {
+.sales-invoice-table table input[disabled] {
     cursor: default;
-    background-color: #eeeeee;
-    border: 1px solid #ccc;
+    background-color: $whisper-light;
+    border: 1px solid $gainsboro;
     padding: 5px;
     width: 100%;
     // max-width: 150px;
 }
 
-.salseInvoicetable table.basic td {
+.sales-invoice-table table.basic td {
     vertical-align: top !important;
 }
 
@@ -730,12 +730,12 @@ input[type="text"] {
     height: 36px !important;
 }
 
-a.copyInvoice {
-    color: #3597ec;
+a.copy-invoice {
+    color: $cornflower-blue;
     margin-left: 10px;
 }
 
-a.copyInvoice img {
+a.copy-invoice img {
     margin-right: 6px;
 }
 
@@ -752,19 +752,19 @@ a.copyInvoice img {
     padding: 0;
 }
 .shipping-address textarea {
-    border-bottom: 1px solid #ccc !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .mb-0 {
     margin-bottom: 0 !important;
 }
 
-.entryDate label {
+.entry-date label {
     font-size: 12px;
     display: block;
 }
 
-.entryDate input {
+.entry-date input {
     border: none;
     display: inline-block;
     width: 66px;
@@ -776,26 +776,26 @@ a.copyInvoice img {
     padding-top: 0 !important;
 }
 
-.entryDate input:focus {
+.entry-date input:focus {
     background-color: transparent;
 }
 
-.hsnCode.text-right {
+.hsn-code.text-right {
     padding-top: 3px;
     font-size: 12px;
 }
 
-.hsnCode label {
+.hsn-code label {
     font-size: 12px;
     display: block;
 }
 
-.entryDate {
+.entry-date {
     font-size: 12px;
 }
 
-.skuNumber,
-.skuNumber label {
+.sku-number,
+.sku-number label {
     font-size: 12px !important;
     display: none;
 }
@@ -803,13 +803,13 @@ a.copyInvoice img {
 .add-bulk-items {
     font-size: 12px;
     padding-bottom: 0;
-    color: #0c8fe6;
+    color: $primary;
 }
 
-.otherDetailTable th,
-.otherDetailTable td,
-.otherDetailTable tr,
-.otherDetailTable tbody {
+.other-detail-table th,
+.other-detail-table td,
+.other-detail-table tr,
+.other-detail-table tbody {
     border-top: none !important;
 }
 
@@ -817,7 +817,7 @@ a.copyInvoice img {
     cursor: pointer;
 }
 
-.hsnCode input {
+.hsn-code input {
     display: inline-block !important;
     height: 20px !important;
     border: none;
@@ -829,7 +829,7 @@ a.copyInvoice img {
     background-color: transparent !important;
 }
 
-.salseInvoicetable .form-control {
+.sales-invoice-table .form-control {
     margin-bottom: 5px;
 }
 
@@ -847,18 +847,18 @@ span.edit-icon {
 //     width: 800px !important;
 //     margin: 30px auto;
 // }
-.salseInvoicetable th:nth-child(2) {
+.sales-invoice-table th:nth-child(2) {
     width: 35%;
 }
 
-.wrap-hsnBox {
+.wrap-hsn-box {
     position: relative;
 }
 
 .hsn-code-dropdown {
     position: absolute;
-    background-color: #fff;
-    border: 1px solid #c7c7c7;
+    background-color: $white;
+    border: 1px solid $gainsboro;
     border-radius: 3px;
     width: 100%;
     min-width: 250px;
@@ -881,18 +881,18 @@ span.edit-icon {
     height: 28px !important;
     padding: 5px;
     max-width: 100%;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $gainsboro;
 }
 
 .hsn-code-dropdown input::placeholder,
 .hsn-code-dropdown input::-webkit-input-placeholder {
-    color: #c6c6c6;
+    color: $silver;
 }
 
 .hsn-code-dropdown a {
     display: inline-block;
     text-align: center;
-    color: #cccccc;
+    color: $very-light-gray;
     padding: 5px 8px;
     font-size: 16px;
 }
@@ -902,26 +902,26 @@ span.edit-icon {
 }
 
 .hsn-code-dropdown button.btn.btn-sm.btn-success,
-.bulkItemBtnGroup button.btn.btn-sm.btn-success {
-    background-color: #28ab00;
-    color: #fff;
+.bulk-item-btn-group button.btn.btn-sm.btn-success {
+    background-color: $success-green;
+    color: $white;
 }
 
-.temapletFooter {
+.template-footer {
     position: fixed;
     bottom: 15px;
     width: 100%;
     max-width: 418px;
 }
 
-.updateText {
-    color: #0c8fe6;
+.update-text {
+    color: $primary;
     padding: 0 5px;
 }
 
-.selectAccountLabel {
+.select-account-label {
     font-size: 14px;
-    color: #c7c7c7;
+    color: $silver;
     padding-bottom: 3px;
 }
 
@@ -940,17 +940,17 @@ span.edit-icon {
     height: 15px !important;
 }
 
-.customerInvoiceTable tr,
-.customerInvoiceTable td,
-.customerInvoiceTable tbody {
+.customer-invoice-table tr,
+.customer-invoice-table td,
+.customer-invoice-table tbody {
     border: none !important;
 }
 
-table.table.customerInvoiceTable {
+table.table.customer-invoice-table {
     margin-bottom: 0;
     width: 100%;
 }
-.customerInvoiceTable td {
+.customer-invoice-table td {
     padding: 8px 15px;
 }
 
@@ -958,7 +958,7 @@ table.table.customerInvoiceTable {
     width: 112px !important;
 }
 
-section.staticInvoiceTable {
+section.static-invoice-table {
     padding-top: 20px;
     margin-top: -20px;
 }
@@ -978,7 +978,7 @@ section.staticInvoiceTable {
 }
 
 // redesign in DIV formate css
-// .customerInvoiceTable:nth-child(2) {
+// .customer-invoice-table:nth-child(2) {
 //   padding-top: 10px;
 //   padding-bottom: 10px;
 // }
@@ -986,7 +986,7 @@ section.staticInvoiceTable {
     margin-top: 10px;
 }
 
-.customerInvoiceTable {
+.customer-invoice-table {
     padding-left: 15px;
 }
 
@@ -995,16 +995,16 @@ section.staticInvoiceTable {
     margin-bottom: 5px;
 }
 
-.customerInvoiceTable.bg-white {
+.customer-invoice-table.bg-white {
     margin-top: 10px;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
     margin-bottom: 20px;
 }
 
-// .customerInvoiceTable section.form-inline {
+// .customer-invoice-table section.form-inline {
 //   padding-top: 60px;
 // }
-.customerInvoiceTable section.billing-addressWrap {
+.customer-invoice-table section.billing-address-wrap {
     padding-top: 65px;
 }
 
@@ -1014,30 +1014,30 @@ section.staticInvoiceTable {
 }
 
 // new table css
-section.newtable {
-    background-color: #e5e5e5;
+section.new-table {
+    background-color: $whisper;
     margin-bottom: 30px;
     margin: 0 15px 30px;
 }
 
-.newtable .thead {
-    border-right: 1px solid #c7c7c7;
+.new-table .thead {
+    border-right: 1px solid $gainsboro;
     padding: 8px 10px;
 }
 
-.newtable .thead:first-child {
+.new-table .thead:first-child {
     padding-left: 30px;
 }
 
-.newtable .row > div {
+.new-table .row > div {
     padding: 0;
 }
 
-.customerInvoiceTable label {
+.customer-invoice-table label {
     line-height: 2.3;
 }
 
-.customerInvoiceTable label.sales-country-label {
+.customer-invoice-table label.sales-country-label {
     min-height: 36px;
 }
 
@@ -1049,19 +1049,28 @@ section.newtable {
     max-width: 215px;
 }
 
-.texIncurrency {
+.tax-in-currency {
     margin-bottom: 7px;
-    color: #999 !important;
+    color: $nobel !important;
     white-space: initial;
 }
 
 .pd {
     padding: 3px 5px;
 }
+
+.add-bulk-button{
+    color: $silver;
+}
+
+.textarea-height{
+    height:120px !important;
+}
+
 .card-invoice-table-wrapper,
 .add-btn,
 .other-detail-card,
-.total-amountDiscription {
+.total-amount-description {
     display: none;
 }
 .custom-file-label::after, .dropdown-toggle::after{
@@ -1071,7 +1080,7 @@ section.newtable {
 .card-invoice-table-wrapper {
     max-width: 400px;
     width: 100%;
-    background-color: #fff;
+    background-color: $white;
     margin: 20px 0;
     border-radius: 3px;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
@@ -1089,11 +1098,11 @@ section.newtable {
 }
 
 .single-card-row p {
-    color: #666;
+    color: $dark-gray;
     font-size: 14px;
 }
 
-.card-invoiceTable {
+.card-invoice-table {
     padding: 10px 15px;
     position: relative;
 }
@@ -1102,7 +1111,7 @@ section.newtable {
     position: absolute;
     right: 15px;
     top: 11px;
-    color: #f00;
+    color: $red;
     font-size: 18px;
 }
 
@@ -1122,12 +1131,12 @@ section.newtable {
     padding-right: 10px;
 }
 
-.card-invoiceTable .dateHsnCode {
+.card-invoice-table .date-hsn-code {
     padding-left: 5px;
     padding-right: 5px;
 }
 
-.card-invoiceTable .qty-unit .row {
+.card-invoice-table .qty-unit .row {
     padding-left: 5px;
     padding-right: 5px;
 }
@@ -1136,7 +1145,7 @@ section.newtable {
     max-width: 400px;
     margin: 20px 0;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
+    background-color: $white;
     padding: 15px 20px;
     border-radius: 3px;
 }
@@ -1150,33 +1159,28 @@ section.newtable {
     padding-bottom: 20px;
 }
 
-.total-amountDiscription {
+.total-amount-description {
     max-width: 400px;
     width: 100%;
 }
 
-.total-amountDiscription {
-    max-width: 400px;
-    width: 100%;
-}
-
-.saveCard-data {
+.save-card-data {
     position: absolute;
     top: 11px;
     right: 40px;
-    color: #0c8fe6;
+    color: $primary;
 }
 
 .sales-country-label {
     margin-bottom: 0;
     vertical-align: middle;
     line-height: 2.4;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
     padding-left: 6px;
-    border-bottom-color: rgb(214, 214, 214);
+    border-bottom-color: $gainsboro;
 }
 
-.loaderClass {
+.loader-class {
     height: calc(100% - 150px);
     display: flex;
     justify-content: center;
@@ -1186,99 +1190,99 @@ section.newtable {
 
 /* ADD BULK ITEM */
 
-.addBulkItemmodal.modal-dialog {
+.add-bulk-item-modal.modal-dialog {
     width: 870px !important;
     margin: 30px auto;
 }
 
-.addBulkItemmodal .singleProductWrapper {
+.add-bulk-item-modal .single-product-wrapper {
     margin-bottom: 20px;
 }
 
-.addBulkItemmodal .singleProductWrapper h5 {
-    color: #333333;
+.add-bulk-item-modal .single-product-wrapper h5 {
+    color: $night-rider;
     font-size: 14px;
 }
 
-.addBulkItemmodal .singleProductWrapper p {
+.add-bulk-item-modal .single-product-wrapper p {
     font-size: 12px;
     padding-top: 4px;
 }
 
-.addBulkItemmodal .productList {
+.add-bulk-item-modal .product-list {
     padding-top: 15px;
     height: 600px;
     overflow-y: auto;
 }
 
-.addBulkItemmodal .rightContent span.selectdStockNumber {
+.add-bulk-item-modal .right-content span.selected-stock-number {
     font-size: 20px;
 }
 
-.addBulkItemmodal .rightContent h4 {
+.add-bulk-item-modal .right-content h4 {
     font-size: 14px;
 }
 
-.addBulkItemmodal .rightContent hr {
-    color: black;
-    border-color: #ccc;
+.add-bulk-item-modal .right-content hr {
+    color: $black;
+    border-color: $very-light-gray;
     margin: 10px -15px;
     margin-left: -15px;
 }
 
-.addBulkItemmodal .pl-0 {
+.add-bulk-item-modal .pl-0 {
     padding-left: 0;
 }
 
-.addBulkItemmodal .singleSelectdStock p {
+.add-bulk-item-modal .single-selected-stock p {
     font-size: 14px;
 }
 
-.addBulkItemmodal .wrapSelectedStocks {
+.add-bulk-item-modal .wrap-selected-stocks {
     margin-top: 15px;
 }
 
-.addBulkItemmodal .input-group {
+.add-bulk-item-modal .input-group {
     position: relative;
     display: table;
     border-collapse: separate;
     width: 138px;
 }
 
-.addBulkItemmodal input.form-control.input-number {
+.add-bulk-item-modal input.form-control.input-number {
     width: 60px !important;
     text-align: center;
     height: 28px !important;
 }
 
-.addBulkItemmodal .input-group .input-group-btn .btn {
-    background: #fff;
-    border-left: 1px solid #ccc;
+.add-bulk-item-modal .input-group .input-group-btn .btn {
+    background: $white;
+    border-left: 1px solid $gainsboro;
 }
 
-.addBulkItemmodal .btn {
+.add-bulk-item-modal .btn {
     padding: 3px 13px;
 }
 
-.addBulkItemmodal .input-group-btn .fa {
-    color: #c6c6c6;
+.add-bulk-item-modal .input-group-btn .fa {
+    color: $silver;
 }
 
-.addBulkItemmodal .singleSelectdStock {
+.add-bulk-item-modal .single-selected-stock {
     margin-bottom: 20px;
 }
 
-.addBulkItemmodal .leftContent {
-    border-right: 1px solid #ddd;
+.add-bulk-item-modal .left-content {
+    border-right: 1px solid $gainsboro;
     padding-right: 15px;
 }
 
-.addBulkItemmodal .modal-title {
+.add-bulk-item-modal .modal-title {
     font-size: 22px !important;
-    color: #fff;
+    color: $white;
 }
 
-.table-custom-invoice .salesTax .dropdown-menu-right li label {
+.table-custom-invoice .sales-tax .dropdown-menu-right li label {
     padding-left: 10px;
 }
 
@@ -1289,12 +1293,12 @@ section.newtable {
     z-index: 10;
 }
 
-.gstTreatmentModal {
+.gst-treatment-modal {
     min-width: 240px;
     position: absolute;
     top: 60px;
     z-index: 10;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $gainsboro;
 }
 
 .gst-treatment-header > span {
@@ -1316,7 +1320,7 @@ section.newtable {
     top: 0;
 }
 
-.customerInvoiceTable {
+.customer-invoice-table {
     position: relative;
 }
 
@@ -1357,10 +1361,10 @@ table.table.table-custom-invoice.basic {
     top: 132px;
     opacity: 0.6;
     z-index: 98;
-    background: #f7f8fa;
+    background: $alice-blue-light;
 }
 
-.cashInvoiceInput {
+.cash-invoice-input {
     max-width: 400px !important;
     width: 100% !important;
 }
@@ -1373,8 +1377,8 @@ table.table.table-custom-invoice.basic {
     list-style: none;
 }
 
-.amountField,
-.balanceDueText {
+.amount-field,
+.balance-due-text {
     min-width: 129px !important;
     margin-left: 20px;
 }
@@ -1383,13 +1387,13 @@ table.table.table-custom-invoice.basic {
     text-align: left;
 }
 
-.sku_and_customfields {
+.sku-and-custom-fields {
     white-space: normal;
     font-size: 12px !important;
 }
 
 .differ-currency {
-    color: #999999;
+    color: $nobel;
     font-size: 14px;
     text-align: right;
     bottom: 3px;
@@ -1404,21 +1408,21 @@ table.table.table-custom-invoice.basic {
     font-size: 11px;
 }
 
-.dateHsnCode {
+.date-hsn-code {
     position: relative;
     top: 7px;
 }
 
 .switch-currency {
     font-size: 14px;
-    color: #333;
+    color: $night-rider;
     max-width: 1000px;
     text-align: right;
     margin-bottom: 10px;
     width: 100%;
 }
 
-.switch-currency .switchIcon {
+.switch-currency .switch-icon {
     padding: 0 10px;
     cursor: pointer;
 }
@@ -1453,21 +1457,21 @@ label.sales-country-label {
     font-size: 12px;
 }
 
-.tableCell.figureCell span.icon-rupees {
+.table-cell.figure-cell span.icon-rupees {
     font-size: 11px;
     margin-right: 2px;
 }
 
-.tableCell.figureCell span.icon-dollar {
+.table-cell.figure-cell span.icon-dollar {
     margin-right: 2px;
 }
 
-.texIncurrency span.icon-rupees {
+.tax-in-currency span.icon-rupees {
     font-size: 11px;
-    color: #999;
+    color: $nobel;
 }
 
-.theadOfSalesInvoice {
+.thead-sales-invoice {
     max-width: 100%;
 }
 
@@ -1497,7 +1501,7 @@ label.sales-country-label {
     height: 100%;
 }
 
-.defaultActive .td-wrapper {
+.default-active .td-wrapper {
     height: 100%;
 }
 
@@ -1510,7 +1514,7 @@ label.sales-country-label {
     height: 105% !important;
 }
 
-.set-active.isOtherTax td:last-child .td-wrapper .differ-currency {
+.set-active.is-other-tax td:last-child .td-wrapper .differ-currency {
     margin-bottom: 14px;
 }
 
@@ -1524,7 +1528,7 @@ label.sales-country-label {
     transform: translateY(-40px);
     width: 20px;
     height: 20px;
-    border: 1px solid #999;
+    border: 1px solid $gainsboro;
     border-radius: 50%;
     text-align: center;
 }
@@ -1549,20 +1553,20 @@ strong {
     display: none;
 }
 
-.card-invoiceTable .differ-currency {
+.card-invoice-table .differ-currency {
     text-align: left;
     padding-left: 0;
 }
 
-.edit-card-invoiceTable .differ-currency {
+.edit-card-invoice-table .differ-currency {
     text-align: right;
 }
 
-.proformaSalesTime ul {
+.proforma-sales-time ul {
     top: 30px !important;
 }
 
-.item-total input.other-taxes-checkobx[type="checkbox"]:focus:after {
+.item-total input.other-taxes-checkbox[type="checkbox"]:focus:after {
     border-color: $chetwode-blue !important;
 }
 
@@ -1629,14 +1633,40 @@ span.eligible-ITC {
         transform: rotate(180deg);
     }
 }
+
+.sales-select{
+    width:62.7% !important;
+}
+.height-rate{
+    height:1px;
+}
+
 .other-detail-card {
     textarea{
         min-height: 100px;
     }
 }
-.pending-sales-page {
-    padding-left: 15px;
-    border-bottom: none !important;
+.bill-add{
+    label{
+    min-width: 110px;
+
+}
+}
+.change-address-dropdown{
+    ul{
+        margin-top: 22px;
+        min-width: 240px;
+        left: 0 !important;
+        right: auto !important;
+        max-height: 200px;
+        overflow-y: auto;
+        li{
+            a{
+                white-space: normal;
+                word-break: break-word;
+            }
+        }
+    }
 }
 /* resposnvie */
 @media(max-width:1199px){
@@ -1646,7 +1676,7 @@ span.eligible-ITC {
     }
 }
 @media (min-width: 768px) {
-    .table.customerInvoiceTable .form-group {
+    .table.customer-invoice-table .form-group {
         display: block;
         margin-bottom: 0;
     }
@@ -1673,7 +1703,7 @@ span.eligible-ITC {
     .wrap-billing-address .bill-add {
         width: 100%;
     }
-    .customerInvoiceTable label {
+    .customer-invoice-table label {
         font-size: 13px;
     }
     .invoice-date-due-date {
@@ -1682,7 +1712,7 @@ span.eligible-ITC {
     .wrapper-customer-table .col-sm-2 {
         padding-right: 0;
     }
-    .cashInvoiceInput {
+    .cash-invoice-input {
         max-width: 63% !important;
         width: 100% !important;
     }
@@ -1728,41 +1758,41 @@ span.eligible-ITC {
     .card-invoice-table-wrapper,
     .add-btn,
     .other-detail-card,
-    .total-amountDiscription {
+    .total-amount-description {
         display: block;
     }
-    .customerInvoiceTable.bg-white {
+    .customer-invoice-table.bg-white {
         margin-top: 10px;
         border-bottom: none;
         margin-bottom: 0;
     }
     .showInMobile {
-        background: #fff;
-        border-top: 1px solid #ddd;
+        background: $white;
+        border-top: 1px solid $gainsboro;
         padding-right: 15px;
         padding-left: 15px;
     }
-    .staticInvoiceTable.salseInvoicetable {
+    .static-invoice-table.sales-invoice-table {
         display: none;
     }
     .card-invoice-table-wrapper,
     .other-detail-card,
-    .total-amountDiscription {
+    .total-amount-description {
         width: 100%;
         max-width: 100%;
     }
     .other-taxes-input {
         width: 99px;
-        background-color: #eee;
-        border: 1px solid #eee;
+        background-color: $whisper-light;
+        border: 1px solid $gainsboro;
         padding: 3px;
         font-size: 13px;
     }
-    .othertaxes div {
+    .other-taxes div {
         align-items: flex-end !important;
         justify-content: flex-end !important;
     }
-    .othertaxes {
+    .other-taxes {
         text-align: right;
     }
     .billing-address .col-sm-6.pd {
@@ -1800,36 +1830,36 @@ span.eligible-ITC {
         margin-top: 10px;
     }
 
-    .slaesPrEsti.customer-invoice-form::before {
+    .sales-proforma-estimate.customer-invoice-form::before {
         top: 135px;
     }
     .search-arrow-image {
         left: 15px;
         top: 80px;
     }
-    .slaesPrEsti .search-arrow-image {
+    .sales-proforma-estimate .search-arrow-image {
         left: 15px;
         top: 130px;
     }
-    .forMultiCurrency.slaesPrEsti .search-arrow-image {
+    .for-multi-currency.sales-proforma-estimate .search-arrow-image {
         top: 160px;
     }
-    .selectCustomerName sales-sh-select {
+    .select-customer-name sales-sh-select {
         width: 100% !important;
         margin-right: 15px;
     }
     .wrap-billing-address .bill-add {
         width: 100%;
         max-width: 100%;
-        padding-right: 30px !important;
+        padding-right: 30px !important
     }
     .sp-rupees {
         font-size: 20px;
     }
-    .wrap-otherTax {
+    .wrap-other-tax {
         padding-top: 2px;
     }
-    .cashInvoiceInput {
+    .cash-invoice-input {
         max-width: 100% !important;
         width: 100% !important;
         margin-right: 15px;
@@ -1837,6 +1867,18 @@ span.eligible-ITC {
 }
 
 @media (max-width: 575px) {
+.change-address-dropdown{
+    ul{
+        left: auto !important;
+        right: 0 !important;
+        li{
+            a{
+                white-space: normal;
+                word-break: break-word;
+            }
+        }
+    }
+}
     #actionPane .btn-group.dropup {
         display: block;
         margin-top: 5px;
@@ -1847,11 +1889,11 @@ span.eligible-ITC {
     #actionPane .btn-danger {
         margin-bottom: 5px;
     }
-    #actionPane .updateMode {
+    #actionPane .update-mode {
         display: flex;
         flex-direction: column;
     }
-    #actionPane .generateInvoie {
+    #actionPane .generate-invoice {
         min-width: 189px;
     }
     .last-estimate-modal {
@@ -1861,7 +1903,7 @@ span.eligible-ITC {
 }
 
 @media (max-width: 414px) {
-    .quantityUnitW100 .col-xs-6 {
+    .quantity-unit-w100 .col-xs-6 {
         width: 100%;
     }
     .search-arrow-image {
@@ -1883,27 +1925,27 @@ span.eligible-ITC {
     .deposit-section {
         transform: translateX(30px);
     }
-    .total-amountDiscription .tableSec {
+    .total-amount-description .table-sec {
         display: block;
         width: 100%;
     }
-    .total-amountDiscription .tableSec .tableRow {
+    .total-amount-description .table-sec .table-row {
         display: flex;
         justify-content: space-between;
     }
-    .total-amountDiscription .tableSec .tableRow .tableCell {
+    .total-amount-description .table-sec .table-row .table-cell {
         min-width: 160px;
         text-align: left;
     }
-    .total-amountDiscription .tableSec .tableRow .figureCell {
+    .total-amount-description .table-sec .table-row .figure-cell {
         min-width: 150px;
         padding-right: 0 !important;
         text-align: right;
     }
-    .balanceDueText {
+    .balance-due-text {
         text-align: right;
     }
-    #actionPane .updateMode {
+    #actionPane .update-mode {
         justify-content: center;
         align-items: center;
         width: 100%;
@@ -1920,7 +1962,7 @@ span.eligible-ITC {
     .deposit-section {
         transform: translateX(20px);
     }
-    .total-amountDiscription .tableSec .tableRow .figureCell {
+    .total-amount-description .table-sec .table-row .figure-cell {
         padding-right: 20px !important;
     }
 }
diff --git a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.ts b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.ts
index f78dba63d52..bdea216db2f 100644
--- a/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.ts
+++ b/apps/web-giddh/src/app/proforma-invoice/proforma-invoice.component.ts
@@ -106,7 +106,7 @@ import { PurchaseRecordService } from '../services/purchase-record.service';
 import { CommonActions } from '../actions/common.actions';
 import { PurchaseRecordActions } from '../actions/purchase-record/purchase-record.action';
 import { AdvanceReceiptAdjustmentComponent } from '../shared/advance-receipt-adjustment/advance-receipt-adjustment.component';
-import { VoucherAdjustments, AdjustAdvancePaymentModal } from '../models/api-models/AdvanceReceiptsAdjust';
+import { VoucherAdjustments, AdjustAdvancePaymentModal, Adjustment } from '../models/api-models/AdvanceReceiptsAdjust';
 import { CurrentCompanyState } from '../store/Company/company.reducer';
 import { CustomTemplateState } from '../store/Invoice/invoice.template.reducer';
 import { PurchaseOrderService } from '../services/purchase-order.service';
@@ -589,6 +589,12 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
     public voucherDateBeforeUpdate: any;
     /** This will hold if confirmation popup from entry date is displayed to not display again */
     public isEntryDateChangeConfirmationDisplayed: boolean = false;
+    /** This will hold account addresses */
+    public accountAddressList: any[] = [];
+    /** This will hold company addresses */
+    public companyAddressList: any[] = [];
+    /** Stores the voucher eligible for adjustment */
+    public voucherForAdjustment: Array<Adjustment>;
 
     /**
      * Returns true, if Purchase Record creation record is broken
@@ -737,6 +743,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
         this.store.pipe(select(state => state.session.activeCompany), takeUntil(this.destroyed$)).subscribe(activeCompany => {
             if(activeCompany) {
                 this.selectedCompany = activeCompany;
+                this.companyAddressList = activeCompany.addresses;
             }
         });
 
@@ -916,6 +923,12 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
             }
         });
 
+        this.updatedAccountDetails$.subscribe(accountDetails => {
+            if(accountDetails) {
+                this.accountAddressList = accountDetails.addresses;
+            }
+        });
+
         this.getOnboardingFormInProcess$.subscribe(inProcess => {
             this.startLoader(inProcess);
         });
@@ -1137,7 +1150,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                             templateUniqueName: null,
                             number: ''
                         };
-                        
+
                         let tempObj;
                         let voucherDate = this.invFormData.voucherDetails.voucherDate;
                         let dueDate = this.invFormData.voucherDetails.dueDate;
@@ -1863,6 +1876,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
     }
 
     public assignAccountDetailsValuesInForm(data: AccountResponseV2) {
+        this.accountAddressList = data.addresses;
         this.customerCountryName = data.country.countryName;
         this.initializeAccountCurrencyDetails(data);
         this.showGstAndTrnUsingCountryName(this.customerCountryName);
@@ -1926,6 +1940,10 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
         if (item && item.currency && item.currency !== this.companyCurrency) {
             this.getCurrencyRate(this.companyCurrency, item.currency,
                 moment(this.invFormData.voucherDetails.voucherDate).format(GIDDH_DATE_FORMAT));
+        } else {
+            this.originalExchangeRate = 1;
+            this.exchangeRate = 1;
+            this.recalculateEntriesTotal();
         }
 
         if (this.isSalesInvoice && this.isMulticurrencyAccount) {
@@ -2651,11 +2669,11 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
         if(trx.amount) {
             let transactionAmount = trx.amount.toString();
 
-            if(this.invFormData.accountDetails.currencySymbol) {
+            if(this.invFormData.accountDetails.currencySymbol && transactionAmount) {
                 transactionAmount = transactionAmount.replace(this.invFormData.accountDetails.currencySymbol, "");
             }
 
-            if(this.selectedSuffixForCurrency) {
+            if(this.selectedSuffixForCurrency && transactionAmount) {
                 transactionAmount = transactionAmount.replace(this.selectedSuffixForCurrency, "");
             }
 
@@ -3713,8 +3731,9 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                 salesEntryClass.uniqueName = entry.uniqueName;
                 salesEntryClass.description = entry.description;
                 salesEntryClass.date = entry.entryDate;
+                let calculationMethod = (entry.otherTaxModal && entry.otherTaxModal.tcsCalculationMethod) ? entry.otherTaxModal.tcsCalculationMethod : "";
                 entry.taxList.forEach(t => {
-                    salesEntryClass.taxes.push({uniqueName: t});
+                    salesEntryClass.taxes.push({uniqueName: t, calculationMethod: calculationMethod});
                 });
                 entry.transactions.forEach(tr => {
                     let transactionClassMul = new TransactionClassMulticurrency();
@@ -4157,7 +4176,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
         }
         if (modal && modal.appliedOtherTax && modal.appliedOtherTax.uniqueName) {
             let tax = this.companyTaxesList.find(ct => ct.uniqueName === modal.appliedOtherTax.uniqueName);
-            if (!modal.appliedOtherTax.name && entry.otherTaxModal && entry.otherTaxModal.appliedOtherTax) {
+            if ((!modal.appliedOtherTax || !modal.appliedOtherTax.name) && entry.otherTaxModal && entry.otherTaxModal.appliedOtherTax) {
                 entry.otherTaxModal.appliedOtherTax.name = tax.name;
             }
             if (['tcsrc', 'tcspay'].includes(tax.taxType)) {
@@ -4166,7 +4185,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                     taxableValue = Number(entry.transactions[0].amount) - entry.discountSum;
                 } else if (modal.tcsCalculationMethod === SalesOtherTaxesCalculationMethodEnum.OnTotalAmount) {
                     let rawAmount = Number(entry.transactions[0].amount) - entry.discountSum;
-                    taxableValue = (rawAmount + entry.taxSum);
+                    taxableValue = (rawAmount + entry.taxSum + entry.cessSum);
                 }
                 entry.otherTaxType = 'tcs';
             } else {
@@ -4174,7 +4193,6 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                 entry.otherTaxType = 'tds';
             }
 
-
             totalTaxes += tax.taxDetail[0].taxValue;
 
             entry.otherTaxSum = giddhRoundOff(((taxableValue * totalTaxes) / 100), 2);
@@ -4389,7 +4407,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                         taxableValue = Number(entry.transactions[0].amount) - entry.discountSum;
                     } else if (entry.otherTaxModal.tcsCalculationMethod === SalesOtherTaxesCalculationMethodEnum.OnTotalAmount) {
                         let rawAmount = Number(entry.transactions[0].amount) - entry.discountSum;
-                        taxableValue = (rawAmount + entry.taxSum);
+                        taxableValue = (rawAmount + entry.taxSum + entry.cessSum);
                     }
 
                     entry.otherTaxSum = giddhRoundOff(((taxableValue * tax.taxDetail[0].taxValue) / 100), 2);
@@ -4885,6 +4903,10 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
                         this.calculateGrandTotal();
                         this.calculateBalanceDue();
                     }
+                    if (from !== to && !this.isPurchaseInvoice) {
+                        // Multi currency case
+                        this.recalculateEntriesTotal();
+                    }
                 }
             }, (error => {
 
@@ -5692,6 +5714,7 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
             };
             this.salesService.getAllAdvanceReceiptVoucher(requestObject).subscribe(res => {
                 if (res && res.status === 'success') {
+                    this.voucherForAdjustment = res.body;
                     if (res.body && res.body.length) {
                         this.isAccountHaveAdvanceReceipts = true;
                     } else {
@@ -6724,4 +6747,46 @@ export class ProformaInvoiceComponent implements OnInit, OnDestroy, AfterViewIni
     public onFocusInvoiceDate(): void {
         this.voucherDateBeforeUpdate = this.invFormData.voucherDetails.voucherDate;
     }
+
+    /**
+     * This will fill the selected address
+     *
+     * @param {*} data
+     * @param {*} address
+     * @param {false} isCompanyAddress
+     * @memberof ProformaInvoiceComponent
+     */
+    public selectAddress(data: any, address: any, isCompanyAddress: false): void {
+        if(data && address) {
+            data.address[0] = address.address;
+
+            if(!data.state) {
+                data.state = {};
+            }
+
+            data.state.code = (isCompanyAddress) ? address.stateCode : (address.state) ? address.state.code : "";
+            data.gstNumber = (isCompanyAddress) ? address.taxNumber : address.gstNumber;
+
+            if(isCompanyAddress) {
+                this.autoFillCompanyShippingDetails();
+            } else {
+                this.autoFillShippingDetails();
+            }
+        }
+    }
+
+    /**
+     * Recalculates the entries total value
+     *
+     * @private
+     * @memberof ProformaInvoiceComponent
+     */
+    private recalculateEntriesTotal(): void {
+        this.updateStockEntries();
+        this.calculateSubTotal();
+        this.calculateTotalDiscount();
+        this.calculateTotalTaxSum();
+        this.calculateGrandTotal();
+        this.calculateBalanceDue();
+    }
 }
diff --git a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.html b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.html
index 1dc074d335b..7b3a2c3931b 100644
--- a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.html
+++ b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.html
@@ -6,16 +6,16 @@
     </div>
 </div>
 <form #poForm="ngForm" novalidate autocomplete="off"
-    [ngClass]="{'create-purchase-order-form': true, 'customer-purchase-order' : !purchaseOrder.voucherDetails.customerName, 'forMultiCurrency' : isMulticurrencyAccount  } "
+    [ngClass]="{'create-purchase-order-form': true, 'customer-purchase-order' : !purchaseOrder.voucherDetails.customerName, 'for-multi-currency' : isMulticurrencyAccount  } "
     *ngIf="!showLoader">
     <div class="clearfix" [keyboardShortcut]="'alt+c'" (onShortcutPress)="addAccountFromShortcut()">
-        <div class="clearfix wrapper-customer-table  pdT2">
+        <div class="clearfix wrapper-customer-table pd-t2">
             <div class="customer-purchase-table">
                 <div class="inner-container">
                     <div class="inner-container">
                         <!-- region customer section -->
                         <div class="clearfix">
-                            <div class="row mb-1">
+                            <div class="row mr-b1">
                                 <!-- region customer name -->
                                 <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                                     <label>Vendor Name<span class="red-text">*</span></label>
@@ -34,7 +34,7 @@
                                                 [forceClearReactive]="forceClear$ | async" [isFilterEnabled]="true"
                                                 (noResultsClicked)="addNewAccount()" [multiple]="false"
                                                 [ItemHeight]="67" [notFoundLinkText]="'Add Vendor'"
-                                                (keyup)="resetVendor($event)" (onClear)="resetVendor(null)">
+                                                (keyup)="resetVendor($event)" (onClear)="resetVendor(null)" [isOpen]="!isUpdateMode && !purchaseOrder.account.uniqueName">
 
                                                 <ng-template #optionTemplate let-option="option">
                                                     <a href="javascript:void(0)" class="list-item flex-column border-none">
@@ -44,7 +44,7 @@
                                                 </ng-template>
 
                                                 <ng-template #notFoundLinkTemplate>
-                                                    <a href="javascript:void(0)" class="list-item pl-05 pr-05 d-flex justify-content-between w-100 border-none"
+                                                    <a href="javascript:void(0)" class="list-item pd-l05 pd-r05 d-flex justify-content-between w-100 border-none"
                                                         [keyboardShortcut]="'alt+c'">
                                                         <div class="item">{{ vendorNotFoundText }}</div>
                                                         <div class="item">Alt+C</div>
@@ -71,7 +71,7 @@
                                 </div>
                                 <!-- endregion -->
                             </div>
-                            <div class="row mb-1 delivery-from-field">
+                            <div class="row mr-b1 delivery-from-field">
                                 <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                                     <label>Deliver From<span class="red-text">*</span></label>
                                 </div>
@@ -86,46 +86,61 @@
                                                 <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
                                                     <div class="form-group">
-                                                        <label>Billing Address</label>
-
-                                                        <div class="billing-address clearfix">
-                                                            <textarea name="vendorBillingDetailsAddress"
-                                                                (keyup)="autoFillShippingDetails('vendor')"
-                                                                [(ngModel)]="purchaseOrder.account.billingDetails.address[0]"
-                                                                class="form-control" rows="3" autocomplete="off"
-                                                                autofocus="off" aria-autocomplete="none"></textarea>
-
-                                                            <div class="row">
-                                                                <div class="col-sm-12 col-md-6">
-                                                                    <label class="sales-country-label">
-                                                                        {{vendorCountry}}
-                                                                    </label>
+                                                        <div class="d-flex align-items-center pb-1">
+                                                            <span class="pd-r15">Billing Address</span>
+                                                            <span>
+                                                                <div class="btn-group btn-block" dropdown #billingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="billingAddressDropDownWeb.hide()" *ngIf="accountAddressList?.length > 1">
+                                                                    <a dropdownToggle type="button" class="dropdown-toggle">Change</a>
+                                                                    <ul *dropdownMenu class="dropdown-menu change-address-dropdown dropdown-menu-right" role="menu">
+                                                                        <li role="menuitem" *ngFor="let address of accountAddressList">
+                                                                            <a class="dropdown-item" (click)="selectAddress(purchaseOrder.account.billingDetails, address)">
+                                                                                {{address.address}} {{address.state?.name}}
+                                                                                <span class="d-block">{{ address.gstNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.gstNumber : "" }}
+                                                                                </span>
+                                                                            </a>
+                                                                        </li>
+                                                                    </ul>
                                                                 </div>
+                                                            </span>
+                                                        </div>
+                                                            <div class="billing-address clearfix">
+                                                                <textarea name="vendorBillingDetailsAddress"
+                                                                    (keyup)="autoFillShippingDetails('vendor')"
+                                                                    [(ngModel)]="purchaseOrder.account.billingDetails.address[0]"
+                                                                    class="form-control" rows="3" autocomplete="off"
+                                                                    autofocus="off" aria-autocomplete="none"></textarea>
+
+                                                                <div class="row">
+                                                                    <div class="col-sm-12 col-md-6">
+                                                                        <label class="sales-country-label">
+                                                                            {{vendorCountry}}
+                                                                        </label>
+                                                                    </div>
 
-                                                                <div class="col-sm-12 col-md-6" #vendorBillingState>
-                                                                    <sales-sh-select [placeholder]="'State'"
-                                                                        class="select-border-bottom"
-                                                                        (selected)="fillShippingBillingDetails($event, true, 'vendor'); autoFillShippingDetails('vendor')"
-                                                                        #vendorStatesBilling [showBottomBorderOnly]="true"
-                                                                        [options]="statesSource"
-                                                                        name="vendorBillingDetailsStateCode"
-                                                                        [(ngModel)]="purchaseOrder.account.billingDetails.state.code">
-                                                                    </sales-sh-select>
-                                                                </div>
+                                                                    <div class="col-sm-12 col-md-6" #vendorBillingState>
+                                                                        <sales-sh-select [placeholder]="'State'"
+                                                                            class="select-border-bottom"
+                                                                            (selected)="fillShippingBillingDetails($event, true, 'vendor'); autoFillShippingDetails('vendor')"
+                                                                            #vendorStatesBilling [showBottomBorderOnly]="true"
+                                                                            [options]="statesSource"
+                                                                            name="vendorBillingDetailsStateCode"
+                                                                            [(ngModel)]="purchaseOrder.account.billingDetails.state.code">
+                                                                        </sales-sh-select>
+                                                                    </div>
 
-                                                                <div class="col-sm-12"
-                                                                    *ngIf="shouldShowTrnGstField && (showGSTINNo || showTRNNo)">
-                                                                    <input maxLength="15" autocomplete="None"
-                                                                        type="text" name="vendorBillingDetailsTax"
-                                                                        [(ngModel)]="purchaseOrder.account.billingDetails.gstNumber"
-                                                                        class="form-control input-custom"
-                                                                        (blur)="autoFillShippingDetails('vendor')"
-                                                                        (change)="getStateCode('billingDetails', vendorStatesBilling, 'vendor')"
-                                                                        placeholder="{{showGSTINNo ? 'GSTIN' : 'TRN'}}">
+                                                                    <div class="col-sm-12"
+                                                                        *ngIf="shouldShowTrnGstField && (showGSTINNo || showTRNNo)">
+                                                                        <input maxLength="15" autocomplete="None"
+                                                                            type="text" name="vendorBillingDetailsTax"
+                                                                            [(ngModel)]="purchaseOrder.account.billingDetails.gstNumber"
+                                                                            class="form-control input-custom"
+                                                                            (blur)="autoFillShippingDetails('vendor')"
+                                                                            (change)="getStateCode('billingDetails', vendorStatesBilling, 'vendor')"
+                                                                            placeholder="{{showGSTINNo ? 'GSTIN' : 'TRN'}}">
+                                                                    </div>
                                                                 </div>
-                                                            </div>
 
-                                                        </div>
+                                                            </div>
                                                     </div>
 
                                                 </div>
@@ -134,16 +149,29 @@
                                                 <!-- region shipping address -->
                                                 <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
-                                                    <div class="form-group p0 width100">
-                                                        <label>
+                                                    <div class="form-group p-0 width-100">
+                                                        <div class="d-flex align-items-center pb-1">
+                                                            <span class="pd-r15">
                                                             <input type="checkbox" autocomplete="None"
                                                                 name="autoFillVendorShipping"
                                                                 [(ngModel)]="autoFillVendorShipping"
                                                                 (change)="autoFillShippingDetails('vendor')"> Shipping
                                                             Address
                                                             Same as Billing Address
-                                                        </label>
-
+                                                            </span>
+                                                            <span>
+                                                                <div class="btn-group btn-block" dropdown #shippingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="shippingAddressDropDownWeb.hide()" *ngIf="accountAddressList?.length > 1 && !autoFillVendorShipping">
+                                                                    <a dropdownToggle type="button" class="dropdown-toggle">Change</a>
+                                                                    <ul *dropdownMenu class="dropdown-menu change-address-dropdown dropdown-menu-right" role="menu">
+                                                                        <li role="menuitem" *ngFor="let address of accountAddressList">
+                                                                            <a class="dropdown-item" (click)="selectAddress(purchaseOrder.account.shippingDetails, address)">
+                                                                                {{address.address}} {{address.state?.name}} {{ address.gstNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.gstNumber : "" }}
+                                                                            </a>
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                            </span>
+                                                        </div>
                                                         <div
                                                             [ngClass]="{'billing-address': true, 'disabled': autoFillVendorShipping}">
                                                             <textarea name="vendorShippingDetailsAddress"
@@ -198,9 +226,9 @@
                     </div>
                 </div>
             </div>
-            <div class="customer-purchase-table bg-white pdB2 pdT2">
+            <div class="customer-purchase-table bg-white pd-b2 pd-t2">
                 <div class="inner-container">
-                    <div class="row mb-1" *ngIf="shouldShowWarehouse && warehouses && warehouses.length > 1">
+                    <div class="row mr-b1" *ngIf="shouldShowWarehouse && warehouses && warehouses.length > 1">
                         <!-- region customer name -->
                         <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                             <label>Warehouse<span class="red-text">*</span></label>
@@ -219,7 +247,7 @@
                         </div>
                         <!-- endregion -->
                     </div>
-                    <div class="row mb-1">
+                    <div class="row mr-b1">
                         <div class="col-sm-12 col-xl-2 col-lg-3 col-md-3 col-xs-12">
                             <label>Deliver To<span class="red-text">*</span></label>
                         </div>
@@ -234,8 +262,21 @@
                                         <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
                                             <div class="form-group">
-                                                <label>Billing Address</label>
-
+                                               <div class="d-flex align-items-center pb-1">
+                                                    <span class="pd-r15">Billing Address</span>
+                                                    <span>
+                                                    <div class="btn-group btn-block" container="body" dropdown #companyBillingAddressDropDownWeb="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="companyBillingAddressDropDownWeb.hide()" *ngIf="companyAddressList?.length > 1">
+                                                        <a dropdownToggle type="button" class="dropdown-toggle">Change</a>
+                                                        <ul *dropdownMenu class="dropdown-menu dropdown-menu-right change-address-dropdown" role="menu">
+                                                            <li role="menuitem" *ngFor="let address of companyAddressList">
+                                                                <a class="dropdown-item" (click)="selectAddress(purchaseOrder.company.billingDetails, address, true)">
+                                                                    {{address.address}} {{address.state?.name}} {{ address.taxNumber ? (showGSTINNo ? 'GSTIN: ' : 'TRN: ') + address.taxNumber : "" }}
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                </span>
+                                            </div>
                                                 <div class="billing-address clearfix">
                                                     <textarea name="companyBillingDetailsAddress"
                                                         (keyup)="autoFillShippingDetails('company')"
@@ -279,14 +320,16 @@
                                         <!-- region shipping address -->
                                         <div class="col-sm-12 col-xl-6 col-md-10 bill-add">
 
-                                            <div class="form-group p0 width100">
-                                                <label>
-                                                    <input type="checkbox" autocomplete="None"
-                                                        name="autoFillCompanyShipping"
-                                                        [(ngModel)]="autoFillCompanyShipping"
-                                                        (change)="autoFillShippingDetails('company')"> Shipping Address
-                                                    Same as Billing Address
-                                                </label>
+                                            <div class="form-group p-0 width-100">
+                                                <div class="d-flex align-items-center pb-1">
+                                                    <span class="pd-r15">
+                                                        <input type="checkbox" autocomplete="None"
+                                                            name="autoFillCompanyShipping"
+                                                            [(ngModel)]="autoFillCompanyShipping"
+                                                            (change)="autoFillShippingDetails('company')"> Shipping Address
+                                                        Same as Billing Address
+                                                    </span>
+                                                </div>
                                                 <div
                                                     [ngClass]="{'billing-address': true, 'disabled': autoFillCompanyShipping}">
                                                     <textarea name="companyShippingDetailsAddress"
@@ -426,7 +469,7 @@
             <thead>
                 <tr>
                     <th *ngFor="let item of theadArrReadOnly;" [hidden]="!item.display"
-                        class="theadOfSalesInvoice" [ngClass]="item.label">
+                        class="thead-sales-invoice" [ngClass]="item.label">
                         {{item.label}} <span *ngIf="item.label === 'Tax' && isRcmEntry">(RCM)<sup class="mandatory-asterisk">*</sup></span>
                     </th>
                 </tr>
@@ -437,10 +480,10 @@
                 <ng-container *ngFor="let transaction of entry.transactions;">
                     <tr (click)="setActiveIndex(entryIdx);$event.stopPropagation()" [hidden]="activeIndex === entryIdx"
                         class="entriesTr set-active"
-                        [ngClass]="{'isOtherTax' : entry.isOtherTaxApplicable && isMulticurrencyAccount}">
+                        [ngClass]="{'is-other-tax' : entry.isOtherTaxApplicable && isMulticurrencyAccount}">
                         <td>{{ entryIdx + 1 }}</td>
                         <td>
-                            <div class="productName">
+                            <div class="product-name">
                                 <label *ngIf="!transaction.accountName" class="select-account-label">Click to
                                     Select
                                     Account</label> {{transaction.accountName}}
@@ -450,9 +493,9 @@
                             <div class="description">
                                 {{transaction.description}}
                             </div>
-                            <p class="small text-muted sku_and_customfields" *ngIf="transaction.sku_and_customfields">
+                            <p class="small text-muted sku-and-custom-fields" *ngIf="transaction.sku_and_customfields">
                                 {{transaction.sku_and_customfields}}</p>
-                            <div class="dateHsnCode">
+                            <div class="date-hsn-code">
                                 <div>
                                     <div class="col-xs-12" *ngIf="transaction.hsnNumber || transaction.sacNumber">
                                         <div class="hsn-code">
@@ -545,7 +588,7 @@
                                             </span>{{ entry.otherTaxSum }}
                                         </span>
                                     </div>
-                                    <div class="texIncurrency"
+                                    <div class="tax-in-currency"
                                         *ngIf="entry.isOtherTaxApplicable && isMulticurrencyAccount && isMultiCurrencySupported">
                                         {{ entry.otherTaxModal?.appliedOtherTax?.name }} :
                                         <span>{{baseCurrencySymbol}}</span>
@@ -571,11 +614,11 @@
 
                     <!-- region dynamic entries-->
                     <!-- added new element in td which is content amount element class is 'differ-currency' (multicurrency feature)-->
-                    <tr [hidden]="activeIndex !== entryIdx" class="entriesTr defaultActive"
+                    <tr [hidden]="activeIndex !== entryIdx" class="entriesTr default-active"
                         (click)="$event.stopPropagation();">
                         <td>{{ entryIdx + 1 }}</td>
                         <td>
-                            <div class="productName">
+                            <div class="product-name">
                                 <div class="ng-select-wrap">
                                     <sh-select [options]="salesAccounts$ | async" #selectAccount
                                         [(ngModel)]="transaction.fakeAccForSelect2"
@@ -616,16 +659,16 @@
                                     <textarea type="text" placeholder="Add Description"
                                         name="transaction.description_{{entryIdx}}" class="form-control"
                                         [(ngModel)]="transaction.description" #description></textarea>
-                                    <p class="small text-muted sku_and_customfields"
+                                    <p class="small text-muted sku-and-custom-fields"
                                         *ngIf="transaction.sku_and_customfields">
                                         {{transaction.sku_and_customfields}}</p>
                                 </div>
 
                                 <!-- region entry date/ hsncode -->
-                                <div class="dateHsnCode">
+                                <div class="date-hsn-code">
                                     <div>
                                         <div class="col-xs-12">
-                                            <div class="wrap-hsnBox">
+                                            <div class="wrap-hsn-box">
                                                 <div class="hsn-code"
                                                     (click)="toggleHsnSacDropDown(transaction)">
                                                     <label>HSN/SAC:</label>
@@ -652,7 +695,7 @@
                                                         [(ngModel)]="transaction.sacNumber" />
                                                     <a>
                                                     </a>
-                                                    <div class="btngroup m-t-10">
+                                                    <div class="btn-group m-t-10">
                                                         <button class="btn btn-sm btn-success" type="button"
                                                             (click)="hsnSacDropdownShow=!hsnSacDropdownShow">Save
                                                         </button>
@@ -741,7 +784,7 @@
                             </div>
                         </td>
 
-                        <td class="pos-rel dropdown-container item-tax">
+                        <td class="position-relative dropdown-container item-tax">
                             <div class="td-wrapper">
                                 <div class="text-right">
                                     <tax-control [taxes]="companyTaxesList" [date]="purchaseOrder.voucherDetails.voucherDate"
@@ -749,7 +792,7 @@
                                         [applicableTaxes]="transaction.applicableTaxes"
                                         [exceptTaxTypes]="exceptTaxTypes"
                                         [allowedSelectionOfAType]="allowedSelectionOfAType" [showHeading]="false"
-                                        [rootClass]="'salseInvoicetable'"
+                                        [rootClass]="'sales-invoice-table'"
                                         (taxAmountSumEvent)="calculateWhenTrxAltered(entry, transaction)"
                                         (hideOtherPopups)="closeDiscountPopup()" [maskInput]="inputMaskFormat"
                                         [prefixInput]="purchaseOrder.accountDetails.currencySymbol"
@@ -774,15 +817,15 @@
                                         [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat"
                                         (blur)="calculateTransactionValueInclusively(entry, transaction)" />
 
-                                    <div *ngIf="isTcsTdsApplicable" class="wrap-otherTax">
-                                        <input type="checkbox" class="other-taxes-checkobx"
+                                    <div *ngIf="isTcsTdsApplicable" class="wrap-other-tax">
+                                        <input type="checkbox" class="other-taxes-checkbox"
                                             [(ngModel)]="entry.isOtherTaxApplicable" *ngIf="!entry.isOtherTaxApplicable"
                                             (click)="tcsTdsIndex = entryIdx"
                                             name="entry.isOtherTaxApplicable_{{entryIdx}}"
                                             id="entry.isOtherTaxApplicable_{{entryIdx}}"
                                             (ngModelChange)="toggleOtherTaxesAsidePane(entry.isOtherTaxApplicable, entryIdx)">
                                         <label for="entry.isOtherTaxApplicable_{{entryIdx}}"
-                                            *ngIf="!entry.isOtherTaxApplicable" class="otherTaxLable">Other Tax?</label>
+                                            *ngIf="!entry.isOtherTaxApplicable" class="other-tax-label">Other Tax?</label>
                                     </div>
                                     <div *ngIf="entry.isOtherTaxApplicable" class="mr-t1">
 
@@ -809,7 +852,7 @@
                                     </div>
                                 </div>
                                 <div *ngIf="entry.isOtherTaxApplicable && isMulticurrencyAccount && isMultiCurrencySupported"
-                                    class="texIncurrency">
+                                    class="tax-in-currency">
                                     {{ entry.otherTaxModal?.appliedOtherTax?.name }}
                                     <span>{{baseCurrencySymbol}}</span> :
                                     <span>{{entry.otherTaxSum * exchangeRate | giddhCurrency}}</span>
@@ -860,7 +903,7 @@
                                     </div>
                                     <div class="ico-head">Other Details</div>
                                 </div>
-                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pdL3 mr0">
+                                <div [collapse]="isOthrDtlCollapsed" class="clearfix max-600 pd-l3 m-0">
                                     <div class="row">
                                         <div class="form-group col-xs-4 col-sm-4 mb-0">
                                                 <giddh-datepicker #shippingDate="ngModel" placeholder="Ship Date" name="shippingDate"
@@ -1027,9 +1070,9 @@
                                 <p class="small text-muted sku-custom-fields" *ngIf="transaction.sku_and_customfields">
                                     {{transaction.sku_and_customfields}}</p>
 
-                                <div class="date-hsn-code pdR0">
+                                <div class="date-hsn-code pr-0">
                                     <div class="row">
-                                        <div class="col-xs-12"
+                                        <div class="col-12"
                                             *ngIf="transaction.hsnNumber || transaction.sacNumber">
                                             <div class="hsn-code text-right">
                                                 <label>HSN/SAC:
@@ -1202,7 +1245,7 @@
                                         <!-- region entry date/ hsncode -->
                                         <div class="date-hsn-code">
                                             <div class="row">
-                                                <div class="col-xs-12 pdL0">
+                                                <div class="col-xs-12 pl-0">
                                                     <div class="wrap-hsn-box">
                                                         <div class="hsn-code text-right"  (click)="toggleHsnSacDropDown(transaction)">
                                                             <label>HSN/SAC:</label>
@@ -1231,7 +1274,7 @@
                                                                 [(ngModel)]="transaction.sacNumber" />
                                                             <a>
                                                             </a>
-                                                            <div class="btngroup m-t-10">
+                                                            <div class="btn-group m-t-10">
                                                                 <button class="btn btn-sm btn-success" type="button"
                                                                     (click)="hsnSacDropdownShow=!hsnSacDropdownShow">
                                                                     Save
@@ -1388,7 +1431,7 @@
                                             [applicableTaxes]="transaction.applicableTaxes"
                                             [exceptTaxTypes]="exceptTaxTypes"
                                             [allowedSelectionOfAType]="allowedSelectionOfAType" [showHeading]="false"
-                                            [rootClass]="'salseInvoicetable'"
+                                            [rootClass]="'sales-invoice-table'"
                                             (taxAmountSumEvent)="calculateWhenTrxAltered(entry, transaction)"
                                             (hideOtherPopups)="closeDiscountPopup()" [maskInput]="inputMaskFormat"
                                             [prefixInput]="purchaseOrder.accountDetails.currencySymbol"
@@ -1416,7 +1459,7 @@
                                             [prefix]="purchaseOrder.accountDetails.currencySymbol"
                                             [suffix]="selectedSuffixForCurrency" [mask]="inputMaskFormat" />
                                         <div class="wrap-other-tax" *ngIf="isTcsTdsApplicable">
-                                            <input type="checkbox" class="other-taxes-checkobx"
+                                            <input type="checkbox" class="other-taxes-checkbox"
                                                 [(ngModel)]="entry.isOtherTaxApplicable"
                                                 *ngIf="!entry.isOtherTaxApplicable"
                                                 (click)="tcsTdsIndex = entryIdx"
@@ -1424,7 +1467,7 @@
                                                 id="entry.isOtherTaxApplicable_{{entryIdx}}"
                                                 (ngModelChange)="toggleOtherTaxesAsidePane(entry.isOtherTaxApplicable, entryIdx)">
                                             <label for="entry.isOtherTaxApplicable_{{entryIdx}}"
-                                                *ngIf="!entry.isOtherTaxApplicable" class="otherTaxLable">Other
+                                                *ngIf="!entry.isOtherTaxApplicable" class="other-tax-label">Other
                                                 Tax?</label>
                                         </div>
                                         <div class="mt-1 other-taxes" *ngIf="entry.isOtherTaxApplicable">
@@ -1432,7 +1475,7 @@
                                             <span>
 
                                                 <div class="d-flex align-items-center">
-                                                    <span class="mr-05">
+                                                    <span class="mr-r05">
                                                         <a href="javascript:;"
                                                             (click)="toggleOtherTaxesAsidePane(true, entryIdx)">
                                                             <img src="assets/images/edit-pencilicon.svg">
@@ -1500,7 +1543,7 @@
                         <div class="ico-head">Other Details</div>
                     </div>
 
-                    <div class="clearfix max-600  mr0" [collapse]="isOthrDtlCollapsed">
+                    <div class="clearfix max-600  m-0" [collapse]="isOthrDtlCollapsed">
 
                         <div class="row">
 
diff --git a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.scss b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.scss
index 81ac3889d00..7c8487fbbf2 100644
--- a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.scss
+++ b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.scss
@@ -111,7 +111,7 @@ form{
                         line-height: 2;
                         border-bottom: 1px solid $gainsboro;
                         padding-left: 6px;
-                        border-bottom-color: rgb(214, 214, 214);
+                        border-bottom-color: $gainsboro;
                         width: 100%;
                     }
                     .input-custom {
@@ -277,17 +277,17 @@ form{
 
     .list-item {
         font-size: 14px;
-        border-bottom: 1px solid $very-light-gray;
+        border-bottom: 1px solid $gainsboro;
         display:flex !important;
     }
 
 
 
-.fs12 {
+.font-12 {
     font-size: 12px;
 }
 
-.fs11 {
+.font-11 {
     font-size: 11px;
 }
 
@@ -351,11 +351,11 @@ ng-select.splSales {
     font-weight: 100;
 }
 
-.salesTax .taxInput {
+.sales-tax .tax-input {
     text-align: right;
 }
 .description textarea {
-    border: 1px solid $very-light-gray;
+    border: 1px solid $gainsboro;
     width: 100%;
     min-height: 55px;
     margin-top: 10px;
@@ -364,7 +364,7 @@ ng-select.splSales {
 .create-purchase-order-table table input[disabled] {
     cursor: default;
     background-color: $whisper-color;
-    border: 1px solid $very-light-gray;
+    border: 1px solid $gainsboro;
     padding: 5px;
     width: 100%;
     // max-width: 150px;
@@ -380,12 +380,12 @@ input[type="text"] {
     height: 36px !important;
 }
 
-a.copyInvoice {
+a.copy-invoice {
     color: $primary;
     margin-left: 10px;
 }
 
-a.copyInvoice img {
+a.copy-invoice img {
     margin-right: 6px;
 }
 
@@ -398,7 +398,7 @@ a.copyInvoice img {
     padding-right: 10px;
 }
 .shipping-address textarea {
-    border-bottom: 1px solid $very-light-gray !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .entry-date label {
@@ -448,10 +448,10 @@ a.copyInvoice img {
     color: $primary;
 }
 
-.otherDetailTable th,
-.otherDetailTable td,
-.otherDetailTable tr,
-.otherDetailTable tbody {
+.other-detail-table th,
+.other-detail-table td,
+.other-detail-table tr,
+.other-detail-table tbody {
     border-top: none !important;
 }
 
@@ -543,12 +543,12 @@ span.edit-icon {
 }
 
 .hsn-code-dropdown button.btn.btn-sm.btn-success,
-.bulkItemBtnGroup button.btn.btn-sm.btn-success {
+.bulk-item-btn-group button.btn.btn-sm.btn-success {
     background-color: $success-green;
     color: $white;
 }
 
-.temapletFooter {
+.template-footer {
     position: fixed;
     bottom: 15px;
     width: 100%;
@@ -640,14 +640,14 @@ section.static-purchase-table {
 
 .customer-purchase-table.bg-white {
     margin-top: 10px;
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
     margin-bottom: 20px;
 }
 
 // .customer-purchase-table section.form-inline {
 //   padding-top: 60px;
 // }
-.customer-purchase-table section.billing-addressWrap {
+.customer-purchase-table section.billing-address-wrap {
     padding-top: 60px;
 }
 
@@ -657,22 +657,22 @@ section.static-purchase-table {
 }
 
 // new table css
-section.newtable {
+section.new-table {
     background-color: $whisper-color;
     margin-bottom: 30px;
     margin: 0 15px 30px;
 }
 
-.newtable .thead {
+.new-table .thead {
     border-right: 1px solid $gainsboro;
     padding: 8px 10px;
 }
 
-.newtable .thead:first-child {
+.new-table .thead:first-child {
     padding-left: 30px;
 }
 
-.newtable .row > div {
+.new-table .row > div {
     padding: 0;
 }
 
@@ -729,7 +729,7 @@ section.newtable {
                     width: 90px;
                 }
                 &.error-box.item-tax {
-                    border: 2px solid red !important;
+                    border: 2px solid $red !important;
                 }
             }
         }
@@ -794,7 +794,7 @@ table.table.table-custom-invoice.basic {
     height: 105% !important;
 }
 
-.set-active.isOtherTax td:last-child .td-wrapper .differ-currency {
+.set-active.is-other-tax td:last-child .td-wrapper .differ-currency {
     margin-bottom: 14px;
 }
 
@@ -837,11 +837,11 @@ strong {
     text-align: right;
 }
 
-.proformaSalesTime ul {
+.proforma-sales-time ul {
     top: 30px !important;
 }
 
-.item-total input.other-taxes-checkobx[type="checkbox"]:focus:after {
+.item-total input.other-taxes-checkbox[type="checkbox"]:focus:after {
     border-color: $chetwode-blue !important;
 }
 .p-1.aqua-color.add-line-bulk-item {
@@ -1038,7 +1038,7 @@ span.eligible-ITC {
     border-bottom-color: rgb(214, 214, 214);
 }
 
-.loaderClass {
+.loader-class {
     height: calc(100% - 150px);
     display: flex;
     justify-content: center;
@@ -1071,6 +1071,20 @@ span.eligible-ITC {
         line-height: 2.3 !important;
     }
 }
+ul.change-address-dropdown{
+    min-width: 240px;
+    left: -20px !important;
+    right: auto !important;
+    max-height: 200px;
+    overflow-y: auto;
+    li{
+        a{
+            white-space: normal;
+            word-break: break-word;
+        }
+    }
+}
+/* responsive */
 @media(max-width:1199px){
     .bill-add {
         margin-bottom: 15px;
@@ -1268,6 +1282,18 @@ span.eligible-ITC {
     }
 }
 @media (max-width: 575px) {
+
+    ul.change-address-dropdown{
+        left: auto !important;
+        right: -25px !important;
+        li{
+            a{
+                white-space: normal;
+                word-break: break-word;
+            }
+        }
+    }
+
     #actionPane .btn-group.dropup {
         display: block;
         margin-top: 5px;
@@ -1354,7 +1380,7 @@ span.eligible-ITC {
         padding-right: 0 !important;
         text-align: right;
     }
-    .balanceDueText {
+    .balance-due-text {
         text-align: right;
     }
     #actionPane .update-mode {
diff --git a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.ts b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.ts
index 89e153cb1d3..8cae0650af7 100644
--- a/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.ts
+++ b/apps/web-giddh/src/app/purchase/create-purchase-order/create-purchase-order.component.ts
@@ -323,6 +323,10 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
     public tcsTdsIndex: number = 0;
     /** This will hold if order date is manually changed */
     public isOrderDateChanged: boolean = false;
+    /** This will hold account addresses */
+    public accountAddressList: any[] = [];
+    /** This will hold company addresses */
+    public companyAddressList: any[] = [];
 
     constructor(private store: Store<AppState>, private breakPointObservar: BreakpointObserver, private salesAction: SalesActions, private salesService: SalesService, private warehouseActions: WarehouseActions, private settingsUtilityService: SettingsUtilityService, private settingsProfileActions: SettingsProfileActions, private toaster: ToasterService, private commonActions: CommonActions, private settingsDiscountAction: SettingsDiscountActions, private companyActions: CompanyActions, private generalService: GeneralService, public purchaseOrderService: PurchaseOrderService, private loaderService: LoaderService, private route: ActivatedRoute, private router: Router, private generalActions: GeneralActions, private invoiceService: InvoiceService, private modalService: BsModalService, private settingsBranchAction: SettingsBranchActions) {
         this.getInvoiceSettings();
@@ -385,6 +389,7 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
         this.store.pipe(select(state => state.session.activeCompany), takeUntil(this.destroyed$)).subscribe(activeCompany => {
             if(activeCompany) {
                 this.selectedCompany = activeCompany;
+                this.companyAddressList = activeCompany.addresses;
                 if (this.urlParams['purchaseOrderUniqueName'] && !this.purchaseOrderUniqueName) {
                     this.showLoaderUntilDataPrefilled = true;
                     this.purchaseOrderUniqueName = this.urlParams['purchaseOrderUniqueName'];
@@ -615,6 +620,8 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
             }
 
             if (accountDetails.addresses && accountDetails.addresses.length > 0) {
+                this.accountAddressList = accountDetails.addresses;
+
                 accountDetails.addresses.forEach(defaultAddress => {
                     if (defaultAddress && defaultAddress.isDefault) {
                         this.purchaseOrder.account.billingDetails.address = [];
@@ -1851,7 +1858,7 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
                         taxableValue = Number(entry.transactions[0].amount) - entry.discountSum;
                     } else if (modal.tcsCalculationMethod === SalesOtherTaxesCalculationMethodEnum.OnTotalAmount) {
                         let rawAmount = Number(entry.transactions[0].amount) - entry.discountSum;
-                        taxableValue = (rawAmount + entry.taxSum);
+                        taxableValue = (rawAmount + entry.taxSum + entry.cessSum);
                     }
                     entry.otherTaxType = 'tcs';
                 } else {
@@ -2267,8 +2274,9 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
             salesEntryClass.voucherType = entry.voucherType;
             salesEntryClass.uniqueName = entry.uniqueName;
             salesEntryClass.description = entry.description;
+            let calculationMethod = (entry.otherTaxModal && entry.otherTaxModal.tcsCalculationMethod) ? entry.otherTaxModal.tcsCalculationMethod : "";
             entry.taxList.forEach(t => {
-                salesEntryClass.taxes.push({ uniqueName: t });
+                salesEntryClass.taxes.push({ uniqueName: t, calculationMethod: calculationMethod });
             });
             entry.transactions.forEach(transaction => {
                 let transactionClassMul = new TransactionClassMulticurrency();
@@ -3008,4 +3016,31 @@ export class CreatePurchaseOrderComponent implements OnInit, OnDestroy {
             }, 200);
         }
     }
+
+    /**
+     * This will fill the selected address
+     *
+     * @param {*} data
+     * @param {*} address
+     * @param {false} isCompanyAddress
+     * @memberof CreatePurchaseOrderComponent
+     */
+    public selectAddress(data: any, address: any, isCompanyAddress: false): void {
+        if(data && address) {
+            data.address[0] = address.address;
+
+            if(!data.state) {
+                data.state = {};
+            }
+
+            data.state.code = (isCompanyAddress) ? address.stateCode : (address.state) ? address.state.code : "";
+            data.gstNumber = (isCompanyAddress) ? address.taxNumber : address.gstNumber;
+
+            if(isCompanyAddress) {
+                this.autoFillShippingDetails('company');
+            } else {
+                this.autoFillShippingDetails('vendor');
+            }
+        }
+    }
 }
diff --git a/apps/web-giddh/src/app/purchase/purchase-advance-search/purchase-advance-search.component.html b/apps/web-giddh/src/app/purchase/purchase-advance-search/purchase-advance-search.component.html
index 8ff5c33fd10..89ac35fd99a 100644
--- a/apps/web-giddh/src/app/purchase/purchase-advance-search/purchase-advance-search.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-advance-search/purchase-advance-search.component.html
@@ -3,9 +3,9 @@
         <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
         <i class="icon-cross text-right close-modal" (click)="onCancel()"></i>
     </div>
-    <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+    <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
         <form name="purchaseOrderAdvanceSearch" novalidate autocomplete="off">
-            <div class="modal_wrap mr-b2">
+            <div class="modal-wrap mr-b2">
                 <div class="row">
                     <div class="col-sm-4 col-xs-12">
                         <label>Expected Delivery Date</label>
@@ -51,7 +51,7 @@ <h3 class="modal-title bg" id="modal-title">Advance Search </h3>
                 </div>
             </div>
             <div class="pull-right">
-                <button type="submit" class="btn btn-md btn-success mrR1" (click)="onSearch()">Search</button>
+                <button type="submit" class="btn btn-md btn-success mr-r1" (click)="onSearch()">Search</button>
                 <button type="submit" class="btn btn-md btn-cancel" (click)="onCancel()">Cancel</button>
             </div>
         </form>
diff --git a/apps/web-giddh/src/app/purchase/purchase-invoice/aside-menu/aside-menu-purchase-invoice-setting.component.html b/apps/web-giddh/src/app/purchase/purchase-invoice/aside-menu/aside-menu-purchase-invoice-setting.component.html
index 91ba002fcbc..f5008e6aa33 100644
--- a/apps/web-giddh/src/app/purchase/purchase-invoice/aside-menu/aside-menu-purchase-invoice-setting.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-invoice/aside-menu/aside-menu-purchase-invoice-setting.component.html
@@ -6,21 +6,21 @@ <h2 *ngIf="selectedService === 'JIO_GST'">Jio GST</h2>
         <h2 *ngIf="selectedService === 'TAXPRO' || 'VAYANA'">Choose Provider (GSP)</h2>
         <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
     </div>
-    <div class="form_body witBg clearfix margin-child-label">
-        <div class="form_bg clearfix">
+    <div class="form-body white-bg clearfix margin-child-label">
+        <div class="clearfix">
 
             <div class="form-group" *ngIf="selectedService === 'TAXPRO' || selectedService === 'VAYANA' ">
                 <!-- <h3 class="mr-b1">Choose Provider (GSP)</h3> -->
 
 
-                <span class="pd0 mrR3">
-                    <input id="vayana" class="radio-custom cp ml0" type="radio" name="serviceType" (change)="changeProvider('VAYANA')"
+                <span class="p-0 mr-r3">
+                    <input id="vayana" class="radio-custom cp ml-0" type="radio" name="serviceType" (change)="changeProvider('VAYANA')"
                     [checked]="selectedService === 'VAYANA'">
                     <label for="vayana" class="radio-custom-label">VAYANA</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="taxPro" class="radio-custom cp ml0" type="radio" name="serviceType" (change)="changeProvider('TAXPRO')"
+                <span class="p-0 mr-r3">
+                    <input id="taxPro" class="radio-custom cp ml-0" type="radio" name="serviceType" (change)="changeProvider('TAXPRO')"
                     [checked]="selectedService === 'TAXPRO'">
                     <label for="taxPro" class="radio-custom-label">TAX PRO</label>
                 </span>
@@ -30,14 +30,14 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
             <!-- GIO GST -->
             <form class="form-group" *ngIf="selectedService === 'JIO_GST'">
                 <div class="row">
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <div class="form-group">
                             <label for="jio_user_name">Username:</label>
                             <input autocomplete="off" type="email" name="username" class="form-control"
                                 id="jio_user_name" [(ngModel)]="jioGstForm.uid">
                         </div>
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <div class="form-group">
                             <label for="jio_password">Password:</label>
                             <input type="password" name="pwd" class="form-control" id="jio_password"
@@ -47,7 +47,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                 </div>
 
                 <div class="row">
-                    <div class="col-xs-12 mr-t1">
+                    <div class="col-md-12 mr-t1">
                         <button class="btn btn-success" (click)="save(jioGstForm)">Save</button>
                         <button class="btn btn-default" (click)="closeAsidePane($event)">Cancel</button>
                     </div>
@@ -57,21 +57,21 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
             <!-- TAX PRO -->
             <form class="form-group" *ngIf="selectedService === 'TAXPRO' || selectedService === 'VAYANA'">
                 <div class="row">
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <div class="form-group">
                             <label for="tax_pro_username">Username:</label>
                             <input autocomplete="off" type="text" name="username" class="form-control"
                                 id="tax_pro_username" [(ngModel)]="taxProForm.uid">
                         </div>
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <div class="form-group">
                             <label for="tax_pro_gst_number">GSTIN:</label>
                             <input autocomplete="off" type="text" name="gstin" class="form-control"
                                 id="tax_pro_gst_number" [(ngModel)]="taxProForm.gstin">
                         </div>
                     </div>
-                    <div class="col-xs-6" *ngIf="otpSentSuccessFully">
+                    <div class="col-6" *ngIf="otpSentSuccessFully">
                         <div class="form-group">
                             <label for="tax_pro_otp">OTP:</label>
                             <input autocomplete="off" type="text" name="otp" class="form-control" id="tax_pro_otp"
@@ -81,7 +81,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                 </div>
 
                 <div class="row">
-                    <div class="col-xs-12 mr-t1">
+                    <div class="col-md-12 mr-t1">
                         <button class="btn btn-success" (click)="save(taxProForm)">Save</button>
                         <button class="btn btn-default" (click)="closeAsidePane($event)">Cancel</button>
                     </div>
@@ -94,7 +94,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
 
                     <ng-container *ngIf="!(gstAuthenticated$ | async)">
                         <ng-container *ngIf="!(reconcileOtpSuccess$ | async)">
-                            <div class="col-xs-6">
+                            <div class="col-6">
                                 <div class="form-group">
                                     <label for="tax_pro_username">Username:</label>
                                     <input autocomplete="off" type="text" name="username" class="form-control"
@@ -104,7 +104,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                         </ng-container>
 
                         <ng-container *ngIf="(reconcileOtpSuccess$ | async)">
-                            <div class="col-xs-6" *ngIf="(reconcileOtpSuccess$ | async)">
+                            <div class="col-6" *ngIf="(reconcileOtpSuccess$ | async)">
                                 <div class="form-group">
                                     <label for="reconcile_otp">OTP:</label>
                                     <input autocomplete="off" type="text" name="otp" class="form-control"
@@ -114,7 +114,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                         </ng-container>
 
                         <ng-container>
-                            <div class="col-xs-6" *ngIf="activeCompanyGstNumber">
+                            <div class="col-6" *ngIf="activeCompanyGstNumber">
                                 <div class="form-group">
                                     <label for="reconcile_otp">GSTN:</label>
                                     <input autocomplete="off" type="text" name="otp" class="form-control"
@@ -124,7 +124,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                         </ng-container>
                     </ng-container>
                     <ng-container *ngIf="(gstAuthenticated$ | async)">
-                        <div class="col-xs-12">
+                        <div class="col-md-12">
                             <span>
                                 Gst No - {{ (companyGst$ | async) }} Verified Successfully
                             </span>
@@ -133,7 +133,7 @@ <h2 *ngIf="selectedService === 'RECONCILE'">Gst Reconcile</h2>
                 </div>
 
                 <div class="row">
-                    <div class="col-xs-12 mr-t1">
+                    <div class="col-md-12 mr-t1">
                         <button class="btn btn-success" (click)="generateReconcileOtp(reconcileForm)"
                             *ngIf="!(reconcileOtpSuccess$ | async)" [ladda]="reconcileOtpInProcess$ | async"
                             [disabled]="!reconcileForm.uid">Submit
diff --git a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.html b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.html
index 820f8950d8f..03e4ec39a1c 100644
--- a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.html
@@ -1,7 +1,7 @@
 <section id="purchaseInvoice" class="container-fluid mr-t2">
     <form class="">
         <div class="">
-            <div class="form-group max250 pull-left mrR1">
+            <div class="form-group max250 pull-left mr-r1">
                 <label>GSTR Form</label>
                 <div class="btn-group btn-block" dropdown>
                     <button dropdownToggle type="button" data-toggle="dropdown" class="form-control text-left">
@@ -18,7 +18,7 @@
                     </ul>
                 </div>
             </div>
-            <div class="form-group max250 pull-left mrR1" [hidden]="!selectedGstrType.name">
+            <div class="form-group max250 pull-left mr-r1" [hidden]="!selectedGstrType.name">
                 <ng-container *ngIf="!showSingleDatePicker">
                     <label class="d-block">From - to</label>
                     <div class="btn-group  dropdown" dropdown [autoClose]="false" container="body"
@@ -96,9 +96,9 @@
                                     <!-- [(ngModel)]="selectedDateForGSTR1" -->
                                     <!-- <datepicker [datepickerMode]="'month'" name="fromDate" (click)="$event.stopPropagation()" (selectionDone)="showGSTR1DatePicker=!showGSTR1DatePicker;monthChanged($event)" [showWeeks]="false" [minMode]="'month'"></datepicker> -->
                                 </li>
-                                <li class="pd-1 clearfix pdT pdB">
+                                <li class="pd-1 clearfix pd-t05 pd-b05">
                                     <span class="btn-group pull-left">
-                                        <button type="button" class="btn btn-xs btn-primary mrR"
+                                        <button type="button" class="btn btn-xs btn-primary mr-r05"
                                             (click)="setCurrentMonth();showGSTR1DatePicker = false;">Reset</button>
                                         <button type="button" class="btn btn-xs btn-success"
                                             (click)="showGSTR1DatePicker = false">Done</button>
@@ -123,9 +123,9 @@
                             <li>
                                 <datepicker [datepickerMode]="'month'" name="fromDate" (click)="$event.stopPropagation()" [(ngModel)]="selectedDateForGSTR1" (selectionDone)="showGSTR1DatePicker=!showGSTR1DatePicker;monthChanged($event)" [showWeeks]="false" [minMode]="'month'"></datepicker>
                             </li>
-                            <li class="pd-1 clearfix pdT pdB">
+                            <li class="pd-1 clearfix pd-t05 pd-b05">
                                 <span class="btn-group pull-left">
-                                    <button type="button" class="btn btn-xs btn-primary mrR" (click)="setCurrentMonth();showGSTR1DatePicker = false;">Reset</button>
+                                    <button type="button" class="btn btn-xs btn-primary mr-r05" (click)="setCurrentMonth();showGSTR1DatePicker = false;">Reset</button>
                                     <button type="button" class="btn btn-xs btn-success" click)="showGSTR1DatePicker = false">Done</button>
                                 </span>
                                 <button type="button" class="btn btn-xs btn-link pull-right" (click)="clearDate();showGSTR1DatePicker = false;">Clear</button>
@@ -134,7 +134,7 @@
                     </div> -->
                 </div>
             </div>
-            <div class="form-group max250 pull-left mrR1" *ngIf="selectedGstrType.name === 'GSTR3B'">
+            <div class="form-group max250 pull-left mr-r1" *ngIf="selectedGstrType.name === 'GSTR3B'">
                 <label>Email <i class='fa fa-info-circle' tooltip-placement="top"
                         tooltip="If no email id is provided, email will be by default sent to you/company creator"></i></label>
                 <input type="text" name="userEmail" [(ngModel)]="userEmail" class="form-control" required
@@ -144,7 +144,7 @@
     <div class="form-group col-xs-2" [hidden]="!selectedGstrType || selectedGstrType=='GSTR1'">
         <label>Report</label>
         <div class="btn-group btn-block" dropdown>
-            <button dropdownToggle type="button" data-toggle="dropdown" class="form-control text-left btn-block dropdown-toggle">-- Select Report --<span class="select_drop pull-right mr-t1"><i class="fa fa-caret-down"></i></span>
+            <button dropdownToggle type="button" data-toggle="dropdown" class="form-control text-left btn-block dropdown-toggle">-- Select Report --<span class="select-drop pull-right mr-t1"><i class="fa fa-caret-down"></i></span>
  </button>
             <ul *dropdownMenu class="dropdown-menu pageListDD" role="menu">
                 <li class="cp" *ngFor="let item of purchaseReportOptions">
@@ -168,7 +168,7 @@
                         [isDisabled]="!selectedGstrType.name">
                         <button dropdownToggle type="button" data-toggle="dropdown" class="form-control text-left"> File
                             {{ selectedGstrType.name }}
-                            <span class="pull-right mrL4">
+                            <span class="pull-right mr-l4">
                                 <i class="fa fa-caret-down"></i>
                             </span>
                         </button>
@@ -198,18 +198,18 @@
                             <!--<li class="cursor-pointer dd-options" *ngFor="let item of fileGstrOptions" (click)="onDownloadSheetGSTR();">{{item.name}}</li>-->
                         </ul>
                     </div>
-                    <small [hidden]="!isDownloadingFileInProgress" class="inline primary_clr"> Downloading...</small>
+                    <small [hidden]="!isDownloadingFileInProgress" class="inline primary-color"> Downloading...</small>
                 </div>
             </div>
             <!-- hide due to unused -->
             <div class="form-group pull-right" *ngIf="selectedGstrType.name === 'GSTR1'">
                 <label class="d-block">&nbsp;</label>
-                <button class="btn btn-default pull-right primary_clr"
+                <button class="btn btn-default pull-right primary-color"
                     (click)="toggleSettingAsidePane($event, 'JIO_GST');"><i class="fa fa-cog" aria-hidden="true"></i>
                     Jio GST
                 </button>
                 <span style="margin: 5px 10px;" class="pull-right">OR</span>
-                <button class="btn btn-default pull-right primary_clr"
+                <button class="btn btn-default pull-right primary-color"
                     (click)="toggleSettingAsidePane($event, 'TAXPRO');"><i class="fa fa-cog" aria-hidden="true"></i> Tax
                     Pro
                 </button>
@@ -247,7 +247,7 @@ <h1 class="section-title"> <strong>Purchase Report </strong> <small>(To file you
                             <div class="btn-group btn-block" dropdown>
                                 <button dropdownToggle type="button" data-toggle="dropdown"
                                     class="form-control text-left btn-block dropdown-toggle"> Filter <span
-                                        class="select_drop pull-right mr-t1"> <i class="fa fa-caret-down"></i> </span>
+                                        class="select-drop pull-right mr-t1"> <i class="fa fa-caret-down"></i> </span>
                                 </button>
                                 <ul *dropdownMenu class="dropdown-menu pageListDD" role="menu">
                                     <li *ngFor="let item of otherFilters">
@@ -327,7 +327,7 @@ <h1 class="section-title"> <strong>Purchase Report </strong> <small>(To file you
                     </td>
                     <td>{{invoice.voucherNo}}</td>
                     <td class="select text-center">
-                        <div *ngIf="timeCounter == 10 || selectedRowIndex != i" class="custom-select pos-rel">
+                        <div *ngIf="timeCounter == 10 || selectedRowIndex != i" class="custom-select position-relative">
                             <select [(ngModel)]="invoice.entryType" name="entryType" class="form-control cp"
                                 (change)="onChangeEntryType(i, invoice.entryType, invoice.account.uniqueName);"
                                 [disabled]="invoice.invoiceGenerated || invoice.taxes[0] || (selectedRowIndex != i && editMode) || (invoice.invoiceNumber && invoice.invoiceNumber.length) || selectedRowIndex == null ">
@@ -339,19 +339,19 @@ <h1 class="section-title"> <strong>Purchase Report </strong> <small>(To file you
                                     *ngIf="!(invoice.account.gstIn?.length >0 || ( invoice.igstAmount!='0' || invoice.cgstAmount!='0')) && !invoice.invoiceNumber">
                                     Reverse Charge</option>
                             </select>
-                            <span class="select_drop"> <i class="fa fa-caret-down"></i> </span> </div>
+                            <span class="select-drop"> <i class="fa fa-caret-down"></i> </span> </div>
                         <button
                             *ngIf="(timeCounter != 10 && selectedRowIndex == i && invoice.invoiceNumber) || (timeCounter != 10 && selectedRowIndex == i && !invoice.invoiceNumber)"
                             (click)="onUndoEntryTypeChange(i, invoice)" class="btn btn-link">Undo in
                             {{timeCounter}}s</button>
-                        <div class="btn-group btn-block mr-t" dropdown (onShown)="onDDShown()"
+                        <div class="btn-group btn-block mr-t05" dropdown (onShown)="onDDShown()"
                             (onHidden)="onDDHidden(invoice.entryUniqueName, invoice.account.uniqueName)"
                             *ngIf="isReverseChargeSelected && invoice.entryType == 'reverse charge' && !invoice.invoiceGenerated && !invoice.invoiceNumber && selectedRowIndex == i"
                             [autoClose]="false">
                             <button dropdownToggle type="button"
                                 class="form-control text-left btn-block dropdown-toggle"
                                 [disabled]="selectedRowIndex != i"> {{dropdownHeading}} <span
-                                    class="select_drop pull-right mr-t1"> <i class="fa fa-caret-down"></i> </span>
+                                    class="select-drop pull-right mr-t1"> <i class="fa fa-caret-down"></i> </span>
                             </button>
                             <ul id="pageListDD" *dropdownMenu class="dropdown-menu" role="menu">
                                 <!-- <li>
diff --git a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.css b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.scss
similarity index 86%
rename from apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.css
rename to apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.scss
index 3b41361de34..49395691abd 100644
--- a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.css
+++ b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.scss
@@ -5,29 +5,29 @@
 }
 
 .input-err {
-    border-color: #ce1b1b;
+    border-color: $scarlet;
 }
 
 .input-warn {
-    border-color: #f2e200;
+    border-color: $bright-yellow;
 }
 
 .btn-generate {
     margin-top: 4px;
-    color: #fff;
+    color: $white;
 }
 
 .btn-generate:disabled {
-    background: #e5e5e5;
+    background: $silver;
 }
 
 .search-form .input-group-btn {
     width: 35px;
     font-size: inherit;
-    border: 1px solid #d6d6d6;
+    border: 1px solid $gainsboro;
     text-align: center;
-    color: #999999;
-    background: #fff;
+    color: $nobel;
+    background: $white;
     border-right: 0;
     vertical-align: middle;
     line-height: 32px;
@@ -47,7 +47,7 @@
 }
 
 .dd-options:hover {
-    color: rgb(211, 95, 41);
+    color: $orange;
 }
 
 .bt-border-1px {
@@ -59,14 +59,14 @@
 }
 
 .return-body .main-wrapper {
-    background-color: #f5f5f5;
+    background-color: $gray-95;
     padding: 0;
-    border-right: 1px solid #eee;
+    border-right: 1px solid $gainsboro;
 }
 
 .return-content {
     padding: 31px 4% 15px;
-    background-color: #fff;
+    background-color: $white;
 }
 
 .btn-primary,
@@ -93,7 +93,7 @@ fieldset[disabled] .btn-primary:hover .btn-primary[disabled],
 .open .dropdown-toggle.btn-primary,
 .receipt-wrapper .doc-checkbox:checked,
 .doc-actions {
-    color: #fff;
+    color: $white;
     background-color: #ea795b;
     border-color: #ea795b;
 }
@@ -137,7 +137,7 @@ svg.icon.icon-xxlg-md {
 }
 
 .return-content .return-filed {
-    background-color: #00b177;
+    background-color: $jade-color;
 }
 
 .text-uppercase {
@@ -145,7 +145,7 @@ svg.icon.icon-xxlg-md {
 }
 
 .text-muted {
-    color: #777;
+    color: $dark-gray;
 }
 
 .return-content .content-graph {
@@ -173,7 +173,7 @@ svg.icon.gstr-icon {
 
 .return-content .line {
     margin: 5px 18px;
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .return-content .line::before {
@@ -182,14 +182,14 @@ svg.icon.gstr-icon {
     width: 9px;
     height: 9px;
     border-radius: 5px;
-    background-color: #ededed;
+    background-color: $whisper-light;
     position: relative;
     top: 5px;
     right: 19px;
 }
 
 .return-content .count a {
-    color: #0f6bde;
+    color: $primary;
 }
 
 .font-xxxlarge {
@@ -197,7 +197,7 @@ svg.icon.gstr-icon {
 }
 
 .return-content .count a {
-    color: #0f6bde;
+    color: $primary;
 }
 
 .bottom-action,
@@ -242,14 +242,14 @@ svg.icon.icon-xxlg-md {
 }
 
 .btn-default {
-    color: #333;
-    background-color: #f5f5f5;
-    border-color: #ddd;
+    color: $night-rider;
+    background-color: $gray-95;
+    border-color: $gainsboro;
 }
 
 .return-body .notification {
     padding-top: 25px;
-    background: #fff;
+    background: $white;
 }
 
 .filing-demo-video {
@@ -278,13 +278,13 @@ svg.icon.icon-xxlg-md {
 }
 
 .label-default {
-    background-color: #999;
+    background-color: $nobel;
 }
 
 hr {
     margin-top: 20px;
     margin-bottom: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .filing-due-date {
@@ -293,7 +293,7 @@ hr {
 
 .filing-due-date .return-details {
     margin-top: 10px;
-    border: 1px solid #eee;
+    border: 1px solid $gainsboro;
     border-radius: 4px;
 }
 
@@ -315,7 +315,7 @@ hr {
     display: inline-block;
     margin-right: 6px;
     vertical-align: middle;
-    background-color: #41aaff;
+    background-color: $vivid-blue;
 }
 
 .filing-due-date .return-details > table > tbody > tr > td:last-child {
@@ -329,7 +329,7 @@ hr {
 
 .return-body .notification .notify-title {
     font-size: 13px;
-    color: #999;
+    color: $nobel;
 }
 
 .return-body .notification .activity-graph {
@@ -348,14 +348,14 @@ hr {
     left: 4px;
     bottom: 5px;
     height: 75%;
-    border-left: 1px solid #e4e4e4;
+    border-left: 1px solid $gainsboro;
 }
 
 .return-body .notification .activity-graph .notify-circle {
     width: 9px;
     height: 9px;
     border-radius: 50%;
-    background-color: #2a85fb;
+    background-color: $primary;
     display: inline-block;
     margin-right: 15px;
     margin-top: 4px;
@@ -374,12 +374,12 @@ hr {
 
 .notify label.font-xs.text-muted strong {
     font-weight: 600;
-    color: #777 !important;
+    color: $gray !important;
 }
 
 .font-normal {
     font-size: 13px;
-    color: #777;
+    color: $gray;
 }
 
 .return-body .notification .faq-list {
@@ -388,25 +388,25 @@ hr {
 
 .return-body .notification .faq-list li {
     padding: 6px 10px;
-    color: #428bca;
+    color: $curious-blue;
     font-size: 13px;
 }
 
 .return-body .notification .faq-list li a:hover {
-    color: #005bd0;
+    color: $primary;
 }
 
 #c-tab ::ng-deep .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:focus,
 .nav-tabs > li.active > a:hover {
-    color: #555;
+    color: $dark-gray;
     cursor: default;
-    background-color: #fff;
-    border: 2px solid #ddd;
+    background-color: $white;
+    border: 2px solid $gainsboro;
     border-right: 0 !important;
     border-left: 0 !important;
     border-top: 0 !important;
-    border-bottom-color: #025cff;
+    border-bottom-color: $primary;
 }
 
 .daterangePicker {
diff --git a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.ts b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.ts
index b30fb1498ca..45379addf39 100644
--- a/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.ts
+++ b/apps/web-giddh/src/app/purchase/purchase-invoice/purchase.invoice.component.ts
@@ -51,7 +51,7 @@ const fileGstrOptions = [
 @Component({
     selector: 'invoice-purchase',
     templateUrl: './purchase.invoice.component.html',
-    styleUrls: ['purchase.invoice.component.css'],
+    styleUrls: ['purchase.invoice.component.scss'],
     providers: [
         {
             provide: BsDropdownConfig, useValue: { autoClose: true },
diff --git a/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.html b/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.html
index ff067963fb6..061bd49885f 100644
--- a/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.html
@@ -28,7 +28,7 @@
                                         </div>
                                     </div>
                                     <div class="col-5 col-sm-5">
-                                        <div class="inovice-amount pull-right">
+                                        <div class="invoice-amount pull-right">
                                             {{row.grandTotal?.amountForAccount | giddhCurrency}}
                                         </div>
                                     </div>
@@ -41,7 +41,7 @@
             </div>
             <!-- endregion -->
 
-            <div class="col-sm-12 col-lg-8 pd0 invoice-detail-wrapper">
+            <div class="col-sm-12 col-lg-8 p-0 invoice-detail-wrapper">
 
                 <div class="scroll-half">
                     <div class="invoice-detail">
@@ -138,7 +138,7 @@ <h3 class="invoice-number">{{purchaseOrder?.number}}</h3>
                     </div>
                     <div class="invoice-image-section">
                         <div class="relative">
-                            <div class="pos-rel" *ngIf="!pdfPreviewHasError && !pdfPreviewLoaded">
+                            <div class="position-relative" *ngIf="!pdfPreviewHasError && !pdfPreviewLoaded">
                                 <div class="loader"></div>
                             </div>
                             <div class="error" [hidden]="!pdfPreviewHasError">
diff --git a/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.scss b/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.scss
index e682a75e846..6eedbfc233f 100644
--- a/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.scss
+++ b/apps/web-giddh/src/app/purchase/purchase-order-preview/purchase-order-preview.component.scss
@@ -77,7 +77,7 @@
     border-bottom: none;
 }
 
-.invoice-sidebar .inovice-amount {
+.invoice-sidebar .invoice-amount {
     font-size: 12px;
     line-height: 3.4;
 }
@@ -127,10 +127,10 @@
 .invoice-detail-header .edit-change-status .edit-action-btn-groups {
     display: flex;
     background-color: $white;
-    border: 1px solid $very-light-gray;
+    border: 1px solid $gainsboro;
     margin-right: 10px;
     span {
-        border-left: 1px solid $very-light-gray;
+        border-left: 1px solid $gainsboro;
         padding: 5px;
         height: 30px;
         width: 30px;
@@ -257,7 +257,7 @@ span.close-modal.cp.pull-right {
 .invoice-edit-wrapper {
     height: 100vh;
     overflow-y: auto;
-    .invoice-editHeader {
+    .invoice-edit-header {
         display: flex;
         justify-content: space-between;
         height: 54px;
@@ -285,7 +285,7 @@ span.close-modal.cp.pull-right {
             transform: inherit;
         }
     }
-    .invoice-editBody {
+    .invoice-edit-body {
         padding-bottom: 140px;
     }
 }
@@ -296,18 +296,18 @@ span.close-modal.cp.pull-right {
     right: 0;
 }
 
-.sendEmailModal {
+.send-email-modal {
     min-width: 240px;
     position: absolute;
     top: 40px;
     z-index: 10;
     right: 0;
     border: 1px solid $gainsboro;
-    .sendEmailModalWrapper {
+    .send-email-modal-wrapper {
         background-color: $white;
         box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
         height: 200px;
-        .sendEmailModalHeader {
+        .send-email-modal-header {
             background-color: $whisper-color;
             padding: 8px 10px;
             border-bottom: 1px solid $gainsboro;
@@ -316,10 +316,10 @@ span.close-modal.cp.pull-right {
             }
         }
     }
-    .sendEmailModalBody {
+    .send-email-modal-body {
         padding: 5px;
     }
-    .sendEmailModalBody label {
+    .send-email-modal-body label {
         font-size: 12px;
         margin-bottom: 7px;
     }
@@ -372,7 +372,7 @@ span.close-modal.cp.pull-right {
     color: $success-green;
 }
 
-.file-uplod-penal {
+.file-upload-panel {
     width: 100%;
     text-align: left;
     border: 1px solid $gainsboro;
@@ -701,7 +701,7 @@ p {
 
 #default .subfooter hr {
     width: 100%;
-    border-bottom: 1px solid $very-light-gray;
+    border-bottom: 1px solid $gainsboro;
     margin: 3px 0;
 }
 
diff --git a/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.html b/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.html
index 0f03ff6b98b..c617225134a 100644
--- a/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid pt-15" *ngIf="!purchaseOrderUniqueName">
+<div class="container-fluid pd-t15" *ngIf="!purchaseOrderUniqueName">
     <div class="d-flex justify-content-between purchase-order-header">
         <div class="d-flex date-advance-search">
             <form #invoiceForm="ngForm" novalidate class="form-inline">
@@ -98,11 +98,11 @@
         </div>
     </div>
     <div class="table-responsive">
-        <table class="table basic mt-15 table-bordered giddh-table on-mobile-view">
-            <thead class="t-h-bg1" (mouseleave)="showSelectAllItemCheckbox = false">
+        <table class="table basic mr-t15 table-bordered giddh-table on-mobile-view">
+            <thead class="thead-background1" (mouseleave)="showSelectAllItemCheckbox = false">
                 <tr (mouseenter)="showSelectAllItemCheckbox = true">
                     <th class="min-wid-check" width="3%">
-                        <div class="mh18-img">
+                        <div class="check-img">
                             <span *ngIf="!showSelectAllItemCheckbox && !allItemsSelected">#</span>
                             <div class="table-checkbox-field" *ngIf="showSelectAllItemCheckbox || allItemsSelected">
                                 <img src="assets/images/unchecked.png" *ngIf="!allItemsSelected"
@@ -183,7 +183,7 @@
                 <tr *ngFor="let item of purchaseOrders.items; let i = index;" (mouseenter)="hoveredItem = item.uniqueName">
                     <td data-title="#">
                         <span *ngIf="hoveredItem !== item.uniqueName && !item.isSelected && selectedItem !== item.uniqueName">{{ (purchaseOrderGetRequest.count * (purchaseOrderGetRequest.page - 1)) + (i+1) }}</span>
-                        <div class="mh18-img" *ngIf="hoveredItem === item.uniqueName || item.isSelected || selectedItem === item.uniqueName">
+                        <div class="check-img" *ngIf="hoveredItem === item.uniqueName || item.isSelected || selectedItem === item.uniqueName">
                             <img *ngIf="!item.isSelected" src="assets/images/unchecked.png"
                                 (click)="toggleItem(item, true)" />
                             <img *ngIf="item.isSelected" src="assets/images/checked.png"
@@ -263,7 +263,7 @@ <h4 class="modal-title pull-left">Bulk Update</h4>
                 <div class="d-flex flex-column">
                     <p class="mb-3">Choose a field from the dropdown and update with new information.</p>
                     <div class="d-flex justify-content-between mb-3 modal-form">
-                        <sh-select class="mr-15" name="bulkUpdate" [(ngModel)]="bulkUpdateGetParams.action" [options]="bulkUpdateFields" [ItemHeight]="33"></sh-select>
+                        <sh-select class="mr-r15" name="bulkUpdate" [(ngModel)]="bulkUpdateGetParams.action" [options]="bulkUpdateFields" [ItemHeight]="33"></sh-select>
                         <div class="select-date" *ngIf="bulkUpdateGetParams.action === 'purchasedate' || bulkUpdateGetParams.action === 'duedate' || bulkUpdateGetParams.action === 'warehouse'">
                             <div class="input-group">
                                 <input type="text" class="form-control" bsDatepicker [bsConfig]="{ dateInputFormat: giddhDateFormat }" name="purchaseDate" [(ngModel)]="bulkUpdatePostParams.purchaseDate" placeholder="Select date" *ngIf="bulkUpdateGetParams.action === 'purchasedate'">
@@ -306,17 +306,17 @@ <h4 class="modal-title pull-left">Bulk Update</h4>
 <ng-template #sortTemplate let-column="column">
     <div class="icon-sort-asc" *ngIf="purchaseOrderGetRequest.sortBy !== column"
         (click)="sortPurchaseOrders('asc', column)"
-        [ngClass]="{'activeTextColor': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'asc'}">
+        [ngClass]="{'active-text-color': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'asc'}">
     </div>
     <div class="icon-sort-asc"
         *ngIf="purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'asc'"
         (click)="sortPurchaseOrders('desc', column)"
-        [ngClass]="{'activeTextColor': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'asc'}">
+        [ngClass]="{'active-text-color': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'asc'}">
     </div>
     <div class="icon-sort-dsc"
         *ngIf="purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'desc'"
         (click)="sortPurchaseOrders('asc', column)"
-        [ngClass]="{'activeTextColor': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'desc'}">
+        [ngClass]="{'active-text-color': purchaseOrderGetRequest.sortBy === column && purchaseOrderGetRequest.sort === 'desc'}">
     </div>
 </ng-template>
 <div bsModal #poConfirmationModel="bs-modal" class="modal fade" role="dialog" [config]="{keyboard:true}" tabindex="-1">
diff --git a/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.scss b/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.scss
index b83b31b2712..640ecef0534 100644
--- a/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.scss
+++ b/apps/web-giddh/src/app/purchase/purchase-order/purchase-order.component.scss
@@ -72,7 +72,7 @@
     }
 }
 
-.mh18-img img {
+.check-img img {
     max-height: 17px;
     cursor: pointer;
 }
@@ -319,7 +319,7 @@
 
     .min-wid-check{
         min-width:20px;
-        .mh18-img{
+        .check-img{
             width:20px;
         }
     }
diff --git a/apps/web-giddh/src/app/purchase/purchase-record/component/purchase-record.component.html b/apps/web-giddh/src/app/purchase/purchase-record/component/purchase-record.component.html
index e022737dbc1..3bd09b50923 100644
--- a/apps/web-giddh/src/app/purchase/purchase-record/component/purchase-record.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-record/component/purchase-record.component.html
@@ -10,7 +10,7 @@
             </tab>
             <tab heading="Purchase Bill" [active]="activeTab == 'bill'" (selectTab)="onTabChanged('bill')"
             [id]="(activeTab == 'bill') ? 'giddh-page-heading': ''">
-                <div *ngIf="activeTab == 'bill'" class="pt-15">
+                <div *ngIf="activeTab == 'bill'" class="pd-t15">
                     <app-invoice-preview [selectedVoucher]="'purchase'" [refreshPurchaseBill]="refreshPurchaseBill" (resetRefreshPurchaseBill)="purchaseOrderOutput($event)"></app-invoice-preview>
                 </div>
             </tab>
diff --git a/apps/web-giddh/src/app/purchase/purchase-setting/purchase-setting.component.html b/apps/web-giddh/src/app/purchase/purchase-setting/purchase-setting.component.html
index bf497585b56..2783616e517 100644
--- a/apps/web-giddh/src/app/purchase/purchase-setting/purchase-setting.component.html
+++ b/apps/web-giddh/src/app/purchase/purchase-setting/purchase-setting.component.html
@@ -1,16 +1,16 @@
 <section id="setting-tab-wrapper" class="setting-tab-data">
-    <div id="invoice-setting" class="invoice-control mt-15">
-        <tabset class="tab-integraton purchase-setting-tab">
+    <div id="invoice-setting" class="invoice-control mr-t15">
+        <tabset class="tab-integration purchase-setting-tab">
             <tab>
                 <ng-template tabHeading>
                     <span class="icon-mail"></span> Integration
                 </ng-template>
                 <div class="single-tab-block">
                     <div class="box clearfix mb-2">
-                        <h4 class="clearfix bdrB">Integration<span> (These settings will be applicable on Purchase Order and Bill)</span></h4>
+                        <h4 class="clearfix bd-rb">Integration<span> (These settings will be applicable on Purchase Order and Bill)</span></h4>
                         <div class="clearfix">
                             <div class="row">
-                                <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>From Email</label></div>
+                                <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>From Email</label></div>
                                 <div class="col-sm-12 col-md-12 col-lg-9">
                                     <div class="row">
                                         <div class="col-md-5 col-sm-12 col-xs-12">
@@ -26,7 +26,7 @@ <h4 class="clearfix bdrB">Integration<span> (These settings will be applicable o
                                         </div>
                                         <div class="col-md-6 col-sm-12 row pl-0">
                                             <div class="btn-wrapper d-flex align-items-center justify-content-center">
-                                                <button class="btn btn-success mr-15" (click)="verifyEmail(invoiceSettings.purchaseBillSettings.email)" [disabled]="!isEmailChanged && (!invoiceSettings.purchaseBillSettings.email || invoiceSettings.purchaseBillSettings.email.length < 4 || invoiceSettings.purchaseBillSettings.emailVerified)" *ngIf="!invoiceSettings.purchaseBillSettings.emailVerified">Verify</button>
+                                                <button class="btn btn-success mr-r15" (click)="verifyEmail(invoiceSettings.purchaseBillSettings.email)" [disabled]="!isEmailChanged && (!invoiceSettings.purchaseBillSettings.email || invoiceSettings.purchaseBillSettings.email.length < 4 || invoiceSettings.purchaseBillSettings.emailVerified)" *ngIf="!invoiceSettings.purchaseBillSettings.emailVerified">Verify</button>
                                                 <span *ngIf="invoiceSettings.purchaseBillSettings.emailVerified" class="verified-text">Verified</span>
                                                 <span class="delete-verified-icon" [ngClass]="{'delete-icon-opacity' : !invoiceSettings.purchaseBillSettings.email || invoiceSettings.purchaseBillSettings.email.length < 4, 'cursor-pointer': !(!invoiceSettings.purchaseBillSettings.email || invoiceSettings.purchaseBillSettings.email.length < 4)}" (click)="!(!invoiceSettings.purchaseBillSettings.email || invoiceSettings.purchaseBillSettings.email.length < 4) ? deleteEmail(invoiceSettings.purchaseBillSettings.email) : ''"><i class="icon-trash"></i></span>
                                             </div>
@@ -61,17 +61,17 @@ <h4 class="clearfix bdrB">Integration<span> (These settings will be applicable o
                 </ng-template>
                 <div class="sales-order-tab single-tab-block">
                     <div class="box clearfix mb-2">
-                        <h4 class="clearfix bdrB">Purchase Order</h4>
+                        <h4 class="clearfix bd-rb">Purchase Order</h4>
                         <div class="clearfix">
                             <div class="row">
-                                <div class="col-sm-12 col-md-12 col-lg-3 lh34"><label>Default expiry days</label></div>
+                                <div class="col-sm-12 col-md-12 col-lg-3 lh-34"><label>Default expiry days</label></div>
                                 <div class="col-sm-12 col-md-12 col-lg-9">
                                     <div class="default-expiry row">
                                         <div class="col-md-5">
                                             <div class="form-group">
                                                 <div class="expiry-days" [ngClass]="{'input-group': true}">
                                                     <input type="tel" class="form-control" maxlength="3" placeholder="00" decimalDigitsDirective name="poDuePeriod" [(ngModel)]="invoiceSettings.purchaseBillSettings.poDuePeriod" />
-                                                    <span class="ml-05"> Days </span>
+                                                    <span class="mr-l05"> Days </span>
                                                 </div>
                                             </div>
                                         </div>
@@ -114,11 +114,11 @@ <h4 class="clearfix bdrB">Purchase Order</h4>
                                         <div class="form-group clearfix">
                                             <input type="checkbox" class="hide-on-mobile" name="useCustomPONumber" [(ngModel)]="invoiceSettings.purchaseBillSettings.useCustomPONumber" />
                                             <div class=" d-inline-flex custom-estimation" *ngIf="invoiceSettings.purchaseBillSettings.useCustomPONumber">
-                                                <div class="d-inline-flex pos-rel">
+                                                <div class="d-inline-flex position-relative">
                                                     <label>Initial No.</label>
                                                     <input type="text" class="form-control text-right initial-number" name="initialNumber" [(ngModel)]="invoiceSettings.purchaseBillSettings.initialPONumber">
                                                 </div>
-                                                <div class="d-inline-flex pos-rel">
+                                                <div class="d-inline-flex position-relative">
                                                     <label class="r-0">Prefix</label>
                                                     <input type="text" class="form-control text-right" name="prefixNumber" [(ngModel)]="invoiceSettings.purchaseBillSettings.poNumberPrefix">
                                                 </div>
@@ -138,7 +138,7 @@ <h4 class="clearfix bdrB">Purchase Order</h4>
                 </ng-template>
                 <div class="single-tab-block">
                     <div class="box clearfix mb-2">
-                        <h4 class="clearfix bdrB">Purchase Bill</h4>
+                        <h4 class="clearfix bd-rb">Purchase Bill</h4>
                         <div class="clearfix">
                             <div class="clearfix">
                                 <div class="row">
@@ -174,7 +174,7 @@ <h4 class="clearfix bdrB">Purchase Bill</h4>
 </section>
 <ng-template #buttonsSection>
     <div class="btn-group mrT2" role="group" aria-label="Basic example">
-        <button type="button" class="btn btn-success mrR1" (click)="updateForm()">Save</button>
+        <button type="button" class="btn btn-success mr-r1" (click)="updateForm()">Save</button>
         <button type="button" class="btn btn-cancel" (click)="resetForm()">Cancel</button>
     </div>
 </ng-template>
diff --git a/apps/web-giddh/src/app/reports/components/adjust-invoice-modal/adjust-invoice-modal.component.html b/apps/web-giddh/src/app/reports/components/adjust-invoice-modal/adjust-invoice-modal.component.html
index 755c0e13277..f2836582b39 100644
--- a/apps/web-giddh/src/app/reports/components/adjust-invoice-modal/adjust-invoice-modal.component.html
+++ b/apps/web-giddh/src/app/reports/components/adjust-invoice-modal/adjust-invoice-modal.component.html
@@ -13,7 +13,7 @@ <h4><span class="font-14 middle mr-1">Advance Receipt</span> <span class="font-2
 
                 <div class="invoice-preview  table-responsive">
                     <table class="table basic table-bordered mr-t2 on-mobile-view">
-                        <thead class="t-h-bg1">
+                        <thead class="thead-background1">
                             <tr>
                                 <th>Invoice #</th>
                                 <th>Invoice Date</th>
@@ -50,7 +50,7 @@ <h4><span class="font-14 middle mr-1">Advance Receipt</span> <span class="font-2
                 </div>
 
                     <div class="clearfix mt-4">
-                        <button type="button" class="btn btn-success mrR1" (click)="confirm()" >Search</button>
+                        <button type="button" class="btn btn-success mr-r1" (click)="confirm()" >Search</button>
                         <button type="button" class="btn btn-cancel" (click)="decline()" >Cancel</button>
                     </div>
             </div>
diff --git a/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.html b/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.html
index 95f31ae4212..2c35b7e3665 100644
--- a/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.html
+++ b/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.html
@@ -2,11 +2,11 @@
 <div class="reverse-table-report">
     <div class="container-fluid">
 
-        <div class="mt-15 mb-15 input-grp-dateRangePicker d-flex">
+        <div class="mr-t15 mr-b15 input-grp-date-range-picker d-flex">
             <!-- Invoice filter section -->
-            <div class="mrR1 d-flex w-100">
+            <div class="mr-r1 d-flex w-100">
                 <div class="d-flex">
-                    <div class="input-group linked-entities mr-15" *ngIf="currentCompanyBranches?.length > 2">
+                    <div class="input-group linked-entities mr-r15" *ngIf="currentCompanyBranches?.length > 2">
                         <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false"
                             [ItemHeight]="33" class="entity-dropdown" width="100%" (selected)="handleBranchChange($event)" [isFilterEnabled]="true"
                             placeholder="Select Entity" [fixedValue]="currentBranch?.alias">
@@ -21,7 +21,7 @@
                                         </span>
                                         <span class="entity-details">
                                             <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                            <div class="item-unq giddh-limit single-line-clamp">
+                                            <div class="item-unique giddh-limit single-line-clamp">
                                                 {{ option.name || '-' }}
                                             </div>
                                         </span>
@@ -39,7 +39,7 @@
                     </div>
 
                 </div>
-                <div class="clear-filter ml-15 align-items-center d-flex justify-content-center" *ngIf="showClearFilter">
+                <div class="clear-filter mr-l15 align-items-center d-flex justify-content-center" *ngIf="showClearFilter">
                     <button class="btn btn-filter mr-0" (click)="resetAdvanceSearch()"><span class="icon-cross"></span> Clear
                         Filter</button>
                 </div>
@@ -54,12 +54,12 @@
         </div>
 
 
-        <div class="invoice-preview  table-responsive">
+        <div class="invoice-preview table-responsive">
             <table class="table basic giddh-table on-mobile-view">
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr>
                         <th>#</th>
-                        <th #receiptNumberParent width="13%" class="bdrR bdrB td-search-box">
+                        <th #receiptNumberParent width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="showReceiptSearchBar">
                                 <span>Receipt #</span>
                                 <i class="icon-search" (click)="searchBy(null, 'receipt', true)"></i>
@@ -84,7 +84,7 @@
 
                         <th width="15%">
                             Type
-                            <div class="voucher-type-dropdown">
+                            <div class="voucher-type-dropdown pull-right">
                                 <div class="btn-group d-inline-block" dropdown container="body"
                                     placement="bottom right">
                                     <a href="javascript:void(0)" id="button-basic" dropdownToggle
@@ -102,7 +102,7 @@
                         </th>
 
 
-                        <th #customerNameParent width="13%" class="bdrR bdrB td-search-box">
+                        <th #customerNameParent width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="showCustomerSearchBar">
                                 <span>Customer Name</span>
                                 <i class="icon-search" (click)="searchBy(null, 'customerName', true);"></i>
@@ -115,7 +115,7 @@
                             </div>
                         </th>
 
-                        <th #paymentModeParent width="13%" class="bdrR bdrB td-search-box">
+                        <th #paymentModeParent width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="showPaymentSearchBar">
                                 <span>Payment Mode</span>
                                 <i class="icon-search" (click)="searchBy(null, 'paymentMode', true)"></i>
@@ -128,7 +128,7 @@
                             </div>
                         </th>
 
-                        <th #invoiceNumberParent width="13%" class="bdrR bdrB td-search-box">
+                        <th #invoiceNumberParent width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="showInvoiceSearchBar">
                                 <span>Invoice #</span>
                                 <i class="icon-search" (click)="searchBy(null, 'invoiceNumber', true)"></i>
@@ -191,7 +191,7 @@
             </table>
         </div>
 
-        <div *ngIf="pageConfiguration.totalItems > paginationLimit" class="paginationWrapper">
+        <div *ngIf="pageConfiguration.totalItems > paginationLimit" class="pagination-wrapper">
             <pagination [totalItems]="pageConfiguration.totalItems" [(ngModel)]="pageConfiguration.currentPage"
                 [maxSize]="5" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="paginationLimit"
                 [rotate]="false" previousText="&#9668;" nextText="&#9658;" (pageChanged)="onPageChanged($event)">
@@ -199,7 +199,7 @@
         </div>
     </div>
 
-    <div class=" mt-5 invoice-footer invoice-footer row">
+    <div class="mt-5 invoice-footer invoice-footer row">
         <div class="col-lg-10 col-md-8 col-sm-12 col-xs-12 total-due-sale-wrap">
             <div class="row">
             <div class="col-lg-3 col-md-6 col-sm-12 total-due-sale">
@@ -231,7 +231,7 @@ <h1>{{receiptsSummaryData?.unUsed?.symbol}}{{receiptsSummaryData?.unUsed?.amount
 
 <!-- Adjust Payment modal start -->
 <div bsModal #receiptAdvanceSearchModalContainer="bs-modal" [config]="{ ignoreBackdropClick: 'true', keyboard: 'true'}"
-    tabindex="-1" class="modal fade openPoup" role="dialog">
+    tabindex="-1" class="modal fade open-popup" role="dialog">
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <ng-template element-view-container-ref #receiptAdvanceSearchFilterModal="elementviewcontainerref">
@@ -257,13 +257,13 @@ <h1>{{receiptsSummaryData?.unUsed?.symbol}}{{receiptsSummaryData?.unUsed?.amount
 <!-- region sort icon template -->
 <ng-template #sortTemplate let-column="column">
     <div class="icon-sort-asc" *ngIf="searchQueryParams.sortBy !== column" (click)="handleSorting('asc', column)"
-        [ngClass]="{'activeTextColor': searchQueryParams.sortBy === column && searchQueryParams.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': searchQueryParams.sortBy === column && searchQueryParams.sort === 'asc'}"></div>
     <div class="icon-sort-asc" *ngIf="searchQueryParams.sortBy === column && searchQueryParams.sort === 'asc'"
         (click)="handleSorting('desc', column)"
-        [ngClass]="{'activeTextColor': searchQueryParams.sortBy === column && searchQueryParams.sort === 'asc'}"></div>
+        [ngClass]="{'active-text-color': searchQueryParams.sortBy === column && searchQueryParams.sort === 'asc'}"></div>
     <div class="icon-sort-dsc" *ngIf="searchQueryParams.sortBy === column && searchQueryParams.sort === 'desc'"
         (click)="handleSorting('asc', column)"
-        [ngClass]="{'activeTextColor': searchQueryParams.sortBy === column && searchQueryParams.sort === 'desc'}"></div>
+        [ngClass]="{'active-text-color': searchQueryParams.sortBy === column && searchQueryParams.sort === 'desc'}"></div>
 </ng-template>
 <ng-template #datepickerTemplate>
     <div class="datepicker-modal">
diff --git a/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.scss b/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.scss
index d330c789ac1..2083b032a48 100644
--- a/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.scss
+++ b/apps/web-giddh/src/app/reports/components/advance-receipt-report/advance-receipt-report.component.scss
@@ -47,7 +47,7 @@
     justify-content: center;
     align-items: center;
     border-right: 1px solid $gainsboro;
-    color: #999999;
+    color: $nobel;
 }
 .input-wrapper {
     display: block !important;
@@ -76,13 +76,13 @@
     margin-left: 10px;
     border: 1px solid $gainsboro;
     border-radius: 2px;
-    color: #1a237e;
-    background: #fff;
+    color: $midnight-blue;
+    background: $white;
 }
 
 .btn-filter {
     background: $whisper-color;
-    border: 1px solid $whisper-color;
+    border: 1px solid $gainsboro;
     font-size: 14px;
     color: $midnight-blue;
     display: inline-flex;
@@ -103,7 +103,7 @@
     }
 }
 
-.input-grp-dateRangePicker input.form-control {
+.input-grp-date-range-picker input.form-control {
     padding-left: 45px !important;
     width: 220px;
 }
@@ -120,13 +120,13 @@
 }
 .invoice-footer h3 {
     font-size: 16px;
-    color: #999999;
+    color: $nobel;
     display: block;
     margin-right: 10px;
 }
 .invoice-footer h1 {
     font-size: 22px;
-    color: #333;
+    color: $night-rider;
     display: block;
 }
 .giddh-table .td-search-box {
diff --git a/apps/web-giddh/src/app/reports/components/cash-flow-statement-component/cash.flow.statement.component.html b/apps/web-giddh/src/app/reports/components/cash-flow-statement-component/cash.flow.statement.component.html
index 04abbc6a641..7943a0b102e 100644
--- a/apps/web-giddh/src/app/reports/components/cash-flow-statement-component/cash.flow.statement.component.html
+++ b/apps/web-giddh/src/app/reports/components/cash-flow-statement-component/cash.flow.statement.component.html
@@ -1,10 +1,10 @@
 <hamburger-menu [pageHeading]="'Reports > Cash Flow Statement'"></hamburger-menu>
 <section class="clearfix text-center pt-5">
     <div class="container-fluid">
-        <p class="mb-15">{{activeCompany?.name}}</p>
+        <p class="mr-b15">{{activeCompany?.name}}</p>
         <h5 class="bold mb-2">Cash Flow Statement</h5>
         <div class="d-flex align-items-center justify-content-center mb-2">
-            <label class="mr-05 font-14">As on</label>
+            <label class="mr-r05 font-14">As on</label>
             <div class="custom-datepicker" (click)="showGiddhDatepicker($event)">
                 <i class="icon-calender calendar-addon"></i>
                 <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''"
diff --git a/apps/web-giddh/src/app/reports/components/columnar-report-component/columnar.report.component.html b/apps/web-giddh/src/app/reports/components/columnar-report-component/columnar.report.component.html
index 842e138efbf..7592b659ca5 100644
--- a/apps/web-giddh/src/app/reports/components/columnar-report-component/columnar.report.component.html
+++ b/apps/web-giddh/src/app/reports/components/columnar-report-component/columnar.report.component.html
@@ -2,39 +2,39 @@
 <div class="columnar-report-page mr-t2">
     <div class="container-fluid font-14">
         <div class="row">
-            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mb-15">
+            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mr-b15">
                 <sh-select [options]="selectYear" [fixedValue]="activeFinancialYearLabel" [placeholder]="'Select Year'" name="financialYear" (selected)="selectFinancialYear($event);" [forceClearReactive]="forceClear$ | async"></sh-select>
             </div>
         </div>
         <div class="row">
             <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12">
                 <div class="row">
-                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-15">
+                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mr-b15">
                         <sh-select [options]="fromMonthNames" [placeholder]="'From Month'" name="fromMonth" [(ngModel)]="fromMonth" [forceClearReactive]="forceClearMonths$ | async" (selected)="selectFromMonth($event);"></sh-select>
                     </div>
-                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-15">
+                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mr-b15">
                         <sh-select [options]="toMonthNames" [placeholder]="'To Month'" name="toMonth" [(ngModel)]="toMonth" [forceClearReactive]="forceClearMonths$ | async" (selected)="selectToMonth($event);"></sh-select>
                     </div>
                 </div>
             </div>
         </div>
         <div class="row">
-            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mb-15 clear-both">
+            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mr-b15 clear-both">
                 <sh-select [options]="flatGroupsOptions" [placeholder]="'Group *'" name="group" (selected)="selectGroup($event);" [forceClearReactive]="forceClear$ | async"></sh-select>
             </div>
         </div>
         <div class="row">
-            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mb-15 clear-both">
+            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mr-b15 clear-both">
                 <input type="checkbox" name="showHideOpeningClosingBalance" id="showHideOpeningClosingBalance" [(ngModel)]="exportRequest.showHideOpeningClosingBalance">&nbsp;<label for="showHideOpeningClosingBalance">Opening/Closing Balance</label>
             </div>
         </div>
         <div class="row">
-            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mb-15 clear-both">
+            <div class="col-lg-3 col-md-8 col-sm-12 col-xs-12 mr-b15 clear-both">
                 <input type="checkbox" name="balanceTypeAsSign" id="balanceTypeAsSign" [(ngModel)]="exportRequest.balanceTypeAsSign" (ngModelChange)="onBalanceTypeAsSignChanged($event)">&nbsp;<label for="balanceTypeAsSign">Cr/Dr with +/-</label>
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-12 col-xs-12 mb-15 clear-both">
+            <div class="col-sm-12 col-xs-12 mr-b15 clear-both">
                 <button class="btn btn-sky-blue " [disabled]="!isFormValid() || isLoading" (click)="exportReport(false);">Export</button>
                 <button class="btn btn-sky-blue " [disabled]="!isFormValid() || isLoading" (click)="exportReport(true);">Show</button>
                 <button class="btn btn-sky-blue " (click)="clearFilter();">Reset</button>
@@ -44,15 +44,15 @@
     </div>
 </div>
 
-<!-- <div *ngIf="columnarReportResponse" class="back-btn text-center pr-1 mt-1 mb-1">
+<!-- <div *ngIf="columnarReportResponse" class="back-btn text-center pr-1 mt-1 mr-b1">
     <button class="btn btn-default" (click)="clearFilter()"> <span class="icon-cross"></span>Clear Filter</button>
 </div> -->
 <columnar-report-table-component [columnarReportResponse]="columnarReportResponse" [isBalanceTypeAsSign]="isBalanceTypeAsSign"></columnar-report-table-component>
-<div class="paginationWrapper" *ngIf="columnarReportResponse && columnarReportResponse?.totalPages > 1">
+<div class="pagination-wrapper" *ngIf="columnarReportResponse && columnarReportResponse?.totalPages > 1">
     <pagination [totalItems]="columnarReportResponse.totalItems" [(ngModel)]="columnarReportResponse.page" [maxSize]="6" class="pagination-sm" [boundaryLinks]="true" [rotate]="false" [itemsPerPage]="paginationCount" (pageChanged)="pageChanged($event)"></pagination>
 </div>
 <div *ngIf="isLoading && isShowColumnarReport">
-    <div class="no-data mt-15 loader-main">
+    <div class="no-data mr-t15 loader-main">
         <div class="spinner2">
             <div class="cube1"></div>
             <div class="cube2"></div>
diff --git a/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.html b/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.html
index 04333bb3c40..8f3d71ca3f1 100644
--- a/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.html
+++ b/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.html
@@ -2,7 +2,7 @@
     <div class="container-fluid">
         <div class="invoice-preview  table-responsive" *ngIf="columnarReportResponse">
             <table class="table basic giddh-table on-mobile-view">
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr>
                         <ng-container *ngFor="let item of columnsName">
                             <th>{{item}}</th>
diff --git a/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.scss b/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.scss
index 1d502b400da..4c3dcc68939 100644
--- a/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.scss
+++ b/apps/web-giddh/src/app/reports/components/columnar-report-table-component/columnar.report.table.component.scss
@@ -8,7 +8,7 @@
     }
     h1 {
         font-size: 28px;
-        color: $extra-dark-gray;
+        color: $night-rider;
         display: inline-block;
     }
 }
@@ -16,7 +16,7 @@
     border-top: 1px solid $gainsboro !important;
 }
 
-.icon-pointer.activeTextColor {
+.icon-pointer.active-text-color {
     color: $deep-sky-blue;
 }
 
@@ -45,7 +45,7 @@
 }
 .btn-filter {
     background: $whisper-color;
-    border: 1px solid $whisper-color;
+    border: 1px solid $gainsboro;
     font-size: 16px;
     color: $midnight-blue;
     display: inline-flex;
diff --git a/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.html b/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.html
index f7080f0a019..a760e587d70 100644
--- a/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.html
+++ b/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.html
@@ -3,13 +3,13 @@
     <div class="report-breadcrum">
         <ul class="list-inline d-inline-block middle nav-report">
             <li class="active" id="giddh-page-heading-link"><a href="javascript:void(0)" (click)="goToDashboard()">Report</a> <span
-                    class="d-inline-block pl-1"> ></span></li>
+                    class="d-inline-block pd-l1"> ></span></li>
             <li><a href="javascript:void(0)">Purchase Register</a></li>
         </ul>
     </div>
 </div>
-<div class="container-fluid font-14  mt-15">
-    <div class="select-financial-year mb-15">
+<div class="container-fluid font-14  mr-t15">
+    <div class="select-financial-year mr-b15">
         <div *ngIf="currentCompanyBranches?.length > 2" class="xs-mb-1 inner-button linked-entities">
             <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName"
                 [showClear]="false" [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)"
@@ -25,7 +25,7 @@
                             </span>
                             <span class="entity-details">
                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                <div class="item-unq giddh-limit single-line-clamp">
+                                <div class="item-unique giddh-limit single-line-clamp">
                                     {{ option.name || '-' }}
                                 </div>
                             </span>
@@ -56,7 +56,7 @@
                     </li>
                     <li role="menuitem" dropdown placement="right" container="body">
                         <a dropdownToggle class="dropdown-item dropdown-toggle cursor-pointer" (click)="false">Weekly <span class="caret"></span></a>
-                        <ul class="dropdown-menu reportDropdown" role="menu">
+                        <ul class="dropdown-menu report-dropdown" role="menu">
                             <li role="menuitem" *ngFor="let month of monthNames"><a (click)="populateRecords('weekly', month)"
                                     class="dropdown-item">{{month | slice:0:3}}</a></li>
                         </ul>
diff --git a/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.scss b/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.scss
index a36835aed90..b3223723679 100644
--- a/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.scss
+++ b/apps/web-giddh/src/app/reports/components/purchase-register-component/purchase.register.component.scss
@@ -5,7 +5,7 @@
 .width-170 {
     width: 170px;
 }
-.radio_theme:before {
+.radio-theme:before {
     content: " ";
     width: 14px;
     height: 14px;
@@ -13,12 +13,12 @@
     right: 0;
 }
 
-.radio_theme {
+.radio-theme {
     height: 14px;
     width: 14px;
 }
 
-.radio_theme:checked:after {
+.radio-theme:checked:after {
     content: " ";
     left: 4px;
     bottom: 4px;
@@ -44,11 +44,11 @@
     border-left: 6px solid transparent;
     border-top: 6px dashed;
 }
-.reportDropdown li {
+.report-dropdown li {
     float: left;
     width: 51px;
 }
-.reportDropdown {
+.report-dropdown {
     min-width: 210px;
 }
 ul#dropdown-nested {
@@ -58,7 +58,7 @@ ul#dropdown-nested li .caret {
     float: right;
     margin-top: 8px;
 }
-.reportDropdown {
+.report-dropdown {
     left: 100% !important;
 }
 #dropdown-nested li .caret {
diff --git a/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.html b/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.html
index c7a2300c533..ac9ea815423 100644
--- a/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.html
+++ b/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.html
@@ -32,10 +32,10 @@
 </div>
 <div class="top-bar clearfix">
     <div class="form-inline">
-        <div class="dis  mrR1 d-inline-block middle">
+        <div class="dis  mr-r1 d-inline-block middle">
             <div (clickOutside)="hideListItems()" class="btn-group d-flex" #filterDropDownList="bs-dropdown" dropdown
                 [autoClose]="false" [placement]="'right'">
-                <i dropdownToggle class="icon-options pd cp fs20"></i>
+                <i dropdownToggle class="icon-options pd cp font-20"></i>
                 <ul *dropdownMenu class="dropdown-menu dropdown-menu-left" role="menu" [style.width.px]="'200'">
                     <li role="menuitem">
                         <a class="dropdown-item">
@@ -109,13 +109,13 @@
                             </div>
                         </th>
 
-                        <th class="td-search-box ">
+                        <th class="td-search-box">
                             <div><span> Account</span></div>
                         </th>
 
 
                         <th *ngIf="showFieldFilter.voucherType">
-                            <div class="d-flex ">
+                            <div class="d-flex">
                                 <div class="">Voucher Type</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
@@ -144,7 +144,7 @@
 
                         <th *ngIf="(purchaseRegisteDetailedResponse$ | async).debitTotal" class=" text-right ">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Purchase</div>
+                                <div class="text-right">Purchase</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -159,7 +159,7 @@
 
                         <th *ngIf="(purchaseRegisteDetailedResponse$ | async)?.creditTotal" class=" text-right ">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Return</div>
+                                <div class="text-right">Return</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -170,15 +170,15 @@
                             </div>
                         </th>
                         <th *ngIf="showFieldFilter.qtyRate && (purchaseRegisteDetailedResponse$ | async)?.quantityTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Qty/Unit</div>
+                                <div class="text-right">Qty/Unit</div>
                             </div>
                         </th>
                         <th *ngIf="showFieldFilter.qtyRate && (purchaseRegisteDetailedResponse$ | async)?.rateTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Rate</div>
+                                <div class="text-right">Rate</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -190,9 +190,9 @@
                         </th>
 
                         <th *ngIf="showFieldFilter.discount && (purchaseRegisteDetailedResponse$ | async)?.discountTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Discount</div>
+                                <div class="text-right">Discount</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -206,9 +206,9 @@
                         </th>
 
                         <th *ngIf="showFieldFilter.tax && (purchaseRegisteDetailedResponse$ | async).taxTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Tax</div>
+                                <div class="text-right">Tax</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -308,7 +308,7 @@
             </table>
         </div>
 
-        <div class="text-center " *ngIf="(purchaseRegisteDetailedResponse$ | async).totalItems > paginationLimit">
+        <div class="text-center" *ngIf="(purchaseRegisteDetailedResponse$ | async).totalItems > paginationLimit">
             <pagination [totalItems]="
                     (purchaseRegisteDetailedResponse$ | async).totalItems
                 " [(ngModel)]="getDetailedPurchaseRequestFilter.page" [maxSize]="5" class="pagination-sm "
@@ -316,7 +316,7 @@
                 nextText="&#9658; " (pageChanged)="pageChanged($event)"></pagination>
         </div>
     </div>
-    <div class="no-data " *ngIf="
+    <div class="no-data" *ngIf="
             (purchaseRegisteDetailedResponse$ | async).items.length === 0 &&
             !(isGetPurchaseDetailsInProcess$ | async)
         ">
@@ -333,7 +333,7 @@ <h1>Do search with some other dates</h1>
         </div>
         <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-12 pl-0">
             <div *ngIf="PurchaseRegisteDetailedItems && (purchaseRegisteDetailedResponse$ | async).debitTotal"
-                class="clearfix main-sale-register-box ">
+                class="clearfix main-sale-register-box">
                 <div class="sale-register-box text-right">
                     <p>Purchase</p>
                     <h4>
@@ -422,7 +422,7 @@ <h4>
 
     <div class="icon-sort-asc" *ngIf="getDetailedPurchaseRequestFilter.sortBy !== col" (click)="sortbyApi('asc', col)"
         [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedPurchaseRequestFilter.sortBy === col &&
                 getDetailedPurchaseRequestFilter.sort === 'asc'
         }"></div>
@@ -431,7 +431,7 @@ <h4>
             getDetailedPurchaseRequestFilter.sortBy === col &&
             getDetailedPurchaseRequestFilter.sort === 'asc'
         " (click)="sortbyApi('desc', col)" [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedPurchaseRequestFilter.sortBy === col &&
                 getDetailedPurchaseRequestFilter.sort === 'asc'
         }"></div>
@@ -440,7 +440,7 @@ <h4>
             getDetailedPurchaseRequestFilter.sortBy === col &&
             getDetailedPurchaseRequestFilter.sort === 'desc'
         " (click)="sortbyApi('asc', col)" [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedPurchaseRequestFilter.sortBy === col &&
                 getDetailedPurchaseRequestFilter.sort === 'desc'
         }"></div>
diff --git a/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.scss b/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.scss
index 8bfa617946b..b790a4c1a08 100644
--- a/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.scss
+++ b/apps/web-giddh/src/app/reports/components/purchase-register-expand-component/purchase.register.expand.component.scss
@@ -9,10 +9,6 @@
     white-space: nowrap !important;
 }
 
-.basic > tfoot > tr > th {
-    background: #e3e3e3;
-}
-
 .td-search-box {
     padding: 0px !important;
     position: relative;
@@ -28,7 +24,7 @@
 
 .td-search-box div i {
     margin-top: 1px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     padding-right: 8px;
     cursor: pointer;
     display: flex;
@@ -45,19 +41,19 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
-.p-modal-tolltip {
+.p-modal-tooltip {
     position: absolute;
-    background-color: white;
+    background-color: $white;
     z-index: 1000;
     width: 257px;
-    border: 1px solid #b4afaf;
+    border: 1px solid $pink-swan;
     border-radius: 4px;
-    box-shadow: 0 7px 24px #00000038;
+    box-shadow: 0 7px 24px $black-russian;
 }
 
 .account-detail-modal-div {
@@ -83,19 +79,19 @@
 }
 
 .custom-detail h4 {
-    color: #707070;
+    color: $gray;
     margin-top: 7px;
     font-size: 14px !important;
-    font-family: opensans-regular !important;
+    font-family: 'opensans-regular' !important;
 }
 
 .height-82px {
     padding: 10px 10px 15px 10px;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid $gainsboro;
 }
 
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 
 .li-link {
@@ -103,7 +99,7 @@ ul.list-unstyled li a {
 }
 
 .btn-group > a {
-    color: #333333;
+    color: $night-rider;
 }
 
 .ac-detail,
@@ -112,16 +108,16 @@ ul.list-unstyled li a {
 }
 
 .main-sale-register-box .sale-register-box p {
-    color: #8f9091;
+    color: $gray;
 }
 
 .main-sale-register-box .sale-register-box h4 {
     font-size: 18px;
-    color: #333333;
+    color: $night-rider;
 }
 
 .sales-register p {
-    color: #8f9091;
+    color: $gray;
     margin-bottom: 5px;
 }
 
@@ -150,14 +146,14 @@ ul.list-unstyled li a {
     align-items: center;
 }
 
-.text-orange {
-    color: #5b64c9 !important;
+.text-purple {
+    color: $chetwode-blue !important;
 }
 
 .sales-register {
     background: $white;
     padding: 15px;
-    box-shadow: 0px -3px 6px #d7d7d7;
+    box-shadow: 0px -3px 6px $gainsboro;
     display: flex;
     align-items: center;
     position: fixed;
@@ -192,12 +188,12 @@ ul.list-unstyled li a {
     vertical-align: middle;
 }
 
-.reportDropdown li {
+.report-dropdown li {
     float: left;
     width: 51px;
 }
 
-.reportDropdown {
+.report-dropdown {
     min-width: 210px;
 }
 
@@ -210,7 +206,7 @@ ul#dropdown-nested li .caret {
     margin-top: 8px;
 }
 
-.reportDropdown {
+.report-dropdown {
     left: 100% !important;
 }
 
@@ -223,7 +219,7 @@ ul#dropdown-nested li .caret {
 }
 
 .custom-month-select li:hover a.dropdown-item {
-    background-color: #e5e5e5;
+    background-color: $whisper;
 }
 
 .custom-month-select button.btn {
@@ -258,10 +254,10 @@ table th {
 }
 .icon-pointer {
     cursor: pointer;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     margin-left: 6px;
 }
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 .table-middle th .d-flex {
@@ -281,7 +277,7 @@ table th {
     justify-content: center;
     -webkit-box-align: center;
     align-items: center;
-    background-color: #fff;
+    background-color: $white;
     font-size: 18px;
     color: $midnight-blue;
     border: 1px solid $gainsboro;
@@ -291,7 +287,7 @@ table th {
         width: 36px;
         height: 36px;
         border: 1px solid $gainsboro;
-        background-color: #fff;
+        background-color: $white;
         color: $gray;
         font-size: 20px;
         position: relative;
diff --git a/apps/web-giddh/src/app/reports/components/purchase-register-table-component/purchase.register.table.component.scss b/apps/web-giddh/src/app/reports/components/purchase-register-table-component/purchase.register.table.component.scss
index cfd2cdcbeb8..38f3ebbeb40 100644
--- a/apps/web-giddh/src/app/reports/components/purchase-register-table-component/purchase.register.table.component.scss
+++ b/apps/web-giddh/src/app/reports/components/purchase-register-table-component/purchase.register.table.component.scss
@@ -3,41 +3,32 @@
     flex: 1 1 auto;
 }
 .basic > tbody > tr:hover td > a {
-    color: #1a237e;
+    color: $midnight-blue;
 }
 .basic > tbody > tr > td,
 .basic > thead > tr > th,
 .basic > tfoot > tr > th {
     white-space: nowrap !important;
 }
-.basic > tfoot > tr > th {
-    background: #e3e3e3;
-}
-.table-active {
-    background: #f0f0f1;
-}
 .width-200px {
     width: 200px;
 }
-.basic > tbody > tr > td > a {
-    color: #0c8fe6;
-}
-.particular[_ngcontent-c9] {
+.particular {
     float: right;
     margin-top: 2px;
     font-size: 19px;
-    color: #333333;
+    color: $night-rider;
 }
 .bgChange {
-    background: #f0f0f1;
+    background: $white-smoke;
 }
 .btn-sort {
     display: flex !important;
     width: 36px;
     height: 36px;
-    background-color: #fff;
+    background-color: $white;
     font-size: 18px;
-    color: #1a237e !important;
+    color: $midnight-blue !important;
     border: 1px solid $gainsboro;
     justify-content: center;
     align-items: center;
diff --git a/apps/web-giddh/src/app/reports/components/receipt-advance-search/receipt-advance-search.component.html b/apps/web-giddh/src/app/reports/components/receipt-advance-search/receipt-advance-search.component.html
index 9000bc11c4e..05852ccdf7f 100644
--- a/apps/web-giddh/src/app/reports/components/receipt-advance-search/receipt-advance-search.component.html
+++ b/apps/web-giddh/src/app/reports/components/receipt-advance-search/receipt-advance-search.component.html
@@ -60,7 +60,7 @@ <h4 class="modal-title bg pull-left">Advance Search</h4>
                 </div>
 
                 <div class="clearfix mt-4">
-                    <button type="button" class="btn btn-success mrR1" (click)="confirm.emit(searchModel)">Search</button>
+                    <button type="button" class="btn btn-success mr-r1" (click)="confirm.emit(searchModel)">Search</button>
                     <button type="button" class="btn btn-cancel" (click)="cancel.emit()">Cancel</button>
                 </div>
             <!-- </form> -->
diff --git a/apps/web-giddh/src/app/reports/components/refund-amount/refund-amount.component.html b/apps/web-giddh/src/app/reports/components/refund-amount/refund-amount.component.html
index 86a231147d7..7c2f49adb1d 100644
--- a/apps/web-giddh/src/app/reports/components/refund-amount/refund-amount.component.html
+++ b/apps/web-giddh/src/app/reports/components/refund-amount/refund-amount.component.html
@@ -7,7 +7,7 @@ <h4 class="modal-title bg pull-left">Refund Amount</h4>
         </button>
       </div>
       <div class="modal-body font-14 pt-0">
-            <div class="bb-1 row pd-2 mb-1">
+            <div class="bb-1 row pd-2 mr-b1">
                 <h4><span class="font-14 middle mr-1">Balance Amount</span> <span class="font-20 font-bold middle">Rs. 10,000.00</span></h4>
             </div>
           <div class="clearfix pd-1">
@@ -56,7 +56,7 @@ <h4><span class="font-14 middle mr-1">Balance Amount</span> <span class="font-20
                 </div>
 
                 <div class="clearfix mt-4">
-                    <button type="button" class="btn btn-success mrR1" (click)="confirm()" >Search</button>
+                    <button type="button" class="btn btn-success mr-r1" (click)="confirm()" >Search</button>
                     <button type="button" class="btn btn-cancel" (click)="decline()" >Cancel</button>
                 </div>
             </form>
diff --git a/apps/web-giddh/src/app/reports/components/report-dashboard/reports.dashboard.component.html b/apps/web-giddh/src/app/reports/components/report-dashboard/reports.dashboard.component.html
index f0392792a70..2ea80b86433 100644
--- a/apps/web-giddh/src/app/reports/components/report-dashboard/reports.dashboard.component.html
+++ b/apps/web-giddh/src/app/reports/components/report-dashboard/reports.dashboard.component.html
@@ -1,5 +1,5 @@
 <hamburger-menu [pageHeading]="'Reports'"></hamburger-menu>
-<div class="container-fluid pt-2 pb-2">
+<div class="container-fluid pd-t2 pd-b2">
     <div class="row mb-2">
         <div class="col-lg-2 col-md-6 col-xs-4">
             <div class="form-group mb-0">
diff --git a/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.html b/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.html
index 23dbe25eb14..f49ee23052f 100644
--- a/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.html
+++ b/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.html
@@ -9,7 +9,7 @@
     </div>
 
 
-<div class="container-fluid font-14 pt-15">
+<div class="container-fluid font-14 pd-t15">
     <div class="select-financial-year">
         <div *ngIf="currentCompanyBranches?.length > 2" class="xs-mb-1 inner-button linked-entities">
             <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false"
@@ -25,7 +25,7 @@
                             </span>
                             <span class="entity-details">
                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                <div class="item-unq giddh-limit single-line-clamp">
+                                <div class="item-unique giddh-limit single-line-clamp">
                                     {{ option.name || '-' }}
                                 </div>
                             </span>
@@ -57,7 +57,7 @@
                     <li role="menuitem" dropdown placement="right" container="body">
                         <a dropdownToggle class="dropdown-item dropdown-toggle cursor-pointer" (click)="false">Weekly
                             <span class="caret"></span></a>
-                        <ul class="dropdown-menu reportDropdown" role="menu">
+                        <ul class="dropdown-menu report-dropdown" role="menu">
                             <li role="menuitem" *ngFor="let month of monthNames"><a
                                     (click)="populateRecords('weekly', month)" class="dropdown-item">{{month |
                                     slice:0:3}}</a></li>
@@ -68,7 +68,7 @@
             </div>
         </div>
     </div>
-    <div class="row font-12 mb-15">
+    <div class="row font-12 mr-b15">
         <div class="col-xl-2  col-lg-4 col-xs-10">
 
         </div>
diff --git a/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.scss b/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.scss
index 1968aa97fc4..d0bc9ade187 100644
--- a/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.scss
+++ b/apps/web-giddh/src/app/reports/components/report-details-components/report.details.component.scss
@@ -5,18 +5,18 @@
 .width-170 {
     width: 170px;
 }
-.radio_theme:before {
+.radio-theme:before {
     content: " ";
     width: 14px;
     height: 14px;
     top: 0;
     right: 0;
 }
-.radio_theme {
+.radio-theme {
     height: 14px;
     width: 14px;
 }
-.radio_theme:checked:after {
+.radio-theme:checked:after {
     content: " ";
     left: 4px;
     bottom: 4px;
@@ -37,17 +37,18 @@
     position: absolute;
     right: 10px;
     top: 14px;
-    color: #a9a9a9;
+    color: $dim-gray;
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
     border-top: 6px dashed;
 }
-.reportDropdown li {
+.report-dropdown li {
     float: left;
     width: 51px;
 }
-.reportDropdown {
+.report-dropdown {
     min-width: 210px;
+    left: 100% !important;
 }
 ul#dropdown-nested {
     min-width: 254px;
@@ -56,9 +57,6 @@ ul#dropdown-nested li .caret {
     float: right;
     margin-top: 8px;
 }
-.reportDropdown {
-    left: 100% !important;
-}
 #dropdown-nested li .caret {
     float: right;
     margin-top: 8px;
@@ -66,7 +64,7 @@ ul#dropdown-nested li .caret {
     border-right: 6px solid transparent;
     border-left: 6px solid transparent;
     border-top: 6px dashed;
-    color: #a9a9a9;
+    color: $dim-gray;
 }
 .sales-register-menu {
     min-width: 195px !important;
diff --git a/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.html b/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.html
index d722cc24e13..3da9ada6d8b 100644
--- a/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.html
+++ b/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.html
@@ -97,7 +97,7 @@
 </div>
 
 <!-- <div class="clearfix">
-    <div class="alC mb-2">
+    <div class="text-center mb-2">
         <pagination class="pagination-sm" [totalItems]="30"></pagination>
     </div>
 </div> -->
diff --git a/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.scss b/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.scss
index 66e56ec9c3d..0905cfcdbb3 100644
--- a/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.scss
+++ b/apps/web-giddh/src/app/reports/components/report-table-components/report.table.component.scss
@@ -3,7 +3,7 @@
     flex: 1 1 auto;
 }
 .basic > tbody > tr:hover td > a {
-    color: #1a237e;
+    color: $midnight-blue;
 }
 .basic > tbody > tr > td,
 .basic > thead > tr > th,
@@ -11,33 +11,33 @@
     white-space: nowrap !important;
 }
 .basic > tfoot > tr > th {
-    background: #e3e3e3;
+    background: $whisper;
 }
 .table-active {
-    background: #f0f0f1;
+    background: $solitude;
 }
 .width-200px {
     width: 200px;
 }
 .basic > tbody > tr > td > a {
-    color: #0c8fe6;
+    color: $primary;
 }
 .particular {
     float: right;
     margin-top: 2px;
     font-size: 19px;
-    color: #333333;
+    color: $night-rider;
 }
 .bgChange {
-    background: #f0f0f1;
+    background: $solitude;
 }
 .btn-sort {
     display: flex !important;
     width: 36px;
     height: 36px;
-    background-color: #fff;
+    background-color: $white;
     font-size: 18px;
-    color: #1a237e !important;
+    color: $midnight-blue !important;
     border: 1px solid $gainsboro;
     justify-content: center;
     align-items: center;
diff --git a/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.html b/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.html
index 74969f4fa66..1695c7342e1 100644
--- a/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.html
+++ b/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.html
@@ -2,9 +2,9 @@
 <div class="reverse-table-report">
     <div class="container-fluid">
 
-        <div class="mt-15 input-grp-dateRangePicker d-flex">
+        <div class="mr-t15 mr-b15 input-grp-date-range-picker d-flex">
             <div class="input-group">
-                <div class="form-group linked-entities mr-15" *ngIf="currentCompanyBranches?.length > 2">
+                <div class="form-group linked-entities mr-r15" *ngIf="currentCompanyBranches?.length > 2">
                     <sh-select [options]="currentCompanyBranches" [(ngModel)]="currentBranch.uniqueName" [showClear]="false" [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)" [isFilterEnabled]="true" placeholder="Select Entity" [fixedValue]="currentBranch?.alias"
                         class="entity-dropdown">
                         <ng-template #optionTemplate let-option="option">
@@ -18,7 +18,7 @@
                                     </span>
                                     <span class="entity-details">
                                         <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                        <div class="item-unq giddh-limit single-line-clamp">
+                                        <div class="item-unique giddh-limit single-line-clamp">
                                             {{ option.name || '-' }}
                                         </div>
                                     </span>
@@ -45,12 +45,12 @@
         </div>
         <div class="invoice-preview  table-responsive">
             <table class="table basic giddh-table on-mobile-view">
-                <thead class="t-h-bg1">
+                <thead class="thead-background1">
                     <tr (clickOutside)="inlineSearch = null">
                         <th class="text-center" width="4%">#</th>
-                        <th (click)="sortReverseChargeList('entryDate')">Entry Date <span [ngClass]="{'sortingIcon icon-pointer': true, 'activeTextColor' : reverseChargeReportGetRequest.sortBy === 'entryDate', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'entryDate' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'entryDate'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'entryDate')}"></span>
+                        <th (click)="sortReverseChargeList('entryDate')">Entry Date <span [ngClass]="{'sorting-icon icon-pointer': true, 'active-text-color' : reverseChargeReportGetRequest.sortBy === 'entryDate', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'entryDate' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'entryDate'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'entryDate')}"></span>
                         </th>
-                        <th width="13%" class="bdrR bdrB td-search-box">
+                        <th width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="inlineSearch == 'suppliersName'">
                                 <span>Supplier's Name</span>
                                 <i class="icon-search" (click)="focusOnColumnSearch('suppliersName');"></i>
@@ -74,7 +74,7 @@
                                 </div>
                             </div>
                         </th>
-                        <th width="13%" class="bdrR bdrB td-search-box">
+                        <th width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="inlineSearch == 'invoiceNumber'">
                                 <span>Invoice No.</span>
                                 <i class="icon-search" (click)="focusOnColumnSearch('invoiceNumber');"></i>
@@ -83,9 +83,9 @@
                                 <input type="text" placeholder="Invoice No." class="w100" #invoiceNumberField name="invoiceNumber" (keypress)="columnSearch()" (keydown)="columnSearch()" [(ngModel)]="reverseChargeReportPostRequest.invoiceNumber" />
                             </div>
                         </th>
-                        <th class="td-search-box" (click)="sortReverseChargeList('supplierInvoiceDate')">Supplier's Invoice Date <span [ngClass]="{'sortingIcon icon-pointer': true, 'activeTextColor' : reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'supplierInvoiceDate' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate')}"></span>
+                        <th class="td-search-box" (click)="sortReverseChargeList('supplierInvoiceDate')">Supplier's Invoice Date <span [ngClass]="{'sorting-icon icon-pointer': true, 'active-text-color' : reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'supplierInvoiceDate' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'supplierInvoiceDate')}"></span>
                         </th>
-                        <th width="13%" class="bdrR bdrB td-search-box">
+                        <th width="13%" class="bd-rr bd-rb td-search-box">
                             <div [hidden]="inlineSearch == 'supplierCountry'">
                                 <span>Supplier's Country</span>
                                 <i class="icon-search" (click)="focusOnColumnSearch('supplierCountry');"></i>
@@ -94,16 +94,16 @@
                                 <input type="text" placeholder="Supplier Country" class="w100" #supplierCountryField name="supplierCountry" (keypress)="columnSearch()" (keydown)="columnSearch()" [(ngModel)]="reverseChargeReportPostRequest.supplierCountry" />
                             </div>
                         </th>
-                        <th (click)="sortReverseChargeList('taxableValue')">Taxable Value <span [ngClass]="{'sortingIcon icon-pointer': true, 'activeTextColor' : reverseChargeReportGetRequest.sortBy === 'taxableValue', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'taxableValue' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'taxableValue'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'taxableValue')}"></span>
+                        <th (click)="sortReverseChargeList('taxableValue')">Taxable Value <span [ngClass]="{'sorting-icon icon-pointer': true, 'active-text-color' : reverseChargeReportGetRequest.sortBy === 'taxableValue', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'taxableValue' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'taxableValue'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'taxableValue')}"></span>
                         </th>
                         <th>Tax Rate</th>
-                        <th (click)="sortReverseChargeList('taxAmount')">Tax Amount <span [ngClass]="{'sortingIcon icon-pointer': true, 'activeTextColor' : reverseChargeReportGetRequest.sortBy === 'taxAmount', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'taxAmount' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'taxAmount'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'taxAmount')}"></span>
+                        <th (click)="sortReverseChargeList('taxAmount')">Tax Amount <span [ngClass]="{'sorting-icon icon-pointer': true, 'active-text-color' : reverseChargeReportGetRequest.sortBy === 'taxAmount', 'icon-sort-asc': !reverseChargeReportGetRequest.sort || reverseChargeReportGetRequest.sortBy !== 'taxAmount' || (reverseChargeReportGetRequest.sort === 'asc' && reverseChargeReportGetRequest.sortBy === 'taxAmount'), 'icon-sort-dsc': (reverseChargeReportGetRequest.sort === 'desc' && reverseChargeReportGetRequest.sortBy === 'taxAmount')}"></span>
                         </th>
                     </tr>
                 </thead>
                 <tbody *ngIf="reverseChargeReportResults && reverseChargeReportResults.items && reverseChargeReportResults.items.length > 0">
                     <tr *ngFor="let reverseCharge of reverseChargeReportResults.items; let i = index;">
-                        <td data-title="S. No" class="text-center">
+                        <td data-title="#" class="text-center">
                             {{ ((reverseChargeReportGetRequest.page - 1) * paginationLimit) + (i + 1) }} </td>
                         <td data-title="Entry Date">{{ reverseCharge.entryDate }}</td>
                         <td data-title="Supplier's Name">{{ reverseCharge.supplierName }}</td>
@@ -126,12 +126,12 @@
                 </tbody>
             </table>
         </div>
-        <div class="paginationWrapper" *ngIf="reverseChargeReportResults.totalPages > 1">
+        <div class="pagination-wrapper" *ngIf="reverseChargeReportResults.totalPages > 1">
             <pagination [totalItems]="reverseChargeReportResults.totalItems" [(ngModel)]="reverseChargeReportResults.page" [maxSize]="6" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="paginationLimit" [rotate]="false" (pageChanged)="pageChanged($event)"></pagination>
         </div>
     </div>
     <div class="mt-5 invoice-footer">
-        <div class="col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 d-flex total-due-sale-wrap">
+        <div class="col-lg-6 col-md-12 col-sm-12 col-12 d-flex total-due-sale-wrap">
             <div class="col-sm-6 total-due-sale">
                 <h3>Total Taxable Value: </h3>
                 <h1>{{activeCompany?.baseCurrencySymbol}} {{reverseChargeReportResults?.totalTaxableValue | giddhCurrency }}<span>/-</span></h1>
diff --git a/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.scss b/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.scss
index 6990624e6d8..4f51faad53a 100644
--- a/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.scss
+++ b/apps/web-giddh/src/app/reports/components/reverse-charge-report-component/reverse-charge-report.component.scss
@@ -3,7 +3,7 @@
 .invoice-footer {
     h3 {
         font-size: 16px;
-        color: #999999;
+        color: $nobel;
         display: inline-block;
         margin-right: 10px;
     }
@@ -11,7 +11,7 @@
 .invoice-footer {
     h1 {
         font-size: 22px;
-        color: #333;
+        color: $night-rider;
         display: inline-block;
     }
 }
@@ -19,8 +19,8 @@
 .branch-transfer-report .basic > thead > tr > th {
     border-top: 1px solid $gainsboro !important;
 }
-.icon-pointer.activeTextColor {
-    color: #01a9f4;
+.icon-pointer.active-text-color {
+    color: $deep-sky-blue;
 }
 .voucher-type-dropdown {
     display: inline-block;
@@ -38,10 +38,11 @@
     justify-content: center;
     align-items: center;
     border-right: 1px solid $gainsboro;
-    color: #999999;
+    color: $nobel;
+    left: 0;
     font-size: 18px;
 }
-.input-grp-dateRangePicker input.form-control {
+.input-grp-date-range-picker input.form-control {
     padding-left: 45px !important;
     width: 210px;
     &:focus {
@@ -50,7 +51,7 @@
 }
 .btn-filter {
     background: $whisper-color;
-    border: 1px solid $whisper-color;
+    border: 1px solid $gainsboro;
     font-size: 16px;
     color: $midnight-blue;
     display: inline-flex;
diff --git a/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.html b/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.html
index e690d4cd022..d1df6559543 100644
--- a/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.html
+++ b/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.html
@@ -29,8 +29,8 @@
     </div>
     <div class="container-fluid font-14">
         <div class="row mt-2">
-            <div class="col-6 or col-sm-6">
-                <div class="clearfix pt-05">
+            <div class="col-6 col-sm-6">
+                <div class="clearfix pd-t05">
 
                     <div class="d-inline-block">
                         <div class="btn-group d-block" dropdown>
diff --git a/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.scss b/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.scss
index 1158b259d38..cbdc0b0f2e2 100644
--- a/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.scss
+++ b/apps/web-giddh/src/app/reports/components/sales-register-component/sales.register.component.scss
@@ -1,13 +1,14 @@
-@import "../../../../assets/css/color.scss";
+@import '../../../../assets/css/color.scss';
+
 .dropdown-icon {
     line-height: 0px;
     font-size: 20px;
     margin-right: 15px;
-    color: #666666;
+    color: $dark-gray;
     vertical-align: middle;
 }
 .width-200 {
-    width: 200xp;
+    width: 200px;
 }
 .select-year select {
     background: none;
@@ -18,7 +19,7 @@
     padding: 5px 22px 5px 7px !important;
 }
 .exand-icon {
-    background: #e5e5e5;
+    background: $whisper;
     width: 30px;
     height: 30px;
     text-align: center;
@@ -26,7 +27,6 @@
     vertical-align: middle;
     display: inline-block;
     font-size: 17px;
-
     margin-left: 5px;
 }
 .list-head > li {
diff --git a/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.html b/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.html
index 416b46c679b..f10bfdbab10 100644
--- a/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.html
+++ b/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.html
@@ -2,7 +2,7 @@
     <table class="table basic table-bordered">
         <thead>
             <tr>
-                <th class="widtn-100">
+                <th class="width-100">
                     <div class="d-flex">
                         <div class="flex-fill pr-1">
                             Date
@@ -11,17 +11,13 @@
                             <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"></div>
                             <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"></div>
                         </div>
-
-
                     </div>
                 </th>
-
                 <th class="td-search-box">
                     <div>
                         <span> Account</span><i class="icon-search"></i>
                     </div>
                 </th>
-
                 <th class="width-160">
                     <div class="d-flex">
                         <div class="flex-fill pr-1">
@@ -34,16 +30,11 @@
 
                     </div>
                 </th>
-
                 <th class="td-search-box width-160">
                     <div>
                         <span> Number</span><i class="icon-search"></i>
                     </div>
-                    <!-- <div class="input-container">
-            <input class="w100" placeholder="Search Report No." type="text">
-          </div> -->
                 </th>
-
                 <th class="width-160">
                     <div class="d-flex">
                         <div class="flex-fill text-right pr-1">
@@ -53,10 +44,8 @@
                             <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"></div>
                             <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"></div>
                         </div>
-
                     </div>
                 </th>
-
                 <th class="width-160">
                     <div class="d-flex">
                         <div class="flex-fill text-right pr-1">
@@ -69,7 +58,6 @@
 
                     </div>
                 </th>
-
                 <th class="width-160">
                     <div class="d-flex">
                         <div class="flex-fill text-right pr-1">
@@ -79,7 +67,6 @@
                             <div class="glyphicon glyphicon-triangle-top text-light-2 d-block font-xxs"></div>
                             <div class="glyphicon glyphicon-triangle-bottom text-light-2 d-block font-xxs"></div>
                         </div>
-
                     </div>
                 </th>
             </tr>
@@ -94,11 +81,11 @@
                             {{item.account}}
                         </a>
 
-                        <div id="dropdown-basic" *dropdownMenu class="dropdown-menu p-modal-tolltip" role="menu"
+                        <div id="dropdown-basic" *dropdownMenu class="dropdown-menu p-modal-tooltip" role="menu"
                             aria-labelledby="button-basic">
                             <div class="account-detail-custom-header">
                                 <div class="d-flex">
-                                    <div class="account-detail-padding" style="flex: 1;border-right: 0px;">
+                                    <div class="account-detail-padding account-head">
                                         <h3 class="account-detail-custom-title word-break">
                                             <span>Mehta & Sons</span>
                                         </h3>
@@ -115,10 +102,10 @@ <h4>23ABCDE1234F2Z5</h4>
                             </div>
                             <div class="height-82px">
                                 <ul class="list-unstyled">
-                                    <li class="li-link"><a href="javascript: void 0">Go to Ledger</a></li>
-                                    <li class="li-link"><a href="javascript: void 0">Generate Invoice</a></li>
-                                    <li class="li-link"><a href="javascript: void 0">Send SMS</a></li>
-                                    <li class="li-link"><a href="javascript: void 0">Send Email</a></li>
+                                    <li class="li-link"><a href="javascript:void(0)">Go to Ledger</a></li>
+                                    <li class="li-link"><a href="javascript:void(0)">Generate Invoice</a></li>
+                                    <li class="li-link"><a href="javascript:void(0)">Send SMS</a></li>
+                                    <li class="li-link"><a href="javascript:void(0)">Send Email</a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.scss b/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.scss
index f2e7903c92c..9e04d589dd1 100644
--- a/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.scss
+++ b/apps/web-giddh/src/app/reports/components/sales-register-details-component/sales.register.details.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/css/color.scss";
+
 .flex-fill {
     flex: 1 1 auto;
 }
@@ -6,10 +8,6 @@
 .basic > tfoot > tr > th {
     padding: 10px 14px;
 }
-.basic > tfoot > tr > th {
-    background: #e3e3e3;
-}
-
 .td-search-box {
     padding: 0px !important;
     position: relative;
@@ -23,7 +21,7 @@
 }
 .td-search-box div i {
     margin-top: 3px;
-    color: #8080808c;
+    color: $gray;
     padding-right: 8px;
     cursor: pointer;
 }
@@ -36,14 +34,14 @@
     padding: 11px;
     padding-right: 40px;
 }
-.p-modal-tolltip {
+.p-modal-tooltip {
     position: absolute;
-    background-color: white;
+    background-color: $white;
     z-index: 1000;
     width: 257px;
-    border: 1px solid #b4afaf;
+    border: 1px solid $gainsboro;
     border-radius: 4px;
-    box-shadow: 0 7px 24px #00000038;
+    box-shadow: 0 7px 24px $black-russian;
 }
 .account-detail-modal-div {
     height: 100%;
@@ -53,7 +51,7 @@
     border-right: 0;
     padding: 11px 10px 10px 10px;
     width: 100%;
-    background: #ffece094;
+    background: $chablis;
 }
 .account-detail-custom-title {
     font-family: "opensans-semibold" !important;
@@ -68,25 +66,29 @@
     text-transform: none !important;
 }
 .custom-detail h4 {
-    color: #707070;
+    color: $gray;
     margin-top: 7px;
     font-size: 14px !important;
-    font-family: opensans-regular !important;
+    font-family: 'opensans-regular' !important;
 }
 .height-82px {
     padding: 10px 10px 15px 10px;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid $gainsboro;
 }
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 .li-link {
     margin-top: 15px !important;
 }
 .btn-group > a {
-    color: #333333;
+    color: $night-rider;
 }
 .ac-detail,
 .ac-detail a {
     display: block;
 }
+.account-head{
+    flex: 1;
+    border-right: 0px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.html b/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.html
index 45d55d6246e..570aabf7e45 100644
--- a/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.html
+++ b/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.html
@@ -31,10 +31,10 @@
 </div>
 <div class="top-bar clearfix">
     <div class="form-inline">
-        <div class="dis  mrR1 d-inline-block middle">
+        <div class="dis  mr-r1 d-inline-block middle">
             <div (clickOutside)="hideListItems()" class="btn-group d-flex" #filterDropDownList="bs-dropdown" dropdown
                 [autoClose]="false" [placement]="'right'">
-                <i dropdownToggle class="icon-options pd cp fs20"></i>
+                <i dropdownToggle class="icon-options pd cp font-20"></i>
                 <ul *dropdownMenu class="dropdown-menu dropdown-menu-left" role="menu" [style.width.px]="'200'">
                     <li role="menuitem">
                         <a class="dropdown-item">
@@ -97,7 +97,7 @@
                     <tr>
                         <th>
                             <div class="d-flex">
-                                <div class=" ">Date</div>
+                                <div>Date</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -108,13 +108,13 @@
                             </div>
                         </th>
 
-                        <th class="td-search-box ">
+                        <th class="td-search-box">
                             <div><span> Account</span></div>
                         </th>
 
 
                         <th *ngIf="showFieldFilter.voucherType">
-                            <div class="d-flex ">
+                            <div class="d-flex">
                                 <div class="">Voucher Type</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
@@ -130,7 +130,7 @@
 
 
 
-                        <th *ngIf="showFieldFilter.voucherNo" class="td-search-box nowrap" style="width: 210px;"
+                        <th *ngIf="showFieldFilter.voucherNo" class="td-search-box nowrap"
                             #searchInvoiceContainer (clickOutside)="clickedOutsideEvent()">
                             <div [hidden]="showSearchInvoiceNo">
                                 <span>Voucher No</span>
@@ -145,7 +145,7 @@
 
                         <th *ngIf="(salesRegisteDetailedResponse$ | async)?.creditTotal" class=" text-right ">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Sales</div>
+                                <div class="text-right">Sales</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -160,7 +160,7 @@
 
                         <th *ngIf="(salesRegisteDetailedResponse$ | async)?.debitTotal" class=" text-right ">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Return</div>
+                                <div class="text-right">Return</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -171,15 +171,15 @@
                             </div>
                         </th>
                         <th *ngIf="showFieldFilter.qtyRate && (salesRegisteDetailedResponse$ | async)?.quantityTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Qty/Unit</div>
+                                <div class="text-right">Qty/Unit</div>
                             </div>
                         </th>
                         <th *ngIf="showFieldFilter.qtyRate && (salesRegisteDetailedResponse$ | async)?.rateTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Rate</div>
+                                <div class="text-right">Rate</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -191,9 +191,9 @@
                         </th>
 
                         <th *ngIf="showFieldFilter.discount && (salesRegisteDetailedResponse$ | async)?.discountTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right  ">Discount</div>
+                                <div class="text-right">Discount</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -207,9 +207,9 @@
                         </th>
 
                         <th *ngIf="showFieldFilter.tax && (salesRegisteDetailedResponse$ | async)?.taxTotal"
-                            class=" text-right ">
+                            class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" text-right ">Tax</div>
+                                <div class="text-right">Tax</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -219,9 +219,9 @@
                                 </div>
                             </div>
                         </th>
-                        <th class=" text-right ">
+                        <th class="text-right">
                             <div class="d-flex justify-content-end">
-                                <div class=" ">Net Sales</div>
+                                <div>Net Sales</div>
                                 <div class="icon-pointer">
                                     <ng-container *ngTemplateOutlet="
                                             sortingTemplate;
@@ -312,7 +312,7 @@
             </table>
         </div>
 
-        <div class="text-center " *ngIf="(salesRegisteDetailedResponse$ | async).totalItems > paginationLimit">
+        <div class="text-center" *ngIf="(salesRegisteDetailedResponse$ | async).totalItems > paginationLimit">
             <pagination [totalItems]="
                     (salesRegisteDetailedResponse$ | async).totalItems
                 " [(ngModel)]="getDetailedsalesRequestFilter.page" [maxSize]="5" class="pagination-sm "
@@ -320,7 +320,7 @@
                 nextText="&#9658; " (pageChanged)="pageChanged($event)"></pagination>
         </div>
     </div>
-    <div class="no-data " *ngIf="
+    <div class="no-data" *ngIf="
             (salesRegisteDetailedResponse$ | async).items.length === 0 &&
             !(isGetSalesDetailsInProcess$ | async)
         ">
@@ -425,7 +425,7 @@ <h4>
 
     <div class="icon-sort-asc" *ngIf="getDetailedsalesRequestFilter.sortBy !== col" (click)="sortbyApi('asc', col)"
         [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedsalesRequestFilter.sortBy === col &&
                 getDetailedsalesRequestFilter.sort === 'asc'
         }"></div>
@@ -434,7 +434,7 @@ <h4>
             getDetailedsalesRequestFilter.sortBy === col &&
             getDetailedsalesRequestFilter.sort === 'asc'
         " (click)="sortbyApi('desc', col)" [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedsalesRequestFilter.sortBy === col &&
                 getDetailedsalesRequestFilter.sort === 'asc'
         }"></div>
@@ -443,7 +443,7 @@ <h4>
             getDetailedsalesRequestFilter.sortBy === col &&
             getDetailedsalesRequestFilter.sort === 'desc'
         " (click)="sortbyApi('asc', col)" [ngClass]="{
-            activeTextColor:
+            'active-text-color':
                 getDetailedsalesRequestFilter.sortBy === col &&
                 getDetailedsalesRequestFilter.sort === 'desc'
         }"></div>
diff --git a/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.scss b/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.scss
index 05cb6f6d8b5..d62562452f6 100644
--- a/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.scss
+++ b/apps/web-giddh/src/app/reports/components/salesRegister-expand-component/sales.register.expand.component.scss
@@ -9,13 +9,10 @@
     white-space: nowrap !important;
 }
 
-.basic > tfoot > tr > th {
-    background: #e3e3e3;
-}
-
 .td-search-box {
     padding: 0px !important;
     position: relative;
+    width: 210px;
 }
 
 .td-search-box div {
@@ -28,7 +25,7 @@
 
 .td-search-box div i {
     margin-top: 1px;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     padding-right: 8px;
     cursor: pointer;
     display: flex;
@@ -45,19 +42,19 @@
     min-width: 100%;
     padding: 11px;
     padding-right: 40px;
-    color: #1c1c1c;
+    color: $nero;
     border: none;
-    background-color: #f2f2f2;
+    background-color: $white-smoke;
 }
 
-.p-modal-tolltip {
+.p-modal-tooltip {
     position: absolute;
-    background-color: white;
+    background-color: $white;
     z-index: 1000;
     width: 257px;
-    border: 1px solid #b4afaf;
+    border: 1px solid $gainsboro;
     border-radius: 4px;
-    box-shadow: 0 7px 24px #00000038;
+    box-shadow: 0 7px 24px $black-russian;
 }
 
 .account-detail-modal-div {
@@ -69,7 +66,7 @@
     border-right: 0;
     padding: 11px 10px 10px 10px;
     width: 100%;
-    background: #ffece094;
+    background: $chablis;
 }
 
 .account-detail-custom-title {
@@ -83,19 +80,19 @@
 }
 
 .custom-detail h4 {
-    color: #707070;
+    color: $gray;
     margin-top: 7px;
     font-size: 14px !important;
-    font-family: opensans-regular !important;
+    font-family: 'opensans-regular' !important;
 }
 
 .height-82px {
     padding: 10px 10px 15px 10px;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid $gainsboro;
 }
 
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 
 .li-link {
@@ -103,7 +100,7 @@ ul.list-unstyled li a {
 }
 
 .btn-group > a {
-    color: #333333;
+    color: $night-rider;
 }
 
 .ac-detail,
@@ -112,16 +109,16 @@ ul.list-unstyled li a {
 }
 
 .main-sale-register-box .sale-register-box p {
-    color: #8f9091;
+    color: $gray;
 }
 
 .main-sale-register-box .sale-register-box h4 {
     font-size: 18px;
-    color: #333333;
+    color: $night-rider;
 }
 
 .sales-register p {
-    color: #8f9091;
+    color: $gray;
     margin-bottom: 5px;
 }
 
@@ -149,14 +146,14 @@ ul.list-unstyled li a {
     align-items: center;
 }
 
-.text-orange {
-    color: #5b64c9 !important;
+.text-purple {
+    color: $chetwode-blue !important;
 }
 
 .sales-register {
     background: $white;
     padding: 15px;
-    box-shadow: 0px -3px 6px #d7d7d7;
+    box-shadow: 0px -3px 6px $gainsboro;
     display: flex;
     align-items: center;
     position: fixed;
@@ -190,12 +187,12 @@ ul.list-unstyled li a {
     vertical-align: middle;
 }
 
-.reportDropdown li {
+.report-dropdown li {
     float: left;
     width: 51px;
 }
 
-.reportDropdown {
+.report-dropdown {
     min-width: 210px;
 }
 
@@ -208,7 +205,7 @@ ul#dropdown-nested li .caret {
     margin-top: 8px;
 }
 
-.reportDropdown {
+.report-dropdown {
     left: 100% !important;
 }
 
@@ -221,7 +218,7 @@ ul#dropdown-nested li .caret {
 }
 
 .custom-month-select li:hover a.dropdown-item {
-    background-color: #e5e5e5;
+    background-color: $whisper;
 }
 
 .custom-month-select button.btn {
@@ -256,10 +253,10 @@ table th {
 }
 .icon-pointer {
     cursor: pointer;
-    color: #757bb9;
+    color: $wild-blue-yonder;
     margin-left: 6px;
 }
-.icon-pointer .activeTextColor {
+.icon-pointer .active-text-color {
     color: $deep-sky-blue;
 }
 .table-middle th .d-flex {
@@ -279,7 +276,7 @@ table th {
     justify-content: center;
     -webkit-box-align: center;
     align-items: center;
-    background-color: #fff;
+    background-color: $white;
     font-size: 18px;
     color: $midnight-blue;
     border: 1px solid $gainsboro;
@@ -289,7 +286,7 @@ table th {
         width: 36px;
         height: 36px;
         border: 1px solid $gainsboro;
-        background-color: #fff;
+        background-color: $white;
         color: $gray;
         font-size: 20px;
         position: relative;
diff --git a/apps/web-giddh/src/app/sales/aside-menu-sales-other-taxes/aside-menu-sales-other-taxes.scss b/apps/web-giddh/src/app/sales/aside-menu-sales-other-taxes/aside-menu-sales-other-taxes.scss
index 1aa28fd4abf..d2cc70cb06e 100644
--- a/apps/web-giddh/src/app/sales/aside-menu-sales-other-taxes/aside-menu-sales-other-taxes.scss
+++ b/apps/web-giddh/src/app/sales/aside-menu-sales-other-taxes/aside-menu-sales-other-taxes.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -18,7 +20,7 @@
     border: 0;
     border-radius: 0;
     background: 0 0;
-    color: #fff;
+    color: $white;
 }
 
 :host .container-fluid {
@@ -30,12 +32,12 @@
 }
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/sales/create/sales.invoice.component.html b/apps/web-giddh/src/app/sales/create/sales.invoice.component.html
index 9ee1229a7b9..0265e2cd3b9 100644
--- a/apps/web-giddh/src/app/sales/create/sales.invoice.component.html
+++ b/apps/web-giddh/src/app/sales/create/sales.invoice.component.html
@@ -1,5 +1,5 @@
-<div class="pd-b1 upper-layer   clearfix">
-    <div class="col-xs-12 clearfix">
+<div class="pd-b1 upper-layer row clearfix">
+    <div class="col-md-12 clearfix">
         <div class="btn-group" dropdown>
             <button id="button1-basic" dropdownToggle type="button" class="btn more-btn-dropdown dropdown-toggle"
                 aria-controls="dropdown-basic">
@@ -23,7 +23,7 @@
 
 <ng-container *ngIf="isUpdateDataInProcess">
 
-    <div class="loaderClass">
+    <div class="loader-class">
         <div class="no-data mr-t2 loader-main">
             <!-- <div class="giddh-spinner vertical-center-spinner"></div> -->
             <div class="spinner2">
@@ -40,16 +40,16 @@
         [ngClass]="{ ' customer-invoice-form ' : !invFormData.voucherDetails.customerName , 'customer-invoice-form-purchase': isPurchaseInvoice } ">
         <div class="clearfix sales-invoice-content ">
 
-            <div class="upper-layer " [ngClass]="{' firstTable' : !invFormData.voucherDetails.customerName }">
-                <div class="clearfix">
-                    <div class="col-md-9 pd0">
-                        <div class="customer-name" [hidden]="isPurchaseInvoice">
+            <div class="upper-layer" [ngClass]="{' first-table' : !invFormData.voucherDetails.customerName }">
+                <div class="clearfix row">
+                    <div class="col-md-9 p-0">
+                        <div class="customer-name row" [hidden]="isPurchaseInvoice">
                             <div class="col-sm-2">
                                 <label>Customer Name</label>
                             </div>
                             <div class="col-sm-5">
                                 <ng-container *ngIf="!isCashInvoice">
-                                    <sales-sh-select style="width:100%; float: left;" name="voucherDetails.customerName"
+                                    <sales-sh-select class="width-100 float-left" name="voucherDetails.customerName"
                                         [options]="customerAcList$ | async"
                                         [(ngModel)]="invFormData.voucherDetails.tempCustomerName"
                                         [customFilter]="customMoveGroupFilter"
@@ -62,16 +62,14 @@
                                         (keyup)="resetCustomerName($event)" (onClear)="resetCustomerName(null)"
                                         [showClear]="!isUpdateMode" [disabled]="isUpdateMode">
                                         <ng-template #optionTemplate let-option="option">
-                                            <a href="javascript:void(0)" class="list-item"
-                                                style="border-bottom: 1px solid #ccc;">
+                                            <a href="javascript:void(0)" class="list-item bd-rb">
                                                 <div class="item">{{ option.label }}</div>
                                                 <div class="item-unique">{{ option.value }}</div>
                                             </a>
                                         </ng-template>
                                         <ng-template #notFoundLinkTemplate>
-                                            <a href="javascript:void(0)" class="list-item" [keyboardShortcut]="'alt+c'"
-                                                (onShortcutPress)="toggleAccountAsidePane()"
-                                                style="width:100%; display: flex;justify-content: space-between;">
+                                            <a href="javascript:void(0)" class="list-item width-100 d-flex justify-content-between" [keyboardShortcut]="'alt+c'"
+                                                (onShortcutPress)="toggleAccountAsidePane()">
                                                 <div class="item">Add Customer</div>
                                                 <div class="item">Alt+C</div>
                                             </a>
@@ -81,7 +79,7 @@
 
                                 <ng-container *ngIf="isCashInvoice">
                                     <input type="text" #cashInvoiceInput name="voucherDetails.customerName"
-                                        class="form-control cashInvoiceInput"
+                                        class="form-control cash-invoice-input"
                                         [(ngModel)]="invFormData.voucherDetails.customerName" [readOnly]="isUpdateMode">
                                 </ng-container>
 
@@ -89,17 +87,17 @@
 
 
                         </div>
-                        <div class="vendore-name" [hidden]="!isPurchaseInvoice">
+                        <div class="vendor-name row" [hidden]="!isPurchaseInvoice">
                             <div class="col-sm-2">
                                 <label>Vendor Name</label>
                             </div>
                             <div class="col-sm-5">
                                 <div class="flex-row-child">
-                                    <div class="form-group noMarg">
+                                    <div class="form-group no-margin">
 
                                         <!-- [useInBuiltFilterForIOptionTypeItems]="true" -->
                                         <!--  -->
-                                        <sales-sh-select style="width:100%;" name="voucherDetails.customerName"
+                                        <sales-sh-select class="width-100" name="voucherDetails.customerName"
                                             [options]="customerAcList$ | async"
                                             [(ngModel)]="invFormData.voucherDetails.tempCustomerName"
                                             [customFilter]="customMoveGroupFilter"
@@ -112,8 +110,7 @@
                                             (keyup)="resetCustomerName($event)" (onClear)="resetCustomerName(null)"
                                             [showClear]="!isUpdateMode">
                                             <ng-template #optionTemplate let-option="option">
-                                                <a href="javascript:void(0)" class="list-item"
-                                                    style="border-bottom: 1px solid #ccc;">
+                                                <a href="javascript:void(0)" class="list-item bd-rb">
                                                     <div class="item">{{ option.label }}</div>
                                                     <div class="item-unique">{{ option.value }}</div>
                                                 </a>
@@ -124,10 +121,11 @@
                             </div>
 
                         </div>
+                        <div class="row">
                         <div class="col-sm-10 col-sm-offset-2">
                             <ng-container>
-                                <section class="form-inline  ">
-                                    <div class=" wrap-billing-address clearfix">
+                                <section class="form-inline">
+                                    <div class="wrap-billing-address clearfix">
                                         <ng-container *ngIf="isSalesInvoice || isPurchaseInvoice">
                                             <img src="assets/images/new/search_customer.svg"
                                                 class="img-responsive search-arrow-image "
@@ -140,7 +138,7 @@
                                                 [ngClass]="{'cash-invoice-tip-img' : isCashInvoice}" />
                                         </ng-container>
                                         <div class="row">
-                                            <div class="col-xs-6">
+                                            <div class="col-6">
                                                 <div class="form-group">
                                                     <label>Billing Address</label>
                                                     <div class="billing-address clearfix">
@@ -149,7 +147,7 @@
                                                             [(ngModel)]="invFormData.accountDetails.billingDetails.address[0]"
                                                             rows="3" autocomplete="off" autofocus="off"
                                                             aria-autocomplete="none"></textarea>
-                                                        <div class="">
+                                                        <div>
                                                             <div class="col-sm-6 pd">
                                                                 <!-- <label>Country</label> -->
 
@@ -158,7 +156,7 @@
                                                                 </label>
 
                                                             </div>
-                                                            <div class="col-sm-6 pd stateField">
+                                                            <div class="col-sm-6 pd state-field">
                                                                 <!-- <label>State</label> -->
                                                                 <!-- remove disabled after api changes -->
                                                                 <sales-sh-select [disabled]="isUpdateMode"
@@ -186,8 +184,8 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="col-xs-6">
-                                                <div class="form-group p0 width100">
+                                            <div class="col-6">
+                                                <div class="form-group p-0 width-100">
                                                     <label>
                                                         <input type="checkbox" (change)="autoFillShippingDetails()"
                                                             name="autoFillShipping" [attr.checked]="true"
@@ -210,7 +208,7 @@
                                                                         </label>
                                                                     </div>
                                                                 </div>
-                                                                <div class="col-sm-6 pd stateField">
+                                                                <div class="col-sm-6 pd state-field">
                                                                     <!-- <label>State</label> -->
                                                                     <!-- <ng-select [disabled]="autoFillShipping" #statesShipping class="splSales" name="shippingDetails.stateCode" [options]="statesSource$ | async" [(ngModel)]="invFormData.accountDetails.shippingDetails.stateCode"></ng-select> -->
                                                                     <!-- (selected)="autoFillShippingDetails()" -->
@@ -248,11 +246,12 @@
                                 </section>
                             </ng-container>
                         </div>
+                        </div>
                     </div>
-                    <div class="col-md-3  balncDue">
-                        <div class=" text-right" *ngIf="invFormData.voucherDetails.customerName && !isCashInvoice"
+                    <div class="col-md-3 balance-due">
+                        <div class="text-right" *ngIf="invFormData.voucherDetails.customerName && !isCashInvoice"
                             [hidden]="isPurchaseInvoice">
-                            <p *ngIf="toggleFieldForSales" class="fs20 b">
+                            <p *ngIf="toggleFieldForSales" class="font-20 b">
                                 <span class="balance-due">Balance Due: </span>
 
                                 <span class="sp-rupees">Rs
@@ -264,9 +263,9 @@
                 </div>
             </div>
 
-            <div class="">
-                <div class="col-md-9 pd0">
-                    <div class="attention-to clearfix">
+            <div>
+                <div class="col-md-9 p-0">
+                    <div class="attention-to clearfix row">
                         <div class="col-sm-2">
                             <label>Attention to</label>
                         </div>
@@ -281,7 +280,7 @@
 
 
                     </div>
-                    <div class="email-id clearfix">
+                    <div class="email-id clearfix row">
                         <div class="col-sm-2">
                             <label>Email Id</label>
                         </div>
@@ -295,7 +294,7 @@
 
 
                     </div>
-                    <div class="mobile-number clearfix">
+                    <div class="mobile-number clearfix row">
                         <div class="col-sm-2">
                             <label>Mobile Number</label>
                         </div>
@@ -309,14 +308,14 @@
 
 
                     </div>
-                    <div class="inovice-purchaseInvoice" [ngClass]="{'forPurchase': isPurchaseInvoice}">
+                    <div class="invoice-purchase-invoice row" [ngClass]="{'forPurchase': isPurchaseInvoice}">
                         <div class="col-sm-2">
                             <label> {{ !isPurchaseInvoice ? 'Invoice No.' : 'Purchase Invoice No.' }}</label>
                         </div>
                         <div class="col-sm-5">
                             <input type="text" name="accountDetails.invoiceNum"
-                                class="form-control invoiceDate attentionTo"
-                                [ngClass]="{'dateinvoice': !isPurchaseInvoice }"
+                                class="form-control invoice-date attentionTo"
+                                [ngClass]="{'date-invoice': !isPurchaseInvoice }"
                                 [disabled]="isUpdateMode  || !useCustomInvoiceNumber"
                                 [(ngModel)]="invFormData.voucherDetails.voucherNumber" />
                         </div>
@@ -327,7 +326,7 @@
                                     <label>{{isPurchaseInvoice ? 'Bill Date' : 'Invoice Date' }} </label>
 
                                     <input type="text" [placeholder]="giddhDateFormat" #voucherDate="ngModel"
-                                        name="voucherDate" class="form-control dateinvoice" bsDatepicker
+                                        name="voucherDate" class="form-control date-invoice" bsDatepicker
                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                         [(ngModel)]="invFormData.voucherDetails.voucherDate" [disabled]="isUpdateMode"
                                         [class.invalid-inp]="voucherDate.errors && (voucherDate.dirty || voucherDate.touched)" />
@@ -342,7 +341,7 @@
                                     <label> {{isPurchaseInvoice ? ' Due Date' : 'Due Date'}}</label>
 
                                     <input type="text" [placeholder]="giddhDateFormat" #dueDate="ngModel" name="dueDate"
-                                        class="form-control dateinvoice" bsDatepicker
+                                        class="form-control date-invoice" bsDatepicker
                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                         [(ngModel)]="invFormData.voucherDetails.dueDate"
                                         [class.invalid-inp]="dueDate.errors && (dueDate.dirty || dueDate.touched)" />
@@ -353,13 +352,13 @@
                             </div>
                         </div>
                     </div>
-                    <div class="">
+                    <div>
                         <ng-container>
 
                             <section
-                                class="staticInvoiceTable salseInvoicetable clearfix mr-b2 whiteBg container-fluid ng-tns-c8-0 ">
-                                <div class="table_width-small ">
-                                    <table class="table  table-custom-invoice  basic">
+                                class="static-invoice-table sales-invoice-table clearfix mr-b2 white-bg container-fluid ng-tns-c8-0 ">
+                                <div class="table-width-small">
+                                    <table class="table table-custom-invoice basic">
                                         <thead>
                                             <tr>
 
@@ -379,29 +378,29 @@
                                                     *ngIf="activeIndx !== entryIdx">
                                                     <td>{{ entryIdx + 1 }}</td>
                                                     <td>
-                                                        <div class="productName">
+                                                        <div class="product-name">
                                                             <label *ngIf="!transaction.accountName"
-                                                                class="selectAccountLabel">Click to Select
+                                                                class="select-account-label">Click to Select
                                                                 Account</label> {{transaction.accountName}}
                                                             <span
                                                                 *ngIf="transaction.stockDetails?.uniqueName">({{transaction.stockDetails?.name}}
                                                                 )</span>
 
                                                         </div>
-                                                        <div class="skuNumber">
+                                                        <div class="sku-number">
                                                             <label>SKU:</label>Number
                                                         </div>
-                                                        <div class="discription">
+                                                        <div class="description">
                                                             {{transaction.description}}
 
                                                         </div>
                                                         <p class="small text-muted"
                                                             *ngIf="transaction.sku_and_customfields">
                                                             {{transaction.sku_and_customfields}}</p>
-                                                        <div class="dateHsnCode">
+                                                        <div class="date-hsn-code">
                                                             <div class="row">
-                                                                <div class="col-xs-6" *ngIf="entry.entryDate">
-                                                                    <div class="entryDate">
+                                                                <div class="col-6" *ngIf="entry.entryDate">
+                                                                    <div class="entry-date">
                                                                         <label>Entry Date: </label>
                                                                         {{entry.entryDate | date: 'dd-MM-yyyy'}}
                                                                         <span class="edit-icon" *ngIf="!isUpdateMode">
@@ -412,9 +411,9 @@
 
                                                                     </div>
                                                                 </div>
-                                                                <div class="col-xs-6"
+                                                                <div class="col-6"
                                                                     *ngIf="transaction.hsnNumber || transaction.sacNumber">
-                                                                    <div class="hsnCode text-right">
+                                                                    <div class="hsn-code text-right">
                                                                         <label> HSN/SAC:</label>
                                                                         <span>
                                                                             {{transaction.hsnOrSac === 'hsn' ? transaction.hsnNumber : transaction.sacNumber}}
@@ -462,7 +461,7 @@
                                                     </td>
                                                     <td class="text-right">{{entry.taxSum}}%</td>
                                                     <td class="text-right">
-                                                        <div style="display: flex;flex-direction: column;">
+                                                        <div class="d-flex flex-column">
                                                             <span>{{transaction.total | number:'1.2-2'}}</span>
                                                             <span *ngIf="entry.isOtherTaxApplicable">
                                                                 {{ entry.otherTaxModal?.appliedOtherTax?.name }} :
@@ -470,7 +469,7 @@
                                                             </span>
                                                         </div>
                                                     </td>
-                                                    <td class="text-center" style="width:3%;">
+                                                    <td class="text-center" width="3%">
                                                         <span class="cp" (click)="removeTransaction(entryIdx)"
                                                             *ngIf="!isUpdateMode || (isUpdateMode && entry.isNewEntryInUpdateMode)">
                                                             <i class="icon-trash" aria-hidden="true"></i>
@@ -480,7 +479,7 @@
                                                 <tr *ngIf="activeIndx === entryIdx">
                                                     <td>{{ entryIdx + 1 }}</td>
                                                     <td>
-                                                        <div class="productName">
+                                                        <div class="product-name">
                                                             <div class="ng-select-wrap">
                                                                 <sh-select [options]="salesAccounts$ | async"
                                                                     [(ngModel)]="transaction.fakeAccForSelect2"
@@ -496,8 +495,7 @@
                                                                     <ng-template #optionTemplate let-option="option">
                                                                         <ng-container *ngIf="!option.additional?.stock">
                                                                             <a href="javascript:void(0)"
-                                                                                class="list-item"
-                                                                                style="border-bottom: 1px solid #ccc;">
+                                                                                class="list-item bd-rb">
                                                                                 <div class="item">{{ option.label }}
                                                                                 </div>
                                                                                 <div class="item-unique">
@@ -507,8 +505,7 @@
                                                                         </ng-container>
                                                                         <ng-container *ngIf="option.additional?.stock">
                                                                             <a href="javascript:void(0)"
-                                                                                class="list-item"
-                                                                                style="border-bottom: 1px solid #ccc;">
+                                                                                class="list-item bd-rb">
                                                                                 <div class="item">{{ option.label }}
                                                                                 </div>
                                                                                 <div class="item-unique">
@@ -524,11 +521,11 @@
                                                             </div>
 
                                                         </div>
-                                                        <div class="" *ngIf="transaction.fakeAccForSelect2">
-                                                            <div class="skuNumber">
+                                                        <div *ngIf="transaction.fakeAccForSelect2">
+                                                            <div class="sku-number">
                                                                 <label>SKU:</label>Number
                                                             </div>
-                                                            <div class="discription">
+                                                            <div class="description">
                                                                 <textarea type="text" placeholder="Add Description"
                                                                     name="transaction.description_{{entryIdx}}"
                                                                     class="form-control"
@@ -537,10 +534,10 @@
                                                                     *ngIf="transaction.sku_and_customfields">
                                                                     {{transaction.sku_and_customfields}}</p>
                                                             </div>
-                                                            <div class="dateHsnCode">
+                                                            <div class="date-hsn-code">
                                                                 <div class="row">
-                                                                    <div class="col-xs-6">
-                                                                        <div class="entryDate">
+                                                                    <div class="col-6">
+                                                                        <div class="entry-date">
                                                                             <label>Entry Date: </label>
                                                                             <span *ngIf="!isUpdateMode">
                                                                                 <input type="text"
@@ -566,9 +563,9 @@
 
                                                                         </div>
                                                                     </div>
-                                                                    <div class="col-xs-6">
-                                                                        <div class="wrap-hsnBox">
-                                                                            <div class="hsnCode text-right"
+                                                                    <div class="col-6">
+                                                                        <div class="wrap-hsn-box">
+                                                                            <div class="hsn-code text-right"
                                                                                 (click)="$event.stopPropagation();hsnDropdownShow=!hsnDropdownShow">
                                                                                 <label>HSN/SAC:</label>
                                                                                 <span>
@@ -578,7 +575,7 @@
                                                                                     {{transaction.hsnOrSac === 'hsn' ? transaction.hsnNumber : transaction.sacNumber }}
                                                                                     <span
                                                                                         *ngIf="!transaction.hsnNumber && !transaction.sacNumber"
-                                                                                        class="updateText cp">Update
+                                                                                        class="update-text cp">Update
                                                                                     </span>
                                                                                     <span class="edit-icon">
                                                                                         <img
@@ -589,7 +586,7 @@
                                                                             </div>
 
 
-                                                                            <div class="hsnCodeDropdown"
+                                                                            <div class="hsn-code-dropdown"
                                                                                 *ngIf="hsnDropdownShow">
                                                                                 <label>HSN/SAC:</label>
                                                                                 <input type="text" maxLength="10"
@@ -665,7 +662,7 @@
                                                     </td>
                                                     <td>
 
-                                                        <div class=" text-right">
+                                                        <div class="text-right">
                                                             <discount-list #discountComponent [isMenuOpen]="false"
                                                                 [discountAccountsDetails]="entry.discounts"
                                                                 (discountTotalUpdated)="entry.discountSum = $event; selectedDiscountEvent(transaction, entry)"
@@ -675,7 +672,7 @@
 
                                                     </td>
                                                     <td class="text-right">
-                                                        <sales-tax-list class="salesTax" [showTaxPopup]="false"
+                                                        <sales-tax-list class="sales-tax" [showTaxPopup]="false"
                                                             [applicableTaxes]="transaction.applicableTaxes"
                                                             [exceptTaxTypes]="exceptTaxTypes"
                                                             [allowedSelectionOfAType]="[{ type: ['GST', 'commongst', 'InputGST'], count:1 } ]"
@@ -690,8 +687,8 @@
                                                             [(ngModel)]="transaction.total" readonly
                                                             decimalDigitsDirective [DecimalPlaces]="2" />
 
-                                                        <div class="wrap-otherTax">
-                                                            <input type="checkbox" class="other-taxes-checkobx"
+                                                        <div class="wrap-other-tax">
+                                                            <input type="checkbox" class="other-taxes-checkbox"
                                                                 [(ngModel)]="entry.isOtherTaxApplicable"
                                                                 *ngIf="!entry.isOtherTaxApplicable"
                                                                 name="entry.isOtherTaxApplicable_{{entryIdx}}"
@@ -699,7 +696,7 @@
                                                                 (ngModelChange)="toggleOtherTaxesAsidePane(entry.isOtherTaxApplicable, entryIdx)">
                                                             <label for="entry.isOtherTaxApplicable_{{entryIdx}}"
                                                                 *ngIf="!entry.isOtherTaxApplicable"
-                                                                class="otherTaxLable" style="font-size:13px;">Other
+                                                                class="other-tax-label font-13">Other
                                                                 Tax?</label>
                                                         </div>
                                                         <div *ngIf="entry.isOtherTaxApplicable" class="mr-t1">
@@ -711,11 +708,10 @@
                                                                         <img src="assets/images/edit-pencilicon.svg">
                                                                     </a>
                                                                 </span>
-                                                                <input class="text-right otherTaxsinput"
+                                                                <input class="text-right other-taxes-input"
                                                                     disabled="disabled" [(ngModel)]="entry.otherTaxSum"
                                                                     name="entry.otherTaxesSum" />
-                                                                <p
-                                                                    style="margin-top: 5px; font-size: 12px; text-transform: capitalize;">
+                                                                <p class="mr-t05 font-12 text-capitalize">
                                                                     {{ entry.otherTaxModal?.appliedOtherTax?.name}}</p>
                                                             </span>
 
@@ -724,7 +720,7 @@
                                                         <!--                  <ng-container-->
                                                         <!--                    *ngTemplateOutlet="otherTaxSidePane;context: {$implicit: selectedEntry }"></ng-container>-->
                                                     </td>
-                                                    <td class="action-panel-td text-center" style="width:3%;">
+                                                    <td class="action-panel-td text-center" width="3%">
                                                         <span class="cp" (click)="removeTransaction(entryIdx)"
                                                             *ngIf="!isUpdateMode || (isUpdateMode && entry.isNewEntryInUpdateMode)">
                                                             <i class="icon-trash" aria-hidden="true"></i>
@@ -736,8 +732,8 @@
 
                                         </tbody>
 
-                                        <div class="p-4 aqua-color add-line-bulk-item" style="width: max-content;">
-                                            <a class="" href="javascript:void 0" (click)="addBlankRow(null)">+ Add New
+                                        <div class="p-4 aqua-color add-line-bulk-item width-100">
+                                            <a href="javascript:void 0" (click)="addBlankRow(null)">+ Add New
                                                 Line</a>
                                         </div>
 
@@ -745,7 +741,7 @@
 
                                             <tr>
                                                 <td colspan="4">
-                                                    <div class="">
+                                                    <div>
                                                         <div class="collapse-pane clearfix">
                                                             <div class="collapse-pane-heading"
                                                                 (click)="isOthrDtlCollapsed = !isOthrDtlCollapsed">
@@ -759,9 +755,9 @@
                                                                 </div>
                                                             <div class="ico-head">Other Details</div>
                                                             <div [collapse]="isOthrDtlCollapsed"
-                                                                class="clearfix max-600 pdL3 mr0">
+                                                                class="clearfix max-600 pd-l3 m-0">
                                                                 <div class="row">
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Ship Date</label> -->
                                                                         <input type="text" #shippingDate="ngModel"
                                                                             [placeholder]="giddhDateFormat" bsDatepicker
@@ -778,14 +774,14 @@
                                                                         </p>
                                                                         <!--[placeholder]="giddhDateFormat"-->
                                                                     </div>
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Ship Via</label> -->
                                                                         <input type="text" name="shippedVia"
                                                                             [(ngModel)]="invFormData.templateDetails.other.shippedVia"
                                                                             class="form-control"
                                                                             placeholder="Ship Via" />
                                                                     </div>
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Tracking No.</label> -->
                                                                         <input type="text" name="trackingNumber"
                                                                             [(ngModel)]="invFormData.templateDetails.other.trackingNumber"
@@ -794,21 +790,21 @@
                                                                     </div>
                                                                 </div>
                                                                 <div class="row">
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Field 1</label> -->
                                                                         <input type="text" name="customField1"
                                                                             [(ngModel)]="invFormData.templateDetails.other.customField1"
                                                                             class="form-control"
                                                                             placeholder="Field 1" />
                                                                     </div>
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Field 2</label> -->
                                                                         <input type="text" name="customField2"
                                                                             [(ngModel)]="invFormData.templateDetails.other.customField2"
                                                                             class="form-control"
                                                                             placeholder="Field 2" />
                                                                     </div>
-                                                                    <div class="form-group col-xs-4">
+                                                                    <div class="form-group col-4">
                                                                         <!-- <label>Field 3</label> -->
                                                                         <input type="text" name="customField3"
                                                                             [(ngModel)]="invFormData.templateDetails.other.customField3"
@@ -821,17 +817,17 @@
                                                     </div>
                                                     <div class="pd-t1 pl0 max-600" *ngIf="!isPurchaseInvoice">
                                                         <label class="mr-b1">Message</label>
-                                                        <textarea style="height:120px !important" class="form-control"
+                                                        <textarea rows="3" class="form-control"
                                                             name="message2"
                                                             [(ngModel)]="invFormData.templateDetails.other.message2"></textarea>
                                                     </div>
                                                     <!-- commented due to presently attachfile key is not available in request
         -->
-                                                    <div class="pd-t1 pl0 max-600 pos-rel" *ngIf="isPurchaseInvoice">
+                                                    <div class="pd-t1 pl0 max-600 position-relative" *ngIf="isPurchaseInvoice">
                                                         <label class="mr-b1"><i
                                                                 class="icon-file-path"></i>
                                                             Attachment</label>
-                                                        <label class="custom-file-label form-control cp pos-rel"
+                                                        <label class="custom-file-label form-control cp position-relative"
                                                             for="invoiceFile"> <em *ngIf="!selectedFileName">Drag/Drop
                                                                 file or click here</em> <em *ngIf="selectedFileName"
                                                                 class="text-success">{{selectedFileName}}</em>
@@ -847,69 +843,69 @@
                                                     </div>
                                                 </td>
                                                 <td colspan="4">
-                                                    <section class="tableSec form-group">
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">Total Amount</div>
-                                                            <div class="tableCell figureCell">
+                                                    <section class="table-sec form-group">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">Total Amount</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.subTotal | number:'1.2-2'}}
                                                             </div>
                                                         </div>
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">Discount</div>
-                                                            <div class="tableCell figureCell">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">Discount</div>
+                                                            <div class="table-cell figure-cell">
                                                                 -{{invFormData.voucherDetails.totalDiscount | number:'1.2-2'}}
                                                             </div>
                                                         </div>
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">Taxable Value</div>
-                                                            <div class="tableCell figureCell">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">Taxable Value</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.totalTaxableValue | number:'1.2-2'}}
                                                             </div>
                                                         </div>
 
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">Tax</div>
-                                                            <div class="tableCell figureCell">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">Tax</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.gstTaxesTotal | number:'1.2-2'}}
                                                             </div>
                                                         </div>
 
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">CESS</div>
-                                                            <div class="tableCell figureCell">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">CESS</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.cessTotal | number:'1.2-2'}}
                                                             </div>
                                                         </div>
 
-                                                        <div class="tableRow">
-                                                            <div class="tableCell">
+                                                        <div class="table-row">
+                                                            <div class="table-cell">
                                                                 <strong>Total</strong>
                                                             </div>
-                                                            <div class="tableCell figureCell">
+                                                            <div class="table-cell figure-cell">
                                                                 <strong>{{invFormData.voucherDetails.grandTotal | number:'1.2-2'}}</strong>
                                                             </div>
                                                         </div>
 
-                                                        <div class="tableRow"
+                                                        <div class="table-row"
                                                             *ngIf="invFormData.voucherDetails.tcsTotal > 0">
-                                                            <div class="tableCell">TCS</div>
-                                                            <div class="tableCell figureCell">
+                                                            <div class="table-cell">TCS</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.tcsTotal | number:'1.2-2'}}
                                                             </div>
                                                         </div>
 
-                                                        <div class="tableRow"
+                                                        <div class="table-row"
                                                             *ngIf="invFormData.voucherDetails.tdsTotal > 0">
-                                                            <div class="tableCell">TDS</div>
-                                                            <div class="tableCell figureCell">
+                                                            <div class="table-cell">TDS</div>
+                                                            <div class="table-cell figure-cell">
                                                                 {{invFormData.voucherDetails.tdsTotal | number:'1.2-2'}}
                                                             </div>
                                                         </div>
 
 
-                                                        <div class="tableRow" *ngIf="isSalesInvoice || isCashInvoice">
+                                                        <div class="table-row" *ngIf="isSalesInvoice || isCashInvoice">
                                                             <!-- (clickOutside)="dropdownisOpen=false;" [attachOutsideOnClick]="true" -->
-                                                            <div class="tableCell deposit-section">
+                                                            <div class="table-cell deposit-section">
                                                                 <!--
         <div class="btn-group" dropdown #depositDropdown="bs-dropdown" [autoClose]="false">
         -->
@@ -919,17 +915,17 @@
         {{ isPurchaseInvoice ? 'Payment' : 'Deposit' }}
         </button> -->
                                                                     <div (click)="clickedInside($event)"
-                                                                        id="deposit-dropdown" class=" form-group pd-1">
+                                                                        id="deposit-dropdown" class="form-group pd-1">
                                                                         <p>Deposit</p>
                                                                         <ul>
 
 
                                                                             <li role="menuitem">
-                                                                                <div class="">
-                                                                            <li role="menuitem" class="mr-t1 ">
-                                                                                <div class="clearfix paymentMode">
+                                                                                <div>
+                                                                            <li role="menuitem" class="mr-t1">
+                                                                                <div class="clearfix payment-mode">
 
-                                                                                    <sh-select class="pull-right "
+                                                                                    <sh-select class="pull-right"
                                                                                         name="depositAccountUniqueName"
                                                                                         [options]="bankAccounts$ | async"
                                                                                         [(ngModel)]="depositAccountUniqueName"
@@ -944,8 +940,7 @@
                                                                                         <ng-template #optionTemplate1
                                                                                             let-option="option">
                                                                                             <a href="javascript:void(0)"
-                                                                                                class="list-item"
-                                                                                                style="border-bottom: 1px solid #ccc;">
+                                                                                                class="list-item bd-rb">
                                                                                                 <div class="item">
                                                                                                     {{ option.label }}
                                                                                                 </div>
@@ -967,20 +962,20 @@
                                                                                     (blur)="txnChangeOccurred()"
                                                                                     placeholder="Amount"
                                                                                     name="depositAmount"
-                                                                                    class="form-control amountField text-right pull-right max100"
+                                                                                    class="form-control amount-field text-right pull-right max100"
                                                                                     [(ngModel)]="depositAmount"
                                                                                     [readonly]='isCashInvoice'
-                                                                                    [ngClass]='{"amountFiledCash": isCashInvoice}' />
+                                                                                    [ngClass]='{"amount-filed-cash": isCashInvoice}' />
                                                                                 <span *ngIf="isCashInvoice"
-                                                                                    class="amountField pull-right max100"
-                                                                                    [ngClass]='{"amountFiledCash": isCashInvoice}'>{{invFormData.voucherDetails.balanceDue | number:'1.2-2'}}</span>
+                                                                                    class="amount-field pull-right max100"
+                                                                                    [ngClass]='{"amount-filed-cash": isCashInvoice}'>{{invFormData.voucherDetails.balanceDue | number:'1.2-2'}}</span>
 
                                                                                 <label class="pull-right">Amount</label>
                                                                             </li>
                                                                             <li *ngIf="toggleFieldForSales && !isCashInvoice"
                                                                                 class="clearfix mr-t1">
                                                                                 <strong
-                                                                                    class="pull-right balanceDueText">{{invFormData.voucherDetails.balanceDue | number:'1.2-2'}}</strong>
+                                                                                    class="pull-right balance-due-text">{{invFormData.voucherDetails.balanceDue | number:'1.2-2'}}</strong>
                                                                                 <strong class="pull-right">Balance
                                                                                     Due</strong>
                                                                             </li>
@@ -988,11 +983,11 @@
 
 
                                                                     </ul>
-                                                                    <div class="tableRow" *ngIf="toggleFieldForSales">
-                                                                        <div class="tableCell">
+                                                                    <div class="table-row" *ngIf="toggleFieldForSales">
+                                                                        <div class="table-cell">
 
                                                                         </div>
-                                                                        <div class="tableCell figureCell">
+                                                                        <div class="table-cell figure-cell">
 
                                                                         </div>
                                                                     </div>
@@ -1001,11 +996,11 @@
 
                                                         </div>
                                 </div>
-                                <div class="tableRow" *ngIf="isPurchaseInvoice">
-                                    <div class="tableCell">
+                                <div class="table-row" *ngIf="isPurchaseInvoice">
+                                    <div class="table-cell">
                                         <strong>Balance Due </strong>
                                     </div>
-                                    <div class="tableCell figureCell">
+                                    <div class="table-cell figure-cell">
                                         <strong>{{invFormData.voucherDetails.balanceDue | number:'1.2-2'}}</strong>
                                     </div>
                                 </div>
@@ -1021,7 +1016,7 @@
                     </div>
                     <!-- region dummy data -->
                     <ng-template #template>
-                        <div class="">
+                        <div>
                             <div class="modal-header">
                                 <h4 class="modal-title pull-left">Add bulk items</h4>
                                 <button type="button" class="close pull-right" aria-label="Close"
@@ -1032,117 +1027,117 @@ <h4 class="modal-title pull-left">Add bulk items</h4>
                             <div class="modal-body">
                                 <div class="row">
                                     <div class="col-md-6">
-                                        <div class="leftContent">
-                                            <div class="searchBox">
+                                        <div class="left-content">
+                                            <div class="search-box">
                                                 <input type="text" placeholder="Search stock">
                                             </div>
-                                            <div class="productList">
-                                                <div class="singleProductWrapper">
+                                            <div class="product-list">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (Dummy text Lorem ipsum)</h5>
                                                     <p>
 
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (Dummy text Lorem ipsum)</h5>
                                                     <p>
 
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
                                                         <span class="rateStock"><label>Rate:</label> </span>$2000/-
                                                     </p>
                                                 </div>
-                                                <div class="singleProductWrapper">
+                                                <div class="single-product-wrapper">
                                                     <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                                     <p>
                                                         <span class="stockSku"><label>SKU: </label>Number</span>
@@ -1154,11 +1149,11 @@ <h5>Sales (100 POLYSTER NON TEXTURED LINING FABRIC)</h5>
                                         </div>
                                     </div>
                                     <div class="col-md-6 pl-0">
-                                        <div class="rightContent">
-                                            <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
+                                        <div class="right-content">
+                                            <h4>Selected Stocks <span class="selected-stock-number">(4)</span></h4>
                                             <hr>
-                                            <div class="wrapSelectedStocks">
-                                                <div class="singleSelectdStock clearfix">
+                                            <div class="wrap-selected-stocks">
+                                                <div class="single-selected-stock clearfix">
                                                     <div class="pull-left">
                                                         <div class="stockName">
                                                             <p>Sales (100 POLYSTER NON TEX…)</p>
@@ -1185,7 +1180,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="singleSelectdStock clearfix">
+                                                <div class="single-selected-stock clearfix">
                                                     <div class="pull-left">
                                                         <div class="stockName">
                                                             <p>Sales (100 POLYSTER TEX…)</p>
@@ -1212,7 +1207,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="singleSelectdStock clearfix">
+                                                <div class="single-selected-stock clearfix">
                                                     <div class="pull-left">
                                                         <div class="stockName">
                                                             <p>Sales (text)</p>
@@ -1240,9 +1235,9 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="temapletFooter">
+                                            <div class="template-footer">
                                                 <hr>
-                                                <div class="btn-group bulkItemBtnGroup">
+                                                <div class="btn-group bulk-item-btn-group">
                                                     <button class="btn btn-sm btn-success" type="button"
                                                         (click)="hsnDropdownShow=!hsnDropdownShow">
                                                         Save
@@ -1263,7 +1258,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
 
                     </section>
 
-                    <section class="clearfix mr-b2 whiteBg container-fluid">
+                    <section class="clearfix mr-b2 white-bg container-fluid">
                     </section>
 
 
@@ -1274,9 +1269,9 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
         </div>
 
 
-        <div class="clearfix wrapper-customer-table  pdT2">
-            <table class="table customerInvoiceTable"
-                [ngClass]="{' firstTable' : !invFormData.voucherDetails.customerName }" style="display: none;">
+        <div class="clearfix wrapper-customer-table pd-t2">
+            <table class="table customer-invoice-table"
+                [ngClass]="{' first-table' : !invFormData.voucherDetails.customerName }" style="display: none;">
                 <tr [hidden]="isPurchaseInvoice">
                     <td width="150px">
                         <label>Customer Name </label>
@@ -1285,7 +1280,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                         <div class="clearfix">
 
                             <ng-container *ngIf="!isCashInvoice">
-                                <sales-sh-select style="width:48.5%; float: left;" name="voucherDetails.customerName"
+                                <sales-sh-select class="sh-drop float-left" name="voucherDetails.customerName"
                                     [options]="customerAcList$ | async"
                                     [(ngModel)]="invFormData.voucherDetails.customerName"
                                     [customFilter]="customMoveGroupFilter"
@@ -1297,16 +1292,14 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                     (keyup)="resetCustomerName($event)" (onClear)="resetCustomerName(null)"
                                     [showClear]="!isUpdateMode" [disabled]="isUpdateMode">
                                     <ng-template #optionTemplate let-option="option">
-                                        <a href="javascript:void(0)" class="list-item"
-                                            style="border-bottom: 1px solid #ccc;">
+                                        <a href="javascript:void(0)" class="list-item bd-rb">
                                             <div class="item">{{ option.label }}</div>
                                             <div class="item-unique">{{ option.value }}</div>
                                         </a>
                                     </ng-template>
                                     <ng-template #notFoundLinkTemplate>
-                                        <a href="javascript:void(0)" class="list-item" [keyboardShortcut]="'alt+c'"
-                                            (onShortcutPress)="toggleAccountAsidePane()"
-                                            style="width:100%; display: flex;justify-content: space-between;">
+                                        <a href="javascript:void(0)" class="list-item width-100 d-flex justify-content-between" [keyboardShortcut]="'alt+c'"
+                                            (onShortcutPress)="toggleAccountAsidePane()">
                                             <div class="item">Add Customer</div>
                                             <div class="item">Alt+C</div>
                                         </a>
@@ -1316,20 +1309,20 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
 
                             <ng-container *ngIf="isCashInvoice">
                                 <input type="text" #cashInvoiceInput name="voucherDetails.customerName"
-                                    class="form-control cashInvoiceInput"
+                                    class="form-control cash-invoice-input"
                                     [(ngModel)]="invFormData.voucherDetails.customerName" [readOnly]="isUpdateMode"
                                     autocomplete="notallowedhere">
                             </ng-container>
-                            <!-- <a class="copyInvoice" *ngIf="invFormData.voucherDetails.customerName"> <img src="../../assets/images/copy-icon.svg">Copy Previous Invoice</a> -->
+                            <!-- <a class="copy-invoice" *ngIf="invFormData.voucherDetails.customerName"> <img src="../../assets/images/copy-icon.svg">Copy Previous Invoice</a> -->
                         </div>
                         <!-- <div class="other-options">
   <a href="#">Unregistered Business</a> | <a href="#">Customer Details</a>
 </div> -->
                         <!-- flex row child start -->
 
-                        <!--            <div class="flex-row-child add-entryAgainst mrL2" *ngIf="!isCustomerSelected">-->
+                        <!--            <div class="flex-row-child add-entry-against mr-l2" *ngIf="!isCustomerSelected">-->
                         <!--              &lt;!&ndash;*ngIf="typeaheadNoResultsOfCustomer"&ndash;&gt;-->
-                        <!--              <div class="form-group noMarg">-->
+                        <!--              <div class="form-group no-margin">-->
                         <!--                <label>Add Entry Against</label>-->
                         <!--                <sh-select name="accountDetails.uniqueName" [options]="bankAccounts$ | async"-->
                         <!--                           [(ngModel)]="invFormData.accountDetails.uniqueName" (selected)="onSelectBankCash($event)"-->
@@ -1348,8 +1341,8 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                         <!-- flex row child end -->
                     </td>
                     <td>
-                        <div class=" text-right" *ngIf="invFormData.voucherDetails.customerName && !isCashInvoice">
-                            <p *ngIf="toggleFieldForSales" class="fs20 b">
+                        <div class="text-right" *ngIf="invFormData.voucherDetails.customerName && !isCashInvoice">
+                            <p *ngIf="toggleFieldForSales" class="font-20 b">
                                 <span class="balance-due">Balance Due: </span>
 
                                 <span class="sp-rupees">Rs
@@ -1364,11 +1357,11 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                     </td>
                     <td width="65%">
                         <div class="flex-row-child">
-                            <div class="form-group noMarg">
+                            <div class="form-group no-margin">
 
                                 <!-- [useInBuiltFilterForIOptionTypeItems]="true" -->
                                 <!--  -->
-                                <sales-sh-select style="width:48.5%;" name="voucherDetails.customerName"
+                                <sales-sh-select class="sh-drop" name="voucherDetails.customerName"
                                     [options]="customerAcList$ | async"
                                     [(ngModel)]="invFormData.voucherDetails.tempCustomerName"
                                     [customFilter]="customMoveGroupFilter"
@@ -1380,8 +1373,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                     (keyup)="resetCustomerName($event)" (onClear)="resetCustomerName(null)"
                                     [showClear]="!isUpdateMode">
                                     <ng-template #optionTemplate let-option="option">
-                                        <a href="javascript:void(0)" class="list-item"
-                                            style="border-bottom: 1px solid #ccc;">
+                                        <a href="javascript:void(0)" class="list-item bd-rb">
                                             <div class="item">{{ option.label }}</div>
                                             <div class="item-unique">{{ option.value }}</div>
                                         </a>
@@ -1396,10 +1388,10 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                     <td></td>
                     <td>
                         <ng-container>
-                            <section class="form-inline  ">
-                                <div class=" wrap-billing-address clearfix">
+                            <section class="form-inline">
+                                <div class="wrap-billing-address clearfix">
                                     <div class="row">
-                                        <div class="col-xs-6">
+                                        <div class="col-6">
                                             <div class="form-group">
                                                 <label>Billing Address</label>
                                                 <div class="billing-address clearfix">
@@ -1408,7 +1400,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                                         [(ngModel)]="invFormData.accountDetails.billingDetails.address[0]"
                                                         rows="3" autocomplete="off" autofocus="off"
                                                         aria-autocomplete="none"></textarea>
-                                                    <div class="">
+                                                    <div>
                                                         <div class="col-sm-6 pd">
                                                             <!-- <label>Country</label> -->
 
@@ -1445,8 +1437,8 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-xs-6">
-                                            <div class="form-group p0 width100">
+                                        <div class="col-6">
+                                            <div class="form-group p-0 width-100">
                                                 <label>
                                                     <input type="checkbox" (change)="autoFillShippingDetails()"
                                                         name="autoFillShipping" [attr.checked]="true"
@@ -1509,7 +1501,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
 
             </table>
 
-            <table class="innerTable table customerInvoiceTable bg-white" style="display: none;">
+            <table class="inner-table table customer-invoice-table bg-white d-none">
 
                 <tr>
                     <td>
@@ -1559,22 +1551,22 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                     <td>
                         <label> {{ !isPurchaseInvoice ? 'Invoice No.' : 'Purchase Invoice No.' }}</label>
                     </td>
-                    <td style="position:relative">
-                        <div class="col-xs-6 pl-0">
+                    <td class="position-relative row">
+                        <div class="col-6 pl-0">
                             <input type="text" name="accountDetails.invoiceNum"
-                                class="form-control invoiceDate attentionTo"
-                                [ngClass]="{'dateinvoice': !isPurchaseInvoice }"
+                                class="form-control invoice-date attentionTo"
+                                [ngClass]="{'date-invoice': !isPurchaseInvoice }"
                                 [disabled]="isUpdateMode  || !useCustomInvoiceNumber"
                                 [(ngModel)]="invFormData.voucherDetails.voucherNumber" />
                         </div>
-                        <div class="col-xs-6 invoice-date-due-date">
-                            <div class="form-inline ">
+                        <div class="col-6 invoice-date-due-date">
+                            <div class="form-inline">
                                 <div class="form-group m-r-15">
                                     <!--col-xs-2-->
                                     <label>Invoice Date</label>
 
                                     <input type="text" [placeholder]="giddhDateFormat" #voucherDate="ngModel"
-                                        name="voucherDate" class="form-control dateinvoice" bsDatepicker
+                                        name="voucherDate" class="form-control date-invoice" bsDatepicker
                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                         [(ngModel)]="invFormData.voucherDetails.voucherDate" [disabled]="isUpdateMode"
                                         [class.invalid-inp]="voucherDate.errors && (voucherDate.dirty || voucherDate.touched)" />
@@ -1589,7 +1581,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
                                     <label> {{isPurchaseInvoice ? 'Bill Due Date' : 'Due Date'}}</label>
 
                                     <input type="text" [placeholder]="giddhDateFormat" #dueDate="ngModel" name="dueDate"
-                                        class="form-control dateinvoice" bsDatepicker
+                                        class="form-control date-invoice" bsDatepicker
                                         [bsConfig]="{ dateInputFormat: giddhDateFormat }"
                                         [(ngModel)]="invFormData.voucherDetails.dueDate"
                                         [class.invalid-inp]="dueDate.errors && (dueDate.dirty || dueDate.touched)" />
@@ -1617,9 +1609,9 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
 
     <section id="actionPane" class="text-center">
 
-        <div class="col-xs-12">
+        <div>
 
-            <div class="pull-right pr" *ngIf="!isUpdateMode">
+            <div class="pull-right position-relative" *ngIf="!isUpdateMode">
                 <button type="button" (click)="resetInvoiceForm(invoiceForm)"
                     class="btn btn-danger d-inline-block v-align-middle">Clear
                 </button>
@@ -1669,7 +1661,7 @@ <h4>Selected Stocks <span class="selectdStockNumber">(4)</span></h4>
 
             </div>
 
-            <div class="pull-right pr" *ngIf="isUpdateMode">
+            <div class="pull-right position-relative" *ngIf="isUpdateMode">
 
                 <button type="button" class="btn btn-danger d-inline-block v-align-middle"
                     (click)="cancelUpdate()">Cancel
@@ -1750,7 +1742,7 @@ <h4 class="modal-title pull-left">Change Template</h4>
         </button>
     </div>
     <div class="modal-body">
-        <perfect-scrollbar style="max-height: 740px !important; min-height: 740px;" [scrollIndicators]="true">
+        <perfect-scrollbar class="scroll-bar-form" [scrollIndicators]="true">
             <form #CreateInvoice="ngForm">
 
                 <div class="row">
diff --git a/apps/web-giddh/src/app/sales/create/sales.invoice.component.scss b/apps/web-giddh/src/app/sales/create/sales.invoice.component.scss
index bc25525f0db..a7cdf5126d2 100644
--- a/apps/web-giddh/src/app/sales/create/sales.invoice.component.scss
+++ b/apps/web-giddh/src/app/sales/create/sales.invoice.component.scss
@@ -69,8 +69,8 @@ $greyClr: #6d6d6d;
 }
 
 // common class for extend
-.whiteBg {
-    background-color: white;
+.white-bg {
+    background-color: $white;
 }
 
 .cp {
@@ -133,13 +133,13 @@ $greyClr: #6d6d6d;
         right: 0;
         bottom: 0;
         padding: 0 1em;
-        color: #cccccc;
+        color: $very-light-gray;
         pointer-events: none;
     }
 
     /* Transition */
     &:hover::after {
-        color: #bbbbbb;
+        color: $silver;
     }
 
     &::after {
@@ -166,7 +166,7 @@ $greyClr: #6d6d6d;
         @include marg(B, 0px);
     }
 
-    &.size_175 {
+    &.size-175 {
         input:not([type="checkbox"]),
         select,
         textarea {
@@ -174,7 +174,7 @@ $greyClr: #6d6d6d;
         }
     }
 
-    &.size_240 {
+    &.size-240 {
         input:not([type="checkbox"]),
         select,
         textarea {
@@ -182,7 +182,7 @@ $greyClr: #6d6d6d;
         }
     }
 
-    &.size_340 {
+    &.size-340 {
         input:not([type="checkbox"]),
         select,
         textarea {
@@ -190,7 +190,7 @@ $greyClr: #6d6d6d;
         }
     }
 
-    &.size_380 {
+    &.size-380 {
         input:not([type="checkbox"]),
         select,
         textarea {
@@ -198,7 +198,7 @@ $greyClr: #6d6d6d;
         }
     }
 
-    &.noMarg {
+    &.no-margin {
         @include marg(A, 0);
     }
 
@@ -234,7 +234,7 @@ $greyClr: #6d6d6d;
         li {
             a {
                 &:hover {
-                    background: #f4f5f8;
+                    background: $solitude;
                 }
             }
         }
@@ -304,23 +304,23 @@ $greyClr: #6d6d6d;
     font-size: 14px;
 }
 
-.fs12 {
+.font-12 {
     font-size: 12px;
 }
 
-.fs11 {
+.font-11 {
     font-size: 11px;
 }
 
-.tableSec {
+.table-sec {
     display: table;
     width: 100%;
 
-    .tableRow {
+    .table-row {
         display: table-row;
         vertical-align: top;
 
-        .tableCell {
+        .table-cell {
             // line-height: 40px;
             vertical-align: middle;
             text-align: right;
@@ -328,7 +328,7 @@ $greyClr: #6d6d6d;
             display: table-cell;
         }
 
-        .figureCell {
+        .figure-cell {
             width: 140px;
             padding-right: 0;
 
@@ -372,18 +372,18 @@ ng-select.splSales {
     font-weight: 100;
 }
 
-.salesTax .taxInput {
+.sales-tax .tax-input {
     text-align: right;
 }
 
 .billing-address {
-    background: #fff;
-    border: 1px solid #d6d6d6;
+    background: $white;
+    border: 1px solid $gainsboro;
     padding: 5px;
     padding-bottom: 10px;
 
     &.disabled {
-        background: #eee;
+        background: $whisper-light;
     }
 
     textarea {
@@ -406,7 +406,7 @@ textarea:focus {
 
 .input-custom {
     border: none;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .pl0 {
@@ -415,7 +415,7 @@ textarea:focus {
 
 .balance-due {
     display: block;
-    color: #6b6c72;
+    color: $dark-gray;
     line-height: 1.2rem;
     font-size: 14px;
     font-weight: 500;
@@ -430,7 +430,7 @@ textarea:focus {
     > thead {
         > tr {
             > th {
-                border: 1px solid #c7c7c7 !important;
+                border: 1px solid $gainsboro !important;
                 padding: 10px 8px;
                 white-space: nowrap;
                 text-align: right;
@@ -452,7 +452,7 @@ textarea:focus {
     > tbody {
         > tr {
             > td {
-                border: 1px solid #c7c7c7 !important;
+                border: 1px solid $gainsboro !important;
                 padding: 10px 8px;
                 white-space: nowrap;
 
@@ -484,7 +484,7 @@ textarea:focus {
 }
 
 .disabled {
-    background: #eee;
+    background: $whisper-light;
     pointer-events: none;
     opacity: 0.7;
 }
@@ -497,7 +497,7 @@ textarea:focus {
     z-index: 99;
 }
 
-.search-arrow-image.for_purchase_invoice {
+.search-arrow-image.for-purchase-invoice {
     top: 120px;
 }
 
@@ -508,18 +508,18 @@ textarea:focus {
 #deposit-dropdown {
     left: inherit;
     width: 300px;
-    background: #f4f5f8;
+    background: $solitude;
     display: block;
 }
 
 #deposit-dropdown .caret {
-    border-top: 7px dashed #d0d0d3;
+    border-top: 7px dashed $gainsboro;
     border-right: 7px solid transparent;
     border-left: 7px solid transparent;
     right: -15px;
     position: absolute;
     top: 47%;
-    background: #f4f5f8;
+    background: $solitude;
     transform: rotate(-90deg) translateY(-50%);
 }
 
@@ -563,25 +563,25 @@ textarea:focus {
     background: rgba(112, 112, 112, 0.92);
     bottom: 0;
     width: 100%;
-    color: #fff;
+    color: $white;
     padding: 10px;
     text-align: center;
 }
 
 .modal-invoice-footer .btn {
-    background: #a7a7a7;
+    background: $dim-gray;
     font-size: 12px;
     border-radius: 90px;
     padding: 1px 6px;
     vertical-align: middle;
     margin-right: 0px;
     transition: 0.5s all ease;
-    color: #fff;
+    color: $white;
 }
 
 .modal-invoice-footer .btn:hover {
-    background: #229e2b;
-    color: #fff;
+    background: $success-green;
+    color: $white;
 }
 
 .sales-invoice-modal .modal-body perfect-scrollbar {
@@ -593,25 +593,25 @@ textarea:focus {
 }
 
 .modal-invoice-footer ul > li > input:checked + label {
-    background: #229e2b;
-    color: #fff;
+    background: $success-green;
+    color: $white;
 }
 
 // my css
 .sales-invoice-content label.sales-country-label {
     height: 36px;
 }
-.add-entryAgainst {
+.add-entry-against {
     display: none;
 }
 
 .other-options {
-    color: #a9a9a9;
+    color: $dim-gray;
     padding-top: 5px;
 }
 
 .other-options a {
-    color: #0c8fe6;
+    color: $primary;
     font-size: 12px;
 }
 
@@ -626,15 +626,15 @@ form label {
 // .billing-address input, .billing-address textarea{
 //     background-color: transparent !important;
 // }
-.billing-address .selectedVal {
+.billing-address .selected-val {
     border: none !important;
     padding-right: 2px !important;
     background-color: transparent !important;
-    border-bottom: 1px solid #c7c7c7 !important;
+    border-bottom: 1px solid $gainsboro !important;
     height: 28px;
 }
 
-input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
+input.form-control.selected-val.cp.bottom-border-only.ng-star-inserted {
     background-color: transparent !important;
     padding-left: 0 !important;
 }
@@ -651,18 +651,18 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
 }
 
 .billing-address
-    input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
+    input.form-control.selected-val.cp.bottom-border-only.ng-star-inserted {
     background: transparent !important;
     padding-left: 0 !important;
 }
 
-.billingaddresFull p {
+.billing-address-full p {
     font-size: 14px;
-    color: #666666;
+    color: $dark-gray;
     margin-bottom: 5px;
 }
 
-.wrappAdress {
+.wrap-address {
     margin-top: 8px;
 }
 
@@ -671,24 +671,24 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
 }
 
 .change-label {
-    color: #0c8fe6;
+    color: $primary;
 }
 
-.wrap-invoiceNumberDetails .form-group {
+.wrap-invoice-number-details .form-group {
     display: block !important;
 }
 
-.wrap-invoiceNumberDetails .invoiceDate {
+.wrap-invoice-number-details .invoice-date {
     max-width: 100% !important;
 }
 
 .bg-white {
-    background-color: #fff;
+    background-color: $white;
     padding: 10px 0;
     margin: 0 0;
 }
 
-.wrap-inputField {
+.wrap-input-field {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -698,23 +698,23 @@ input.form-control.selectedVal.cp.bottom-border-only.ng-star-inserted {
     margin-bottom: 20px;
 }
 
-.discription textarea {
-    border: 1px solid #ccc;
+.description textarea {
+    border: 1px solid $gainsboro;
     width: 100%;
     min-height: 55px;
     margin-top: 10px;
 }
 
-.salseInvoicetable table input[disabled] {
+.sales-invoice-table table input[disabled] {
     cursor: default;
-    background-color: #eeeeee;
-    border: 1px solid #ccc;
+    background-color: $whisper-light;
+    border: 1px solid $gainsboro;
     padding: 5px;
     width: 100%;
     // max-width: 150px;
 }
 
-.salseInvoicetable table.basic td {
+.sales-invoice-table table.basic td {
     vertical-align: top !important;
 }
 
@@ -724,12 +724,12 @@ input[type="text"] {
     height: 34px !important;
 }
 
-a.copyInvoice {
-    color: #3597ec;
+a.copy-invoice {
+    color: $primary;
     margin-left: 10px;
 }
 
-a.copyInvoice img {
+a.copy-invoice img {
     margin-right: 6px;
 }
 
@@ -746,18 +746,18 @@ a.copyInvoice img {
     padding: 0;
 }
 .shipping-address textarea {
-    border-bottom: 1px solid #ccc !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .mb-0 {
     margin-bottom: 0 !important;
 }
 
-.entryDate label {
+.entry-date label {
     font-size: 12px;
 }
 
-.entryDate input {
+.entry-date input {
     border: none;
     display: inline-block;
     width: 80px;
@@ -766,25 +766,25 @@ a.copyInvoice img {
     font-size: 12px;
 }
 
-.entryDate input:focus {
+.entry-date input:focus {
     background-color: transparent;
 }
 
-.hsnCode.text-right {
+.hsn-code.text-right {
     padding-top: 3px;
     font-size: 12px;
 }
 
-.hsnCode label {
+.hsn-code label {
     font-size: 12px;
 }
 
-.entryDate {
+.entry-date {
     font-size: 12px;
 }
 
-.skuNumber,
-.skuNumber label {
+.sku-number,
+.sku-number label {
     font-size: 12px !important;
     display: none;
 }
@@ -792,13 +792,13 @@ a.copyInvoice img {
 .add-bulk-items {
     font-size: 12px;
     padding-bottom: 0;
-    color: #0c8fe6;
+    color: $primary;
 }
 
-.otherDetailTable th,
-.otherDetailTable td,
-.otherDetailTable tr,
-.otherDetailTable tbody {
+.other-detail-table th,
+.other-detail-table td,
+.other-detail-table tr,
+.other-detail-table tbody {
     border-top: none !important;
 }
 
@@ -806,7 +806,7 @@ a.copyInvoice img {
     cursor: pointer;
 }
 
-.hsnCode input {
+.hsn-code input {
     display: inline-block !important;
     height: 20px !important;
     border: none;
@@ -818,7 +818,7 @@ a.copyInvoice img {
     background-color: transparent !important;
 }
 
-.salseInvoicetable .form-control {
+.sales-invoice-table .form-control {
     margin-bottom: 5px;
 }
 
@@ -838,18 +838,18 @@ span.edit-icon {
 //     width: 800px !important;
 //     margin: 30px auto;
 // }
-.salseInvoicetable th:nth-child(2) {
+.sales-invoice-table th:nth-child(2) {
     width: 35%;
 }
 
-.wrap-hsnBox {
+.wrap-hsn-box {
     position: relative;
 }
 
-.hsnCodeDropdown {
+.hsn-code-dropdown {
     position: absolute;
-    background-color: #fff;
-    border: 1px solid #c7c7c7;
+    background-color: $white;
+    border: 1px solid $gainsboro;
     border-radius: 3px;
     width: 100%;
     min-width: 250px;
@@ -861,59 +861,59 @@ span.edit-icon {
     z-index: 4;
 }
 
-.hsnCodeDropdown label {
+.hsn-code-dropdown label {
     font-size: 12px !important;
     margin-bottom: 5px;
     display: block;
 }
 
-.hsnCodeDropdown input {
+.hsn-code-dropdown input {
     width: 100%;
     height: 28px !important;
     padding: 5px;
     max-width: 200px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $gainsboro;
 }
 
-.hsnCodeDropdown input::placeholder,
-.hsnCodeDropdown input::-webkit-input-placeholder {
-    color: #c6c6c6;
+.hsn-code-dropdown input::placeholder,
+.hsn-code-dropdown input::-webkit-input-placeholder {
+    color: $silver;
 }
 
-.hsnCodeDropdown a {
+.hsn-code-dropdown a {
     display: inline-block;
     text-align: center;
-    color: #cccccc;
+    color: $very-light-gray;
     padding: 5px 8px;
     font-size: 16px;
 }
 
-.hsnCodeDropdown .btn-group {
+.hsn-code-dropdown .btn-group {
     margin-top: 5px;
     display: block;
 }
 
-.hsnCodeDropdown button.btn.btn-sm.btn-success,
-.bulkItemBtnGroup button.btn.btn-sm.btn-success {
-    background-color: #28ab00;
-    color: #fff;
+.hsn-code-dropdown button.btn.btn-sm.btn-success,
+.bulk-item-btn-group button.btn.btn-sm.btn-success {
+    background-color: $success-green;
+    color: $white;
 }
 
-.temapletFooter {
+.template-footer {
     position: fixed;
     bottom: 15px;
     width: 100%;
     max-width: 418px;
 }
 
-.updateText {
-    color: #0c8fe6;
+.update-text {
+    color: $primary;
     padding: 0 5px;
 }
 
-.selectAccountLabel {
+.select-account-label {
     font-size: 14px;
-    color: #c7c7c7;
+    color: $very-light-gray;
     padding-bottom: 3px;
 }
 
@@ -938,13 +938,13 @@ span.edit-icon {
     padding-bottom: 0;
 }
 
-.customerInvoiceTable tr,
-.customerInvoiceTable td,
-.customerInvoiceTable tbody {
+.customer-invoice-table tr,
+.customer-invoice-table td,
+.customer-invoice-table tbody {
     border: none !important;
 }
 
-table.table.customerInvoiceTable {
+table.table.customer-invoice-table {
     margin-bottom: 0;
     width: 100%;
 }
@@ -953,7 +953,7 @@ table.table.customerInvoiceTable {
     overflow-x: hidden !important;
 }
 
-.customerInvoiceTable td {
+.customer-invoice-table td {
     padding: 8px 15px;
 }
 
@@ -964,22 +964,19 @@ table.table.customerInvoiceTable {
     width: 172px !important;
 }
 
-section.staticInvoiceTable {
+section.static-invoice-table {
     padding-top: 20px;
     margin-top: -1px;
 }
 .sales-invoice-content label {
     vertical-align: middle;
 }
-.m-l-10 {
-    margin-left: 10px;
-}
 
 .sales-country-label {
     margin-bottom: 0;
     vertical-align: middle;
     line-height: 2.4;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
     padding-left: 0;
     border-bottom-color: rgb(214, 214, 214);
 }
@@ -998,7 +995,7 @@ section.staticInvoiceTable {
     top: 110px;
     opacity: 0.6;
     z-index: 99;
-    background: #f7f8fa;
+    background: $alice-blue-light;
 }
 
 .customer-invoice-form-purchase:before {
@@ -1023,11 +1020,11 @@ section.staticInvoiceTable {
     min-width: 40px;
 }
 
-.firstTable tr:nth-child(3) td {
+.first-table tr:nth-child(3) td {
     margin-top: 140px;
     padding-top: 70px !important;
 }
-.firstTable .wrap-billing-address {
+.first-table .wrap-billing-address {
     padding-bottom: 15px;
     padding-top: 80px;
 }
@@ -1048,8 +1045,8 @@ section.staticInvoiceTable {
     list-style: none;
 }
 
-.amountField,
-.balanceDueText {
+.amount-field,
+.balance-due-text {
     max-width: 129px !important;
     margin-left: 20px;
     width: 100%;
@@ -1063,30 +1060,30 @@ section.staticInvoiceTable {
 }
 
 section.sales-invoiceBGwhite {
-    background-color: #fff;
+    background-color: $white;
 }
 .upper-layer {
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     padding-top: 10px;
 }
 .attention-to {
     padding-top: 15px;
 }
-.otherTaxsinput {
+.other-taxes-input {
     width: 80% !important;
     margin-left: 5px !important;
 }
-.other-taxes-checkobx {
+.other-taxes-checkbox {
     float: left;
 }
-.otherTaxLable {
+.other-tax-label {
     font-size: 13px;
     float: left;
     text-align: left;
     padding-left: 2px;
     line-height: 1.8;
 }
-.wrap-otherTax {
+.wrap-other-tax {
     float: right;
 
     margin-right: 0;
@@ -1095,12 +1092,21 @@ section.sales-invoiceBGwhite {
 .sales-invoice-content label.sales-country-label {
     height: 36px;
 }
-.hsnCodeDropdown .btn-group {
+.hsn-code-dropdown .btn-group {
     display: block;
 }
+
+.scroll-bar-form{
+    max-height: 740px !important;
+    min-height: 740px !important;
+}
+
+.sh-drop{
+    width:48.5% !important;
+}
 // media query
 @media (min-width: 768px) {
-    .table.customerInvoiceTable .form-group {
+    .table.customer-invoice-table .form-group {
         display: block;
         margin-bottom: 0;
     }
@@ -1132,11 +1138,11 @@ section.sales-invoiceBGwhite {
     .invoice-date-due-date input {
         width: 110px !important;
     }
-    .otherTaxLable {
+    .other-tax-label {
         width: 45px;
         line-height: 1.4;
     }
-    .wrap-otherTax {
+    .wrap-other-tax {
         float: right;
         margin-right: 12px;
     }
@@ -1154,7 +1160,7 @@ section.sales-invoiceBGwhite {
     .sales-invoice-content .col-md-9 {
         width: 100%;
     }
-    .balncDue {
+    .balance-due {
         position: absolute;
         right: 0px;
         top: 100px;
@@ -1170,7 +1176,7 @@ section.sales-invoiceBGwhite {
     .invoice-date-due-date .form-group.m-r-15 {
         margin-right: 0 !important;
     }
-    .wrap-otherTax {
+    .wrap-other-tax {
         float: right;
         margin-right: 22px;
         white-space: nowrap;
@@ -1184,7 +1190,7 @@ section.sales-invoiceBGwhite {
         width: 120px !important;
     }
 }
-.loaderClass {
+.loader-class {
     height: calc(100% - 150px);
     display: flex;
     justify-content: center;
@@ -1192,11 +1198,11 @@ section.sales-invoiceBGwhite {
     min-height: 80vh;
 }
 
-.cashInvoiceInput {
+.cash-invoice-input {
     max-width: 525px !important;
     width: 100% !important;
 }
 
-::ng-deep .billing-address sales-sh-select .selectedVal {
+::ng-deep .billing-address sales-sh-select .selected-val {
     padding-right: 0 !important;
 }
diff --git a/apps/web-giddh/src/app/sales/create/sales.invoice.component.ts b/apps/web-giddh/src/app/sales/create/sales.invoice.component.ts
index 1395a1513a9..1b9e1b30d01 100644
--- a/apps/web-giddh/src/app/sales/create/sales.invoice.component.ts
+++ b/apps/web-giddh/src/app/sales/create/sales.invoice.component.ts
@@ -338,7 +338,7 @@ export class SalesInvoiceComponent implements OnInit, OnDestroy, AfterViewInit,
     openBulkModal(template: TemplateRef<any>) {
         this.modalRef = this.modalService.show(
             template,
-            Object.assign({}, { class: 'addBulkItemmodal ' })
+            Object.assign({}, { class: 'add-bulk-item-modal ' })
         );
     }
 
@@ -2139,7 +2139,7 @@ export class SalesInvoiceComponent implements OnInit, OnDestroy, AfterViewInit,
                     taxableValue = Number(entry.transactions[0].amount) - entry.discountSum;
                 } else if (modal.tcsCalculationMethod === SalesOtherTaxesCalculationMethodEnum.OnTotalAmount) {
                     let rawAmount = Number(entry.transactions[0].amount) - entry.discountSum;
-                    taxableValue = (rawAmount + entry.taxSum);
+                    taxableValue = (rawAmount + entry.taxSum + entry.cessSum);
                 }
                 entry.otherTaxType = 'tcs';
                 entry.tdsTaxList = [];
diff --git a/apps/web-giddh/src/app/sales/discount-list/discountList.component.html b/apps/web-giddh/src/app/sales/discount-list/discountList.component.html
index 1edcbe2dea9..c5a33408b15 100644
--- a/apps/web-giddh/src/app/sales/discount-list/discountList.component.html
+++ b/apps/web-giddh/src/app/sales/discount-list/discountList.component.html
@@ -9,48 +9,47 @@
         </div>
     </a>
 
-    <div class="my-dropdown-menu pd" (click)="$event.stopPropagation()" style="padding: 10px;"
+    <div class="my-dropdown-menu pd-1" (click)="$event.stopPropagation()"
         [ngStyle]="{'display': isMenuOpen ? 'block': 'none'}" #disInptEle>
 
         <div>
 
-            <div class="d-flex mb-1">
+            <div class="d-flex mr-b1">
 
-                <label class="mr-1 align-items-center d-flex" style="width: 50px">Percent</label>
+                <label class="mr-1 align-items-center d-flex w50">Percent</label>
 
-                <div class="pos-rel">
-                    <input type="text" class="form-control text-right cursor-pointer" [disabled]="!discountFromPer"
+                <div class="position-relative">
+                    <input type="text" class="form-control text-right cursor-pointer w100 pd-r2" [disabled]="!discountFromPer"
                         decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountPercentageModal"
                         (blur)="discountFromInput('PERCENTAGE', $event.target.value); discountInputBlur($event);"
-                        name="discountFromPer" style="width: 100px;padding-right: 20px !important;">
-                    <i class="fa fa-percent pos-abs" style="top: 9px;right: 6px;color: #acb0b9;"></i>
+                        name="discountFromPer">
+                    <i class="fa fa-percent pos-abs"></i>
                 </div>
 
             </div>
 
-            <div class="d-flex mb-1">
-                <label class="mr-1 align-items-center d-flex" style="width: 50px">Value</label>
-                <input type="text" class="form-control text-right  cursor-pointer" [disabled]="!discountFromVal"
+            <div class="d-flex mr-b1">
+                <label class="mr-1 align-items-center d-flex w50">Value</label>
+                <input type="text" class="form-control text-right cursor-pointer w100" [disabled]="!discountFromVal"
                     decimalDigitsDirective [DecimalPlaces]="2" [(ngModel)]="discountFixedValueModal"
-                    (blur)="discountFromInput('FIX_AMOUNT', $event.target.value)" name="discountFromVal"
-                    style="width: 100px">
+                    (blur)="discountFromInput('FIX_AMOUNT', $event.target.value)" name="discountFromVal">
             </div>
 
         </div>
 
-        <div class="d-flex flex-col" style="justify-content: center" *ngIf="discountAccountsDetails.length > 1">
+        <div class="d-flex flex-col justify-content-center" *ngIf="discountAccountsDetails.length > 1">
             <span class="or-line">AND</span>
         </div>
 
         <div *ngIf="discountAccountsDetails.length > 1">
-            <ul style="list-style: none;overflow: auto;max-height: 100px">
+            <ul class="discount-name-detail">
 
                 <ng-container *ngFor="let discount of discountAccountsDetails;trackBy: trackByFn; let idx = index">
-                    <li *ngIf="idx > 0" class="customItem cp">
-                        <label class="checkbox oh width100 m0" (click)="$event.stopPropagation()">
+                    <li *ngIf="idx > 0" class="custom-item cp">
+                        <label class="checkbox overflow-hidden width-100 m-0" (click)="$event.stopPropagation()">
                             <input class="pull-left" id="{{'update-discount-checkbox-' + idx}}" name="tax_{{idx}}" type="checkbox" [(ngModel)]="discount.isActive"
                                 (change)="change()" (click)="$event.stopPropagation()" />
-                            <span class="pull-left ellp cp">{{discount.name}}</span>
+                            <span class="pull-left text-ellipsis cp">{{discount.name}}</span>
                         </label>
                     </li>
                 </ng-container>
diff --git a/apps/web-giddh/src/app/sales/discount-list/discountList.component.ts b/apps/web-giddh/src/app/sales/discount-list/discountList.component.ts
index 0fa62674e21..2c217dbd913 100644
--- a/apps/web-giddh/src/app/sales/discount-list/discountList.component.ts
+++ b/apps/web-giddh/src/app/sales/discount-list/discountList.component.ts
@@ -30,21 +30,21 @@ import { IDiscountList, LedgerDiscountClass } from '../../models/api-models/Sett
       td {
           vertical-align: middle !important;
       }
-      .customItem {
+      .custom-item {
       padding-top: 5px;
 
       }
 
-      .customItem:hover {
+      .custom-item:hover {
           background-color:#e3e4ed !important;
       }
 
-      .customItem {
+      .custom-item {
           padding: 5px;
 
       }
 
-      .customItem:hover span {
+      .custom-item:hover span {
           color:#5B64C9 !important;
       }
 
@@ -66,7 +66,17 @@ import { IDiscountList, LedgerDiscountClass } from '../../models/api-models/Sett
           -webkit-user-select: none;
           -ms-user-select: none;
           user-select: none;
-      }
+	  }
+	  .fa-percent{
+		top: 9px;
+		right: 6px;
+		color: #acb0b9;
+	  }
+	  .discount-name-detail{
+		list-style: none;
+		overflow: auto;
+		max-height: 100px;
+	  }
   `]
 })
 
diff --git a/apps/web-giddh/src/app/sales/sales-aside-menu-account/sales.aside.menu.account.component.html b/apps/web-giddh/src/app/sales/sales-aside-menu-account/sales.aside.menu.account.component.html
index 6569a8056de..58018b4fb6c 100644
--- a/apps/web-giddh/src/app/sales/sales-aside-menu-account/sales.aside.menu.account.component.html
+++ b/apps/web-giddh/src/app/sales/sales-aside-menu-account/sales.aside.menu.account.component.html
@@ -8,16 +8,16 @@ <h3 class="aside-title">{{selectedAccountUniqueName ? 'Update' : 'Create'}} Acco
 
     <div class="aside-body">
 
-        <!-- <div class="form-group pdT2">
+        <!-- <div class="form-group pd-t2">
 
             <label class="mr-b1">Select Group</label>
 
-            <div class="ng-select-wrap liq">
+            <div class="ng-select-wrap select-list">
 
                 <ng-select placeholder="Select Group" filterPlaceholder="Type to search..." name="activeGroupUniqueName" [(ngModel)]="activeGroupUniqueName" [options]="flatAccountWGroupsList$ | async" style="width:100%">
                     <ng-template #optionTemplate let-option="option">
                         <div class="account-list-item">{{option?.label}}</div>
-                        <div class="account-list-item fs12">{{option?.value}}</div>
+                        <div class="account-list-item font-12">{{option?.value}}</div>
                     </ng-template>
                 </ng-select>
 
diff --git a/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.html b/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.html
index 745465d07c9..4e9a5cdd18c 100644
--- a/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.html
+++ b/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.html
@@ -1,21 +1,21 @@
-<div class="pr" [ngClass]="{'open': showTaxPopup}" [attachOutsideOnClick]="true" (clickOutside)="toggleTaxPopup(false)">
+<div class="position-relative" [ngClass]="{'open': showTaxPopup}" [attachOutsideOnClick]="true" (clickOutside)="toggleTaxPopup(false)">
     <a id="tax" (click)="toggleTaxPopup(true)" class="clearfix">
         <div class="multi-select adjust">
             <input type="number" id="sales-tax-box" (blur)="taxInputBlur($event)" (focus)="toggleTaxPopup(true)" readonly name="sum"
-                class="form-control cursor-pointer taxInput" [(ngModel)]="taxSum" />
+                class="form-control cursor-pointer tax-input" [(ngModel)]="taxSum" />
             <span class="caret"></span>
         </div>
     </a>
     <ul #taxListUl class="dropdown-menu dropdown-menu-right" *ngIf="showTaxPopup" (click)="$event.stopPropagation()"
         [style.max-height.px]="102" [style.min-height.px]="40">
         <li *ngIf="taxList.length === 0">
-            <p class="pd-1 alC">No Taxes Found</p>
+            <p class="pd-1 text-center">No Taxes Found</p>
         </li>
         <li *ngFor="let tax of taxList;trackBy: trackByFn; let idx = index">
-            <label class="checkbox oh width100 bdrB pdB taxItem" (click)="$event.stopPropagation()">
+            <label class="checkbox overflow-hidden width-100 bd-rb pd-b05 tax-item" (click)="$event.stopPropagation()">
                 <input (blur)="taxInputBlur($event)" class="pull-left" name="tax_{{idx}}" type="checkbox"
                     [(ngModel)]="tax.isChecked" (ngModelChange)="reCalculate()" (click)="$event.stopPropagation()" />
-                <span class="pull-left ellp">{{tax.name}}</span>
+                <span class="pull-left text-ellipsis">{{tax.name}}</span>
             </label>
         </li>
     </ul>
diff --git a/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.ts b/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.ts
index f3ee76074f7..339e0ae30f1 100644
--- a/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.ts
+++ b/apps/web-giddh/src/app/sales/tax-list/sales.tax.list.component.ts
@@ -45,7 +45,7 @@ import { GIDDH_DATE_FORMAT } from '../../shared/helpers/defaultDateFormat';
           -ms-user-select: none;
           user-select: none;
       }
-      .taxItem {
+      .tax-item {
       margin: 0;
       float: left;
       padding: 6px;
diff --git a/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.html b/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.html
index e247603ae83..066fdc1cac0 100644
--- a/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.html
+++ b/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.html
@@ -1,4 +1,4 @@
-<section class="mt-15 mb-15">
+<section class="mr-t15 mr-b15">
 	<div>
 		<div class="btn-group" #filterDropdown="bs-dropdown" dropdown [autoClose]="false"
 			(clickOutside)="filterDropdown.hide()">
@@ -9,13 +9,13 @@
 				<form [formGroup]="searchQueryForm" novalidate name="searchQueryForm" id="searchQueryForm"
 					class="form-inline flex-row flex-wrap pd-1">
 					<!-- repeater -->
-					<div class="pos-rel query-list query-list d-flex" [ngClass]="{'mr-t2': i !== 0}"
+					<div class="position-relative query-list query-list d-flex" [ngClass]="{'mr-t2': i !== 0}"
 						formArrayName="searchQuery"
 						*ngFor="let item of searchQueryForm.get('searchQuery')['controls'];let i = index; let l = last;">
 						<div [formGroupName]="i" class="d-flex">
 							<!-- <label *ngIf="i === 0"> whose</label> -->
 							<label>whose</label>
-							<span class="pos-rel form-group">
+							<span class="position-relative form-group">
 								<select class="form-control" formControlName="queryType" required>
 									<option value="">Select Type</option>
 									<option *ngFor="let queryType of queryTypes" value="{{queryType.uniqueName}}">
@@ -25,7 +25,7 @@
 							<!-- <label *ngIf="item.value.queryType === 'closingBalance' || item.value.queryType === 'openingBalance' || !item.value.queryType ">balance
     &nbsp;</label> -->
 							<label>is</label>
-							<span class="pos-rel form-group">
+							<span class="position-relative form-group">
 								<select class="form-control" formControlName="queryDiffer" required>
                                     <option value="">Select Query</option>
 									<option *ngFor="let queryDiffer of queryDiffers" value="{{queryDiffer}}">
@@ -40,7 +40,7 @@
 									type="text" placeholder="amount" decimalDigitsDirective [DecimalPlaces]="2" />
 							</span>
 							<!--By and To: Not required in paginated API -->
-							<span class="pos-rel form-group"
+							<span class="position-relative form-group"
 								*ngIf="item.value.queryType === 'openingBalance'">
 								<select class="form-control" formControlName="openingBalanceType">
 									<option *ngFor="let type of balType" value="{{type.uniqueName}}">{{type.name}}
@@ -48,7 +48,7 @@
 								</select>
 							</span>
 
-							<span class="pos-rel form-group"
+							<span class="position-relative form-group"
 								*ngIf="item.value.queryType === 'closingBalance'">
 								<select class="form-control" formControlName="closingBalanceType">
 									<option *ngFor="let type of balType" value="{{type.uniqueName}}">{{type.name}}
@@ -69,7 +69,7 @@
 						<button [disabled]="searchDataSet?.controls?.length > 3 || searchQueryForm.invalid"
 							class="btn btn-default" (click)="addSearchRow()">Add New Query
 						</button>
-						<button *ngIf="searchDataSet?.controls?.length > 1" class="btn btn-default mrR1"
+						<button *ngIf="searchDataSet?.controls?.length > 1" class="btn btn-default mr-r1"
 							(click)="removeSearchRow()">
 							Delete
 							Row
diff --git a/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.ts b/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.ts
index 1e1772338e2..9088c72b6f6 100644
--- a/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.ts
+++ b/apps/web-giddh/src/app/search/components/search-filter/search-filter.component.ts
@@ -8,7 +8,7 @@ import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';
 	selector: 'search-filter',  // <home></home>
 	templateUrl: './search-filter.component.html',
 	styles: [`
-    .custom-select .select_drop {
+    .custom-select .select-drop {
       right: 9px;
     }
   `]
diff --git a/apps/web-giddh/src/app/search/components/search-grid/search-grid.component.html b/apps/web-giddh/src/app/search/components/search-grid/search-grid.component.html
index 88f440dade2..65acb4dddbc 100644
--- a/apps/web-giddh/src/app/search/components/search-grid/search-grid.component.html
+++ b/apps/web-giddh/src/app/search/components/search-grid/search-grid.component.html
@@ -13,8 +13,8 @@
     <section [hidden]="!(!(searchLoader$ | async) && (search$ | async))">
         <search-filter (isFiltered)="resetFilters($event)" (createCsv)="createCSV($event)" (searchQuery)="filterData($event)" (openEmailDialog)="openEmailDialog()" (openSmsDialog)="openSmsDialog()">
         </search-filter>
-        <div class="table-responsive">
-            <table class="table table-bordered basic giddh-table on-mobile-view">
+        <div>
+            <table class="table table-bordered basic giddh-table on-mobile-view table-responsive">
                 <thead>
                     <tr>
                         <th [style.width.px]="25">
@@ -83,16 +83,16 @@
                         <td data-title="Name">{{item.name}}</td>
                         <td data-title="Unique Name">{{item.uniqueName}}</td>
                         <td data-title="Parent">{{item.parent}}</td>
-                        <td data-title="Opening Balance" class="alR">
+                        <td data-title="Opening Balance" class="text-right">
                             {{item.openingBalance | giddhCurrency }}
                             <span *ngIf="item.openingBalance > 0">
                                 <span class="text-success" *ngIf="item.openBalanceType === 'DEBIT'">Dr</span>
                             <span class="text-danger" *ngIf="item.openBalanceType === 'CREDIT'">Cr</span>
                             </span>
                         </td>
-                        <td data-title="DR Total" class="alR">{{item.debitTotal | giddhCurrency }}</td>
-                        <td data-title="CR Total" class="alR">{{item.creditTotal | giddhCurrency}}</td>
-                        <td data-title="Closing Balance" class="alR">
+                        <td data-title="DR Total" class="text-right">{{item.debitTotal | giddhCurrency }}</td>
+                        <td data-title="CR Total" class="text-right">{{item.creditTotal | giddhCurrency}}</td>
+                        <td data-title="Closing Balance" class="text-right">
                             {{item.closingBalance | giddhCurrency }}
                             <span *ngIf="item.closingBalance > 0">
                                 <span class="text-success" *ngIf="item.closeBalanceType === 'DEBIT'">Dr</span>
@@ -118,21 +118,21 @@ <h1>No Record Found !!</h1>
 </div>
 
 <!--Modal for Mail/SMS-->
-<div class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
+<div class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
-                <div class="modal-header themeBg pdL2 pdR2 clearfix">
+            <div class="border-radius-0">
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title">{{messageBody.header.set}}</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close" (click)="mailModal.hide()">×</span>
                     <!-- <i class="icon-cross text-right close-modal" aria-hidden="true" ></i> -->
                 </div>
-                <div class="modal-body pdL2 pdR2 clearfix">
+                <div class="modal-body pd-l2 pd-r2 clearfix">
                     <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'">Enter Subject:</h1>
                     <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
                     <h1 class="mr-b1">Type message body:</h1>
                     <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4" style="resize:none;" placeholder="start typing your message here"></textarea>
-                    <small class="mr-t mrB grey">Tip: Click on the tabs below to insert data in your message body.
+                    <small class="mr-t05 mr-b05 grey">Tip: Click on the tabs below to insert data in your message body.
                         Anything
                         followed by '%s_' represents the position where actual data will be placed.
                     </small>
diff --git a/apps/web-giddh/src/app/search/components/sidebar-components/search.sidebar.component.html b/apps/web-giddh/src/app/search/components/sidebar-components/search.sidebar.component.html
index 88c27923d5d..d7238de4c10 100644
--- a/apps/web-giddh/src/app/search/components/sidebar-components/search.sidebar.component.html
+++ b/apps/web-giddh/src/app/search/components/sidebar-components/search.sidebar.component.html
@@ -2,7 +2,7 @@
     <div>
         <div>
             <form #search="ngForm" name="searchFormClb" novalidate="" class="form-inline flex-row flex-nowrap">
-                <div class="form-group mr-15">
+                <div class="form-group mr-r15">
                     <div class="linked-entities" *ngIf="currentCompanyBranches?.length > 2">
                         <label class="d-block">Select Entity</label>
                         <div class="form-group">
@@ -21,7 +21,7 @@
                                             </span>
                                             <span class="entity-details">
                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                <div class="item-unq giddh-limit single-line-clamp">
+                                                <div class="item-unique giddh-limit single-line-clamp">
                                                     {{ option.name || '-' }}
                                                 </div>
                                             </span>
@@ -32,14 +32,14 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group mr-15">
+                <div class="form-group mr-r15">
                     <label class="d-block">Select Groups</label>
                     <input [typeahead]="dataSource" type="text" [(ngModel)]="groupName"
                         (typeaheadOnSelect)="OnSelectGroup($event)" (typeaheadOnBlur)="OnSelectGroup($event)"
                         typeaheadOptionField="name" (typeaheadNoResults)="changeTypeaheadNoResults($event)" required
                         class="form-control" name="city" autocomplete="off" maxlength="50" placeholder="Search Groups">
                 </div>
-                <div class="form-group mr-15">
+                <div class="form-group mr-r15">
                     <label>From - To</label>
                     <div class="custom-datepicker" (click)="showGiddhDatepicker($event)">
                         <i class="icon-calender calendar-addon"></i>
@@ -88,8 +88,6 @@
                 </div>
             </form>
         </div>
-
-
     </div>
 </div>
 <ng-template #datepickerTemplate>
diff --git a/apps/web-giddh/src/app/search/search.component.html b/apps/web-giddh/src/app/search/search.component.html
index fc2b62ea241..29fae39247d 100644
--- a/apps/web-giddh/src/app/search/search.component.html
+++ b/apps/web-giddh/src/app/search/search.component.html
@@ -1,8 +1,8 @@
 <hamburger-menu [pageHeading]="'Search'"></hamburger-menu>
 <div class="container-fluid">
     <div>
-        <div class="clearfix ">
-            <div class="top-bar clearfix bdrB">
+        <div class="clearfix">
+            <div class="top-bar clearfix bd-rb">
                 <!-- <h1 class="section-title inline"><strong>Search</strong></h1> -->
                 <search-sidebar [pageChangeEvent]="pageChangeEvent" [filterEventQuery]="filterEventQuery" (currentBranchChanged)="handleCurrentBranchChange($event)">
                 </search-sidebar>
diff --git a/apps/web-giddh/src/app/selectPlan/selectPlan.component.html b/apps/web-giddh/src/app/selectPlan/selectPlan.component.html
index 910a68150b3..9bff4bacddf 100644
--- a/apps/web-giddh/src/app/selectPlan/selectPlan.component.html
+++ b/apps/web-giddh/src/app/selectPlan/selectPlan.component.html
@@ -1,4 +1,4 @@
-<div id="main" class="welcome_outer">
+<div id="main" class="welcome-outer">
     <layout-main [sideMenu]="false">
         <div class="welcome-header">
             <h2>Welcome To Giddh! </h2>
@@ -28,7 +28,7 @@ <h2>Welcome To Giddh! </h2>
                             <ng-container *ngFor="let item of SubscriptionPlans; let i=index">
                                 <!-- Free plans -->
                                 <ng-container *ngIf="!item?.planDetails?.amount && !item.subscriptionId">
-                                    <div class="col-md-4 col-sm-6 col-xs-12 ">
+                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                         <div class="select-plan-block">
                                             {{item?.planDetails?.name}}
                                             <div class="your-account">
diff --git a/apps/web-giddh/src/app/services/apiurls/daybook.api.ts b/apps/web-giddh/src/app/services/apiurls/daybook.api.ts
index 1df42051ea4..d2c70625f04 100644
--- a/apps/web-giddh/src/app/services/apiurls/daybook.api.ts
+++ b/apps/web-giddh/src/app/services/apiurls/daybook.api.ts
@@ -1,4 +1,4 @@
 export const DAYBOOK_SEARCH_API = {
     SEARCH: 'company/:companyUniqueName/daybook?page=:page&count=:count&from=:from&to=:to', // get call
-    EXPORT: 'company/:companyUniqueName/export-daybook?page=:page&count=:count&from=:from&to=:to&format=:format&type=:type&sort=:sort', // get call
+    EXPORT: 'company/:companyUniqueName/export-daybook-v2?page=:page&count=:count&from=:from&to=:to&format=:format&type=:type&sort=:sort', // get call
 };
diff --git a/apps/web-giddh/src/app/services/apiurls/ledger.api.ts b/apps/web-giddh/src/app/services/apiurls/ledger.api.ts
index 095fcc599e3..6063f180851 100644
--- a/apps/web-giddh/src/app/services/apiurls/ledger.api.ts
+++ b/apps/web-giddh/src/app/services/apiurls/ledger.api.ts
@@ -22,7 +22,7 @@ export const LEDGER_API = {
     // EXPORT_LEDGER: 'company/:companyUniqueName/accounts/:accountUniqueName/v2/export-ledger/file?from=:from&to=:to&type=:type&format=:format&sort=:sort',
     EXPORT_LEDGER: 'company/:companyUniqueName/accounts/:accountUniqueName/v3/export-ledger/file?from=:from&to=:to&type=:type&format=:format&sort=:sort',
     EXPORT_LEDGER_WITH_INVOICE_NUMBER: 'company/:companyUniqueName/accounts/:accountUniqueName/v2/export-ledger-with-invoice/file?from=:from&to=:to&type=:type&format=:format&sort=:sort',
-    GET_BANK_TRANSACTIONS: 'company/:companyUniqueName/yodlee/accounts/:accountUniqueName/eledgers?refresh=true&from=:from',
+    GET_BANK_TRANSACTIONS: 'company/:companyUniqueName/yodlee/accounts/:accountUniqueName/eledgers?refresh=true&from=:from&page=:page&count=:count',
     // put call to map transaction
     MAP_BANK_TRANSACTIONS: 'company/:companyUniqueName/accounts/:accountUniqueName/eledgers/:transactionId',
 
@@ -44,6 +44,6 @@ export const LEDGER_API = {
     GET_VOUCHER_INVOICE_LIST: 'company/:companyUniqueName/vouchers/invoice-list?voucherDate=:voucherDate',
     GET_COLUMNAR_REPORT: 'v2/company/:companyUniqueName/groups/:groupUniqueName/export/account-balances',
     // Export Ledger get columnar report table
-    EXPORT_LEDGER_COLUMNAR_REPORT_TABLE: 'company/:companyUniqueName/accounts/:accountUniqueName/columnar-report?from=:from&to=:to'
-};
-
+    EXPORT_LEDGER_COLUMNAR_REPORT_TABLE: 'company/:companyUniqueName/accounts/:accountUniqueName/columnar-report?from=:from&to=:to',
+    IMPORT_STATEMENT: 'company/:companyUniqueName/import-pdf/bank-statement/?entity=pdf&accountUniqueName=:accountUniqueName'
+};
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/services/general.service.ts b/apps/web-giddh/src/app/services/general.service.ts
index 3b243d6ecd2..dd4babd5887 100644
--- a/apps/web-giddh/src/app/services/general.service.ts
+++ b/apps/web-giddh/src/app/services/general.service.ts
@@ -766,4 +766,15 @@ export class GeneralService {
                 buttons
             };
     }
+
+    /**
+     * This will return the file extension
+     *
+     * @param {string} path
+     * @returns {string}
+     * @memberof GeneralService
+     */
+    public getFileExtension(path: string): string {
+        return (path && path.match(/(?:.+..+[^\/]+$)/ig) != null) ? path.split('.').pop() : 'null';
+    }
 }
diff --git a/apps/web-giddh/src/app/services/ledger.service.ts b/apps/web-giddh/src/app/services/ledger.service.ts
index a651695a175..efbe841edca 100644
--- a/apps/web-giddh/src/app/services/ledger.service.ts
+++ b/apps/web-giddh/src/app/services/ledger.service.ts
@@ -35,15 +35,22 @@ export class LedgerService {
     /**
      * get bank transactions for a account
      */
-    public GetBankTranscationsForLedger(accountUniqueName: string, from: string = '') {
+    public GetBankTranscationsForLedger(getRequest: any): Observable<BaseResponse<any, any>> {
         this.user = this._generalService.user;
         this.companyUniqueName = this._generalService.companyUniqueName;
-        return this._http.get(this.config.apiUrl + LEDGER_API.GET_BANK_TRANSACTIONS.replace(':companyUniqueName', encodeURIComponent(this.companyUniqueName)).replace(':accountUniqueName', encodeURIComponent(accountUniqueName)).replace(':from', from)).pipe(map((res) => {
+        let url = this.config.apiUrl + LEDGER_API.GET_BANK_TRANSACTIONS;
+        url = url.replace(':companyUniqueName', encodeURIComponent(this.companyUniqueName));
+        url = url.replace(':accountUniqueName', encodeURIComponent(getRequest.accountUniqueName));
+        url = url.replace(':from', getRequest.from);
+        url = url.replace(':page', getRequest.page);
+        url = url.replace(':count', getRequest.count);
+
+        return this._http.get(url).pipe(map((res) => {
             let data: BaseResponse<IELedgerResponse[], string> = res;
-            data.request = accountUniqueName;
-            data.queryString = { accountUniqueName };
+            data.request = getRequest;
+            data.queryString = { getRequest };
             return data;
-        }), catchError((e) => this.errorHandler.HandleCatch<IELedgerResponse[], string>(e, { accountUniqueName })));
+        }), catchError((e) => this.errorHandler.HandleCatch<any, any>(e, { getRequest })));
     }
 
     /*
@@ -524,4 +531,27 @@ export class LedgerService {
         }),
             catchError((e) => this.errorHandler.HandleCatch<string, ReportsDetailedRequestFilter>(e, model, { accountUniqueName })));
     }
+
+    /**
+     * This will upload the statement pdf
+     *
+     * @param {*} getRequest
+     * @param {*} postRequest
+     * @returns {Observable<BaseResponse<any, any>>}
+     * @memberof LedgerService
+     */
+    public importStatement(getRequest: any, postRequest: any): Observable<BaseResponse<any, any>> {
+        let url = this.config.apiUrl + LEDGER_API.IMPORT_STATEMENT
+            .replace(':companyUniqueName', encodeURIComponent(getRequest.companyUniqueName))
+			.replace(':accountUniqueName', encodeURIComponent(getRequest.accountUniqueName))
+			.replace(':entity', getRequest.entity);
+
+		const formData: FormData = new FormData();
+        formData.append('file', postRequest.file, postRequest.file.name);
+        formData.append('pdfpassword', postRequest.password);
+		return this._http.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).pipe(map((res) => {
+			let data: BaseResponse<any, string> = res;
+			return data;
+		}), catchError((e) => this.errorHandler.HandleCatch<any, string>(e)));
+	}
 }
diff --git a/apps/web-giddh/src/app/settings/Taxes/confirmation/confirmation.model.component.html b/apps/web-giddh/src/app/settings/Taxes/confirmation/confirmation.model.component.html
index c4c172e3f59..1877a93c4fa 100644
--- a/apps/web-giddh/src/app/settings/Taxes/confirmation/confirmation.model.component.html
+++ b/apps/web-giddh/src/app/settings/Taxes/confirmation/confirmation.model.component.html
@@ -5,7 +5,7 @@ <h3 class="modal-title bg" id="modal-title">Confirmation </h3>
     </div>
     <div class="modal-body clearfix" id="export-body">
         <form name="newRole" novalidate class="" autocomplete="off">
-            <div class="modal_wrap">
+            <div class="modal-wrap">
                 <h3>{{message}}</h3>
             </div>
         </form>
diff --git a/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.html b/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.html
index a2ba81f89b4..d325ead14a6 100644
--- a/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.html
+++ b/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.html
@@ -1,16 +1,16 @@
 <div class="box clearfix" [keyboardShortcut]="'alt+c'" (onShortcutPress)="selectedTax = null;toggleTaxAsidePane()">
-    <div style="display: flex;justify-content: space-between">
-        <h1 class="section-head pd-t1" style="margin: 0;padding: 0;line-height: 2;">Added Taxes</h1>
+    <div class="d-flex justify-content-between">
+        <h1 class="section-head pd-t1 m-0 pl-0 pb-0 pr-0">Added Taxes</h1>
         <button class="btn btn-sky-blue mr-0" [tooltip]="'Create New Tax'"
             (click)="selectedTax = null;toggleTaxAsidePane($event)">
-            <i class="icon icon-plus" style="font-size:12px"></i> New Tax
+            <i class="icon icon-plus font-12"></i> New Tax
         </button>
     </div>
 
-    <div class="col-sm-12 pt-15 tax-table-wrapper">
+    <div class="col-sm-12 pd-t15 tax-table-wrapper">
         <div class="row">
             <div class="table-responsive">
-                <table class="table table-bordered  basic mrB on-mobile-view">
+                <table class="table table-bordered  basic mr-b05 on-mobile-view">
 
                     <thead>
                         <tr>
@@ -74,8 +74,7 @@ <h1 class="section-head pd-t1" style="margin: 0;padding: 0;line-height: 2;">Adde
                                         </span>
                                     </div>
 
-                                    <div *ngIf="showDatePickerInTable && taxToEdit[i]"
-                                        style="position: absolute; z-index:10; min-height:290px;">
+                                    <div *ngIf="showDatePickerInTable && taxToEdit[i]" class="tax-datepicker">
                                         <datepicker name="tableDate{{i}}_{{j}}" [(ngModel)]="t.date"
                                             (selectionDone)="showDatePickerInTable=!showDatePickerInTable"
                                             [showWeeks]="false"></datepicker>
@@ -111,7 +110,7 @@ <h1 class="section-head pd-t1" style="margin: 0;padding: 0;line-height: 2;">Adde
                             <td *ngIf="!taxToEdit[i]" data-title="File Date">{{tax.taxFileDate}}</td>
 
                             <td *ngIf="taxToEdit[i]">
-                                <div class="custom-select pos-rel">
+                                <div class="custom-select position-relative">
                                     <sh-select [options]="days" [isFilterEnabled]="false"
                                         [(ngModel)]="availableTaxes[i].taxFileDate" name="tfd{{i}}"
                                         [placeholder]="'Select'" [ItemHeight]="33"></sh-select>
@@ -119,7 +118,7 @@ <h1 class="section-head pd-t1" style="margin: 0;padding: 0;line-height: 2;">Adde
                             </td>
 
                             <td data-title="Duration">
-                                <div class="custom-select pos-rel">
+                                <div class="custom-select position-relative">
                                     <sh-select [options]="duration" [disabled]="true" [isFilterEnabled]="false"
                                         [(ngModel)]="availableTaxes[i].duration" name="duration{{i}}"
                                         [placeholder]="'Select'" [ItemHeight]="33"></sh-select>
diff --git a/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.scss b/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.scss
index 18fecb35c32..a9d6d207e79 100644
--- a/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.scss
+++ b/apps/web-giddh/src/app/settings/Taxes/setting.taxes.component.scss
@@ -1,3 +1,13 @@
+.section-head{
+    line-height: 2;
+}
+
+.tax-datepicker{
+    position: absolute;
+    z-index:10; 
+    min-height:290px;
+}
+
 @media (max-width: 768px) {
     .custom-select {
         width: 120px;
@@ -21,7 +31,7 @@
     .basic {
         background: transparent;
     }
-    .col-xs-12.pdT2,
+    .col-xs-12.pd-t2,
     .section-head {
         padding-top: 0;
     }
diff --git a/apps/web-giddh/src/app/settings/Trigger/setting.trigger.component.html b/apps/web-giddh/src/app/settings/Trigger/setting.trigger.component.html
index 10f08f22f33..0e24f51ef86 100644
--- a/apps/web-giddh/src/app/settings/Trigger/setting.trigger.component.html
+++ b/apps/web-giddh/src/app/settings/Trigger/setting.trigger.component.html
@@ -1,5 +1,5 @@
 <div class="box clearfix">
-    <h1 class="section-head pdT0">Create New Trigger(Webhook)</h1>
+    <h1 class="section-head pt-0">Create New Trigger(Webhook)</h1>
     <div class="row">
         <form (ngSubmit)="onSubmit(newTriggerObj)" class="col-lg-10 col-md-12 col-xs-12 ">
             <div class="row">
@@ -48,11 +48,11 @@ <h1 class="section-head pdT0">Create New Trigger(Webhook)</h1>
             </div>
         </form>
     </div>
-    <div class="col-sm-12 pdT2">
+    <div class="col-sm-12 pd-t2">
         <div class="row">
             <h1 class="section-head pd-t1">Added Triggers</h1>
             <div class="table-responsive">
-                <table class="table table-bordered trigger-table basic mrB on-mobile-view">
+                <table class="table table-bordered trigger-table basic mr-b05 on-mobile-view">
                     <thead>
                         <tr>
                             <th>#</th>
diff --git a/apps/web-giddh/src/app/settings/address-settings/address-settings.component.html b/apps/web-giddh/src/app/settings/address-settings/address-settings.component.html
index 89d3f2bd7e1..0a6db95ad95 100644
--- a/apps/web-giddh/src/app/settings/address-settings/address-settings.component.html
+++ b/apps/web-giddh/src/app/settings/address-settings/address-settings.component.html
@@ -118,9 +118,9 @@ <h1>No addresses found within given criteria.</h1>
         </div>
         <!-- branch profile element start -->
         <div class="d-flex flex-column w-100" *ngIf="organizationType === 'BRANCH'">
-            <div class="branch-profile-address-content col-md-12 mb-15"
+            <div class="branch-profile-address-content col-md-12 mr-b15"
                 *ngFor="let address of addresses; index as addressIndex">
-                <div class="single-branch-detail mb-15">
+                <div class="single-branch-detail mr-b15">
                     <h4><i class="icon-branch-icon"></i>{{address?.name}}</h4>
                     <div class="row">
                         <div class="col-md-4">
@@ -133,22 +133,22 @@ <h4><i class="icon-branch-icon"></i>{{address?.name}}</h4>
                                 </ng-container>
                             </p>
                         </div>
-                        <div class="col-md-4 mb-1">
+                        <div class="col-md-4 mr-b1">
                             <label>State:</label>
                             <p>{{address.stateCode}} - {{address.stateName}}</p>
                         </div>
                         <div class="col-md-4">
                             <div class="set-default">
-                                <p class="no-selected mb-1 cursor-pointer" hidden><i
-                                        class="icon-no-selected mr-05"></i>Set
+                                <p class="no-selected mr-b1 cursor-pointer" hidden><i
+                                        class="icon-no-selected mr-r05"></i>Set
                                     as Default</p>
                                 <p (click)="handleSetDefaultAddress(address)"
-                                    class="selected-defualt mb-1 cursor-pointer">
-                                    <i *ngIf="address.isDefault" class="icon-favorite-selected mr-05"></i>
-                                    <i *ngIf="!address.isDefault" class="icon-no-selected mr-05"></i>
+                                    class="selected-defualt mr-b1 cursor-pointer">
+                                    <i *ngIf="address.isDefault" class="icon-favorite-selected mr-r05"></i>
+                                    <i *ngIf="!address.isDefault" class="icon-no-selected mr-r05"></i>
                                     Set as Default</p>
                                 <p (click)="showConfirmationModal(address)" class="cursor-pointer">
-                                    <i class="icon-unlink mr-05"></i>Unlink Address</p>
+                                    <i class="icon-unlink mr-r05"></i>Unlink Address</p>
                             </div>
                         </div>
                     </div>
@@ -193,17 +193,17 @@ <h1>No addresses found within given criteria.</h1>
     <div class="modal-dialog modal-md">
         <div class="modal-content">
             <div>
-                <div class="modal-header themeBg pd2 pdL2 pdR2 clearfix">
+                <div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
                     <h3 class="modal-title bg" id="modal-title">Confirmation </h3>
                     <i class="icon-cross text-right close-modal" aria-hidden="true" (click)="onCancel()"></i>
                 </div>
-                <div class="modal-body pdL2 pdR2 clearfix" id="export-body">
+                <div class="modal-body pd-l2 pd-r2 clearfix" id="export-body">
                     <form name="newRole" novalidate class="" autocomplete="off">
-                        <div class="modal_wrap mr-b2">
+                        <div class="modal-wrap mr-b2">
                             <h3>Are you sure you want to continue?</h3>
                         </div>
-                        <div class="d-flex" style="justify-content: flex-start">
-                            <button type="submit" class="btn btn-md btn-success mrR1" (click)="onConfirmation()">Yes</button>
+                        <div class="d-flex justify-content-start">
+                            <button type="submit" class="btn btn-md btn-success mr-r1" (click)="onConfirmation()">Yes</button>
                             <button type="submit" class="btn btn-md btn-cancel" (click)="onCancel()">No</button>
                         </div>
                     </form>
diff --git a/apps/web-giddh/src/app/settings/branch/branch.component.html b/apps/web-giddh/src/app/settings/branch/branch.component.html
index 8004b8717ee..b399ce4ed73 100644
--- a/apps/web-giddh/src/app/settings/branch/branch.component.html
+++ b/apps/web-giddh/src/app/settings/branch/branch.component.html
@@ -1,6 +1,6 @@
 <div class="clearfix">
     <div class="date-advance-search row">
-        <div class="col-sm-12 mb-15 branch-header d-flex justify-content-between">
+        <div class="col-sm-12 mr-b15 branch-header d-flex justify-content-between">
         <form class="form-inline input-group-date-range-picker pr d-flex flex-row mr-0">
             <div class="mr-1 branch-header-content w-100">
                 <!-- <div class="btn-group advance-icon" dropdown>
@@ -47,9 +47,9 @@
                             [bsValue]="dateRangePickerValue" (bsValueChange)="setFilterDate($event)" bsDaterangepicker>
                     </div>
                 </div>
-                <div class="content-view  mrL2">
+                <div class="content-view  mr-l2">
                     <div class="branch-views">
-                        <span (click)="changeBranchViewType('table');" class="mrR1">
+                        <span (click)="changeBranchViewType('table');" class="mr-r1">
                             <input id="radio-table" name="signatureType" class="radio-custom" name="radio-view"
                                 type="radio" [checked]="(branchViewType === 'table') ? true : false" checked>
                             <label for="radio-table" class="radio-custom-label">Table View</label>
@@ -67,7 +67,7 @@
     </div>
     </div>
     <!-- <div class="row select-branch">
-        <div class="col-12 d-flex mb-15 align-items-center">
+        <div class="col-12 d-flex mr-b15 align-items-center">
                 <div class="form-group mb-0">
                     <div class="checkbox">
                             <label for="selectAll">
@@ -163,7 +163,7 @@ <h2>{{branch.alias}}</h2>
                                         <a href="javascript:;" *ngIf="isBranchSalesExpanded" class="cp font-14" (click)="isBranchSalesExpanded = false;">
                                             <i class="icon-collapse"></i> Collapse</a>
 
-                                        <div class="ml-15 active-status">
+                                        <div class="mr-l15 active-status">
                                             <span class="status-bullet d-flex align-items-center">Active</span>
                                         </div> -->
 
@@ -213,10 +213,10 @@ <h2>{{branch.alias}}</h2>
                                         <ng-container *ngIf="address">
                                             <i (click)="setDefault(address, branch, 'address')"
                                                 *ngIf="!address?.isDefault"
-                                                class="cursor-pointer icon-no-selected mr-05"></i>
+                                                class="cursor-pointer icon-no-selected mr-r05"></i>
                                             <i (click)="setDefault(address, branch, 'address')"
                                                 *ngIf="address?.isDefault"
-                                                class="cursor-pointer icon-favorite-selected mr-05"></i>
+                                                class="cursor-pointer icon-favorite-selected mr-r05"></i>
                                             <label class="cursor-pointer" [popover]="popTemplate"
                                                 popoverTitle="{{address?.name}}" placement="right" popover
                                                 triggers="mouseenter:mouseleave">{{address?.name}}</label>
@@ -237,10 +237,10 @@ <h2>{{branch.alias}}</h2>
                                         <ng-container *ngIf="warehouse">
                                             <i (click)="setDefault(warehouse, branch, 'warehouse')"
                                                 *ngIf="!warehouse?.isDefault"
-                                                class="cursor-pointer icon-no-selected mr-05"></i>
+                                                class="cursor-pointer icon-no-selected mr-r05"></i>
                                             <i (click)="setDefault(warehouse, branch, 'warehouse')"
                                                 *ngIf="warehouse?.isDefault"
-                                                class="cursor-pointer icon-favorite-selected mr-05"></i>
+                                                class="cursor-pointer icon-favorite-selected mr-r05"></i>
                                             <label class="cursor-pointer">{{warehouse?.name}}</label>
                                         </ng-container>
                                     </div>
@@ -296,19 +296,18 @@ <h2>{{branch.alias}}</h2>
     </div>
 
     <div *ngIf="(branches$ | async)?.length < 1">
-        <div class="col-xs-12  text-center">
-            <div class="illustration_box">
+        <div class="col-12 text-center">
+            <div class="illustration-box">
                 <img src="assets/images/new/branch-Illus.png" />
                 <div class="" *ngIf="!parentCompanyName">
                     <h3 class="lead mr-t2 mr-b2 fs18">Add branch under <strong
-                            class="primary_clr txtCpc">{{ currentBranch }} <span *ngIf="currentBranchNameAlias">(
+                            class="primary-color text-capitalize">{{ currentBranch }} <span *ngIf="currentBranchNameAlias">(
                                 {{currentBranchNameAlias}} )</span></strong> headquarter.
                     </h3>
                     <button class="btn btn-default mr-l1 btn-lg" (click)="openAddBranchModal()">Add Branch</button>
                 </div>
-                <div class="" *ngIf="parentCompanyName">
-                    <h3 class="lead mr-t2 fs18">This is a branch of <strong class="primary_clr txtCpc">{{ parentCompanyName
-					}}</strong> headquarter.</h3>
+                <div *ngIf="parentCompanyName">
+                    <h3 class="lead mr-t2 font-18">This is a branch of <strong class="primary-color text-capitalize">{{ parentCompanyName }}</strong> headquarter.</h3>
                 </div>
             </div>
         </div>
@@ -340,7 +339,7 @@ <h3>Create New Branch</h3>
                                     selected</span><span class="select_drop pull-right mr-t1"><i
                                         class="fa fa-caret-down"></i></span>
                             </button>
-                            <ul *dropdownMenu class="dropdown-menu width100" role="menu">
+                            <ul *dropdownMenu class="dropdown-menu width-100" role="menu">
                                 <li>
                                     <input type="checkbox" (click)="selectAllCompanies($event)"
                                         [checked]="isAllSelected$ | async" /> Select
@@ -358,12 +357,12 @@ <h3>Create New Branch</h3>
 
                         </div>
                     </div>
-                    <div style="margin-top: 5px;">
+                    <div class="mr-t05">
                         <ul class="list-inline custom-multi-select">
                             <li *ngFor="let cmp of selectedCompaniesName">
-                                <a style="color: gray">
+                                <a>
                                     {{cmp.name}} <span *ngIf="cmp.nameAlias"> ({{cmp.nameAlias}})</span><span
-                                        class="pdL" (click)="checkUncheckMe(cmp,$event)">×</span>
+                                        class="pd-l05" (click)="checkUncheckMe(cmp,$event)">×</span>
                                 </a>
                             </li>
 
@@ -393,7 +392,7 @@ <h3>Create New Branch</h3>
 
 
     <div bsModal #addCompanyModal="bs-modal" [config]="{backdrop: 'static', keyboard: 'true'}" tabindex="-1"
-        class="modal fade openPoup" role="dialog">
+        class="modal fade open-popup" role="dialog" (onHidden)="onHide()">
         <div class="modal-dialog modal-xl modal-width">
             <div class="modal-content">
                 <ng-template element-view-container-ref #companyadd=elementviewcontainerref>
diff --git a/apps/web-giddh/src/app/settings/branch/branch.component.scss b/apps/web-giddh/src/app/settings/branch/branch.component.scss
index 9590cf98e27..2d8a9cda718 100644
--- a/apps/web-giddh/src/app/settings/branch/branch.component.scss
+++ b/apps/web-giddh/src/app/settings/branch/branch.component.scss
@@ -12,16 +12,21 @@
     font-size: 14px;
 }
 
-.custom-multi-select li {
-    background: #f1f1f1;
-    color: white;
-    margin: 4px;
-    padding: 2px 10px;
-    font-size: 14px;
-    border-radius: 3px;
-    cursor: pointer;
+.custom-multi-select{
+    li {
+        background: $white-smoke;
+        color: $white;
+        margin: 4px;
+        padding: 2px 10px;
+        font-size: 14px;
+        border-radius: 3px;
+        cursor: pointer;
+        a{
+            color: $gray;
+        }
+    }
 }
-.selectCompanies {
+.select-companies {
     font-size: 14px;
     margin-bottom: 5px;
 }
@@ -38,7 +43,7 @@
     justify-content: center;
     align-items: center;
     border-right: 1px solid $gainsboro;
-    color: #999999;
+    color: $nobel;
     left: 0;
 }
 .input-group-date-range-picker input.form-control {
@@ -64,7 +69,7 @@
 }
 .card-basic-details .clearfix {
     margin-bottom: 10px;
-    color: #1c1c1c;
+    color: $nero;
 }
 .clearfix {
     .icon-favorite-selected {
@@ -79,7 +84,7 @@
 }
 .card-basic-details h2 {
     font-size: 16px;
-    color: #1a237e;
+    color: $midnight-blue;
     font-family: "opensans-bold";
     margin-bottom: 12px;
     white-space: normal;
@@ -89,7 +94,11 @@
     margin-bottom: 0;
 }
 .card-basic-details {
-    padding: 15px;
+    padding: 20px;
+    border-bottom: 1px solid $gainsboro;
+}
+.branch-sales-details {
+    padding: 20px;
 }
 .branch-sales-details {
     border-top: 1px solid $gainsboro;
@@ -97,7 +106,7 @@
     label {
         font-family: "opensans-semibold";
         margin-bottom: 10px;
-        color: $extra-dark-gray;
+        color: $night-rider;
     }
     .total-amount {
         width: 70%;
@@ -105,7 +114,7 @@
 }
 
 .unlink a {
-    color: #5b64c9 !important;
+    color: $chetwode-blue !important;
     cursor: pointer;
 }
 
@@ -284,9 +293,9 @@
 .btn-primary.active,
 .btn-primary:active,
 .open > .dropdown-toggle.btn-primary {
-    color: $extra-dark-gray;
-    background-color: $lavender-dark;
-    border-color: $lavender-dark;
+    color: $night-rider;
+    background-color: $lavender;
+    border-color: $lavender;
     box-shadow: none !important;
 }
 
diff --git a/apps/web-giddh/src/app/settings/branch/create-branch/create-branch.component.html b/apps/web-giddh/src/app/settings/branch/create-branch/create-branch.component.html
index 8bb85f76fe9..654167d8a1e 100644
--- a/apps/web-giddh/src/app/settings/branch/create-branch/create-branch.component.html
+++ b/apps/web-giddh/src/app/settings/branch/create-branch/create-branch.component.html
@@ -1,16 +1,16 @@
 <div class="container-fluid">
-    <div class="create-branch-page mb-15">
-        <div class="create-branch-under mb-15">
+    <div class="create-branch-page mr-b15">
+        <div class="create-branch-under mr-b15">
             <div class="row">
                 <div class="col-lg-10 col-sm-10">
                     <div class="branch-under-company">
-                        <p class="heading mt-15 mb-15">Create Branch under:</p>
+                        <p class="heading mr-t15 mr-b15">Create Branch under:</p>
                         <div class="branch-company-name">
-                            <div class="label-wrapper mb-15">
+                            <div class="label-wrapper mr-b15">
                                 <label>Company:</label>
                                 <span>{{companyDetails?.name}} ({{companyDetails?.businessType}})</span>
                             </div>
-                            <div class="label-wrapper mb-15">
+                            <div class="label-wrapper mr-b15">
                                 <label>Country & Currency:</label>
                                 <span><img
                                         src="https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@master/svg/{{companyDetails?.country?.countryCode}}.svg">
@@ -68,16 +68,16 @@
                                                 [value]="option.value"></span>&nbsp;
                                         <span class="entity-details">
                                             <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                            <div class="item-unq">
+                                            <div class="item-unique">
                                                 <p *ngIf="option.taxType && option.taxNumber">{{ option.taxType }} :
                                                     {{ option.taxNumber }}</p>
                                             </div>
                                         </span>
                                         <span class="default-entity">
                                             <i (click)="setDefault(option, $event)" *ngIf="!option.isDefault"
-                                                class="icon-no-selected mr-05"></i>
+                                                class="icon-no-selected mr-r05"></i>
                                             <i (click)="setDefault(option, $event)" *ngIf="option.isDefault"
-                                                class="icon-favorite-selected mr-05"></i>
+                                                class="icon-favorite-selected mr-r05"></i>
                                         </span>
                                     </a>
                                 </ng-container>
@@ -85,7 +85,7 @@
                             <ng-template #notFoundLinkTemplate>
                                 <a href="javascript:void(0)" [keyboardShortcut]="'alt+c'"
                                     (onShortcutPress)="handleShortcutPress()"
-                                    class="list-item pl-05 pr-05 border-none d-flex justify-content-between w-100"
+                                    class="list-item pd-l05 pd-r05 border-none d-flex justify-content-between w-100"
                                     [keyboardShortcut]="'alt+c'">
                                     <div class="item">+Add Address</div>
                                     <div class="item">Alt+C</div>
@@ -125,11 +125,11 @@
                         Sub - Location
                     </label>
                     <div class="d-flex flex-column sub-location-input">
-                        <div class="d-flex align-item-center flex-row mb-15">
+                        <div class="d-flex align-item-center flex-row mr-b15">
                             <input type="text" class="form-control" placeholder="Enter Name">
                             <i class="icon-trash"></i>
                         </div>
-                        <div class="d-flex align-item-center flex-row mb-15">
+                        <div class="d-flex align-item-center flex-row mr-b15">
                             <input type="text" class="form-control" placeholder="Enter Name">
                             <i class="icon-plus"></i>
                         </div>
@@ -138,7 +138,7 @@
             </div>
             <div class="footer-btn row">
                 <div class="button-group">
-                    <button type="reset" (click)="handleFormClear()" class="btn btn-primary mr-15">Clear</button>
+                    <button type="reset" (click)="handleFormClear()" class="btn btn-primary mr-r15">Clear</button>
                     <button type="submit" [disabled]="branchForm?.invalid" class="btn btn-success">Create
                         Branch</button>
                 </div>
diff --git a/apps/web-giddh/src/app/settings/bunch/bunch.component.html b/apps/web-giddh/src/app/settings/bunch/bunch.component.html
index 7d738cd1879..0ab55138075 100644
--- a/apps/web-giddh/src/app/settings/bunch/bunch.component.html
+++ b/apps/web-giddh/src/app/settings/bunch/bunch.component.html
@@ -23,13 +23,13 @@ <h3 class="section-head inline">Groups</h3>
                 </div>
             </div>
             <!-- <div class="panel-body">
-          <perfect-scrollbar class="scrClass" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0" [scrollIndicators]="true">
-              <ul class="list-unstyled bunch_list">
+          <perfect-scrollbar class="scroll-class" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0" [scrollIndicators]="true">
+              <ul class="list-unstyled bunch-list">
                   <li>
                       <div>
                           Walkover Web solution Pvt Ltd.
                       </div>
-                      <span class="company_action pos-abs">
+                      <span class="company-action pos-abs">
                       <button type="button" class="btn btn-xs "><i class="fa fa-trash" aria-hidden="true" tooltip="Delete"></i></button>
                   </span>
                   </li>
diff --git a/apps/web-giddh/src/app/settings/bunch/bunch.component.css b/apps/web-giddh/src/app/settings/bunch/bunch.component.scss
similarity index 79%
rename from apps/web-giddh/src/app/settings/bunch/bunch.component.css
rename to apps/web-giddh/src/app/settings/bunch/bunch.component.scss
index 6ed67b99967..1f0ae917829 100644
--- a/apps/web-giddh/src/app/settings/bunch/bunch.component.css
+++ b/apps/web-giddh/src/app/settings/bunch/bunch.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 .form-horizontal .control-label {
     text-align: left;
 }
@@ -12,17 +14,17 @@
     margin-bottom: 5px;
 }
 
-.bunch_list li {
+.bunch-list li {
     position: relative;
     padding: 5px 15px;
     transition: all 0.3s ease;
 }
 
-.bunch_list li:hover {
-    background: #f4f5f8;
+.bunch-list li:hover {
+    background: $solitude;
 }
 
-.company_action {
+.company-action {
     right: 15px;
     top: 50%;
     opacity: 0;
@@ -49,10 +51,10 @@
     text-align: right;
     right: 0;
     left: 0;
-    background: #f4f5f8;
+    background: $solitude;
 }
 
-.bunch_list li:hover .company_action {
+.bunch-list li:hover .company-action {
     z-index: 1;
     opacity: 1;
 }
diff --git a/apps/web-giddh/src/app/settings/bunch/bunch.component.ts b/apps/web-giddh/src/app/settings/bunch/bunch.component.ts
index ec2f322beb4..6a2663ca4b3 100644
--- a/apps/web-giddh/src/app/settings/bunch/bunch.component.ts
+++ b/apps/web-giddh/src/app/settings/bunch/bunch.component.ts
@@ -24,7 +24,7 @@ export const IsyncData = [
 @Component({
 	selector: 'setting-bunch',
 	templateUrl: './bunch.component.html',
-	styleUrls: ['./bunch.component.css'],
+	styleUrls: ['./bunch.component.scss'],
 	providers: [{ provide: BsDropdownConfig, useValue: { autoClose: false } }]
 })
 
diff --git a/apps/web-giddh/src/app/settings/bunch/components-modal/add-company/bunch-add-company.component.html b/apps/web-giddh/src/app/settings/bunch/components-modal/add-company/bunch-add-company.component.html
index 180c988cb5e..6b29dc8d7fa 100644
--- a/apps/web-giddh/src/app/settings/bunch/components-modal/add-company/bunch-add-company.component.html
+++ b/apps/web-giddh/src/app/settings/bunch/components-modal/add-company/bunch-add-company.component.html
@@ -1,4 +1,4 @@
-<div id="" class="">
+<div>
     <div class="modal-header">
         <h3 class="modal-title bg" id="modal-title">{{ activeBunch.name }}</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="onCancel()">×</span>
@@ -11,7 +11,7 @@ <h3 class="modal-title bg" id="modal-title">{{ activeBunch.name }}</h3>
             <div class="btn-group btn-block" dropdown #companyListDropdown="bs-dropdown" [autoClose]="false"
                 (clickOutside)="hideListItems()">
                 <button dropdownToggle type="button" class="form-control text-left btn-block dropdown-toggle">
-                    Chosse company to add in group <span class="select_drop pull-right mr-t1"><i
+                    Chosse company to add in group <span class="select-drop pull-right mr-t1"><i
                             class="fa fa-caret-down"></i></span>
                 </button>
                 <ul id="" *dropdownMenu class="dropdown-menu pd-l1 pd-r1" role="menu"
@@ -32,7 +32,7 @@ <h3 class="modal-title bg" id="modal-title">{{ activeBunch.name }}</h3>
             </div>
             <!-- <div class="btn-group btn-block" dropdown #companyListDropdown="bs-dropdown" [autoClose]="false" (clickOutside)="hideListItems()">
           <button dropdownToggle type="button" class="form-control text-left btn-block dropdown-toggle">
-          Chosse company to add in group <span class="select_drop pull-right mr-t1"><i class="fa fa-caret-down"></i></span>
+          Chosse company to add in group <span class="select-drop pull-right mr-t1"><i class="fa fa-caret-down"></i></span>
 </button>
           <ul id="pageListDD" *dropdownMenu class="dropdown-menu pd-l1 pd-r1" role="menu">
               <li>
diff --git a/apps/web-giddh/src/app/settings/bunch/components-modal/create-bunch/create-bunch.component.html b/apps/web-giddh/src/app/settings/bunch/components-modal/create-bunch/create-bunch.component.html
index d06dc3c4f55..d84f61c1e21 100644
--- a/apps/web-giddh/src/app/settings/bunch/components-modal/create-bunch/create-bunch.component.html
+++ b/apps/web-giddh/src/app/settings/bunch/components-modal/create-bunch/create-bunch.component.html
@@ -1,4 +1,4 @@
-<div id="" class="">
+<div>
     <div class="modal-header">
         <h3 class="modal-title bg" id="modal-title" *ngIf="mode === 'create' || !mode">Create Group </h3>
         <h3 class="modal-title bg" id="modal-title" *ngIf="mode === 'update'">Update Group </h3>
@@ -7,19 +7,19 @@ <h3 class="modal-title bg" id="modal-title" *ngIf="mode === 'update'">Update Gro
     <div class="modal-body clearfix" id="export-body">
         <form name="newRole" [formGroup]="addBunchForm" novalidate class="" autocomplete="off">
             <div class="row">
-                <div class="col-xs-6 form-group">
+                <div class="col-md-6 form-group">
                     <label>Name <sup>*</sup></label>
                     <input type="text" class="form-control" formControlName="name" (blur)="generateUniqueName()" />
                 </div>
 
-                <div class="col-xs-6 form-group">
+                <div class="col-md-6 form-group">
                     <label>UniqueName <sup>*</sup></label>
                     <input type="text" class="form-control" formControlName="uniqueName" />
                 </div>
             </div>
 
             <div class="row">
-                <div class="col-xs-12 form-group">
+                <div class="col-md-12 form-group">
                     <label>Description</label>
                     <textarea class="form-control" formControlName="description"></textarea>
                 </div>
diff --git a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.html b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.html
index 49535dd4671..b357be0a67c 100644
--- a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.html
+++ b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.html
@@ -1,18 +1,18 @@
-<div id="" class="">
+<div>
     <div class="modal-header">
         <h3 class="modal-title bg" id="modal-title"> List of {{ activeBunch.name }} group companies</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="onCancel()">×</span>
     </div>
     <div class="modal-body clearfix" id="export-body">
         <ng-container *ngIf="selectedBunch.companies && selectedBunch.companies.length">
-            <perfect-scrollbar class="scrClass" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0"
+            <perfect-scrollbar class="scroll-class" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0"
                 [scrollIndicators]="true">
-                <ul class="list-unstyled bunch_list">
+                <ul class="list-unstyled bunch-list">
                     <li *ngFor="let item of selectedBunch.companies; let i = index">
                         <div>
                             {{item.name}}
                         </div>
-                        <span class="company_action pos-abs">
+                        <span class="company-action pos-abs">
                             <button type="button" class="btn btn-xs" (click)="deleteCompany(item.uniqueName)"><i
                                     class="fa fa-trash" aria-hidden="true" tooltip="Delete"></i></button>
                         </span>
diff --git a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.css b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.scss
similarity index 69%
rename from apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.css
rename to apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.scss
index ea58378b7a9..0e0da045e34 100644
--- a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.css
+++ b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.scss
@@ -1,24 +1,26 @@
+@import "../../../../../assets/css/color.scss";
+
 .modal-body {
     padding: 15px 0;
 }
 
-.bunch_list li {
+.bunch-list li {
     position: relative;
     padding: 5px 15px;
     transition: all 0.3s ease;
 }
 
-.bunch_list li:hover {
-    background: #f4f5f8;
+.bunch-list li:hover {
+    background: $solitude;
 }
 
-.company_action {
+.company-action {
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
 }
 
-.bunch_list {
+.bunch-list {
     height: 245px;
     max-height: 245px;
     overflow: auto;
@@ -37,10 +39,10 @@
     text-align: right;
     right: 0;
     left: 0;
-    background: #f4f5f8;
+    background: $solitude;
 }
 
-.bunch_list li:hover .company_action {
+.bunch-list li:hover .company-action {
     z-index: 1;
     opacity: 1;
 }
diff --git a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.ts b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.ts
index b28336fbab4..8f3ee26715a 100644
--- a/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.ts
+++ b/apps/web-giddh/src/app/settings/bunch/components-modal/get-companies/get-companies.component.ts
@@ -7,7 +7,7 @@ import { SettingsBunchService } from '../../../../services/settings.bunch.servic
 @Component({
     selector: 'get-companies',
     templateUrl: './get-companies.component.html',
-    styleUrls: ['./get-companies.component.css']
+    styleUrls: ['./get-companies.component.scss']
 })
 
 export class GetBunchModalComponent implements OnChanges {
diff --git a/apps/web-giddh/src/app/settings/create-address/create-address.component.html b/apps/web-giddh/src/app/settings/create-address/create-address.component.html
index ab1953df368..91e97484aae 100644
--- a/apps/web-giddh/src/app/settings/create-address/create-address.component.html
+++ b/apps/web-giddh/src/app/settings/create-address/create-address.component.html
@@ -53,7 +53,7 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
                                         <label>State <sup>*</sup></label>
                                         <sh-select #states
                                             [disabled]="addressConfiguration?.type === 'editAddress' && addressToUpdate?.taxNumber && addressConfiguration?.tax?.name && addressConfiguration?.tax?.name === 'GSTIN'"
-                                            [options]="addressConfiguration.stateList" required [isFilterEnabled]="true" formControlName="state" class="w-100"
+                                            [options]="addressConfiguration.stateList" required [isRequired]="true" [isFilterEnabled]="true" formControlName="state" class="w-100"
                                             [useInBuiltFilterForIOptionTypeItems]="true" [forceClearReactive]="forceClear$ | async">
                                         </sh-select>
                                     </div>
@@ -103,17 +103,17 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
                                                             </span>
                                                             <span class="entity-details">
                                                                 <div class="item">{{ option.label || '-' }}</div>
-                                                                <div class="item-unq">
+                                                                <div class="item-unique">
                                                                     {{ option.name || '-' }}
                                                                 </div>
                                                             </span>
                                                             <span class="default-entity">
                                                                 <i (click)="setDefault(option, $event)"
                                                                     *ngIf="!option.isDefault"
-                                                                    class="icon-no-selected mr-05"></i>
+                                                                    class="icon-no-selected mr-r05"></i>
                                                                 <i (click)="setDefault(option, $event)"
                                                                     *ngIf="option.isDefault"
-                                                                    class="icon-favorite-selected mr-05"></i>
+                                                                    class="icon-favorite-selected mr-r05"></i>
                                                             </span>
                                                         </a>
                                                     </ng-container>
@@ -172,7 +172,7 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
                                                                     [value]="option.value"></span>&nbsp;
                                                             <span class="entity-details">
                                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                                <div class="item-unq">
+                                                                <div class="item-unique">
                                                                     <p *ngIf="option.taxType && option.taxNumber">
                                                                         {{ option.taxType }} :
                                                                         {{ option.taxNumber }}</p>
@@ -181,10 +181,10 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
                                                             <span class="default-entity">
                                                                 <i (click)="setDefault(option, $event)"
                                                                     *ngIf="!option.isDefault"
-                                                                    class="icon-no-selected mr-05"></i>
+                                                                    class="icon-no-selected mr-r05"></i>
                                                                 <i (click)="setDefault(option, $event)"
                                                                     *ngIf="option.isDefault"
-                                                                    class="icon-favorite-selected mr-05"></i>
+                                                                    class="icon-favorite-selected mr-r05"></i>
                                                             </span>
                                                         </a>
                                                     </ng-container>
@@ -231,7 +231,7 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
                                                             class="list-item d-flex">
                                                             <span class="entity-details">
                                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                                <div class="item-unq">
+                                                                <div class="item-unique">
                                                                     <p *ngIf="option.taxType && option.taxNumber">
                                                                         {{ option.taxType }} :
                                                                         {{ option.taxNumber }}</p>
@@ -254,7 +254,7 @@ <h3 *ngIf="addressConfiguration.type === 'editWarehouse'">Edit Warehouse</h3>
 
                         <div class="row">
                             <div class="col-xs-12 col-sm-12 text-left">
-                                <div class="mt-5 pl-05 pr-05">
+                                <div class="mt-5 pd-l05 pd-r05">
                                     <button [ladda]="showLoader" [disabled]="addressForm?.invalid" type="submit"
                                         class="btn btn-success">
                                         <ng-container
diff --git a/apps/web-giddh/src/app/settings/discount/discount.component.html b/apps/web-giddh/src/app/settings/discount/discount.component.html
index 2fca4644c88..16ca713f4f4 100644
--- a/apps/web-giddh/src/app/settings/discount/discount.component.html
+++ b/apps/web-giddh/src/app/settings/discount/discount.component.html
@@ -1,6 +1,6 @@
 <div class="box clearfix">
 	<div class="row">
-		<h1 class="section-head pdT0 col-sm-12">Create Discount</h1>
+		<h1 class="section-head pt-0 col-sm-12">Create Discount</h1>
 	</div>
 
 	<form #discountForm="ngForm" novalidate (submit)="submit()" class="discount-form-setting-tab">
@@ -50,7 +50,7 @@ <h1 class="section-head pdT0 col-sm-12">Create Discount</h1>
 
 			<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
 
-				<table class="table table-bordered basic mrB  on-mobile-view">
+				<table class="table table-bordered basic mr-b05 on-mobile-view">
 
 					<thead>
 						<tr>
diff --git a/apps/web-giddh/src/app/settings/integration/setting.integration.component.html b/apps/web-giddh/src/app/settings/integration/setting.integration.component.html
index 96384c20a73..7cf0022e69b 100644
--- a/apps/web-giddh/src/app/settings/integration/setting.integration.component.html
+++ b/apps/web-giddh/src/app/settings/integration/setting.integration.component.html
@@ -1,5 +1,5 @@
 <div class="clearfix">
-    <tabset [ngClass]="{'tab-integraton': true, 'hide-payment-tab' : !isIndianCompany}" #integrationTab id="tab-integration">
+    <tabset [ngClass]="{'tab-integration': true, 'hide-payment-tab' : !isIndianCompany}" #integrationTab id="tab-integration">
         <tab (selectTab)="loadSmsData($event); tabChanged('sms');">
             <ng-template tabHeading>
                 <span class="icon-chat2"></span> SMS
@@ -26,7 +26,7 @@ <h3 class="font-20 bold mb-2">MSG91</h3>
                                 <div class="empty-label">
                                     <label>&nbsp;</label>
                                     <br>
-                                    <button type="submit" class="btn btn-success mrR1" [disabled]="smsFormObjCtrl.invalid">Save
+                                    <button type="submit" class="btn btn-success mr-r1" [disabled]="smsFormObjCtrl.invalid">Save
                                     </button>
                                 </div>
                             </div>
@@ -53,8 +53,8 @@ <h3 class="section-head">Gmail Integration</h3>
                             Gmail</a>
                     </ng-container>
 
-                    <h4 style="align-self: center" *ngIf="(isGmailIntegrated$ | async)" class="text-success">Gmail integrated successfully.</h4>
-                    <button style="margin-left: 20px" *ngIf="(isGmailIntegrated$ | async)" class="btn btn-danger" (click)="removegmailintegration.toggle()">Remove Account
+                    <h4 *ngIf="(isGmailIntegrated$ | async)" class="text-success align-self-center">Gmail integrated successfully.</h4>
+                    <button *ngIf="(isGmailIntegrated$ | async)" class="btn btn-danger mr-l2" (click)="removegmailintegration.toggle()">Remove Account
                     </button>
                 </div>
             </div>
@@ -89,7 +89,7 @@ <h3 class="font-20 bold mb-2">SendGrid</h3>
 
                             <label>&nbsp;</label>
                             <br>
-                            <button type="submit" class="btn btn-success mrR1" [disabled]="emailform.invalid">Save
+                            <button type="submit" class="btn btn-success mr-r1" [disabled]="emailform.invalid">Save
                             </button>
 
                         </div>
@@ -316,7 +316,7 @@ <h3 class="font-20 bold mb-2">Amazon Seller</h3>
                     <ng-container formArrayName="sellers">
                         <ng-container *ngFor="let item of amazonSellerForm.get('sellers')['controls']; let i=index;let f = first; let l = last">
                             <div class="clearfix" [formGroupName]="i">
-                                <!-- <div class="mrR1 pull-left" [ngClass]="{'mrT3': f}">
+                                <!-- <div class="mr-r1 pull-left" [ngClass]="{'mr-t3': f}">
                             <input type="checkbox" />
                         </div>  -->
 
@@ -421,7 +421,7 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                     <div class="form-group col-xl-2 col-md-6 payment-col">
                                         <label>Accounts <span class="required">*</span></label>
                                         <br>
-                                        <sh-select #paymentFormAccountName [options]="bankAccounts$ | async" name="accountUniqueName" formControlName="accountUniqueName" placeholder="Select Account" [ItemHeight]="33" autocomplete="off">
+                                        <sh-select #paymentFormAccountName [options]="bankAccounts$ | async" name="accountUniqueName" formControlName="accountUniqueName" placeholder="Select Account" [ItemHeight]="33" autocomplete="off" [isRequired]="true">
                                         </sh-select>
                                     </div>
                                 </div>
@@ -431,9 +431,9 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                             <div class="form-group col-xl-2 col-md-6 payment-col" *ngIf="item.get('maxBankLimit').value ==='max'">
                                                 <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Amount Upto <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The client can not select the same amount in the custom more than once."></i></div></label>
                                                 </ng-container>
-                                                <div class="custom-select max select-caret pos-rel">
+                                                <div class="custom-select max select-caret position-relative">
 
-                                                    <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField( index, false, null , $event);checkFormValidations(addBankForm.value)" name="maxBankLimit">
+                                                    <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField( index, false, null , $event);checkFormValidations(addBankForm.value)" name="maxBankLimit" [isRequired]="true">
 
                                                     </sh-select>
                                                 </div>
@@ -443,13 +443,13 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                                 <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Amount Upto <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The client can not select the same amount in the custom more than once."></i></div></label>
                                                 </ng-container>
                                                 <div class="d-flex">
-                                                    <div class="mr-05 custom-select cust select-caret pos-rel">
+                                                    <div class="mr-r05 custom-select cust select-caret position-relative">
 
-                                                        <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField(  index, false, null , $event);checkFormValidations(addBankForm.value)" name="maxBankLimit">
+                                                        <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField(  index, false, null , $event);checkFormValidations(addBankForm.value)" name="maxBankLimit" [isRequired]="true">
 
                                                         </sh-select>
                                                     </div>
-                                                    <div class="ml-05">
+                                                    <div class="mr-l05">
                                                         <input type="text" class="form-control" [ngClass]="{'error-box': checkIsAmountRepeat(addBankForm.get('userAmountRanges').value,item.get('amount').value,index, true)}" #amountElement decimalDigitsDirective (blur)="preventZero(item.get('amount').value, index, null, false)"
                                                             maxlength="10" formControlName="amount" name="amount" placeholder="Amount">
                                                     </div>
@@ -459,8 +459,8 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                                 <ng-container *ngIf="index===0">
                                                     <label class="d-flex relative info-icon">Select OTP <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The OTP will reach the person selected in Approver Name"></i></div></label>
                                                 </ng-container>
-                                                <div class="custom-select select-caret pos-rel">
-                                                    <sh-select [options]="typeOTPList" formControlName="otpType" (selected)="selectedOtpType($event,index, false)" required name="otpType">
+                                                <div class="custom-select select-caret position-relative">
+                                                    <sh-select [options]="typeOTPList" formControlName="otpType" (selected)="selectedOtpType($event,index, false)" required [isRequired]="true" name="otpType">
                                                     </sh-select>
                                                 </div>
                                             </div>
@@ -469,8 +469,8 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                                     <label class="d-flex relative info-icon">Approver Name <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="A list of verified, non-verified and bank registered users to which the OTP will be send."></i></div></label>
 
                                                 </ng-container>
-                                                <div class="custom-select select-caret pos-rel" *ngIf="item.get('otpType').value !=='BANK'">
-                                                    <sh-select [options]="approvalNameList" class="text-left" formControlName="approvalUniqueName" name="approvalUniqueName" [placeholder]="'Select Bank'" [customSorting]="customApproverNameListSorting" [multiple]="false">
+                                                <div class="custom-select select-caret position-relative" *ngIf="item.get('otpType').value !=='BANK'">
+                                                    <sh-select [options]="approvalNameList" class="text-left" formControlName="approvalUniqueName" name="approvalUniqueName" [placeholder]="'Select Bank'" [customSorting]="customApproverNameListSorting" [multiple]="false" [isRequired]="true">
                                                         <ng-template #optionTemplate let-option="option">
                                                             <a href="javascript:void(0)" *ngIf="option?.additional[0]?.mobileVerified" class="list-item relative">
                                                                 <div class="item">
@@ -490,13 +490,13 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                                         </ng-template>
                                                     </sh-select>
                                                 </div>
-                                                <div class="custom-select select-caret pos-rel" *ngIf="item.get('otpType').value ==='BANK'">
+                                                <div class="custom-select select-caret position-relative" *ngIf="item.get('otpType').value ==='BANK'">
                                                     <input type="text" class="form-control" disabled placeholder="Registered" formControlName="approvalUniqueName" name="approvalUniqueName">
                                                 </div>
                                             </div>
                                             <div class="form-group plus-cross-btn col-sm-1 pl-0 pr-0">
                                                 <label *ngIf="index===0" class="d-flex hidden-1359">&nbsp;</label>
-                                                <div class="mt-1 xs-pl-15">
+                                                <div class="mt-1 xs-pd-l15">
                                                     <i (click)="removeUserAmountRangesForm(index);checkFormValidations(addBankForm.value)" class="icon-trash cursor-pointer"></i>
                                                 </div>
                                             </div>
@@ -512,7 +512,7 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                 <div class="form-group">
                                     <div class="empty-label">
                                         <br>
-                                        <button type="submit" [disabled]="!addBankForm.valid || isUpdateInvalid" class="btn btn-success mrR1">Update</button>
+                                        <button type="submit" [disabled]="!addBankForm.valid || isUpdateInvalid" class="btn btn-success mr-r1">Update</button>
                                     </div>
                                 </div>
                             </form>
@@ -552,7 +552,7 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                     <label>Accounts <span class="required">*</span></label>
                                     <br>
                                     <sh-select *ngIf="bankAccounts$ && regAcc?.account?.uniqueName" [disabled]="isBankUpdateInEdit !== parentIndex" required [options]="bankAccounts$ | async" name="accountUniqueName" [defaultValue]="regAcc?.account?.name" [(ngModel)]="regAcc.account.uniqueName"
-                                        placeholder="Select Account" [ItemHeight]="33" autocomplete="off"></sh-select>
+                                        placeholder="Select Account" [ItemHeight]="33" autocomplete="off" [isRequired]="true"></sh-select>
                                 </div>
                             </div>
                             <!-- Added this new row make it dynamic -->
@@ -561,8 +561,8 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                     <div class="form-group col-sm-4 col-xl-2 col-md-6 payment-col" *ngIf="item.maxBankLimit ==='max'">
                                         <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Amount Upto <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The client can not select the same amount in the custom more than once."></i></div></label>
                                         </ng-container>
-                                        <div class="custom-select select-caret pos-rel">
-                                            <sh-select [options]="amountUpToList" autocomplete="off" required [(ngModel)]="item.maxBankLimit" name="maxBankLimit{{parentIndex}}{{index}}" [disabled]="isBankUpdateInEdit !== parentIndex" (selected)="selectedMaxOrCustom(index, true, parentIndex);" (ngModelChange)="maxLimitOrCustomChanged($event, index , true, parentIndex)">
+                                        <div class="custom-select select-caret position-relative">
+                                            <sh-select [options]="amountUpToList" autocomplete="off" required [(ngModel)]="item.maxBankLimit" name="maxBankLimit{{parentIndex}}{{index}}" [disabled]="isBankUpdateInEdit !== parentIndex" (selected)="selectedMaxOrCustom(index, true, parentIndex);" (ngModelChange)="maxLimitOrCustomChanged($event, index , true, parentIndex)" [isRequired]="true">
                                             </sh-select>
                                         </div>
                                         <p class="error-msg text-right"></p>
@@ -572,12 +572,12 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                         </ng-container>
                                         <div class="d-flex">
 
-                                            <div class="mr-05 custom-select select-caret pos-rel width-100">
+                                            <div class="mr-r05 custom-select select-caret position-relative width-100">
                                                 <sh-select [options]="amountUpToList" autocomplete="off" [required]="item.maxBankLimit !== 'max'" [disabled]="isBankUpdateInEdit !== parentIndex" [fixedValue]="'Custom'" defaultValue="{{item.maxBankLimit}}" [(ngModel)]="item.maxBankLimit" (selected)="selectedMaxOrCustom(index, true, parentIndex);"
-                                                    (ngModelChange)="maxLimitOrCustomChanged($event, index , true, parentIndex)" name="maxBankLimit{{parentIndex}}{{index}}">
+                                                    (ngModelChange)="maxLimitOrCustomChanged($event, index , true, parentIndex)" name="maxBankLimit{{parentIndex}}{{index}}" [isRequired]="true">
                                                 </sh-select>
                                             </div>
-                                            <div class="ml-05  width-100">
+                                            <div class="mr-l05  width-100">
                                                 <input type="text" class="form-control" #amountUpdateElement [required]="item.maxBankLimit !== 'max'" decimalDigitsDirective [disabled]="isBankUpdateInEdit !== parentIndex" [(ngModel)]="item.amount" (blur)="changeAmount(item, index, amountUpdateElement, true, parentIndex );preventZero(item.amount,index, parentIndex, true )"
                                                     maxlength="10" name="amount{{parentIndex}}{{index}}" placeholder="Amount">
                                             </div>
@@ -587,8 +587,8 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                         <ng-container *ngIf="index===0">
                                             <label class="d-flex relative info-icon">Select OTP <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The OTP will reach the person selected in approver Name"></i></div></label>
                                         </ng-container>
-                                        <div class="custom-select select-caret pos-rel">
-                                            <sh-select [options]="typeOTPList" [(ngModel)]="item.otpType" (ngModelChange)="selectedOtpType($event, index, true, parentIndex)" [disabled]="isBankUpdateInEdit !== parentIndex" required name="otpType{{parentIndex}}{{index}}">
+                                        <div class="custom-select select-caret position-relative">
+                                            <sh-select [options]="typeOTPList" [(ngModel)]="item.otpType" (ngModelChange)="selectedOtpType($event, index, true, parentIndex)" [disabled]="isBankUpdateInEdit !== parentIndex" required name="otpType{{parentIndex}}{{index}}" [isRequired]="true">
                                             </sh-select>
                                         </div>
                                     </div>
@@ -597,16 +597,16 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                             <label class="d-flex relative info-icon">Approver Name <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="A list of verified, non-verified and bank registered users to which the OTP will be send."></i></div></label>
 
                                         </ng-container>
-                                        <div class="custom-select select-caret pos-rel" *ngIf="item.otpType!=='BANK'">
+                                        <div class="custom-select select-caret position-relative" *ngIf="item.otpType!=='BANK'">
                                             <input type="text" class="form-control" placeholder="Registered" disabled name="approvalUniqueName{{index}}" [value]="item.approvalDetails.name">
                                         </div>
-                                        <div class="custom-select select-caret pos-rel" *ngIf="item.otpType==='BANK'">
+                                        <div class="custom-select select-caret position-relative" *ngIf="item.otpType==='BANK'">
                                             <input type="text" class="form-control" [disabled]="item.otpType==='BANK' || isBankUpdateInEdit !== parentIndex" placeholder="Registered" name="approvalUniqueName{{index}}">
                                         </div>
                                     </div>
                                     <div class="form-group plus-cross-btn col-sm-1 pl-0 pr-0" *ngIf="isBankUpdateInEdit === parentIndex">
                                         <ng-container *ngIf="index===0"> <label class="d-flex hidden-1359">&nbsp;</label></ng-container>
-                                        <div class="mt-1 xs-pl-15">
+                                        <div class="mt-1 xs-pd-l15">
                                             <i (click)="deleteAmountRangeRow(item, parentIndex+1)" class="icon-trash cursor-pointer"></i>
                                         </div>
                                     </div>
@@ -621,7 +621,7 @@ <h2 class="font-20 bold mb-2">ICICI Bank</h2>
                                 <div class="form-group update-btn-wrapper">
                                     <label>&nbsp;</label>
                                     <br>
-                                    <button type="button" class="btn btn-success mrR1" [disabled]="!paymentFormUpdate.form.valid" (click)="updateIciciDetails(regAcc, parentIndex)">Update
+                                    <button type="button" class="btn btn-success mr-r1" [disabled]="!paymentFormUpdate.form.valid" (click)="updateIciciDetails(regAcc, parentIndex)">Update
                                 </button>
                                 </div>
                             </div>
@@ -678,7 +678,7 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                 <div class="form-group col-sm-4 col-xl-2 col-md-6 payment-col" *ngIf="item.maxBankLimit ==='max'">
                                     <ng-container *ngIf="index===0"> <label>Amount Upto <span class="required">*</span></label>
                                         <br></ng-container>
-                                    <div class="custom-select max select-caret pos-rel">
+                                    <div class="custom-select max select-caret position-relative">
                                         <sh-select [options]="amountUpToList" [required]="item.maxBankLimit ==='max'" [(ngModel)]="item.maxBankLimit" (selected)="selectedMaxOrCustom( index, false);maxLimitOrCustomChanged($event, index , false)" name="maxBankLimit{{index}}">
                                         </sh-select>
                                     </div>
@@ -688,11 +688,11 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                     <ng-container *ngIf="index===0"> <label>Amount Upto <span class="required">*</span></label>
                                         <br></ng-container>
                                     <div class="d-flex">
-                                        <div class="mr-05 custom-select cust select-caret pos-rel">
+                                        <div class="mr-r05 custom-select cust select-caret position-relative">
                                             <sh-select [options]="amountUpToList" [required]="item.maxBankLimit !=='max'" defaultValue="{{item.maxBankLimit}}" [(ngModel)]="item.maxBankLimit" (selected)="selectedMaxOrCustom( index, false);maxLimitOrCustomChanged($event, index, false)" name="maxBankLimit{{index}}">
                                             </sh-select>
                                         </div>
-                                        <div class="ml-05">
+                                        <div class="mr-l05">
                                             <input type="text" class="form-control" [maxlength]="maxLimit" #amountElement [required]="item.maxBankLimit !=='max'" decimalDigitsDirective [(ngModel)]="item.amount" (blur)="changeAmount(item, index, amountElement, false );" name="amount{{index}}" placeholder="Amount">
                                         </div>
                                     </div>
@@ -701,7 +701,7 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                     <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Select OTP <span class="required">*</span>
                                     <i class="icon-info cursor-pointer" tooltip="Content here.."></i>
                                 </label></ng-container>
-                                    <div class="custom-select select-caret pos-rel">
+                                    <div class="custom-select select-caret position-relative">
                                         <sh-select [options]="typeOTPList" [(ngModel)]="item.otpType" (selected)="selectedOtpType($event,index, false)" required name="otpType{{index}}">
                                         </sh-select>
                                     </div>
@@ -710,7 +710,7 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                     <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Approver Name <span class="required">*</span>
                                     <i class="icon-info cursor-pointer"  tooltip="Content here.."></i>
                                 </label></ng-container>
-                                    <div class="custom-select select-caret pos-rel" *ngIf="item.otpType!=='BANK'">
+                                    <div class="custom-select select-caret position-relative" *ngIf="item.otpType!=='BANK'">
                                         <sh-select [options]="approvalNameList" class="text-left" [(ngModel)]="item.approvalUniqueName" name="approvalUniqueName{{index}}" [required]="item.otpType!=='BANK'" [placeholder]="'Select Bank'" [multiple]="false">
                                             <ng-template #optionTemplate let-option="option">
                                                 <a href="javascript:void(0)" *ngIf="option?.additional[0]?.mobileVerified" class="list-item relative">
@@ -731,13 +731,13 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                             </ng-template>
                                         </sh-select>
                                     </div>
-                                    <div class="custom-select select-caret pos-rel" *ngIf="item.otpType==='BANK'">
+                                    <div class="custom-select select-caret position-relative" *ngIf="item.otpType==='BANK'">
                                         <input type="text" class="form-control" disabled placeholder="Registered" name="approvalUniqueName{{index}}">
                                     </div>
                                 </div>
                                 <div class="form-group plus-cross-btn col-sm-1 pl-0 pr-0">
                                     <label *ngIf="index===0" class="d-flex hidden-1359">&nbsp;</label>
-                                    <div class="mt-1 xs-pl-15">
+                                    <div class="mt-1 xs-pd-l15">
                                         <i (click)="deleteAmountRangeRow(item)" class="icon-trash cursor-pointer"></i>
                                     </div>
                                 </div>
@@ -749,7 +749,7 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                         <div class="form-group">
                             <div class="empty-label">
                                 <br>
-                                <button type="submit" class="btn btn-success mrR1" [disabled]="!paymentForm.form.valid">Submit</button>
+                                <button type="submit" class="btn btn-success mr-r1" [disabled]="!paymentForm.form.valid">Submit</button>
                             </div>
                         </div>
                     </form>
@@ -794,7 +794,7 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                             <div class="form-group col-sm-6 col-xl-2 col-md-6 payment-col">
                                 <label>Accounts <span class="required">*</span></label>
                                 <br>
-                                <sh-select #paymentFormAccountName [options]="bankAccounts$ | async" name="accountUniqueName" formControlName="accountUniqueName" [forceClearReactive]="forceClear$ | async" placeholder="Select Account" [ItemHeight]="33" autocomplete="off">
+                                <sh-select #paymentFormAccountName [options]="bankAccounts$ | async" name="accountUniqueName" formControlName="accountUniqueName" [forceClearReactive]="forceClear$ | async" placeholder="Select Account" [ItemHeight]="33" autocomplete="off" [isRequired]="true">
                                 </sh-select>
                             </div>
                         </div>
@@ -804,9 +804,9 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                     <div class="form-group col-sm-6 col-xl-2 col-md-6 payment-col" *ngIf="item.get('maxBankLimit').value ==='max'">
                                         <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Amount Upto <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The client can not select the same amount in the custom more than once."></i></div></label>
                                         </ng-container>
-                                        <div class="custom-select max select-caret pos-rel">
+                                        <div class="custom-select max select-caret position-relative">
 
-                                            <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField( index, false, null , $event)" name="maxBankLimit">
+                                            <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField( index, false, null , $event)" name="maxBankLimit" [isRequired]="true">
 
                                             </sh-select>
                                         </div>
@@ -816,13 +816,13 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                         <ng-container *ngIf="index===0"> <label class="d-flex relative info-icon">Amount Upto <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The client can not select the same amount in the custom more than once."></i></div></label>
                                         </ng-container>
                                         <div class="d-flex">
-                                            <div class="mr-05 custom-select cust select-caret pos-rel">
+                                            <div class="mr-r05 custom-select cust select-caret position-relative">
 
-                                                <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField(  index, false, null , $event)" name="maxBankLimit">
+                                                <sh-select [options]="amountUpToList" formControlName="maxBankLimit" (selected)="selectedMaxOrCustomField(  index, false, null , $event)" name="maxBankLimit" [isRequired]="true">
 
                                                 </sh-select>
                                             </div>
-                                            <div class="ml-05">
+                                            <div class="mr-l05">
                                                 <input type="text" class="form-control" [ngClass]="{'error-box': checkIsAmountRepeat(addBankForm.get('userAmountRanges').value,item.get('amount').value,index, false)}" #amountElement decimalDigitsDirective (blur)="preventZero(item.get('amount').value, index, null, false)"
                                                     maxlength="10" [mask]="inputMaskFormat" formControlName="amount" name="amount" placeholder="Amount">
                                             </div>
@@ -832,8 +832,8 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                         <ng-container *ngIf="index===0">
                                             <label class="d-flex relative info-icon">Select OTP <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="The OTP will reach the person selected in Approver Name"></i></div></label>
                                         </ng-container>
-                                        <div class="custom-select select-caret pos-rel">
-                                            <sh-select [options]="typeOTPList" formControlName="otpType" (selected)="selectedOtpType($event,index, false)" required name="otpType">
+                                        <div class="custom-select select-caret position-relative">
+                                            <sh-select [options]="typeOTPList" formControlName="otpType" (selected)="selectedOtpType($event,index, false)" required name="otpType" [isRequired]="true">
                                             </sh-select>
                                         </div>
                                     </div>
@@ -842,8 +842,8 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                             <label class="d-flex relative info-icon">Approver Name <span class="required">*</span> <div class="tooltip-box"><i class="icon-info cursor-pointer" tooltip="A list of verified, non-verified and bank registered users to which the OTP will be send."></i></div></label>
 
                                         </ng-container>
-                                        <div class="custom-select select-caret pos-rel" *ngIf="item.get('otpType').value !=='BANK'">
-                                            <sh-select [options]="approvalNameList" class="text-left" formControlName="approvalUniqueName" name="approvalUniqueName" [placeholder]="'Select Bank'" [customSorting]="customApproverNameListSorting" [multiple]="false">
+                                        <div class="custom-select select-caret position-relative" *ngIf="item.get('otpType').value !=='BANK'">
+                                            <sh-select [options]="approvalNameList" class="text-left" formControlName="approvalUniqueName" name="approvalUniqueName" [placeholder]="'Select Bank'" [customSorting]="customApproverNameListSorting" [multiple]="false" [isRequired]="true">
                                                 <ng-template #optionTemplate let-option="option">
                                                     <a href="javascript:void(0)" *ngIf="option?.additional[0]?.mobileVerified" class="list-item relative">
                                                         <div class="item">
@@ -863,13 +863,13 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                                                 </ng-template>
                                             </sh-select>
                                         </div>
-                                        <div class="custom-select select-caret pos-rel" *ngIf="item.get('otpType').value ==='BANK'">
+                                        <div class="custom-select select-caret position-relative" *ngIf="item.get('otpType').value ==='BANK'">
                                             <input type="text" class="form-control" disabled placeholder="Registered" formControlName="approvalUniqueName" name="approvalUniqueName">
                                         </div>
                                     </div>
                                     <div class="form-group plus-cross-btn col-sm-1 col-md-1 pl-0 pr-0">
                                         <label *ngIf="index===0" class="d-flex hidden-1359">&nbsp;</label>
-                                        <div class="mt-1 xs-pl-15">
+                                        <div class="mt-1 xs-pd-l15">
                                             <i (click)="removeUserAmountRangesForm(index)" class="icon-trash cursor-pointer"></i>
                                         </div>
                                     </div>
@@ -885,22 +885,22 @@ <h3 class="font-20 bold mb-2">ICICI Bank</h3>
                         <div class="form-group">
                             <div class="empty-label">
                                 <br>
-                                <button type="submit" [disabled]="addBankForm.invalid || isCreateInvalid" class="btn btn-success mrR1">Submit</button>
+                                <button type="submit" [disabled]="addBankForm.invalid || isCreateInvalid" class="btn btn-success mr-r1">Submit</button>
                             </div>
                         </div>
                     </form>
                     <div *ngIf="(isPaymentAdditionSuccess$ | async)">
-                        <div style="display: inline-block" class="clearfix">
+                        <div class="clearfix d-inline-block">
                             <div>Congratulations!! A request has been sent to your account, go to <a class="btn-link" href="https://www.icicibank.com/" target="_blank">ICICI portal</a> and accept it.
                             </div>
                         </div>
                         <div class="clearfix">
-                            <div style="color: gray">Once it is done you can link your ICICI account/s and make payment directly through GIDDH.
+                            <div class="payment-text">Once it is done you can link your ICICI account/s and make payment directly through GIDDH.
                             </div>
                         </div>
                     </div>
                 </div>
-                <button type="button" *ngIf="!openNewRegistration || (isPaymentAdditionSuccess$ | async)" style=" margin-right: 5px" class="btn btn-sky-blue mrR1" (click)="openNewRegistartionForm()">Add More ID</button>
+                <button type="button" *ngIf="!openNewRegistration || (isPaymentAdditionSuccess$ | async)" class="btn btn-sky-blue mr-r1" (click)="openNewRegistartionForm()">Add More ID</button>
             </div>
         </tab>
     </tabset>
diff --git a/apps/web-giddh/src/app/settings/integration/setting.integration.component.scss b/apps/web-giddh/src/app/settings/integration/setting.integration.component.scss
index aa709a077bd..c2d4bb523d9 100644
--- a/apps/web-giddh/src/app/settings/integration/setting.integration.component.scss
+++ b/apps/web-giddh/src/app/settings/integration/setting.integration.component.scss
@@ -3,7 +3,7 @@
     max-height: 18px;
 }
 
-.fs18 {
+.font-18 {
     font-weight: bold;
 }
 
@@ -62,13 +62,17 @@
         color: $gray;
     }
 }
-
 .form-control, .linked-account{
     width:100% !important;
 }
+
+.payment-text{
+    color: $gray;
+}
+
 /*responsive*/
 @media(max-width:1359px) {
-    .xs-pl-15 {
+    .xs-pd-l15 {
         padding-left: 15px !important;
     }
     .hidden-1359 {
diff --git a/apps/web-giddh/src/app/settings/linked-accounts/connect-bank-modal/connect.bank.modal.component.html b/apps/web-giddh/src/app/settings/linked-accounts/connect-bank-modal/connect.bank.modal.component.html
index 5f3ada5e77f..25bfd1dec7e 100644
--- a/apps/web-giddh/src/app/settings/linked-accounts/connect-bank-modal/connect.bank.modal.component.html
+++ b/apps/web-giddh/src/app/settings/linked-accounts/connect-bank-modal/connect.bank.modal.component.html
@@ -82,7 +82,7 @@ <h4 class="lead grey-color">{{ selectedProvider.name }}</h4>
             <button class="btn btn-success btn-sm" type="button" *ngIf="!isRefreshWithCredentials"
                 (click)="refreshAccount(loginForm)" [disabled]="bankSyncInProgress">Update</button>
             <small *ngIf="bankSyncInProgress" class="grey-color clearfix mr-t2 col-xs-12 row">Status: <span
-                    class="primary_clr">Authenticating..</span>
+                    class="primary-color">Authenticating..</span>
                 <!-- <p>You can wait or check again in 15-20 min</p> -->
             </small>
         </form>
@@ -101,7 +101,7 @@ <h4 class="lead grey-color">{{ selectedProvider.name }}</h4>
         </div>
         <div class="text-right col-xs-12 col-sm-4">
             <img src="https://ssl.comodo.com/images/trusted-site-seal.png" alt="Comodo Trusted Site Seal" width="113"
-                height="59" style="border: 0px;">
+                height="59" class="border-none">
         </div>
     </div>
     <!-- <br> <span style="font-weight:bold; font-size:7pt"><a href="https://ssl.comodo.com">SSL Certificate</a></span><br> -->
diff --git a/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.html b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.html
index 81b434fc600..dd26c35b3cb 100644
--- a/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.html
+++ b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.html
@@ -1,5 +1,5 @@
 <div class="box clearfix">
-    <h1 class="section-head pdT0">Add Bank Account</h1>
+    <h1 class="section-head pt-0">Add Bank Account</h1>
     <div>
         <button (click)="connectBank()" class="btn btn-primary">Connect Bank</button>
     </div>
@@ -8,7 +8,7 @@ <h1 class="section-head pdT0">Add Bank Account</h1>
         <div class="clearfix mr-t2">
             <small><i class="fa fa-lock"></i> At giddh, the privacy and security of your information are top priorites.
             </small>
-            <img src="https://ssl.comodo.com/images/trusted-site-seal.png" alt="Comodo Trusted Site Seal" width="113" height="59" style="border: 0px;" />
+            <img src="https://ssl.comodo.com/images/trusted-site-seal.png" alt="Comodo Trusted Site Seal" width="113" height="59" class="border-none" />
         </div>
     </div>
     <div [hidden]="true">
@@ -26,19 +26,19 @@ <h1 class="section-head pdT0">Add Bank Account</h1>
 <div class="box clearfix mr-t2" *ngIf='ebankAccounts && ebankAccounts.length'>
     <div class="">
         <!-- <button class="btn btn-primary btn-sm pull-right" (click)="onRefreshAccounts()">Refresh</button> -->
-        <h1 class="section-head pdT0">Added Accounts</h1>
+        <h1 class="section-head pt-0">Added Accounts</h1>
         <div class="mt-1">
             <!-- ================= saltedge accounts =================
-      <section *ngFor="let acc of ebankAccounts; let accIdx = index" class="clearfix bank-account" [ngClass]="{'mrB4': accIdx != ebankAccounts.length-1 }">
-          <h3 class="subHead bdrB">
-              <button class="no-btn fs20" tooltip="Delete Bank" placement="top" (click)="onDeleteAddedBank(acc.siteName, acc.accounts[0])"><i class="icon-trash"></i></button> {{acc.siteName}}
+      <section *ngFor="let acc of ebankAccounts; let accIdx = index" class="clearfix bank-account" [ngClass]="{'mr-b4': accIdx != ebankAccounts.length-1 }">
+          <h3 class="subHead bd-rb">
+              <button class="no-btn font-20" tooltip="Delete Bank" placement="top" (click)="onDeleteAddedBank(acc.siteName, acc.accounts[0])"><i class="icon-trash"></i></button> {{acc.siteName}}
               <button class="btn btn-link mr-l1" tooltip="Refresh" placement="top" (click)="onRefreshToken(acc.accounts[accIdx])"><i class="fa fa-refresh"></i> Refresh</button>
           </h3>
           <aside class="body">
               <aside [attachOutsideOnClick]="true" (clickOutside)="card.isDatePickerOpen = false" class="account-card" *ngFor="let card of acc.accounts; let i = index">
                   <aside class="title">{{card.name}}</aside>
                   <div class="reconnectDiv text-center" *ngIf="card.reconnect">
-                      <div class="vmiddle">
+                      <div class="vertical-align-middle ">
                           <button class="btn btn-sm btn-default" (click)="onReconnectAccount(card)">Reconnect</button>
                           <button class="btn btn-sm btn-danger" (click)="onDeleteAddedBank(acc.siteName, card)">Delete</button>
                       </div>
@@ -76,14 +76,14 @@ <h3 class="subHead bdrB">
       </section>
       ================= saltedge accounts ================= -->
 
-            <section *ngFor="let acc of ebankAccounts; let accIdx = index" class="clearfix bank-account" [ngClass]="{'mrB4': accIdx != ebankAccounts.length-1 }">
-                <h3 class="subHead bdrB">
+            <section *ngFor="let acc of ebankAccounts; let accIdx = index" class="clearfix bank-account" [ngClass]="{'mr-b4': accIdx != ebankAccounts.length-1 }">
+                <h3 class="subHead bd-rb">
                     {{acc.siteName}}
                     <button class="btn btn-link mr-l1" tooltip="Refresh" placement="top" (click)="onRefreshToken(acc.yodleeAccounts[0], false)" *ngIf="acc.status !== 'FAILED'">
-                        <i class="fa fa-refresh"></i> Refresh
+                        <i class="icon-refresh"></i> Refresh
                     </button>
                     <button class="btn btn-link mr-l1" tooltip="Refresh" placement="top" (click)="connectBank(acc.siteId, acc?.yodleeAccounts[0]?.providerAccount?.providerAccountId)" *ngIf="acc.status === 'FAILED'">
-                        <i class="fa fa-refresh"></i> Refresh
+                        <i class="icon-refresh"></i> Refresh
                     </button>
                 </h3>
                 <aside class="body">
@@ -100,7 +100,7 @@ <h3 class="subHead bdrB">
                                 <a href="javascript:void(0)" (click)="card.isDatePickerOpen = !card.isDatePickerOpen">
                                     <input [(ngModel)]="card.transactionDate" name="transactionDate_{{accIdx}}_{{i}}" id="date_{{accIdx}}_{{i}}" />
                                 </a>
-                                <div style="position: absolute; z-index:10; min-height:290px;">
+                                <div class="position-absolute datepicker-account">
                                     <datepicker *ngIf="card.isDatePickerOpen" name="fromDate" [(ngModel)]="card.transactionDate" (selectionDone)="onUpdateDate($event, card)" [showWeeks]="true">
                                     </datepicker>
                                 </div>
@@ -127,7 +127,7 @@ <h3 class="subHead bdrB">
                                 <!-- <button class="btn btn-danger mr-t1" (click)="onDeleteAddedBank(acc.siteName, card)">Delete Account</button> -->
                                 <!-- (click)="onDeleteAddedBank(acc.siteName, acc.yodleeAccounts[0])" -->
                             </div>
-                            <button class="no-btn fs20 pos-abs bank_delete" (click)="onDeleteAddedBank(acc.siteName, card, acc)">
+                            <button class="no-btn font-20 pos-abs bank-delete" (click)="onDeleteAddedBank(acc.siteName, card, acc)">
                                 <i class="icon-trash text-gray"  tooltip="Delete Bank" placement="top"></i>
                             </button>
                         </ng-container>
@@ -136,7 +136,7 @@ <h3 class="subHead bdrB">
                             <div class="account-number">
                                 <b>Provider Id</b>: {{card?.providerAccount?.providerAccountId}}
                             </div>
-                            <p class="mr-t2">Status: <span class="text-danger fs14"><i
+                            <p class="mr-t2">Status: <span class="text-danger font-14"><i
                                         class="fa fa-exclamation-circle"></i>
                                     {{acc.status}}</span></p>
                             <p>Reason: {{acc.reason}}</p>
@@ -151,7 +151,7 @@ <h3 class="subHead bdrB">
 
                                 <!-- <button class="btn btn-default" (click)="connectBank(acc.siteId,    card.providerAccount.providerAccountId)">Try Again</button> -->
                             </div>
-                            <button class="no-btn fs20 pos-abs bank_delete" (click)="onDeleteAddedBank(acc.siteName, card, acc)">
+                            <button class="no-btn font-20 pos-abs bank-delete" (click)="onDeleteAddedBank(acc.siteName, card, acc)">
                                 <i class="icon-trash" tooltip="Delete Bank" placement="top"></i>
                             </button>
                         </ng-container>
@@ -160,7 +160,7 @@ <h3 class="subHead bdrB">
                             <div class="account-number">
                                 <b>Provider Id</b>: {{card?.providerAccount?.providerAccountId}}
                             </div>
-                            <p class="mr-t2">Status: <span class="text-danger fs14"><i
+                            <p class="mr-t2">Status: <span class="text-danger font-14"><i
                                         class="fa fa-exclamation-circle"></i>
                                     {{acc.status}}</span></p>
                             <p>Reason: {{acc.reason}}</p>
diff --git a/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.scss b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.scss
new file mode 100644
index 00000000000..4fa57779912
--- /dev/null
+++ b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.scss
@@ -0,0 +1,4 @@
+.bank-delete {
+    right: 0;
+    bottom: 0;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.ts b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.ts
index 0cdd703dc25..c38677cc344 100644
--- a/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.ts
+++ b/apps/web-giddh/src/app/settings/linked-accounts/setting.linked.accounts.component.ts
@@ -20,12 +20,7 @@ import { GIDDH_DATE_FORMAT } from '../../shared/helpers/defaultDateFormat';
 @Component({
     selector: 'setting-linked-accounts',
     templateUrl: './setting.linked.accounts.component.html',
-    styles: [`
-    .bank_delete {
-      right: 0;
-      bottom: 0;
-    }
-  `]
+    styleUrls: ['./setting.linked.accounts.component.scss']
 })
 export class SettingLinkedAccountsComponent implements OnInit, OnDestroy {
 
diff --git a/apps/web-giddh/src/app/settings/other-settings/other-settings.component.html b/apps/web-giddh/src/app/settings/other-settings/other-settings.component.html
index d402387bf0f..112b43a53a1 100644
--- a/apps/web-giddh/src/app/settings/other-settings/other-settings.component.html
+++ b/apps/web-giddh/src/app/settings/other-settings/other-settings.component.html
@@ -2,19 +2,19 @@
     <div *ngIf="organizationType === 'BRANCH'" class="row">
         <div class="col-md-12">
             <div class="border-bottom font-14">
-                <p class="pb-15"> All the information will save in <strong>{{profileData?.companyName}}</strong></p>
+                <p class="pd-b15"> All the information will save in <strong>{{profileData?.companyName}}</strong></p>
                 <!-- branch profile element start -->
                 <div class="other-detail-section">
-                    <div class="mb-15">
+                    <div class="mr-b15">
                         <label>Number System</label> <span>{{numberSystem}}</span>
                     </div>
-                    <!-- <div class="mb-15">
+                    <!-- <div class="mr-b15">
                         <label>Date Format</label> <span>DD/MM/YYYY (15/09/2020)</span>
                     </div>
-                    <div class="mb-15">
+                    <div class="mr-b15">
                         <label>Number System</label> <span>(GMT 5:30) India Standard Time (Asia/Calcutta)</span>
                     </div> -->
-                    <div class="mb-15">
+                    <div class="mr-b15">
                         <label>Inventory Type</label> <span>{{profileData?.manageInventory ? 'Product' : 'Service'}}</span>
                     </div>
                 </div>
@@ -50,14 +50,14 @@
                                 <div class="form-group">
                                     <label>Inventory Type</label>
                                     <div class="mr-t1">
-                                        <span class="pd0 mrR3">
-                                            <input id="radio-1" class="radio-custom cp ml0" name="radio-group" type="radio"
+                                        <span class="pd0 mr-r3">
+                                            <input id="radio-1" class="radio-custom cp ml-0" name="radio-group" type="radio"
                                                 [checked]="profileData?.manageInventory"
                                                 (change)="inventoryTypeUpdated(true)" name="inventoryType" checked>
                                             <label for="radio-1" class="radio-custom-label">Product</label>
                                         </span>
                                         <span class="pd0 ">
-                                            <input id="radio-2" class="radio-custom cp ml0" name="radio-group" type="radio"
+                                            <input id="radio-2" class="radio-custom cp ml-0" name="radio-group" type="radio"
                                                 [checked]="!profileData?.manageInventory"
                                                 (change)="inventoryTypeUpdated(false)" name="inventoryType">
                                             <label for="radio-2" class="radio-custom-label">Service</label>
diff --git a/apps/web-giddh/src/app/settings/permissions/form/form.component.html b/apps/web-giddh/src/app/settings/permissions/form/form.component.html
index 2a60175c4cd..d687a6c9248 100644
--- a/apps/web-giddh/src/app/settings/permissions/form/form.component.html
+++ b/apps/web-giddh/src/app/settings/permissions/form/form.component.html
@@ -5,7 +5,7 @@
 
             <div class="row">
                 <div class="col-xl-3 col-md-6 col-sm-4 pr-0">
-                    <div class="form-group" style="margin-left:0;">
+                    <div class="form-group ml-0">
                         <label *ngIf="isLblShow">Unique Name/Email ID</label>
                         <input type="text" name="emailId" formControlName="emailId" placeholder="Unique Name/Email ID" class="form-control"
                             [attr.readonly]="userdata?.uniqueName" />
@@ -18,7 +18,7 @@
                                             <option [value]="role.uniqueName" *ngFor="let role of allRoles">{{role.name}}</option>
                                         </select> -->
                         <sh-select placeholder="Select role" formControlName="roleUniqueName"
-                            [forceClearReactive]="permissionRoleClear$ | async" [options]="allRoles"></sh-select>
+                            [forceClearReactive]="permissionRoleClear$ | async" [options]="allRoles" [isRequired]="true"></sh-select>
                     </div>
                 </div>
                 <div class="col-xl-2 col-md-6 col-sm-4 pr-0">
@@ -31,18 +31,18 @@
                                 {{selectedTimeSpan}}
                                 <span class="pull-right"><span class="fa fa-caret-down"></span></span>
                             </button>
-                            <section class="dropdown-menu custom_dropdown mr-b1 time-span-dropdown" [ngClass]="{'open': showTimeSpan}">
+                            <section class="dropdown-menu custom-dropdown mr-b1 time-span-dropdown" [ngClass]="{'open': showTimeSpan}">
 
                                 <div class="clearfix pd-1 option-box">
 
-                                    <span class="pd0 mrR3" (click)="isOpenedInModal ? handleTimeSpanChange('daterange'): ''">
-                                        <input id="dateRange" class="radio-custom cp ml0" type="radio" name="periodOptions"
+                                    <span class="p-0 mr-r3" (click)="isOpenedInModal ? handleTimeSpanChange('daterange'): ''">
+                                        <input id="dateRange" class="radio-custom cp ml-0" type="radio" name="periodOptions"
                                             formControlName="periodOptions" value="daterange">
                                         <label for="dateRange" class="radio-custom-label">Date Range</label>
                                     </span>
 
-                                    <span class="pd0 mrR3" (click)="isOpenedInModal ? handleTimeSpanChange('pastperiod'): ''">
-                                        <input id="pastPeriod" class="radio-custom cp ml0" type="radio" name="periodOptions"
+                                    <span class="p-0 mr-r3" (click)="isOpenedInModal ? handleTimeSpanChange('pastperiod'): ''">
+                                        <input id="pastPeriod" class="radio-custom cp ml-0" type="radio" name="periodOptions"
                                             formControlName="periodOptions" value="pastperiod">
                                         <label for="pastPeriod" class="radio-custom-label">Past Period</label>
                                     </span>
@@ -69,7 +69,7 @@
                                             <input class="form-control " name="duration" digitsOnlyDirective formControlName="duration"
                                                 type="number" placeholder="Number in Days" />
                                         </div>
-                                        <!-- <div class="col-xs-6 col-sm-6 pdL0 lh34">
+                                        <!-- <div class="col-xs-6 col-sm-6 pl-0 lh-34">
                                             Days
                                         </div> -->
                                     </div>
@@ -89,18 +89,18 @@
                                 {{selectedIPRange}}
                                 <span class="pull-right"><span class="fa fa-caret-down"></span></span>
                             </button>
-                            <section class="dropdown-menu custom_dropdown ip-addresses-dropdown" role="menu"
+                            <section class="dropdown-menu custom-dropdown ip-addresses-dropdown" role="menu"
                                 [ngClass]="{'open': showIPWrap}">
                                 <div class="clearfix option-box pd-1">
 
-                                    <span (click)="isOpenedInModal ? handleIpAddressChange('cidr_range'): ''" class="pd0 mrR3">
-                                        <input id="cidrRange" class="radio-custom cp ml0" type="radio" name="ipOptions"
+                                    <span (click)="isOpenedInModal ? handleIpAddressChange('cidr_range'): ''" class="p-0 mr-r3">
+                                        <input id="cidrRange" class="radio-custom cp ml-0" type="radio" name="ipOptions"
                                             formControlName="ipOptions" value="cidr_range">
                                         <label for="cidrRange" class="radio-custom-label">CIDR Range</label>
                                     </span>
 
-                                    <span (click)="isOpenedInModal ? handleIpAddressChange('ip_address'): ''" class="pd0 mrR3">
-                                        <input id="address" class="radio-custom cp ml0" type="radio" name="ipOptions"
+                                    <span (click)="isOpenedInModal ? handleIpAddressChange('ip_address'): ''" class="p-0 mr-r3">
+                                        <input id="address" class="radio-custom cp ml-0" type="radio" name="ipOptions"
                                             formControlName="ipOptions" value="ip_address">
                                         <label for="address" class="radio-custom-label">Address</label>
                                     </span>
@@ -116,7 +116,7 @@
                                             <input class="form-control " name="item_{{i}}" formControlName="range" type="text"
                                                 placeholder="192.168.1.0/24" />
                                         </div>
-                                        <div class="pull-left lh34">
+                                        <div class="pull-left lh-34">
                                             <i *ngIf="!l" (click)="delRow('allowedCidrs', i, $event)"
                                                 class="icon-trash cursor-pointer"></i>
                                             <i *ngIf="l" (click)="addNewRow('allowedCidrs', item, $event)"
@@ -134,7 +134,7 @@
                                             <input class="form-control" (keypress)="allowOnlyNumbersAndDot($event)" name="item_{{i}}"
                                                 formControlName="range" type="text" placeholder="192.168.1.0" />
                                         </div>
-                                        <div class="pull-left lh34">
+                                        <div class="pull-left lh-34">
                                             <i *ngIf="!l" (click)="delRow('allowedIps', i, $event)"
                                                 class="icon-trash cursor-pointer"></i>
                                             <i *ngIf="l" (click)="addNewRow('allowedIps', item, $event)"
diff --git a/apps/web-giddh/src/app/settings/permissions/form/form.component.scss b/apps/web-giddh/src/app/settings/permissions/form/form.component.scss
index 1fc020d627a..cc15212de0f 100644
--- a/apps/web-giddh/src/app/settings/permissions/form/form.component.scss
+++ b/apps/web-giddh/src/app/settings/permissions/form/form.component.scss
@@ -3,25 +3,25 @@
     width: 100%;
 }
 
-.custom_dropdown {
+.custom-dropdown {
     width: 100%;
     border-radius: 0;
     margin: 0px 0;
     margin-top: 0px;
     box-shadow: none;
     transition: all 0.7s ease;
-    background: #fff !important;
+    background: $white !important;
     opacity: 1;
-    box-shadow: 0px 2px 6px #ddd;
+    box-shadow: 0px 2px 6px $gainsboro-light;
     padding: 0;
     min-width: 180px;
 }
 
-.custom_dropdown.open {
+.custom-dropdown.open {
     transform: translateY(5px);
 }
 
-.lh34 {
+.lh-34 {
     line-height: 34px;
 }
 .permission-form {
@@ -50,22 +50,22 @@
     background: transparent;
 }
 
-.custom_dropdown > li > a {
+.custom-dropdown > li > a {
     padding: 6px;
 }
 
-.custom_dropdown > li > a:focus,
-.custom_dropdown > li > a:hover {
+.custom-dropdown > li > a:focus,
+.custom-dropdown > li > a:hover {
     background: $gainsboro !important;
 }
 
-.custom_dropdown .caret {
+.custom-dropdown .caret {
     transform: rotate(-90deg);
 }
 .transactions-popup {
     width: 360px;
     background: $white;
-    box-shadow: 0px 3px 6px #00000029;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px;
     z-index: 9;
     position: absolute;
diff --git a/apps/web-giddh/src/app/settings/permissions/setting.permission.component.html b/apps/web-giddh/src/app/settings/permissions/setting.permission.component.html
index 20fe6a2476b..372bf306f0a 100644
--- a/apps/web-giddh/src/app/settings/permissions/setting.permission.component.html
+++ b/apps/web-giddh/src/app/settings/permissions/setting.permission.component.html
@@ -1,4 +1,4 @@
-<div class="pdB2">
+<div class="pd-b2">
 	<h3 class="mr-b1"><strong>Give Permission to:</strong></h3>
 	<setting-permission-form [userdata]="null" [isLblShow]="false" [isUpdtCase]="false" [isHorizntl]="true"
 		(onSubmitForm)="submitPermissionForm($event)"></setting-permission-form>
@@ -8,18 +8,18 @@ <h3 class="mr-b1"><strong>Give Permission to:</strong></h3>
 	<h3 class="mr-b1"><strong>Users</strong></h3>
 	<div class="box" *ngIf="currentUser">
 		<div *ngFor="let usrGrp of usersList">
-			<div class="user_list">
+			<div class="user-list">
 				<div class="row">
 					<div class="col-12 col-lg-3 col-md-6 col-sm-6 user">
-						<div class="ellp">
-							<div class="ellp"><i class="icon-user-black pd-r1"></i>{{usrGrp.name}}</div>
-							<small class="mrL2">{{usrGrp.rows[0].emailId}}</small>
+						<div class="text-ellipsis">
+							<div class="text-ellipsis"><i class="icon-user-black pd-r1"></i>{{usrGrp.name}}</div>
+							<small class="mr-l2">{{usrGrp.rows[0].emailId}}</small>
 						</div>
 					</div>
 					<div class="col-12 col-lg-9 col-md-6 col-sm-6">
 						<div class="row">
-							<div class="permission_list w-100">
-								<div class="col-12 col-lg-12 col-sm-12 permission"
+							<div class="permission-list w-100">
+								<div class="col-xl-10 col-lg-12 col-sm-12 permission"
 									*ngFor="let user of usrGrp.rows; let i = index">
                                     <div class="row">
                                         <div class="col-12 col-lg-4 col-md-12 col-sm-12">
@@ -45,7 +45,7 @@ <h3 class="mr-b1"><strong>Users</strong></h3>
                                             </div>
                                         </div>
 
-                                        <div class="ico-btn pull-left col-12 col-lg-4 col-md-12 col-sm-12 mr-t">
+                                        <div class="ico-btn pull-left col-12 col-lg-4 col-md-12 col-sm-12 mr-t05">
                                             <button class="btn btn-xs" type="button"
                                                 [hidden]="usrGrp.rows[0].isLoggedInUser" (click)="showModalForEdit(user)"><i
                                                     aria-hidden="true" class="icon-edit-pencil"></i></button>
diff --git a/apps/web-giddh/src/app/settings/personal-information/personal-information.component.html b/apps/web-giddh/src/app/settings/personal-information/personal-information.component.html
index dd8296a08e3..8cc9c2213fd 100644
--- a/apps/web-giddh/src/app/settings/personal-information/personal-information.component.html
+++ b/apps/web-giddh/src/app/settings/personal-information/personal-information.component.html
@@ -1,6 +1,6 @@
 <div>
     <div class="row">
-        <!-- <div class="col-md-12 mt-15">
+        <!-- <div class="col-md-12 mr-t15">
             <div class="d-flex form-group">
                 <div class="custom-file cp" id="customFile">
                     <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
@@ -17,8 +17,8 @@
                 </div>
             </div>
         </div> -->
-        <div class="col-md-12 mt-2 border-bottom pb-15">
-            <div class="row pb-1">
+        <div class="col-md-12 mt-2 border-bottom pd-b15">
+            <div class="row pd-b1">
                 <div class="col-md-3 col-sm-12 col-lg-3 col-xl-2 d-flex align-items-center">
                     <label *ngIf="organizationType === 'COMPANY'" class="font-14">Company Name</label>
                     <label *ngIf="organizationType === 'BRANCH'" class="font-14">Branch Name</label>
@@ -32,7 +32,7 @@
                     </div>
                 </div>
             </div>
-            <div class="row pb-1 unique-name">
+            <div class="row pd-b1 unique-name">
                 <div class="col-md-3 col-sm-12 col-lg-3 col-xl-2">
                     <label class="font-14">Unique Name:</label>
                 </div>
@@ -61,7 +61,7 @@
         </div>
 
     </div>
-    <div class="personal-other-deatils">
+    <div class="personal-other-details">
         <div class="row" *ngIf="organizationType === 'COMPANY'">
             <div class="col-md-4 col-lg-4 col-xl-3 mt-3 ">
                 <div class="form-group">
diff --git a/apps/web-giddh/src/app/settings/personal-information/personal-information.component.scss b/apps/web-giddh/src/app/settings/personal-information/personal-information.component.scss
index b81ecf68838..949a39e203b 100644
--- a/apps/web-giddh/src/app/settings/personal-information/personal-information.component.scss
+++ b/apps/web-giddh/src/app/settings/personal-information/personal-information.component.scss
@@ -40,7 +40,7 @@
         }
     }
 }
-.personal-other-deatils {
+.personal-other-details {
     label {
         line-height: 2.3;
     }
diff --git a/apps/web-giddh/src/app/settings/profile/setting.profile.component.html b/apps/web-giddh/src/app/settings/profile/setting.profile.component.html
index 1a39322802a..763f5b4da13 100755
--- a/apps/web-giddh/src/app/settings/profile/setting.profile.component.html
+++ b/apps/web-giddh/src/app/settings/profile/setting.profile.component.html
@@ -20,16 +20,16 @@
                     <label>Contact No.</label>
                     <input type="tel" placeholder="Contact Number" class="form-control" [(ngModel)]="companyProfileObj.contactNo" #mobileNumberField name="contactNo" (keydown)="pushToUpdate($event);keyDownSubject$.next($event)" />
                 </div>
-                <div class="col-lg-4 col-md-12 col-sm-12 pd0 d-flex">
-                    <div class="form-group col-sm-4 pdR0">
+                <div class="col-lg-4 col-md-12 col-sm-12 p-0 d-flex">
+                    <div class="form-group col-sm-4 pr-0">
                         <label>Currency</label><br>
-                        <div class="custom-select pos-rel">
+                        <div class="custom-select position-relative">
                             <input type="text" placeholder="Currency" class="form-control" disabled [(ngModel)]="companyProfileObj.baseCurrency" name="baseCurrency" />
                         </div>
 
                     </div>
                     <div class="form-group col-xs-8">
-                        <div class="checkbox pt-26 noMarg">
+                        <div class="checkbox pt-26 no-margin">
                             <span>
                                 <input id="isMultiple" (change)="changeEventOfForm('isMultipleCurrency')"
                                     [(ngModel)]="companyProfileObj.isMultipleCurrency" class="checkbox-custom"
@@ -45,7 +45,7 @@
             <div class="row">
                 <div class="form-group col-lg-4 col-md-12 col-sm-12">
                     <label>Address</label><br>
-                    <textarea rows="4" style="height: 170px;" type="text" placeholder="Address" class="form-control" [(ngModel)]="companyProfileObj.address" name="address" (keydown)="pushToUpdate($event);keyDownSubject$.next($event)"></textarea>
+                    <textarea rows="4" type="text" placeholder="Address" class="form-control address-textarea" [(ngModel)]="companyProfileObj.address" name="address" (keydown)="pushToUpdate($event);keyDownSubject$.next($event)"></textarea>
                 </div>
                 <div class="form-group  col-lg-4 col-md-12 col-sm-12">
                     <div class="clearfix">
@@ -65,19 +65,19 @@
                     <div class="row ">
                         <div class="form-group col-sm-12 col-md-12 col-lg-6 decimal-system">
                             <label>Digits After Decimal</label><br>
-                            <div class="custom-select pos-rel ">
+                            <div class="custom-select position-relative ">
                                 <sh-select [options]="decimalDigitSource " placeholder="select type " [isFilterEnabled]="true " name="digitafterdecimal " [(ngModel)]="companyProfileObj.balanceDecimalPlaces" (selected)="checkDigitAfterDecimal($event) "></sh-select>
                             </div>
                         </div>
                         <div class="form-group col-sm-12 col-md-12 col-lg-6 decimal-system number-system">
                             <label>Number System</label><br>
-                            <div class="custom-select pos-rel ">
+                            <div class="custom-select position-relative ">
                                 <sh-select #shnumberSystemSource [options]="numberSystemSource " name="numberSystem " [(ngModel)]="companyProfileObj.balanceDisplayFormat " (selected)="checkNumberSystem($event) " [placeholder]=" 'Select type'
                                     " [ItemHeight]="41 ">
                                     <ng-template #optionTemplate let-option="option ">
                                         <ng-container>
-                                            <a href="javascript:void(0) " class="list-item " style="border-bottom: 1px solid #ccc; ">
-                                                <p class="numberSystem ">{{ option.label }} <span class="pull-right ">{{ option.additional.type}}</span></p>
+                                            <a href="javascript:void(0) " class="list-item number-border">
+                                                <p class="number-system">{{ option.label }} <span class="pull-right">{{ option.additional.type}}</span></p>
                                             </a>
                                         </ng-container>
                                     </ng-template>
@@ -88,12 +88,12 @@
                     <div class="form-group ">
                         <div *ngIf="companyProfileObj.branchCount>0" class="form-group">
                             <label>Branch Unique Name</label><br>
-                            <div class="custom-select pos-rel">
+                            <div class="custom-select position-relative">
                                 <input type="text" [(ngModel)]="companyProfileObj.nameAlias" placeholder="Branch unique name" name="nameAlias" class="form-control" (blur)="nameAlisPush($event)" (keydown)="pushToUpdate($event);" /> </div>
                         </div>
                         <div *ngIf="companyProfileObj.branchCount==0" class="form-group">
                             <label>Headquarter Unique Name</label><br>
-                            <div class="custom-select pos-rel">
+                            <div class="custom-select position-relative">
                                 <input type="text" [(ngModel)]="companyProfileObj.nameAlias" placeholder="Headquarter unique name" name="nameAlias" class="form-control" (blur)="nameAlisPush($event)" (keydown)="pushToUpdate($event);" /> </div>
                         </div>
                     </div>
@@ -112,7 +112,7 @@ <h3 class="mr-b1"> Add <span *ngIf="companyProfileObj.addresses !== undefined &&
                         Add
                     </button>
                     <div *ngIf="companyProfileObj.addresses !== undefined && companyProfileObj.addresses.length > 0">
-                        <div *ngFor="let gst of companyProfileObj.addresses; let i = index" class="mr-t1 company_gst" [ngClass]="{'mr-t2': i != gst.length-1, 'bdrB': i != gst.length-1}">
+                        <div *ngFor="let gst of companyProfileObj.addresses; let i = index" class="mr-t1 company-gst" [ngClass]="{'mr-t2': i != gst.length-1, 'bd-rb': i != gst.length-1}">
                             <div class="row">
                                 <div class="col-lg-4 col-md-12 col-sm-12">
                                     <div class="row">
diff --git a/apps/web-giddh/src/app/settings/profile/setting.profile.component.scss b/apps/web-giddh/src/app/settings/profile/setting.profile.component.scss
index df16ef45549..a6bd043906d 100644
--- a/apps/web-giddh/src/app/settings/profile/setting.profile.component.scss
+++ b/apps/web-giddh/src/app/settings/profile/setting.profile.component.scss
@@ -24,7 +24,7 @@
     .form-group{
         .input-group {
             .input-group-addon {
-            border-left: 1px solid $very-light-gray !important;
+            border-left: 1px solid $gainsboro !important;
         }
         input{
                 border-left: none !important;
diff --git a/apps/web-giddh/src/app/settings/profile/setting.profile.component.ts b/apps/web-giddh/src/app/settings/profile/setting.profile.component.ts
index 53e6777c608..a68474576a4 100755
--- a/apps/web-giddh/src/app/settings/profile/setting.profile.component.ts
+++ b/apps/web-giddh/src/app/settings/profile/setting.profile.component.ts
@@ -35,7 +35,7 @@ export interface IGstObj {
 @Component({
     selector: 'setting-profile',
     templateUrl: './setting.profile.component.html',
-    styleUrls: ['../../shared/header/components/company-add/company-add.component.css', './setting.profile.component.scss'],
+    styleUrls: ['../../shared/header/components/company-add/company-add.component.scss', './setting.profile.component.scss'],
     host: {'class': 'settings-profile'},
     animations: [
         trigger('fadeInAndSlide', [
diff --git a/apps/web-giddh/src/app/settings/settings.component.html b/apps/web-giddh/src/app/settings/settings.component.html
index be60eb5ee26..eb7d21a4227 100644
--- a/apps/web-giddh/src/app/settings/settings.component.html
+++ b/apps/web-giddh/src/app/settings/settings.component.html
@@ -32,11 +32,11 @@
                         <hamburger-menu></hamburger-menu>
                         <div class="setting-container">
                             <setting-profile #profileComponent></setting-profile>
-                            <span *ngIf="isCompanyProfileUpdated && (isUpdateCompanyInProgress$ | async)" class="auto_save" style="float: right;">
-                                <i class="icon-refresh mrR fs14 rotate"></i>Saving...
+                            <span *ngIf="isCompanyProfileUpdated && (isUpdateCompanyInProgress$ | async)" class="auto-save float-right">
+                                <i class="icon-refresh mr-r05 font-14 rotate"></i>Saving...
                             </span>
-                            <span *ngIf="isCompanyProfileUpdated && !(isUpdateCompanyInProgress$ | async)" class="auto_save" style="float: right;">
-                                <i class="glyphicon glyphicon-check mrR fs14"></i>Saved
+                            <span *ngIf="isCompanyProfileUpdated && !(isUpdateCompanyInProgress$ | async)" class="auto-save float-right">
+                                <i class="glyphicon glyphicon-check mr-r05 font-14"></i>Saved
                             </span>
                         </div>
                     </div>
diff --git a/apps/web-giddh/src/app/settings/tags/tags.component.html b/apps/web-giddh/src/app/settings/tags/tags.component.html
index 821d5ec0965..6e0764d6b74 100644
--- a/apps/web-giddh/src/app/settings/tags/tags.component.html
+++ b/apps/web-giddh/src/app/settings/tags/tags.component.html
@@ -22,7 +22,7 @@ <h1 class="section-head">Create Tag</h1>
                     </form>
                 </div>
                 <hr class="clearfix">
-                <div class="form-group mt-15 clearfix">
+                <div class="form-group mr-t15 clearfix">
                     <div>
                         <span class="pull-left searchTag">
                             <input type="text" [(ngModel)]="searchText" (keyup)="filterData(searchText)"
diff --git a/apps/web-giddh/src/app/settings/warehouse/create-warehouse/create-warehouse.component.html b/apps/web-giddh/src/app/settings/warehouse/create-warehouse/create-warehouse.component.html
index 7b476334408..08f25194705 100644
--- a/apps/web-giddh/src/app/settings/warehouse/create-warehouse/create-warehouse.component.html
+++ b/apps/web-giddh/src/app/settings/warehouse/create-warehouse/create-warehouse.component.html
@@ -1,18 +1,18 @@
 <!-- create warehouse start -->
 <!-- hide branch element by *ngIf="isBranchElemnt" -->
 <div class="container-fluid">
-    <div class="create-warehouse-page mb-15">
-        <div class="create-warehouse-under mb-15">
+    <div class="create-warehouse-page mr-b15">
+        <div class="create-warehouse-under mr-b15">
             <div class="row">
                 <div class="col-lg-10 col-sm-10">
                     <div class="warehouse-under-company">
-                        <p class="mt-15 mb-15">Create Warehouse under:</p>
+                        <p class="mr-t15 mr-b15">Create Warehouse under:</p>
                         <div class="warehouse-company-name">
-                            <div class="label-wrapper mb-15">
+                            <div class="label-wrapper mr-b15">
                                 <label>Company:</label>
                                 <span>{{companyDetails?.name}} ({{companyDetails?.businessType}})</span>
                             </div>
-                            <div class="label-wrapper mb-15">
+                            <div class="label-wrapper mr-b15">
                                 <label>Country & Currency:</label>
                                 <span><img
                                         src="https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@master/svg/{{companyDetails?.country?.countryCode}}.svg">
@@ -70,15 +70,15 @@
                                         </span>
                                         <span class="entity-details">
                                             <div class="item">{{ option.label || '-' }}</div>
-                                            <div class="item-unq">
+                                            <div class="item-unique">
                                                 {{ option.name || '-' }}
                                             </div>
                                         </span>
                                         <span class="default-entity">
                                             <i (click)="setDefault(option, $event)" *ngIf="!option.isDefault"
-                                                class="icon-no-selected mr-05"></i>
+                                                class="icon-no-selected mr-r05"></i>
                                             <i (click)="setDefault(option, $event)" *ngIf="option.isDefault"
-                                                class="icon-favorite-selected mr-05"></i>
+                                                class="icon-favorite-selected mr-r05"></i>
                                         </span>
                                     </a>
                                 </ng-container>
@@ -100,7 +100,7 @@
                                         href="javascript:void(0)" class="list-item d-flex">
                                         <span class="entity-details">
                                             <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                            <div class="item-unq">
+                                            <div class="item-unique">
                                                 <p *ngIf="option.taxType && option.taxNumber">{{ option.taxType }} :
                                                     {{ option.taxNumber }}</p>
                                             </div>
@@ -111,7 +111,7 @@
                             <ng-template #notFoundLinkTemplate>
                                 <a href="javascript:void(0)" [keyboardShortcut]="'alt+c'"
                                     (onShortcutPress)="handleShortcutPress()"
-                                    class="list-item pl-05 pr-05 border-none d-flex justify-content-between w-100"
+                                    class="list-item pd-l05 pd-r05 border-none d-flex justify-content-between w-100"
                                     [keyboardShortcut]="'alt+c'">
                                     <div class="item">+Add Address</div>
                                     <div class="item">Alt+C</div>
@@ -123,7 +123,7 @@
             </div>
             <div class="footer-btn row">
                 <div class="button-group">
-                    <button type="reset" (click)="handleFormClear()" class="btn btn-primary mr-15">Clear</button>
+                    <button type="reset" (click)="handleFormClear()" class="btn btn-primary mr-r15">Clear</button>
                     <button type="submit" [disabled]="warehouseForm?.invalid" class="btn btn-success">Create
                         Warehouse</button>
                 </div>
diff --git a/apps/web-giddh/src/app/settings/warehouse/warehouse.component.html b/apps/web-giddh/src/app/settings/warehouse/warehouse.component.html
index 33672bd8741..f091edc468b 100644
--- a/apps/web-giddh/src/app/settings/warehouse/warehouse.component.html
+++ b/apps/web-giddh/src/app/settings/warehouse/warehouse.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="warehouses">
     <div class="warehouse-card-view">
         <div class="row">
-            <div class="mb-15 col-sm-12 mr-0 d-flex justify-content-between warehouse-header">
+            <div class="mr-b15 col-sm-12 mr-0 d-flex justify-content-between warehouse-header">
                 <div class="search-container">
                     <div class="search-warehouse-box">
                         <input #searchWarehouse type="text" [(ngModel)]="searchWarehouseQuery" class="form-control"
@@ -63,19 +63,19 @@ <h3>{{ warehouse.name }}</h3>
                                 TODO: Integrate below code once the API is ready
                             -->
                         <!--
-                                <div class="clearfix about-warehaouse">
+                                <div class="clearfix about-warehouse">
                                     <label>Linked with:</label>
                                     <p>{{warehouse.uniqueName}}</p>
                                 </div>
                             -->
 
                         <!--
-                                <div class="clearfix about-warehaouse">
+                                <div class="clearfix about-warehouse">
                                     <label>Inventory Value:</label>
                                     <p>22,000/-</p>
                                 </div>
                             -->
-                        <div class="clearfix about-warehaouse">
+                        <div class="clearfix about-warehouse">
                             <!-- <div class="col-xl-3 col-lg-4 col-md-6"> -->
                                 <div class="parent-branch pt-1 pb-1">Linked Address:</div>
                                 <div>
@@ -101,9 +101,9 @@ <h3>{{ warehouse.name }}</h3>
                                 <div class="linked-details">
                                     <label>Linked Entity/ies:</label>
                                     <ul>
-                                        <li><i class="icon-company-HO mr-05"></i>Alias Company Name</li>
-                                        <li><i class="icon-branch-icon mr-05"></i>Alias Branch Name</li>
-                                        <li><i class="icon-branch-icon mr-05"></i>Alias Branch 3 Name</li>
+                                        <li><i class="icon-company-HO mr-r05"></i>Alias Company Name</li>
+                                        <li><i class="icon-branch-icon mr-r05"></i>Alias Branch Name</li>
+                                        <li><i class="icon-branch-icon mr-r05"></i>Alias Branch 3 Name</li>
                                     </ul>
                                 </div>
                             </div>
@@ -111,7 +111,7 @@ <h3>{{ warehouse.name }}</h3>
                                 <div class="linked-details">
                                     <label>Sub - Location:</label>
                                     <ul>
-                                        <li><i class="icon-warehouse-icon mr-05"></i>Floor 1, Floor 2, Floor 3</li>
+                                        <li><i class="icon-warehouse-icon mr-r05"></i>Floor 1, Floor 2, Floor 3</li>
                                     </ul>
                                 </div>
                             </div> -->
@@ -136,7 +136,7 @@ <h3>{{ warehouse.name }}</h3>
 
 <!-- Warehouse on boarding modal (Step 1) -->
 <div bsModal #warehouseOnBoardingModal="bs-modal" [config]="{ ignoreBackdropClick: 'true', keyboard: 'true'}"
-    tabindex="-1" class="modal fade openPoup" role="dialog" (onHidden)="onBoardingModalDismiss($event)">
+    tabindex="-1" class="modal fade open-popup" role="dialog" (onHidden)="onBoardingModalDismiss($event)">
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <ng-template element-view-container-ref #onBoardingContainer="elementviewcontainerref">
diff --git a/apps/web-giddh/src/app/settings/warehouse/warehouse.component.scss b/apps/web-giddh/src/app/settings/warehouse/warehouse.component.scss
index dc79c9ddaf2..2d237ce1fb7 100644
--- a/apps/web-giddh/src/app/settings/warehouse/warehouse.component.scss
+++ b/apps/web-giddh/src/app/settings/warehouse/warehouse.component.scss
@@ -24,7 +24,7 @@
         }
     }
 }
-.createWarehouse {
+.create-warehouse {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -34,19 +34,19 @@
         text-align: center;
     }
 }
-.createWarehouse h2 {
+.create-warehouse h2 {
     font-size: 20px;
     font-family: "opensans-semibold";
     margin: 10px 0;
 }
-.createWarehouse p {
+.create-warehouse p {
     font-size: 14px;
     margin-bottom: 10px;
 }
-.createWarehouse p span {
-    color: #5b64c9;
+.create-warehouse p span {
+    color: $chetwode-blue;
 }
-.createWarehouse img {
+.create-warehouse img {
     margin-bottom: 20px;
 }
 .warehouse-card {
@@ -68,7 +68,7 @@
     .btn-group .btn {
         background-color: transparent;
         padding: 0;
-        color: #707070;
+        color: $gray;
         margin-right: 0;
         font-size: 20px;
         position: relative;
@@ -87,6 +87,7 @@
 .warehouse-card .d-flex {
     justify-content: space-between;
     align-items: center;
+    padding-bottom: 10px;
 }
 
 .warehouse-card h3 {
@@ -97,7 +98,7 @@
     word-break: break-all;
     color: $midnight-blue;
 }
-span.setAsDefault {
+span.set-as-default {
     background-color: $gainsboro;
     padding: 5px 10px;
     font-size: 14px;
@@ -121,7 +122,7 @@ span.setAsDefault {
     white-space: initial;
     width: 100%;
 }
-.about-warehaouse {
+.about-warehouse {
     margin: 0 0 15px;
     display: flex;
     flex-direction: column;
@@ -130,13 +131,13 @@ span.setAsDefault {
     }
 }
 .gray-text {
-    color: #8f9091;
+    color: $gray;
     font-size: 12px;
 }
-.setAsDefault i.icon-favorite-selected {
-    color: #5b64c9;
+.set-as-default i.icon-favorite-selected {
+    color: $chetwode-blue;
 }
-.createNewWarehouseBtn {
+.create-new-warehouse-btn {
     justify-content: center;
     align-items: center;
     display: flex;
diff --git a/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.html b/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.html
index ed13fd528b6..b1fc36cc77a 100644
--- a/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.html
+++ b/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.html
@@ -12,7 +12,7 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                 The adjusted amount of the linked invoice's is more than this receipt; update them first.
             </span>
             <div class="row mb-2">
-                <div class="col-md-8 mr-t">
+                <div class="col-md-8 mr-t05">
                     <div class="form-group">
                         <label>Customer Name </label>
                         <input type="text" class="form-control" name="customerName" [(ngModel)]="adjustPayment.customerName" readonly disabled>
@@ -50,7 +50,7 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                             <div class="form-group">
                                 <!-- <label for="name">Adjustment Voucher<span class="text-danger">*</span></label> -->
                                 <div class="select-error select-caret relative">
-                                    <sh-select [disabled]="(shouldDisableEdit(entry) || entry.linkingAdjustment) ? 'disabled' : null" class="text-left" name="voucherName{{entryIdx}}" [defaultValue]="entry.voucherNumber" [fixedValue]="entry.voucherNumber" (click)="clickSelectVoucher(entryIdx, adjustAdvancePaymentForm);" required [placeholder]="'Select Voucher'" [(ngModel)]="entry.uniqueName" (selected)="selectVoucher($event, entry, entryIdx);"
+                                    <sh-select [disabled]="(shouldDisableEdit(entry) || entry.linkingAdjustment) ? 'disabled' : null" class="text-left" name="voucherName{{entryIdx}}" [defaultValue]="entry.voucherNumber" [fixedValue]="entry.voucherNumber" (click)="clickSelectVoucher(entryIdx, adjustAdvancePaymentForm);" required [isRequired]="true" [placeholder]="'Select Voucher'" [(ngModel)]="entry.uniqueName" (selected)="selectVoucher($event, entry, entryIdx);"
                                         [options]="adjustVoucherOptions" [multiple]="false">
                                         <ng-template #optionTemplate let-option="option">
                                             <a href="javascript:void(0)" class="list-item">
@@ -92,21 +92,21 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                     class="font-16">+</span> Add New Line</a></p>
 
                 <div class="clearfix">
-                    <div *ngIf="isVoucherModule" class="clearfix mb-1 mt-2 row">
+                    <div *ngIf="isVoucherModule" class="clearfix mr-b1 mt-2 row">
                         <div class="col-md-2 col-sm-3 col-xs-5">
                             <span class="d-inline-block font-14">Tax Deducted?</span>
                         </div>
 
                         <div class="col-md-8 col-sm-8 col-xs-7">
-                            <span class="pd0 mr-2 d-inline-block">
-                                <input class="radio-custom cp ml0" type="radio" id="deductedNo" name="isTaxDeducted"
+                            <span class="p-0 mr-2 d-inline-block">
+                                <input class="radio-custom cp ml-0" type="radio" id="deductedNo" name="isTaxDeducted"
                                        [value]="false" [(ngModel)]="isTaxDeducted"
                                        (ngModelChange)="isTdsSelected($event )" />
                                 <label for="deductedNo" class="radio-custom-label">No</label>
                             </span>
 
-                            <span class="pd0 mr-2 d-inline-block">
-                                <input class="radio-custom cp ml0" type="radio" name="isTaxDeducted" id="deductedYes"
+                            <span class="p-0 mr-2 d-inline-block">
+                                <input class="radio-custom cp ml-0" type="radio" name="isTaxDeducted" id="deductedYes"
                                        [value]="true" [(ngModel)]="isTaxDeducted"
                                        (ngModelChange)="isTdsSelected($event )" />
                                 <label for="deductedYes" class="radio-custom-label">Yes</label>
@@ -155,8 +155,8 @@ <h4 class="modal-title bg pull-left">Adjust Payment</h4>
                             this.</p>
                     </div>
                     <div class="mt-2">
-                        <button *ngIf="!isUpdateMode" type="button" class="btn btn-success mrR1" [disabled]="isInvalidForm" (click)="saveAdjustAdvanceReceipt(adjustAdvancePaymentForm)">Save</button>
-                        <button *ngIf="isUpdateMode" type="button" class="btn btn-success mrR1" [disabled]="isInvalidForm" (click)="saveAdjustAdvanceReceipt(adjustAdvancePaymentForm)">Update</button>
+                        <button *ngIf="!isUpdateMode" type="button" class="btn btn-success mr-r1" [disabled]="isInvalidForm" (click)="saveAdjustAdvanceReceipt(adjustAdvancePaymentForm)">Save</button>
+                        <button *ngIf="isUpdateMode" type="button" class="btn btn-success mr-r1" [disabled]="isInvalidForm" (click)="saveAdjustAdvanceReceipt(adjustAdvancePaymentForm)">Update</button>
                         <button type="button" class="btn btn-cancel" (click)="onClear()">Reset</button>
                     </div>
                 </div>
diff --git a/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.ts b/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.ts
index 401557e0e0f..61ea8ef30e0 100644
--- a/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.ts
+++ b/apps/web-giddh/src/app/shared/advance-receipt-adjustment/advance-receipt-adjustment.component.ts
@@ -44,9 +44,6 @@ export class AdvanceReceiptAdjustmentComponent implements OnInit {
     /** Exceed Amount from invoice amount after adjustment */
     public exceedDueAmount: number = 0;
 
-
-
-
     @ViewChild('tdsTypeBox', {static: true}) public tdsTypeBox: ElementRef;
     @ViewChild('tdsAmountBox', {static: true}) public tdsAmountBox: ElementRef;
 
@@ -81,6 +78,8 @@ export class AdvanceReceiptAdjustmentComponent implements OnInit {
     @Input() public adjustedVoucherType: AdjustedVoucherType;
     /** True if the current module is voucher module required as all voucher adjustments are not supported from API */
     @Input() public isVoucherModule: boolean;
+    /** Stores the voucher eligible for adjustment */
+    @Input() public voucherForAdjustment: Array<Adjustment>;
 
     /** Close modal event emitter */
     @Output() public closeModelEvent: EventEmitter<{ adjustVoucherData: VoucherAdjustments, adjustPaymentData: AdjustAdvancePaymentModal }> = new EventEmitter();
@@ -172,7 +171,24 @@ export class AdvanceReceiptAdjustmentComponent implements OnInit {
                 }
             });
         } else {
-            this.getAllAdvanceReceipts();
+            if (!this.voucherForAdjustment) {
+                this.getAllAdvanceReceipts();
+            } else {
+                if (this.voucherForAdjustment && this.voucherForAdjustment.length) {
+                    this.adjustVoucherOptions = [];
+                    this.voucherForAdjustment.forEach(item => {
+                        if (item) {
+                            item.voucherDate = item.voucherDate.replace(/-/g, '/');
+                            this.adjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
+                            this.newAdjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
+                        }
+                    });
+                } else {
+                    if (this.isVoucherModule) {
+                        this.toaster.warningToast(NO_ADVANCE_RECEIPT_FOUND);
+                    }
+                }
+            }
         }
         if (this.isUpdateMode) {
             this.calculateBalanceDue();
@@ -280,22 +296,21 @@ export class AdvanceReceiptAdjustmentComponent implements OnInit {
      * @memberof AdvanceReceiptAdjustmentComponent
      */
     public getAllAdvanceReceipts(): void {
-        this.adjustVoucherOptions = [];
-        if(this.adjustVoucherForm && this.adjustVoucherForm.adjustments) {
-            this.adjustVoucherForm.adjustments.forEach(item => {
-                if (item) {
-                    item.voucherDate = item.voucherDate.replace(/-/g, '/');
-                    this.adjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
-                    this.newAdjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
-                }
-            });
-        }
-
         if (this.adjustPayment && this.adjustPayment.customerUniquename && this.adjustPayment.voucherDate) {
             this.getAllAdvanceReceiptsRequest.accountUniqueName = this.adjustPayment.customerUniquename;
             this.getAllAdvanceReceiptsRequest.invoiceDate = this.adjustPayment.voucherDate;
             this.salesService.getAllAdvanceReceiptVoucher(this.getAllAdvanceReceiptsRequest).subscribe(res => {
                 if (res.status === 'success') {
+                    this.adjustVoucherOptions = [];
+                    if (this.adjustVoucherForm && this.adjustVoucherForm.adjustments) {
+                        this.adjustVoucherForm.adjustments.forEach(item => {
+                            if (item && item.uniqueName) {
+                                item.voucherDate = item.voucherDate.replace(/-/g, '/');
+                                this.adjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
+                                this.newAdjustVoucherOptions.push({ value: item.uniqueName, label: item.voucherNumber, additional: item });
+                            }
+                        });
+                    }
                     this.allAdvanceReceiptResponse = res.body
                     if (res.body && res.body.length) {
                         if (this.allAdvanceReceiptResponse && this.allAdvanceReceiptResponse.length) {
diff --git a/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.html b/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.html
index d069609d1e1..36723015181 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.html
+++ b/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.html
@@ -18,7 +18,7 @@ <h3 class="aside-title">{{ tax && tax.uniqueName ? 'Update ' : 'Create New ' }}T
                         <div class="form-group col-sm-6 col-xs-12">
                             <label>Select Tax <span class="text-danger">*</span> </label><br>
                             <sh-select [options]="taxListSource$ | async" name="taxType" [(ngModel)]="newTaxObj.taxType"
-                                [defaultValue]="selectedTax" [placeholder]="'Select Tax'" required [ItemHeight]="33"
+                                [defaultValue]="selectedTax" [placeholder]="'Select Tax'" required [isRequired]="true" [ItemHeight]="33"
                                 (selected)="selectTax($event)"></sh-select>
                         </div>
 
@@ -50,7 +50,7 @@ <h3 class="aside-title">{{ tax && tax.uniqueName ? 'Update ' : 'Create New ' }}T
                             <label>Select Type <span class="text-danger">*</span> </label><br>
                             <sh-select [options]="taxNameTypesMapping[newTaxObj.taxType]" name="tdsTcsTaxSubTypes"
                                 [(ngModel)]="newTaxObj.tdsTcsTaxSubTypes" [defaultValue]="selectedTaxType" placeholder="{{selectedTaxType ? selectedTaxType : 'Select Type'}}" [ngClass]="{'placeholder-black': selectedTaxType}"
-                                [ItemHeight]="33" required [forceClearReactive]="forceClear$ | async" [disabled]="checkIfTdsOrTcs"></sh-select>
+                                [ItemHeight]="33" required [isRequired]="true" [forceClearReactive]="forceClear$ | async" [disabled]="checkIfTdsOrTcs"></sh-select>
                         </div>
 
                     </div>
@@ -102,14 +102,14 @@ <h3 class="aside-title">{{ tax && tax.uniqueName ? 'Update ' : 'Create New ' }}T
 
                         <div class="form-group col-sm-4 col-xs-12 ">
                             <label>Tax Duration <span class="text-danger">*</span> </label><br>
-                            <sh-select placeholder="Select Duration" name="duration" required
+                            <sh-select placeholder="Select Duration" name="duration" required [isRequired]="true"
                                 [(ngModel)]="newTaxObj.duration" [options]="duration" [ItemHeight]="33"></sh-select>
                         </div>
 
                         <div class="form-group col-sm-4 col-xs-12">
                             <label>Filing Date <span class="text-danger">*</span> </label>
                             <sh-select placeholder="Select Date" [customSorting]="customDateSorting" name="taxFileDate"
-                                [(ngModel)]="newTaxObj.taxFileDate" required [options]="days" [ItemHeight]="33">
+                                [(ngModel)]="newTaxObj.taxFileDate" required [isRequired]="true" [options]="days" [ItemHeight]="33">
                             </sh-select>
                         </div>
 
diff --git a/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.scss b/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.scss
index 1b4017f8e44..dd9b922684c 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.scss
+++ b/apps/web-giddh/src/app/shared/aside-menu-create-tax/aside-menu-create-tax.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -18,7 +20,7 @@
     border: 0;
     border-radius: 0;
     background: 0 0;
-    color: #fff;
+    color: $white;
 }
 
 :host .container-fluid {
@@ -38,18 +40,18 @@
     flex-wrap: wrap;
 
     span {
-        border: 1px solid #ddd;
+        border: 1px solid $gainsboro;
         padding: 5px 8px;
         margin: 10px 10px 12px 0px;
-        background-color: #ddd;
+        background-color: $gainsboro-light;
     }
 }
 .input-group {
     width: 100%;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.html b/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.html
index 25bfbf89227..e2624527cd8 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.html
+++ b/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.html
@@ -11,7 +11,7 @@ <h3 class="aside-title">Tax applicable</h3>
         <div class="aside-pane-form">
             <div class="row">
 
-                <div class="col-xs-12 col-sm-6">
+                <div class="col-sm-6">
 
                     <div class="select-tax-dropdown d-flex flex-column">
                         <label>Select Tax<span class="text-danger">*</span></label>
@@ -22,7 +22,7 @@ <h3 class="aside-title">Tax applicable</h3>
                                 [showClear]="true">
                             </sh-select>
 
-                            <label style="margin-top: 3px;margin-left: 2px;"
+                            <label class="label-tax"
                                 *ngIf="otherTaxesModal?.appliedOtherTax?.name">
                                 {{ otherTaxesModal?.appliedOtherTax?.name | uppercase}}
                             </label>
@@ -32,7 +32,7 @@ <h3 class="aside-title">Tax applicable</h3>
 
                 </div>
 
-                <div class="col-xs-12 col-sm-6">
+                <div class="col-sm-6">
 
                     <div>
                         <label>Calculation Method<span class="text-danger">*</span></label>
diff --git a/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.scss b/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.scss
index 846929de5e1..14df23b9e39 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.scss
+++ b/apps/web-giddh/src/app/shared/aside-menu-other-taxes/aside-menu-other-taxes.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -15,7 +17,7 @@
     right: 10px;
     z-index: 9999999;
     background-color: transparent;
-    color: #fff;
+    color: $white;
     font-size: 17px;
     top: 18px;
     margin-right: 0;
@@ -36,8 +38,8 @@
     margin-bottom: 10px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0 3px 6px $black-russian;
     padding: 15px;
     height: calc(100vh - 90px);
     overflow: auto;
@@ -47,8 +49,13 @@
 }
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
+}
+
+.label-tax{
+    margin-top: 3px !important;
+    margin-left: 2px !important;
 }
 
 @media (max-width: 768px) {
diff --git a/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.html b/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.html
index 0f6a39e2015..428c7522602 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.html
+++ b/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.html
@@ -27,13 +27,13 @@ <h3 class="aside-title">Recurring Account</h3>
 				expire
 			</div>
 
-			<div class="form-group ng-select-wrap liq selectGroup">
+			<div class="form-group ng-select-wrap select-list select-group">
 				<label class="mr-b1">Interval<span class="text-danger">*</span></label>
 				<ng-select placeholder="Select Interval" filterPlaceholder="Type to search..."
 					formControlName="duration" name="duration" [options]="intervalOptions" style="width:100%">
 					<ng-template #optionTemplate let-option="option">
 						<div class="account-list-item">{{option?.label}}</div>
-						<div class="account-list-item fs12">{{option?.value}}</div>
+						<div class="account-list-item font-12">{{option?.value}}</div>
 					</ng-template>
 				</ng-select>
 			</div>
diff --git a/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.scss b/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.scss
index 1b4017f8e44..dd9b922684c 100644
--- a/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.scss
+++ b/apps/web-giddh/src/app/shared/aside-menu-recurring-entry/aside.menu.recurringEntry.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -18,7 +20,7 @@
     border: 0;
     border-radius: 0;
     background: 0 0;
-    color: #fff;
+    color: $white;
 }
 
 :host .container-fluid {
@@ -38,18 +40,18 @@
     flex-wrap: wrap;
 
     span {
-        border: 1px solid #ddd;
+        border: 1px solid $gainsboro;
         padding: 5px 8px;
         margin: 10px 10px 12px 0px;
-        background-color: #ddd;
+        background-color: $gainsboro-light;
     }
 }
 .input-group {
     width: 100%;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.html b/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.html
index 6e32a801100..6708beb8cbd 100644
--- a/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.html
+++ b/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.html
@@ -1,4 +1,4 @@
-<footer id="footer" class="absoulte-footer">
+<footer id="footer" class="absolute-footer">
     <div class="footer-content">
         <img src="assets/images/new/giddh-logo.svg" alt="" class="giddh-logo">
         <!-- <p class="clearfix">
diff --git a/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.scss b/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.scss
index 503dbb1d5ba..ae069e8ad2a 100644
--- a/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.scss
+++ b/apps/web-giddh/src/app/shared/fixed-footer/fixed-footer.component.scss
@@ -1,9 +1,11 @@
-footer#footer.absoulte-footer {
+@import "../../../assets/css/color.scss";
+
+footer#footer.absolute-footer {
     text-align: left;
     margin-top: 0;
     height: 54px;
     background-color: transparent;
-    color: #ddd;
+    color: $gainsboro-light;
     line-height: 2.3;
     font-size: 12px;
     // position: absolute !important;
@@ -41,7 +43,7 @@ img.giddh-logo {
     margin: 0 auto;
 }
 @media (max-width: 1440px) {
-    footer#footer.absoulte-footer {
+    footer#footer.absolute-footer {
         padding-top: 66px;
     }
 }
diff --git a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.html b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.html
index c9921aa7552..cce4ac6fd88 100644
--- a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.html
+++ b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.html
@@ -3,27 +3,27 @@
 
     <div class="form-header">
         <div>
-            <h3 class=""><span>{{selectedAccountUniqueName ? 'Update' : 'Create'}} Account</span></h3>
+            <h3><span>{{selectedAccountUniqueName ? 'Update' : 'Create'}} Account</span></h3>
         </div>
     </div>
 
-    <button id="close" class="" (click)="closeAsidePane($event)"><i class="icon-cross"></i></button>
+    <button id="close" (click)="closeAsidePane($event)"><i class="icon-cross"></i></button>
 
 
 
     <div class="aside-body">
         <div class="aside-pane-form">
-            <!-- <div class="form-group pdT2">
+            <!-- <div class="form-group pd-t2">
 
             <label class="mr-b1">Select Group</label>
 
-            <div class="ng-select-wrap liq">
+            <div class="ng-select-wrap select-list">
 
                 <ng-select placeholder="Select Group" filterPlaceholder="Type to search..." name="activeGroupUniqueName"
                     [(ngModel)]="activeGroupUniqueName" [options]="flatAccountWGroupsList$ | async" style="width:100%">
                     <ng-template #optionTemplate let-option="option">
                         <div class="account-list-item">{{option?.label}}</div>
-                        <div class="account-list-item fs12">{{option?.value}}</div>
+                        <div class="account-list-item font-12">{{option?.value}}</div>
                     </ng-template>
                 </ng-select>
 
@@ -35,7 +35,7 @@ <h3 class=""><span>{{selectedAccountUniqueName ? 'Update' : 'Create'}} Account</
                 <account-add-new-details [activeGroupUniqueName]="activeGroupUniqueName"
                     (isGroupSelected)="isGroupSelected($event)" [fetchingAccUniqueName$]="fetchingAccUniqueName$"
                     [isAccountNameAvailable$]="isAccountNameAvailable$"
-                    [createAccountInProcess$]="createAccountInProcess$" [isDebtorCreditor]="isDebtorCreditor"
+                    [createAccountInProcess$]="createAccountInProcess$" [isDebtorCreditor]="isDebtorCreditor" [isBankAccount]="isBankAccount"
                     [flatGroupsOptions]="flatAccountWGroupsList" (submitClicked)="addNewAcSubmit($event)"
                     [isGstEnabledAcc]="isGstEnabledAcc" [isHsnSacEnabledAcc]="isHsnSacEnabledAcc"
                     [showBankDetail]="showBankDetail">
diff --git a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.scss b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.scss
index 89c07fa9891..42cd0ca031f 100644
--- a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.scss
+++ b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     position: fixed;
     left: auto;
@@ -21,7 +23,7 @@
     border: 0;
     border-radius: 0;
     background: transparent;
-    color: #fff;
+    color: $white;
 }
 
 :host .container-fluid {
@@ -37,8 +39,8 @@
     padding: 0 15px;
 }
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.ts b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.ts
index a0ba96fcfa4..c1f8a320495 100644
--- a/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.ts
+++ b/apps/web-giddh/src/app/shared/generic-aside-menu-account/generic.aside.menu.account.component.ts
@@ -9,6 +9,7 @@ import { AccountsAction } from '../../actions/accounts.actions';
 import { GroupService } from '../../services/group.service';
 import { IOption } from '../../theme/ng-select/option.interface';
 import { IFlattenGroupsAccountsDetail } from '../../models/interfaces/flattenGroupsAccountsDetail.interface';
+import { GroupResponse } from '../../models/api-models/Group';
 
 @Component({
 	selector: 'generic-aside-menu-account',
@@ -17,7 +18,9 @@ import { IFlattenGroupsAccountsDetail } from '../../models/interfaces/flattenGro
 })
 export class GenericAsideMenuAccountComponent implements OnInit, OnDestroy, OnChanges {
 
-	@Input() public selectedGrpUniqueName: string;
+    @Input() public selectedGrpUniqueName: string;
+    /** This will hold group unique name */
+    @Input() public selectedGroupUniqueName: string;
 	@Input() public selectedAccountUniqueName: string;
 	@Output() public closeAsideEvent: EventEmitter<boolean> = new EventEmitter(true);
 	@Output() public addEvent: EventEmitter<AddAccountRequest> = new EventEmitter();
@@ -33,8 +36,11 @@ export class GenericAsideMenuAccountComponent implements OnInit, OnDestroy, OnCh
 	public isAccountNameAvailable$: Observable<boolean>;
 	public createAccountInProcess$: Observable<boolean>;
 	public updateAccountInProcess$: Observable<boolean>;
-	public showBankDetail: boolean = false;
-	public isDebtorCreditor: boolean = true;
+    public showBankDetail: boolean = false;
+    /** this will hold if it's debtor/creditor */
+    @Input() public isDebtorCreditor: boolean = true;
+    /** this will hold if it's bank account */
+    @Input() public isBankAccount: boolean = true;
 
 
 	// private below
@@ -95,7 +101,37 @@ export class GenericAsideMenuAccountComponent implements OnInit, OnDestroy, OnCh
 
 		if ('selectedGrpUniqueName' in s && s.selectedGrpUniqueName.currentValue !== s.selectedGrpUniqueName.previousValue) {
 			this.getGroups(s.selectedGrpUniqueName.currentValue);
-		}
+        }
+        
+        if('selectedGroupUniqueName' in s && s.selectedGroupUniqueName.currentValue !== s.selectedGroupUniqueName.previousValue) {
+            // get groups list
+            this.groupService.GetGroupsWithAccounts('').subscribe((res: any) => {
+                let result: IOption[] = [];
+                this.flatAccountWGroupsList$ = of([]);
+                if (res.status === 'success' && res.body.length > 0) {
+                    if (this.selectedGroupUniqueName === 'purchase') {
+                        let revenueGrp = _.find(res.body, { uniqueName: 'operatingcost' });
+                        let flatGrps = this.groupService.flattenGroup([revenueGrp], []);
+                        if (flatGrps && flatGrps.length) {
+                            flatGrps.filter(fgroup => fgroup.uniqueName !== 'operatingcost').forEach((grp: GroupResponse) => {
+                                result.push({ label: grp.name, value: grp.uniqueName });
+                            });
+                        }
+                    } else {
+                        let revenueGrp = _.find(res.body, { uniqueName: 'revenuefromoperations' });
+                        let flatGrps = this.groupService.flattenGroup([revenueGrp], []);
+                        if (flatGrps && flatGrps.length) {
+                            flatGrps.filter(fgroup => fgroup.uniqueName !== 'revenuefromoperations').forEach((grp: GroupResponse) => {
+                                result.push({ label: grp.name, value: grp.uniqueName });
+                            });
+                        }
+                    }
+                }
+                this.flatAccountWGroupsList$ = of(result);
+                this.flatAccountWGroupsList = result;
+                this.activeGroupUniqueName = this.selectedGroupUniqueName;
+            });
+        }
 
 		if ('selectedAccountUniqueName' in s) {
 			let value = s.selectedAccountUniqueName;
diff --git a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.html b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.html
index bd24404b9d6..8e87186f237 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.html
@@ -1,14 +1,14 @@
-<form name="addAccountForm" class="createAccForm" [formGroup]="addAccountForm" (ngSubmit)="submit()">
+<form name="addAccountForm" class="create-acc-form" [formGroup]="addAccountForm" (ngSubmit)="submit()">
     <div class="">
         <div class="upper-form">
             <div class="row ">
                 <div class="col-sm-4">
-                    <div class="ng-select-wrap liq selectGroup">
+                    <div class="ng-select-wrap select-list select-group">
                         <label>Select Group<span class="red-text">*</span> </label>
                         <ng-select placeholder="Select Group" filterPlaceholder="Type to search..." (selected)="selectGroup($event)" formControlName="activeGroupUniqueName" [options]="flatGroupsOptions" style="width:100%">
                             <ng-template #optionTemplate let-option="option">
                                 <div class="account-list-item">{{option?.label}}</div>
-                                <div class="account-list-item fs12">{{option?.value}}</div>
+                                <div class="account-list-item font-12">{{option?.value}}</div>
                             </ng-template>
                         </ng-select>
                     </div>
@@ -24,7 +24,7 @@
                 <div class="col-sm-4">
                     <div class="form-group" formGroupName="country">
                         <label>Country <sup class="text-danger">*</sup> </label>
-                        <sh-select [options]="countrySource" defaultValue="{{selectedCountry}}" required [isFilterEnabled]="true" formControlName="countryCode" (selected)="selectCountry($event)" [useInBuiltFilterForIOptionTypeItems]="true">
+                        <sh-select [options]="countrySource" defaultValue="{{selectedCountry}}" required [isRequired]="true" [isFilterEnabled]="true" formControlName="countryCode" (selected)="selectCountry($event)" [useInBuiltFilterForIOptionTypeItems]="true">
                         </sh-select>
                     </div>
                 </div>
@@ -101,9 +101,9 @@
 
     <tabset #staticTabs class="custom-tabs " id="asidePaneFormTabs">
         <ng-container>
-            <tab heading="Address" [active]="isDebtorCreditor" [disabled]="!isDebtorCreditor" [ngClass]="{'active': isDebtorCreditor}" class="gstinAddress">
+            <tab heading="Address" [active]="isDebtorCreditor" [disabled]="!isDebtorCreditor" [ngClass]="{'active': isDebtorCreditor}" class="gstin-address">
                 <ng-container>
-                    <div class="gstinForm" formArrayName="addresses">
+                    <div class="gstin-form" formArrayName="addresses">
                         <ng-container *ngFor="let gst of addAccountForm.get('addresses')['controls'] | slice: 0:gstDetailsLength;let i = index;let f = first; let l = last" [formGroupName]="i">
                             <div class="row">
                                 <div class="col-sm-12">
@@ -131,14 +131,14 @@ <h3>Address {{i+1}}</h3>
                                     <div class="form-group">
                                         <label>State <sup class="text-danger" *ngIf="isStateRequired">*</sup> </label>
                                         <div>
-                                            <sh-select #states [options]="statesSource$ | async" [isFilterEnabled]="true" (selected)="selectedState(gst, $event)" [forceClearReactive]="forceClear$ | async" formControlName="stateCode" style="width:100%" [useInBuiltFilterForIOptionTypeItems]="true"
-                                                [attr.required]="isStateRequired">
+                                            <sh-select #states [options]="statesSource$ | async" [isFilterEnabled]="true" (selected)="selectedState(gst, $event)" [forceClearReactive]="forceClear$ | async" formControlName="stateCode" class="w-100" [useInBuiltFilterForIOptionTypeItems]="true"
+                                                [attr.required]="isStateRequired" [isRequired]="isStateRequired">
                                             </sh-select>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="col-sm-4" *ngIf="GSTIN_OR_TRN">
-                                    <div class="form-group mb-05">
+                                    <div class="form-group mr-b05">
                                         <label for="gstinNum" class="d-block">{{formFields['taxName'].label}}
                                         </label>
                                         <input type="text" class="form-control" autocomplete="false" autocomplete="false" #gstNumberField (keyup)="getStateCode(gst, states, $event);" (blur)="checkGstNumValidation(gstNumberField);" name="gstNumber" formControlName="gstNumber" placeholder="Enter {{formFields['taxName'].label}}"
@@ -149,8 +149,8 @@ <h3>Address {{i+1}}</h3>
                                     <div class="col-sm-4">
                                         <div class="form-group">
                                             <label>Party Type<span class="red-text">*</span></label>
-                                            <div class="pos-rel">
-                                                <sh-select [options]="partyTypeSource" formControlName="partyType" [isFilterEnabled]="true"></sh-select>
+                                            <div class="position-relative">
+                                                <sh-select [options]="partyTypeSource" formControlName="partyType" [isFilterEnabled]="true" [isRequired]="true"></sh-select>
                                             </div>
                                         </div>
                                     </div>
@@ -169,12 +169,12 @@ <h3>Address {{i+1}}</h3>
                             </div>
 
                             <div class="row" *ngIf="l && (addAccountForm.get('addresses')['controls'].length > 3) && !(moreGstDetailsVisible)">
-                                <a href="javascript:void(0);" class="text-left col-xs-6 cursor-pointer" (click)="showMoreGst()">Show all
+                                <a href="javascript:void(0);" class="text-left col-6 cursor-pointer" (click)="showMoreGst()">Show all
                                     ({{addAccountForm.get('addresses')['controls'].length}})</a>
-                                <a href="javascript:void(0);" class="text-left col-xs-6 cursor-pointer" (click)="showLessGst()">Show Less </a>
+                                <a href="javascript:void(0);" class="text-left col-6 cursor-pointer" (click)="showLessGst()">Show Less </a>
                             </div>
                             <div class="clearfix" *ngIf="l">
-                                <a class="text-right  btn btn-primary" href="javascript:void(0);" (click)="addGstDetailsForm(gst.get('gstNumber').value)">
+                                <a class="text-right btn btn-primary" href="javascript:void(0);" (click)="addGstDetailsForm(gst.get('gstNumber').value)">
                                     <i class="icon-plus"></i> Add Address
                                 </a>
                             </div>
@@ -183,8 +183,8 @@ <h3>Address {{i+1}}</h3>
                 </ng-container>
             </tab>
         </ng-container>
-        <tab heading="Contact" [active]="!isDebtorCreditor" class="ContactFromWrap">
-            <div class="contactForm">
+        <tab heading="Contact" [active]="!isDebtorCreditor" class="contact-form-wrap">
+            <div class="contact-form">
                 <div class="row">
                     <div class="col-sm-6">
                         <div class="form-group">
@@ -235,7 +235,7 @@ <h3>Address {{i+1}}</h3>
                 </div> -->
             </div>
             <!-- <div class="row">
-                <div class="col-sm-12 mrT3">
+                <div class="col-sm-12 mr-t3">
                     <div class="button-group">
                         <button class="btn btn-cancel">Cancel</button>
                         <button class="btn btn-success">Save</button>
@@ -246,7 +246,7 @@ <h3>Address {{i+1}}</h3>
 
 
         <!-- bank details visible when sundry credtiors selected , right now is hide -->
-        <tab heading="Bank Details" class="bankDetialsForm" *ngIf="showBankDetail">
+        <tab heading="Bank Details" class="bank-details-form" *ngIf="showBankDetail">
             <div *ngIf="showBankDetail">
                 <div formArrayName="accountBankDetails">
                     <div class="row" *ngFor="let bank of addAccountForm.get('accountBankDetails')['controls'];let i = index;let f = first; let l = last" [formGroupName]="i">
@@ -287,12 +287,12 @@ <h3>Address {{i+1}}</h3>
 
         </tab>
 
-        <tab heading="Others " class="otherFormWrap ">
+        <tab heading="Others" class="other-form-wrap">
 
-            <div class="otherForm ">
-                <div class="row ">
-                    <div class="col-sm-6 ">
-                        <div class="form-group ">
+            <div class="other-form">
+                <div class="row">
+                    <div class="col-sm-6">
+                        <div class="form-group">
                             <label>Account Unique Name</label>
                             <input type="text" class="form-control" [control]="addAccountForm.get('uniqueName')" textCaseChangeDirective UniqueNameDirective formControlName="uniqueName" name="accUnqname" />
                         </div>
@@ -329,9 +329,9 @@ <h3>Address {{i+1}}</h3>
                         </div>
                     </div>
                 </div> -->
-                <div class="row ">
-                    <div class="col-sm-12 ">
-                        <div class="form-group ">
+                <div class="row">
+                    <div class="col-sm-12">
+                        <div class="form-group">
                             <label>Description</label>
                             <textarea rows="3 " cols="4" name="description" formControlName="description" class="form-control "></textarea>
                         </div>
@@ -345,7 +345,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Group Name ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Move</button>
                     </div>
@@ -357,7 +357,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Select account ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Merge</button>
                     </div>
@@ -370,7 +370,7 @@ <h3>Address {{i+1}}</h3>
             <ng-container formArrayName="customFields">
                 <ng-container *ngFor="let item of companyCustomFields; let index = index;let first = first; let last = last" [formGroupName]="index">
                     <ng-container *ngFor="let customFieldsItem of addAccountForm.get('customFields')['controls']; let index = index;">
-                        <div class="row mb-15" *ngIf="item.uniqueName === customFieldsItem.get('uniqueName').value">
+                        <div class="row mr-b15" *ngIf="item.uniqueName === customFieldsItem.get('uniqueName').value">
                             <div class="col-lg-8">
                                 <div class="name-of-field">
                                     <label>{{item.key}} </label>
@@ -378,7 +378,7 @@ <h3>Address {{i+1}}</h3>
                                     <input *ngIf="item.dataType==='NUMERIC'" type="text" name="values{{index}}" formControlName="value" class="form-control" [maxLength]="item.valueLength" decimalDigitsDirective>
                                     <div *ngIf="item.dataType==='BOOLEAN'" class="clearfix">
                                         <span class="d-inline-block">
-                                            <input id="yes{{index}}" class="radio-custom cp ml0" type="radio"
+                                            <input id="yes{{index}}" class="radio-custom cp ml-0" type="radio"
                                                 [checked]="customFieldsItem.get('value').value==='true'"
                                                 (change)="selectedBooleanCustomField('true', index)"
                                                 name="booleanType{{index}}">
@@ -386,7 +386,7 @@ <h3>Address {{i+1}}</h3>
                                         </span>
 
                                         <span class="d-inline-block">
-                                            <input id="no{{index}}" class="radio-custom cp ml0" type="radio"
+                                            <input id="no{{index}}" class="radio-custom cp ml-0" type="radio"
                                                 [checked]="customFieldsItem.get('value').value==='false'"
                                                 (change)="selectedBooleanCustomField('false', index)"
                                                 name="booleanType{{index}}">
diff --git a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.scss b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.scss
index 8b4c9f81ea1..d57abbe6368 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.scss
@@ -1,13 +1,13 @@
 @import "../../../../../assets/css/color.scss";
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
 }
 
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     //  height: 100vh;
     overflow: auto;
@@ -15,10 +15,10 @@
     position: relative;
 }
 
-.aside-pane-conatainer {
+.aside-pane-container {
     padding: 15px;
     font-size: 14px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .aside-pane-form label {
@@ -48,8 +48,8 @@ span.dr-label {
 }
 
 .cr-dr-account span.active {
-    background-color: #5b64c9;
-    color: #fff;
+    background-color: $chetwode-blue;
+    color: $white;
 }
 
 .aside-pane-form .col-sm-4,
@@ -65,10 +65,10 @@ span.dr-label {
     margin-bottom: 20px;
      .input-group{
         .input-group-addon{
-            border-left: 1px solid $very-light-gray !important;
+            border-left: 1px solid $gainsboro !important;
         }
         input{
-            border-left: 1px solid $very-light-gray !important;
+            border-left: 1px solid $gainsboro !important;
             border-right: none !important;
             &:focus{
                 border-left: 1px solid $chetwode-blue !important;
@@ -77,7 +77,7 @@ span.dr-label {
     }
 }
 
-form.gstinForm {
+form.gstin-form {
     padding-top: 15px;
 }
 
@@ -92,16 +92,16 @@ form.gstinForm {
 
 .add-address-default h3 {
     font-size: 16px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
-.contactForm,
-.otherFormWrap,
-.bankDetialsForm {
+.contact-form,
+.other-form-wrap,
+.bank-details-form {
     padding-top: 15px;
 }
 
-.otherForm .btn-sky-blue {
+.other-form .btn-sky-blue {
     display: block;
 }
 
@@ -140,7 +140,7 @@ a.btn-remove {
 }
 
 @media (max-width: 767px) {
-    .upper-form .selectGroup {
+    .upper-form .select-group {
         margin-bottom: 15px;
     }
 }
diff --git a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.ts b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.ts
index d11e7eec211..69e75ded817 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.ts
+++ b/apps/web-giddh/src/app/shared/header/components/account-add-new-details/account-add-new-details.component.ts
@@ -51,6 +51,8 @@ export class AccountAddNewDetailsComponent implements OnInit, OnChanges, AfterVi
     @Input() public showBankDetail: boolean = false;
     @Input() public showVirtualAccount: boolean = false;
     @Input() public isDebtorCreditor: boolean = true;
+    /** True if bank category account is selected */
+    @Input() public isBankAccount: boolean = true;
     @Output() public submitClicked: EventEmitter<{ activeGroupUniqueName: string, accountRequest: AccountRequestV2 }> = new EventEmitter();
     @Output() public isGroupSelected: EventEmitter<string> = new EventEmitter();
     @ViewChild('autoFocus', {static: true}) public autoFocus: ElementRef;
diff --git a/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.html b/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.html
index f5ae0c60528..3ceada29cbd 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.html
@@ -1,6 +1,7 @@
-<div class="bdrR row view_forms" id="middleBody" style="margin:0" [perfectScrollbar]="config" *ngIf="!(showNewForm$ | async)">
+<div class="bd-rr row view-forms m-0" id="middleBody" [perfectScrollbar]="config"
+    *ngIf="!(showNewForm$ | async)">
     <!--breadcrumbs-->
-    <div class="breadcrumbs container-fluid top-bar bdrB row mr-0 ml-0 h-100" *ngIf="breadcrumbPath?.length > 0">
+    <div class="breadcrumbs container-fluid top-bar bd-rb row mr-0 ml-0 h-100" *ngIf="breadcrumbPath?.length > 0">
         <div class="col-sm-8">
             <ol class="breadcrumb row">
                 <li *ngFor="let value of breadcrumbPath;let last = last;" [ngClass]="{'active': last}">
@@ -14,7 +15,7 @@
             </button>
             <button class="btn btn-share pull-right" *ngIf="(showEditGroup$ | async)" (click)="showShareGroupModal()">Share
             </button>
-            <div class="primary_clr text-right pull-right mr-t1 clearfix"
+            <div class="primary-color text-right pull-right mr-t1 clearfix"
                 *ngIf="isUserSuperAdmin && (showEditGroup$ | async) && (activeGroupSharedWith$ | async)?.length">
                 Shared with {{ (activeGroupSharedWith$ | async)?.length }} people
             </div>
@@ -24,7 +25,7 @@
             <button class="btn btn-share pull-right" (click)="showShareAccountModal()">
                 Share
             </button>
-            <div class="primary_clr text-right pull-right mr-t1 clearfix" *ngIf="isUserSuperAdmin && (showEditAccount$ | async) && (activeAccountSharedWith$ | async)?.length">
+            <div class="primary-color text-right pull-right mr-t1 clearfix" *ngIf="isUserSuperAdmin && (showEditAccount$ | async) && (activeAccountSharedWith$ | async)?.length">
                 Shared with {{ (activeAccountSharedWith$ | async)?.length }} people
             </div>
         </div>
@@ -96,7 +97,7 @@
     <!--merge account-->
     <!-- <div class="">
                     <label class="d-block">Select A/c to merge with
-            <span class="primary_clr">{{(activeAccount$ | async)?.name}}</span>
+            <span class="primary-color">{{(activeAccount$ | async)?.name}}</span>
           </label>
                     <div class="clearfix" #accountSelect2>
                         <span>
@@ -105,7 +106,7 @@
                 [placeholder]="'Select Accounts'" style="width: calc(100% - 93px);"></sh-select>
             </span>
                         <span class="pull-right">
-              <button type="submit" class="btn btn-primary marge-btn" (click)="mergeAccounts()">Merge</button>
+              <button type="submit" class="btn btn-primary merge-btn" (click)="mergeAccounts()">Merge</button>
             </span>
                     </div>
                     <small class="clearfix">This option is risky and can not be undone</small>
@@ -138,7 +139,7 @@
     <!--
                 <div class="clearfix tax-operation" *ngIf="isTaxableAccount$ | async">
                     <div class="">
-                        <div class="form-group toggle-btn mrB">
+                        <div class="form-group toggle-btn mr-b05">
                             <label class="cp" (click)="showTaxes = !showTaxes; taxHierarchy()">
                 <i class="fa cp" aria-hidden="true"
                   [ngClass]="{'fa-minus-square-o': showTaxes, 'fa-plus-square-o': !showTaxes}"></i>Taxes
@@ -157,7 +158,7 @@
                                     <div class="input-group">
                                         <sh-select [options]="companyTaxDropDown | async" [placeholder]="'Select Tax'" [multiple]="true" formControlName="taxes" style="width: calc(100% - 13px);">
                                         </sh-select>
-                                        <span class="input-group-btn pdL2">
+                                        <span class="input-group-btn pd-l2">
                       <button type="submit" class="btn btn-success">Save</button>
                     </span>
                                     </div>
@@ -193,7 +194,7 @@
     <!-- <div class="clearfix tax-operation" *ngIf="isDiscountableAccount$ | async">
 
         <div class="col-xs-12">
-            <div class="form-group toggle-btn mrB">
+            <div class="form-group toggle-btn mr-b05">
                 <label class="cp" (click)="showDiscount = !showDiscount;">
         <i class="fa cp" aria-hidden="true"
         [ngClass]="{'fa-minus-square-o': showDiscount, 'fa-plus-square-o': !showDiscount}"></i>Discounts
@@ -212,7 +213,7 @@
                         <div class="input-group">
                             <sh-select [options]="companyDiscountDropDown" #discountShSelect [placeholder]="'Select Discount'" [multiple]="false" formControlName="discountUniqueName" [showClear]="false" style="width: calc(100% - 13px);">
                             </sh-select>
-                            <span class="input-group-btn pdL2">
+                            <span class="input-group-btn pd-l2">
             <button type="submit" class="btn btn-success"
                     >Save</button>
             <button type="button" class="btn btn-danger" style="margin-left: 5px;"
@@ -251,8 +252,8 @@
     <!--&lt;!&ndash;                <angular2-multiselect [(ngModel)]="selectedItems" name="selectedItems"&ndash;&gt;-->
     <!--&lt;!&ndash;                                      [data]="itemList" [settings]="settings">&ndash;&gt;-->
     <!--&lt;!&ndash;                </angular2-multiselect>&ndash;&gt;-->
-    <!--                <span class="input-group-btn pdL2"> <button type="submit"-->
-    <!--                                                            class="btn btn-success marge-btn">Save</button></span>-->
+    <!--                <span class="input-group-btn pd-l2"> <button type="submit"-->
+    <!--                                                            class="btn btn-success merge-btn">Save</button></span>-->
     <!--              </div>-->
     <!--            </div>-->
     <!--          </form>-->
@@ -268,9 +269,9 @@
 <!-- modals -->
 
 <!--ng-busy   " -->
-<div class="">
+<div>
     <div class="ng-busy ng-trigger ng-trigger-flyInOut" *ngIf="activeGroupInProgress$ | async">
-        <div class="">
+        <div>
             <div class=" ng-busy-default-wrapper">
                 <div class="ng-busy-default-sign">
                     <div class="ng-busy-default-spinner">
@@ -314,8 +315,8 @@
 </div>
 
 <!--add new buttons-->
-<div class="inline-table new_form ng-scope" *ngIf="(showNewForm$ | async)">
-    <div class="vcenter groups-buttons">
+<div class="inline-table new-form ng-scope" *ngIf="(showNewForm$ | async)">
+    <div class="vertical-center groups-buttons">
         <button class="btn isActive mr-b2" (click)="showAddGroupForm()">Create Group</button>
         <span class="clearfix"></span>
         <button class="btn isActive" *ngIf="!isRootLevelGroup" (click)="showAddAccountForm()">Create A/c</button>
diff --git a/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.scss b/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.scss
index e9521e9cb51..4d18b4c25e1 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/account-operations/account-operations.component.scss
@@ -1,4 +1,4 @@
-.marge-btn {
+.merge-btn {
     padding: 8px 16px;
 }
 
diff --git a/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.html b/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.html
index 8b4eeb80529..153dc1dd9ea 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.html
@@ -1,14 +1,14 @@
-<form name="addAccountForm" class="createAccForm" [formGroup]="addAccountForm">
-    <div class="">
+<form name="addAccountForm" class="create-acc-form" [formGroup]="addAccountForm">
+    <div>
         <div class="upper-form">
-            <div class="row ">
+            <div class="row">
                 <div class="col-sm-4">
-                    <div class="ng-select-wrap liq selectGroup disable-select-group">
+                    <div class="ng-select-wrap select-list select-group disable-select-group">
                         <label>Select Group<span class="red-text">*</span> </label>
                         <ng-select placeholder="Select Group" [disabled]="true" filterPlaceholder="Type to search..." (selected)="selectGroup($event)" formControlName="activeGroupUniqueName" [options]="flatGroupsOptions" class="wd100">
                             <ng-template #optionTemplate let-option="option">
                                 <div class="account-list-item">{{option?.label}}</div>
-                                <div class="account-list-item fs12">{{option?.value}}</div>
+                                <div class="account-list-item font-12">{{option?.value}}</div>
                             </ng-template>
                         </ng-select>
                     </div>
@@ -24,7 +24,7 @@
                 <div class="col-sm-4">
                     <div class="form-group" formGroupName="country">
                         <label>Country <sup class="text-danger">*</sup> </label>
-                        <sh-select [options]="countrySource" [isFilterEnabled]="true" (viewInitEvent)="onViewReady($event)" formControlName="countryCode" (selected)="selectCountry($event)" [useInBuiltFilterForIOptionTypeItems]="true"></sh-select>
+                        <sh-select [options]="countrySource" [isFilterEnabled]="true" (viewInitEvent)="onViewReady($event)" formControlName="countryCode" (selected)="selectCountry($event)" [useInBuiltFilterForIOptionTypeItems]="true" [isRequired]="true"></sh-select>
                     </div>
                 </div>
                 <div class="col-sm-4">
@@ -93,9 +93,9 @@
 
     <tabset #staticTabs class="custom-tabs " id="asidePaneFormTabs">
         <ng-container>
-            <tab heading="Address" class="gstinAddress" [active]="isDebtorCreditor || isBankAccount" [disabled]="!isDebtorCreditor && !isBankAccount" (selectTab)="tabChanged('address')">
+            <tab heading="Address" class="gstin-address" [active]="isDebtorCreditor || isBankAccount" [disabled]="!isDebtorCreditor && !isBankAccount" (selectTab)="tabChanged('address')">
                 <ng-container>
-                    <div class="gstinForm" formArrayName="addresses">
+                    <div class="gstin-form" formArrayName="addresses">
                         <ng-container *ngFor="let gst of addAccountForm.get('addresses')['controls'] | slice: 0:gstDetailsLength;let i = index;let f = first; let l = last" [formGroupName]="i">
                             <div class="row">
                                 <div class="col-sm-12">
@@ -125,7 +125,7 @@ <h3>Address {{i+1}}</h3>
                                     </div>
                                 </div>
                                 <div class="col-sm-4" *ngIf="GSTIN_OR_TRN">
-                                    <div class="form-group mb-05">
+                                    <div class="form-group mr-b05">
                                         <label for="gstinNum" class="d-block">{{formFields['taxName'].label}}</label>
                                         <input type="text" class="form-control" autocomplete="false" autocomplete="false" #gstNumberField (blur)="checkGstNumValidation(gstNumberField);getStateCode(gst, states);" name="gstNumber" formControlName="gstNumber" placeholder="Enter {{formFields['taxName'].label}}"
                                         />
@@ -136,7 +136,7 @@ <h3>Address {{i+1}}</h3>
                                     <div class="col-sm-4">
                                         <div class="form-group">
                                             <label>Party Type<span class="red-text">*</span></label>
-                                            <div class="pos-rel">
+                                            <div class="position-relative">
                                                 <sh-select [options]="partyTypeSource" formControlName="partyType" [isFilterEnabled]="true"></sh-select>
                                             </div>
                                         </div>
@@ -165,9 +165,9 @@ <h3>Address {{i+1}}</h3>
                                 </div>
                             </div>
                             <div class="row" *ngIf="l && (addAccountForm.get('addresses')['controls'].length > 3) && !(moreGstDetailsVisible)">
-                                <a href="javascript:void(0);" class="text-left col-xs-6 cursor-pointer" (click)="showMoreGst()">Show all
+                                <a href="javascript:void(0);" class="text-left col-6 cursor-pointer" (click)="showMoreGst()">Show all
                                     ({{addAccountForm.get('addresses')['controls'].length}})</a>
-                                <a href="javascript:void(0);" class="text-left col-xs-6 cursor-pointer" (click)="showLessGst()">Show
+                                <a href="javascript:void(0);" class="text-left col-6 cursor-pointer" (click)="showLessGst()">Show
                                     Less </a>
                             </div>
                             <div *ngIf="l">
@@ -187,8 +187,8 @@ <h3>Address {{i+1}}</h3>
             </tab>
         </ng-container>
 
-        <tab heading="Contact" class="ContactFromWrap" [active]="!isDebtorCreditor" (selectTab)="tabChanged('contacts')">
-            <div class="contactForm">
+        <tab heading="Contact" class="contact-form-wrap" [active]="!isDebtorCreditor" (selectTab)="tabChanged('contacts')">
+            <div class="contact-form">
                 <div class="row">
                     <div class="col-sm-6">
                         <div class="form-group">
@@ -200,7 +200,7 @@ <h3>Address {{i+1}}</h3>
                         <div class="form-group">
                             <label>Mobile Number</label>
                             <div class="d-flex mobileNumberWidth">
-                                <sh-select [placeholder]="'+91'" [options]="countryPhoneCode" formControlName="mobileCode" style="width: 60px; margin-right: 10px;"></sh-select>
+                                <sh-select [placeholder]="'+91'" [options]="countryPhoneCode" formControlName="mobileCode" class="contact-number-select"></sh-select>
                                 <input type="text" pattern="[0-9]*" class="form-control pull-right" placeholder="98XXXXXXXX" formControlName="mobileNo" id="contactNo" autocomplete="off" (blur)="isValidMobileNumber(mobileNoEl)" #mobileNoEl />
                                 <small class="clearfix error-msg" *ngIf="addAccountForm.get('mobileNo').value && !addAccountForm.get('mobileCode').value">Phone
                                     code
@@ -239,7 +239,7 @@ <h3>Address {{i+1}}</h3>
                 </div> -->
             </div>
             <!-- <div class="row">
-                <div class="col-sm-12 mrT3">
+                <div class="col-sm-12 mr-t3">
                     <div class="button-group">
                         <button class="btn btn-cancel">Cancel</button>
                         <button class="btn btn-success">Save</button>
@@ -250,7 +250,7 @@ <h3>Address {{i+1}}</h3>
 
 
         <!-- bank details visible when sundry credtiors selected , right now is hide -->
-        <tab heading="Bank Details" class="bankDetialsForm" *ngIf="showBankDetail" (selectTab)="tabChanged('bank')">
+        <tab heading="Bank Details" class="bank-details-form" *ngIf="showBankDetail" (selectTab)="tabChanged('bank')">
             <div *ngIf="showBankDetail">
                 <div formArrayName="accountBankDetails">
                     <div class="row" *ngFor="let bank of addAccountForm.get('accountBankDetails')['controls'];let i = index;let f = first; let l = last" [formGroupName]="i">
@@ -290,12 +290,12 @@ <h3>Address {{i+1}}</h3>
             </div>
         </tab>
 
-        <tab heading="Others " class="otherFormWrap " (selectTab)="tabChanged('others')">
+        <tab heading="Others" class="other-form-wrap" (selectTab)="tabChanged('others')">
 
-            <div class="otherForm ">
-                <div class="row ">
-                    <div class="col-sm-6 ">
-                        <div class="form-group ">
+            <div class="other-form">
+                <div class="row">
+                    <div class="col-sm-6">
+                        <div class="form-group">
                             <label>Account Unique Name</label>
                             <input type="text" class="form-control" [control]="addAccountForm.get('uniqueName')" textCaseChangeDirective UniqueNameDirective formControlName="uniqueName" name="accUnqname" />
                         </div>
@@ -334,7 +334,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Group Name ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Move</button>
                     </div>
@@ -346,7 +346,7 @@ <h3>Address {{i+1}}</h3>
                             <input type="text " class="form-control " placeholder="Select account ">
                         </div>
                     </div>
-                    <div class="col-sm-2 pdL0 ">
+                    <div class="col-sm-2 pl-0 ">
                         <label>&nbsp;</label>
                         <button class="btn btn-sky-blue ">Merge</button>
                     </div>
@@ -358,7 +358,7 @@ <h3>Address {{i+1}}</h3>
             <ng-container formArrayName="customFields">
                 <ng-container *ngFor="let item of companyCustomFields; let index = index;let first = first; let last = last" [formGroupName]="index">
                     <ng-container *ngFor="let customFieldsItem of addAccountForm.get('customFields')['controls']; let index = index;">
-                        <div class="row mb-15" *ngIf="item.uniqueName === customFieldsItem.get('uniqueName').value">
+                        <div class="row mr-b15" *ngIf="item.uniqueName === customFieldsItem.get('uniqueName').value">
                             <div class="col-lg-8">
                                 <div class="name-of-field">
                                     <label>{{item.key}} </label>
@@ -366,7 +366,7 @@ <h3>Address {{i+1}}</h3>
                                     <input *ngIf="item.dataType==='NUMERIC'" type="text" name="values{{index}}" formControlName="value" class="form-control" [maxLength]="item.valueLength" decimalDigitsDirective>
                                     <div *ngIf="item.dataType==='BOOLEAN'" class="clearfix">
                                         <span class="d-inline-block">
-                                            <input id="yes{{index}}" class="radio-custom cp ml0" type="radio"
+                                            <input id="yes{{index}}" class="radio-custom cp ml-0" type="radio"
                                                 [checked]="customFieldsItem.get('value').value==='true'"
                                                 (change)="selectedBooleanCustomField('true', index)"
                                                 name="booleanType{{index}}">
@@ -374,7 +374,7 @@ <h3>Address {{i+1}}</h3>
                                         </span>
 
                                         <span class="d-inline-block">
-                                            <input id="no{{index}}" class="radio-custom cp ml0" type="radio"
+                                            <input id="no{{index}}" class="radio-custom cp ml-0" type="radio"
                                                 [checked]="customFieldsItem.get('value').value==='false'"
                                                 (change)="selectedBooleanCustomField('false', index)"
                                                 name="booleanType{{index}}">
@@ -390,14 +390,14 @@ <h3>Address {{i+1}}</h3>
         </tab>
     </tabset>
     <div class="row" *ngIf="!isOtherSelectedTab">
-        <div class="col-sm-12 mrT3">
+        <div class="col-sm-12 mr-t3">
             <div class="button-group">
                 <!-- <button class="btn btn-cancel">Cancel</button>
                         <button type="submit" class="btn btn-success" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid">Save</button> -->
-                <button type="button" *ngIf="showDeleteButton" class="btn btn-danger " (click)="deleteClicked.emit(true)">
+                <button type="button" *ngIf="showDeleteButton" class="btn btn-danger" (click)="deleteClicked.emit(true)">
                     Delete
                 </button>
-                <button (click)="submit()" class="btn btn-primary updateBtnZindex" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid || !(isGstValid$ | async)">Update
+                <button (click)="submit()" class="btn btn-primary update-btn-zindex" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid || !(isGstValid$ | async)">Update
                 </button>
             </div>
         </div>
@@ -408,13 +408,13 @@ <h3>Address {{i+1}}</h3>
         <!-- <div class="col-xs-12 mr-b2 select-box">
             <div class="form-group ">
                 <label>Default discount <span
-                        class="primary_clr"></span></label>
+                        class="primary-color"></span></label>
                 <div class="clearfix">
                     <span>
                         <sh-select class="pull-left" [options]="discountList" [isFilterEnabled]="true" [forceClearReactive]="forceClearDiscount$ | async"  [multiple]="true" [(ngModel)]="selectedDiscounts" [placeholder]="'Select discounts'" style="width: calc(100% - 93px);"></sh-select>
                     </span>
                     <span class="pull-right">
-                        <button  class="btn btn-primary marge-btn"  [disabled]="selectedDiscounts.length===0" (click)="applyDiscount()">Apply</button>
+                        <button  class="btn btn-primary merge-btn"  [disabled]="selectedDiscounts.length===0" (click)="applyDiscount()">Apply</button>
                     </span>
 
                 </div>
@@ -422,20 +422,19 @@ <h3>Address {{i+1}}</h3>
         </div>
     </div> -->
         <div *ngIf="(activeAccount$ | async)" class="form-group">
-            <form name="moveAccountForm" class="clearfix move-to-group " novalidate (submit)="moveAccount()" [formGroup]="moveAccountForm">
+            <form name="moveAccountForm" class="clearfix move-to-group" novalidate (submit)="moveAccount()" [formGroup]="moveAccountForm">
                 <div class="row">
-                    <div class=" col-sm-12 ">
-                        <div class="form-group ">
+                    <div class="col-sm-12">
+                        <div class="form-group">
                             <label>Move to Group</label>
                             <div>
                                 <span>
                                     <sh-select formControlName="moveto" [placeholder]="'Group name'"
                                         [options]="flatGroupsOptions" [customFilter]="customMoveGroupFilter"
-                                        class="pull-left" style="width: calc(100% - 93px); ">
+                                        class="pull-left width-select">
                                         <!--template for move group typeahead-->
                                         <ng-template #optionTemplate let-model="option">
-                                            <a href="javascript:void(0)" class="list-item"
-                                                style="border-bottom:1px solid #ccc;">
+                                            <a href="javascript:void(0)" class="list-item">
                                                 <div class="item">{{ model.label }}</div>
                                                 <div class="item-unique">
                                                     {{ model.value }}
@@ -445,7 +444,7 @@ <h3>Address {{i+1}}</h3>
                                     </sh-select>
                                 </span>
                                 <span class="pull-right">
-                                    <button type="submit" class="btn btn-primary marge-btn"
+                                    <button type="submit" class="btn btn-primary merge-btn"
                                         [disabled]="moveAccountForm.invalid">Move</button>
                                 </span>
                             </div>
@@ -454,20 +453,19 @@ <h3>Address {{i+1}}</h3>
                 </div>
             </form>
         </div>
-        <div class="row ">
-            <div class="col-sm-12 ">
-                <div class="form-group ">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="form-group">
                     <label>Select account to merge with <span
                             class="primary-color">{{(activeAccount$ | async)?.name}}</span></label>
                     <div class="clearfix" #accountSelect2>
                         <span>
-                            <sh-select class="pull-left" [options]="accounts$ | async" [isFilterEnabled]="true"
+                            <sh-select class="pull-left width-select" [options]="accounts$ | async" [isFilterEnabled]="true"
                                 (viewInitEvent)="loadAccountData()" [multiple]="true"
-                                [(ngModel)]="selectedaccountForMerge" [placeholder]="'Select Accounts'"
-                                style="width: calc(100% - 93px);"></sh-select>
+                                [(ngModel)]="selectedaccountForMerge" [placeholder]="'Select Accounts'"></sh-select>
                         </span>
                         <span class="pull-right">
-                            <button type="submit" class="btn btn-primary marge-btn"
+                            <button type="submit" class="btn btn-primary merge-btn"
                                 (click)="mergeAccounts()">Merge</button>
                         </span>
                     </div>
@@ -489,8 +487,8 @@ <h3>Address {{i+1}}</h3>
 
     <!-- commented for later use isDebtorCreditor && isOtherSelectedTab -->
     <div class="form" *ngIf="isDebtorCreditor && isOtherSelectedTab">
-        <div class="mrB2 select-box">
-            <div class="form-group ">
+        <div class="mr-b2 select-box">
+            <div class="form-group">
                 <label>Default Discount <span
                     class="primary-color"></span></label>
                 <div class="clearfix">
@@ -575,14 +573,14 @@ <h3>Address {{i+1}}</h3>
         </div>
     </ng-container>
     <div class="row" *ngIf="isOtherSelectedTab">
-        <div class="col-sm-12 mrT3">
+        <div class="col-sm-12 mr-t3">
             <div class="button-group">
                 <!-- <button class="btn btn-cancel">Cancel</button>
                         <button type="submit" class="btn btn-success" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid">Save</button> -->
                 <button type="button" *ngIf="showDeleteButton" class="btn btn-danger " (click)="deleteClicked.emit(true)">
                     Delete
                 </button>
-                <button (click)="submit()" class="btn btn-primary updateBtnZindex" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid || !(isGstValid$ | async)">Update
+                <button (click)="submit()" class="btn btn-primary update-btn-zindex" [ladda]="createAccountInProcess$ | async" [disabled]="addAccountForm.invalid || !(isGstValid$ | async)">Update
                 </button>
             </div>
         </div>
diff --git a/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.scss b/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.scss
index 4198ea70cba..e52f440f023 100644
--- a/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/account-update-new-details/account-update-new-details.component.scss
@@ -1,13 +1,13 @@
 @import "../../../../../assets/css/color.scss";
 .form-header {
     padding: 20px 15px;
-    background: #1a237e;
-    color: #fff;
+    background: $midnight-blue;
+    color: $white;
 }
 
 .aside-pane-form {
-    background-color: #fff;
-    box-shadow: 0px 3px 6px #0000001a;
+    background-color: $white;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     //  height: 100vh;
     overflow: auto;
@@ -15,10 +15,10 @@
     position: relative;
 }
 
-.aside-pane-conatainer {
+.aside-pane-container {
     padding: 15px;
     font-size: 14px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .aside-pane-form label {
@@ -48,8 +48,8 @@ span.dr-label {
 }
 
 .cr-dr-account span.active {
-    background-color: #5b64c9;
-    color: #fff;
+    background-color: $chetwode-blue;
+    color: $white;
 }
 
 .aside-pane-form .col-sm-4,
@@ -77,7 +77,7 @@ span.dr-label {
     }
 }
 
-form.gstinForm {
+form.gstin-form {
     padding-top: 15px;
 }
 
@@ -92,26 +92,36 @@ form.gstinForm {
 
 .add-address-default h3 {
     font-size: 16px;
-    color: #1c1c1c;
+    color: $nero;
 }
 
-.contactForm,
-.otherFormWrap,
-.bankDetialsForm {
+.contact-form,
+.other-form-wrap,
+.bank-details-form {
     padding-top: 15px;
 }
 
-.otherForm .btn-sky-blue {
+.other-form .btn-sky-blue {
     display: block;
 }
 
-.updateBtnZindex {
+.update-btn-zindex {
     z-index: 0;
 }
 
 .wd100 {
     width: 100% !important;
 }
+
+.width-select{
+    width: calc(100% - 93px);
+}
+
+.move-to-group{
+    .list-item{
+        border-bottom:1px solid $gainsboro;
+    }
+}
 .name-of-field{
     display: flex;
     align-items: center;
@@ -126,3 +136,8 @@ form.gstinForm {
         white-space: normal;
     }
 }
+
+.contact-number-select{
+    width: 60px; 
+    margin-right: 10px;
+} 
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.html b/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.html
index a12489449fc..11a4afe901a 100644
--- a/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.html
@@ -1,17 +1,17 @@
-<div class="accounts-side-bar greyBg wrapAcList" ng-click="$event.stopPropagation()">
-    <div *ngIf="flyAccounts" style="height: 100%" class="wrapAcList" id="grp_acc_wrapper">
-        <div class="pd-1 wrapAcList" *ngIf="(isFlyAccountInProcess$ | async)">
+<div class="accounts-side-bar grey-bg wrap-account-list" ng-click="$event.stopPropagation()">
+    <div *ngIf="flyAccounts" style="height: 100%" class="wrap-account-list" id="grp_acc_wrapper">
+        <div class="pd-1 wrap-account-list" *ngIf="(isFlyAccountInProcess$ | async)">
             Loading Accounts...
         </div>
         <!-- searchbar end -->
-        <div class="pd-l1 pd-r1 mr-b1 wrapAcList"
+        <div class="pd-l1 pd-r1 mr-b1 wrap-account-list"
             *ngIf="(flatAccountWGroupsList)?.length === 0 && showAccountList && !(isFlyAccountInProcess$ | async)">
             <h4 class="list-group-item-heading">Oops, there is no accounts in
                 <strong>selected company</strong>
                 <a (click)="goToManageGroups()">+ add new</a>
             </h4>
         </div>
-        <div class="menu acList wrapAcList">
+        <div class="menu acList wrap-account-list">
             <div class="loader" *ngIf="!showAccountList && ( companyList$ | async ).length > 0">
                 <span></span>
                 <span></span>
@@ -20,26 +20,26 @@ <h4 class="list-group-item-heading">Oops, there is no accounts in
                 <span></span>
             </div>
             <ng-container *ngIf="showAccountList && Items">
-                <!-- <ul class="ul_0 acntAccordion wrapAcList"
+                <!-- <ul class="ul_0 account-accordion wrap-account-list"
                     *vsFor="Items; tagName:'li'; scrollParent:'.ul_0';size:getSize; let _items = vsCollection;let _startIndex = vsStartIndex">
 
                     <ng-container *ngFor="let item of _items;let i = index">
 
-                        <li *ngIf="item.isGroup" class="mainLiAclist parent-Group">
+                        <li *ngIf="item.isGroup" class="main-account-list parent-Group">
                             <div class="title  LIB{{item.UniqueName}}"
                                 (click)="toggleGroup(item,i + _startIndex,$event)"
                                 [ngClass]="{'active' : item.isOpen || item.UniqueName === selectedGroupUname}">
-                                <a class="ellp max250">{{item.Name}} ({{item.UniqueName}})</a>
+                                <a class="text-ellipsis max250">{{item.Name}} ({{item.UniqueName}})</a>
                             </div>
                         </li>
                         <li *ngIf="!item.isGroup" class="inrPrnt cp accountli">
                             <a>
                                 <div class="clearfix" tooltip="{{item.UniqueName}}" container="body">
                                     <strong>
-                                        <span class="ellp max250" (click)="flyAccounts = false" *ngIf="isRouter"
+                                        <span class="text-ellipsis max250" (click)="flyAccounts = false" *ngIf="isRouter"
                                             [routerLink]="['/ledger',item.UniqueName]">{{item.Name}}
                                             ({{item.UniqueName}})</span>
-                                        <span class="ellp max250"
+                                        <span class="text-ellipsis max250"
                                             (mousedown)="flyAccounts = true;onSelectItem.emit(item)" *ngIf="!isRouter"
                                             [innerHTML]="item.Name+' ' + '(' + item.UniqueName + ')'"></span>
                                     </strong>
diff --git a/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.scss b/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.scss
index fe1bbe3e4ce..bf316950961 100644
--- a/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/accounts-side-bar/accounts-side-bar.component.scss
@@ -18,20 +18,20 @@
 
 /* width */
 
-.acntAccordion::-webkit-scrollbar {
+.account-accordion::-webkit-scrollbar {
     width: 10px;
 }
 
 
 /* Track */
 
-.acntAccordion::-webkit-scrollbar-track {
-    background: $white-smoke;
+.account-accordion::-webkit-scrollbar-track {
+    background:  $white-smoke;
 }
 
 
 /* Handle */
 
-.acntAccordion::-webkit-scrollbar-thumb {
-    background: $nobel;
+.account-accordion::-webkit-scrollbar-thumb {
+    background:  $nobel;
 }
diff --git a/apps/web-giddh/src/app/shared/header/components/aside-help-support/aside-help-support.component.scss b/apps/web-giddh/src/app/shared/header/components/aside-help-support/aside-help-support.component.scss
index 6b1e2ed7288..3fbc5ef1a50 100644
--- a/apps/web-giddh/src/app/shared/header/components/aside-help-support/aside-help-support.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/aside-help-support/aside-help-support.component.scss
@@ -145,7 +145,7 @@
 }
 .aside-pane-form {
     background-color: $white;
-    box-shadow: 0px 3px 6px #0000001a;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/shared/header/components/aside-setting/aside-setting.component.scss b/apps/web-giddh/src/app/shared/header/components/aside-setting/aside-setting.component.scss
index 14f2aa9829e..15752b7c00a 100644
--- a/apps/web-giddh/src/app/shared/header/components/aside-setting/aside-setting.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/aside-setting/aside-setting.component.scss
@@ -104,7 +104,7 @@
 }
 .aside-pane-form {
     background-color: $white;
-    box-shadow: 0px 3px 6px #0000001a;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.html b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.html
index 2d903e9c5a6..d8fb3c1f1b4 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.html
@@ -1,28 +1,28 @@
-<div id="share-modal" class=" shareGrp ">
+<div id="share-modal" class="share-grp">
 	<div class="modal-header">
 		<h3 *ngIf="!createBranch">Create New Company</h3>
 		<h3 *ngIf="createBranch">{{isUpdateMode ? 'Update' : 'Create New'}} Branch</h3>
 		<span aria-hidden="true" class="close" data-dismiss="modal"
 			(click)="removeCompanySessionData(); closeModal();">×</span>
 	</div>
-	<div class="modal-body pd0" id="SharePop">
-		<div class="welcome_wrapper">
+	<div class="modal-body p-0" id="SharePop">
+		<div class="welcome-wrapper">
 			<div class="giddh-logo-welcome">
 				<img src="{{imgPath}}assets/images/giddh-big-logo.svg">
 			</div>
-			<div class="welcome_header">
+			<div class="welcome-header">
 				<h1>Welcome {{ this.logedInuser.name}},</h1>
 			</div>
 		</div>
-		<div class="form-group clearfix add-companyDetail pdB5">
+		<div class="form-group clearfix add-company-detail pd-b5">
 			<!--<h3 class="pd-b1">Share with</h3>-->
-			<div class="add_mailer">
+			<div class="add-mailer">
 				<!--create company from-->
 				<form name="form" #companyForm="ngForm" class="clearfix" novalidate="" autocomplete="off">
 					<div class="company-form-body row">
 
 						<div class="col-xs-12 col-sm-12 m-t-50">
-							<div class="input-group form-group dblock m-b-30">
+							<div class="input-group form-group d-block m-b-30">
 								<p *ngIf="!createBranch">Enter your company name to start hassle free accounting with
 									Giddh.</p>
 								<p *ngIf="createBranch && !isUpdateMode">Enter your branch name to start hassle free accounting with
@@ -30,52 +30,51 @@ <h1>Welcome {{ this.logedInuser.name}},</h1>
 								<p *ngIf="createBranch && isUpdateMode">Update your branch name & alias</p>
 							</div>
 						</div>
-						<div class="col-xs-12 col-sm-12 mrB3">
+						<div class="col-xs-12 col-sm-12 mr-b3">
 							<label for="name" class="m-t-40">{{createBranch ? 'Branch' : 'Company'}} Name<sup>*</sup></label>
 							<input name="name" id="name" type="text" required placeholder="Name"
 								[(ngModel)]="company.name" class="form-control" (blur)="makeMeCaptialize(company.name)">
 							<!-- /btn-account -->
 						</div>
 
-						<div class="col-xs-6 col-sm-6 mrB3 ">
+						<div class="col-xs-6 col-sm-6 mr-b3 ">
 							<span>
 								<label for="country" class="d-block">Country<sup>*</sup></label>
 								<sh-select [disabled]="createBranch ? 'disabled' : null"  id="country" [options]="countrySource$ | async" [isFilterEnabled]="true"
-									name="country" [(ngModel)]="company.country" class="pull-left select-caret"
-									[required]='true' (selected)="selectCountry($event)"
-									[defaultValue]="selectedCountry" style="width: 100%">
+									name="country" [(ngModel)]="company.country" class="pull-left select-caret w-100"
+                                [required]='true' [isRequired]="true" (selected)="selectCountry($event)"
+									[defaultValue]="selectedCountry">
 								</sh-select>
 							</span>
 						</div>
-						<div class="col-xs-6 col-sm-6 mrB3 ">
+						<div class="col-xs-6 col-sm-6 mr-b3 ">
 							<label for="">Currency <sup>*</sup></label>
-							<div class="custom-select select-caret pos-rel">
-								<sh-select [disabled]="createBranch ? 'disabled' : null" name="baseCurrency" [options]="currencySource$ | async" required
+							<div class="custom-select select-caret position-relative">
+								<sh-select [disabled]="createBranch ? 'disabled' : null" name="baseCurrency" [options]="currencySource$ | async" required [isRequired]="true"
 									[isFilterEnabled]="true" [(ngModel)]="company.baseCurrency"
 									[defaultValue]="company.baseCurrency"></sh-select>
 							</div>
 						</div>
-						<div *ngIf="!createBranch" class="col-xs-12 col-sm-12 mrB3">
+						<div *ngIf="!createBranch" class="col-xs-12 col-sm-12 mr-b3">
 							<span>
 								<label for="contactNo" class="d-block">Mobile Number<sup>*</sup></label>
-								<div class="d-flex welcome-select ">
-									<sh-select class="pull-left select-caret" required
-										style="width: 85px;margin-right: 28px;" name="phoneCode" [placeholder]="+91"
+								<div class="d-flex welcome-select">
+									<sh-select class="pull-left select-caret phone-code-caret" required [isRequired]="true" name="phoneCode" [placeholder]="+91"
 										[options]="countryPhoneCode" [(ngModel)]="company.phoneCode"
 										[defaultValue]="company.phoneCode">
 									</sh-select>
-									<input type="text" pattern="[0-9]*" class="form-control pull-right mrR1" required
+									<input type="text" pattern="[0-9]*" class="form-control pull-right mr-r1" required
 										placeholder="9998899988" id="contactNo" autocomplete="off"
-										(blur)="isValidMobileNumber(mobileNoEl)" [(ngModel)]="company.contactNo"
+										(blur)="isValidMobileNumber()" [(ngModel)]="company.contactNo"
 										name="contactNo" #mobileNoEl />
 								</div>
 							</span>
                         </div>
-                        <div *ngIf="createBranch" class="col-xs-12 mrB3">
+                        <div *ngIf="createBranch" class="col-md-12 mr-b3">
 							<span>
 								<label for="aliasName" class="d-block">Alias<sup>*</sup></label>
 								<div class="d-flex welcome-select ">
-									<input type="text" class="form-control mrR1" required
+									<input type="text" class="form-control mr-r1" required
 										id="alias-name" autocomplete="off"
 										[(ngModel)]="company.nameAlias"
 										name="aliasName" />
@@ -83,7 +82,7 @@ <h1>Welcome {{ this.logedInuser.name}},</h1>
 							</span>
                         </div>
 						<div class="col-xs-12 col-sm-12 mr-t1">
-							<button class="btn btn-sky-blue mr-l1" style="margin-left: 0 !important;" type="submit"
+							<button class="btn btn-sky-blue ml-0" type="submit"
 								(click)="createCompany(null)" [disabled]="companyForm.invalid"
 								[ladda]="isCompanyCreationInProcess$ | async">{{isUpdateMode ? 'Update' : 'Next'}}
 							</button>
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.scss b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.scss
index 1aef1b18f7b..32b6b229477 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.scss
@@ -2,23 +2,23 @@
 
 @import "../../../../../assets/css/color.scss";
 .modal-body label {
-    color: #707070;
+    color: $gray;
     margin-bottom: 5px;
 }
 
 label .required {
     position: relative;
     top: 0px;
-    color: #cf0606;
+    color: $red;
 }
 
 .form-control {
-    color: #707070;
+    color: $gray;
 }
 
 .modal-body p {
     font-size: 14px;
-    color: #b3b3b3;
+    color: $silver;
     text-align: center;
     margin-left: -28px;
     margin-right: -28px;
@@ -30,26 +30,26 @@ label .required {
     display: block;
 }
 
-.welcome_wrapper {
+.welcome-wrapper {
     padding: 25px 0;
 }
 
-.welcome_header:after {
+.welcome-header:after {
     display: none;
 }
 
-.add-companyDetail {
-    background-color: #f7f8fa;
+.add-company-detail {
+    background-color: $alice-blue-light;
     margin-bottom: 0 !important;
 }
 
-.welcome_header h1 {
+.welcome-header h1 {
     font-size: 30px;
     font-family: "opensans-regular";
     color: $midnight-blue;
 }
 
-.add-companyDetail p {
+.add-company-detail p {
     max-width: 300px;
     margin: 0 auto !important;
     display: block;
@@ -61,22 +61,28 @@ label .required {
     width: 100%;
 }
 
-.add-companyDetail {
-    background-color: #f7f8fa;
+.add-company-detail {
+    background-color: $alice-blue-light;
 }
 #share-modal .btn-sky-blue{
     width: 100%;
 }
+
+.phone-code-caret{
+    width: 85px;
+    margin-right: 28px;
+}
+
 @media (max-width:767px) {
     .giddh-logo-welcome img {
         max-width: 150px;
         margin: 30px auto;
         display: block;
     }
-    .welcome_header h1 {
+    .welcome-header h1 {
         font-size: 20px !important;
     }
-    .welcome_wrapper {
+    .welcome-wrapper {
         padding: 15px 0;
     }
 }
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.ts b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.ts
index fb6acbc9fba..a63f5da7763 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.ts
+++ b/apps/web-giddh/src/app/shared/header/components/company-add-new-ui/company-add-new-ui.component.ts
@@ -1,5 +1,5 @@
 import {take, takeUntil, distinctUntilChanged} from 'rxjs/operators';
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap/modal';
 import {VerifyMobileActions} from '../../../../actions/verifyMobile.actions';
 import {CompanyActions} from '../../../../actions/company.actions';
@@ -38,6 +38,8 @@ export class CompanyAddNewUiComponent implements OnInit, OnDestroy {
     @Output() public closeCompanyModalAndShowAddManege: EventEmitter<string> = new EventEmitter();
     @ViewChild('logoutModal', {static: true}) public logoutModal: ModalDirective;
     @ViewChild('companyForm', {static: true}) public companyForm: NgForm;
+    /** Mobile number instance */
+    @ViewChild('mobileNoEl', {static: false}) public mobileNoEl: ElementRef;
     @Input() public createBranch: boolean = false;
     /** True if update mode is enabled */
     @Input() public isUpdateMode: boolean = false;
@@ -312,9 +314,9 @@ export class CompanyAddNewUiComponent implements OnInit, OnDestroy {
         }
     }
 
-    public isValidMobileNumber(ele: HTMLInputElement) {
-        if (ele.value) {
-            this.checkMobileNo(ele);
+    public isValidMobileNumber() {
+        if (this.mobileNoEl?.nativeElement?.value) {
+            this.checkMobileNo(this.mobileNoEl.nativeElement);
         }
     }
 
@@ -329,6 +331,7 @@ export class CompanyAddNewUiComponent implements OnInit, OnDestroy {
                     this.isMobileNumberValid = false;
                     this._toaster.errorToast('Invalid Contact number');
                     ele.classList.add('error-box');
+                    this.companyForm.form.controls['contactNo'].setErrors({invalid: true});
                 }
             } else {
                 // branch on-boarding is carried out where no mobile field is there
@@ -338,6 +341,7 @@ export class CompanyAddNewUiComponent implements OnInit, OnDestroy {
             this.isMobileNumberValid = false;
             this._toaster.errorToast('Invalid Contact number');
             ele.classList.add('error-box');
+            this.companyForm.form.controls['contactNo'].setErrors({invalid: true});
         }
     }
 
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.html b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.html
index 54b07797024..c0ff22126f0 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.html
@@ -1,21 +1,21 @@
-<div id="share-modal" class=" shareGrp ">
+<div id="share-modal" class="share-grp">
     <div class="modal-header">
         <h3>Create New Company</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeModal()">×</span>
     </div>
-    <div class="modal-body pd0" id="SharePop">
-        <div class="welcome_wrapper">
+    <div class="modal-body p-0" id="SharePop">
+        <div class="welcome-wrapper">
             <div class="giddh-logo-welcome">
                 <img src="{{imgPath}}assets/images/giddh-big-logo.svg">
             </div>
-            <div class="welcome_header">
+            <div class="welcome-header">
                 <h1>Welcome {{ this.logedInusers.name}},</h1>
             </div>
         </div>
 
-        <div class="form-group clearfix add-companyDetail pdB5">
+        <div class="form-group clearfix add-company-detail pd-b5">
             <!--<h3 class="pd-b1">Share with</h3>-->
-            <div class="add_mailer">
+            <div class="add-mailer">
                 <!--create company from-->
                 <form name="form" #createCompanyForm="ngForm" class="clearfix" novalidate="" class=""
                     autocomplete="off">
@@ -26,7 +26,7 @@ <h1>Welcome {{ this.logedInusers.name}},</h1>
                                 <p>Enter your new Branch company name to start hassle free accounting with Giddh.</p>
                             </div>
                         </div>
-                        <div class="col-xs-12 col-sm-12 mrB3">
+                        <div class="col-xs-12 col-sm-12 mr-b3">
                             <label for="name" class="m-t-40">Company Name<sup>*</sup></label>
                             <input #name="ngModel" id="name" type="text"
                                 [ngClass]="{'hasError': name.invalid && name.touched && name.dirty, 'has-success':name.valid}"
@@ -38,25 +38,25 @@ <h1>Welcome {{ this.logedInusers.name}},</h1>
                             </small>
                         </div>
 
-                        <div class="col-xs-6 col-sm-6 mrB3 ">
+                        <div class="col-xs-6 col-sm-6 mr-b3 ">
                             <span>
                                 <label for="country" class="d-block">Country<sup>*</sup></label>
                                 <sh-select id="country" [options]="countrySource" [isFilterEnabled]="true"
                                     name="country" [(ngModel)]="company.country" class="pull-left select-caret w-100"
-                                    [required]='true'>
+                                    [required]='true' [isRequired]="true">
                                 </sh-select>
                             </span>
 
                         </div>
-                        <div class="col-xs-6 col-sm-6 mrB3 ">
+                        <div class="col-xs-6 col-sm-6 mr-b3 ">
                             <label for="">Currency <sup>*</sup></label>
-                            <div class="custom-select select-caret pos-rel">
-                                <sh-select name="baseCurrency" [options]="currencySource$ | async" required
+                            <div class="custom-select select-caret position-relative">
+                                <sh-select name="baseCurrency" [options]="currencySource$ | async" required [isRequired]="true"
                                     [isFilterEnabled]="true" [(ngModel)]="company.baseCurrency"></sh-select>
                             </div>
                         </div>
 
-                        <div class="col-xs-6 col-sm-6 mrB3">
+                        <div class="col-xs-6 col-sm-6 mr-b3">
                             <label for="nameAlias">Unique Name</label>
                             <input #nameAlias="ngModel" type="text" autocomplete="off"
                                 [ngClass]="{'hasError': nameAlias.invalid && nameAlias.touched && nameAlias.dirty, 'has-success':nameAlias.valid}"
@@ -65,7 +65,7 @@ <h1>Welcome {{ this.logedInusers.name}},</h1>
 
                         </div>
                         <!-- Commented for now can be replaced with new dynamic search sh-select
-                        <div class="col-xs-6 col-sm-6 mrB3">
+                        <div class="col-xs-6 col-sm-6 mr-b3">
                             <label for="city">City <sup>*</sup></label>
                             <input [ngbTypeahead]="dataSource" type="text" autocomplete="off"
                                 (keyup)="onChangeCityName()" [(ngModel)]="company.city" name="city"
@@ -77,15 +77,14 @@ <h1>Welcome {{ this.logedInusers.name}},</h1>
                             </ng-template>
                         </div> -->
 
-                        <div class="col-xs-12 col-sm-12 mrB3">
+                        <div class="col-xs-12 col-sm-12 mr-b3">
                             <span>
                                 <label for="contactNo" class="d-block">Mobile Number<sup>*</sup></label>
                                 <div class="d-flex welcome-select ">
-                                    <sh-select class="pull-left select-caret" required
-                                        style="width: 85px;margin-right: 28px;" name="phoneCode" [placeholder]="+91"
+                                    <sh-select class="pull-left select-caret phone-code-caret" required [isRequired]="true" name="phoneCode" [placeholder]="+91"
                                         [options]="countryPhoneCode" [(ngModel)]="company.phoneCode">
                                     </sh-select>
-                                    <input type="text" pattern="[0-9]*" class="form-control pull-right mrR1" required
+                                    <input type="text" pattern="[0-9]*" class="form-control pull-right mr-r1" required
                                         placeholder="9998899988" id="contactNo" autocomplete="off"
                                         [(ngModel)]="company.contactNo" name="contactNo" #mobileNoEl />
                                 </div>
@@ -125,7 +124,7 @@ <h1>Welcome {{ this.logedInusers.name}},</h1>
             <h3>Create New Branch</h3>
             <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeModal()">×</span>
         </div>
-        <div class="welcome_header">
+        <div class="welcome-header">
             <h1>WELCOME!</h1>
         </div>
         <div class="modal-body noPad">
@@ -142,7 +141,7 @@ <h1>WELCOME!</h1>
 
                     <div class="wizard-step">
 
-                        <form #createCompanyForm="ngForm" name="createCompForm" novalidate id="createCompForm" class="mr-t mr-b1" (submit)="createCompany()">
+                        <form #createCompanyForm="ngForm" name="createCompForm" novalidate id="createCompForm" class="mr-t05 mr-b1" (submit)="createCompany()">
                             <div>
                                 <div class="input-group form-group dblock m-b-30">
                                     <p>Enter your new Branch company name to start hassle free accounting with Giddh.</p>
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.css b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.scss
similarity index 77%
rename from apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.css
rename to apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.scss
index a34d5ab3970..9d82ec51cdb 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.css
+++ b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.scss
@@ -1,3 +1,5 @@
+@import "../../../../../assets/css/color.scss";
+
 /* ::ng-deep .dropdown-menu {
     position: absolute;
     top: 100%;
@@ -9,7 +11,7 @@
     padding: 0.5rem 0;
     margin: 0.125rem 0 0;
     font-size: 1rem;
-    color: #292b2c;
+    color: $night-rider;
     text-align: left;
     list-style: none;
     background-color: #fff;
@@ -23,7 +25,7 @@
     height: 1px;
     margin: 0.5rem 0;
     overflow: hidden;
-    background-color: #eceeef;
+    background-color: $whisper-light;
 }
 
 ::ng-deep .dropdown-item {
@@ -32,7 +34,7 @@
     padding: 3px 7px;
     clear: both;
     font-weight: normal;
-    color: #292b2c;
+    color: $night-rider;
     text-align: inherit;
     white-space: nowrap;
     background: none;
@@ -42,35 +44,35 @@
 
 ::ng-deep .dropdown-item:focus,
 .dropdown-item:hover {
-    color: #1d1e1f;
+    color: $night-rider;
     text-decoration: none;
-    background-color: #f7f7f9;
+    background-color: $white-smoke;
 }
 
 ::ng-deep .dropdown-item.active,
 .dropdown-item:active {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 ::ng-deep .dropdown-item.disabled,
 .dropdown-item:disabled {
-    color: #636c72;
+    color: $dark-gray;
     cursor: not-allowed;
     background-color: transparent;
 }
 
 ::ng-deep .dropdown-item.active,
 .dropdown-item:active {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 .hasError {
-    border: 1px solid red;
+    border: 1px solid $red;
 }
 
 #createCompForm p {
     font-size: 14px;
-    color: #b3b3b3;
+    color: $silver;
     text-align: center;
     margin-left: -28px;
     margin-right: -28px;
@@ -88,7 +90,7 @@
     display: block;
 }
 
-.add-companyDetail p {
+.add-company-detail p {
     max-width: 300px;
     margin: 0 auto !important;
     display: block;
@@ -99,6 +101,11 @@
 #share-modal .btn.btn-sky-blue {
     width: 100%;
 }
-.add-companyDetail {
-    background-color: #f7f8fa;
+.add-company-detail {
+    background-color: $alice-blue-light;
 }
+
+.phone-code-caret{
+    width: 85px;
+    margin-right: 28px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.ts b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.ts
index cbdf221e62d..891dd10fcfb 100644
--- a/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.ts
+++ b/apps/web-giddh/src/app/shared/header/components/company-add/company-add.component.ts
@@ -24,7 +24,7 @@ import {GeneralService} from '../../../../services/general.service';
 @Component({
     selector: 'company-add',
     templateUrl: './company-add.component.html',
-    styleUrls: ['./company-add.component.css']
+    styleUrls: ['./company-add.component.scss']
 })
 export class CompanyAddComponent implements OnInit, OnDestroy {
     @ViewChild('wizard', {static: true}) public wizard: WizardComponent;
diff --git a/apps/web-giddh/src/app/shared/header/components/group-export-ledger-modal/export-group-ledger.component.html b/apps/web-giddh/src/app/shared/header/components/group-export-ledger-modal/export-group-ledger.component.html
index c792bd7fdde..73135469a9c 100644
--- a/apps/web-giddh/src/app/shared/header/components/group-export-ledger-modal/export-group-ledger.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/group-export-ledger-modal/export-group-ledger.component.html
@@ -1,12 +1,12 @@
-<div id="exportModal" class="">
+<div id="exportModal">
     <div class="modal-header">
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeExportGroupLedgerModal.emit('close')"
             aria-label="Close">×</span>
         <h3>Export Group Ledger</h3>
     </div>
-    <div class="modal-body mrB4" id="export-body">
-        <form name="addShareEmailForm" novalidate class="" autocomplete="off">
-            <div class="pdB3 clearfix">
+    <div class="modal-body mr-b4" id="export-body">
+        <form name="addShareEmailForm" novalidate autocomplete="off">
+            <div class="pd-b3 clearfix">
                 <div class="form-inline">
                     <div class="form-group">
                         <label class="w100 justify-content-start">Date range: </label>
@@ -17,57 +17,57 @@ <h3>Export Group Ledger</h3>
                     </div>
                 </div>
             </div>
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100">Type: </label>
 
-                <span class="pd0 mrR3 w100">
-                    <input id="mini" class="radio-custom cp ml0" type="radio" name="emailTypeSelected"
+                <span class="p-0 mr-r3 w100">
+                    <input id="mini" class="radio-custom cp ml-0" type="radio" name="emailTypeSelected"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeMini">
                     <label for="mini" class="radio-custom-label">Mini</label>
                 </span>
 
-                <span class="pd0 mrR3 w100">
-                    <input id="detailed" class="radio-custom cp ml0" type="radio" name="emailTypeSelected"
+                <span class="p-0 mr-r3 w100">
+                    <input id="detailed" class="radio-custom cp ml-0" type="radio" name="emailTypeSelected"
                         [(ngModel)]="emailTypeSelected" [value]="emailTypeDetail">
                     <label for="detailed" class="radio-custom-label">Detailed</label>
                 </span>
 
 
             </div>
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100">Export As: </label>
 
 
-                <span class="pd0 mrR3 w100">
-                    <input id="pdf" class="radio-custom cp ml0" type="radio" name="fileType" [(ngModel)]="fileType"
+                <span class="p-0 mr-r3 w100">
+                    <input id="pdf" class="radio-custom cp ml-0" type="radio" name="fileType" [(ngModel)]="fileType"
                         [value]="'pdf'">
                     <label for="pdf" class="radio-custom-label">PDF</label>
                 </span>
 
-                <span class="pd0 mrR3 w100">
-                    <input id="excel" class="radio-custom cp ml0" type="radio" name="fileType" [(ngModel)]="fileType"
+                <span class="p-0 mr-r3 w100">
+                    <input id="excel" class="radio-custom cp ml-0" type="radio" name="fileType" [(ngModel)]="fileType"
                         [value]="'xls'">
                     <label for="excel" class="radio-custom-label">Excel</label>
                 </span>
 
             </div>
-            <div class="pdB2 clearfix">
+            <div class="pd-b2 clearfix">
                 <label class="w100">Order: </label>
 
-                <span class="pd0 mrR3">
-                    <input id="ascending" class="radio-custom cp ml0" type="radio" name="order" [(ngModel)]="order"
+                <span class="p-0 mr-r3">
+                    <input id="ascending" class="radio-custom cp ml-0" type="radio" name="order" [(ngModel)]="order"
                         [value]="'asc'">
                     <label for="ascending" class="radio-custom-label">Ascending</label>
                 </span>
 
-                <span class="pd0 mrR3">
-                    <input id="descending" class="radio-custom cp ml0" type="radio" name="order" [(ngModel)]="order"
+                <span class="p-0 mr-r3">
+                    <input id="descending" class="radio-custom cp ml-0" type="radio" name="order" [(ngModel)]="order"
                         [value]="'desc'">
                     <label for="descending" class="radio-custom-label">Descending</label>
                 </span>
 
             </div>
-            <button class="btn-success btn" style="min-width:100px;" (click)="exportLedger()">Export</button>
+            <button class="btn-success btn min-width-100" (click)="exportLedger()">Export</button>
         </form>
     </div>
 </div>
diff --git a/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.html b/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.html
index 06c4c9c70fa..edabb551688 100644
--- a/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.html
@@ -14,7 +14,7 @@
         <div class="row">
             <!-- <div class="form-group col-xs-6"  *ngIf=" uniqueName === 'currentassets' || uniqueName==='currentliabilities' " >
 
-        <div style="max-width:130px" class="pItem text-right" (click)="$event.stopPropagation()"
+        <div style="max-width:130px" class="item-padding text-right" (click)="$event.stopPropagation()"
               (mouseenter)="hideTax()">
             <ledger-discount #discount [discountAccountsDetails]="currentTxn.discounts"
                              [ledgerAmount]="currentTxn.amount"
@@ -69,7 +69,7 @@
                 [isFilterEnabled]="true" class="pull-left move-group-form">
                 <!--template for move group typeahead [customFilter]="customMoveGroupFilter"-->
                 <ng-template #optionTemplate let-option="option">
-                    <a href="javascript:void(0)" class="list-item" style="border-bottom:1px solid #e0e0e0;">
+                    <a href="javascript:void(0)" class="list-item">
                         <div class="item">{{ option.label }}</div>
                         <div class="item-unique">{{ option.value }}</div>
                     </a>
@@ -87,7 +87,7 @@
 <!-- Taxes collapse -->
 <div class="clearfix tax-operation horizontal-form manage-group-account-form" *ngIf="isTaxableGroup$ | async">
     <div class="col-xs-12 col-sm-12">
-        <div class="form-group toggle-btn mrB">
+        <div class="form-group toggle-btn mr-b05">
             <label class="cp" (click)="showTaxes = !showTaxes; taxHierarchy()">
                 <i class="cp collapse-icons" aria-hidden="true"
                     [ngClass]="{'icon-minus': showTaxes, 'icon-plus': !showTaxes}"></i>Taxes
@@ -106,7 +106,7 @@
                     <div class="input-group">
                         <sh-select formControlName="taxes" class="all-taxes" [placeholder]="'Select Tax'" (selected)="taxesSelected($event);" [options]="companyTaxDropDown" [multiple]="true">
                         </sh-select>
-                        <span class="input-group-btn pdL2"> <button type="submit" [disabled]="(isTaxesSaveDisable$ | async)"
+                        <span class="input-group-btn pd-l2"> <button type="submit" [disabled]="(isTaxesSaveDisable$ | async)"
                                 class="btn btn-success">Save</button></span>
                     </div>
                 </div>
@@ -134,7 +134,7 @@
 <!-- commented for later use isDebtorCreditorGroups -->
 <div class="horizontal-form" *ngIf="isDebtorCreditorGroups">
     <div class="mb-2 select-box container-fluid mt-1">
-        <div class="form-group ">
+        <div class="form-group">
             <label>Default Discounts <span
                         class="primary-color"></span></label>
             <div class="clearfix">
@@ -142,7 +142,7 @@
                         <sh-select class="pull-left calc-width" [options]="discountList" [isFilterEnabled]="true" [forceClearReactive]="forceClearDiscount$ | async"  [multiple]="true" (selected)="discountSelected()" [(ngModel)]="selectedDiscounts" placeholder="Select discounts"></sh-select>
                     </span>
                 <span class="pull-right">
-                        <button  class="btn btn-primary mrgeBtn"  [disabled]="(isDiscountSaveDisable$ | async)" (click)="applyDiscounts()">Apply</button>
+                        <button  class="btn btn-primary merge-btn"  [disabled]="(isDiscountSaveDisable$ | async)" (click)="applyDiscounts()">Apply</button>
                     </span>
             </div>
         </div>
diff --git a/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.scss b/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.scss
index 88197781da7..164239f775e 100644
--- a/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/group-update/group-update.component.scss
@@ -1,6 +1,6 @@
 @import '../../../../../assets/css/color.scss';
 
-.form-group .pItem.text-right {
+.form-group .item-padding.text-right {
     max-width: 100% !important;
 }
 .grp-list li a.list-item {
@@ -10,10 +10,10 @@
     max-width: 660px !important;
     width: 100% !important;
 }
-.form-group .pItem .my-dropdown-menu {
+.form-group .item-padding .my-dropdown-menu {
     width: 100% !important;
 }
-.marge-btn {
+.merge-btn {
     padding: 8px 16px;
 }
 .move-group-form{
@@ -22,6 +22,9 @@
 .all-taxes{
   width: calc(100% - 95px);
 }
+.move-group-form .list-item{
+    border-bottom:1px solid $gainsboro;
+}
 .collapse-icons{
     font-size: 10px;
     border: 1px solid $chetwode-blue;
diff --git a/apps/web-giddh/src/app/shared/header/components/new-group-account-sidebar/groups-account-sidebar.component.ts b/apps/web-giddh/src/app/shared/header/components/new-group-account-sidebar/groups-account-sidebar.component.ts
index a3cc01857e6..42a50e4d1a2 100644
--- a/apps/web-giddh/src/app/shared/header/components/new-group-account-sidebar/groups-account-sidebar.component.ts
+++ b/apps/web-giddh/src/app/shared/header/components/new-group-account-sidebar/groups-account-sidebar.component.ts
@@ -253,7 +253,7 @@ export class GroupsAccountSidebarComponent implements OnInit, OnChanges, OnDestr
         this.store.pipe(select(state => state.groupwithaccounts.activeGroup), take(1)).subscribe(a => activeGroup = a);
 
         if (this.isSearchingGroups) {
-            if (grps.length > 0) {
+            if (grps && grps.length > 0) {
                 let newCOL = new ColumnGroupsAccountVM(null);
                 let allGrps = [];
                 let allAccount = [];
diff --git a/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.html b/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.html
index 136e822f67b..993f538cd3a 100644
--- a/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.html
@@ -1,15 +1,15 @@
-<div id="getGroupModal" class="full-screen-modal getGroupModal manageGroupAcc" #myModel keyboardShortcut="esc" (onShortcutPress)="closePopupEvent()" (click)="keyupInitialized = true">
+<div id="getGroupModal" class="full-screen-modal get-group-modal manage-group-acc" #myModel keyboardShortcut="esc" (onShortcutPress)="closePopupEvent()" (click)="keyupInitialized = true">
 
     <!-- start header -->
     <div class="modal-header" #header>
         <span aria-hidden="true" class="close" [style.line-height.px]="64" [style.height.px]="64" data-dismiss="modal" (click)="closePopupEvent()">×</span>
         <!-- <i class="icon-cross text-right close_modal" data-dismiss="modal" (click)="()" aria-label="Close" aria-hidden="true"></i> -->
         <span class="row mr-0 ml-0">
-            <h3 class="modal-title bg pdT">Manage Groups &amp; Accounts</h3>
+            <h3 class="modal-title bg pd-t05">Manage Groups &amp; Accounts</h3>
         </span>
-        <div class="pull-right mrR3 searchBarWrapper">
+        <div class="pull-right mr-r3 search-bar-wrapper">
             <div class="form-inline">
-                <div class="form-group searchBar">
+                <div class="form-group search-bar">
                     <input type="text" name="grpSrch" #grpSrch id="grpSrch" [(ngModel)]="searchString" (keyup)="searchGroups(grpSrch.value)" class="form-control" placeholder="Search accounts" trial-accordion="search" [style.width.px]="260" />
                     <a href="javascript:void(0);" class="pos-abs btn-link" (click)="resetGroupSearchString()" *ngIf="grpSrch.value">Clear</a>
 
@@ -20,19 +20,19 @@ <h3 class="modal-title bg pdT">Manage Groups &amp; Accounts</h3>
     </div>
     <!-- end header -->
 
-    <div class="modal-body pd0">
+    <div class="modal-body p-0">
         <tabset class="custom-tabs master-custom-tabs">
             <tab heading="Master" id="tab1">
                 <div class="clearfix">
-                    <div class="grp-col pd0 " style="max-width:58.333%;" [ngStyle]="{'height':((myModelRect? myModelRect.height:0)-(headerRect?(headerRect.height):0))+'px'}">
+                    <div class="grp-col p-0" [ngStyle]="{'height':((myModelRect? myModelRect.height:0)-(headerRect?(headerRect.height):0))+'px'}">
                         <!-- <perfect-scrollbar> -->
                         <div class="search-loading" *ngIf="(searchLoad | async)">
-                            <div class="vcenter">
+                            <div class="vertical-center">
                                 <span class="spinner small"></span> Loading…
                             </div>
                         </div>
                         <div class="search-loading no-result" *ngIf="!(searchLoad | async) && !(groupList$ | async)?.length">
-                            <div class="vcenter">
+                            <div class="vertical-center">
                                 <h1>No Result Found</h1>
                             </div>
                         </div>
@@ -50,7 +50,7 @@ <h1>No Result Found</h1>
                         <!-- </perfect-scrollbar> -->
                     </div>
                     <!-- middle body -->
-                    <div class="form-box form-bg hieghtInVH">
+                    <div class="form-box form-bg height-in-vh">
                         <account-operations [columnsRef]="currentColumns" [height]="((myModelRect? myModelRect.height:0)-(headerRect?(headerRect.height):0))" [breadcrumbPath]="breadcrumbPath" [breadcrumbUniquePath]="breadcrumbUniquePath" #form>
                         </account-operations>
                     </div>
@@ -65,7 +65,7 @@ <h1>No Result Found</h1>
                         <form [formGroup]="customFieldForm">
                             <ng-container formArrayName="customField">
                                 <ng-container *ngFor="let item of customFieldForm.get('customField')['controls']; let index=index;let first = first; let last = last">
-                                    <div class="row mb-15" [formGroupName]="index">
+                                    <div class="row mr-b15" [formGroupName]="index">
                                         <div class="col-lg-3 col-sm-3 col-xs-12">
                                             <label *ngIf="first || isMobileScreen">Name</label>
                                             <input type="text" class="form-control" placeholder="Enter custom field name" [maxlength]="50" (blur)="checkValidation('name', index)" formControlName="key" name="key" autocomplete="off" [attr.disabled]="item.get('uniqueName').value && isEnabledIndex!==index ?'': null">
@@ -118,7 +118,7 @@ <h1>No Result Found</h1>
                     </ng-container>
                 </div>
                 <div class="search-loading" *ngIf="isGetCustomInProgress">
-                    <div class="vcenter">
+                    <div class="vertical-center">
                         <span class="spinner small"></span> Loading…
                     </div>
                 </div>
diff --git a/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.scss b/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.scss
index 687ac1483c8..a1ee1c5e692 100644
--- a/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/new-manage-groups-accounts/manage-groups-accounts.component.scss
@@ -1,4 +1,8 @@
 @import '../../../../../assets/css/color.scss';
+
+.modal-body .grp-col{
+    max-width:58.333%;
+}
 .custom-filed-list-wrapper {
     padding: 15px;
     height: 768px;
@@ -23,6 +27,10 @@
     }
 }
 
+.height-in-vh{
+    height: calc(100vh - 70px);
+}
+
 @media(max-height:768px) {
     .custom-filed-list-wrapper {
         height: 550px;
@@ -30,10 +38,10 @@
     }
 }
 @media (max-width: 767px) {
-    .searchAccount {
+    .search-account {
         float: none !important;
     }
-    .searchBar .form-control {
+    .search-bar .form-control {
         position: relative;
         top: 0;
     }
@@ -42,25 +50,21 @@
     }
 }
 
-.hieghtInVH {
-    height: calc(100vh - 70px);
-}
-
 @media (max-width: 575px) {
-    .manageGroupAcc .col-xs-6 {
+    .manage-group-acc .col-xs-6 {
         width: 100%;
         margin-bottom: 5px;
     }
-    .manageGroupAcc .searchBarWrapper {
+    .manage-group-acc .search-bar-wrapper {
         float: none !important;
     }
-    .form-group.searchBar {
+    .form-group.search-bar {
         margin-bottom: 0;
     }
-    .manageGroupAcc .modal-header {
+    .manage-group-acc .modal-header {
         padding: 0 15px 10px;
     }
-    .manageGroupAcc .modal-title {
+    .manage-group-acc .modal-title {
         font-size: 16px !important;
     }
 }
diff --git a/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.html b/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.html
index 7a677bfcb8a..bc574e28143 100644
--- a/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.html
@@ -1,4 +1,4 @@
-<div id="share-modal" class="pdB4 shareGrp">
+<div id="share-modal" class="pd-b4 share-grp">
     <div class="modal-header">
         <h3>Share Account</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeModal()">×</span>
@@ -6,11 +6,11 @@ <h3>Share Account</h3>
     <div class="modal-body" id="SharePop">
         <div class="form-group">
             <h3 class="pd-b1">Share with</h3>
-            <div class="add_mailer">
+            <div class="add-mailer">
 
                 <!--share account from-->
                 <form name="shareGroupForm" #shareAccountForm="ngForm" novalidate="" class="form-inline clearfix" autocomplete="off">
-                    <div class="input-group form-group col-xs-12">
+                    <div class="input-group form-group w-100">
                         <input name="userEmail" type="email" [(ngModel)]="email" required placeholder="Email ID" class="form-control" [pattern]="giddhEmailRegex">
                         <div class="input-group-btn mr-l1">
                             <select name="selectedPermission" class="form-control selected-permission" [(ngModel)]="selectedPermission" required>
@@ -20,7 +20,7 @@ <h3 class="pd-b1">Share with</h3>
                                     {{permission.name}}
                                 </option>
                             </select>
-                            <button class="btn btn-success mr-l1 btn-share" type="submit" [disabled]="shareAccountForm.invalid" (click)="shareAccount()">Share
+                            <button class="btn btn-success btn-share ml-0" type="submit" [disabled]="shareAccountForm.invalid" (click)="shareAccount()">Share
                             </button>
                         </div>
                         <!-- /btn-account -->
@@ -28,25 +28,25 @@ <h3 class="pd-b1">Share with</h3>
                 </form>
 
                 <!--shared with array-->
-                <div class="col-xs-12 pd-t1" *ngIf="(activeAccountSharedWith$ | async)?.length">
-                    <div class="row">
-                        <ul class="shared_list group-shared-list">
+                <div class="pd-t1" *ngIf="(activeAccountSharedWith$ | async)?.length">
+                    <div>
+                        <ul class="shared-list group-shared-list">
                             <li *ngFor="let val of (activeAccountSharedWith$ | async); let i = index">
                                 <div class="user-name-email">
-                                    <i class="icon-user-black pdR1"></i>
+                                    <i class="icon-user-black pd-r1"></i>
                                     <span class="user-email">
                                         <small *ngIf="val.emailId!==val.userName">{{val.userName}}</small>
                                         <small>{{ val.emailId }}</small>
                                     </span>
                                 </div>
-                                <div class="custom-select pos-rel">
+                                <div class="custom-select position-relative">
                                     <select name="selectedPermission_{{i}}" class="form-control cp" (change)="updatePermission(val, $event)">
                                         <option [selected]="val.roleUniqueName === permission.uniqueName"
                                             [value]="permission.uniqueName"
                                             *ngFor="let permission of allPermissions$ | async">{{permission.name}}
                                         </option>
                                     </select>
-                                    <span class="select_drop"><i class="fa fa-caret-down"></i></span>
+                                    <span class="select-drop"><i class="fa fa-caret-down"></i></span>
                                 </div>
                                 <span class="delete-icon pull-right">
 
diff --git a/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.scss b/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.scss
index 1aaaccc4e9f..1725ecd9bc0 100644
--- a/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/share-account-modal/share-account-modal.component.scss
@@ -7,24 +7,27 @@
     margin-top: 15px;
     padding-top: 20px;
     li {
-        border-bottom: none;
         display: flex;
         width: 100%;
         justify-content: space-between;
         text-align: left;
         align-items: center;
         margin-bottom: 10px;
+        border-bottom: none !important;
     }
     .custom-select {
         width: 40%;
+        border: 1px solid $gainsboro !important;
         select.form-control {
-            border: 1px solid $gainsboro !important;
             padding: 7px !important;
             display: block;
             min-width: 200px;
             margin: 0 !important;
             width: 100%;
-            padding-right: 25px !important;
+            padding-right: 0px !important;
+        }
+        .select-drop i {
+            background: $white;
         }
     }
     .delete-icon {
@@ -41,7 +44,7 @@
     }
     .user-name-email {
         width: 40%;
-        color: $extra-dark-gray;
+        color: $night-rider !important;
         display: flex;
         white-space: normal;
         word-break: break-all;
@@ -61,8 +64,10 @@
     }
 }
 
-.selected-permission {
+.selected-permission{
     width: calc(100% - 96px) !important;
+    min-width:200px;
+    margin-right:10px;
 }
 
 .btn-share {
diff --git a/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.html b/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.html
index 5f72a239917..419e97d6cbf 100644
--- a/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.html
+++ b/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.html
@@ -1,4 +1,4 @@
-<div id="share-modal" class="pdB4 shareGrp">
+<div id="share-modal" class="pd-b4 share-grp">
     <div class="modal-header">
         <h3>Share Group</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal" (click)="closeModal()">×</span>
@@ -6,7 +6,7 @@ <h3>Share Group</h3>
     <div class="modal-body" id="SharePop">
         <div class="form-group mb-0">
             <h3 class="pd-b1">Share with</h3>
-            <div class="add_mailer">
+            <div class="add-mailer">
 
                 <!--share group from-->
                 <form name="shareGroupForm" #shareGroupForm="ngForm" novalidate="" class="form-inline clearfix" autocomplete="off">
@@ -30,7 +30,7 @@ <h3 class="pd-b1">Share with</h3>
                 <!--shared with array-->
                 <div class="pd-t1" *ngIf="(activeGroupSharedWith$ | async)?.length">
                     <div>
-                        <ul class="shared_list group-shared-list">
+                        <ul class="shared-list group-shared-list">
                             <li *ngFor="let val of (activeGroupSharedWith$ | async); let i = index">
                                 <div class="user-name-email">
                                     <i class="icon-user1 pd-r1"></i>
@@ -40,14 +40,14 @@ <h3 class="pd-b1">Share with</h3>
                                     </span>
                                 </div>
 
-                                <div class="custom-select pos-rel">
+                                <div class="custom-select position-relative">
                                     <select name="selectedPermission_{{i}}" class="form-control cp" (change)="updatePermission(val, $event)">
                                         <option [selected]="val.roleUniqueName === permission.uniqueName"
                                             [value]="permission.uniqueName"
                                             *ngFor="let permission of allPermissions$ | async">{{permission.name}}
                                         </option>
                                     </select>
-                                    <span class="select_drop d-none"><i class="fa fa-caret-down"></i></span>
+                                    <span class="select-drop d-none"><i class="fa fa-caret-down"></i></span>
                                 </div>
                                 <span class="delete-icon pull-right cp">
                                         <i (click)="unShareGroup(val.uniqueName, val.entityUniqueName)"
diff --git a/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.scss b/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.scss
index 6a1b1c8cb57..1ebe1cdb689 100644
--- a/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.scss
+++ b/apps/web-giddh/src/app/shared/header/components/share-group-modal/share-group-modal.component.scss
@@ -5,7 +5,7 @@
     width: 100%;
     border-top: 1px solid $gainsboro;
     margin-top: 15px;
-    padding-top: 20px;
+    padding-top: 20px !important;
     li{
         border-bottom: none;
         display: flex;
@@ -14,6 +14,7 @@
         text-align: left;
         align-items: center;
         margin-bottom: 10px;
+        border-bottom: none !important;
     }
     .custom-select{
         width: 40%;
@@ -26,7 +27,7 @@
             width: 100%;
             padding-right: 0px !important;
         }
-        .select_drop i {
+        .select-drop i {
             background: $white;
         }
     }
@@ -34,7 +35,7 @@
         font-size: 14px;
         line-height: 1.5;
         border-radius: 3px;
-        background: #eee;
+        background: $whisper-light;
         border: 1px solid $gainsboro;
         width: 30px;
         height: 30px;
@@ -44,7 +45,7 @@
     }
     .user-name-email{
         width: 40%;
-        color:$extra-dark-gray;
+        color: $night-rider !important;
         display: flex;
         white-space: normal;
         word-break: break-all;
diff --git a/apps/web-giddh/src/app/shared/header/header.component.html b/apps/web-giddh/src/app/shared/header/header.component.html
index 1ce7a99b3c1..aaa33b03804 100644
--- a/apps/web-giddh/src/app/shared/header/header.component.html
+++ b/apps/web-giddh/src/app/shared/header/header.component.html
@@ -6,17 +6,17 @@
                 <!-- hide div for future use of design if shubhndra wants to change deisgn as per preious one -->
                 <div class="col-sm-5" *ngIf="hideAsDesignChanges">
                     <ul class="main-company-name">
-                        <li class="company-name pos-rel" dropdown #companyDetailsDropDownWeb="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="companyDetailsDropDownWeb.hide()" [exclude]="'.company-name'">
-                            <a id="cmpWrp" href="javascript:void(0)" class="clearfix z1" dropdownToggle>
+                        <li class="company-name position-relative" dropdown #companyDetailsDropDownWeb="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="companyDetailsDropDownWeb.hide()" [exclude]="'.company-name'">
+                            <a id="company-wrap" href="javascript:void(0)" class="clearfix z1" dropdownToggle>
                                 <ng-template #companyBranchNameAlias> {{ (selectedCompany | async)?.name }}<span *ngIf="(selectedCompany | async)?.nameAlias"> (
                                         {{  (selectedCompany | async)?.nameAlias }} )</span>
                                 </ng-template>
                                 <div class="company-text">
-                                    <span class="c-name ellp pd-r1">{{ ((selectedCompany | async)?.name) | slice: 0 : 1}}
+                                    <span class="company-name text-ellipsis pd-r1">{{ ((selectedCompany | async)?.name) | slice: 0 : 1}}
                                     </span>
 
                                     <div class="company-name-finance-year" placement="bottom">
-                                        <span class=" ellp pd-r1">{{ ((selectedCompany | async)?.name)}}
+                                        <span class=" text-ellipsis pd-r1">{{ ((selectedCompany | async)?.name)}}
                                         </span>
 
                                         <div class="unique-name-financial-year"> <span class="name-year" *ngIf="(selectedCompany | async)?.nameAlias">
@@ -37,7 +37,7 @@
                                 </li>
                                 <!-- #dropdown="bs-dropdown" -->
                                 <!--  -->
-                                <li dropdown class="pos-rel" #subdropdown="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="subdropdown.isOpen = false" (onShown)="switchCompanyMenuShown()">
+                                <li dropdown class="position-relative" #subdropdown="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="subdropdown.isOpen = false" (onShown)="switchCompanyMenuShown()">
                                     <a href="javascript:void(0)" class="clearfix" dropdownToggle>
                                         Switch Company
                                         <span class="icon-arrow-down"></span>
@@ -59,9 +59,9 @@
                                             <perfect-scrollbar class="" [scrollIndicators]="true">
                                                 <ul class="sub-list" *ngIf="companyListForFilter && companyListForFilter.length">
 
-                                                    <li class="cmp posrelative header-tooltip" *ngFor="let cmp of companyListForFilter; let i = index" [ngClass]="{'selected-company': cmp.uniqueName === (selectedCompany | async)?.uniqueName}" (keydown.enter)="changeCompany(cmp.uniqueName, true)" (click)="changeCompany(cmp.uniqueName, true)">
+                                                    <li class="cmp position-relative header-tooltip" *ngFor="let cmp of companyListForFilter; let i = index" [ngClass]="{'selected-company': cmp.uniqueName === (selectedCompany | async)?.uniqueName}" (keydown.enter)="changeCompany(cmp.uniqueName, true)" (click)="changeCompany(cmp.uniqueName, true)">
 
-                                                        <a vr-item href="javascript:void(0);" class="ellp" (mouseenter)="mouseEnteredOnCompanyName(i)">
+                                                        <a vr-item href="javascript:void(0);" class="text-ellipsis" (mouseenter)="mouseEnteredOnCompanyName(i)">
 
                                                             <ng-template #CompanyBranchname> {{ cmp.name }}
                                                                 <span *ngIf="cmp.alias">({{(cmp.alias)}})</span>
@@ -86,7 +86,7 @@
                                         </li>
 
                                         <li class="create-company-btn">
-                                            <button href="javascript:void(0)" (click)="createNewCompany()" class="btn-link pd-0 btn">Create
+                                            <button href="javascript:void(0)" (click)="createNewCompany()" class="btn-link p-0 btn">Create
                                                 Company
                                             </button>
                                         </li>
@@ -97,14 +97,14 @@
                                 <li role="separator" class="divider width-100"></li>
 
                                 <li class="mr-b1" *ngIf="!isMobileSite">
-                                    <a [tooltip]="userEmail" placement="top" href="javascript:void(0)" (click)="analyzeMenus($event, '/pages/user-details', { tab: 'profile', tabIndex: 1 })" class="oh">
+                                    <a [tooltip]="userEmail" placement="top" href="javascript:void(0)" (click)="analyzeMenus($event, '/pages/user-details', { tab: 'profile', tabIndex: 1 })" class="overflow-hidden">
                                         <span class="user-circle pull-left" *ngIf="!userAvatar">
                                             <span>{{userName | uppercase}}</span>
                                         </span>
                                         <span class="user-circle pull-left" *ngIf="userAvatar" [style.background]="'transparent'">
                                             <img src="{{userAvatar}}" alt="" />
                                         </span>
-                                        <div class="pull-left user-name-wrap ellp">{{ userFullName }}
+                                        <div class="pull-left user-name-wrap text-ellipsis">{{ userFullName }}
                                             <small class="grey-color">Profile</small>
                                         </div>
                                     </a>
@@ -163,15 +163,15 @@ <h6>Downloads</h6>
                 </div>
                 <div class="col-sm-3">
                     <div class="giddh-logo" (click)="forceOpenNavigation = true;">
-                        <li class="company-name pos-rel" (click)="toggleBodyScroll()" [autoClose]="false" dropdown #dropdown="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="dropdown.isOpen = false; toggleBodyScroll();">
-                            <a id="cmpWrp" href="javascript:void(0)" class="clearfix z1 " dropdownToggle>
+                        <li class="company-name position-relative" (click)="toggleBodyScroll()" [autoClose]="false" dropdown #dropdown="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="dropdown.isOpen = false; toggleBodyScroll();">
+                            <a id="company-wrap" href="javascript:void(0)" class="clearfix z1 " dropdownToggle>
                                 <ng-template #companyBranchNameAlias> {{ (selectedCompany | async)?.name }}<span *ngIf="(selectedCompany | async)?.nameAlias"> (
                                         {{  (selectedCompany | async)?.nameAlias }}
                                         )</span>
                                 </ng-template>
                                 <div class="company-text no-padding">
 
-                                    <span class="c-name ellp pd-r1 pd-l1 alice">{{companyInitials}}</span>
+                                    <span class="company-name text-ellipsis pd-r1 pd-l1 alice">{{companyInitials}}</span>
 
                                     <img src="assets/images/giddh-white-logo.svg" class="giddh-logo">
                                 </div>
@@ -188,8 +188,8 @@ <h6>Downloads</h6>
                 </div>
                 <div class="col-sm-9">
                     <div class="pull-right right-details">
-                        <ul class="nav universal-date mr-15" *ngIf="(selectedCompany | async)">
-                            <li class="border-none pr-15" [ngClass]="{'notification': !isMobileScreen, 'mr-0':isTodaysDateSelected}">
+                        <ul class="nav universal-date mr-r15" *ngIf="(selectedCompany | async)">
+                            <li class="border-none pd-r15" [ngClass]="{'notification': !isMobileScreen, 'mr-0':isTodaysDateSelected}">
                                 <!-- <img src="{{imgPath}}notification.svg"> -->
                                 <i class="icon-notification"></i>
                             </li>
@@ -209,7 +209,7 @@ <h6>Downloads</h6>
                             <i class="icon-plus"></i> Master
                         </button>
                         <div class="btn-group cp d-inline-block help-setting-icons " dropdown>
-                            <span class="mr-15" (click)="toggleSidebarPane(true, false)">
+                            <span class="mr-r15" (click)="toggleSidebarPane(true, false)">
                                 <i class="icon-header-setting"></i>
                             </span>
                             <span (click)="toggleHelpSupportPane(true)">
@@ -237,7 +237,7 @@ <h6>Downloads</h6>
                     <span class="icon-arrow-down"></span>
                 </a>
                 <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
-                    <div class="input-group mb-1" container="body">
+                    <div class="input-group mr-b1" container="body">
                         <input type="text" (ngModelChange)="filterBranch($event)" [(ngModel)]="searchBranchQuery"
                             class="form-control" placeholder="Search Branch here" autocomplete="off" />
                         <span (click)="loadCompanyBranches()"  tooltip="Refresh" placement="left" class="input-group-addon">
@@ -273,7 +273,7 @@ <h6>Downloads</h6>
         </div>
         <!-- Switch branch end -->
         <ul class="main-company-name">
-            <li *ngIf="isMobileSite" [autoClose]="false" class="company-name pos-rel hidden-lg hidden-md hidden-sm" dropdown #dropdown="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="dropdown.isOpen = false">
+            <li *ngIf="isMobileSite" [autoClose]="false" class="company-name position-relative hidden-lg hidden-md hidden-sm" dropdown #dropdown="bs-dropdown" [attachOutsideOnClick]="true" (clickOutside)="dropdown.isOpen = false">
 
                 <a href="javascript:void(0)" class="clearfix z1 d-block" dropdownToggle>
                     <ng-template #companyBranchNameAlias> {{ (selectedCompany | async)?.name }}<span *ngIf="(selectedCompany | async)?.nameAlias"> ( {{  (selectedCompany | async)?.nameAlias }}
@@ -281,10 +281,10 @@ <h6>Downloads</h6>
                     </ng-template>
                     <!-- <span class="icon-dots-three-vertical"></span> -->
                     <div class="company-text d-flex">
-                        <span class="c-name ellp pd-r1 alice">{{companyInitials}}</span>
+                        <span class="company-name text-ellipsis pd-r1 alice">{{companyInitials}}</span>
 
                         <div class="company-name-finance-year" placement="bottom">
-                            <span class=" ellp pd-r1">{{ ((selectedCompany | async)?.name)}}
+                            <span class=" text-ellipsis pd-r1">{{ ((selectedCompany | async)?.name)}}
                             </span>
 
                             <div class="unique-name-financial-year"> <span *ngIf="(selectedCompany | async)?.nameAlias" class="branch-unique-name">
@@ -307,14 +307,14 @@ <h6>Downloads</h6>
                 <span class="input-group-addon" id="">
                     <i class="icon-search"></i>
                 </span>
-                <input type="text" class="form-control jumpToAccount" placeholder="Search Anything" aria-describedby="">
+                <input type="text" class="form-control jump-to-account" placeholder="Search Anything" aria-describedby="">
             </div>
 
         </ul>
 
         <div class="nav-wrapper">
 
-            <perfect-scrollbar class="scrClass" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0" auto-height [scrollIndicators]="false">
+            <perfect-scrollbar class="scroll-class" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="0" auto-height [scrollIndicators]="false">
 
                 <!-- Accounts menu -->
                 <ul class="left-fixed-header mr-t1" [ngClass]="{'open':sideMenu.isopen}" *ngIf="(selectedCompany | async)">
@@ -330,12 +330,12 @@ <h6 class="mr-b1">ACCOUNTS
                         <a [tooltip]="acc.name" placement="right" routerLink="ledger/{{acc.uniqueName}}" (click)="analyzeAccounts($event, acc)" [class.active]="isLedgerAccSelected && selectedLedgerName === acc.uniqueName">
                             <span class="icon-dashboard"></span>
                             <span class="label">{{acc.name}}
-                                <span class="txtUpc">A/</span>
-                            <span class="txt-lwc">c</span>
+                                <span class="text-uppercase">A/</span>
+                            <span class="text-lowercase">c</span>
                             </span>
                         </a>
                     </li>
-                    <li class="mr-t cp  show-more-opt" (click)="showNavigationModal()">
+                    <li class="mr-t05 cp show-more-opt" (click)="showNavigationModal()">
                         <span container="body" tooltip="Search accounts" placement="bottom"> Show more...</span></li>
                 </ul>
 
@@ -393,12 +393,12 @@ <h6 class="mr-b1">MENU
                         <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="navigationEnd && !navigateToUser">
                             {{selectedPage}}
                             <span *ngIf="isLedgerAccSelected">A/</span>
-                            <span *ngIf="isLedgerAccSelected" class="txt-lwc">c</span>
+                            <span *ngIf="isLedgerAccSelected" class="text-lowercase">c</span>
                         </h4>
 
                         <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigationEnd && !navigateToUser">{{oldSelectedPage}}
                             <span *ngIf="isLedgerAccSelected">A/</span><span *ngIf="isLedgerAccSelected"
-                                class="txt-lwc">c</span></h4>
+                                class="text-lowercase">c</span></h4>
                     </li> -->
                 </ul>
             </div>
@@ -407,7 +407,7 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
 </header>
 <div class="padding-top-fixed-mobile">
     <header class="clearfix header-container mobile-header">
-        <nav class="navbar " [ngClass]="{'menu_open':sideMenu.isopen}">
+        <nav class="navbar" [ngClass]="{'menu_open':sideMenu.isopen}">
             <div class="container-fluid  mr-b1 ">
                 <div class="upper-layer-header">
                     <ul class="nav navbar-nav">
@@ -422,10 +422,10 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
                         </li>
                         <li class="hamburger-menu cp pull-left" (click)="sideBarStateChange(sideMenu.isopen = !sideMenu.isopen)">
                             <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="navigationEnd && !navigateToUser">{{selectedPage}}
-                                <span *ngIf="isLedgerAccSelected">A/</span><span *ngIf="isLedgerAccSelected" class="txt-lwc">c</span></h4>
+                                <span *ngIf="isLedgerAccSelected">A/</span><span *ngIf="isLedgerAccSelected" class="text-lowercase">c</span></h4>
 
                             <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigationEnd && !navigateToUser">
-                                {{oldSelectedPage}} <span *ngIf="isLedgerAccSelected">A/</span><span *ngIf="isLedgerAccSelected" class="txt-lwc">c</span></h4>
+                                {{oldSelectedPage}} <span *ngIf="isLedgerAccSelected">A/</span><span *ngIf="isLedgerAccSelected" class="text-lowercase">c</span></h4>
 
                         </li>
                         <li class="pull-right">
@@ -443,11 +443,11 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
                                         <p><a href="mailto:support@giddh.com" target="_blank" class="grey-color">support@giddh.com</a></p>
                                     </li>
                                     <li class="row text-center">
-                                        <button class="btn btn-link td-undr" (click)="openScheduleCalendlyModel()">Talk
+                                        <button class="btn btn-link text-underline" (click)="openScheduleCalendlyModel()">Talk
                                             to
                                             Sales</button> |
                                         <span class="text-center"><a href="http://faq.giddh.com/" target="_blank"
-                                                class="btn btn-link td-undr">FAQs</a></span>
+                                                class="btn btn-link text-underline">FAQs</a></span>
                                     </li>
                                 </ul>
                             </div>
@@ -455,10 +455,10 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
                     </ul>
                     <div class="d-flex align-items-center" *ngIf="(selectedCompany | async)">
                         <span [ngClass]="{'notification': isMobileScreen}">
-                            <!-- <img src="{{imgPath}}notification.svg" class="mr-15"> -->
-                            <i class="icon-notification mr-15"></i>
+                            <!-- <img src="{{imgPath}}notification.svg" class="mr-r15"> -->
+                            <i class="icon-notification mr-r15"></i>
                         </span>
-                        <button id="add-manage" *ngIf="!isMobileSite" type="button" class="btn btn-gray btn-sm d-inline-flex mr-15 "
+                        <button id="add-manage" *ngIf="!isMobileSite" type="button" class="btn btn-gray btn-sm d-inline-flex mr-r15 "
                             [checkPermission]="['MENU', 'MANAGE']" (click)="showManageGroupsModal()">
                             <i class="icon-plus"></i>
                         </button>
@@ -472,12 +472,12 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
                 </div>
 
                 <div class="lower-layer-header">
-                    <ul class="nav universal-date  pull-left" *ngIf="(selectedCompany | async)">
+                    <ul class="nav universal-date pull-left" *ngIf="(selectedCompany | async)">
                         <li class="border-none pl-0" [ngClass]="{'hide-today':isTodaysDateSelected}">
                             <button class="btn btn-link" (click)="dateSelectedCallback()"> Today</button>
                             <!--                            <button class="btn btn-link" *ngIf="isTodaysDateSelected" (click)="showGiddhDatepicker($event)">Today</button>-->
                         </li>
-                        <li class="daterang-picker not-today cursor-pointer">
+                        <li class="daterange-picker not-today cursor-pointer">
                             <span class="icon-calender calendar-addon" (click)="showGiddhDatepicker($event)"></span>
                             <div class="input-date" [ngClass]="{'today-date pl-2': isTodaysDateSelected}">
                                 <input type="text" name="selectedDateRange" (click)="showGiddhDatepicker($event)" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker form-control date-range-picker" />
@@ -486,7 +486,7 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
                     </ul>
                 </div>
                 <div class="button-back-head">
-                    <button *ngIf="shouldShowBackButton" (click)="navigateToPreviousRoute()" class="btn btn-primary mr-15">Back</button>
+                    <button *ngIf="shouldShowBackButton" (click)="navigateToPreviousRoute()" class="btn btn-primary mr-r15">Back</button>
                 </div>
             </div>
         </nav>
@@ -501,13 +501,13 @@ <h4 class="inline text-capitalize" id="giddh-page-heading-link" *ngIf="!navigati
 <div class="plan-wrapper" *ngIf="subscribedPlan !== undefined && subscribedPlan.additionalCharges" [ngClass]="{'menu_open':sideMenu.isopen}">
     <div class="white-row plan-issue">
         <p> <span class="icon-traingle-info"></span> You have crossed the transactions limit of your assigned plan {{subscribedPlan.planDetails.name}} subscribed on {{subscribedPlan.startedAt}}. To continue your accounting with Giddh, Please renew your current
-            plan or switch to another one. Contact us for more assistance. <a class="clickHere" (click)="goToSelectPlan()">Click here</a>
+            plan or switch to another one. Contact us for more assistance. <a class="click-here" (click)="goToSelectPlan()">Click here</a>
         </p>
     </div>
 </div>
 <!--add and manage group account modal -->
 <div bsModal #manageGroupsAccountsModal="bs-modal" [config]="{ keyboard: true }" class="modal fade full-screen-modal manage-account-popup add-manage-group-acc" role="dialog" (onShown)="onShown()">
-    <div class="modal-dialog modal-xl modal-liq-90 mr-0 width100 h-100">
+    <div class="modal-dialog modal-xl modal-liq-90 mr-0 width-100 h-100">
         <div class="modal-content full-screen-modal">
             <ng-template element-view-container-ref #addmanage=elementviewcontainerref>
             </ng-template>
@@ -626,7 +626,7 @@ <h3 class="modal-title pull-left">Ready to upgrade subscription</h3>
     <li>
         <div class="company-text head-nav">
             <div class="company-name-finance-year" placement="bottom">
-                <span class=" ellp pd-r1">{{ ((selectedCompany | async)?.name)}}
+                <span class="text-ellipsis pd-r1">{{ ((selectedCompany | async)?.name)}}
                 </span>
 
                 <div class="unique-name-financial-year">
@@ -643,7 +643,7 @@ <h3 class="modal-title pull-left">Ready to upgrade subscription</h3>
         </li>
         <!-- #dropdown="bs-dropdown" -->
         <!--  -->
-        <li dropdown class="pos-rel" #subdropdown="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="subdropdown.isOpen = false" (onShown)="switchCompanyMenuShown()">
+        <li dropdown class="position-relative" #subdropdown="bs-dropdown" [autoClose]="false" [attachOutsideOnClick]="true" (clickOutside)="subdropdown.isOpen = false" (onShown)="switchCompanyMenuShown()">
             <a href="javascript:void(0)" class="clearfix" dropdownToggle>
             Switch company
             <span class="icon-arrow-down"></span>
@@ -667,9 +667,9 @@ <h3 class="modal-title pull-left">Ready to upgrade subscription</h3>
 
                         <ul class="sub-list" *ngIf="companyListForFilter && companyListForFilter.length">
 
-                            <li class="cmp posrelative header-tooltip" *ngFor="let cmp of companyListForFilter; let i = index" [ngClass]="{'selected-company': cmp.uniqueName === (selectedCompany | async)?.uniqueName}" (keydown.enter)="changeCompany(cmp.uniqueName, true)" (click)="changeCompany(cmp.uniqueName, true)">
+                            <li class="cmp position-relative header-tooltip" *ngFor="let cmp of companyListForFilter; let i = index" [ngClass]="{'selected-company': cmp.uniqueName === (selectedCompany | async)?.uniqueName}" (keydown.enter)="changeCompany(cmp.uniqueName, true)" (click)="changeCompany(cmp.uniqueName, true)">
 
-                                <a vr-item href="javascript:void(0);" class="ellp" (mouseenter)="mouseEnteredOnCompanyName(i)">
+                                <a vr-item href="javascript:void(0);" class="text-ellipsis" (mouseenter)="mouseEnteredOnCompanyName(i)">
 
                                     <ng-template #CompanyBranchname> {{ cmp.name }}
                                         <span *ngIf="cmp.alias">({{(cmp.alias)}})</span>
@@ -692,7 +692,7 @@ <h3 class="modal-title pull-left">Ready to upgrade subscription</h3>
                 </li>
 
                 <li class="create-company-btn">
-                    <button href="javascript:void(0)" (click)="createNewCompany()" class="btn-link btn pd0">Create
+                    <button href="javascript:void(0)" (click)="createNewCompany()" class="btn-link btn p-0">Create
                     Company
                 </button>
                 </li>
@@ -703,14 +703,14 @@ <h3 class="modal-title pull-left">Ready to upgrade subscription</h3>
         <li role="separator" class="divider width-100"></li>
 
         <li class="mr-b1" *ngIf="!isMobileSite">
-            <a [tooltip]="userEmail" placement="top" href="javascript:void(0)" (click)="analyzeMenus($event, '/pages/user-details', { tab: 'profile', tabIndex: 1 })" class="oh">
+            <a [tooltip]="userEmail" placement="top" href="javascript:void(0)" (click)="analyzeMenus($event, '/pages/user-details', { tab: 'profile', tabIndex: 1 })" class="overflow-hidden">
                 <span class="user-circle pull-left" *ngIf="!userAvatar">
                 <span>{{userName | uppercase}}</span>
                 </span>
                 <span class="user-circle pull-left" *ngIf="userAvatar" [style.background]="'transparent'">
                 <img src="{{userAvatar}}" alt="" />
             </span>
-                <div class="pull-left user-name-wrap ellp">{{ userFullName }}
+                <div class="pull-left user-name-wrap text-ellipsis">{{ userFullName }}
                     <small class="grey-color">Profile</small>
                 </div>
             </a>
diff --git a/apps/web-giddh/src/app/shared/header/header.component.scss b/apps/web-giddh/src/app/shared/header/header.component.scss
index 9a002e7ed61..40a7956e96d 100644
--- a/apps/web-giddh/src/app/shared/header/header.component.scss
+++ b/apps/web-giddh/src/app/shared/header/header.component.scss
@@ -12,7 +12,7 @@
     top: 61px;
     bottom: 0;
     min-height: 100vh;
-    background: #fff;
+    background: $white;
     width: 215px;
     left: -215px;
     z-index: 991;
@@ -47,7 +47,7 @@
 
 .account-search .form-control:focus {
     border-color: $gainsboro !important;
-    color: #b7b7b7;
+    color: $pink-swan;
 }
 
 .account-search {
@@ -65,8 +65,8 @@
 }
 
 a[vr-item]:focus {
-    background-color: #2d9ee0;
-    color: #fff;
+    background-color: $vivid-blue;
+    color: $white;
     cursor: pointer;
 }
 
@@ -83,7 +83,7 @@ a[vr-item]:focus {
 }
 
 .account-search .form-control:after {
-    background: red;
+    background: $red;
     content: "";
     width: 90px;
     height: 90px;
@@ -140,9 +140,9 @@ a[vr-item]:focus {
     }
 }
 
-.main-company-name > li > a:hover .company-text .c-name,
+.main-company-name > li > a:hover .company-text .company-name,
 .main-company-name > li > a:hover .icon-dots-three-vertical {
-    color: #fff;
+    color: $white;
 }
 
 .left-fixed-header > li {
@@ -188,7 +188,7 @@ a[vr-item]:focus {
 }
 .left-fixed-header > li > a:hover .label > span,
 .left-fixed-header > li > a:hover .label {
-    color: #01a9f4;
+    color: $deep-sky-blue;
 }
 
 .left-fixed-header > li a.active {
@@ -235,7 +235,7 @@ a[vr-item]:focus {
 }
 
 .left-fixed-header .divider {
-    border-bottom: 1px solid #363a41;
+    border-bottom: 1px solid $night-rider;
     padding: 4px 0;
     height: 0;
     margin-bottom: 4px;
@@ -297,7 +297,7 @@ a[vr-item]:focus {
     text-align: center;
     line-height: 15.9px;
     border-radius: 2px;
-    color: #fff;
+    color: $white;
     margin-top: 1px;
     margin-right: 2px;
 }
@@ -312,13 +312,13 @@ a[vr-item]:focus {
     text-align: center;
     line-height: 15.9px;
     border-radius: 2px;
-    color: #999;
+    color: $nobel;
     margin-top: 1px;
 }
 
 .left-fixed-header > h6 > i:hover {
-    color: #fff;
-    background: #6b73c8;
+    color: $white;
+    background: $rich-blue;
 }
 
 .nav-tabs {
@@ -331,7 +331,7 @@ a[vr-item]:focus {
 
 .left-sub-menu ul > li > a {
     font-size: 14px;
-    color: dimgray;
+    color: $dim-gray;
     display: block;
     clear: both;
     padding: 6px 15px;
@@ -339,7 +339,7 @@ a[vr-item]:focus {
 }
 
 .left-sub-menu ul > li > a:hover {
-    color: #01a9f4;
+    color: $deep-sky-blue;
 }
 
 .left-sub-menu ul {
@@ -350,7 +350,7 @@ a[vr-item]:focus {
 }
 
 .left-sub-menu {
-    background: #fff;
+    background: $white;
     position: absolute;
     left: -12px;
     bottom: 0;
@@ -359,7 +359,7 @@ a[vr-item]:focus {
     display: block;
     clear: both;
     float: none;
-    box-shadow: 0 0 3px #00000036;
+    box-shadow: 0 0 3px $black-russian;
     border-radius: 2px;
     padding: 5px 0;
     visibility: hidden;
@@ -374,7 +374,7 @@ a[vr-item]:focus {
     vertical-align: middle;
     text-align: right;
     position: relative;
-    color: #a0a0a0;
+    color: $dim-gray;
     top: 6px;
 }
 
@@ -385,7 +385,7 @@ a[vr-item]:focus {
 .sub-menu > li > a {
     display: block;
     padding: 8px 20px;
-    color: #b7b7b7;
+    color: $pink-swan;
 }
 
 .left-fixed-header > li > a > i {
@@ -423,10 +423,6 @@ a[vr-item]:focus {
     max-width: none !important;
 }
 
-.posrelative {
-    position: relative;
-}
-
 .d-inline-block {
     display: inline-block !important;
 }
@@ -458,7 +454,7 @@ a[vr-item]:focus {
 
 .universal-date li input {
     padding-left: 20px !important;
-    color: #fff !important;
+    color: $white !important;
     padding-right: 0 !important;
     text-align: left;
 }
@@ -469,7 +465,7 @@ a[vr-item]:focus {
 .header-date {
     padding: 5px 11px;
     border-radius: 0px 2px 2px 0px;
-    color: #fff;
+    color: $white;
     padding-left: 0;
 }
 
@@ -496,7 +492,7 @@ a[vr-item]:focus {
         margin:auto;
     }
     .input-date{
-        border: 1px solid #ffffff;
+        border: 1px solid $white;
         border-radius: 20px !important;
         height: 34px;
         width: 220px;
@@ -527,7 +523,7 @@ a[vr-item]:focus {
 }
 span.icon-support.dropdown-toggle {
     background-color: $governor-bay;
-    color: #fff;
+    color: $white;
     padding: 6px 7px;
     font-size: 17px;
     border: 1px solid $governor-bay;
@@ -547,7 +543,7 @@ span.icon-support.dropdown-toggle {
 }
 
 .other a {
-    color: $extra-dark-gray;
+    color: $night-rider;
     text-transform: uppercase;
 }
 .show-more-opt {
@@ -646,11 +642,11 @@ ul.sub-list {
 
 .nav-left-bar .company-name .branch-unique-name {
     font-size: 12px;
-    color: #01a9f4 !important;
+    color: $deep-sky-blue !important;
     padding: 0 0 3px 0;
 }
 
-.company-name .ellp {
+.company-name .text-ellipsis {
     font-size: 13px;
     font-family: 'opensans-regular';
 }
@@ -684,7 +680,7 @@ ul.sub-list {
     transition: 2s linear;
 }
 .head-nav {
-    background: #f1f1f1;
+    background: $white-smoke;
     border-bottom: 1px solid $whisper-color;
     margin-bottom: 5px;
 }
@@ -714,7 +710,7 @@ ul.sub-list {
     padding: 10px 15px;
     margin-bottom: 10px;
     font-size: 16px;
-    box-shadow: 1px 1px 3px #00000029;
+    box-shadow: 1px 1px 3px $black-russian;
     margin-top: 10px;
     p {
         font-family: "opensans-semibold";
@@ -769,7 +765,7 @@ ul.sub-list {
         left: 0 !important;
         color: $night-rider;
         .company-name-finance-year{
-            .ellp{
+            .text-ellipsis {
                 white-space: normal;
             }
         }
@@ -1029,7 +1025,7 @@ ul.sub-list {
     .mobile-menu-icon {
         position: absolute;
         top: 14px;
-        color: #fff;
+        color: $white;
         right: -35px;
         background-color: $midnight-blue;
         width: 35px;
@@ -1046,10 +1042,10 @@ ul.sub-list {
         display: flex;
     }
     .upper-layer-header .open .dropdown-menu {
-        background-color: #fff;
+        background-color: $white;
         -webkit-background-clip: padding-box;
         background-clip: padding-box;
-        border: 1px solid #ccc;
+        border: 1px solid $gainsboro;
         border: 1px solid rgba(0, 0, 0, 0.15);
         border-radius: 4px;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -1125,7 +1121,7 @@ ul.sub-list {
     }
     .mobile-back-btn {
         display: none;
-        color: #fff;
+        color: $white;
         margin-right: 10px;
     }
     .not-today {
diff --git a/apps/web-giddh/src/app/shared/invoice-page-dd/invoice.page.dd.component.html b/apps/web-giddh/src/app/shared/invoice-page-dd/invoice.page.dd.component.html
index 9bf994d84d6..2fcf18af1a4 100644
--- a/apps/web-giddh/src/app/shared/invoice-page-dd/invoice.page.dd.component.html
+++ b/apps/web-giddh/src/app/shared/invoice-page-dd/invoice.page.dd.component.html
@@ -1,6 +1,6 @@
-<!--<span class="navbar-brand pdL0">{{selectedPage}}</span>-->
+<!--<span class="navbar-brand pl-0">{{selectedPage}}</span>-->
 <!-- <span dropdown (onShown)="onShown()">
-    <p class="navbar-brand cp pdL0" href dropdownToggle (click)="false">{{selectedPage}} <span class="caret"></span></p>
+    <p class="navbar-brand cp pl-0" href dropdownToggle (click)="false">{{selectedPage}} <span class="caret"></span></p>
      <ul *dropdownMenu class="dropdown-menu">
         <li *ngFor="let choice of navItems">
             <a class="dropdown-item cp" (click)="changePage(choice.uniqueName)">{{choice.name}}</a>
diff --git a/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.html b/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.html
index 4ab2444fe10..f0bcc2b8f02 100644
--- a/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.html
+++ b/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.html
@@ -1,33 +1,33 @@
-<div id="share-modal" class=" shareGrp ">
+<div id="share-modal" class=" share-grp ">
     <div class="modal-header">
         <h3>Create New {{onBoardingType}}</h3>
         <span aria-hidden="true" class="close" data-dismiss="modal"
             (click)="removeCompanySessionData(); closeModal();">×</span>
     </div>
-    <div class="modal-body pd0" id="SharePop">
-        <div class="welcome_wrapper">
+    <div class="modal-body p-0" id="SharePop">
+        <div class="welcome-wrapper">
             <div class="giddh-logo-welcome">
                 <img src="{{imgPath}}assets/images/giddh-big-logo.svg">
             </div>
-            <div class="welcome_header">
+            <div class="welcome-header">
                 <h1>Welcome {{ this.logedInuser.name}}!</h1>
             </div>
         </div>
-        <div class="form-group clearfix add-companyDetail pdB5">
+        <div class="form-group clearfix add-company-detail pd-b5">
             <!--<h3 class="pd-b1">Share with</h3>-->
-            <div class="add_mailer">
+            <div class="add-mailer">
                 <!--create company from-->
                 <form name="form" #companyForm="ngForm" class="clearfix" novalidate="" autocomplete="off">
                     <div class="company-form-body row">
 
                         <div class="col-sm-12 m-t-50">
-                            <div class="input-group form-group dblock m-b-30">
+                            <div class="input-group form-group d-block m-b-30">
                                 <p>Enter your {{onBoardingType?.toLowerCase()}} name to start hassle free accounting
                                     with
                                     Giddh.</p>
                             </div>
                         </div>
-                        <div class="col-sm-12 mrB3">
+                        <div class="col-sm-12 mr-b3">
                             <label for="name" class="m-t-40">{{onBoardingType}} Name<sup>*</sup></label>
                             <input name="name" id="name" #itemName type="text" required placeholder="Name"
                                 (input)="handleOnBoardingNameChange($event?.target?.value)" [(ngModel)]="company.name"
@@ -39,22 +39,21 @@ <h1>Welcome {{ this.logedInuser.name}}!</h1>
                         </div>
 
                         <div class="row mr-0 ml-0">
-                                <div class="col-sm-6 mrB3 ">
+                                <div class="col-sm-6 mr-b3 ">
                                         <span>
                                             <label for="country" class="d-block">Country<sup>*</sup></label>
-                                            <sh-select id="country"
+                                            <sh-select id="country" class="w-100"
                                                 [disabled]="(onBoardingType === 'Warehouse') ? 'disabled' : null"
                                                 [options]="countrySource$ | async" [isFilterEnabled]="true" name="country"
-                                                [(ngModel)]="company.country" class="pull-left select-caret" [required]='true'
-                                                (selected)="selectCountry($event)" [defaultValue]="selectedCountry"
-                                                style="width: 100%">
+                                                [(ngModel)]="company.country" class="pull-left select-caret" [required]='true' [isRequired]="true"
+                                                (selected)="selectCountry($event)" [defaultValue]="selectedCountry">
                                             </sh-select>
                                         </span>
                                     </div>
-                                    <div class="col-sm-6 mrB3 ">
+                                    <div class="col-sm-6 mr-b3 ">
                                         <label>Currency <sup>*</sup></label>
-                                        <div class="custom-select select-caret pos-rel">
-                                            <sh-select name="baseCurrency" [options]="currencySource$ | async" required
+                                        <div class="custom-select select-caret position-relative">
+                                            <sh-select name="baseCurrency" [options]="currencySource$ | async" required [isRequired]="true"
                                                 [disabled]="(onBoardingType === 'Warehouse') ? 'disabled' : null"
                                                 [isFilterEnabled]="true" [(ngModel)]="company.baseCurrency"
                                                 [defaultValue]="company.baseCurrency"></sh-select>
@@ -62,12 +61,12 @@ <h1>Welcome {{ this.logedInuser.name}}!</h1>
                                     </div>
                         </div>
 
-                        <div class="col-sm-12 mrB3">
+                        <div class="col-sm-12 mr-b3">
                             <span>
                                 <label for="contactNo" class="d-block">Mobile Number<sup>*</sup></label>
                                 <div class="d-flex welcome-select ">
-                                    <sh-select class="pull-left select-caret" required
-                                        style="width: 85px;margin-right: 28px;" name="phoneCode" [placeholder]="+91"
+                                    <sh-select class="pull-left select-caret" required [isRequired]="true"
+                                        name="phoneCode" [placeholder]="+91"
                                         [options]="countryPhoneCode" [(ngModel)]="company.phoneCode"
                                         [defaultValue]="company.phoneCode">
                                     </sh-select>
@@ -79,7 +78,7 @@ <h1>Welcome {{ this.logedInuser.name}}!</h1>
                             </span>
                         </div>
                         <div class="col-sm-12 mr-t1">
-                            <button class="btn btn-sky-blue mr-l1" style="margin-left: 0 !important;" type="submit"
+                            <button class="btn btn-sky-blue ml-0" type="submit"
                                 (click)="createCompany(null)" [disabled]="companyForm.invalid"
                                 [ladda]="isCompanyCreationInProcess$ | async">Next
                             </button>
diff --git a/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.scss b/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.scss
index e946261ac3c..bab3992ff6a 100644
--- a/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.scss
+++ b/apps/web-giddh/src/app/shared/on-boarding/on-boarding.component.scss
@@ -1,23 +1,23 @@
 /**new modal design**/
 @import "../../../assets//css/color.scss";
 .modal-body label {
-    color: #707070;
+    color: $gray;
     margin-bottom: 5px;
 }
 
 label .required {
     position: relative;
     top: 0px;
-    color: #cf0606;
+    color: $scarlet;
 }
 
 .form-control {
-    color: #707070;
+    color: $gray;
 }
 
 .modal-body p {
     font-size: 14px;
-    color: #b3b3b3;
+    color: $pink-swan;
     text-align: center;
     margin-left: -28px;
     margin-right: -28px;
@@ -29,26 +29,31 @@ label .required {
     display: block;
 }
 
-.welcome_wrapper {
+.welcome-wrapper {
     padding: 25px 0;
 }
 
-.welcome_header:after {
+.welcome-header:after {
     display: none;
 }
 
-.add-companyDetail {
-    background-color: #f7f8fa;
-    margin-bottom: 0 !important;
+.add-company-detail {
+    background-color: $alice-blue-light;
 }
 
-.welcome_header h1 {
+.welcome-select{
+    .select-caret{
+        width: 85px;
+        margin-right: 28px;
+    }
+}
+.welcome-header h1 {
     font-size: 30px;
     font-family: "opensans-regular";
     color: $midnight-blue;
 }
 
-.add-companyDetail p {
+.add-company-detail p {
     max-width: 300px;
     margin: 0 auto !important;
     display: block;
@@ -61,13 +66,13 @@ label .required {
 }
 
 .name-error {
-    color: #e51f0c;
+    color: $red;
     font-size: 11px;
     float: right;
 }
 
-.add-companyDetail {
-    background-color: #f7f8fa;
+.add-company-detail {
+    background-color: $alice-blue-light;
 }
 
 @media (min-width: 768px) {
@@ -82,10 +87,10 @@ label .required {
         margin: 30px auto;
         display: block;
     }
-    .welcome_header h1 {
+    .welcome-header h1 {
         font-size: 20px !important;
     }
-    .welcome_wrapper {
+    .welcome-wrapper {
         padding: 15px 0;
     }
 }
diff --git a/apps/web-giddh/src/app/shared/purchase-order-preview/purchase-order-preview.component.html b/apps/web-giddh/src/app/shared/purchase-order-preview/purchase-order-preview.component.html
index 0f3c63ce126..9fc53ad08e4 100644
--- a/apps/web-giddh/src/app/shared/purchase-order-preview/purchase-order-preview.component.html
+++ b/apps/web-giddh/src/app/shared/purchase-order-preview/purchase-order-preview.component.html
@@ -7,7 +7,7 @@ <h4 class="modal-title pull-left">Purchase Order Preview</h4>
 <div class="modal-body">
     <div class="row mrB1">
         <div class="col-sm-12 pdf-viewer">
-            <div class="pos-rel" *ngIf="!pdfPreviewHasError && !pdfPreviewLoaded">
+            <div class="position-relative" *ngIf="!pdfPreviewHasError && !pdfPreviewLoaded">
                 <div class="loader"></div>
             </div>
             <div class="error" [hidden]="!pdfPreviewHasError">
diff --git a/apps/web-giddh/src/app/shared/send-email-invoice/send-email-invoice.component.html b/apps/web-giddh/src/app/shared/send-email-invoice/send-email-invoice.component.html
index e303d521fcb..2fa0dc5d6b9 100644
--- a/apps/web-giddh/src/app/shared/send-email-invoice/send-email-invoice.component.html
+++ b/apps/web-giddh/src/app/shared/send-email-invoice/send-email-invoice.component.html
@@ -1,4 +1,4 @@
-<div class="modal-header themeBg pd2 pdL2 pdR2 clearfix" style="background-color: #525252">
+<div class="modal-header theme-bg pd-2 pd-l2 pd-r2 clearfix">
     <h3 class="modal-title bg" id="modal-title">Send Mail </h3>
     <i aria-hidden="true" class="icon-cross text-right close-modal" (click)="cancel()"></i>
 </div>
@@ -13,7 +13,7 @@ <h3 class="modal-title bg" id="modal-title">Send Mail </h3>
 
     <div class="clearfix"
         *ngIf="voucherType !== 'proforma' && voucherType !== 'proformas' && voucherType !== 'estimates' && voucherType !== 'estimate'">
-        <h3 class="fs16 mrB">Invoice Copy</h3>
+        <h3 class="font-16 mr-b05">Invoice Copy</h3>
         <hr>
 
         <div class="checkbox">
diff --git a/apps/web-giddh/src/app/signup/signup.component.html b/apps/web-giddh/src/app/signup/signup.component.html
index e9912981562..7d6a203da0a 100644
--- a/apps/web-giddh/src/app/signup/signup.component.html
+++ b/apps/web-giddh/src/app/signup/signup.component.html
@@ -24,7 +24,7 @@ <h4 class="mb-3">Signup to the new world of accounting</h4>
                                         *ngIf="loginUsing === 'email'">
                                         <div *ngIf="!(isLoginWithEmailSubmited$ | async)" class="clearfix">
 
-                                            <input class="form-control mb-1" formControlName="email" type="email"
+                                            <input class="form-control mr-b1" formControlName="email" type="email"
                                                 placeholder="Email address" required>
                                             <button [disabled]="!emailVerifyForm.controls['email'].valid"
                                                 [ladda]="isLoginWithEmailInProcess$ | async"
@@ -34,7 +34,7 @@ <h4 class="mb-3">Signup to the new world of accounting</h4>
 
                                         </div>
                                         <div *ngIf="isLoginWithEmailSubmited$ | async" class="clearfix">
-                                            <input class="form-control mb-1" formControlName="token" type="text"
+                                            <input class="form-control mr-b1" formControlName="token" type="text"
                                                 placeholder="Enter verification code here" required>
                                             <div class="clearfix mr-b2">
                                                 <button [disabled]="!emailVerifyForm.controls['token'].valid"
@@ -57,12 +57,12 @@ <h4 class="mb-3">Signup to the new world of accounting</h4>
 
 
                                     <!-- login with userName form -->
-                                    <form class="pos-rel" id="signUpWithPwd" [formGroup]="signUpWithPasswdForm"
+                                    <form class="position-relative" id="signUpWithPwd" [formGroup]="signUpWithPasswdForm"
                                         (ngSubmit)="SignupWithPasswd(signUpWithPasswdForm)"
                                         *ngIf="loginUsing === 'userName'"
                                         [hidden]="isSignupWithPasswordSuccess$ | async" autocomplete="off">
                                         <div class="clearfix form-group">
-                                            <input class="form-control mb-1" type="text" formControlName="email"
+                                            <input class="form-control mr-b1" type="text" formControlName="email"
                                                 placeholder="Email Id" />
                                             <input class="form-control" type="password"
                                                 (ngModelChange)="validatePwd($event)" formControlName="password"
@@ -86,8 +86,8 @@ <h4 class="mb-3">Signup to the new world of accounting</h4>
                                     <form class="" *ngIf="isSignupWithPasswordSuccess$ | async" id="signupVerifyForm"
                                         [formGroup]="signupVerifyForm" autocomplete="off">
                                         <div class="clearfix">
-                                            <!-- <input class="form-control mb-1" formControlName="email" type="text" placeholder="Email Id" required> -->
-                                            <input class="form-control mb-1" formControlName="verificationCode"
+                                            <!-- <input class="form-control mr-b1" formControlName="email" type="text" placeholder="Email Id" required> -->
+                                            <input class="form-control mr-b1" formControlName="verificationCode"
                                                 type="text" placeholder="Enter verification code here" required>
                                             <div class="clearfix mr-b2">
                                                 <button
@@ -141,7 +141,7 @@ <h4 class="mb-3">Signup to the new world of accounting</h4>
 <div class="modal fade" tabindex="-1" bsModal #emailVerifyModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
 
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
@@ -187,7 +187,7 @@ <h3>Sign Up with Giddh</h3>
 <div class="modal fade" tabindex="-1" bsModal #mobileVerifyModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" (click)="hideMobileModal()">×</span>
@@ -231,7 +231,7 @@ <h3>Sign Up with Giddh</h3>
 <div class="modal fade" tabindex="-1" bsModal #twoWayAuthModal="bs-modal" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content">
-            <div class="noBrdRdsModal">
+            <div class="border-radius-0">
                 <div class="modal-header">
                     <h3>Sign Up with Giddh</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal"
diff --git a/apps/web-giddh/src/app/signup/signup.component.scss b/apps/web-giddh/src/app/signup/signup.component.scss
index 4e8715494d9..0d669d0f388 100644
--- a/apps/web-giddh/src/app/signup/signup.component.scss
+++ b/apps/web-giddh/src/app/signup/signup.component.scss
@@ -4,7 +4,7 @@
 
 body.ununresponsive {
     padding: 0;
-    background: #2c2c43;
+    background: $valhalla;
 }
 
 .intro.login {
@@ -40,7 +40,7 @@ body.ununresponsive {
 }
 
 .login .brand-heading {
-    color: white;
+    color: $white;
     font-size: 40px;
     margin-bottom: 80px;
 }
@@ -85,19 +85,19 @@ body.ununresponsive {
 }
 
 .twitter {
-    background: #11b1e5;
+    background: $medium-spring-blue;
 }
 
 .google {
-    background: #de4d3c;
+    background: $light-maroon;
 }
 
 .linkedin {
-    background: #0e78aa;
+    background: $medium-black-cyan;
 }
 
 .mobile {
-    background: #26263a;
+    background: $valhalla;
 }
 
 .btn-login {
@@ -141,7 +141,7 @@ body.ununresponsive {
 .giddh-spinner {
     animation: rotate 1.5s infinite linear;
     background: #221f1f none repeat scroll 0 0;
-    border: 7px solid #c63b13;
+    border: 7px solid $red;
     border-radius: 50%;
     box-shadow: 0 -10px 0 14px $white inset;
     box-sizing: border-box;
@@ -165,15 +165,15 @@ body.ununresponsive {
 }
 
 .btn-login.btn-default {
-    color: #333;
+    color: $night-rider;
     background-color: $white;
-    border-color: #ccc;
+    border-color: $gainsboro;
 }
 
 .btn-login.btn-default:hover {
-    color: #000 !important;
+    color: $black !important;
     background-color: $white;
-    border-color: #ccc;
+    border-color: $gainsboro;
     box-shadow: none;
 }
 
@@ -194,7 +194,7 @@ button.close {
     font-size: 21px;
     font-weight: 700;
     line-height: 1;
-    color: #db7f53;
+    color: $light-maroon;
     text-shadow: none;
     opacity: 1;
 }
@@ -204,7 +204,7 @@ button.close {
 } */
 
 .email {
-    background: #10aae0;
+    background: $deep-sky-blue-hover;
 }
 
 /************* end login page *************/
@@ -242,7 +242,7 @@ h1 {
 .slide-content {
     padding: 0 100px;
     color: $white;
-    background: #2c2c43;
+    background: $valhalla;
     justify-content: space-evenly;
     text-align: left;
     flex-direction: column;
@@ -250,7 +250,7 @@ h1 {
 }
 
 .login-box h1 {
-    color: #0f0f27;
+    color: $russian-black;
     font-weight: 500;
 }
 
@@ -261,7 +261,7 @@ h1 {
 }
 
 small {
-    color: #333;
+    color: $night-rider;
 }
 
 /* social-login */
@@ -312,7 +312,7 @@ small {
     position: absolute;
     width: 40px;
     left: 0;
-    background: #fff8eb;
+    background: $floral-white;
     line-height: 38px;
     vertical-align: middle;
 }
@@ -324,13 +324,13 @@ small {
 
 .login-option,
 .login-option a {
-    color: #0c5fc1;
+    color: $primary;
     margin-top: 55px;
     font-weight: 500;
 }
 
 .login-option a {
-    border-bottom: 2px dotted #0c5fc1;
+    border-bottom: 2px dotted $primary;
 }
 
 .slide-content h1 {
@@ -400,7 +400,7 @@ small {
 }
 
 .hash-tag {
-    color: #e33536;
+    color: $red;
 }
 
 .blockquote-ico {
@@ -429,7 +429,7 @@ small {
     bottom: -38px;
     border-radius: 0;
     padding: 4px;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
 }
 
 .hint:before {
@@ -440,7 +440,7 @@ small {
     position: absolute;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
-    border-left: 8px solid #dddddd;
+    border-left: 8px solid $gainsboro;
     /* right: -8px; */
     /* top: 3px; */
     left: 6px;
diff --git a/apps/web-giddh/src/app/store/General/general.reducer.ts b/apps/web-giddh/src/app/store/General/general.reducer.ts
index 6408ad91b1f..65357ad0deb 100644
--- a/apps/web-giddh/src/app/store/General/general.reducer.ts
+++ b/apps/web-giddh/src/app/store/General/general.reducer.ts
@@ -261,11 +261,20 @@ export function GeneRalReducer(state: GeneralState = initialState, action: Custo
 
                 let flattenItem = cloneDeep(accountData.body);
                 flattenItem.uNameStr = flattenItem.parentGroups.map(mp => mp.uniqueName).join(', ');
-                return {
-                    ...state,
-                    groupswithaccounts: groupArray,
-                    flattenAccounts: [...state.flattenAccounts, flattenItem]
-                };
+
+                if(state.flattenAccounts) {
+                    return {
+                        ...state,
+                        groupswithaccounts: groupArray,
+                        flattenAccounts: [...state.flattenAccounts, flattenItem]
+                    };
+                } else {
+                    return {
+                        ...state,
+                        groupswithaccounts: groupArray,
+                        flattenAccounts: [flattenItem]
+                    };
+                }
             }
             return state;
         }
@@ -294,7 +303,7 @@ export function GeneRalReducer(state: GeneralState = initialState, action: Custo
                 let groupArray: GroupsWithAccountsResponse[] = _.cloneDeep(state.groupswithaccounts);
                 let flattenAccountsArray: IFlattenAccountsResultItem[] = _.cloneDeep(state.flattenAccounts);
                 let accountForDelete: IFlattenAccountsResultItem = flattenAccountsArray.find(f => f.uniqueName === d.request.accountUniqueName);
-                let parentGroupsLength = accountForDelete.parentGroups.length;
+                let parentGroupsLength = (accountForDelete && accountForDelete.parentGroups) ? accountForDelete.parentGroups.length : 0;
                 removeAccountFunc(groupArray, accountForDelete.parentGroups[parentGroupsLength - 1].uniqueName, d.request.accountUniqueName, null);
                 let index = flattenAccountsArray.findIndex(fa => fa.uniqueName === accountForDelete.uniqueName);
                 flattenAccountsArray.splice(index, 1);
@@ -312,7 +321,7 @@ export function GeneRalReducer(state: GeneralState = initialState, action: Custo
                 let groupArray: GroupsWithAccountsResponse[] = _.cloneDeep(state.groupswithaccounts);
                 let flattenAccountsArray: IFlattenAccountsResultItem[] = _.cloneDeep(state.flattenAccounts);
                 let accountForDelete: IFlattenAccountsResultItem = flattenAccountsArray.find(f => f.uniqueName === mAcc.queryString.accountUniqueName);
-                let parentGroupsLength = accountForDelete.parentGroups.length;
+                let parentGroupsLength = (accountForDelete && accountForDelete.parentGroups) ? accountForDelete.parentGroups.length : 0;
                 let deletedItem = removeAccountFunc(groupArray, accountForDelete.parentGroups[parentGroupsLength - 1].uniqueName, mAcc.queryString.accountUniqueName, null);
                 let parentPath = [];
                 addNewAccountFunc(groupArray, deletedItem, mAcc.request.uniqueName, false, parentPath);
@@ -488,17 +497,19 @@ const updateActiveGroupFunc = (groups: IGroupsWithAccounts[], uniqueName: string
 };
 
 const removeGroupFunc = (groups: IGroupsWithAccounts[], uniqueName: string, result: IGroupsWithAccounts) => {
-    for (let i = 0; i < groups.length; i++) {
-        if (groups[i].uniqueName === uniqueName) {
-            result = groups[i];
-            groups.splice(i, 1);
-            return result;
-        }
-        if (groups[i].groups) {
-            result = removeGroupFunc(groups[i].groups, uniqueName, result);
-            if (result) {
+    if(groups) {
+        for (let i = 0; i < groups.length; i++) {
+            if (groups[i].uniqueName === uniqueName) {
+                result = groups[i];
+                groups.splice(i, 1);
                 return result;
             }
+            if (groups[i].groups) {
+                result = removeGroupFunc(groups[i].groups, uniqueName, result);
+                if (result) {
+                    return result;
+                }
+            }
         }
     }
 };
diff --git a/apps/web-giddh/src/app/tallysync/completed/completed.component.html b/apps/web-giddh/src/app/tallysync/completed/completed.component.html
index 96df82b51d6..e7e48bf1b0c 100644
--- a/apps/web-giddh/src/app/tallysync/completed/completed.component.html
+++ b/apps/web-giddh/src/app/tallysync/completed/completed.component.html
@@ -22,7 +22,7 @@
                                 </span>
                                 <span class="entity-details">
                                     <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                    <div class="item-unq giddh-limit single-line-clamp">
+                                    <div class="item-unique giddh-limit single-line-clamp">
                                         {{ option.name || '-' }}
                                     </div>
                                 </span>
diff --git a/apps/web-giddh/src/app/tallysync/completed/completed.component.scss b/apps/web-giddh/src/app/tallysync/completed/completed.component.scss
index 5da7255e708..c0da4fbce43 100644
--- a/apps/web-giddh/src/app/tallysync/completed/completed.component.scss
+++ b/apps/web-giddh/src/app/tallysync/completed/completed.component.scss
@@ -1,12 +1,14 @@
+@import "../../../assets/css/color.scss";
+
 .panel {
     box-shadow: none;
 
     .running {
-        color: #0fa6e9;
+        color: $deep-sky-blue-hover;
     }
 
     .panel-heading {
-        background: #e6e6e6;
+        background: $whisper;
     }
 
     .panel-footer {
@@ -15,7 +17,7 @@
     }
 
     .panel-body {
-        color: #707070;
+        color: $gray;
         background: transparent;
         padding: 15px 0px 0px 0px;
 
@@ -23,12 +25,12 @@
             box-shadow: none;
             height: 5px;
             margin-bottom: 0px;
-            border: #dfdfdf 1px solid;
+            border: $gainsboro 1px solid;
         }
 
         .progress-bar {
-            background: #bebebe;
-            border: 1px solid #bebebe;
+            background: $silver;
+            border: 1px solid $silver;
             box-shadow: none;
         }
 
@@ -57,7 +59,7 @@
     }
 
     .text-success {
-        color: #63b214;
+        color: $success-green;
     }
 }
 @media(max-width:991px){
diff --git a/apps/web-giddh/src/app/tallysync/inprogress/inprogress.component.scss b/apps/web-giddh/src/app/tallysync/inprogress/inprogress.component.scss
index f7e3e597d07..87d72a28d50 100644
--- a/apps/web-giddh/src/app/tallysync/inprogress/inprogress.component.scss
+++ b/apps/web-giddh/src/app/tallysync/inprogress/inprogress.component.scss
@@ -1,12 +1,14 @@
+@import "../../../assets/css/color.scss";
+
 .panel {
     box-shadow: none;
 
     .running {
-        color: #0fa6e9;
+        color: $deep-sky-blue-hover;
     }
 
     .panel-heading {
-        background: #e6e6e6;
+        background: $whisper;
     }
 
     .panel-footer {
@@ -15,7 +17,7 @@
     }
 
     .panel-body {
-        color: #707070;
+        color: $gray;
         background: transparent;
         padding: 15px 0px 0px 0px;
 
@@ -23,12 +25,12 @@
             box-shadow: none;
             height: 5px;
             margin-bottom: 0px;
-            border: #dfdfdf 1px solid;
+            border: $gainsboro 1px solid;
         }
 
         .progress-bar {
-            background: #bebebe;
-            border: 1px solid #bebebe;
+            background: $silver;
+            border: 1px solid $silver;
             box-shadow: none;
         }
 
@@ -57,6 +59,6 @@
     }
 
     .text-success {
-        color: #63b214;
+        color: $success-green;
     }
 }
diff --git a/apps/web-giddh/src/app/tallysync/tallysync.component.scss b/apps/web-giddh/src/app/tallysync/tallysync.component.scss
index 7a95b9461de..562e30eb51a 100644
--- a/apps/web-giddh/src/app/tallysync/tallysync.component.scss
+++ b/apps/web-giddh/src/app/tallysync/tallysync.component.scss
@@ -1,12 +1,12 @@
 @import "../../assets/css/color.scss";
 .btn-default {
-    background: #fff;
+    background: $white;
     border-color: $chetwode-blue;
     color: $midnight-express;
 }
 .btn-default.active {
     background: $chetwode-blue;
-    color: #fff;
+    color: $white;
     border-color: $chetwode-blue;
     box-shadow: none;
 }
@@ -20,6 +20,6 @@
 .btn-default:active,
 .btn-default:active:focus {
     background: $chetwode-blue;
-    color: #fff;
+    color: $white;
     border-color: $chetwode-blue;
 }
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/bs/bs-grid/bs-grid.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/bs/bs-grid/bs-grid.component.html
index ad6fe81e4c0..6ce0ea44821 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/bs/bs-grid/bs-grid.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/bs/bs-grid/bs-grid.component.html
@@ -15,9 +15,9 @@ <h1>Sorry, No Data Found!</h1>
             <div class="table-container">
 
                 <div class="income mr-b1">
-                    <div class="clearfix profitLoss">
+                    <div class="clearfix profit-loss">
 
-                        <table class="mrB table basic bs-table-grid">
+                        <table class="mr-b05 table basic bs-table-grid">
                             <thead>
                                 <tr>
                                     <th class="pd-0" width="33.33%">
@@ -25,7 +25,7 @@ <h1>Sorry, No Data Found!</h1>
 
                                             <div [ngStyle]="{'display': showClearSearch ? 'none' : 'flex'}"
                                                 class="d-flex align-items-center">
-                                                <span class="ml-15 mr-1">Particular</span>
+                                                <span class="mr-l15 mr-1">Particular</span>
                                                 <i class="icon-search2" (click)="toggleSearch()"></i>
                                             </div>
 
@@ -56,7 +56,7 @@ <h1>Sorry, No Data Found!</h1>
                         </table>
 
                         <!--Grid-->
-                        <div class="mr1">
+                        <div class="m-10">
                             <div class="">
                                 <strong class="font-16">I EQUITY AND LIABILITIES </strong>
                             </div>
@@ -98,14 +98,14 @@ <h1>Sorry, No Data Found!</h1>
                                 <strong>{{ bsData?.liabTotalEnd | giddhCurrency }}</strong>
                             </div>
                         </div>
-                        <!--<hr class="bdrT"/>-->
+                        <!--<hr class="bd-rt"/>-->
                     </div>
                 </div>
 
                 <div class="expenses">
-                    <div class="clearfix profitLoss table-responsive">
+                    <div class="clearfix profit-loss table-responsive">
                         <!--Grid-->
-                        <div class="mr1">
+                        <div class="m-10">
                             <div class="">
                                 <strong class="font-16">II ASSETS</strong>
                             </div>
@@ -146,7 +146,7 @@ <h1>Sorry, No Data Found!</h1>
                         <strong>{{ bsData?.assetTotalEnd | giddhCurrency }}</strong>
                     </div>
                 </div>
-                <!--<hr class="bdrT"/>-->
+                <!--<hr class="bd-rt"/>-->
                 <!-- end of expenses -->
             </div>
             <!-- end row -->
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.html
index 73fe2ce3779..2709ff3842c 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.html
@@ -7,7 +7,7 @@
 
                 <form [formGroup]="filterForm" (submit)="filterData()" class="form-inline financial-select-year"
                     name="fromToDateForm" novalidate>
-                    <div class="form-group mr-15 linked-entities" *ngIf="showLabels && currentCompanyBranches?.length > 2">
+                    <div class="form-group mr-r15 linked-entities" *ngIf="showLabels && currentCompanyBranches?.length > 2">
                         <div class="form-group">
                             <sh-select [options]="currentCompanyBranches" formControlName="branchUniqueName" class="company-branch-dropdown"
                                 [showClear]="false" [ItemHeight]="33" width="100%" (selected)="handleBranchChange($event)"
@@ -23,7 +23,7 @@
                                             </span>
                                             <span class="entity-details">
                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                <div class="item-unq giddh-limit single-line-clamp">
+                                                <div class="item-unique giddh-limit single-line-clamp">
                                                     {{ option.name || '-' }}
                                                 </div>
                                             </span>
@@ -33,7 +33,7 @@
                             </sh-select>
                         </div>
                     </div>
-                    <div class="form-group mr-15" *ngIf="showLabels">
+                    <div class="form-group mr-r15" *ngIf="showLabels">
                         <div class="form-group">
                             <sh-select [options]="dateOptions" (selected)="dateOptionIsSelected($event)" class="company-branch-dropdown"
                                 formControlName="selectedDateOption" [isFilterEnabled]="true"
@@ -41,14 +41,14 @@
                             </sh-select>
                         </div>
                     </div>
-                    <div class="form-group mr-15" *ngIf="filterForm.get('selectedDateOption').value == '0'">
+                    <div class="form-group mr-r15" *ngIf="filterForm.get('selectedDateOption').value == '0'">
                         <div class="form-group">
                             <sh-select [options]="financialOptions" formControlName="selectedFinancialYearOption"
                                 [isFilterEnabled]="true" [placeholder]="'Select Option'" [showClear]="false"
                                 (selected)="selectFinancialYearOption($event)" [ItemHeight]="33"></sh-select>
                         </div>
                     </div>
-                    <div class="form-group relative mr-15 datepicker-field" *ngIf="filterForm.get('selectedDateOption').value == '1'">
+                    <div class="form-group relative mr-r15 datepicker-field" *ngIf="filterForm.get('selectedDateOption').value == '1'">
                         <div class="custom-datepicker relative" (click)="showGiddhDatepicker($event)">
                             <i class="icon-calender calendar-addon"></i>
                             <input type="text" name="selectedDateRange" [value]="(selectedDateRangeUi) ? selectedDateRangeUi : ''" class="giddh-datepicker date-range-picker border-radius-2" />
@@ -58,7 +58,7 @@
 
                     <div class="form-group" *ngIf="!(showLoader)">
 
-                        <div class="form-group pull-left mr-15 d-inline-flex relative" *ngIf="(tags$ | async)?.length">
+                        <div class="form-group pull-left mr-r15 d-inline-flex relative" *ngIf="(tags$ | async)?.length">
 
                             <i class="glyphicon glyphicon-triangle-bottom"></i>
                             <sh-select [options]="tags$ | async" name="selectedTag" formControlName="tagName"
@@ -71,13 +71,13 @@
 
                         <div class="form-group pull-left">
 
-                            <a class="cp expanIcon" (click)="emitExpand()" data-placement="top" tooltip="Expand All"
+                            <a class="cp expand-icon" (click)="emitExpand()" data-placement="top" tooltip="Expand All"
                                 *ngIf="!expand">
 
                                 <span class="icon-expandIcon"></span>
                             </a>
 
-                            <a class="cp expanIcon" (click)="emitExpand()" data-placement="top" tooltip="Collapse All"
+                            <a class="cp expand-icon" (click)="emitExpand()" data-placement="top" tooltip="Collapse All"
                                 *ngIf="expand">
 
                                 <span class="icon-collapse"></span>
@@ -102,13 +102,13 @@
                         class="pull-right">
                     </tb-export-csv>
 
-                    <tb-export-xls *ngIf="tbExportXLS" [trialBalanceRequest]="filterForm.value" class="pull-right mr-15">
+                    <tb-export-xls *ngIf="tbExportXLS" [trialBalanceRequest]="filterForm.value" class="pull-right mr-r15">
                     </tb-export-xls>
 
 
                     <tb-export-pdf *ngIf="tbExportPdf" [trialBalanceRequest]="filterForm.value"
                         [selectedCompany]="selectedCompany" (tbExportPdfEvent)="tbExportPdfEvent.emit($event)"
-                        class="pull-right mr-15"></tb-export-pdf>
+                        class="pull-right mr-r15"></tb-export-pdf>
 
                     <pl-export-xls *ngIf="plBsExportXLS" [fy]="filterForm.controls['fy'].value"
                         [filters]="filterForm.value" class="pull-right"></pl-export-xls>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.scss b/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.scss
index 9c39977860c..d4a2d927e4a 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/filter/tb-pl-bs-filter.component.scss
@@ -1,6 +1,6 @@
 @import "../../../../assets/css/color.scss";
-.daterange_picker_tb-pl-bs {
-    background-color: #fff !important;
+.daterange-picker-tb-pl-bs {
+    background-color: $white !important;
     text-decoration: none;
     text-align: left;
     border: 1px solid $gainsboro;
@@ -9,7 +9,7 @@
 
     font-size: 14px;
 }
-.tb-btnApply {
+.tb-btn-apply {
     margin-top: 5px;
 }
 .liabilities-assets {
@@ -27,20 +27,20 @@
     z-index: 100;
     top: 0;
 }
-.expanIcon {
+.expand-icon {
     height: 36px;
     display: flex;
     align-items: flex-end;
 }
-.expanIcon span {
+.expand-icon span {
     display: flex;
     width: 36px;
     height: 36px;
     justify-content: center;
     align-items: center;
-    background-color: #fff;
+    background-color: $white;
     font-size: 18px;
-    color: #1a237e !important;
+    color: $midnight-blue !important;
     border: 1px solid $gainsboro;
 }
 .download-data-icon{
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid-row.component.ts b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid-row.component.ts
index c601ed2cd94..db3d30f0da3 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid-row.component.ts
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid-row.component.ts
@@ -6,7 +6,7 @@ import { ChildGroup } from '../../../../models/api-models/Search';
     template: `
     <div class="pl-grid-row row" [trial-accordion]="groupDetail" *ngIf="groupDetail.groupName && (groupDetail.isVisible || groupDetail.isCreated)" [ngClass]="{'isHidden': !groupDetail.isVisible }">
       <div class="col-8  group" [innerHTML]="groupDetail.groupName | highlight:search" [ngStyle]="{'padding-left': padding+'px'}"></div>
-      <div class="col-4  bdrL group pull-right" *ngIf="!groupDetail.level1">
+      <div class="col-4  bd-rl group pull-right" *ngIf="!groupDetail.level1">
         <!-- {{groupDetail.closingBalance | recType}} -->
         <div class="row">
           <span class="col-6 text-right" [ngClass]="{'invisible': groupDetail.isOpen && (groupDetail.accounts.length || groupDetail.childGroups.length)}">
@@ -20,22 +20,22 @@ import { ChildGroup } from '../../../../models/api-models/Search';
         </div>
       </div>
 
-      <div class="col-4  bdrL group text-right pull-right pd-1" *ngIf="groupDetail.level1">&nbsp;</div>
-      <!--    <div class="col-2  bdrL group text-right"> <span>{{groupDetail.forwardedBalance.amount | giddhCurrency}}{{groupDetail.forwardedBalance | recType}} </span></div> -->
+      <div class="col-4  bd-rl group text-right pull-right pd-1" *ngIf="groupDetail.level1">&nbsp;</div>
+      <!--    <div class="col-2  bd-rl group text-right"> <span>{{groupDetail.forwardedBalance.amount | giddhCurrency}}{{groupDetail.forwardedBalance | recType}} </span></div> -->
     </div>
     <ng-container *ngFor="let account of groupDetail.accounts">
       <section class=" row-2  pl-grid-row account" [ngClass]="{'isHidden': !account.isVisible }" *ngIf="account.isVisible || account.isCreated"
                (dblclick)="entryClicked(account)">
         <div class="row" *ngIf="account.name && (account.closingBalance.amount !== 0 || account.openingBalance.amount !== 0)">
           <div class="col-8" [ngStyle]="{'padding-left': (padding+20)+'px'}" [innerHTML]="account.name | lowercase  | highlight:search"></div>
-          <div class="col-4 bdrL text-left pull-right">
+          <div class="col-4 bd-rl text-left pull-right">
             <div class="row d-flex">
               <!-- {{account.closingBalance | recType}} -->
               <span class="col-6 text-right"> {{account.closingBalance.amount | giddhCurrency}} </span>
               <span class="col-6 invisible"> {{account.closingBalance.amount | giddhCurrency}} </span>
             </div>
           </div>
-          <!-- <div class="col-2 bdrL text-left"><span>{{account.openingBalance.amount | giddhCurrency}}{{account.openingBalance | recType}}</span></div> -->
+          <!-- <div class="col-2 bd-rl text-left"><span>{{account.openingBalance.amount | giddhCurrency}}{{account.openingBalance | recType}}</span></div> -->
         </div>
       </section>
     </ng-container>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.html
index b8ccc9fe70c..27f67c02b2f 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.html
@@ -9,14 +9,10 @@ <h1>Sorry, No Data Found!</h1>
     <div *ngIf="!noData" class="tb-wrapper">
         <div class="mr-t2 clearfix">
             <!--top heading  labels-->
-
-
             <!--Main Grid-->
             <div class="table-container">
-
                 <div class="income">
-                    <div class="clearfix profitLoss">
-
+                    <div class="clearfix profit-loss">
                         <table class="table basic pl-table-grid">
                             <thead>
                                 <tr>
@@ -24,7 +20,7 @@ <h1>Sorry, No Data Found!</h1>
                                         <div #searchContainer (clickOutside)="clickedOutside($event, searchContainer)">
 
                                             <div [ngStyle]="{'display': showClearSearch ? 'none' : 'flex'}" class="align-items-center">
-                                                <span class="ml-15 mr-1">Account</span>
+                                                <span class="mr-l15 mr-1">Account</span>
                                                 <i class="icon-search2" (click)="toggleSearch()" ></i>
                                             </div>
 
@@ -78,9 +74,9 @@ <h1>Sorry, No Data Found!</h1>
 
                             <section class="row-1">
                                 <div class="pl-grid-row row">
-                                    <div class="col-8  group" style="padding-left: 10px;">Total Cost of Goods Sold
+                                    <div class="col-8 group pd-l1">Total Cost of Goods Sold
                                     </div>
-                                    <div class="col-4  bdrL group text-right pull-right">
+                                    <div class="col-4 bd-rl group text-right pull-right">
                                         <span> {{ cogsData?.closingBalance.amount | giddhCurrency }} </span>
                                     </div>
                                 </div>
@@ -93,7 +89,7 @@ <h1>Sorry, No Data Found!</h1>
                             <div class="col-8  group pd-1">
                                 <strong>Gross Profit</strong>
                             </div>
-                            <div class="col-4  group text-right pull-right bdrL pd-1">
+                            <div class="col-4  group text-right pull-right bd-rl pd-1">
                                 <strong>{{ plData?.incomeStatment.grossProfit.amount | giddhCurrency }}</strong>
                             </div>
                             <!-- commented due to new response
@@ -102,12 +98,12 @@ <h1>Sorry, No Data Found!</h1>
                 </div>
                -->
                         </div>
-                        <!-- <hr class="bdrT" /> -->
+                        <!-- <hr class="bd-rt" /> -->
                     </div>
                 </div>
 
                 <div class="expenses">
-                    <div class="clearfix profitLoss table-responsive">
+                    <div class="clearfix profit-loss table-responsive">
 
                         <div *ngIf="plData && plData.expArr">
                             <!--Grid-->
@@ -125,8 +121,8 @@ <h1>Sorry, No Data Found!</h1>
 
                                     <section class="row-1" *ngIf="grp.groupName && grp.uniqueName === 'revenue'">
                                         <div class="pl-grid-row row">
-                                            <div class="col-8  group" style="padding-left: 10px;">Total Revenue</div>
-                                            <div class="col-4  bdrL group text-right pull-right">
+                                            <div class="col-8 group pd-l1">Total Revenue</div>
+                                            <div class="col-4 bd-rl group text-right pull-right">
                                                 <span> {{ plData?.incomeStatment.revenue.amount | giddhCurrency }}
                                                 </span>
                                             </div>
@@ -135,30 +131,30 @@ <h1>Sorry, No Data Found!</h1>
 
                                     <div class="group clearfix row"
                                         *ngIf="grp.groupName && grp.uniqueName === 'operatingcost'">
-                                        <div class="col-8  group pd-1">
+                                        <div class="col-8  group pd-l1">
                                             Total Operating Expenses
                                         </div>
-                                        <div class="col-4  group text-right pull-right bdrL pd-1">
+                                        <div class="col-4  group text-right pull-right bd-rl pd-l1">
                                             {{ plData?.incomeStatment.operatingExpenses.amount | giddhCurrency }}
                                         </div>
                                     </div>
 
-                                    <div class="account clearfix fs16 row"
+                                    <div class="account clearfix font-16 row"
                                         *ngIf="grp.groupName && grp.uniqueName === 'operatingcost'">
-                                        <div class="col-8  group pd-1">
-                                            <strong class="fs16">Operating Profit/Loss (EBIT)</strong>
+                                        <div class="col-8  group pd-l1">
+                                            <strong class="font-16">Operating Profit/Loss (EBIT)</strong>
                                         </div>
-                                        <div class="col-4  group text-right pull-right bdrL pd-1">
+                                        <div class="col-4  group text-right pull-right bd-rl pd-l1">
                                             <strong
-                                                class="fs16">{{ plData?.incomeStatment.operatingProfit.amount | giddhCurrency }}</strong>
+                                                class="font-16">{{ plData?.incomeStatment.operatingProfit.amount | giddhCurrency }}</strong>
                                         </div>
                                     </div>
 
                                     <section class="row-1" *ngIf="grp.groupName && grp.uniqueName === 'otherexpenses'">
                                         <div class="pl-grid-row row">
-                                            <div class="col-8  group" style="padding-left: 10px;">Total Other
+                                            <div class="col-8  group pd-l1">Total Other
                                                 Expenses</div>
-                                            <div class="col-4  bdrL group text-right pull-right">
+                                            <div class="col-4  bd-rl group text-right pull-right pd-l1">
                                                 <span> {{ plData?.incomeStatment.otherExpenses.amount | giddhCurrency }}
                                                 </span>
                                             </div>
@@ -166,8 +162,8 @@ <h1>Sorry, No Data Found!</h1>
                                     </section>
 
                                     <!-- <div class="group clearfix" *ngIf="grp.groupName && grp.uniqueName === 'otherexpenses'">
-                      <div class="col-4  group pd-1" style="padding-left: 10px;">Total </div>
-                      <div class="col-3  bdrL group text-right pull-right bdrL pd-1">
+                      <div class="col-4  group pd-1 pd-l1">Total </div>
+                      <div class="col-3  bd-rl group text-right pull-right bd-rl pd-1">
                           <span> {{ plData?.incomeStatment.otherExpenses.amount | giddhCurrency }} </span>
                       </div>
                   </div> -->
@@ -184,10 +180,10 @@ <h1>Sorry, No Data Found!</h1>
                 </div>
 
                 <div class="account clearfix row" *ngIf="plData && plData?.incomeStatment">
-                    <div class="col-8  group pd-1">
+                    <div class="col-8  group pd-l1">
                         <strong>Income Before Taxes (EBT)</strong>
                     </div>
-                    <div class="col-4  group text-right pull-right bdrL pd-1">
+                    <div class="col-4  group text-right pull-right bd-rl pd-l1">
                         <strong>
                             <span
                                 *ngIf="plData?.incomeStatment.incomeBeforeTaxes.type === 'DEBIT' && plData?.incomeStatment.incomeBeforeTaxes.amount !== 0">-</span>
@@ -198,11 +194,11 @@ <h1>Sorry, No Data Found!</h1>
 
                 <ng-template
                     *ngIf="plData && plData?.incomeStatment && plData?.incomeStatment.incomeBeforeTaxes.type === 'CREDIT'">
-                    <div class="group clearfix fs14 row">
-                        <div class="col-8  group pd-1">
+                    <div class="group clearfix font-14 row">
+                        <div class="col-8  group pd-l1">
                             Taxes (30%)
                         </div>
-                        <div class="col-4  group text-right pull-right bdrL pd-1">
+                        <div class="col-4  group text-right pull-right bd-rl pd-l1">
                             {{ plData?.incomeStatment.appliedTax | giddhCurrency }}
                         </div>
                     </div>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.scss b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.scss
index 844d8c55945..7395bca2c30 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/pl/pl-grid/pl-grid.component.scss
@@ -3,7 +3,7 @@
       padding: 0;
     }
 
-    :host ::ng-deep .table-container .profitLoss section div > div {
+    :host ::ng-deep .table-container .profit-loss section div > div {
       padding-left: 8px;
     }
 
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.html
index af6a1297c68..1bb68049f32 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.html
@@ -13,7 +13,7 @@
 </div>
 <ng-container *ngFor="let account of groupDetail.accounts">
     <!-- <section class="row row-2 account " [ngClass]="{'isHidden': !account.isVisible }"> -->
-    <section class="row-2 account " *ngIf="account.isVisible">
+    <section class="row-2 account" *ngIf="account.isVisible">
         <div class="row"
             *ngIf="account.name && (account.closingBalance?.amount !== 0 || account.openingBalance?.amount !== 0)">
             <div class="col-4 account" [ngStyle]="{'padding-left': (padding+20)+'px'}"
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.scss b/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.scss
index 10a32a1351a..c0f303c3903 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb-pl-bs-grid-row.component.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/css/color.scss";
+
 .tb-pl-modal-header {
     position: absolute;
     top: 20px;
@@ -5,10 +7,10 @@
     right: auto;
     z-index: 1;
     margin: 0px;
-    background: white;
+    background: $white;
     width: 50%;
     padding: 1px;
-    box-shadow: 1px 0px 9px grey;
+    box-shadow: 1px 0px 9px $gray;
 }
 
 .tb-pl-modal-header-div {
@@ -25,9 +27,8 @@
     border-right: 0px;
     padding: 11px 10px 10px 10px;
     width: 100%;
-    background: #ffece094;
+    background: $chablis;
 }
-
 .tb-pl-custom-title {
     font-family: "opensans-semibold" !important;
     font-size: 16px !important;
@@ -38,15 +39,14 @@
 }
 
 .custom-detail h4 {
-    color: #707070;
+    color: $gray;
     margin-top: 7px;
     font-size: 14px !important;
-    font-family: opensans-regular !important;
 }
 
 .height-82px {
     padding: 10px 10px 15px 10px;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid $gainsboro;
 }
 
 ul.list-unstyled li {
@@ -54,7 +54,7 @@ ul.list-unstyled li {
 }
 
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 
 ::ng-deep.table-container section {
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.html
index 5b273381700..6841e257316 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.html
@@ -3,32 +3,32 @@
         <div class="row">
             <div class="pull-left">
                 <form class="form-inline">
-                    <div class="form-group mrR1">
+                    <div class="form-group mr-r1">
                         <label class="d-block">Filter Type</label>
-                        <div class="form-group closebtn">
-                            <input type="text" readonly value="Financial year" class="form-control selectedVal">
+                        <div class="form-group close-btn">
+                            <input type="text" readonly value="Financial year" class="form-control selected-val">
                             <span class="clear">×</span> </div>
                     </div>
-                    <div class="form-group mrR1">
+                    <div class="form-group mr-r1">
                         <label class="d-block">Select Year</label>
-                        <div class="form-group closebtn">
-                            <input type="text" readonly value="FY-APR2018-MAR2019" class="form-control selectedVal">
+                        <div class="form-group close-btn">
+                            <input type="text" readonly value="FY-APR2018-MAR2019" class="form-control selected-val">
                             <span class="clear">×</span> </div>
                     </div>
-                    <div class="form-group mrR1"><br>
+                    <div class="form-group mr-r1"><br>
                         <button class="btn btn-success" type="submit"> Apply </button>
                     </div>
-                    <div class="form-group mrR1"><br>
-                        <input type="checkbox" class="checkboxbtn" name="showOpening" [(ngModel)]="showOpening">
-                        openingcheck
+                    <div class="form-group mr-r1"><br>
+                        <input type="checkbox" class="checkbox-btn" name="showOpening" [(ngModel)]="showOpening">
+                        opening-check
                     </div>
-                    <div class="form-group mrR1"><br>
-                        <input type="checkbox" class="checkboxbtn" name="showTransactions"
+                    <div class="form-group mr-r1"><br>
+                        <input type="checkbox" class="checkbox-btn" name="showTransactions"
                             [(ngModel)]="showTransactions">
                         Transactions
                     </div>
-                    <div class="form-group mrR1"><br>
-                        <input type="checkbox" class="checkboxbtn" name="showClosing" [(ngModel)]="showClosing">
+                    <div class="form-group mr-r1"><br>
+                        <input type="checkbox" class="checkbox-btn" name="showClosing" [(ngModel)]="showClosing">
                         Closing
                     </div>
                 </form>
@@ -54,7 +54,7 @@
         </div>
 
         <div class="col-4">
-            <div class="form-group mrB">
+            <div class="form-group mr-b05">
                 <div class="input-group input-group-md">
                     <input class="form-control" placeholder="Search" type="search">
                     <!---->
@@ -77,17 +77,17 @@
                 <thead>
                     <tr>
                         <th>Particular</th>
-                        <th *ngIf="showOpening" align="right" style="text-align:right; display:table-cell;"
-                            class="openingcheck">Opening Dr.</th>
-                        <th *ngIf="showOpening" align="right" style="text-align:right; display:table-cell;"
-                            class="openingcheck">Opening Cr.</th>
-                        <th *ngIf="showTransactions" align="right" style="text-align:right;" class="transcheck">Dr.
+                        <th *ngIf="showOpening" align="right"
+                            class="opening-check text-right table-cell">Opening Dr.</th>
+                        <th *ngIf="showOpening" align="right"
+                            class="opening-check text-right table-cell">Opening Cr.</th>
+                        <th *ngIf="showTransactions" align="right" class="transaction-check text-right">Dr.
                             Trans</th>
-                        <th *ngIf="showTransactions" align="right" style="text-align:right;" class="transcheck">Cr.
+                        <th *ngIf="showTransactions" align="right" class="transaction-check text-right">Cr.
                             Trans</th>
-                        <th *ngIf="showClosing" align="right" style="text-align:right;" class="closingcheck">Closing Dr.
+                        <th *ngIf="showClosing" align="right" class="closing-check text-right">Closing Dr.
                         </th>
-                        <th *ngIf="showClosing" align="right" style="text-align:right;" class="closingcheck">Closing Cr.
+                        <th *ngIf="showClosing" align="right" class="closing-check text-right">Closing Cr.
                         </th>
                     </tr>
                 </thead>
@@ -95,91 +95,16 @@
                     <ng-container *ngFor="let grp of (data$ | async).groupDetails; let i = index">
                         <tr>
                             <td>{{grp.groupName}}</td>
-                            <td *ngIf="showOpening" align="right" style="text-align:right; display:table-cell;"
-                                class="openingcheck">{{ grp.closingBalance.amount }}</td>
-                            <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table
+                            <td *ngIf="showOpening" align="right"
+                                class="opening-check text-right table-cell">{{ grp.closingBalance.amount }}</td>
+                            <td *ngIf="showOpening" align="right" class="opening-check table-cell">Table
                                 cell</td>
-                            <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-                            <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-                            <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-                            <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
+                            <td *ngIf="showTransactions" align="right" class="transaction-check">Table cell</td>
+                            <td *ngIf="showTransactions" align="right" class="transaction-check">Table cell</td>
+                            <td *ngIf="showClosing" align="right" class="closing-check">Table cell</td>
+                            <td *ngIf="showClosing" align="right" class="closing-check">Table cell</td>
                         </tr>
-                        <!-- <tr class="exp11" *ngIf="isExpanded">
-                <td align="center">Another group</td>
-                <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-                <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-                <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-                <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-                <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-                <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              </tr> -->
                     </ng-container>
-
-                    <!-- <tr>
-              <td>3</td>
-
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-
-            </tr>
-            <tr class="exp11" *ngIf="isExpanded">
-              <td align="center">expand</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr>
-            <tr>
-              <td>4</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr>
-            <tr>
-              <td>5</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr>
-            <tr>
-              <td>6</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr>
-            <tr>
-              <td>7</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr>
-             <tr>
-              <td>8</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showOpening" align="right" style="display:table-cell;" class="openingcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showTransactions" align="right" class="transcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-              <td *ngIf="showClosing" align="right" class="closingcheck">Table cell</td>
-            </tr> -->
                 </tbody>
             </table>
         </div>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.scss b/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.scss
index 5fcb3ba48e5..51e76ad8030 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb-synram/tb-synram.component.scss
@@ -3,7 +3,7 @@
 .mr-t2 {
     margin-top: 20px;
 }
-.mrR1 {
+.mr-r1 {
     margin-right: 10px;
 }
 form label {
@@ -22,10 +22,10 @@ form label {
     box-shadow: none;
 }
 
-.form-inline .form-control.selectedVal {
-    border: 1px solid #d6d6d6 !important;
+.form-inline .form-control.selected-val {
+    border: 1px solid $gainsboro !important;
     padding-right: 22px !important;
-    background: #fff !important;
+    background: $white !important;
 }
 .clear {
     position: absolute;
@@ -38,13 +38,13 @@ form label {
     font-weight: 500;
     line-height: 100%;
     opacity: 0.5;
-    color: black;
+    color: $black;
     transform: translateY(-50%);
 }
-.form-group.closebtn {
+.form-group.close-btn {
     position: relative;
 }
-input.checkboxbtn {
+input.checkbox-btn {
     position: relative;
     top: 4px;
 }
@@ -52,10 +52,10 @@ input.checkboxbtn {
 span.expand {
     display: inline-block;
     padding: 2px 5.8px;
-    background: #eee;
+    background: $whisper-light;
     font-size: 18px;
 
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     width: 30px;
     height: 30px;
     cursor: pointer;
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.html b/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.html
index fa448d88bf1..439eed63f6a 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.html
@@ -10,9 +10,9 @@ <h1>Sorry, No Data Found!</h1>
 <div *ngIf="!noData" class="tb-wrapper">
     <div class=" clearfix">
         <!-- start main content -->
-        <div class="mt-1 mb-1 pull-right">
+        <div class="mt-1 mr-b1 pull-right">
 
-            <div class="tbplList">
+            <div class="tbpl-list">
 
                 <ul class="list-inline color-codes pull-right">
 
@@ -42,7 +42,7 @@ <h1>Sorry, No Data Found!</h1>
             <!-- end of column -->
         </div>
         <div class="table-container clearfix trial-balance">
-            <section style="padding-left: 7px;background-color: #fff;">
+            <section class="tb-section">
                 <div class="row">
 
 
@@ -54,29 +54,26 @@ <h1>Sorry, No Data Found!</h1>
                             <i class="icon-search2" id="showSearch" (click)="toggleSearch()"></i>
                         </span>
 
-                        <span [hidden]="!showClearSearch" style="width: 103%;margin-left: -7px;display: flex">
+                        <span [hidden]="!showClearSearch" class="show-clear-search">
                             <input type="search" #searchInputEl class="form-control"
                                 placeholder="Search" aria-describedby="sizing-addon3"
                                 [formControl]="accountSearchControl">
-                            <!--<i class="icon-search2" (click)="showClearSearch = false;$event.stopPropagation();"-->
-                            <!--id="hideSearch"-->
-                            <!--style="position: relative;top: -11px;left:94%;z-index: 1; font-size: 13px;color: #A6A6A6;cursor: pointer;"></i>-->
                         </span>
 
                     </div>
 
-                    <div style=" padding: 14px 8px 14px 0;" class="col-2 text-right">
+                    <div class="col-2 text-right table-th">
                         <strong>Opening
                             Bal</strong></div>
-                    <div style="padding: 14px 8px 14px 0;" class="col-2  text-right">
+                    <div class="col-2 text-right table-th">
                         <strong> Debit</strong>
 
                     </div>
-                    <div style="padding: 14px 8px 14px 0;" class="col-2 text-right">
+                    <div class="col-2 text-right table-th">
                         <strong> Credit</strong>
 
                     </div>
-                    <div class="col-2 text-right" style="padding: 14px 20px 14px 0;"><strong>Closing Bal</strong>
+                    <div class="col-2 text-right table-th-closing"><strong>Closing Bal</strong>
                     </div>
 
 
@@ -117,15 +114,15 @@ <h1>Sorry, No Data Found!</h1>
                     <table class="table basic mb-0 table-footer">
                         <thead>
                             <tr>
-                                <th class="" style="width: 33.5%;">
-                                    <span class="">Grand Total</span>
+                                <th width="33.5%;">
+                                    <span>Grand Total</span>
                                 </th>
-                                <th style="width: 16.6%;" class="text-right">
+                                <th width="16.6%" class="text-right">
                                     {{ data$.forwardedBalance?.amount | giddhCurrency}}</th>
-                                <th style="width: 16.6%;" class="text-right">{{ data$.debitTotal | giddhCurrency}}</th>
-                                <th style="width: 16.6%;" class="text-right">{{ data$.creditTotal | giddhCurrency}}</th>
-                                <th style="width: 16.6%;" class="text-right">
-                                    <span class="">{{ data$.closingBalance?.amount | giddhCurrency}}</span>
+                                <th width="16.6%" class="text-right">{{ data$.debitTotal | giddhCurrency}}</th>
+                                <th width="16.6%" class="text-right">{{ data$.creditTotal | giddhCurrency}}</th>
+                                <th width="16.6%" class="text-right">
+                                    <span>{{ data$.closingBalance?.amount | giddhCurrency}}</span>
                                 </th>
                             </tr>
                         </thead>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.scss b/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.scss
index bad85ce5306..cbad12d7356 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/components/tb/tb-grid/tb-grid.component.scss
@@ -35,6 +35,27 @@
 .table-footer th {
     border-top: none !important;
 }
+.tb-section{
+    padding-left: 7px;
+    background-color: $white;
+    .search-container{
+        padding: 0;
+        display: flex;
+        align-items: center;
+        .show-clear-search{
+            width: 103%;
+            margin-left: -7px;
+            display: flex
+        }
+    }
+    .table-th{
+        padding: 14px 8px 14px 0;
+    }
+
+    .table-th-closing{
+        padding: 14px 20px 14px 0;
+    }
+}
 @media (max-width: 1024px) {
     .tb-wrapper {
         width: 100%;
diff --git a/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.html b/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.html
index 2b1ffba5b3c..3ad3370ad8c 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.html
+++ b/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.html
@@ -4,21 +4,21 @@
         <tab heading="Trial Balance"
             (selectTab)="setCurrentPageTitle('Trial Balance'); tabChanged('trial-balance', 0); CanTBLoad = true;CanPLLoad = false;CanBSLoad = false;"
             [id]="(CanTBLoad) ? 'giddh-page-heading': ''">
-            <div class="container-fluid pt-15">
+            <div class="container-fluid pd-t15">
                 <tb [isV2]="false" [selectedCompany]="selectedCompany" *ngIf="CanTBLoad"></tb>
             </div>
         </tab>
         <tab heading="Profit &amp; Loss"
             (selectTab)="setCurrentPageTitle('Profit &amp; Loss'); tabChanged('profit-loss', 1); CanPLLoad = true;CanTBLoad = false;CanBSLoad = false;"
              [id]="(CanPLLoad) ? 'giddh-page-heading': ''">
-            <div class="container-fluid pt-15">
+            <div class="container-fluid pd-t15">
                 <pl [selectedCompany]="selectedCompany" *ngIf="CanPLLoad"></pl>
             </div>
         </tab>
         <tab heading="Balance Sheet"
             (selectTab)="setCurrentPageTitle('Balance Sheet'); tabChanged('balance-sheet', 2); CanBSLoad = true;CanTBLoad = false;CanPLLoad = false;"
             [id]="(CanBSLoad) ? 'giddh-page-heading': ''">
-            <div class="container-fluid pt-15">
+            <div class="container-fluid pd-t15">
                 <bs [selectedCompany]="selectedCompany" *ngIf="CanBSLoad"></bs>
             </div>
         </tab>
diff --git a/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.scss b/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.scss
index 70d465a139b..e69de29bb2d 100644
--- a/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.scss
+++ b/apps/web-giddh/src/app/tb-pl-bs/tb-pl-bs.component.scss
@@ -1,14 +0,0 @@
-// ::ng-deep.daterange_picker_tb-pl-bs {
-//   border: 0;
-//   background: #f7f8fa !important;
-//   text-decoration-line: underline;
-//   text-decoration-style: dashed;
-//   padding: 5px !important;
-//   height: 34px;
-//   text-align: center;
-// }
-
-// ::ng-deep.daterange_picker_tb-pl-bs:hover {
-//   border: 1px !important;
-//   background: #fff !important;
-// }
diff --git a/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.html b/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.html
index f7eb400b45f..1f36f316f7e 100644
--- a/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.html
+++ b/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.html
@@ -1,6 +1,6 @@
 <!-- AccountInfo -->
-<div *ngIf="isModalOpen" class="p-modal-tolltip">
-    <div class="tb-pl-modal-header" style="padding: 0 !important;">
+<div *ngIf="isModalOpen" class="p-modal-tooltip">
+    <div class="tb-pl-modal-header p-0">
 
         <div class="account-detail-modal-header-div">
 
@@ -8,9 +8,9 @@
 
                 <div class="account-detail-custom-header">
 
-                    <div class="d-flex" style="padding: 0px; border-right:0px;">
+                    <div class="d-flex p-0 border-right-0">
 
-                        <div class="account-detail-padding" style="flex: 1;border-right: 0px;">
+                        <div class="account-detail-padding flex-grow-1 border-right-0">
                             <h3 class="account-detail-custom-title">{{accInfo?.name}}</h3>
                         </div>
 
@@ -61,29 +61,29 @@ <h4>{{accInfo?.email}}</h4>
 
 
 <!--Modal for Mail/SMS-->
-<div class="modal fade noBrdRdsModal" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true"
+<div class="modal fade border-radius-0" tabindex="-1" bsModal #mailModal="bs-modal" role="dialog" aria-hidden="true"
     (click)="$event.stopPropagation()">
     <div class="modal-dialog modal-md" style="margin:auto;margin-top: 200px">
 
         <div class="modal-content" style="padding: 8px 8px 8px 8px;">
 
-            <div class="noBrdRdsModal" style="padding: 8px 8px 8px 8px;">
+            <div class="border-radius-0" style="padding: 8px 8px 8px 8px;">
 
-                <div class="modal-header themeBg pdL2 pdR2 clearfix" style="padding: 8px 8px 8px 8px;">
+                <div class="modal-header theme-bg pd-l2 pd-r2 clearfix" style="padding: 8px 8px 8px 8px;">
                     <h3 class="modal-title bg" id="modal-title">{{messageBody.header.set}}</h3>
                     <span aria-hidden="true" class="close" data-dismiss="modal" aria-label="Close"
                         (click)="mailModal.hide()">×</span>
                     <!-- <i class="icon-cross text-right close-modal" aria-hidden="true" ></i> -->
                 </div>
 
-                <div class="modal-body pdL2 pdR2 clearfix" style="padding: 0px !important;">
+                <div class="modal-body pd-l2 pd-r2 clearfix" style="padding: 0px !important;">
                     <h1 class="mr-b1" *ngIf="messageBody.type == 'Email'" style="margin-top:15px;">Enter Subject:</h1>
                     <input *ngIf="messageBody.type == 'Email'" class="form-control mr-b1" #subject
                         [(ngModel)]="messageBody.subject" type="text" placeholder="Enter subject here" />
                     <h1 class="mr-b1" style="margin-top:15px;">Type message body:</h1>
                     <textarea #messageBox [(ngModel)]="messageBody.msg" class="form-control" rows="4"
                         style="resize:none;" placeholder="start typing your message here"></textarea>
-                    <small class="mr-t mrB grey" style="margin-top:15px;display: block">Tip: Click on the tabs below to
+                    <small class="mr-t05 mr-b05 grey" style="margin-top:15px;display: block">Tip: Click on the tabs below to
                         insert data
                         in your message body. Anything
                         followed by '%s_' represents the position where actual data will be placed.
diff --git a/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.scss b/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.scss
index b84e1367446..a5bf85e3f3b 100644
--- a/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.scss
+++ b/apps/web-giddh/src/app/theme/account-detail-modal/account-detail-modal.component.scss
@@ -6,10 +6,10 @@
     right: auto;
     z-index: 1;
     margin: 0;
-    background: white;
+    background: $white;
     width: 50%;
     padding: 1px;
-    box-shadow: 1px 0 9px grey;
+    box-shadow: 1px 0 9px $gray;
 }
 
 .account-detail-modal-header-div {
@@ -26,7 +26,7 @@
     border-right: 0;
     padding: 11px 10px 10px 10px;
     width: 100%;
-    background: #efefef;
+    background: $lavender;
     white-space: initial;
 }
 
@@ -41,15 +41,15 @@
 }
 
 .custom-detail h4 {
-    color: #707070;
+    color: $gray;
     margin-top: 7px;
     font-size: 14px !important;
-    font-family: opensans-regular !important;
+    font-family: 'opensans-regular' !important;
 }
 
 .height-82px {
     padding: 10px 10px 15px 10px;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid $gainsboro;
 }
 
 ul.list-unstyled li {
@@ -57,18 +57,18 @@ ul.list-unstyled li {
 }
 
 ul.list-unstyled li a {
-    color: black;
+    color: $black;
 }
 
-.p-modal-tolltip {
+.p-modal-tooltip {
     display: block;
     position: absolute;
-    background-color: white;
+    background-color: $white;
     z-index: 1000;
     width: 257px;
-    border: 1px solid #b4afaf;
+    border: 1px solid $gainsboro;
     border-radius: 4px;
-    box-shadow: 0 7px 24px #00000038;
+    box-shadow: 0 7px 24px $black-russian;
 }
 
 .model-position {
diff --git a/apps/web-giddh/src/app/theme/command-k/command.k.component.html b/apps/web-giddh/src/app/theme/command-k/command.k.component.html
index 6510162214c..490df5fa197 100644
--- a/apps/web-giddh/src/app/theme/command-k/command.k.component.html
+++ b/apps/web-giddh/src/app/theme/command-k/command.k.component.html
@@ -52,8 +52,8 @@
                                                 </ng-container>
 											</div>
 											<ng-container *ngIf="r.type === 'ACCOUNT'">
-												<span class="hvrTxt">{{r.uniqueName}}</span>
-											</ng-container>
+													<span class="command-hover-text">{{r.uniqueName}}</span>
+												</ng-container>
 										</div>
 									</div>
 								</a>
@@ -69,10 +69,10 @@
 			<div #mainEle>
 				<div class="p-2">
 					<span>
-						<div class="jumper-results" [ngClass]="{'alC': showChannelCreateBtn}">
+						<div class="jumper-results" [ngClass]="{'text-center': showChannelCreateBtn}">
 							<p class="block text-center mr-b2">No matches found. Did you spell it correctly?</p>
 							<ng-container *ngIf="showChannelCreateBtn">
-								<button class="btn btn-primary mrR2" (click)="triggerAddManage()">Create Group</button>
+								<button class="btn btn-primary mr-r2" (click)="triggerAddManage()">Create Group</button>
 								<button class="btn btn-primary" (click)="triggerAddManage()">Create A/c</button>
 							</ng-container>
 						</div>
@@ -87,7 +87,7 @@
 <!-- input box template -->
 <ng-template #searchEleTemplate>
 	<div #searchWrapEle class="search-wrapper" (click)="focusInSearchBox($event)">
-		<span class="searh-ico"><i class="icon-search"></i></span>
+		<span class="icon-search-icon"><i class="icon-search"></i></span>
 		<span *ngFor="let item of listOfSelectedGroups; let idx = index">
 			<div class="vR">
 				<div class="vN">
diff --git a/apps/web-giddh/src/app/theme/command-k/command.k.component.scss b/apps/web-giddh/src/app/theme/command-k/command.k.component.scss
index cc8fcaa9e67..21688bb78b8 100644
--- a/apps/web-giddh/src/app/theme/command-k/command.k.component.scss
+++ b/apps/web-giddh/src/app/theme/command-k/command.k.component.scss
@@ -1,12 +1,14 @@
+@import "../../../assets/css/color.scss";
+
 :host {
     .search-wrapper {
         padding: 1.25rem 2rem 1.25rem 4.2rem;
         display: flex;
         flex-direction: row;
         align-items: center;
-        background-color: white;
+        background-color: $white;
         flex-wrap: wrap !important;
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid $gainsboro;
         width:100% !important;
         max-width: 580px;
         .search-element {
@@ -17,13 +19,13 @@
             line-height: initial;
             width: 95%;
         }
-        .searh-ico {
+        .icon-search-icon {
             position: absolute;
             left: 0;
             right: 0;
             width: 4.2rem;
             text-align: center;
-            color: #858484;
+            color: $gray;
         }
     }
     .vR {
@@ -72,7 +74,7 @@
 }
 
 .universal-data-list-wrapper {
-    background-color: white;
+    background-color: $white;
     overflow: auto;
     display: none;
     box-sizing: border-box;
@@ -128,7 +130,7 @@
                 min-height: auto;
             }
             .item-icon {
-                color: #979797;
+                color: $nobel;
                 font-size: 14px;
                 .icon-account {
                     font-size: 11px;
@@ -140,14 +142,14 @@
             .item-details {
                 position: relative;
                 font-size: 14px;
-                color: #333333;
+                color: $night-rider;
                 text-transform: capitalize;
                 margin-left: 25px;
                 padding: 5px 0;
                 .width-65{
                     width: 65%;
                 }
-                .smlP {
+                .small-para-details {
                     margin: 0;
                     width: 320px;
                     white-space: nowrap;
@@ -156,32 +158,32 @@
                 }
                 small {
                     font-size: 12px;
-                    color: #858484;
+                    color: $gray;
                 }
-                .hvrTxt {
-                    color: white;
+                .command-hover-text {
+                    color: $white;
                     right: 0;
                     text-transform: initial;
                     width: 25%;
                     word-break: break-word;
                     text-align: right;
                 }
-                .brdcrmb {
+                .command-bread-crumb {
                     max-width: 150px;
                     overflow: hidden;
                 }
             }
             // hover effect
             &.selected {
-                background-color: #5b64c9;
+                background-color: $chetwode-blue;
                 .item-details {
-                    color: white;
+                    color: $white;
                     small {
-                        color: white;
+                        color: $white;
                     }
                 }
                 .item-icon {
-                    color: #fff;
+                    color: $white;
                 }
             }
         }
@@ -208,7 +210,7 @@
             padding: 1rem 2rem 1rem 3.9rem;
             margin-bottom: 10px;
             max-width: 100%;
-            .searh-ico {
+            .icon-search-icon {
                 left: -3px;
             }
         }
diff --git a/apps/web-giddh/src/app/theme/confirm-modal/confirm-modal.component.html b/apps/web-giddh/src/app/theme/confirm-modal/confirm-modal.component.html
index a8f005a1f3e..354d4f1142d 100644
--- a/apps/web-giddh/src/app/theme/confirm-modal/confirm-modal.component.html
+++ b/apps/web-giddh/src/app/theme/confirm-modal/confirm-modal.component.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">{{title}}</h3>
     </div>
     <div class="modal-body">
         {{body}}
-        <p class="text-gray font-14 mt-05">It will be deleted permanently and will no longer be accessible from any other module.</p>
+        <p class="text-gray font-14 mr-t05">It will be deleted permanently and will no longer be accessible from any other module.</p>
     </div>
     <div class="modal-footer">
         <button class="btn btn-success" (click)="onSuccess($event)">{{ok}}</button>
diff --git a/apps/web-giddh/src/app/theme/discount-control/discount-control-component.html b/apps/web-giddh/src/app/theme/discount-control/discount-control-component.html
index 2822e94cb82..e06f3d0ad54 100644
--- a/apps/web-giddh/src/app/theme/discount-control/discount-control-component.html
+++ b/apps/web-giddh/src/app/theme/discount-control/discount-control-component.html
@@ -1,50 +1,49 @@
-<div (clickOutside)="hideDiscountMenu()" (click)="$event.stopPropagation()" style="position: relative">
+<div (clickOutside)="hideDiscountMenu()" (click)="$event.stopPropagation()" class="position-relative">
     <label *ngIf="showHeaderText">Discount</label>
 
     <a id="discount">
         <div class="multi-select adjust">
-            <input type="text" decimalDigitsDirective name="" class="form-control text-right cursor-pointer" (focus)="discountMenu = true;hideOtherPopups.emit(true)" [(ngModel)]="discountSum" [mask]="inputMaskFormat" [prefix]="prefixInput" [suffix]="suffixInput"
-                readonly (blur)="discountInputBlur($event)" style="padding-right:22px !important;" />
+            <input type="text" decimalDigitsDirective name="" class="form-control text-right cursor-pointer pd-r2" (focus)="discountMenu = true;hideOtherPopups.emit(true)" [(ngModel)]="discountSum" [mask]="inputMaskFormat" [prefix]="prefixInput" [suffix]="suffixInput"
+                readonly (blur)="discountInputBlur($event)" />
             <!-- <span class="caret cp no-select" (click)="discountMenu = true;hideOtherPopups.emit(true)"></span> -->
         </div>
     </a>
 
-    <div class="my-dropdown-menu pd" (click)="$event.stopPropagation()" style="padding: 10px;" [ngStyle]="{'display': discountMenu ? 'block': 'none'}" #disInptEle>
+    <div class="my-dropdown-menu pd-1" (click)="$event.stopPropagation()" [ngStyle]="{'display': discountMenu ? 'block': 'none'}" #disInptEle>
 
         <div>
 
-            <div class="d-flex mb-1">
+            <div class="d-flex mr-b1">
 
                 <label class="mr-1 align-items-center d-flex" style="width: 50px">Percent</label>
 
-                <div class="pos-rel">
-                    <input type="text" class="form-control text-right cursor-pointer" [disabled]="!discountFromPer" decimalDigitsDirective [(ngModel)]="discountPercentageModal" (blur)="discountInputBlur($event)" (input)="discountFromInput('PERCENTAGE', $event)" [mask]="inputMaskFormat"
-                        style="width: 100px;padding-right: 20px !important;">
-                    <i class="fa fa-percent pos-abs" style="top: 9px;right: 6px;color: #acb0b9;"></i>
+                <div class="position-relative">
+                    <input type="text" class="form-control text-right cursor-pointer pd-r2 w-100" [disabled]="!discountFromPer" decimalDigitsDirective [(ngModel)]="discountPercentageModal" (blur)="discountInputBlur($event)" (input)="discountFromInput('PERCENTAGE', $event)" [mask]="inputMaskFormat">
+                    <i class="fa fa-percent position-absolute"></i>
                 </div>
 
             </div>
 
-            <div class="d-flex mb-1">
+            <div class="d-flex mr-b1">
                 <label class="mr-1 align-items-center d-flex" style="width: 50px">Value</label>
                 <input type="text" class="form-control text-right cursor-pointer" [disabled]="!discountFromVal" decimalDigitsDirective [(ngModel)]="discountFixedValueModal" (input)="discountFromInput('FIX_AMOUNT', $event)" style="width: 100px" [mask]="inputMaskFormat">
             </div>
 
         </div>
 
-        <div class="d-flex flex-col" style="justify-content: center" *ngIf="discountAccountsDetails.length > 1">
+        <div class="d-flex flex-col justify-content-center" *ngIf="discountAccountsDetails.length > 1">
             <span class="or-line">AND</span>
         </div>
 
         <div *ngIf="discountAccountsDetails.length > 1">
-            <ul style="list-style: none;overflow: auto;max-height: 100px">
+            <ul class="discount-name-ul">
 
                 <ng-container *ngFor="let discount of discountAccountsDetails;trackBy: trackByFn; let idx = index">
-                    <li *ngIf="discount && discount.discountUniqueName && discount.name" class="customItem" style="padding: 5px;margin-bottom: 5px;">
-                        <label class="checkbox oh width100 p0 m0" (click)="$event.stopPropagation()">
+                    <li *ngIf="discount && discount.discountUniqueName && discount.name" class="custom-item pd mr-b05">
+                        <label class="checkbox overflow-hidden width-100 p-0 m-0" (click)="$event.stopPropagation()">
                             <input class="pull-left" id="{{'discount-control-' + idx}}" name="tax_{{idx}}" type="checkbox" [(ngModel)]="discount.isActive"
                                 (change)="change(discount, $event)" (click)="$event.stopPropagation()" />
-                            <span class="pull-left ellp">{{discount.name}}</span>
+                            <span class="pull-left text-ellipsis">{{discount.name}}</span>
                         </label>
                     </li>
                 </ng-container>
diff --git a/apps/web-giddh/src/app/theme/discount-control/discount-control-component.scss b/apps/web-giddh/src/app/theme/discount-control/discount-control-component.scss
new file mode 100644
index 00000000000..f315ba1a6b3
--- /dev/null
+++ b/apps/web-giddh/src/app/theme/discount-control/discount-control-component.scss
@@ -0,0 +1,15 @@
+@import "../../../assets/css/color.scss";
+
+.multi-select .caret {
+    display: block !important;
+}
+.fa-percent{
+    top: 9px;
+    right: 6px;
+    color: $dim-gray;
+}
+.discount-name-ul{
+    list-style: none;
+    overflow: auto;
+    max-height: 100px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/app/theme/discount-control/discount-control.component.ts b/apps/web-giddh/src/app/theme/discount-control/discount-control.component.ts
index 2b24393f280..cce08c361b0 100644
--- a/apps/web-giddh/src/app/theme/discount-control/discount-control.component.ts
+++ b/apps/web-giddh/src/app/theme/discount-control/discount-control.component.ts
@@ -8,15 +8,7 @@ import { take, takeUntil } from 'rxjs/operators';
 @Component({
     selector: 'discount-control-component',
     templateUrl: './discount-control-component.html',
-    styles: [`
-    /*.multi-select input.form-control {
-       background-image: unset !important;
-    }*/
-
-    .multi-select .caret {
-      display: block !important;
-    }
-  `]
+    styleUrls: ['./discount-control-component.scss']
 })
 
 export class DiscountControlComponent implements OnInit, OnDestroy, OnChanges {
diff --git a/apps/web-giddh/src/app/theme/ng-select/select-dropdown.component.scss b/apps/web-giddh/src/app/theme/ng-select/select-dropdown.component.scss
index 505afa1876f..021af4901ee 100644
--- a/apps/web-giddh/src/app/theme/ng-select/select-dropdown.component.scss
+++ b/apps/web-giddh/src/app/theme/ng-select/select-dropdown.component.scss
@@ -3,8 +3,8 @@
 select-dropdown {
     font-size: 14px;
     > div {
-        background-color: #fff;
-        border: 1px solid #ccc;
+        background-color: $white;
+        border: 1px solid $gainsboro;
         border-top: none;
         box-sizing: border-box;
         position: absolute;
@@ -13,7 +13,7 @@ select-dropdown {
             padding: 3px;
             width: 100%;
             input {
-                border: 1px solid #eee;
+                border: 1px solid $gainsboro;
                 box-sizing: border-box;
                 padding: 6px;
                 width: 100%;
@@ -38,19 +38,19 @@ select-dropdown {
         }
     }
     .selected {
-        background-color: #eeeff9 !important;
+        background-color: $lavender !important;
         &.highlighted {
-            background-color: #eeeff9 !important;
+            background-color: $lavender !important;
             color: $chetwode-blue !important;
         }
     }
     .highlighted {
-        background-color: #eeeff9 !important;
+        background-color: $lavender !important;
         color: $chetwode-blue !important;
     }
     .disabled {
-        background-color: #fff;
-        color: #9e9e9e;
+        background-color: $white;
+        color: $nobel;
         cursor: default;
         pointer-events: none;
     }
diff --git a/apps/web-giddh/src/app/theme/ng-select/select.component.html b/apps/web-giddh/src/app/theme/ng-select/select.component.html
index 7ac39b74e43..dce00f1867f 100644
--- a/apps/web-giddh/src/app/theme/ng-select/select.component.html
+++ b/apps/web-giddh/src/app/theme/ng-select/select.component.html
@@ -20,11 +20,11 @@
             &#x2715;
         </div>
         <div class="toggle" *ngIf="isOpen">
-            <span class="select_drop"><i class="fa fa-caret-up"></i></span>
+            <span class="select-drop"><i class="fa fa-caret-up"></i></span>
             <!-- <span class="glyphicon glyphicon-triangle-top"></span> -->
         </div>
         <div class="toggle" *ngIf="!isOpen">
-            <span class="select_drop"><i class="fa fa-caret-down"></i></span>
+            <span class="select-drop"><i class="fa fa-caret-down"></i></span>
             <!-- <span class="glyphicon glyphicon-triangle-bottom"></span> -->
         </div>
     </div>
@@ -44,7 +44,7 @@
 
     </div>
     <div class="single" *ngIf="isTypeAheadMode">
-        <div class="option" style="width:100%;">
+        <div class="option w-100">
             <input #filterInput autocomplete="off" tabindex="0" [placeholder]="placeholderView"
                 [value]="optionList.hasSelected ? optionList.selection[0].label : ''"
                 (input)="onFilterInput($event.target.value)" (keydown)="onTypeAheadFilterKeydown($event)"
diff --git a/apps/web-giddh/src/app/theme/ng-select/select.component.scss b/apps/web-giddh/src/app/theme/ng-select/select.component.scss
index da90328acbe..9e2b450d8bc 100644
--- a/apps/web-giddh/src/app/theme/ng-select/select.component.scss
+++ b/apps/web-giddh/src/app/theme/ng-select/select.component.scss
@@ -115,7 +115,7 @@ ng-select {
     }
 }
 
-.ng-select-wrap.liq ng-select .below {
+.ng-select-wrap.select-list ng-select .below {
     width: 100% !important;
 }
 
diff --git a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.scss b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.scss
index 07bbdd9aaa3..2f13f185e21 100644
--- a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.scss
+++ b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.scss
@@ -52,7 +52,7 @@
 }
 
 .no-result-link > a {
-    color: #10aae0 !important;
+    color: $deep-sky-blue-hover !important;
 }
 
 #noresult:hover {
diff --git a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.ts b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.ts
index 4abacdf1b0e..ce6ead3fba9 100644
--- a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.ts
+++ b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select-menu.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 import { VirtualScrollComponent } from './virtual-scroll';
 import { IOption } from './sh-options.interface';
+import { isEqual } from '../../lodash-optimized';
 
 @Component({
     selector: 'sh-select-menu',
@@ -8,6 +9,7 @@ import { IOption } from './sh-options.interface';
     templateUrl: './sh-select-menu.component.html',
     styleUrls: ['./sh-select-menu.component.scss']
 })
+
 export class ShSelectMenuComponent implements OnChanges {
     @Input() public selectedValues: any[];
     @Input() public isOpen: boolean;
@@ -22,6 +24,10 @@ export class ShSelectMenuComponent implements OnChanges {
     @Input() public showNotFoundLinkAsDefault: boolean;
     @Input() public noResultLinkTemplate: TemplateRef<any>;
     @Input() public showCheckbox: boolean = false;
+    /** True if field is required */
+    @Input() public isRequired: boolean = false;
+    /** This will hold searched text */
+    @Input() public filter: string = '';
 
     /** True when pagination should be enabled */
     @Input() isPaginationEnabled: boolean;
@@ -34,16 +40,18 @@ export class ShSelectMenuComponent implements OnChanges {
     @ViewChild('listContainer', {static: true}) public listContainer: ElementRef;
     public math: any = Math;
     public viewPortItems: IOption[];
-
     public _rows: IOption[];
+    /** This will hold existing data */
+    public existingData: IOption[];
 
     @Input() set rows(val: IOption[]) {
-        if (this.virtualScrollElm) {
-            // this.virtualScrollElm.scrollInto(this._rows[0]);
-        }
-
         this._rows = val;
 
+        if(!isEqual(this._rows, this.existingData)) {
+            this.existingData = this._rows;
+            this.autoSelectIfSingleValueAvailable();
+        }
+
         if (this.virtualScrollElm) {
             this.virtualScrollElm.refresh();
         }
@@ -53,6 +61,9 @@ export class ShSelectMenuComponent implements OnChanges {
         // if (changes['isOpen'] && changes['isOpen'].currentValue) {
         //   this.dyHeight = Number(window.getComputedStyle(this.listContainer.nativeElement).height);
         // }
+        if(changes['isRequired'] && changes['isRequired'].currentValue !== changes['isRequired'].previousValue) {
+            this.autoSelectIfSingleValueAvailable();
+        }
     }
 
     public toggleSelected(row) {
@@ -90,4 +101,14 @@ export class ShSelectMenuComponent implements OnChanges {
         this.scrollEnd.emit();
     }
 
+    /**
+     * This will auto select the value if 1 value available and field is required
+     *
+     * @memberof ShSelectMenuComponent
+     */
+    public autoSelectIfSingleValueAvailable(): void {
+        if(this.isRequired && this._rows && this._rows.length === 1 && !this.filter) {
+            this.toggleSelected(this._rows[0]);
+        }
+    }
 }
diff --git a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.html b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.html
index a5c1e052c8e..bd9dee48f1c 100644
--- a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.html
+++ b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.html
@@ -1,4 +1,4 @@
-<div #dd [style.width]="width" class="pos-rel">
+<div #dd [style.width]="width" class="position-relative">
     <div [attr.style]="borderConfiguration?.style" class="header" #mainContainer [class.sh-select-disabled]="disabled" [class.inline]="mode==='inline'"
         (click)="showSearchSuggestion ? show($event) : ''" [class.open]="isOpen" tabindex="0" (focus)="showSearchSuggestion ? show($event) : ''" (blur)="hide($event)"
         (keydown)="keydownUp($event)">
@@ -9,7 +9,7 @@
             <ng-container *ngIf="selectedValues?.length && !showCheckbox">
                 <span class="chip" *ngFor="let sl of selectedValues">
                     {{ sl.label }}
-                    <span class="chipClosebtn" (mousedown)="clearSingleSelection($event, sl)"
+                    <span class="chip-close-btn" (mousedown)="clearSingleSelection($event, sl)"
                         (click)="clearSingleSelection($event, sl)">&times;</span>
                 </span>
             </ng-container>
@@ -34,7 +34,7 @@
             <ng-container *ngIf="selectedValues?.length">
                 <div *ngIf="!multiple">
                     <input autocomplete="disabled" type="text" readonly value="{{selectedValues[0].label}}"
-                        class="form-control selectedVal cp" [attr.style]="borderConfiguration?.style" />
+                        class="form-control selected-val cp" [attr.style]="borderConfiguration?.style" />
                 </div>
             </ng-container>
             <ng-container *ngIf="!selectedValues?.length">
@@ -55,6 +55,6 @@
         (noResultClicked)="noResultsClicked.emit(); hide()" [noResultLinkEnabled]="notFoundLink"
         [noResultLinkTemplate]="notFoundLinkTemplate" [notFoundMsg]="notFoundMsg" [notFoundLinkText]="notFoundLinkText"
         [ItemHeight]="ItemHeight" [NoFoundMsgHeight]="NoFoundMsgHeight" [NoFoundLinkHeight]="NoFoundLinkHeight"
-        [showNotFoundLinkAsDefault]="showNotFoundLinkAsDefault" [dropdownMinHeight]="dropdownMinHeight" [showCheckbox]="showCheckbox">
+        [showNotFoundLinkAsDefault]="showNotFoundLinkAsDefault" [dropdownMinHeight]="dropdownMinHeight" [showCheckbox]="showCheckbox" [isRequired]="isRequired" [filter]="filter">
     </sh-select-menu>
 </div>
diff --git a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.scss b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.scss
index 94ce02da75c..a68f734d337 100644
--- a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.scss
+++ b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.scss
@@ -58,11 +58,11 @@ i.close.icon.clear::after {
     content: "✕";
     padding-right: 8px;
     font-weight: 800;
-    color: gray;
+    color: $gray;
 }
 
 i.close.icon.clear:hover::after {
-    color: red;
+    color: $red;
 }
 
 .clear {
@@ -76,12 +76,12 @@ i.close.icon.clear:hover::after {
     font-weight: 500;
     line-height: 100%;
     opacity: 0.5;
-    color: black;
+    color: $black;
     transform: translateY(-50%);
 }
 
 .sh-select-disabled {
-    background-color: #e3e3e3;
+    background-color: $whisper;
     color: $bay-of-many;
     cursor: not-allowed;
 }
@@ -93,12 +93,12 @@ i.close.icon.clear:hover::after {
     font-size: 14px;
     line-height: 30px;
     border-radius: 4px;
-    background-color: #f4f5f8;
+    background-color: $solitude;
     margin: 8px 0 5px 8px;
     /* color: white; */
 }
 
-.chipClosebtn {
+.chip-close-btn {
     padding-left: 10px;
     font-weight: 500;
     float: right;
@@ -107,21 +107,21 @@ i.close.icon.clear:hover::after {
     opacity: 0.6;
 }
 
-.chipClosebtn:hover {
+.chip-close-btn:hover {
     font-weight: 700;
     opacity: 0.5;
     color: black;
 }
 
 .header .form-control[readonly] {
-    background-color: #fff !important;
-    border: 1px solid #ccc;
+    background-color: $white !important;
+    border: 1px solid $gainsboro;
 }
 
-.sh-select-disabled .selectedVal,
+.sh-select-disabled .selected-val,
 .sh-select-disabled .form-control,
 .sh-select-disabled .form-control[readonly] {
-    background: #eee !important;
+    background: $whisper-light !important;
     pointer-events: none;
     cursor: not-allowed;
 }
@@ -129,7 +129,7 @@ i.close.icon.clear:hover::after {
 :host(.disabled-ledger) {
     .sh-select-disabled {
         background: $white !important;
-        .selectedVal,
+        .selected-val,
         .form-control,
         .form-control[readonly] {
             background: $white !important;
@@ -137,14 +137,14 @@ i.close.icon.clear:hover::after {
     }
 }
 
-.selectedVal {
+.selected-val {
     border: 1px solid $gainsboro !important;
     padding-right: 22px !important;
-    background: #fff !important;
+    background: $white !important;
 }
 
 .header.open > input[type="text"] {
-    border-color: #d6d6d6;
+    border-color: $gainsboro;
 }
 
 .header .bdr > input[type="text"] {
diff --git a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.ts b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.ts
index 4bd9cb95337..fce9ee71aef 100644
--- a/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.ts
+++ b/apps/web-giddh/src/app/theme/ng-virtual-select/sh-select.component.ts
@@ -12,7 +12,6 @@ import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
 const FLATTEN_SEARCH_TERM = 'flatten';
 
-// noinspection TsLint
 @Component({
     selector: 'sh-select',
     templateUrl: './sh-select.component.html',
@@ -64,6 +63,10 @@ export class ShSelectComponent implements ControlValueAccessor, OnInit, AfterVie
     @Input() public borderConfiguration: BorderConfiguration;
     /** True, if search suggesstion should not be displayed */
     @Input() public showSearchSuggestion: boolean = true;
+    /** True, if selected values should not be reset when options change */
+    @Input() public doNotResetSelectedValues: boolean = false;
+    /** True if field is required */
+    @Input() public isRequired: boolean = false;
 
     /** Emits the scroll to bottom event when pagination is required  */
     @Output() public scrollEnd: EventEmitter<void> = new EventEmitter();
@@ -119,7 +122,9 @@ export class ShSelectComponent implements ControlValueAccessor, OnInit, AfterVie
     @Input() set options(val: IOption[]) {
         this._options = val;
         this.updateRows(val);
-        this.selectedValues = [this.filter];
+        if (!this.doNotResetSelectedValues) {
+            this.selectedValues = [this.filter];
+        }
     }
 
     get selectedValues(): any[] {
@@ -135,7 +140,11 @@ export class ShSelectComponent implements ControlValueAccessor, OnInit, AfterVie
             val = [val];
         }
         if (val.length > 0 && this.rows) {
-            this._selectedValues = this.rows.filter((f: any) => val.findIndex(p => p === f.label || p === f.value) !== -1);
+            if (this.doNotResetSelectedValues) {
+                this._selectedValues = this._selectedValues.filter(selected => val.indexOf(selected.value) > -1);
+            } else {
+                this._selectedValues = this.rows.filter((f: any) => val.findIndex(p => p === f.label || p === f.value) !== -1);
+            }
         } else {
             this._selectedValues = val;
         }
@@ -468,7 +477,7 @@ export class ShSelectComponent implements ControlValueAccessor, OnInit, AfterVie
     }
 
     public ngOnInit() {
-        //
+        this.selectedValues = [];
     }
 
     /**
diff --git a/apps/web-giddh/src/app/theme/ngx-date-range-picker/ngx-daterangepicker.component.scss b/apps/web-giddh/src/app/theme/ngx-date-range-picker/ngx-daterangepicker.component.scss
index 1a3906eb75b..48bb256d1fc 100644
--- a/apps/web-giddh/src/app/theme/ngx-date-range-picker/ngx-daterangepicker.component.scss
+++ b/apps/web-giddh/src/app/theme/ngx-date-range-picker/ngx-daterangepicker.component.scss
@@ -627,7 +627,7 @@ $input-height: 3rem !default;
     /* ranges */
     .show-ranges {
         .drp-calendar.left {
-            border-left: 1px solid $gainsboro-light;
+            border-left: 1px solid $gainsboro;
         }
     }
     .ranges {
@@ -688,7 +688,7 @@ $input-height: 3rem !default;
                             }
                         }
                         &.active {
-                            background-color: $whisper-color !important;
+                            background-color: $gainsboro !important;
                             border-left: 3px solid $midnight-blue !important;
                             font-family: 'opensans-semibold';
                             color: $midnight-blue;
diff --git a/apps/web-giddh/src/app/theme/quick-account-component/quickAccount.component.html b/apps/web-giddh/src/app/theme/quick-account-component/quickAccount.component.html
index c425d925297..35d7267e0a1 100644
--- a/apps/web-giddh/src/app/theme/quick-account-component/quickAccount.component.html
+++ b/apps/web-giddh/src/app/theme/quick-account-component/quickAccount.component.html
@@ -17,7 +17,7 @@ <h3 class="modal-title">Create New Account</h3>
 			<input class="form-control" required name="account" (blur)="generateUniqueName();" type="text"
 				formControlName="name" placeholder="Enter Account Name">
 		</div>
-		<div class="clearfix mr-t1 pdR2 pos-rel">
+		<div class="clearfix mr-t1 pd-r2 position-relative">
 			<label>Account Unique Name</label>
 			<input class="form-control" required name="accUnqName" type="text" formControlName="uniqueName"
 				[control]="newAccountForm.get('uniqueName')" textCaseChangeDirective
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.html b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.html
index 0e0478c97d2..b0367a954d3 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.html
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.html
@@ -1,4 +1,4 @@
-<div class="menu" *ngIf="isOpen && _rows" style="background-color: white" [style.min-height.px]="dropdownMinHeight"
+<div class="menu white-bg" *ngIf="isOpen && _rows" [style.min-height.px]="dropdownMinHeight"
     [style.max-height.px]="viewPortItems?.length !== 0? ItemHeight*(viewPortItems ? viewPortItems.length : 5)+10 : ItemHeight">
 
     <!-- *ngIf="viewPortItems?.length === 0 && noResultLinkEnabled" -->
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.scss b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.scss
index 220db33d547..d00e3fc7898 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.scss
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.scss
@@ -45,7 +45,7 @@
 }
 
 .no-result-link > a {
-    color: #10aae0 !important;
+    color: $deep-sky-blue-hover !important;
 }
 
 #noresult:hover {
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.ts b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.ts
index 13563d4c89b..fe90e1f7bc7 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.ts
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select-menu.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
 import { VirtualScrollComponent } from './virtual-scroll';
 import { IOption } from './sh-options.interface';
+import { isEqual } from '../../lodash-optimized';
 
 @Component({
     selector: 'sh-select-menu',
@@ -22,6 +23,10 @@ export class SalesShSelectMenuComponent implements OnChanges {
     @Input() public dropdownMinHeight: number;
     @Input() public showLabelOnly: boolean = false;
     @Input() public salesShSelectPading: number = 0;
+    /** True if field is required */
+    @Input() public isRequired: boolean = false;
+    /** This will hold searched text */
+    @Input() public filter: string = '';
 
     /** True when pagination should be enabled */
     @Input() isPaginationEnabled: boolean;
@@ -34,16 +39,18 @@ export class SalesShSelectMenuComponent implements OnChanges {
     @ViewChild('listContainer', {static: true}) public listContainer: ElementRef;
     public math: any = Math;
     public viewPortItems: IOption[];
-
     public _rows: IOption[];
+    /** This will hold existing data */
+    public existingData: IOption[];
 
     @Input() set rows(val: IOption[]) {
-        if (this.virtualScrollElm) {
-            // this.virtualScrollElm.scrollInto(this._rows[0]);
-        }
-
         this._rows = val;
 
+        if(!isEqual(this._rows, this.existingData)) {
+            this.existingData = this._rows;
+            this.autoSelectIfSingleValueAvailable();
+        }
+
         if (this.virtualScrollElm) {
             this.virtualScrollElm.refresh();
         }
@@ -53,6 +60,10 @@ export class SalesShSelectMenuComponent implements OnChanges {
         // if (changes['isOpen'] && changes['isOpen'].currentValue) {
         //   this.dyHeight = Number(window.getComputedStyle(this.listContainer.nativeElement).height);
         // }
+
+        if(changes['isRequired'] && changes['isRequired'].currentValue !== changes['isRequired'].previousValue) {
+            this.autoSelectIfSingleValueAvailable();
+        }
     }
 
     public toggleSelected(row) {
@@ -68,4 +79,14 @@ export class SalesShSelectMenuComponent implements OnChanges {
         this.scrollEnd.emit();
     }
 
+    /**
+     * This will auto select the value if 1 value available and field is required
+     *
+     * @memberof SalesShSelectMenuComponent
+     */
+    public autoSelectIfSingleValueAvailable(): void {
+        if(this.isRequired && this._rows && this._rows.length === 1 && !this.filter) {
+            this.toggleSelected(this._rows[0]);
+        }
+    }
 }
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.html b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.html
index 60d0758718b..f82e975d54c 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.html
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.html
@@ -9,7 +9,7 @@
             <ng-container *ngIf="selectedValues?.length">
                 <span class="chip" *ngFor="let sl of selectedValues">
                     {{ sl.label }}
-                    <span class="chipClosebtn" (mousedown)="clearSingleSelection($event, sl)"
+                    <span class="chip-close-btn" (mousedown)="clearSingleSelection($event, sl)"
                         (click)="clearSingleSelection($event, sl)">&times;</span>
                 </span>
             </ng-container>
@@ -42,7 +42,7 @@
                         *ngIf="showLabelOnly">{{selectedValues[0]?.label}}</button>
                     <input autocomplete="disabled" type="text" *ngIf="!showLabelOnly" [ngClass]="{'bottom-border-only' : showBottomBorderOnly}"
                         (input)="openListIfNotOpened($event)" (click)="selectText($event);" type="text"
-                        value="{{selectedValues[0].label}}" class="form-control selectedVal cp" [attr.style]="borderConfiguration?.style" />
+                        value="{{selectedValues[0].label}}" class="form-control selected-val cp" [attr.style]="borderConfiguration?.style" />
                 </div>
             </ng-container>
             <ng-container *ngIf="!selectedValues?.length">
@@ -69,5 +69,5 @@
         [notFoundMsg]="notFoundMsg" [notFoundLinkText]="notFoundLinkText" [ItemHeight]="ItemHeight"
         [NoFoundMsgHeight]="NoFoundMsgHeight" [NoFoundLinkHeight]="NoFoundLinkHeight"
         [noResultLinkTemplate]="notFoundLinkTemplate" [dropdownMinHeight]="dropdownMinHeight"
-        [salesShSelectPading]="salesShSelectPading"></sh-select-menu>
+        [salesShSelectPading]="salesShSelectPading" [isRequired]="isRequired" [filter]="filter"></sh-select-menu>
 </div>
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.scss b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.scss
index 3113c722312..42e91124c50 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.scss
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.scss
@@ -60,11 +60,11 @@ i.close.icon.clear::after {
     content: "✕";
     padding-right: 8px;
     font-weight: 800;
-    color: gray;
+    color: $gray;
 }
 
 i.close.icon.clear:hover::after {
-    color: red;
+    color: $red;
 }
 
 .clear {
@@ -83,7 +83,7 @@ i.close.icon.clear:hover::after {
 }
 
 .sh-select-disabled {
-    background-color: #e3e3e3;
+    background-color: $whisper;
     color: $bay-of-many;
     cursor: not-allowed;
 }
@@ -100,7 +100,7 @@ i.close.icon.clear:hover::after {
     /* color: white; */
 }
 
-.chipClosebtn {
+.chip-close-btn {
     padding-left: 10px;
     font-weight: 500;
     float: right;
@@ -109,49 +109,49 @@ i.close.icon.clear:hover::after {
     opacity: 0.6;
 }
 
-.chipClosebtn:hover {
+.chip-close-btn:hover {
     font-weight: 700;
     opacity: 0.5;
     color: black;
 }
 
-.sh-select-disabled .selectedVal,
+.sh-select-disabled .selected-val,
 .sh-select-disabled .form-control {
-    background: #eee !important;
+    background: $whisper-light !important;
     pointer-events: none;
     cursor: not-allowed;
 }
 
-.selectedVal {
-    border: 1px solid #d6d6d6 !important;
+.selected-val {
+    border: 1px solid $gainsboro !important;
     padding-right: 5px !important;
-    background: #fff !important;
+    background: $white !important;
 }
 
 .header.open > input[type="text"] {
-    border-color: #d6d6d6;
+    border-color: $gainsboro;
 }
 
 .header .bdr > input[type="text"] {
     border: 0;
 }
 .header .bdr > input[type="text"]::-webkit-input-placeholder {
-    color: #c1c1c1 !important;
+    color: $silver !important;
 }
 .header .bdr > input[type="text"]::-moz-placeholder {
-    color: #c1c1c1 !important;
+    color: $silver !important;
 }
 .header .bdr > input[type="text"]:-ms-input-placeholder {
-    color: #c1c1c1 !important;
+    color: $silver !important;
 }
 .header .bdr > input[type="text"]:-moz-placeholder {
-    color: #c1c1c1 !important;
+    color: $silver !important;
 }
 
 .toggle {
     position: absolute;
     right: 0;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
     height: 100%;
     width: 28px;
     text-align: center;
@@ -160,13 +160,13 @@ i.close.icon.clear:hover::after {
     top: 0;
     bottom: 0;
     cursor: pointer;
-    background: #f4f5f8;
-    color: #686868;
+    background: $solitude;
+    color: $dark-gray;
     font-size: 16px;
 }
 
 button.form-control:focus {
-    border-color: #ddd !important;
+    border-color: $gainsboro !important;
 }
 
 .label-btn {
@@ -175,11 +175,11 @@ button.form-control:focus {
     box-shadow: none !important;
     border-radius: 0 !important;
     font-size: 20px;
-    color: #393a3d;
+    color: $night-rider;
 }
 
 .toggle:hover {
-    background: #eee;
+    background: $whisper-light;
 }
 
 .label-toggle {
@@ -190,9 +190,9 @@ button.form-control:focus {
 
 .bottom-border-only {
     border: none !important;
-    border-bottom: 1px solid #d6d6d6 !important;
+    border-bottom: 1px solid $gainsboro !important;
     border-radius: 0 !important;
 }
-.Advance-Search .header {
+.advance-search .header {
     position: relative;
 }
diff --git a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.ts b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.ts
index 4a76745c7c2..cf32609f968 100644
--- a/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.ts
+++ b/apps/web-giddh/src/app/theme/sales-ng-virtual-select/sh-select.component.ts
@@ -56,6 +56,8 @@ export class SalesShSelectComponent implements ControlValueAccessor, OnInit, Aft
     @Input() public salesShSelectPading: number = 0;
     @Input() public tabIndex: number = 0;
     @Input() public fixedValue: string = "";
+    /** True if field is required */
+    @Input() public isRequired: boolean = false;
 
     @ViewChild('inputFilter', {static: false}) public inputFilter: ElementRef;
     @ViewChild('mainContainer', {static: true}) public mainContainer: ElementRef;
@@ -72,7 +74,7 @@ export class SalesShSelectComponent implements ControlValueAccessor, OnInit, Aft
     @Output() public noResultsClicked = new EventEmitter<null>();
     @Output() public viewInitEvent = new EventEmitter<any>();
     public rows: IOption[] = [];
-    public isOpen: boolean;
+    @Input() public isOpen: boolean;
     public filter: string = '';
     public filteredData: IOption[] = [];
     /** Keys. **/
@@ -390,6 +392,7 @@ export class SalesShSelectComponent implements ControlValueAccessor, OnInit, Aft
 
     public ngAfterViewInit() {
         this.viewInitEvent.emit(true);
+        this.openDropdown();
     }
 
     public ngOnChanges(changes: SimpleChanges): void {
@@ -410,11 +413,19 @@ export class SalesShSelectComponent implements ControlValueAccessor, OnInit, Aft
                 this.writeValue(this.filter);
             }
         }
+
         if ('options' in changes) {
             if (changes.options && changes.options.currentValue) {
                 this.refreshList();
             }
         }
+
+        if('isOpen' in changes) {
+            if(changes.isOpen && changes.isOpen.currentValue && changes.isOpen.currentValue !== changes.isOpen.previousValue) {
+                this.isOpen = changes.isOpen.currentValue;
+                this.openDropdown();
+            }
+        }
     }
 
     //////// ControlValueAccessor imp //////////
@@ -536,6 +547,19 @@ export class SalesShSelectComponent implements ControlValueAccessor, OnInit, Aft
             });
         }
     }
+
+    /**
+     * This will open the dropdown
+     *
+     * @memberof SalesShSelectComponent
+     */
+    public openDropdown(): void {
+        setTimeout(() => {
+            if(this.isOpen && this.inputFilter) {
+                (this.inputFilter.nativeElement as any)['focus'].apply(this.inputFilter.nativeElement);
+            }
+        }, 300);
+    }
 }
 
 export function ShSelectProvider(): any {
diff --git a/apps/web-giddh/src/app/theme/tax-control/tax-control.component.html b/apps/web-giddh/src/app/theme/tax-control/tax-control.component.html
index 8308d2dea8a..47f913d8c45 100644
--- a/apps/web-giddh/src/app/theme/tax-control/tax-control.component.html
+++ b/apps/web-giddh/src/app/theme/tax-control/tax-control.component.html
@@ -1,4 +1,4 @@
-<span class="pr tax-control-cmp" (clickOutside)="showTaxPopup = false"
+<span class="position-relative tax-control-cmp" (clickOutside)="showTaxPopup = false"
     (click)="$event.stopPropagation()">
     <label class="font-12" *ngIf="showHeading">{{ customHeading ? customHeading : 'Tax' }} <sup class="mandatory-asterisk" *ngIf="isMandatory">*</sup></label>
 
@@ -7,17 +7,17 @@
         <div class="multi-select adjust" id="tax-control-multi-select">
 
             <input #taxInputElement type="text" id="tax-control-input" readonly name="sum" *ngIf="!maskInput"
-                class="form-control cursor-pointer text-right taxInput" [(ngModel)]="taxTotalAmount"
+                class="form-control cursor-pointer text-right tax-input" [(ngModel)]="taxTotalAmount"
                 (focus)="handleInputFocus()" style="padding-right:28px !important;" />
 
             <input #taxInputElement type="text"  id="tax-control-input-mask" readonly name="sum" *ngIf="maskInput"
-                class="form-control cursor-pointer text-right taxInput" [(ngModel)]="taxTotalAmount" [mask]="maskInput"
+                class="form-control cursor-pointer text-right tax-input" [(ngModel)]="taxTotalAmount" [mask]="maskInput"
                 [prefix]="prefixInput" [suffix]="suffixInput" (focus)="handleInputFocus()"
                 style="padding-right:24px !important;" />
         </div>
     </a>
 
-    <div class="pr">
+    <div class="position-relative">
         <ul class="dropdown-menu pd"
             [ngStyle]="{'display': showTaxPopup ? 'block': 'none'}" (click)="$event.stopPropagation()"
             [style.max-height.px]="102" [style.min-height.px]="70" style="left: unset;top: 0px;">
@@ -26,19 +26,19 @@
             </li>
 
             <li class="relative" *ngFor="let tax of taxRenderData;trackBy: trackByFn; let idx = index">
-                <label class="checkbox oh width100 bdrB pdB customItem" placement="bottom"
+                <label class="checkbox overflow-hidden width-100 bd-rb pd-b05 custom-item" placement="bottom"
                     *ngIf="(taxRenderData.length - 1) !== idx"  (click)="$event.stopPropagation()"
                     [ngClass]="{'disabled-label': tax.isDisabled}">
                     <input class="pull-left" id="{{'tax-control-checkbox-' + idx}}" name="tax_{{idx}}" type="checkbox" [(ngModel)]="tax.isChecked"
                         (change)="change()" (click)="$event.stopPropagation()" [disabled]="tax.isDisabled" />
-                    <span class="pull-left ellp">{{tax.name}}</span>
+                    <span class="pull-left text-ellipsis">{{tax.name}}</span>
                 </label>
-                <label class="checkbox oh width100 bdrB pdB customItem" placement="top"
+                <label class="checkbox overflow-hidden width-100 bd-rb pd-b05 custom-item" placement="top"
                     *ngIf="(taxRenderData.length - 1) === idx" (click)="$event.stopPropagation()"
                     [ngClass]="{'disabled-label': tax.isDisabled}">
                     <input class="pull-left" id="{{'tax-checkbox-' + idx}}" name="tax_{{idx}}" type="checkbox" [(ngModel)]="tax.isChecked"
                         (change)="change()" (click)="$event.stopPropagation()" [disabled]="tax.isDisabled" />
-                    <span class="pull-left ellp">{{tax.name}}</span>
+                    <span class="pull-left text-ellipsis">{{tax.name}}</span>
                 </label>
             </li>
         </ul>
diff --git a/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.html b/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.html
index a31a8c5ee29..2d950bd6615 100644
--- a/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.html
+++ b/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.html
@@ -44,7 +44,7 @@
 											</ng-container>
 										</ng-container>
 										<ng-container *ngIf="r.parentGroups">
-											<p class="smlP">
+											<p class="small-para-details">
 												<small>
 													<span *ngFor="let item of r.parentGroups; let idx = index">
 														<ng-container *ngIf="idx > 0">
@@ -56,7 +56,7 @@
 											</p>
 										</ng-container>
 										<ng-container *ngIf="!r.type">
-											<span class="hvrTxt">{{r.uniqueName}}</span>
+											<span class="command-hover-text">{{r.uniqueName}}</span>
 										</ng-container>
 									</div>
 								</a>
@@ -73,10 +73,10 @@
 			<div #mainEle>
 				<div class="p-2" [style.width.px]="ItemWidth" *ngIf="!dontShowNoResultMsg">
 					<span *ngIf="rows && rows.length === 0">
-						<div class="jumper-results" [ngClass]="{'alC': showChannelCreateBtn}">
+						<div class="jumper-results" [ngClass]="{'text-center': showChannelCreateBtn}">
 							<p class="block text-center mr-b2">No matches found. Did you spell it correctly?</p>
 							<ng-container *ngIf="showChannelCreateBtn">
-								<button class="btn btn-primary mrR2" (click)="triggerAddManage()">Create Group</button>
+								<button class="btn btn-primary mr-r2" (click)="triggerAddManage()">Create Group</button>
 								<button class="btn btn-primary" (click)="triggerAddManage()">Create A/c</button>
 								<!-- <a href="javascript:void(0)" class="btn btn-light create_channel" (click)="newTeamCreationEmitter.emit(searchEle.nativeElement.value)">
                   Create a channel named #{{searchEle.nativeElement.value | slice:0:21}}
@@ -96,7 +96,7 @@
 <!-- input box template -->
 <ng-template #searchEleTemplate>
 	<div #searchWrapEle class="search-wrapper" (click)="handleClickOnSearchWrapper($event)">
-		<span class="searh-ico"><i class="icon-search"></i></span>
+		<span class="icon-search-icon"><i class="icon-search"></i></span>
 		<span *ngFor="let item of listOfSelectedGroups; let idx = index">
 			<div class="vR">
 				<div class="vN">
@@ -108,7 +108,7 @@
 				</div>
 			</div>
 		</span>
-		<input class="searchEle" #searchEle type="text" [placeholder]="searchBoxPlaceholder" (focus)="handleFocus()"
+		<input class="search-element" #searchEle type="text" [placeholder]="searchBoxPlaceholder" (focus)="handleFocus()"
 			(keydown)="handleKeydown($event)" (keyup)="search($event, $event.target.value)" />
 	</div>
 	<i class="icon-cross close-navigation" (click)="close()"></i>
diff --git a/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.scss b/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.scss
index 9c1649c69ad..ddb2487495f 100644
--- a/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.scss
+++ b/apps/web-giddh/src/app/theme/universal-list/data-list/data.list.component.scss
@@ -7,14 +7,14 @@
         background-color: white;
         flex-wrap: wrap !important;
         border-bottom: 1px solid #ccc;
-        .searchEle {
+        .search-element {
             outline: none;
             border: none;
             font-size: 14px;
             font-weight: normal;
             line-height: initial;
         }
-        .searh-ico {
+        .icon-search-icon {
             position: absolute;
             left: 0;
             right: 0;
@@ -138,7 +138,7 @@
                 font-size: 14px;
                 color: #333333;
                 text-transform: capitalize;
-                .smlP {
+                .small-para-details {
                     margin: 0;
                     width: 320px;
                     white-space: nowrap;
@@ -149,14 +149,14 @@
                     font-size: 12px;
                     color: #858484;
                 }
-                .hvrTxt {
+                .command-hover-text {
                     color: white;
                     position: absolute;
                     right: 0;
                     top: 10px;
                     text-transform: initial;
                 }
-                .brdcrmb {
+                .command-bread-crumb {
                     max-width: 150px;
                     overflow: hidden;
                 }
diff --git a/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.html b/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.html
index 63ea15dca16..3d4882f5987 100644
--- a/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.html
@@ -8,7 +8,7 @@ <h3 class="aside-title">Activity Log</h3>
 
     <div class="aside-body aside-create-tax-component">
         <div class="aside-pane-form">
-            <h4 class="text-blue bold font-20 mb-1">STANDARD</h4>
+            <h4 class="text-blue bold font-20 mr-b1">STANDARD</h4>
             <div class="row pb-1 bb-1">
                 <div class="col-md-9">
                     <div class="table-responsive">
diff --git a/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.scss b/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.scss
index 74426d71c25..bf39f75f93e 100644
--- a/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.scss
+++ b/apps/web-giddh/src/app/userDetails/components/activity-log/activity-log-sidebar.component.scss
@@ -50,7 +50,7 @@
 }
 .aside-pane-form {
     background-color: $white;
-    box-shadow: 0px 3px 6px #0000001a;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/userDetails/components/add-company/add-company.component.html b/apps/web-giddh/src/app/userDetails/components/add-company/add-company.component.html
index 185c1cc1ce2..510e505c739 100644
--- a/apps/web-giddh/src/app/userDetails/components/add-company/add-company.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/add-company/add-company.component.html
@@ -3,12 +3,12 @@
     <h3>Add Company</h3>
 </div>
 <div id="my-frame" class="modal-body clearfix font-14">
-    <p class="mb-15">Select the Company you want to add in <strong>{{activeCompany?.subscription?.planDetails?.name}}</strong> plan</p>
-    <div class="row mb-1">
+    <p class="mr-b15">Select the Company you want to add in <strong>{{activeCompany?.subscription?.planDetails?.name}}</strong> plan</p>
+    <div class="row mr-b1">
         <div class="col-lg-6 col-md-12">
             <label class="font-14">Select Company<span class="text-danger">*</span></label>
-            <div class="select-caret pos-rel">
-                <sh-select placeholder="Select Company" name="selectedCompany" [options]="associatedCompaniesOption" [isFilterEnabled]="true" [(ngModel)]="selectedCompany"></sh-select>
+            <div class="select-caret position-relative">
+                <sh-select placeholder="Select Company" name="selectedCompany" [options]="associatedCompaniesOption" [isFilterEnabled]="true" [(ngModel)]="selectedCompany" [isRequired]="true"></sh-select>
             </div>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.html b/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.html
index c77c980aafb..4fcdd1ee228 100644
--- a/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.html
@@ -6,8 +6,8 @@ <h3 class="aside-title">Company Details</h3>
 
     <div class="aside-body aside-create-tax-component">
         <div class="aside-pane-form">
-            <h4 class="text-blue bold font-20 mb-1 wb">{{selectedCompany?.name}}</h4>
-            <div class="row pb-1 bb-1 mb-2">
+            <h4 class="text-blue bold font-20 mr-b1 wb">{{selectedCompany?.name}}</h4>
+            <div class="row pd-b1 bb-1 mb-2">
                 <div class="col-md-9">
                     <ul class="company-list font-14 mb-0">
                         <li>Plan: {{selectedCompany?.subscription?.planDetails?.name}}</li>
diff --git a/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.scss b/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.scss
index abbbb35bf79..5eb437743a0 100644
--- a/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.scss
+++ b/apps/web-giddh/src/app/userDetails/components/company-details-sidebar/company-details-sidebar.component.scss
@@ -54,7 +54,7 @@
 }
 .aside-pane-form {
     background-color: $white;
-    box-shadow: 0px 3px 6px #0000001a;
+    box-shadow: 0px 3px 6px $black-russian;
     padding: 15px 15px;
     height: calc(100vh - 90px);
     overflow: auto;
diff --git a/apps/web-giddh/src/app/userDetails/components/move-company/move-company.component.html b/apps/web-giddh/src/app/userDetails/components/move-company/move-company.component.html
index ae0a812656c..1d3d682c7ed 100644
--- a/apps/web-giddh/src/app/userDetails/components/move-company/move-company.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/move-company/move-company.component.html
@@ -8,8 +8,8 @@ <h3>Move Company</h3>
     <div class="row mb-2">
         <div class="col-md-6">
             <label class="font-14">Select Plan<span class="text-danger">*</span></label>
-            <div class="select-caret pos-rel">
-                <sh-select placeholder="Select Plan" name="availablePlans" [options]="availablePlansOption" [isFilterEnabled]="true" [(ngModel)]="selectedPlan"></sh-select>
+            <div class="select-caret position-relative">
+                <sh-select placeholder="Select Plan" name="availablePlans" [options]="availablePlansOption" [isFilterEnabled]="true" [(ngModel)]="selectedPlan" [isRequired]="true"></sh-select>
             </div>
         </div>
     </div>
diff --git a/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.html b/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.html
index 6422ae93047..a0db75bdd71 100644
--- a/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.html
@@ -1,7 +1,7 @@
 <div class="welcome-msg">
     <div class="row">
         <div class="col-md-9 col-sm-9  font-14">
-            <p class="mb-1">Hi {{logedInUser?.name}} !</p>
+            <p class="mr-b1">Hi {{logedInUser?.name}} !</p>
             <p class="mb-3 plan-msg">All the plan come with all the features with <span class="selected">90 days money
                     back guarantee.</span></p>
         </div>
@@ -10,7 +10,7 @@
         </div>
     </div>
     <div #topAllPlans>
-        <div *ngIf="!isSwitchPlanInProcess" class="choose-ur-plan noHeight">
+        <div *ngIf="!isSwitchPlanInProcess" class="choose-ur-plan height-auto">
             <div>
                 <div class="main-row-plans">
                     <div class="row">
@@ -31,7 +31,7 @@ <h3 class="plan-heading">
                                                 <div
                                                     class="d-flex align-items-center justify-content-between plans-head-top">
                                                     <div class="clearfix">
-                                                        <h3 class="bold font-22 mb-05">
+                                                        <h3 class="bold font-22 mr-b05">
                                                             {{defaultMultipleCompanyPlan?.planDetails?.amount}} /-</h3>
                                                         <p class="font-12">
                                                             {{defaultMultipleCompanyPlan?.planDetails?.duration}}
@@ -49,8 +49,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Transactions Limit</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Transactions Limit</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{transactionLimitTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -65,8 +65,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Users</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Users</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedUsersTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -78,8 +78,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Customers/Vendors</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Customers/Vendors</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedCustomersVendorsTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -91,8 +91,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Desktop/Mobile App</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Desktop/Mobile App</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{desktopMobileAppTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -138,7 +138,7 @@ <h3 class="plan-heading">
                                                     <div
                                                         class="d-flex align-items-center justify-content-between plans-head-top">
                                                         <div class="clearfix">
-                                                            <h3 class="bold font-22 mb-05">
+                                                            <h3 class="bold font-22 mr-b05">
                                                                 <!-- <span class="price-cross">₹800</span> -->
                                                                 {{defaultSingleCompanyPlan?.planDetails?.amount}} /-
                                                             </h3>
@@ -160,8 +160,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Transactions Limit</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Transactions Limit</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{transactionLimitTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -176,8 +176,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Users</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Users</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedUsersTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -189,8 +189,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Customers/Vendors</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Customers/Vendors</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedCustomersVendorsTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -202,8 +202,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Desktop/Mobile App</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Desktop/Mobile App</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{desktopMobileAppTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -241,7 +241,7 @@ <h2>Free</h2>
                                                 <h3 class="plan-heading">{{defaultFreePlan?.planDetails?.name}}</h3>
                                                 <div>
                                                     <div class="plans-head-top">
-                                                        <h3 class="bold font-22 mb-05">
+                                                        <h3 class="bold font-22 mr-b05">
                                                             {{defaultFreePlan?.planDetails?.amount}} /-
                                                         </h3>
                                                         <p class="font-12">{{defaultFreePlan?.planDetails?.duration}}
@@ -258,8 +258,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Transactions Limit</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Transactions Limit</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{transactionLimitTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -274,8 +274,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Users</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Users</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedUsersTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -287,8 +287,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Unlimited Customers/Vendors</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Unlimited Customers/Vendors</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{unlimitedCustomersVendorsTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -300,8 +300,8 @@ <h3 class="bold font-22 mb-05">
                                                                 </button>
                                                                 <div class="transactions-popup" role="menu"
                                                                     aria-labelledby="button-alignment">
-                                                                    <p class="bold mb-1">Desktop/Mobile App</p>
-                                                                    <p class="font-12 text-gray mb-1">
+                                                                    <p class="bold mr-b1">Desktop/Mobile App</p>
+                                                                    <p class="font-12 text-gray mr-b1">
                                                                         {{desktopMobileAppTooltipContent}}</p>
                                                                 </div>
                                                             </div>
@@ -339,7 +339,7 @@ <h3 class="bold font-22 mb-05">
         </div>
     </div>
     <div #allPlans>
-        <div class="box clearfix pl-3 mb-15 xs-pl-15 pb-3 relative all-plans" *ngIf="showPlans">
+        <div class="box clearfix pd-l3 mr-b15 xs-pd-l15 pd-r3 relative all-plans" *ngIf="showPlans">
             <a class="close close-2" href="javascript:void(0)" (click)="showPlans = ''; navigate(topAllPlans)">
                 <i class="icon-cross"></i>
             </a>
@@ -354,7 +354,7 @@ <h3 class="bold font-22 mb-05">
                         <h3 class="mb-2">{{item?.planDetails?.name}}</h3>
                         <div class="d-flex align-items-center justify-content-between">
                             <div>
-                                <h3 class="bold font-22 mb-05">{{item?.planDetails?.amount | number}} /-</h3>
+                                <h3 class="bold font-22 mr-b05">{{item?.planDetails?.amount | number}} /-</h3>
                                 <p class="font-12">{{item?.planDetails?.duration}}
                                     {{item?.planDetails?.durationUnit}}(s)</p>
                             </div>
@@ -388,13 +388,13 @@ <h3 class="bold font-22 mb-05">{{item?.planDetails?.amount | number}} /-</h3>
         <div class="box">
             <div class="row">
                 <div class="col-md-6 col-sm-12 col-xs-12">
-                    <div class="activation-key mb-1">
+                    <div class="activation-key mr-b1">
                         <h2 class="font-26 text-blue bold mb-3">Activation Key</h2>
                         <p class="font-14">You will get the activation key from resellers.</p>
                         <div class="d-flex">
                             <input type="text" name="licenceKey" required id="licenceKey" [formControl]="licenceKey"
                                 class="form-control mr-t1" placeholder="Enter activation key">
-                            <div class="activation-btn ml-15">
+                            <div class="activation-btn mr-l15">
                                 <button class="btn success-btn mr-t1 pl-3 pr-3" [disabled]="!licenceKey.value"
                                     (click)="createCompanyViaActivationKey()">
                                     Activate</button>
diff --git a/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.scss b/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.scss
index 574f3c3c1ea..2420b7e59f8 100644
--- a/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.scss
+++ b/apps/web-giddh/src/app/userDetails/components/subscriptions-plans/subscriptions-plans.component.scss
@@ -21,7 +21,7 @@
     color: $dark-gray;
     padding: 10px;
 }
-.noHeight {
+.height-auto {
     height: auto !important;
 }
 .payment-log-list > li {
@@ -279,7 +279,7 @@
 }
 .btn-cancel {
     background: $very-light-gray;
-    border-color: $very-light-gray;
+    border-color: $gainsboro;
     color: $night-rider;
     font-family: "opensans-semibold" !important;
     margin-bottom: 15px !important;
@@ -466,7 +466,7 @@
     .xs-pr-0 {
         padding-right: 0px !important;
     }
-    .xs-pl-15 {
+    .xs-pd-l15 {
         padding-left: 15px !important;
     }
     .inner-your-account {
diff --git a/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.html b/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.html
index 6d832f98793..4ef744d8c9f 100644
--- a/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.html
+++ b/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.html
@@ -33,7 +33,7 @@
             </div>
         </div>
         <!-- <div class="clearfix mb-2" *ngIf="activeCompany && activeCompany?.subscription && activeCompany?.subscription?.planDetails">
-            <div class="box mt-15 box-border plan-row-wrapper">
+            <div class="box mr-t15 box-border plan-row-wrapper">
                 <div class="row d-flex justify-content-between align-items-center xs-d-block plan-row">
                     <div class="col-md-9 col-sm-9 col-xs-12">
                         <p class="bold font-14">{{activeCompany.subscription.planDetails.name}}</p>
@@ -47,15 +47,15 @@
                         </ul>
                     </div>
                     <div class="col-md-3 col-sm-3 col-xs-12 text-right trial-plan-state">
-                        <div class="font-14" [ngClass]="{'active': calculateRemainingDays(activeCompany.subscription.expiry) === 'Active'}" *ngIf="activeCompany.subscription.status==='trial'"><span class="font-26" *ngIf="calculateRemainingDays(activeCompany.subscription.expiry) !== 'Active'">{{calculateRemainingDays(activeCompany.subscription.expiry)}}</span> <span class="green-dote" *ngIf="calculateRemainingDays(activeCompany.subscription.expiry) === 'Active'"></span> {{calculateRemainingDays(activeCompany.subscription.expiry) === 'Active' ? 'Active' : ""}} </div>
-                        <div class="active font-14" *ngIf="activeCompany.subscription.status==='active'"><span class="green-dote"></span> {{activeCompany.subscription.status | titlecase}} </div>
-                        <div class="text-danger font-14" *ngIf="activeCompany.subscription.status==='expired'"><span class="red-dote"></span> {{activeCompany.subscription.status | titlecase}} </div>
+                        <div class="font-14" [ngClass]="{'active': calculateRemainingDays(activeCompany.subscription.expiry) === 'Active'}" *ngIf="activeCompany.subscription.status==='trial'"><span class="font-26" *ngIf="calculateRemainingDays(activeCompany.subscription.expiry) !== 'Active'">{{calculateRemainingDays(activeCompany.subscription.expiry)}}</span> <span class="green-dot" *ngIf="calculateRemainingDays(activeCompany.subscription.expiry) === 'Active'"></span> {{calculateRemainingDays(activeCompany.subscription.expiry) === 'Active' ? 'Active' : ""}} </div>
+                        <div class="active font-14" *ngIf="activeCompany.subscription.status==='active'"><span class="green-dot"></span> {{activeCompany.subscription.status | titlecase}} </div>
+                        <div class="text-danger font-14" *ngIf="activeCompany.subscription.status==='expired'"><span class="red-dot"></span> {{activeCompany.subscription.status | titlecase}} </div>
                     </div>
                 </div>
             </div>
         </div> -->
 
-        <div class="box trial-plan-section mt-15">
+        <div class="box trial-plan-section mr-t15">
             <div class="clearfix">
                 <div class="row d-flex sm-d-block">
                     <div class="col-lg-7 col-md-12 col-sm-12">
@@ -169,7 +169,7 @@ <h2 class="section-head pb-0">{{seletedUserPlans?.planDetails?.name}} (Transacti
                                 </div>
 
                             </div>
-                            <div class="mt-05">
+                            <div class="mr-t05">
                                 <p><small>* Additional charges on transactions above
                                         {{seletedUserPlans?.planDetails?.transactionLimit | number}} @
                                         {{seletedUserPlans?.planDetails?.ratePerExtraTransaction | number}}
@@ -186,15 +186,15 @@ <h2 class="section-head pb-0">{{seletedUserPlans?.planDetails?.name}} (Transacti
                                 <h2 class="section-head pb-0">Associated Companies</h2>
                                 <div class="clearfix">
                                     <div class="active d-inline-block middle" *ngIf="activeCompany?.subscription?.status === 'active' || calculateRemainingDays(activeCompany?.subscription?.expiry) === 'Active'">
-                                        <span class="green-dote"> </span> Active
+                                        <span class="green-dot"> </span> Active
                                     </div>
                                     <div class="text-warning font-14 d-inline-block middle" *ngIf="activeCompany?.subscription?.status === 'trial' && calculateRemainingDays(activeCompany?.subscription?.expiry) !== 'Active'">
-                                        <span class="orange-dote"> </span> Trial
+                                        <span class="orange-dot"> </span> Trial
                                     </div>
                                     <div class="text-danger d-inline-block middle" *ngIf="activeCompany?.subscription?.status === 'expired'">
-                                        <span class="red-dote"> </span> Expired
+                                        <span class="red-dot"> </span> Expired
                                     </div>
-                                    <!-- <div class="btn-group d-inline-block custom-dropdown pt-05 ml-1 middle" dropdown
+                                    <!-- <div class="btn-group d-inline-block custom-dropdown pd-t05 ml-1 middle" dropdown
                                         placement="bottom right">
                                         <button id="button-alignment" dropdownToggle type="button"
                                             class="dropdown-toggle" aria-controls="dropdown-alignment">
@@ -214,7 +214,7 @@ <h2 class="section-head pb-0">Associated Companies</h2>
                                 </div>
                             </div>
                             <div class="clearfix associated-companies-list" container="body">
-                                <div class="mt-15 mb-1 pl-2 pr-2 pr-1 search-company-here" *ngIf="subscriptions">
+                                <div class="mr-t15 mr-b1 pl-2 pr-2 pr-1 search-company-here" *ngIf="subscriptions">
                                     <div class="form-group custom-input-search">
                                         <i class="icon-search"></i>
                                         <input type="search" class="form-control" [(ngModel)]="searchString" (ngModelChange)="filterCompanyList($event)" placeholder="Search Company here">
@@ -228,10 +228,10 @@ <h2 class="section-head pb-0">Associated Companies</h2>
                                                     <span>{{i+1}}</span>
                                                     <div class="d-flex associated-company-name">
                                                         <p>
-                                                            <img src="assets/images/blue-check.svg" class="mr-05" *ngIf="activeCompany?.uniqueName === company?.uniqueName">
+                                                            <img src="assets/images/blue-check.svg" class="mr-r05" *ngIf="activeCompany?.uniqueName === company?.uniqueName">
                                                             {{company.name}} {{(company.alias) ? "(" + company.alias + ")" : ""}}
                                                         </p>
-                                                        <p class="font-12 mt-05" *ngIf="activeCompany?.uniqueName === company?.uniqueName">(Current Company)</p>
+                                                        <p class="font-12 mr-t05" *ngIf="activeCompany?.uniqueName === company?.uniqueName">(Current Company)</p>
                                                     </div>
                                                 </a>
 
@@ -270,7 +270,7 @@ <h2 class="section-head pb-0">Associated Companies</h2>
             </div>
 
             <div class="clearfix mr-t2 relative">
-                <div class="transaction-popup mb-1" *ngIf="seletedUserPlans?.additionalCharges >0">
+                <div class="transaction-popup mr-b1" *ngIf="seletedUserPlans?.additionalCharges >0">
                     <p>You have crossed transactions limit of your </p>
                     <p><strong>Professional Plan subscribed on {{seletedUserPlans?.startedAt}}!</strong></p>
                     <p><small>Please renew your plan or pay now to continue subscription.</small></p>
@@ -283,7 +283,7 @@ <h2 class="section-head pb-0">Associated Companies</h2>
                 <div class="col-sm-7 transaction-list">
                     <div class="box clearfix mr-t2 no-padding">
                         <div class="table-responsive">
-                            <table class="table basic mr0 subscription-table">
+                            <table class="table basic m-0 subscription-table">
                                 <thead>
                                     <tr>
                                         <th>Date</th> <span class="text-light-2">(previous+current)</span>
@@ -297,7 +297,7 @@ <h2 class="section-head pb-0">Associated Companies</h2>
                                         <td class="professional-name">{{ moment(transaction.from, giddhDateFormat).format('MMM - YY')}}</td>
                                         <td>{{ seletedUserPlans?.totalTransactions ? seletedUserPlans?.totalTransactions : 0 }}
                                         </td>
-                                        <span class="text-light ml-05">({{transaction.previousTransactionCount}}+{{transaction.currentTransactionCount}})</span>
+                                        <span class="text-light mr-l05">({{transaction.previousTransactionCount}}+{{transaction.currentTransactionCount}})</span>
                                         <td>{{ seletedUserPlans?.balance? seletedUserPlans?.balance: 0 }}</td>
                                         <td class="text-danger">
                                             {{ seletedUserPlans?.additionalCharges? seletedUserPlans?.additionalCharges: 0 }}
@@ -321,7 +321,7 @@ <h2 class="section-head pb-0">Associated Companies</h2>
                             <h3>Companies Name + Total Transactions (till today)</h3>
                         </div>
                         <div class="clearfix">
-                            <div class="mt-1 mb-1 mr-2 ml-2">
+                            <div class="mt-1 mr-b1 mr-2 ml-2">
                                 <input type="search" class="form-control" [(ngModel)]="srchString" (ngModelChange)="filterCompanyList($event)" placeholder="Search Company here">
                             </div>
                             <div class="company-list" *ngIf="subscriptions">
@@ -351,9 +351,9 @@ <h3>Companies Name + Total Transactions (till today)</h3>
                         </ul>
                     </div>
                     <div class="col-md-3 col-sm-3 col-xs-12 text-right trial-plan-state">
-                        <div class="font-14" [ngClass]="{'active': calculateRemainingDays(item?.expiry) === 'Active'}" *ngIf="item?.status==='trial'"><span class="font-26" *ngIf="calculateRemainingDays(item?.expiry) !== 'Active'">{{calculateRemainingDays(item?.expiry)}}</span> <span class="green-dote" *ngIf="calculateRemainingDays(item?.expiry) === 'Active'"></span> {{calculateRemainingDays(item?.expiry) === 'Active' ? 'Active' : ""}} </div>
-                        <div class="active font-14" *ngIf="item?.status==='active'"><span class="green-dote"></span> {{item?.status | titlecase}} </div>
-                        <div class="text-danger font-14" *ngIf="item?.status==='expired'"><span class="red-dote"></span> {{item?.status | titlecase}} </div>
+                        <div class="font-14" [ngClass]="{'active': calculateRemainingDays(item?.expiry) === 'Active'}" *ngIf="item?.status==='trial'"><span class="font-26" *ngIf="calculateRemainingDays(item?.expiry) !== 'Active'">{{calculateRemainingDays(item?.expiry)}}</span> <span class="green-dot" *ngIf="calculateRemainingDays(item?.expiry) === 'Active'"></span> {{calculateRemainingDays(item?.expiry) === 'Active' ? 'Active' : ""}} </div>
+                        <div class="active font-14" *ngIf="item?.status==='active'"><span class="green-dot"></span> {{item?.status | titlecase}} </div>
+                        <div class="text-danger font-14" *ngIf="item?.status==='expired'"><span class="red-dot"></span> {{item?.status | titlecase}} </div>
                     </div>
                 </div>
             </div>
@@ -391,7 +391,7 @@ <h3 class="">Status:</h3> <a href="javascript:void(0)" class="text-green">{{ sub
         </div>
 
         <div class="table-responsive">
-            <table class="table basic mr0 ">
+            <table class="table basic m-0 ">
                 <thead>
                     <tr>
                         <th>Date</th>
diff --git a/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.scss b/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.scss
index 141705a5f75..14028ba7af9 100644
--- a/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.scss
+++ b/apps/web-giddh/src/app/userDetails/components/subscriptions/subscriptions.component.scss
@@ -38,7 +38,7 @@
     clear: both;
 }
 .subscription-dropdown .btn {
-    border: 1px solid #c4c0c0;
+    border: 1px solid $gainsboro;
     width: 342px;
     text-align: left;
     background: $white;
@@ -77,7 +77,7 @@
 }
 .subscription-dropdown .dropdown-menu li {
     padding: 5px 4px;
-    border-bottom: 1px solid #e6e6e6;
+    border-bottom: 1px solid $gainsboro;
     transition: 0.5s all ease;
 }
 .subscription-dropdown .dropdown-menu li.active {
@@ -95,7 +95,7 @@
 }
 .subscription-dropdown li:hover a,
 .subscription-dropdown li:hover {
-    background: #f1f1f1;
+    background: $gray-95;
 }
 .subscription-dropdown .dropdown-menu li a span {
     position: absolute;
@@ -163,17 +163,17 @@
     color: $light-green;
     font-size: 14px;
 }
-.green-dote, .red-dote, .orange-dote {
+.green-dot, .red-dot, .orange-dot {
     width: 9px;
     height: 9px;
     display: inline-block;
     border-radius: 40px;
     background-color: $light-green;
 }
-.red-dote {
+.red-dot {
     background-color: $red;
 }
-.orange-dote {
+.orange-dot {
     background-color: $orange;
 }
 .basic > tbody > tr td:first-child, .basic > thead > tr th:first-child {
diff --git a/apps/web-giddh/src/app/userDetails/userDetails.component.html b/apps/web-giddh/src/app/userDetails/userDetails.component.html
index 9b3f6d25a3e..37c664ebe93 100644
--- a/apps/web-giddh/src/app/userDetails/userDetails.component.html
+++ b/apps/web-giddh/src/app/userDetails/userDetails.component.html
@@ -12,14 +12,14 @@
         [id]="(activeTab == 'auth-key') ? 'giddh-page-heading': ''" >
             <div class="wrap-tab-content-pd-15" *ngIf="activeTab == 'auth-key'">
                 <div class="box clearfix mt-1">
-                    <h1 class="section-head pdT0">Main Auth-key</h1>
+                    <h1 class="section-head pt-0">Main Auth-key</h1>
                     <form name="authKeyForm" #authKeyForm="ngForm" novalidate role="form">
                         <div class="form-group row">
                             <div class="col-12 col-sm-12 col-md-12 col-lg-6">
                                 <input id="authKey" class="form-control" name="userAuthKey" [(ngModel)]="userAuthKey" [readonly]="true" />
                             </div>
                         </div>
-                        <div class="form-group clearfix mrB0">
+                        <div class="form-group clearfix mb-0">
                             <button class="btn btn-default" (click)="regenerateKey()">Regenerate Auth Key</button>
                             <a class="btn btn-link" href="{{apiPostmanDocUrl}}" target="_blank">Documentation</a>
                         </div>
@@ -34,7 +34,7 @@ <h1 class="section-head pdT0">Main Auth-key</h1>
                 <div class="box clearfix mt-1">
                     <form class="" name="mobileForm" novalidate>
                         <h1 class="section-head">Add/Edit Mobile Number</h1>
-                        <div class="mr-t">
+                        <div class="mr-t05">
                             <!-- ng-minlength="10" pattern="/^[0-9]{1,10}$/"  -->
                             <input decimalDigitsDirective maxlength="10" class="form-control max350 pull-left " type="text" ng-required="true" placeholder="9998899988" name="mobileForm.phoneNumber" [(ngModel)]="phoneNumber" />
                             <button class="btn btn-success btn-sm mr-l1" [ladda]="isAddNewMobileNoInProcess$ | async" (click)="addNumber(phoneNumber)">Add
@@ -44,13 +44,13 @@ <h1 class="section-head">Add/Edit Mobile Number</h1>
                             <b>Note: </b>Format should be like 9898989898</p>
                     </form>
 
-                    <div class="clearfix" *ngIf="showVerificationBox" style="padding-top:0;">
+                    <div class="clearfix p-0" *ngIf="showVerificationBox">
                         <hr>
                         <h1 class="mr-t2 max350">
                             <span>Enter verification Code</span>
                             <!--<button class="btn-link pull-right pr-0">Resend</button>-->
                         </h1>
-                        <div class="mr-t">
+                        <div class="mr-t05">
                             <input class="form-control max350 pull-left" type="text" placeholder="Verification Code" [(ngModel)]="oneTimePassword" />
                             <button class="btn btn-success mr-l1" [ladda]="isVerifyAddNewMobileNoInProcess$ | async" (click)="verifyNumber()">Verify
                             </button>
@@ -66,7 +66,7 @@ <h1 class="mr-t2 max350">
                                         (Long code no. :
                                         9229224424)
                                     </button>
-                                    <div class="longcode-details" *ngIf="expandLongCode">
+                                    <div class="long-code-details" *ngIf="expandLongCode">
                                         <figure>
                                             <h1 class="section-head">Accounts</h1>
                                             <ul>
@@ -138,11 +138,11 @@ <h1 class="section-head"><input type="checkbox" (change)="changeTwoWayAuth()" [(
             <div class="wrap-tab-content-pd-15" *ngIf="activeTab == 'session'">
                 <div class="box clearfix mt-1">
                     <div class="max900 d-flex pd-b1  activity-title">
-                        <h1 class="section-head pdT0">Activity History</h1>
+                        <h1 class="section-head pt-0">Activity History</h1>
                         <button class="btn btn-primary mr-0" (click)="clearAllSession()">Delete All</button>
                     </div>
                     <p class="grey-color max900 ">Access and manage your activity history details from anywhere at anytime. This will help you to monitor all your account access.</p>
-                    <div class="max900 mt-15">
+                    <div class="max900 mr-t15">
                         <table class="table table-bordered session-table basic on-mobile-view">
                             <thead>
                                 <tr>
diff --git a/apps/web-giddh/src/app/vat-report/transactions/vatReportTransactions.component.html b/apps/web-giddh/src/app/vat-report/transactions/vatReportTransactions.component.html
index 96f6743fb5e..61bee6f3f4f 100644
--- a/apps/web-giddh/src/app/vat-report/transactions/vatReportTransactions.component.html
+++ b/apps/web-giddh/src/app/vat-report/transactions/vatReportTransactions.component.html
@@ -2,7 +2,7 @@
     <hamburger-menu [pageHeading]="'VAT Report'"></hamburger-menu>
     <div class="container-fluid">
 
-        <div class="clearfix pt-15">
+        <div class="clearfix pd-t15">
             <a (click)="navigateToPreviousPage()" class="cursor-pointer fond-inline-block mr-2"><i class="fa fa-angle-left font-20 middle"></i> Back</a> <span *ngIf="vatReportTransactions.results && vatReportTransactions.results.length > 0">{{vatReportTransactions.results[0].description}}</span>
         </div>
         <div class="invoice-preview table-responsive">
@@ -39,7 +39,7 @@
                 </tbody>
             </table>
         </div>
-        <div class="paginationWrapper" *ngIf="vatReportTransactions.totalPages > 1">
+        <div class="pagination-wrapper" *ngIf="vatReportTransactions.totalPages > 1">
             <pagination [totalItems]="vatReportTransactions.totalPages" [(ngModel)]="vatReportTransactions.page"
                 [maxSize]="6" class="pagination-sm" [boundaryLinks]="true" [itemsPerPage]="1" [rotate]="false"
                 (pageChanged)="pageChanged($event)"></pagination>
diff --git a/apps/web-giddh/src/app/vat-report/vatReport.component.html b/apps/web-giddh/src/app/vat-report/vatReport.component.html
index 648eed5415d..5922ee4dbf5 100644
--- a/apps/web-giddh/src/app/vat-report/vatReport.component.html
+++ b/apps/web-giddh/src/app/vat-report/vatReport.component.html
@@ -28,7 +28,7 @@
                                                             </span>
                                                             <span class="entity-details">
                                                                 <div class="item giddh-limit single-line-clamp">{{ option.label || '-' }}</div>
-                                                                <div class="item-unq giddh-limit single-line-clamp">
+                                                                <div class="item-unique giddh-limit single-line-clamp">
                                                                     {{ option.name || '-' }}
                                                                 </div>
                                                             </span>
@@ -50,7 +50,8 @@
                                             [defaultValue]="taxNumber"
                                             placeholder="Select TRN"
                                             [showClear]="false" [multiple]="false"
-                                            [ItemHeight]="67">
+                                            [ItemHeight]="67"
+                                            [isRequired]="true">
                                         </sh-select>
                                     </div>
                                 </div>
@@ -58,7 +59,7 @@
                                     <div class="d-flex align-items-center tax-engine">
                                         <span class="d-inline-block mr-2">VAT Report for period</span>
 
-                                        <div class="advanceSearchByDate date-advance-search">
+                                        <div class="advance-search-by-date date-advance-search">
                                             <span class="input-wrapper">
                                                 <div class="btn-group dropdown" dropdown [autoClose]="false"
                                                     (isOpenChange)="onOpenChange($event)" #periodDropdown="bs-dropdown"
@@ -76,8 +77,6 @@
                                                         </ng-container>
                                                         <span class="caret"></span>
                                                     </button>
-
-
                                                     <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu" role="menu"
                                                         aria-labelledby="button-nested">
                                                         <li role="menuitem" dropdown placement="right" [autoClose]="false"
diff --git a/apps/web-giddh/src/app/vat-report/vatReport.component.scss b/apps/web-giddh/src/app/vat-report/vatReport.component.scss
index e32f04a7154..bf3a2e848fc 100644
--- a/apps/web-giddh/src/app/vat-report/vatReport.component.scss
+++ b/apps/web-giddh/src/app/vat-report/vatReport.component.scss
@@ -1,8 +1,10 @@
+@import "../../assets/css/color.scss";
+
 .invoice-control {
     .nav.nav-tabs {
         margin-bottom: 20px;
         padding: 12px 0px 0 15px !important;
-        background-color: #f7f8fd;
+        background-color: $alice-blue-light;
         z-index: 9;
         position: relative;
         top: -4px;
@@ -18,12 +20,12 @@
     border-right: 0px !important;
     border-left: 0px !important;
     border-bottom: 0px !important;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
     white-space: normal;
 }
 
 .table-border-bottom .last-row td {
-    background: #f2f2f2;
+    background: $white-smoke;
     padding: 14px 10px;
     font-weight: bold;
 }
@@ -33,17 +35,17 @@
 }
 
 .return-sel {
-    background-color: #f5f5f5;
+    background-color: $gray-95;
     border-radius: 18px;
     padding: 5px 15px;
     cursor: pointer;
     display: inline-block;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
 }
 .tax-engine {
     background: none;
 }
-.advanceSearchByDate .btn-group > .dropdown-menu {
+.advance-search-by-date .btn-group > .dropdown-menu {
     margin-top: 0;
 }
 .month-picker {
@@ -57,7 +59,7 @@
         }
     }
 }
-.advanceSearchByDate.date-advance-search {
+.advance-search-by-date.date-advance-search {
     width: 280px;
 }
 
diff --git a/apps/web-giddh/src/app/vat-report/vatReport.component.ts b/apps/web-giddh/src/app/vat-report/vatReport.component.ts
index cf401460f1f..c9eede984cd 100644
--- a/apps/web-giddh/src/app/vat-report/vatReport.component.ts
+++ b/apps/web-giddh/src/app/vat-report/vatReport.component.ts
@@ -147,7 +147,11 @@ export class VatReportComponent implements OnInit, OnDestroy {
         this.destroyed$.complete();
     }
 
-    public getVatReport() {
+    public getVatReport(event?: any) {
+        if(event && event.value) {
+            this.taxNumber = event.value;
+        }
+
         if (this.taxNumber) {
             let vatReportRequest = new VatReportRequest();
             vatReportRequest.from = this.fromDate;
diff --git a/apps/web-giddh/src/app/welcome/welcome.component.html b/apps/web-giddh/src/app/welcome/welcome.component.html
index f918d593033..70b3dca9d23 100644
--- a/apps/web-giddh/src/app/welcome/welcome.component.html
+++ b/apps/web-giddh/src/app/welcome/welcome.component.html
@@ -1,4 +1,4 @@
-<div id="main" class="welcome_outer">
+<div id="main" class="welcome-outer">
     <giddh-loader></giddh-loader>
     <layout-main [sideMenu]="false">
 
@@ -8,9 +8,9 @@ <h2>Welcome To Giddh! </h2>
         <hr />
 
         <div class="welcome-container ">
-            <p class="welcome_title">Set up your organisation profile and start accounting with Giddh.</p>
+            <p class="welcome-title">Set up your organisation profile and start accounting with Giddh.</p>
             <form name="form" #welcomeForm="ngForm" novalidate="" class="clearfix welcome-form horizontal-form" autocomplete="off">
-                <div class=" clearfix row">
+                <div class="clearfix row">
                     <div class="col-12 mr-b2">
                         <ng-container *ngIf="!itemOnBoardingDetails?.isOnBoardingInProgress else onBoardingItemName">
                             <label for="name" class="m-t-30" *ngIf="!isBranch">Company Name<sup
@@ -35,8 +35,8 @@ <h2>Welcome To Giddh! </h2>
                     <div class="col-6 mr-b2 ">
                         <span>
                             <label for="country" class="d-block">Country<sup class="text-danger">*</sup></label>
-                            <div class="custom-select pos-rel">
-                                <sh-select id="country" [options]="countrySource$ | async" required
+                            <div class="custom-select position-relative">
+                                <sh-select id="country" [options]="countrySource$ | async" required [isRequired]="true"
                                     [isFilterEnabled]="true"
                                     [disabled]="(createNewCompanyPreparedObj.country) ? 'disabled' : null"
                                     name="country" [(ngModel)]="createNewCompanyPreparedObj.country"
@@ -49,8 +49,8 @@ <h2>Welcome To Giddh! </h2>
                     </div>
                     <div class="col-6 mr-b2 ">
                         <label for="">Currency<sup class="text-danger">*</sup></label>
-                        <div class="custom-select select-caret pos-rel">
-                            <sh-select name="baseCurrency" [options]="currencySource$ | async" required
+                        <div class="custom-select select-caret position-relative">
+                            <sh-select name="baseCurrency" [options]="currencySource$ | async" required [isRequired]="true"
                                 [disabled]="(createNewCompanyPreparedObj.baseCurrency) ? 'disabled' : null"
                                 [isFilterEnabled]="true" [(ngModel)]="createNewCompanyPreparedObj.baseCurrency"
                                 [defaultValue]="createNewCompanyPreparedObj.baseCurrency"></sh-select>
@@ -60,13 +60,13 @@ <h2>Welcome To Giddh! </h2>
                         <span>
                             <label for="contactNo" class="d-block">Mobile Number<sup class="text-danger">*</sup></label>
                             <div class="d-flex">
-                                <sh-select class="pull-left select-caret" (blur)="isContactNumberValid()"
+                                <sh-select class="pull-left select-caret select-caret-contact" (blur)="isContactNumberValid()"
                                     [disabled]="(createNewCompanyPreparedObj.phoneCode && !isItemUpdateInProgress) ? 'disabled' : null"
-                                    style="width: 90px;margin-right: 16px;" name="phoneCode" [placeholder]="+91"
+                                    name="phoneCode" [placeholder]="+91"
                                     [options]="callingCodesSource$ | async"
                                     [(ngModel)]="createNewCompanyPreparedObj.phoneCode"
                                     [defaultValue]="createNewCompanyPreparedObj.phoneCode"></sh-select>
-                                <input type="number" class="form-control pull-right  select-caret" required
+                                <input type="number" class="form-control pull-right select-caret" required
                                     (blur)="isContactNumberValid()"
                                     [disabled]="(createNewCompanyPreparedObj.contactNo && !isItemUpdateInProgress) ? 'disabled' : null"
                                     placeholder="9998899988" id="contactNo" autocomplete="off"
@@ -76,9 +76,9 @@ <h2>Welcome To Giddh! </h2>
                     </div>
 
                     <div class="col-12 mr-b2 select-box" *ngIf="businessTypeList?.length && !isWarehouse">
-                        <div class="pos-rel">
+                        <div class="position-relative">
                             <label for="businessType">Select Business Type</label>
-                            <div class="custom-select pos-rel">
+                            <div class="custom-select position-relative">
                                 <sh-select placeholder="Select Business Type" name="businessType" id="businessType"
                                     (onClear)="onClearBusinessType()" autocomplete="false" [readonlyInput]="true"
                                     [disabled]="(companyProfileObj.businessType && isOnBoardingInProgress) ? 'disabled' : null"
@@ -90,9 +90,9 @@ <h2>Welcome To Giddh! </h2>
                         </div>
                     </div>
                     <div class="col-12 mr-b2 select-box" *ngIf="!isWarehouse">
-                        <div class="pos-rel">
+                        <div class="position-relative">
                             <label for="businessNature">Select Business Nature</label>
-                            <div class="custom-select  pos-rel">
+                            <div class="custom-select position-relative">
                                 <sh-select placeholder="Select Business Nature" name="businessNature"
                                     [readonlyInput]="true" (onClear)="onClearBusinessNature()" autocomplete="false"
                                     id="businessNature" [(ngModel)]="companyProfileObj.businessNature"
@@ -109,13 +109,13 @@ <h2>Welcome To Giddh! </h2>
 
                                 <label for="gstinNum" class="d-block">{{formFields['taxName'].label}}<sup
                                         class="text-danger">*</sup></label>
-                                <input type="text" [ngClass]="{'gstinWidth' : isBranch || isOnBoardingInProgress}"
+                                <input type="text" [ngClass]="{'gstin-width' : isbranch || isOnBoardingInProgress}"
                                     class="form-control" autocomplete="false" required #gstNumberField
                                     (change)="handleGstChange(gstNumberField, states)" name="gstNumber"
                                     [(ngModel)]="companyProfileObj.taxNumber"
                                     placeholder="Enter {{formFields['taxName'].label}}" />
 
-                                <span class="sameAsHead" *ngIf="isBranch || isOnBoardingInProgress"> <input
+                                <span class="same-as-head" *ngIf="isBranch || isOnBoardingInProgress"> <input
                                         type="checkbox" name="isTaxNumberSameAsHeadQuarter"
                                         [(ngModel)]="isTaxNumberSameAsHeadQuarter" value="1"
                                         (change)="sameAsHeadQuarter(gstNumberField, states);"> Same as
@@ -127,32 +127,32 @@ <h2>Welcome To Giddh! </h2>
                             <div>
                                 <label>State<sup class="text-danger">*</sup></label><br>
                                 <div>
-                                    <sh-select #states [options]="statesSource$ | async" required
+                                    <sh-select #states [options]="statesSource$ | async" required [isRequired]="true"
                                         [isFilterEnabled]="true" [forceClearReactive]="forceClear$ | async" name="state"
-                                        [(ngModel)]="companyProfileObj.state" style="width:100%"
+                                        [(ngModel)]="companyProfileObj.state" class="width-100"
                                         [defaultValue]="companyProfileObj.selectedState"></sh-select>
                                 </div>
                             </div>
                         </div>
                         <div *ngIf="!(isOnBoardingInProgress && isWarehouse) && !isBranch" class="col-12 mr-b2 selectBox">
                             <div class="">
-                                <label for="taxes_dd">Applicable Tax</label>
+                                <label for="taxes-dd">Applicable Tax</label>
                                 <div class="btn-group btn-block select-caret invoice-btn" dropdown>
                                     <button dropdownToggle type="button"
                                         class="form-control text-left btn-block dropdown-toggle"> Select Taxes <span
-                                            class="select_drop pull-right mr-t1"></span></button>
-                                    <ul class="dropdown-menu dropdown-menu-2 width100" role="menu">
+                                            class="select-drop pull-right mr-t1"></span></button>
+                                    <ul class="dropdown-menu dropdown-menu-2 width-100" role="menu">
                                         <li *ngIf="taxesList.length==0">No results found</li>
                                         <li *ngFor="let tax of taxesList">
                                             <input type="checkbox" (click)="selectApplicableTaxes(tax, $event)" [checked]="tax.isSelected" /> {{tax.label}}
                                         </li>
                                     </ul>
                                 </div>
-                                <div style="margin-top: 5px;">
+                                <div class="mr-t05">
                                     <ul class="list-inline custom-multi-select">
                                         <li *ngFor="let tax of selectedTaxes">
-                                            <a style="color: gray">
-                                                {{currentTaxList[tax].name}} <span class="pdL"
+                                            <a>
+                                                {{currentTaxList[tax].name}} <span class="pd-l05"
                                                     (click)="removeTax(tax)">×</span>
                                             </a>
                                         </li>
@@ -176,16 +176,16 @@ <h2>Welcome To Giddh! </h2>
                             </ng-template>
                             <textarea #address [required]="selectedBusinesstype === 'Registered' || isWarehouse"
                                 (focus)="isWarehouse ? removeAddressFieldError() : ''" placeholder="Address"
-                                class="form-control mr-t1 " name="address" id="address"
-                                [(ngModel)]="companyProfileObj.address" style="min-height:100px; "></textarea>
+                                class="form-control mr-t1 min-height-100" name="address" id="address"
+                                [(ngModel)]="companyProfileObj.address"></textarea>
                         </div>
                     </div>
                     <div class="col-12 ">
-                        <p class="change-preference ">Note: You can always change your preferences later in Settings.
+                        <p class="change-preference">Note: You can always change your preferences later in Settings.
                         </p><br />
                         <p class="taxation-not-supported" *ngIf="!formFields['taxName']">Create and apply taxes on all types of transactions! To get tax reports, contact <a href="mailto:sales@giddh.com">sales@giddh.com</a>!</p>
                     </div>
-                    <div class="col-12 d-flex mrT5">
+                    <div class="col-12 d-flex mr-t5">
                         <button class="btn btn-primary" (click)="back(isBranch)">Back</button>
                         <button [ladda]="isApiInProgress" type="submit" class="btn btn-sky-blue" (click)="submit(welcomeForm)" [disabled]="welcomeForm.invalid || !isGstValid || isCreateCompanyInProgress">
                             {{itemOnBoardingDetails?.isOnBoardingInProgress ? itemOnBoardingDetails?.isItemUpdateInProgress ? 'Update ' +  itemOnBoardingDetails?.onBoardingType : 'Create ' + itemOnBoardingDetails?.onBoardingType : 'Submit'
diff --git a/apps/web-giddh/src/app/welcome/welcome.component.scss b/apps/web-giddh/src/app/welcome/welcome.component.scss
index e415a75af08..0ae95960a37 100644
--- a/apps/web-giddh/src/app/welcome/welcome.component.scss
+++ b/apps/web-giddh/src/app/welcome/welcome.component.scss
@@ -9,13 +9,13 @@
 
 .welcome-container {
     hr {
-        background: #707070;
+        background: $gray;
     }
     form {
         flex: 0;
     }
     .name-error {
-        color: #e51f0c;
+        color: $red;
         font-size: 11px;
         float: right;
     }
@@ -54,17 +54,17 @@
     margin: auto;
 }
 
-.welcome_outer hr {
-    border: 0.5px solid #707070;
+.welcome-outer hr {
+    border: 0.5px solid $gray;
 }
 
 .skip {
-    color: #10aae0;
+    color: $deep-sky-blue-hover;
     margin-left: 16px;
 }
 
 .btn-default:hover {
-    background: #e6e6e6;
+    background: $whisper;
 }
 
 ::ng-deep sh-select .header.open > input[type="text"],
@@ -80,13 +80,13 @@
 }
 
 .addCmpnyAddrs p {
-    color: #10aae0;
+    color: $deep-sky-blue-hover;
     font-size: 12px;
 }
 
 .change-preference, .taxation-not-supported {
     font-size: 14px;
-    color: #707070;
+    color: $gray;
 }
 
 .welcome-container .btn-sky-blue {
@@ -94,18 +94,18 @@
 }
 
 .btn-default {
-    background: #ccc;
-    color: #333;
+    background: $very-light-gray;
+    color: $night-rider;
 }
-.welcome-container p.welcome_title {
+.welcome-container p.welcome-title {
     font-size: 14px;
-    color: #9b9b9b;
+    color: $nobel;
     margin-top: 25px;
 }
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] {
-    color: #707070 !important;
+    color: $gray !important;
 }
 .welcome-container sup {
     top: 0;
@@ -119,27 +119,41 @@ fieldset[disabled] {
     cursor: pointer;
     color: $deep-sky-blue;
 }
-.pos-rel {
+.position-relative {
     position: relative;
 }
-.custom-multi-select li {
-    background: #f1f1f1;
-    color: white;
+.custom-multi-select {
+    li {
+    background: $white-smoke;
+    color: $white;
     margin: 4px;
     padding: 2px 10px;
     font-size: 14px;
     border-radius: 3px;
     cursor: pointer;
     display: inline-block;
+    a{
+        color: $gray;
+    }
+    }
 }
-span.sameAsHead {
+span.same-as-head {
     font-size: 14px;
     position: relative;
     top: 8px;
     display: flex;
 }
-.gstinWidth {
+.gstin-width {
     width: 50%;
     margin-right: 10px;
     float: left;
 }
+
+.select-caret-contact{
+    width: 90px !important;
+    margin-right: 16px !important;
+}
+
+.min-height-100{
+    min-height:100px;
+}
\ No newline at end of file
diff --git a/apps/web-giddh/src/assets/css/color.scss b/apps/web-giddh/src/assets/css/color.scss
index c3b1561e905..989d363a75d 100644
--- a/apps/web-giddh/src/assets/css/color.scss
+++ b/apps/web-giddh/src/assets/css/color.scss
@@ -1,17 +1,13 @@
 /* new color css */
-
 $midnight-express: #171f48;
 $portage: #868ee0;
 $lavender-light: #ebedff;
-$lavender: #e6e7f1;
 $navy: #000962;
 $bay-of-many: #3a3e5c;
-$solitude: #e6e7e8;
 $governor-bay: #4b5196;
 $governor-bay-dark: #47509d;
 $rich-blue: #5d64af;
 $wild-blue-yonder: #757bb9;
-$lavender: #edeef9;
 $jacksons-purple: #313a97;
 $chetwode-blue: #5b64c9;
 $white: #ffffff;
@@ -25,7 +21,6 @@ $midnight-blue-hover: #040858;
 $cerulean: #0d83b3;
 $corn-flower-blue: #5092f3;
 $dark-midnight-blue: #040a58;
-$navy: #000962;
 $white-smoke: #f2f2f2;
 $lavender: #eeeff9;
 $deep-sky-blue: #01a9f4;
@@ -37,7 +32,6 @@ $gray: #808080;
 $red: #ff0000;
 $dark-gray: #666666;
 $dim-gray:#a9a9a9;
-$extra-dark-gray: #333333;
 $nero: #1c1c1c;
 $bitter-sweet: #ff6262;
 $alice-blue: #f5f8f9;
@@ -50,7 +44,7 @@ $light-black-russian: #0000001a;
 $cornflower-blue: #4693f1;
 $grandis: #fed46a;
 $alice-blue-light: #f7f8fa;
-$wistful: #afaaaabf;
+$wistful: #afaaaa;
 $speech-blue: #3f51b5;
 $scarlet: #e51f0c;
 $moody-blue: #8e8383bf;
@@ -58,6 +52,7 @@ $portage: #7d87e445;
 $hawkes-blue: #c6dafc;
 $light-green: #33bb0c;
 $success-green: #2fab4a;
+$success-green-disable: #81d4d4;
 $light-sky-blue: #91d8f7;
 $orange: #ffa500;
 $cinnabar-orange: #df4927;
@@ -72,12 +67,47 @@ $eastern-blue: #11919b;
 $davy-grey: #555555;
 $charcoal : #484848;
 $olive:#8080808c;
-$gray-90:#e5e5e5;
 $solitude:#f4f5f8;
 $gray-95: #f5f5f5;
 $vivid-blue: #2d9ee0;
 $quartz:#d5d8fcfa;
 $fog:#d2cde6;
-$lavender-dark: #e7e7e8;
-$extra-dark-alice-blue: #e8f5ff;
-$light-grey: #d7d1d1;
+$pink-swan: #b4afaf;
+$muzli: #2d3b4b;
+$jade-color: #00b177;
+$curious-blue: #428bca;
+$faux-true: #005bd0;
+$navy-blue: #025cff;
+$bright-green: #39c296;
+$bright-pink: #f75398;
+$bright-yellow: #fa9c00;
+$light-purple: #b590ff;
+$faux-cadet-blue: #adb4c3;
+$hint-of-cyan: #19c2d0;
+$skin-tone: #ffceb1;
+$grayish-blue: #7889a1;
+$deep-pink: #950069;
+$dark-magenta: #542852;
+$burgundy: #82001d;
+$dull-pink: #6b1438;
+$sherpa-blue: #004254;
+$atlantis: #96bc2d;
+$cloud-burst: #202e5a;
+$bud-green: #79bd58;
+$deep-green-cyan: #125446;
+$granny-apple: #c9e6ca;
+$chablis: #ffece094;
+$valhalla: #2c2c43;
+$medium-spring-blue: #11b1e5;
+$light-maroon: #de4d3c;
+$medium-black-cyan: #0e78aa;
+$russian-black: #0f0f27;
+$pale-rose: #ebccd1;
+$floral-white: #fff8eb;
+$cactus: #587058;
+$bus-yellow: #ffd800;
+$cornflower-blue-dark: #6495ed;
+$flamingo: #e86850;
+$vivid-orange: #ffa500;
+$violet-red: #f85c88;
+$java: #27a264;
\ No newline at end of file
diff --git a/apps/web-giddh/src/assets/css/ngx-bs-datepicker.scss b/apps/web-giddh/src/assets/css/ngx-bs-datepicker.scss
index 6f9f2bf8614..bfc98d1377f 100644
--- a/apps/web-giddh/src/assets/css/ngx-bs-datepicker.scss
+++ b/apps/web-giddh/src/assets/css/ngx-bs-datepicker.scss
@@ -15,7 +15,7 @@
 .daterangepicker{
     box-shadow: 0 3px 28px 0 rgba(0,0,0,.14);
     color: $dark-gray;
-    border: 1px solid $very-light-gray;
+    border: 1px solid $gainsboro;
     z-index: 999!important;
 }
 .drp-selected{
diff --git a/apps/web-giddh/src/assets/css/style-1.scss b/apps/web-giddh/src/assets/css/style-1.scss
index c2b3e40d943..8113f898ea3 100644
--- a/apps/web-giddh/src/assets/css/style-1.scss
+++ b/apps/web-giddh/src/assets/css/style-1.scss
@@ -21,7 +21,7 @@ VERSION:  1
 html,
 body {
     height: 100%;
-    background: #f7f8fa;
+    background: $alice-blue-light;
     font-family: "opensans-regular";
     color: $nero;
     -webkit-font-smoothing: antialiased;
@@ -122,7 +122,7 @@ a {
 
 /*typography*/
 
-/*.bold,.c-name,.fw600,.dshUl li .title, .dGryHead, .page-title, .total, .stock-grp-list>li>a, label.boldHead, .table-l tr:last-child, .table-container > section > div.row > div:first-child,.account-card > .balances > span.title, .gTblHead, .gTblFoot, .table.invGenTbl > tfoot > tr > th.bold,.widget-text h1, .widget-text h2,.widget-text h3,.widget-text h4,.widget-text h5,.widget-text h6, .a4-section span.bold,.a4-section span.bold span,.ledger-container table th,.midlight_info,.tcount,.subAccBox li a, .load-more, .company-name, .basic>thead>tr>th {
+/*.bold,.company-name,.fw600,.dshUl li .title, .dGryHead, .page-title, .total, .stock-grp-list>li>a, label.boldHead, .table-l tr:last-child, .table-container > section > div.row > div:first-child,.account-card > .balances > span.title, .head-block-head, .head-block-foot, .table.invGenTbl > tfoot > tr > th.bold,.widget-text h1, .widget-text h2,.widget-text h3,.widget-text h4,.widget-text h5,.widget-text h6, .a4-section span.bold,.a4-section span.bold span,.ledger-container table th,.midlight_info,.tcount,.subAccBox li a, .load-more, .company-name, .basic>thead>tr>th {
 font-family: Roboto-Bold;
 } */
 
@@ -135,8 +135,8 @@ font-family: Roboto-Thin;
 }*/
 
 .ui-select-hilite {
-    background-color: #f9f08b;
-    color: #000;
+    background-color: $floral-white;
+    color: $black;
 }
 
 /*end typo*/
@@ -214,25 +214,25 @@ aside-menu-account .container-fluid {
 /*header nav links override*/
 
 .navbar-inverse .navbar-nav > li > a {
-    color: #363a41;
+    color: $night-rider;
     line-height: 24px;
 }
 
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
-    color: #363a41 !important;
+    color: $night-rider !important;
 }
 
 .navbar-inverse .navbar-text {
     color: $white;
 }
 
-#cmpWrp {
+#company-wrap {
     padding-top: 0;
     padding-bottom: 0;
 }
 
-#cmpWrp i {
+#company-wrap i {
     float: left;
     margin: 15px 0;
 }
@@ -241,7 +241,7 @@ aside-menu-account .container-fluid {
   display: block;
 } */
 
-/* .c-name {
+/* .company-name {
     line-height: 20px;
     min-width: 130px;
     text-transform: uppercase;
@@ -294,7 +294,7 @@ aside-menu-account .container-fluid {
     color: $white;
     text-decoration: none;
     border-bottom: 1px solid rgba(256, 256, 256, 0.2);
-    color: #fff !important;
+    color: $white !important;
 }
 
 .dshUl > li:hover {
@@ -390,10 +390,6 @@ aside-menu-account .container-fluid {
     padding-right: 0;
 }
 
-.pdR0 {
-    padding-right: 0 !important;
-}
-
 .pdL25 {
     padding-left: 25px;
 }
@@ -402,14 +398,6 @@ aside-menu-account .container-fluid {
     padding-right: 25px;
 }
 
-.pdL-5 {
-    padding-left: 5px;
-}
-
-.pdR-5 {
-    padding-right: 5px;
-}
-
 .pd {
     padding: 5px;
 }
@@ -418,52 +406,44 @@ aside-menu-account .container-fluid {
     padding: 10px;
 }
 
-.pd15 {
+.pd-15 {
     padding: 15px;
 }
 
-.pd2 {
+.pd-2 {
     padding: 20px;
 }
 
-.pd3 {
+.pd-3 {
     padding: 30px;
 }
 
-.pd4 {
+.pd-4 {
     padding: 40px;
 }
 
-.pdT {
+.pd-t05 {
     padding-top: 5px;
 }
 
-.pdB {
+.pd-b05 {
     padding-bottom: 5px;
 }
 
-.pdL {
+.pd-l05 {
     padding-left: 5px;
 }
 
-.pdL0 {
-    padding-left: 0;
-}
-
-.pdR {
+.pd-r05 {
     padding-right: 5px;
 }
 
-.pdR0 {
-    padding-right: 0;
-}
-
 .pd-t1 {
     padding-top: 10px;
 }
 
-.pdT2,
-.pdT3 {
+.pd-t2,
+.pd-t3 {
     padding-top: 20px;
 }
 
@@ -475,103 +455,91 @@ aside-menu-account .container-fluid {
     padding-left: 10px !important;
 }
 
-.pdl1imp {
-    padding-left: 10px !important;
-}
-
 .pd-r1 {
     padding-right: 10px !important;
 }
 
-.pdB2 {
+.pd-b2 {
     padding-bottom: 20px !important;
 }
 
-.pdL2 {
+.pd-l2 {
     padding-left: 20px !important;
 }
 
-.pdR2 {
+.pd-r2 {
     padding-right: 20px !important;
 }
 
-.pdB3 {
+.pd-b3 {
     padding-bottom: 30px;
 }
 
-.pdL3 {
-    padding-left: 30px;
+.pd-l3 {
+    padding-left: 30px !important;
 }
 
-.pdR3 {
+.pd-r3 {
     padding-right: 30px !important;
 }
 
-.pdT4 {
+.pd-t4 {
     padding-top: 30px;
 }
 
-.pdT5 {
+.pd-t5 {
     padding-top: 30px;
 }
 
-.pdB4 {
+.pd-b4 {
     padding-bottom: 40px;
 }
 
-.pdL4 {
+.pd-l4 {
     padding-left: 40px;
 }
 
-.pdR4 {
+.pd-r4 {
     padding-right: 40px;
 }
 
-.pd0 {
-    padding: 0;
-}
-
-.mr0 {
-    margin: 0;
-}
-
 .mr {
     margin: 5px;
 }
 
-.mr1 {
+.m-10 {
     margin: 10px;
 }
 
-.mr15 {
+.mr-15 {
     margin: 15px;
 }
 
-.mr2 {
+.m-20 {
     margin: 20px;
 }
 
-.mr3 {
+.m-30 {
     margin: 30px;
 }
 
-.mr4 {
+.m-40 {
     margin: 40px;
 }
 
-.mr-t {
+.mr-t05 {
     margin-top: 5px;
 }
 
-.mrB {
+.mr-b05 {
     margin-bottom: 5px !important;
 }
 
-.mrL {
-    margin-left: 5px;
+.mr-l05 {
+    margin-left: 5px !important;
 }
 
-.mrR {
+.mr-r05 {
     margin-right: 5px;
 }
 
@@ -583,19 +551,11 @@ aside-menu-account .container-fluid {
     margin-bottom: 10px !important;
 }
 
-.mrB15 {
-    margin-bottom: 15px;
-}
-
 .mr-l1 {
     margin-left: 10px;
 }
 
-.mrL15 {
-    margin-left: 15px;
-}
-
-.mrR1 {
+.mr-r1 {
     margin-right: 10px;
 }
 
@@ -607,27 +567,27 @@ aside-menu-account .container-fluid {
     margin-bottom: 20px;
 }
 
-.mrL2 {
+.mr-l2 {
     margin-left: 20px;
 }
 
-.mrR2 {
+.mr-r2 {
     margin-right: 20px;
 }
 
-.mrT3 {
-    margin-top: 30px;
+.mr-t3 {
+    margin-top: 30px !important;
 }
 
-.mrB3 {
+.mr-b3 {
     margin-bottom: 30px;
 }
 
-.mrL3 {
+.mr-l3 {
     margin-left: 30px;
 }
 
-.mrR3 {
+.mr-r3 {
     margin-right: 30px;
 }
 
@@ -635,19 +595,19 @@ aside-menu-account .container-fluid {
     margin-top: 40px;
 }
 
-.mrT5 {
+.mr-t5 {
     margin-top: 50px;
 }
 
-.mrB4 {
+.mr-b4 {
     margin-bottom: 40px;
 }
 
-.mrL4 {
+.mr-l4 {
     margin-left: 40px;
 }
 
-.mrR4 {
+.mr-r4 {
     margin-right: 40px;
 }
 
@@ -655,23 +615,27 @@ aside-menu-account .container-fluid {
     border: 1px solid $gainsboro;
 }
 
-.bdrN {
+.border-none {
     border: none;
 }
 
-.bdrT {
+.bd-r-bottom-none{border-bottom:none;}
+.bd-r-top-none{border-top:none;}
+.bd-r-left-none{border-left:none;}
+.bd-r-right-none{border-right:none;}
+.bd-rt {
     border-top: 1px solid $gainsboro;
 }
 
-.bdrB {
+.bd-rb {
     border-bottom: 1px solid $gainsboro !important;
 }
 
-.bdrL {
+.bd-rl {
     border-left: 1px solid $gainsboro;
 }
 
-.bdrR {
+.bd-rr {
     border-right: 1px solid $gainsboro !important;
 }
 
@@ -679,6 +643,14 @@ aside-menu-account .container-fluid {
     border-radius: 0;
 }
 
+.dark-grey-bg{
+    background: $davy-grey !important;
+}
+
+.bg-grey{
+    background: $whisper-color;
+}
+
 .pa {
     position: absolute;
 }
@@ -691,76 +663,53 @@ aside-menu-account .container-fluid {
     position: fixed;
 }
 
-.witClr {
+.white-color {
     color: $white;
 }
 
-.gryClr {
-    color: #777;
-}
-
-.greyBg {
-    background: #f5f5f5;
+.grey-bg {
+    background: $gray-95;
     /*min-width:320px;*/
 }
 
-.witBg {
+.white-bg {
     background: $white;
 }
 
-.transBg {
+.transparent-bg {
     background: 0 0;
 }
 
-.oh {
+.min-width-100{
+    min-width: 100px;
+}
+
+.overflow-hidden {
     overflow: hidden;
 }
 
-.oyAuto {
+.overflow-y-auto {
     overflow-y: auto;
 }
 
-.oxAuto {
+.overflow-x-auto {
     overflow-x: auto;
 }
 
-.rn {
+.resize-none {
     resize: none;
 }
 
-.ln {
+.list-style-none {
     list-style: none;
 }
 
-.txtUpc {
-    text-transform: uppercase;
-}
-
-.txt-lwc {
-    text-transform: lowercase;
-}
-
-.txtCpc {
-    text-transform: capitalize;
-}
-
-.td-undr {
+.text-underline {
     text-decoration: underline;
 }
 
-.alR {
-    text-align: right;
-}
-
-.alL {
-    text-align: left;
-}
-
-.alC {
-    text-align: center;
-}
 
-.ellp {
+.text-ellipsis {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -778,66 +727,14 @@ aside-menu-account .container-fluid {
     font-size: 16px;
 }
 
-.scrClass {
-    /* overflow: hidden;
-position: relative; */
-}
-
-.scrItem {
+.scroll-item {
     overflow: auto;
     position: relative;
 }
 
-.oyHid {
-    overflow-y: hidden;
-}
-
-.oxHid {
-    overflow-x: hidden;
-}
-
-.pad0 {
-    padding: 0 !important;
-}
-
-/*structure style*/
-
-#right {
-}
-
-.middleBody {
-}
-
-#restMngCompRit {
-}
-
-/*companylist div style*/
-
-.companyList li {
-    min-height: 49px;
-    border-bottom: 1px solid #e5e5e5;
-    position: relative;
-    padding-top: 4px;
-}
-
-.companyList li:hover {
-    background: #fafafa;
-}
-
-.companyList li.active {
-    background: #ddd;
-}
-
-.companyList > li > a {
-    color: #777;
-    position: absolute;
-    right: 40px;
-    left: 10px;
-}
-
-.companyList li h3 {
+.company-list li h3 {
     padding: 4px 0 2px;
-    color: #333;
+    color: $night-rider;
     font-size: 14px;
 }
 
@@ -845,11 +742,11 @@ position: relative; */
     font-size: 11px;
 }
 
-.companyList .ui-icon {
+.company-list .ui-icon {
     margin: 4px 4px 20px;
 }
 
-.companyList li .action {
+.company-list li .action {
     right: 10px;
     position: absolute;
     opacity: 0.3;
@@ -858,21 +755,21 @@ position: relative; */
     top: 15px;
 }
 
-.companyList li:hover .action {
+.company-list li:hover .action {
     opacity: 1;
 }
 
 /*manage company detail*/
 
-.greyBox {
-    color: #444;
-    background: #f3f3f3;
-    border: solid 1px #ddd;
+.grey-box {
+    color: $davy-grey;
+    background: $white-smoke;
+    border: solid 1px $gainsboro;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     padding: 15px;
 }
 
-.delIcon {
+.delete-icon {
     float: right;
     width: 34px;
     height: 34px;
@@ -880,21 +777,21 @@ position: relative; */
     cursor: pointer;
 }
 
-.delIcon .glyphicon {
+.delete-icon .glyphicon {
     left: 9px;
     top: 9px;
 }
 
 .success.glyphicon {
-    color: green;
+    color: $green;
 }
 
 .warning.glyphicon {
-    color: orange;
+    color: $orange;
 }
 
 .error.glyphicon {
-    color: red;
+    color: $red;
 }
 
 /*overriding tabs style*/
@@ -906,7 +803,7 @@ position: relative; */
 
 /*modal settings override*/
 
-.noBrdRdsModal .modal-content {
+.border-radius-0 .modal-content {
     border-radius: 0;
 }
 
@@ -927,10 +824,6 @@ position: relative; */
     overflow: inherit;
 }
 
-#addMngGrpScrBar {
-    /* height: 380px; */
-}
-
 #middleBody {
     height: 488px;
     overflow-x: hidden;
@@ -938,7 +831,7 @@ position: relative; */
     -webkit-overflow-scrolling: touch;
 }
 
-#getGroupModal.getGroupModal #middleBody {
+#getGroupModal.get-group-modal #middleBody {
     height: auto;
 }
 .scroll-btn {
@@ -947,7 +840,7 @@ position: relative; */
     bottom: 20px;
     height: 25px;
     width: 25px;
-    background: rgb(185, 178, 178);
+    background: $pink-swan;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -955,29 +848,29 @@ position: relative; */
 /*typography styles*/
 
 .dGryHead {
-    background-color: #e2e2e2;
+    background-color: $whisper;
     color: #333;
     font-size: 15px;
     padding: 9px 20px;
 }
 
-.fs13 {
+.font-13 {
     font-size: 13px;
 }
 
-.fs14 {
+.font-14 {
     font-size: 14px;
 }
 
-.fs16 {
+.font-16 {
     font-size: 16px;
 }
 
-.fs18 {
+.font-18 {
     font-size: 18px;
 }
 
-.fs20 {
+.font-20 {
     font-size: 20px;
 }
 
@@ -988,12 +881,12 @@ position: relative; */
 }
 
 #tree-root {
-    background: #f8faff;
+    background: $alice-blue-light;
 }
 
 .angular-ui-tree-handle {
-    background: #f8faff;
-    border-top: 1px solid #ddd;
+    background: $alice-blue-light;
+    border-top: 1px solid $gainsboro;
     color: #567288;
     padding: 7px 10px;
     cursor: pointer;
@@ -1008,11 +901,11 @@ position: relative; */
 }
 
 li:last-child .angular-ui-tree-handle {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .angular-ui-tree-handle p {
-    color: #999;
+    color: $nobel;
     display: none;
 }
 
@@ -1025,7 +918,7 @@ li:last-child .angular-ui-tree-handle {
 }
 
 .angular-ui-tree-handle.active {
-    background: #cfd5e2;
+    background: $lavender-light;
 }
 
 .angular-ui-tree-handle.active p {
@@ -1062,37 +955,28 @@ li:last-child .angular-ui-tree-handle {
 #selAcntWrap.minimizeBoth {
     height: 100px;
     margin-bottom: 15px;
-    border-bottom: 1px solid gray;
+    border-bottom: 1px solid $gray;
 }
 
-.acntListDiv .list-group-item {
+.account-list-div .list-group-item {
     padding: 6px 10px;
     border-left: 0;
     border-right: 0;
 }
 
-.acntListDiv .list-group-item-heading,
-.acntListDiv .list-group {
+.account-list-div .list-group-item-heading,
+.account-list-div .list-group {
     margin-bottom: 0;
     line-height: 20px;
 }
 
-.acntListDiv .list-group-item:first-child,
-.acntListDiv .list-group-item:last-child {
+.account-list-div .list-group-item:first-child,
+.account-list-div .list-group-item:last-child {
     border-radius: 0;
 }
 
-/*small loader*/
-
-/*
-*usage
-<div class="search-loading">
-<span class="spinner small"></span> Loading…
-</div>
-*/
-
 .search-loading {
-    color: #8c8c8c;
+    color: $gray;
     display: block;
     text-align: center;
     padding: 20px 0;
@@ -1212,26 +1096,26 @@ li:last-child .angular-ui-tree-handle {
 
 /*account list menus*/
 
-.acntAccordion {
+.account-accordion {
     font-size: 12px;
 }
 
-.acntAccordion a {
-    color: #333;
+.account-accordion a {
+    color: $night-rider;
 }
 
-.acntAccordion .title a {
+.account-accordion .title a {
     display: block;
     padding: 0 15px;
     cursor: pointer;
 }
 
-.acntAccordion > li > ul > li > ul > li {
+.account-accordion > li > ul > li > ul > li {
     line-height: 0;
     list-style: none;
 }
 
-.acntAccordion > li > ul > li > ul > li > a > div {
+.account-accordion > li > ul > li > ul > li > a > div {
     overflow: hidden;
 }
 
@@ -1340,8 +1224,8 @@ li:last-child .angular-ui-tree-handle {
 
 #eledgerwrap .alert-danger {
     color: inherit;
-    border: 2px dashed #ebccd1;
-    background-color: white;
+    border: 2px dashed $pale-rose;
+    background-color: $white;
 }
 
 #eledgerwrap .alert .close {
@@ -1351,7 +1235,7 @@ li:last-child .angular-ui-tree-handle {
     opacity: 0.8;
 }
 
-.eLedgEntryForm .popover {
+.eledger-entry-form .popover {
     z-index: 10;
 }
 
@@ -1360,100 +1244,100 @@ li:last-child .angular-ui-tree-handle {
     background-color:transparent;
 }
 
-.ledgerTable.table .nopad {
+.ledger-table.table .nopad {
     padding: 0 !important;
 }
 
-.greyBg td,
-.greyBg th {
-    background-color: #f5f5f5;
+.grey-bg td,
+.grey-bg th {
+    background-color: $gray-95;
 }
 
 .splBg th {
-    background-color: #5c534d;
+    background-color: $davy-grey;
     color: $white;
 }
 
-.ledgerBodyContent td {
+.ledger-body-content td {
     padding: 0 !important;
 }
 
-.ledgerBodyContent input.nobdr {
+.ledger-body-content input.nobdr {
     width: 100%;
     border: 0;
     padding: 8px;
     background-color: $white;
 }
 
-.ledgerBodyContent input.nobdr.error {
-    border: 1px solid #a94442;
+.ledger-body-content input.nobdr.error {
+    border: 1px solid $red;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 }
 
-.ldgrInnerTbl .dropdown-menu > li > a {
+.ledger-inner-table .dropdown-menu > li > a {
     display: block;
     cursor: pointer;
 }
 
-.ledgerBodyContent .table.ldgrInnerTbl {
+.ledger-body-content .table.ledger-inner-table {
     border-top: 0 !important;
 }
 
-.ldgrInnerTbl > tbody > tr > td {
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+.ledger-inner-table > tbody > tr > td {
+    border-right: 1px solid $gainsboro;
+    border-bottom: 1px solid $gainsboro;
     border-top: 0px;
 }
 
-.ldgrInnerTbl > tbody > tr > td:last-child {
+.ledger-inner-table > tbody > tr > td:last-child {
     border-right: 0;
 }
 
-.ledgerTable.table tfoot td {
-    border-bottom: 1px solid #ddd;
+.ledger-table.table tfoot td {
+    border-bottom: 1px solid $gainsboro;
 }
 
-.ldgTheadL span,
-.ldgTheadL .ledgerHead {
+.ledger-top-header-left span,
+.ledger-top-header-left .ledger-main-head {
     float: left;
     display: block;
 }
 
 .ldgTheadR span,
-.ldgTheadR .ledgerHead {
+.ldgTheadR .ledger-main-head {
     float: right;
     display: block;
 }
 
-.ledgerHead span {
+.ledger-main-head span {
     display: inline-block;
     line-height: 48px;
     font-size: 18px;
 }
 
-.ledgerHead .ellp {
+.ledger-main-head .text-ellipsis {
     text-transform: capitalize;
     max-width: 200px;
 }
 
-.popover.ledgerPopDiv {
+.popover.ledger-popover-div {
     z-index: 3 !important;
 }
 
-.popover.ledgerPopDiv > .arrow {
+.popover.ledger-popover-div > .arrow {
     border-width: 21px;
 }
 
-.popover.ledgerPopDiv.bottom > .arrow::after {
+.popover.ledger-popover-div.bottom > .arrow::after {
     margin-left: -20px;
     top: -19px;
 }
 
-.popover.ledgerPopDiv > .arrow::after {
+.popover.ledger-popover-div > .arrow::after {
     border-width: 20px;
 }
 
-.popover.ledgerPopDiv.bottom > .arrow {
+.popover.ledger-popover-div.bottom > .arrow {
     margin-left: -21px;
     top: -42px;
 }
@@ -1463,11 +1347,11 @@ li:last-child .angular-ui-tree-handle {
     display: inline-block;
 }
 
-.ledgerBodyContent .highlightRow input.nobdr {
+.ledger-body-content .highlightRow input.nobdr {
     background-color: #ffffcc;
 }
 
-.ledgerBodyContent .newMultiEntryRow input.nobdr {
+.ledger-body-content .newMultiEntryRow input.nobdr {
     background-color: #e3fadc;
 }
 
@@ -1488,7 +1372,7 @@ li:last-child .angular-ui-tree-handle {
 /*breadcrumb style*/
 
 .breadcrumb > .active > a {
-    color: #777;
+    color: $dark-gray;
 }
 
 /*helpers*/
@@ -1521,7 +1405,7 @@ li:last-child .angular-ui-tree-handle {
     max-width: 350px;
 }
 
-.max500 {
+.max-width-500 {
     max-width: 500px;
 }
 /* styles for trial-balance */
@@ -1570,29 +1454,29 @@ li:last-child .angular-ui-tree-handle {
 
 .tb-head th:nth-child(3) th {
     border: none;
-    border-top: 1px solid #3d3d3d;
+    border-top: 1px solid $night-rider;
 }
 
 .tb-head th:nth-child(3) th:first-child {
-    border-right: 1px solid #3d3d3d;
+    border-right: 1px solid $night-rider;
 }
 
 .fl-none {
     float: none;
 }
 
-.plBtTbl th {
-    color: #000;
+.pl-bs-tb th {
+    color: $black;
     font-size: 16px;
     font-weight: 400 !important;
 }
 
-.plBtTbl thead {
-    background: #e0e0e0;
+.pl-bs-tb thead {
+    background: $whisper-color;
 }
 
-.plBtTbl tfoot {
-    background: #f7f7f7;
+.pl-bs-tb tfoot {
+    background: $gray-95;
 }
 
 .circle {
@@ -1605,19 +1489,19 @@ li:last-child .angular-ui-tree-handle {
 }
 
 .circle.assets {
-    background: #ffd800;
+    background: $bus-yellow;
 }
 
 .circle.liabilities {
-    background: #587058;
+    background: $cactus;
 }
 
 .circle.income {
-    background: #6495ed;
+    background: $cornflower-blue-dark;
 }
 
 .circle.expenses {
-    background: #e86850;
+    background: $flamingo;
 }
 
 /* v-accordion custom styles */
@@ -1627,19 +1511,19 @@ li:last-child .angular-ui-tree-handle {
 }
 
 .vAccordion--default.root > v-pane.assets {
-    border-left-color: #ffd800;
+    border-left-color: $bus-yellow;
 }
 
 .vAccordion--default.root > v-pane.liabilities {
-    border-left-color: #587058;
+    border-left-color: $cactus;
 }
 
 .vAccordion--default.root > v-pane.income {
-    border-left-color: #6495ed;
+    border-left-color: $cornflower-blue-dark;
 }
 
 .vAccordion--default.root > v-pane.expenses {
-    border-left-color: #e86850;
+    border-left-color: $flamingo;
 }
 
 .vAccordion--default.root > v-pane > v-pane-content > div > v-accordion {
@@ -1685,19 +1569,19 @@ border-left:2px solid;;
 }
 
 .angular-ui-tree-node.assets {
-    border-left-color: #ffd800 !important;
+    border-left-color: $bus-yellow !important;
 }
 
 .angular-ui-tree-node.liabilities {
-    border-left-color: #587058 !important;
+    border-left-color: $cactus !important;
 }
 
 .angular-ui-tree-node.income {
-    border-left-color: #6495ed !important;
+    border-left-color: $cornflower-blue-dark !important;
 }
 
 .angular-ui-tree-node.expenses {
-    border-left-color: #e86850 !important;
+    border-left-color: $flamingo !important;
 }
 
 /*v-accordion*/
@@ -1768,7 +1652,7 @@ v-pane-content > div {
 }
 
 .vAccordion--default v-pane.is-expanded > v-pane-header {
-    border-bottom-color: #337ab7;
+    border-bottom-color: $curious-blue;
 }
 
 .vAccordion--default v-pane.is-expanded > v-pane-header::after {
@@ -1799,7 +1683,7 @@ v-pane-content > div {
 .vAccordion--default v-pane-header {
     padding: 10px 0 10px;
     margin-bottom: 0px;
-    border-bottom: 1px solid #d8d8d8;
+    border-bottom: 1px solid $gainsboro;
     -webkit-transition: color 0.25s, border-color 0.5s;
     transition: color 0.25s, border-color 0.5s;
 }
@@ -1809,7 +1693,7 @@ v-pane-header.noChild {
 }
 
 v-pane-header.show-pseudo {
-    border-bottom: 1px solid #d8d8d8 !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .vAccordion--default v-pane-header::after,
@@ -1863,7 +1747,7 @@ v-pane-header.show-pseudo {
     position: absolute;
     left: -165px;
     top: -35px;
-    background: #000;
+    background: $black;
     color: $white;
     border-radius: 5px;
     z-index: 9999;
@@ -1880,7 +1764,7 @@ v-pane-header.show-pseudo {
     left: inherit;
     right: -140px;
     top: -35px;
-    background: #000;
+    background: $black;
     color: $white;
     border-radius: 5px;
     z-index: 9999;
@@ -1900,7 +1784,7 @@ v-pane-header.show-pseudo {
     height: 0px;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
-    border-bottom: 10px solid black;
+    border-bottom: 10px solid $black;
     transform: rotate(-90deg);
 }
 
@@ -1912,7 +1796,7 @@ v-pane-header.show-pseudo {
     height: 0px;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
-    border-bottom: 10px solid black;
+    border-bottom: 10px solid $black;
     transform: rotate(90deg);
 }
 
@@ -1997,20 +1881,20 @@ v-pane-header.show-pseudo {
 
 .title-bar {
     height: 50px;
-    background: #f5f5f5;
-    border-bottom: 1px solid #e0e0e0;
+    background: $gray-95;
+    border-bottom: 1px solid $whisper-color;
     width: 100%;
     line-height: 50px;
     overflow: hidden;
 }
 
 .sub-title {
-    color: #929090;
+    color: $nobel;
 }
 
 .filter-bar {
     padding: 10px 10px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid $whisper-color;
     width: 100%;
 }
 
@@ -2065,8 +1949,8 @@ table.borderless th {
 .table-r tbody tr {
     height: 36px;
     line-height: 18px;
-    border-bottom: 1px solid #e1e1e1;
-    background: #f5f5f5;
+    border-bottom: 1px solid $whisper-color;
+    background: $gray-95;
 }
 
 .table-l tbody tr td,
@@ -2091,7 +1975,7 @@ table.borderless th {
 }
 
 .ui-match {
-    background: #ffd800;
+    background: $bus-yellow;
     padding: 0;
 }
 
@@ -2103,13 +1987,6 @@ table.borderless th {
     cursor: pointer;
 }
 
-/* .input-group .glyphicon.glyphicon-remove {
-position: absolute;
-right: 10px;
-top: 9px;
-z-index: 9;
-} */
-
 .table-container .row {
     margin: 0px;
     padding: 0;
@@ -2147,43 +2024,43 @@ z-index: 9;
 }
 
 .table-container div.row {
-    border-bottom: 1px solid #e0e0e0;
-    /* border-right: 1px solid #e0e0e0; */
+    border-bottom: 1px solid $whisper-color;
+    /* border-right: 1px solid $whisper-color; */
 }
 
 .table-container .isHidden {
     display: none;
 }
 
-.profitLoss.table-container > div > section {
-    border-left: 1px solid #e0e0e0;
+.profit-loss.table-container > div > section {
+    border-left: 1px solid $whisper-color;
 }
 
 .trial-balance.table-container > div > section {
-    border-left: 7px solid #e0e0e0;
+    border-left: 7px solid $whisper-color;
 }
 
 .table-container > div > section.assets {
-    border-left: 7px solid #ffd800;
+    border-left: 7px solid $bus-yellow;
 }
 
 .table-container > div > section.liabilities {
-    border-left: 7px solid #587058;
+    border-left: 7px solid $cactus;
 }
 
 .table-container > div > section.income {
-    border-left: 7px solid #6495ed;
+    border-left: 7px solid $cornflower-blue-dark;
 }
 
 .table-container > div > section.expenses {
-    border-left: 7px solid #e86850;
+    border-left: 7px solid $flamingo;
 }
 
 .no-data {
     text-align: center;
     margin-top: 150px;
     font-size: 36px;
-    color: #9e9a9a;
+    color: $nobel;
 }
 
 .no-data > img {
@@ -2192,7 +2069,7 @@ z-index: 9;
 
 .no-data p {
     font-size: 14px;
-    color: #444;
+    color: $davy-grey;
     margin-top: 20px;
 }
 
@@ -2247,7 +2124,7 @@ table:focus {
     max-width: 110px;
 }
 
-.mart100 {
+.mt-100 {
     margin-top: 100px;
 }
 
@@ -2266,11 +2143,11 @@ table:focus {
 
 /*tbpl list*/
 
-.tbplList .list-inline {
+.tbpl-list .list-inline {
     line-height: normal;
 }
 
-.tbplList .circle {
+.tbpl-list .circle {
     vertical-align: sub;
 }
 
@@ -2306,7 +2183,7 @@ i.cls-alert {
     font-size: 18px;
 }
 
-.width100 {
+.width-100 {
     width: 100%;
 }
 
@@ -2334,29 +2211,19 @@ i.cls-alert {
     min-width: 150px;
 }
 
-/*.graph-filters td > .btn, .graph-filters td {
-max-width: 30px;
-min-width: 30px;
-}
-*/
-
-/*.graph-filters td > .btn, .graph-filters td > .btn-sm {
-padding: 0;
-}*/
-
 .account-card {
     max-width: 300px;
     min-height: 240px;
     float: left;
     display: inline-block;
     position: relative;
-    background: #f4f5f8;
+    background: $solitude;
     border-radius: 2px;
     box-sizing: border-box;
     margin: 7px;
     transition: all 0.5s ease-in-out;
     padding: 10px;
-    border: 1px solid #ebedf1;
+    border: 1px solid $gainsboro;
     word-break: break-all;
 }
 .account-card:first-child {
@@ -2372,7 +2239,7 @@ padding: 0;
     padding-bottom: 5px;
     padding-right: 45px;
     margin-bottom: 5px;
-    border-bottom: 1px solid #337ab7;
+    border-bottom: 1px solid $primary;
     text-overflow: ellipsis;
     max-width: 325px;
     white-space: nowrap;
@@ -2381,11 +2248,11 @@ padding: 0;
 
 .account-card > .balances > span.title {
     display: block;
-    color: #333;
+    color: $night-rider;
 }
 
 .account-card > .balance {
-    color: #333;
+    color: $night-rider;
     font-size: 18px;
     padding-bottom: 10px;
     line-height: normal;
@@ -2426,19 +2293,19 @@ padding: 0;
 .linked-accounts {
     width: 100%;
     padding: 10px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid $whisper-color;
     margin-bottom: 20px;
-    background: #fffffe;
+    background: $white;
     position: relative;
     word-break: break-all;
 }
 
 .linked-accounts:nth-child(odd) {
-    background: #f5f5f5;
+    background: $gray-95;
 }
 
 .linked-accounts:nth-child(odd) > .title {
-    border-bottom: 2px solid #337ab7;
+    border-bottom: 2px solid $curious-blue;
 }
 
 .linked-accounts > .title {
@@ -2473,27 +2340,27 @@ padding: 0;
     overflow: hidden;
 }
 
-.pos-rel {
+.position-relative {
     position: relative !important;
 }
 
 .error-msg {
     font-size: 12px;
-    color: red;
+    color: $red;
     line-height: 18px;
 }
 
 .loading-bar {
     width: 100%;
     height: 20px;
-    border: 1px solid #2980b9;
+    border: 1px solid $curious-blue;
     border-radius: 3px;
     background-image: repeating-linear-gradient(
         -45deg,
-        #2980b9,
-        #2980b9 11px,
-        #eee 10px,
-        #eee 20px /* determines size */
+        $curious-blue,
+        $curious-blue 11px,
+        $whisper-light 10px,
+        $whisper-light 20px /* determines size */
     );
     background-size: 28px 28px;
     animation: move 0.5s linear infinite;
@@ -2512,7 +2379,7 @@ padding: 0;
     height: 42px;
     background: $white;
     line-height: 43px;
-    border-bottom: 1px solid #f5f5f5;
+    border-bottom: 1px solid $gray-95;
 }
 
 .add-manage-grouplist .group span {
@@ -2524,19 +2391,19 @@ padding: 0;
 }
 
 .add-manage-grouplist > section.liabilities {
-    border-left: 8px solid #587058;
+    border-left: 8px solid $cactus;
 }
 
 .add-manage-grouplist > section.assets {
-    border-left: 8px solid #ffd800;
+    border-left: 8px solid $bus-yellow;
 }
 
 .add-manage-grouplist > section.income {
-    border-left: 8px solid #6495ed;
+    border-left: 8px solid $cornflower-blue-dark;
 }
 
 .add-manage-grouplist > section.expenses {
-    border-left: 8px solid #e86850;
+    border-left: 8px solid $flamingo;
 }
 
 .add-manage-grouplist .isHidden {
@@ -2557,7 +2424,7 @@ background: #f9f9f9;
     position: relative;
     margin: 0 10px 15px 0;
     padding: 10px;
-    color: #444;
+    color: $davy-grey;
     background: $white;
     border-radius: 2px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@@ -2638,7 +2505,7 @@ background: #f9f9f9;
         float: none;
         width: auto;
         margin-top: 0;
-        background-color: #080808;
+        background-color: $black;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     }
 
@@ -2659,76 +2526,43 @@ background: #f9f9f9;
     }
 }
 
-/*search query*/
-
-/* #searchQueryForm span,
-#searchQueryForm label {
-    float: left;
-    display: inline-block;
-}
-
-#searchQueryForm label {
-    font-weight: normal;
-    line-height: 34px;
-    font-size: 16px;
-}
-
-#searchQueryForm .form-control {
-    padding-left: 0;
-    padding-right: 0;
-    background: transparent;
-    border: transparent;
-    box-shadow: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    text-indent: 0.01px;
-    text-overflow: '';
-} */
-
-/* #searchQueryForm span {
-    border-bottom: 2px dashed #ddd;
-    margin: 0 10px;
-} */
-
-/*div table*/
-
-.gTbl {
+.head-block {
     display: table;
     width: 100%;
 }
 
-.gTblRow {
+.head-block-row {
     display: table-row;
 }
 
-.gTblHead {
+.head-block-head {
     display: table-header-group;
-    background-color: #ddd;
+    background-color: $gainsboro-light;
 }
 
-.gTblCell,
-.gTblHead {
+.head-block-cell,
+.head-block-head {
     display: table-cell;
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
 }
 
-.gTblHead {
+.head-block-head {
     display: table-header-group;
-    background-color: #ddd;
+    background-color: $gainsboro-light;
 }
 
-.gTblFoot {
+.head-block-foot {
     display: table-footer-group;
-    background-color: #ddd;
+    background-color: $gainsboro-light;
 }
 
-.gTblBody {
+.head-block-body {
     display: table-row-group;
 }
 
-.gTbl .gTblRow:nth-of-type(odd) {
-    background-color: #f9f9f9;
+.head-block .head-block-row:nth-of-type(odd) {
+    background-color: $gray-95;
 }
 
 /* ng2 component styles */
@@ -2798,24 +2632,24 @@ input.isNotEditable:disabled {
     clear: both;
 }
 
-.taxTable {
+.tax-table {
     min-width: 860px;
 }
 
-.taxTable.table > tbody > tr > td,
-.taxTable.table > tbody > tr > th {
+.tax-table.table > tbody > tr > td,
+.tax-table.table > tbody > tr > th {
     vertical-align: middle;
 }
 
-.taxTable tbody tr td input.form-control {
+.tax-table tbody tr td input.form-control {
     border-radius: 0;
 }
 
-.taxTable tbody tr td select.form-control {
+.tax-table tbody tr td select.form-control {
     border-radius: 0;
 }
 
-.taxTable tbody tr td a {
+.tax-table tbody tr td a {
     display: block;
     overflow: hidden;
     margin: 5px;
@@ -2827,7 +2661,7 @@ table.nopad th {
 }
 
 table.nopad td .form-control,
-.taxTable.table .form-control {
+.tax-table.table .form-control {
     width: 100%;
 }
 
@@ -2851,7 +2685,7 @@ table td.nopad {
 
 .inner-table thead tr,
 .inner-table tbody tr {
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid $white-smoke;
     text-align: center;
 }
 
@@ -2861,7 +2695,7 @@ table td.nopad {
 
 .inner-table tbody td,
 .inner-table thead th {
-    border-right: 1px solid #f0f0f0;
+    border-right: 1px solid $white-smoke;
 }
 
 .inner-table tbody td:last-child,
@@ -2882,11 +2716,11 @@ table td.nopad {
     cursor: pointer;
 }
 
-.table-striped .selectedForInv {
+.table-striped .selected-for-inv {
     background-color: #cce7e7 !important;
 }
 
-.table-bordered > tbody > tr.selectedForInv > td {
+.table-bordered > tbody > tr.selected-for-inv > td {
     border-color: #b7cfcf;
 }
 
@@ -2936,22 +2770,22 @@ ul.pills {
 ul.pills li {
     line-height: 16px;
     font-size: 12px;
-    background: #444;
+    background: $davy-grey;
     border-radius: 5px;
     overflow: hidden;
     margin-right: 5px;
     padding: 5px 10px;
     cursor: pointer;
-    background-color: rgb(244, 245, 248);
-    color: #333;
+    background-color: $solitude;
+    color: $night-rider;
     display: inline-block;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
 }
 
 .load-more {
     margin-top: 10px;
     font-size: 12px;
-    color: #337ab7;
+    color: $primary;
 }
 
 .on-btn {
@@ -2959,7 +2793,7 @@ ul.pills li {
     width: 12px;
     margin: 4px 7px;
     border-radius: 50%;
-    background: green;
+    background: $green;
 }
 
 .borderless,
@@ -3110,20 +2944,20 @@ ul.pills li {
     padding-left: 20px !important;
 }
 
-.t-h-bg1 th {
-    background: #5c534d;
+.thead-background1 th {
+    background: $davy-grey;
     color: $white;
 }
 
-.t-h-bg2 th,
-.t-h-bg2 td {
-    background: #e6e6e6;
+.thead-background1 th,
+.thead-background1 td {
+    background: $whisper;
 }
 
-.t-h-bg3 th,
-.t-h-bg3 td {
-    background: #f5f5f5;
-    color: #333;
+.thead-background3 th,
+.thead-background3 td {
+    background: $gray-95;
+    color: $night-rider;
 }
 
 .ledger-table-body {
@@ -3154,24 +2988,12 @@ ul.pills li {
 }
 
 .ledger-container table tr.bg3 th {
-    background: #f5f5f5;
+    background: $gray-95;
     height: 32px;
     padding: 5px 10px;
-    color: #333;
+    color: $night-rider;
 }
 
-/*.ledger-container-w table tr.bg3 th {*/
-
-/*background: #f5f5f5;*/
-
-/*height: 32px;*/
-
-/*padding: 5px 10px;*/
-
-/*color: #333;*/
-
-/*}*/
-
 .bdr-w-t {
     border-top: 1px solid $white;
 }
@@ -3188,10 +3010,10 @@ ul.pills li {
     height: 32px;
 }
 
-.compoundEntry td,
-.compoundEntry td input,
-.compoundEntry td:hover,
-.compoundEntry td input:hover {
+.compound-entry td,
+.compound-entry td input,
+.compound-entry td:hover,
+.compound-entry td input:hover {
     background: transparent !important;
 }
 
@@ -3207,12 +3029,12 @@ ul.pills li {
 
 .add-entry-row .ledger-row td,
 .add-entry-row .ledger-row td input {
-    background: #5c534d;
+    background: $davy-grey;
     color: $white;
 }
 
 .ledger-panel {
-    background: #f4f5f8;
+    background: $solitude;
     border-radius: 2px;
     position: relative;
     padding: 6px 14px;
@@ -3371,7 +3193,7 @@ ul.pills li {
 
 .sub_nav_menu ul li:not(.divider):hover {
     /* background: rgba(63, 63, 63, .9); */
-    background: #2d9ee0;
+    background: $vivid-blue;
 }
 
 .sub_nav_menu li i.glyphicon-trash {
@@ -3431,7 +3253,7 @@ ul.pills li {
 }
 
 .edit-tax-section p {
-    color: #666666;
+    color: $dark-gray;
 }
 
 .download-invoice-ledger {
@@ -3460,10 +3282,10 @@ ul.pills li {
 }
 
 .add-entry-row {
-    border-top: 2px solid #5c534d;
+    border-top: 2px solid $davy-grey;
 }
 
-.pos-rel {
+.position-relative {
     position: relative;
 }
 
@@ -3479,7 +3301,7 @@ ul.pills li {
 .verified {
     right: 10px;
     top: 32px;
-    color: green;
+    color: $green;
 }
 
 .unverified {
@@ -3495,7 +3317,7 @@ ul.pills li {
     position: absolute;
     left: -95px;
     top: 0;
-    background: #000;
+    background: $black;
     color: $white;
     border-radius: 5px;
     z-index: 9999;
@@ -3512,7 +3334,7 @@ ul.pills li {
     left: inherit;
     right: -95px;
     top: -15px;
-    background: #000;
+    background: $black;
     color: $white;
     border-radius: 5px;
     z-index: 9999;
@@ -3532,7 +3354,7 @@ ul.pills li {
     height: 0px;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
-    border-bottom: 10px solid black;
+    border-bottom: 10px solid $black;
     transform: rotate(-90deg);
 }
 
@@ -3544,7 +3366,7 @@ ul.pills li {
     height: 0px;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
-    border-bottom: 10px solid black;
+    border-bottom: 10px solid $black;
     transform: rotate(90deg);
 }
 
@@ -3640,17 +3462,17 @@ ul.pills li {
 }
 
 .shadow {
-    box-shadow: black 0px 0px 14px -4px;
+    box-shadow: $black 0px 0px 14px -4px;
 }
 
 /*giddh loader*/
 
 .giddh-spinner {
     animation: rotate 1.5s infinite linear;
-    background: #221f1f none repeat scroll 0 0;
-    border: 7px solid #c63b13;
+    background: $nero none repeat scroll 0 0;
+    border: 7px solid $red;
     border-radius: 50%;
-    box-shadow: 0 -10px 0 14px #fff inset;
+    box-shadow: 0 -10px 0 14px $white inset;
     box-sizing: border-box;
     height: 60px;
     width: 60px;
@@ -3677,7 +3499,7 @@ ul.pills li {
 }
 
 .font-white {
-    color: white;
+    color: $white;
     padding: 10px;
 }
 
@@ -3751,7 +3573,7 @@ tr.db-bnk-account > td.reconnectDiv {
     z-index: 1000;
 }
 
-.dashboard-reconnectdiv {
+.dashboard-reconnect-block {
     background: rgba(255, 255, 255, 0.9);
     position: absolute;
     height: 100%;
@@ -3764,24 +3586,24 @@ tr.db-bnk-account > td.reconnectDiv {
 }
 
 .font-black {
-    color: #444;
+    color: $davy-grey;
     padding: 10px;
     padding-top: 40px;
 }
 
-.longcode-details {
+.long-code-details {
     margin-top: 10px;
 }
 
-.longcode-details figure {
+.long-code-details figure {
     margin-left: 8px;
 }
 
-.longcode-details figure ul {
+.long-code-details figure ul {
     padding: 0 20px;
 }
 
-.longcode-details figure h1 {
+.long-code-details figure h1 {
     font-size: 18px;
 }
 
@@ -3794,10 +3616,6 @@ tr.db-bnk-account > td.reconnectDiv {
     padding-right: 0;
 }
 
-.pdL-0 {
-    padding-left: 0;
-}
-
 .custom-tabset {
     padding: 0px 12px;
 }
@@ -3812,7 +3630,7 @@ tr.db-bnk-account > td.reconnectDiv {
 
 .custom-tabset ul li a {
     border: 0px !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
 .y-scroll {
@@ -3839,10 +3657,10 @@ tr.db-bnk-account > td.reconnectDiv {
 .flying-div {
     right: 0px;
     height: 100%;
-    background: white;
+    background: $white;
     width: 100%;
     float: right;
-    border-left: lightgrey 1px solid;
+    border-left: $light-gray 1px solid;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
@@ -3869,13 +3687,13 @@ tr.db-bnk-account > td.reconnectDiv {
 }
 
 .required {
-    color: red;
+    color: $red;
 }
 
 .invoice-widget {
     width: 400px;
     height: 400px;
-    border: 1px solid #e0e0e0;
+    border: 1px solid $whisper-color;
     margin: 0 5px;
     padding: 5px;
     position: relative;
@@ -3915,7 +3733,7 @@ tr.db-bnk-account > td.reconnectDiv {
 .gridster-item-heading {
     position: relative;
     min-height: 24px;
-    background-color: #ddd;
+    background-color: $gainsboro-light;
 }
 
 #remove-widget {
@@ -3934,7 +3752,7 @@ tr.db-bnk-account > td.reconnectDiv {
 }
 
 .invoice-wrapper-m {
-    background: #d9edf7;
+    background: $gainsboro;
     display: block;
     margin: 0 auto;
     margin-bottom: 0.5cm;
@@ -3955,7 +3773,7 @@ tr.db-bnk-account > td.reconnectDiv {
 .invoice-widget {
     height: 200px;
     width: 200px;
-    background: #fff !important;
+    background: $white !important;
     position: relative;
     padding: 5px;
 }
@@ -4049,7 +3867,7 @@ tr.db-bnk-account > td.reconnectDiv {
 /* add generic styling for the editor */
 
 .ta-root.focussed > .ta-scroll-window.form-control {
-    border-color: #66afe9;
+    border-color: $cornflower-blue-dark;
     outline: 0;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
         0 0 8px rgba(102, 175, 233, 0.6);
@@ -4094,7 +3912,7 @@ tr.db-bnk-account > td.reconnectDiv {
     position: absolute;
     bottom: 16px;
     right: 16px;
-    border: 1px solid black;
+    border: 1px solid $black;
     background-color: $white;
     padding: 0 4px;
     opacity: 0.7;
@@ -4106,7 +3924,7 @@ tr.db-bnk-account > td.reconnectDiv {
     right: 5px;
     left: 5px;
     top: 5px;
-    border: 1px solid black;
+    border: 1px solid $black;
     background-color: rgba(0, 0, 0, 0.2);
 }
 
@@ -4119,30 +3937,30 @@ tr.db-bnk-account > td.reconnectDiv {
 .ta-resizer-handle-overlay > .ta-resizer-handle-corner-tl {
     top: 0;
     left: 0;
-    border-left: 1px solid black;
-    border-top: 1px solid black;
+    border-left: 1px solid $black;
+    border-top: 1px solid $black;
 }
 
 .ta-resizer-handle-overlay > .ta-resizer-handle-corner-tr {
     top: 0;
     right: 0;
-    border-right: 1px solid black;
-    border-top: 1px solid black;
+    border-right: 1px solid $black;
+    border-top: 1px solid $black;
 }
 
 .ta-resizer-handle-overlay > .ta-resizer-handle-corner-bl {
     bottom: 0;
     left: 0;
-    border-left: 1px solid black;
-    border-bottom: 1px solid black;
+    border-left: 1px solid $black;
+    border-bottom: 1px solid $black;
 }
 
 .ta-resizer-handle-overlay > .ta-resizer-handle-corner-br {
     bottom: 0;
     right: 0;
-    border: 1px solid black;
+    border: 1px solid $black;
     cursor: se-resize;
-    background-color: white;
+    background-color: $white;
 }
 
 /* copy the popover code from bootstrap so this will work even without it */
@@ -4246,10 +4064,9 @@ border-bottom-color: $white;
 }
 
 .mce-panel {
-    border: 0 solid #cacaca;
     border: 0 solid rgba(0, 0, 0, 0.2) !important;
     height: 100%;
-    background-color: #f0f0f0;
+    background-color: $white-smoke;
     overflow-y: auto;
 }
 
@@ -4268,7 +4085,7 @@ display:none;
 
 .proforma-list > .filters {
     padding: 5px 0;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid $whisper-color;
     margin-bottom: 5px;
     position: relative;
 }
@@ -4350,7 +4167,7 @@ width:30px;
 }
 
 .invoice-wrapper-m.a4 .hasVar input.isEditable {
-    border: 1px solid #444;
+    border: 1px solid $davy-grey;
 }
 
 .proforma-particulars tr td {
@@ -4384,15 +4201,6 @@ width:30px;
     top: 8px;
 }
 
-/*table.table-bordered.head{
-margin-bottom:0;
-border-bottom:none;
-}
-
-table.table-bordered.head thead th{
-border-bottom:0;
-}*/
-
 table.proforma-particulars {
     margin-bottom: 0;
 }
@@ -4426,7 +4234,7 @@ left: 16px !important;
 }
 
 .steps-indicator li.current:last-child a:before {
-    background-color: #393;
+    background-color: $light-green;
 }
 
 /*** stock inventory**/
@@ -4434,7 +4242,7 @@ left: 16px !important;
 /*.stock-bar{
 padding:10px;
 margin:0;
-border-bottom: 1px solid #e0e0e0;
+border-bottom: 1px solid $whisper-color;
 }*/
 
 .stock-bar ul {
@@ -4472,8 +4280,8 @@ border-bottom: 1px solid #e0e0e0;
 .sidebar {
     width: 320px;
     height: 100%;
-    border-right: 1px solid #e0e0e0;
-    border-left: 1px solid #e0e0e0;
+    border-right: 1px solid $whisper-color;
+    border-left: 1px solid $whisper-color;
     padding: 10px;
 }
 
@@ -4483,23 +4291,23 @@ border-bottom: 1px solid #e0e0e0;
 
 .stock-grp-list > li > a {
     /* text-transform: uppercase; */
-    color: #616161;
+    color: $dark-gray;
 }
 
 .sub-grp > li > a {
     text-transform: uppercase;
-    color: #616161;
+    color: $dark-gray;
     font-weight: 400;
 }
 
 .stock-items > li > a {
     text-transform: capitalize;
-    color: #909090;
+    color: $nobel;
 }
 
 .stock-items > li > a:hover,
 .sub-grp > li > a:hover {
-    color: #616161;
+    color: $dark-gray;
 }
 
 .stock-grp.list {
@@ -4509,7 +4317,7 @@ border-bottom: 1px solid #e0e0e0;
 
 .stock-grp-list li > i {
     top: 3px;
-    color: #616161;
+    color: $dark-gray;
     float: right;
 }
 
@@ -4522,7 +4330,7 @@ border-bottom: 1px solid #e0e0e0;
 .stock-grp-list > li {
     /* padding: 7px 0; */
     padding: 6px 0 6px 15px;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid $whisper-color;
     /* background-color: rgb(220, 220, 220); */
 }
 
@@ -4555,7 +4363,7 @@ border-bottom: 1px solid #e0e0e0;
 
 .stock-twin-list ul li {
     padding: 5px;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid $whisper-color;
 }
 
 .stock-twin-list ul li:first-child {
@@ -4563,7 +4371,7 @@ border-bottom: 1px solid #e0e0e0;
 }
 
 .stock-twin-list ul li > a {
-    color: #444;
+    color: $davy-grey;
 }
 
 .uppercase {
@@ -4581,7 +4389,7 @@ border-bottom: 1px solid #e0e0e0;
 }
 
 .recurring-entry-grid .re-header {
-    background: #337ab7;
+    background: $primary;
     overflow: hidden;
 }
 
@@ -4594,7 +4402,7 @@ border-bottom: 1px solid #e0e0e0;
 .recurring-entry-grid .re-body .row {
     padding: 0;
     margin: 0;
-    border: 1px solid #e0e0e0;
+    border: 1px solid $whisper-color;
     border-top: none;
     max-height: 42px;
     transition: max-height 0.15s ease-out;
@@ -4647,7 +4455,7 @@ border-bottom: 1px solid #e0e0e0;
     padding: 10px;
     background: $white;
     overflow: hidden;
-    border-top: 1px solid #f5f5f5;
+    border-top: 1px solid $gray-95;
     position: relative;
 }
 
@@ -4657,16 +4465,16 @@ border-bottom: 1px solid #e0e0e0;
 }
 
 .recurring-entry-grid .re-body .row.animate input {
-    border: 1px solid #f0f0f0;
+    border: 1px solid $white-smoke;
 }
 
 .recurring-entry-grid .re-body .row.animate input:disabled {
-    background: #e0e0e0;
+    background: $whisper-color;
 }
 
 .recurring-entry-grid .filters {
     padding: 10px 0;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid $whisper-color;
 }
 
 .recurring-entry-grid .filters ul li input,
@@ -4688,7 +4496,7 @@ border-bottom: 1px solid #e0e0e0;
     font-size: 10px;
     right: calc(50% + 10px);
     top: 22px;
-    color: #9e9c9c;
+    color: $nobel;
 }
 
 .mtop-neg-54 {
@@ -4728,14 +4536,14 @@ border-bottom: 1px solid #e0e0e0;
     margin: 0;
     box-shadow: 0 3px 28px 0 rgba(0, 0, 0, 0.14);
     border-right: 1px solid $gainsboro;
-    background: #fdfdfd;
+    background: $white-smoke;
 }
 
 .tour-backdrop {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-.parent_body {
+.parent-body {
     padding-bottom: 52px;
     position: relative;
     overflow: hidden;
@@ -4743,13 +4551,13 @@ border-bottom: 1px solid #e0e0e0;
     width: 100%;
 }
 
-.parent_body tr {
+.parent-body tr {
     width: 100%;
     float: left;
     display: inline-table;
 }
 
-.pd2 {
+.pd-2 {
     padding: 20px;
 }
 
@@ -4854,7 +4662,7 @@ border-bottom: 1px solid #e0e0e0;
 }
 
 .modal-dialog.gray .modal-content {
-    background: #f4f5f8;
+    background: $solitude;
     border-radius: 0;
 }
 
@@ -4871,19 +4679,19 @@ border-bottom: 1px solid #e0e0e0;
 
 .modal-liquid.modal-dialog .modal-content .modal-header,
 .modal-liquid.modal-dialog .modal-content .modal-body {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 /*box styles  on settings integration page*/
 
 .box {
     padding: 15px;
-    background-color: white;
+    background-color: $white;
     /* margin: 20px 0; */
 }
 
 #setting-tab .nav > li > a {
-    color: #231f20;
+    color: $nero;
     border: 0;
 }
 
@@ -4895,7 +4703,7 @@ border-bottom: 1px solid #e0e0e0;
 .select2-parent .select2-container--default .select2-selection--single {
     border-radius: 0;
     background-color: $white;
-    border: 1px solid #cecece;
+    border: 1px solid $gainsboro;
 }
 
 .select2-parent .select2-container .select2-selection--single {
@@ -4907,7 +4715,7 @@ border-bottom: 1px solid #e0e0e0;
     .select2-selection--single
     .select2-selection__rendered {
     line-height: 32px;
-    color: #616161;
+    color: $dark-gray;
     font-size: 14px;
     padding-left: 0;
 }
@@ -4926,29 +4734,13 @@ border-bottom: 1px solid #e0e0e0;
     font-size: 14px;
 }
 
-/*.account-list-item {*/
-
-/*color:black;*/
-
-/*background-color: white;*/
-
-/*}*/
-
-/*.active, .active .account-list-item {*/
-
-/*color:white;*/
-
-/**/
-
-/*}*/
-
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:focus,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a > a,
 .dropdown-menu > .active > a > a:focus,
 .dropdown-menu > .active > a > a:hover {
-    color: white;
+    color: $white;
 }
 
 .dropdown-menu > li > a,
@@ -4957,8 +4749,8 @@ border-bottom: 1px solid #e0e0e0;
 .dropdown-menu > li > a > a,
 .dropdown-menu > li > a > a:focus,
 .dropdown-menu > li > a > a:hover {
-    color: black;
-    background-color: white;
+    color: $black;
+    background-color: $white;
 }
 
 #setting-tab .nav > li > a:focus,
@@ -4966,7 +4758,7 @@ border-bottom: 1px solid #e0e0e0;
     background: transparent;
 }
 .navbar-inverse .navbar-nav > .open > a {
-    background-color: #292929;
+    background-color: $nero;
     border-color: transparent;
 }
 
@@ -4983,17 +4775,17 @@ strong {
 }
 
 .hamburger-menu a:hover {
-    color: #fff !important;
+    color: $white !important;
 }
 
 .hamburger-menu.open a {
     background: transparent !important;
-    color: #fff !important;
+    color: $white !important;
 }
 
 .navbar-inverse .btn-link:focus,
 .navbar-inverse .btn-link:hover {
-    color: #333;
+    color: $night-rider;
 }
 
 b,
@@ -5007,7 +4799,7 @@ strong {
     .select2-selection--single
     .select2-selection__arrow
     b {
-    border-color: #4d4d4d transparent transparent transparent !important;
+    border-color: $matterhorn transparent transparent transparent !important;
     border-width: 6px 5px 0 5px;
     margin-left: -8px;
     margin-top: -3px;
@@ -5040,14 +4832,6 @@ bs-datepicker-container {
     z-index: 1;
 }
 
-.daterangepicker.dropdown-menu {
-    /* z-index: 1 !important; */
-}
-
-/* .daterangepicker.show-calendar {
-  min-width: 666px;
-} */
-
 .panel.sFthanks.fieldset {
     display: none;
 }
@@ -5058,8 +4842,8 @@ bs-datepicker-container {
 
 #sFSection-Jkvq .sFsubmit.btn-primary {
     font-size: 14px !important;
-    background: #28ab00 !important;
-    color: #fff !important;
+    background: $success-green !important;
+    color: $white !important;
 }
 
 /* added by sarfaraz */
@@ -5094,11 +4878,11 @@ bs-datepicker-container {
 }
 
 .modal-dialog.universal_modal .shortcuts {
-    background: #f9f9f9;
+    background: $alice-blue;
     border-top: none;
     margin: 0;
     padding: 12px 16px 12px 20px;
-    color: #717274;
+    color: $gray;
     font-size: 12px;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
@@ -5118,12 +4902,12 @@ perfect-scrollbar.ps-show-active
 
 .sub-menu-nav li > a {
     padding: 5px 12px;
-    color: #333333;
+    color: $night-rider;
     display: block;
 }
 
 .sub-menu-nav li > a:hover {
-    background: #2d9ee0;
+    background: $vivid-blue;
 }
 
 .no-dbl-click-select {
@@ -5137,11 +4921,11 @@ perfect-scrollbar.ps-show-active
     margin: 0 !important;
 }
 
-.customItem:hover , .discount-item:hover {
+.custom-item:hover , .discount-item:hover {
     background-color: $lavender !important;
-    color: #5b64c9 !important;
+    color: $chetwode-blue !important;
     &:hover {
-        .pull-left.ellp {
+        .pull-left.text-ellipsis {
             color: $chetwode-blue !important;
         }
     }
@@ -5149,7 +4933,7 @@ perfect-scrollbar.ps-show-active
 
 .or-line::before {
     content: " ";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $dim-gray;
     display: inline-block;
     width: 57px;
     margin-right: 13px;
@@ -5157,7 +4941,7 @@ perfect-scrollbar.ps-show-active
 
 .or-line::after {
     content: "";
-    border-bottom: 1px solid #a2a2a2;
+    border-bottom: 1px solid $dim-gray;
     display: inline-block;
     width: 57px;
     margin-left: 13px;
@@ -5166,7 +4950,7 @@ perfect-scrollbar.ps-show-active
 .or-line {
     display: flex;
     align-items: center;
-    color: #a2a2a2;
+    color: $dim-gray;
     margin-bottom: 10px;
 }
 
@@ -5177,7 +4961,7 @@ perfect-scrollbar.ps-show-active
 }
 
 .basic thead tr th {
-    background: #e5e5e5;
+    background: $whisper;
     color: $nero;
     border: 0;
     font-family: "" opensans-semibold "";
@@ -5185,7 +4969,7 @@ perfect-scrollbar.ps-show-active
 }
 
 .basic tbody tr:hover td {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 body.fixed {
@@ -5208,7 +4992,7 @@ form#groupDetailForm {
 #getGroupModal #middleBody {
     height: 100%;
 }
-#getGroupModal.getGroupModal #middleBody {
+#getGroupModal.get-group-modal #middleBody {
     height: auto;
 }
 .select2-ledger .menu .item {
@@ -5297,7 +5081,7 @@ form#groupDetailForm {
     bs-datepicker-container {
         overflow-y: auto;
         height: auto;
-        box-shadow: 0 0 10px 0 #aaa;
+        box-shadow: 0 0 10px 0 $wistful;
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
diff --git a/apps/web-giddh/src/assets/css/style-2.scss b/apps/web-giddh/src/assets/css/style-2.scss
index 59d9872f260..9164a3e728e 100644
--- a/apps/web-giddh/src/assets/css/style-2.scss
+++ b/apps/web-giddh/src/assets/css/style-2.scss
@@ -34,12 +34,12 @@ html, body{
 
 .basic > tbody > tr td:last-child,
 .basic > thead > tr th:last-child {
-    border-right: 1px solid #ddd !important;
+    border-right: 1px solid $gainsboro !important;
 }
 
 .basic > tbody > tr td:first-child,
 .basic > thead > tr th:first-child {
-    border-left: 1px solid #ddd !important;
+    border-left: 1px solid $gainsboro !important;
 }
 
 .basic > thead > tr > th {
@@ -160,6 +160,12 @@ html, body{
         padding: 5px 10px 5px 53% !important;
     }
 }
+.text-right{
+    text-align: right;
+}
+.table-cell{
+    display: table-cell;
+}
 body{
     font-family: "opensans-regular";
     font-display: block;
@@ -206,22 +212,6 @@ body{
     border: none !important;
 }
 
-.pt-0 {
-    padding-top: 0px !important;
-}
-
-.pb-0 {
-    padding-bottom: 0px !important;
-}
-
-.pr-0 {
-    padding-right: 0px !important;
-}
-
-.pl-0 {
-    padding-left: 0px !important;
-}
-
 .pd-1 {
     padding: 10px !important;
 }
@@ -238,130 +228,35 @@ body{
     padding: 40px !important;
 }
 
-.pt-1 {
-    padding-top: 10px !important;
-}
-
-.pb-1 {
-    padding-bottom: 10px !important;
-}
-
-.pr-1 {
-    padding-right: 10px !important;
-}
-
-.pl-1 {
-    padding-left: 10px !important;
-}
-
-.pt-2 {
-    padding-top: 20px !important;
-}
-
-.pb-2 {
-    padding-bottom: 20px !important;
-}
-
-.pr-2 {
-    padding-right: 20px !important;
-}
-
-.pl-2 {
-    padding-left: 20px !important;
-}
-
-.pt-3 {
-    padding-top: 30px !important;
-}
-
-.pb-3 {
-    padding-bottom: 30px !important;
-}
-
-.pr-3 {
-    padding-right: 30px !important;
-}
-
-.pl-3 {
-    padding-left: 30px !important;
-}
-
-.pt-4 {
-    padding-top: 40px !important;
-}
-
-.pb-4 {
-    padding-bottom: 40px !important;
-}
-
-.pr-4 {
-    padding-right: 40px !important;
-}
-
-.pl-4 {
-    padding-left: 40px !important;
-}
-
-.pt-5 {
-    padding-top: 50px !important;
-}
-
-.pb-5 {
-    padding-bottom: 50px !important;
-}
-
-.pr-5 {
-    padding-right: 50px !important;
-}
-
-.pl-5 {
-    padding-left: 50px !important;
-}
-
-.pr-15 {
+.pd-r15 {
     padding-right: 15px;
 }
 
-.pl-15 {
+.pd-l15 {
     padding-left: 15px;
 }
 
-.pt-15 {
+.pd-t15 {
     padding-top: 15px;
 }
-.pb-15{
+.pd-b15{
     padding-bottom: 15px;
 }
-.pl-05 {
-    padding-left: 5px;
-}
-
-.pt-05 {
-    padding-top: 5px;
-}
-
-.pr-05 {
-    padding-right: 5px;
-}
-
-.pb-05 {
-    padding-bottom: 5px;
-}
 
 .bt-1 {
-    border-top: 1px solid #ccc;
+    border-top: 1px solid $gainsboro;
 }
 
 .br-1 {
-    border-right: 1px solid #ccc;
+    border-right: 1px solid $gainsboro;
 }
 
 .bb-1 {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .bl-1 {
-    border-left: 1px solid #ccc;
+    border-left: 1px solid $gainsboro;
 }
 
 .border-none {
@@ -454,7 +349,7 @@ input {
     color: $white;
     font-weight: bold;
     box-sizing: border-box;
-    background: #f1f1f1;
+    background: $white-smoke;
 }
 
 .toggle-inner:before {
@@ -508,7 +403,7 @@ input {
 
 .cube1,
 .cube2 {
-    background-color: #1a237e;
+    background-color: $midnight-blue;
     width: 15px;
     height: 15px;
     position: absolute;
@@ -584,7 +479,7 @@ input {
     position: absolute;
     right: 7px;
     top: 16px;
-    border-top: 5px solid #999999;
+    border-top: 5px solid $nobel;
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     border-bottom: 5px solid transparent;
@@ -630,7 +525,7 @@ input {
     margin-right: 35px !important;
     margin-left: 0 !important;
     font-size: 14px;
-    color: #262626 !important;
+    color: $nero !important;
     border-width: 0px 0 4px 0 !important;
     height:41px;
 }
@@ -642,12 +537,12 @@ input {
 
 
 .invoice-control .nav-tabs > li.active > a {
-    border-bottom: 4px solid #01a9f4 !important;
+    border-bottom: 4px solid $deep-sky-blue !important;
     color: $nero !important;
 }
 
-.otherAccountEntry .header {
-    border: 1px solid #c40000 !important;
+.other-account-entry .header {
+    border: 1px solid $red !important;
     display: block;
     overflow: hidden;
 }
@@ -661,7 +556,7 @@ input {
 }
 
 .approve-modal .modal-top {
-    background: #f7f8fa;
+    background: $alice-blue-light;
     padding: 15px 15px 0;
 }
 
@@ -684,7 +579,7 @@ input {
     position: absolute;
     top: -22px;
     z-index: 99;
-    background: black;
+    background: $black;
     font-size: 12px;
     color: $white !important;
     padding: 2px 5px;
@@ -698,176 +593,27 @@ input {
     }
 }
 
-.mt-15 {
+.mr-t15 {
     margin-top: 15px;
 }
 
-.mb-15 {
+.mr-b15 {
     margin-bottom: 15px;
 }
 
-.ml-15 {
+.mr-l15 {
     margin-left: 15px;
 }
 
-.mr-15 {
+.mr-r15 {
     margin-right: 15px;
 }
 
-.mt-1 {
-    margin-top: 10px;
-}
-
-.mt-2 {
-    margin-top: 20px;
-}
-
-.mt-3 {
-    margin-top: 30px;
-}
-
-.mt-4 {
-    margin-top: 40px;
-}
-
-.mt-5 {
-    margin-top: 50px;
-}
-
-.mt-6 {
-    margin-top: 60px;
-}
-
-.mt-15 {
-    margin-top: 15px;
-}
-
-.mrB0 {
-    margin-bottom: 0;
-}
-
-.mb-1 {
-    margin-bottom: 10px !important;
-}
-
-.mb-2 {
-    margin-bottom: 20px;
-}
-
-.mb-3 {
-    margin-bottom: 30px;
-}
-
-.mb-4 {
-    margin-bottom: 40px;
-}
-
-.mb-5 {
-    margin-bottom: 50px;
-}
-
-.mb-15 {
-    margin-bottom: 15px;
-}
-
-.ml-15 {
-    margin-left: 15px;
-}
-
-.mr-15 {
-    margin-right: 15px;
-}
-
-.mt-15 {
-    margin-top: 15px;
-}
-
-.mr-1 {
-    margin-right: 10px;
-}
-
-.mr-2 {
-    margin-right: 20px;
-}
-
-.mr-3 {
-    margin-right: 30px;
-}
-
-.mr-4 {
-    margin-right: 40px;
-}
-
-.mr-5 {
-    margin-right: 50px;
-}
-
-.ml-0 {
-    margin-left: 0px;
-}
-
-.mr-0 {
-    margin-right: 0 !important;
-}
-
-.mt-0 {
-    margin-top: 0px;
-}
-
-.mb-0 {
-    margin-bottom: 0px;
-}
-
-.ml-1 {
-    margin-left: 10px;
-}
-
-.ml-2 {
-    margin-left: 20px;
-}
-
-.ml-3 {
-    margin-left: 30px;
-}
-
-.ml-4 {
-    margin-left: 40px;
-}
-
-.ml-5 {
-    margin-left: 50px;
-}
-
-.ml-05 {
-    margin-left: 5px;
-}
-
-.mr-05 {
-    margin-right: 5px;
-}
-
-.mt-05 {
-    margin-top: 5px;
-}
-
-.mb-05 {
-    margin-bottom: 5px;
-}
-
-.mt-27 {
-    margin-top: 27px;
-}
-
-.hover-orange:hover {
-    color: #bdc3ff !important;
-    /* font-family: ''opensans-semibold''; */
-}
-
 .company-list button.btn-link {
     font-size: 13px;
     color: $chetwode-blue !important;
     display: block;
-    padding: 7px 10px;
+    padding: 7px 10px !important;
     display: block;
     width: 100%;
     text-align: left;
@@ -927,7 +673,7 @@ ul.sub-list {
     border-radius: 0px;
     border: 0px;
     font-size: 14px;
-    color: #333333;
+    color: $night-rider;
     border-left: 1px solid  $gainsboro !important;
     cursor: pointer;
     display: flex;
@@ -952,7 +698,6 @@ ul.sub-list {
     display: block !important;
     width: 100%;
 }
-
 /* file upload css start */
 
 .input-upload .input-group-btn {
@@ -977,12 +722,12 @@ ul.sub-list {
 
 /* file upload css end */
 
-.tab-integraton .nav-tabs {
+.tab-integration .nav-tabs {
     padding: 40px;
     border-bottom: 0px;
 }
 
-.tab-integraton .nav-tabs > li > a {
+.tab-integration .nav-tabs > li > a {
     width: 120px;
     height: 120px !important;
     background: $white;
@@ -994,34 +739,34 @@ ul.sub-list {
     font-size: 18px;
     border: 1px solid rgba(26, 35, 126, 0.4) !important;
 }
-.tab-integraton .nav-tabs > li > a:hover{
+.tab-integration .nav-tabs > li > a:hover{
     border: 1px solid rgba(26, 35, 126, 0.4) !important;
 }
-.tab-integraton .nav-tabs > li.active a {
+.tab-integration .nav-tabs > li.active a {
     background: $white !important;
-    box-shadow: 0 6px 7px #cacaca;
+    box-shadow: 0 6px 7px $very-light-gray;
     border: 1px solid $midnight-express !important;
-    color: #333333 !important;
+    color: $night-rider !important;
     border-radius: 3px;
     /* display: block; */
 }
 
-.tab-integraton .nav-tabs > li.active a span {
+.tab-integration .nav-tabs > li.active a span {
     opacity: 1;
 }
 
-.tab-integraton .nav-tabs > li > a > span {
+.tab-integration .nav-tabs > li > a > span {
     font-size: 30px;
     color: $midnight-express;
     opacity: 0.4;
     margin-bottom: 6px;
 }
 
-.tab-integraton .nav-tabs > li {
+.tab-integration .nav-tabs > li {
     margin-right: 25px;
 }
 
-.customer-footer-box .numbertotal {
+.customer-footer-box .number-total {
     font-size: 26px;
     color: $chetwode-blue;
 }
@@ -1043,7 +788,7 @@ ul.sub-list {
 
 .customer-right table tr td {
     padding: 15px;
-    color: #707070;
+    color: $gray;
 }
 
 .customer-right table tr td h3 {
@@ -1063,7 +808,7 @@ ul.sub-list {
     background: none;
     border: 0;
     font-size: 14px;
-    color: #333 !important;
+    color: $night-rider !important;
     position: relative;
     padding-bottom: 7px;
     padding-left: 0;
@@ -1094,9 +839,9 @@ ul.sub-list {
 }
 
 .custom-tabs .nav.nav-tabs {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid $whisper-light;
     padding:10px 0px 0 43px !important;
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     z-index: 9;
     position: relative;
 }
@@ -1117,7 +862,7 @@ ul.sub-list {
 .btn-light-gray {
     background: $lavender;
     border-color: $lavender;
-    color: #1a237e;
+    color: $midnight-blue;
 }
 
 .btn-light-gray:hover {
@@ -1143,7 +888,7 @@ ul.sub-list {
 }
 
 .sorting-box a {
-    color: #a9a9a9;
+    color: $dim-gray;
     display: block;
     line-height: 0;
 }
@@ -1155,7 +900,7 @@ ul.sub-list {
 
 .aging-table-top td {
     border: 0px solid !important;
-    background: #f7f8fa !important;
+    background: $alice-blue-light !important;
 }
 
 .aging-table-top .top-aging-table-top {
@@ -1164,7 +909,7 @@ ul.sub-list {
 
 .aging-table-top .top-aging-table-top strong,
 .aging-table-top .top-aging-table-top span .date-range-picker {
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .aging-table-top .top-aging-table-top span .date-range-picker {
@@ -1198,7 +943,7 @@ ul.sub-list {
     position: absolute;
     left: 0;
     right: 0;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     padding: 20px;
     box-shadow: 0 0 19px rgba(0, 0, 0, 0.2);
     top: 75px;
@@ -1230,10 +975,10 @@ ul.sub-list {
 .top-aging-table-box input {
     width: 30px !important;
     height: 26px;
-    border: 1px solid #c6c6c6;
+    border: 1px solid $gainsboro;
     padding: 5px;
     text-align: center;
-    color: #707070;
+    color: $gray;
     /* font-size: 14px; */
 }
 
@@ -1251,7 +996,7 @@ ul.sub-list {
 }
 
 .basic > thead > tr > th .fa-sort {
-    color: #a9a9a9;
+    color: $dim-gray;
     float: right;
     margin-top: 5px;
 }
@@ -1318,31 +1063,31 @@ ul.sub-list {
     color: $nobel;
 }
 
-.Advance-Search .input-group-addon {
+.advance-search .input-group-addon {
     border: 1px solid $gainsboro;
     background: none;
     border-left: 0 !important;
 }
 
-.Advance-Search .input-group .form-control {
+.advance-search .input-group .form-control {
     border-right: 0px;
 }
 
-.Advance-Search p small {
-    color: #bdbaba;
+.advance-search p small {
+    color: $silver;
 }
 
-.Advance-Search p {
+.advance-search p {
     line-height: 15px;
 }
 
-.Advance-Search .scrollable-content .item > a {
+.advance-search .scrollable-content .item > a {
     border-bottom: 0px solid !important;
     padding: 5px 10px !important;
     display: block;
 }
 
-.Advance-Search .scrollable-content .item {
+.advance-search .scrollable-content .item {
     height: auto !important;
 }
 
@@ -1362,7 +1107,7 @@ ul.sub-list {
     width: 0;
     height: 0;
     border: 5px solid transparent;
-    border-top-color: #acacac;
+    border-top-color: $gainsboro;
 }
 
 .select-style select {
@@ -1372,7 +1117,7 @@ ul.sub-list {
     -moz-appearance: none;
     appearance: none;
     padding: 7px 22px 7px 7px;
-    border: 1px solid #d6d6d6;
+    border: 1px solid $gainsboro;
     /* height: 32px; */
     border-radius: 2px;
     background: $white;
@@ -1389,10 +1134,6 @@ ul.sub-list {
     height:100% !important;
 }
 
-.width-100 {
-    width: 100% !important;
-}
-
 .width-150 {
     width: 150px;
 }
@@ -1407,30 +1148,17 @@ ul.sub-list {
     background: $deep-sky-blue-hover;
 }
 
-/* .Advance-Search .header:after {
-    content: '';
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    top: 14px;
-    right: 10px;
-    border-top: 7px solid #464646;
-    border-bottom: 9px solid transparent;
-    border-right: 6px solid transparent;
-    border-left: 6px solid transparent;
-  } */
-
 .choose-size label {
     font-weight: bold;
     display: inline-block;
-    border: 1px solid #b2b2b2;
+    border: 1px solid $silver;
     border-radius: 50%;
     width: 30px !important;
     text-align: center;
     height: 30px !important;
     line-height: 30px !important;
     margin-right: 5px;
-    color: #b2b2b2;
+    color: $silver;
 }
 
 .choose-size input:checked + label {
@@ -1465,12 +1193,12 @@ ul.sub-list {
     white-space: nowrap;
 }
 
-.text-orange {
-    color: #5b64c9;
+.text-purple {
+    color: $chetwode-blue;
 }
 
 .text-light {
-    color: #999 !important;
+    color: $nobel !important;
 }
 
 .list-middle li {
@@ -1493,7 +1221,7 @@ modal-container.modal {
         .modal-content {
             height: 100%;
             overflow: scroll;
-            background-color: #f7f8fa;
+            background-color: $alice-blue-light;
         }
     }
 }
@@ -1525,7 +1253,7 @@ modal-container.modal {
 
 .sales-invoice-modal .ps__rail-y {
     opacity: 1;
-    background: #ededed !important;
+    background: $whisper-light !important;
     padding: 10px;
 }
 
@@ -1533,7 +1261,7 @@ modal-container.modal {
     font-family: "opensans-regular" !important;
     /* background: red; */
     font-family: cursive;
-    border-right: 1px solid #c6c6c6;
+    border-right: 1px solid $gainsboro;
 }
 
 .modal-455 {
@@ -1596,7 +1324,7 @@ modal-container.modal {
         }
     }
 }
-.paymentMode sh-select {
+.payment-mode sh-select {
     float: right;
     width: 129px;
     margin-left: 20px;
@@ -1616,11 +1344,11 @@ modal-container.modal {
 }
 
 .table-no-border tr th {
-    color: #9b9b9b;
+    color: $nobel;
 }
 
 .price-input {
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     font-size: 14px;
     background: $white;
     padding: 1px 2px;
@@ -1632,8 +1360,8 @@ modal-container.modal {
 .input-search .input-group-addon {
     background: $white;
     border-right: 0px;
-    border-color: #c6c6c6;
-    color: #a9a9a9;
+    border-color: $gainsboro;
+    color: $dim-gray;
     font-size: 12px;
     padding-top: 10px;
     padding-right: 0px;
@@ -1649,11 +1377,11 @@ modal-container.modal {
 
 .btn-filter {
     background: $white;
-    border: 1px solid #cbcbcb;
+    border: 1px solid $gainsboro;
     font-size: 16px;
     padding: 4px 8px;
     line-height: initial !important;
-    color: #989898;
+    color: $nobel;
     border-radius: 2px;
 }
 
@@ -1670,15 +1398,15 @@ modal-container.modal {
 }
 
 .dot-warning {
-    background: #fed46a;
+    background: $grandis;
 }
 
 .dot-primary {
-    background: #4693f1;
+    background: $cornflower-blue;
 }
 
 .dot-success {
-    background: #2daa4a;
+    background: $success-green;
 }
 
 .pt-85 {
@@ -1893,18 +1621,18 @@ input:-moz-placeholder {
 }
 
 .sidebar {
-    background: #e7e7e6;
+    background: $whisper;
 }
 
-.acntAccordion a {
-    color: #616161;
+.account-accordion a {
+    color: $dark-gray;
 }
 
-.acntAccordion .title {
+.account-accordion .title {
     background-image: none;
 }
 
-.acntAccordion .title a {
+.account-accordion .title a {
     font-size: 14px;
 }
 
@@ -1913,14 +1641,14 @@ input:-moz-placeholder {
 }
 
 .company-name ul li > span {
-    color: #333 !important;
+    color: $night-rider !important;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     font-size: 14px;
 }
 
-.company-name .company-text .c-name {
+.company-name .company-text .company-name {
     font-size: 16px;
     text-transform: capitalize;
     display: inline-flex;
@@ -1942,12 +1670,12 @@ input:-moz-placeholder {
     font-size: 12px;
 }
 
-.acntAccordion .title.active {
+.account-accordion .title.active {
     background-image: none;
 }
 
 header .navbar {
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     border-bottom: 1px solid $gainsboro;
     padding: 3px 0;
 }
@@ -1956,9 +1684,9 @@ header .navbar {
     font-size: 14px;
 } */
 
-.t-h-bg1 th {
+.thead-background1 th {
     background: $white;
-    color: #4d4d4d;
+    color: $matterhorn;
     padding: 11px !important;
     font-weight: 400;
 }
@@ -1968,11 +1696,11 @@ header .navbar {
     text-transform: capitalize;
 }
 
-.icomoon_ico {
-    color: #424242;
+.icomoon-ico {
+    color: $matterhorn;
 }
 
-.icomoon_ico:hover {
+.icomoon-ico:hover {
     color: #ff782d;
 }
 
@@ -1983,7 +1711,7 @@ header .navbar {
 .export-ledger-options.left > .arrow,
 .export-ledger-options > .arrow {
     top: 0;
-    border-bottom-color: #d4d3d3;
+    border-bottom-color: $gainsboro;
 }
 
 .export-ledger-options > .arrow,
@@ -2007,25 +1735,19 @@ header .navbar {
     list-style: none;
     position: relative;
     float: left;
-    background: #000;
+    background: $black;
 }
 
 .export-ledger-options > ul > li {
     width: 100%;
-    border-bottom: 1px solid #d4d3d3;
-    color: #616161;
+    border-bottom: 1px solid $gainsboro;
+    color: $dark-gray;
 }
 
 .ledg-head {
     width: 100%;
 }
 
-/* .ledg-head input[type=search] {
-    min-width: 220px;
-} */
-
-/*btn*/
-
 .btn-pink {
     background: $deep-sky-blue;
     border: 1px solid $deep-sky-blue;
@@ -2122,9 +1844,9 @@ fieldset[disabled] .btn-primary:hover {
 }
 
 #actionPane .btn-default {
-    background: #e6e6e6;
-    color: #333;
-    border-color: #e6e6e6;
+    background: $whisper;
+    color: $night-rider;
+    border-color: $whisper;
 }
 
 /*btn end*/
@@ -2136,15 +1858,15 @@ fieldset[disabled] .btn-primary:hover {
 
 .ledger-header thead th {
     background: $white;
-    border-right: 1px solid #c4c6c7;
+    border-right: 1px solid $gainsboro;
 }
 
-.t-h-bg2 th {
+.thead-background1 th {
     padding: 7px !important;
 }
 
-.compoundEntry td,
-.compoundEntry td .form-control {
+.compound-entry td,
+.compound-entry td .form-control {
     /* background: $white0bc !important; */
     border: 0;
 }
@@ -2154,30 +1876,10 @@ fieldset[disabled] .btn-primary:hover {
 }
 
 .ledger-container table tr.bg3 th {
-    border: 1px solid #c4c6c7;
+    border: 1px solid $gainsboro;
     border-left: 0;
 }
 
-.highlight_info {
-    color: #ff782d;
-    /* 95756E*/
-}
-
-.midlight_info {
-    color: #95756e;
-}
-
-/* .ledger-panel .form-control {
-    border: 1px solid #949494;
-    cursor: text;
-} */
-
-/*.ledger-panel .btn {
-  background: #eee;
-  border: 1px solid #949494;
-  .ledger-panel .btn:hover,
-}*/
-
 .tax-list {
     padding: 10px 0;
 }
@@ -2192,7 +1894,7 @@ fieldset[disabled] .btn-primary:hover {
     background: transparent;
     color: $white;
     padding: 7px 35px 7px 10px !important;
-    border: 1px solid #5f6e7e;
+    border: 1px solid $gainsboro;
 }
 
 #accountSearch:focus {
@@ -2205,7 +1907,7 @@ fieldset[disabled] .btn-primary:hover {
 }
 
 .ledger_search .input-group-addon {
-    background: #333;
+    background: $night-rider;
     color: $white;
     border: 0;
     border-top: 0;
@@ -2216,16 +1918,16 @@ fieldset[disabled] .btn-primary:hover {
     transform: translateY(-50%);
 }
 
-.acntAccordion .accBox {
+.account-accordion .accBox {
     background: none;
 }
 
-.acntAccordion .title,
-.acntAccordion .title.active {
+.account-accordion .title,
+.account-accordion .title.active {
     position: relative;
 }
 
-.acntAccordion .mainLiAclist .title:before {
+.account-accordion .main-account-list .title:before {
     font-family: "icomoon" !important;
     content: "\f2333";
     position: absolute;
@@ -2253,16 +1955,16 @@ fieldset[disabled] .btn-primary:hover {
 .load-more {
     padding: 8px 10px;
     display: block;
-    background: #f5f5f5;
+    background: $gray-95;
     margin: 20px 0px;
 }
 
-#cmpWrp i {
-    color: #525252;
+#company-wrap i {
+    color: $davy-grey;
 }
 
 #ledger {
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .export-ledger-options .dropdown_theme {
@@ -2271,8 +1973,8 @@ fieldset[disabled] .btn-primary:hover {
 
 .dropdown_theme {
     box-shadow: 0 3px 28px 0 rgba(0, 0, 0, 0.14);
-    color: #616161;
-    border: 1px solid #d4d3d3;
+    color: $dark-gray;
+    border: 1px solid $gainsboro;
 }
 
 .export-ledger-options .list-unstyled {
@@ -2302,7 +2004,7 @@ fieldset[disabled] .btn-primary:hover {
     font-size: 12px;
     height: 33px;
     border: 0px;
-    color: #333333;
+    color: $night-rider;
     padding: 3px !important;
     text-align: center;
 }
@@ -2317,7 +2019,7 @@ fieldset[disabled] .btn-primary:hover {
 }
 
 .btn-gray {
-    background: #666666;
+    background: $dark-gray;
     color: $white;
     /* font-size: 10px;
     padding: 7px 10px; */
@@ -2336,7 +2038,7 @@ fieldset[disabled] .btn-primary:hover {
 }
 
 .childTab > .nav.nav-tabs {
-    background: #f5f5f5;
+    background: $gray-95;
     text-align: center;
     width: 100%;
     padding: 0;
@@ -2360,7 +2062,7 @@ fieldset[disabled] .btn-primary:hover {
     line-height: inherit;
     border: 0;
     padding: 13px 18px;
-    color: #616161;
+    color: $dark-gray;
     background: none;
     border: 1px solid transparent;
 }
@@ -2373,40 +2075,6 @@ fieldset[disabled] .btn-primary:hover {
     background: none;
 }
 
-/*.childTab >.nav.nav-tabs {
-    text-align: center;
-    width: 100%;
-    padding: 7px 0 0 42px;
-    margin: 0;
-    text-align: center;
-    display: inline-block;
-    float: left;
-}
-.childTab >.nav-tabs li {
-    display: inline-block;
-    text-align: center;
-}
-.childTab >.nav-tabs>li>a {
-    margin-right: 0;
-    transition: none;
-    float: none !important;
-    display: inline-block;
-    line-height: inherit;
-    border: 0;
-    padding: 13px 18px;
-    color: #616161;
-    background: none;
-    border: 1px solid transparent;
-}
-
-.childTab .nav-tabs>li.active>a, .childTab .nav-tabs>li.active>a:focus, .childTab .nav-tabs>li.active>a:hover {
-    padding: 13px 18px;
-    background: white;
-
-    border: 1px solid #ddd;
-    border-bottom-color: transparent;
-}*/
-
 .childTab .tab-content {
     float: left;
     width: 100%;
@@ -2420,10 +2088,10 @@ fieldset[disabled] .btn-primary:hover {
     border-radius: 3px;
     outline: 0;
     box-shadow: none;
-    border: 1px solid #ca541e;
+    border: 1px solid $red;
 }
 
-#cmpWrp {
+#company-wrap {
     cursor: pointer;
     position: relative;
     padding-right: 25px;
@@ -2433,12 +2101,6 @@ fieldset[disabled] .btn-primary:hover {
     color: $white;
 }
 
-/* #cmpWrp .company-name {
-    margin: 5px 0 5px 0px;
-    font-size: 9px;
-    padding-right: 5px;
-} */
-
 #companyList {
     background: $white;
     padding-bottom: 0;
@@ -2453,7 +2115,7 @@ fieldset[disabled] .btn-primary:hover {
     color: var(--dark-blue01) !important;
 }
 
-.selected-company a.ellp {
+.selected-company a.text-ellipsis {
     color: $chetwode-blue;
 }
 
@@ -2494,7 +2156,7 @@ p.table-email {
 }
 
 .professional-name {
-    color: #333333;
+    color: $night-rider;
 }
 
 .top-five-cr-dr-table .basic > tbody > tr td:last-child,
@@ -2560,7 +2222,7 @@ input[type="checkbox"]:after {
     position: absolute;
     top: 0;
     left: 0;
-    border: 1px solid #cccccc;
+    border: 1px solid $gainsboro;
     width: 18px;
     height: 18px;
     background: $white;
@@ -2579,7 +2241,7 @@ input[type="checkbox"]:checked:after {
     margin-bottom: 5px;
 }
 
-.noBrdRdsModal .modal-header > .close {
+.border-radius-0 .modal-header > .close {
     top: 0px;
 }
 
@@ -2596,7 +2258,7 @@ input[type="checkbox"]:checked:after {
     -moz-osx-font-smoothing: grayscale;
 }
 
-.pos-rel label {
+.position-relative label {
     font-weight: 400;
 }
 
@@ -2604,20 +2266,24 @@ input[type="checkbox"]:checked:after {
     line-height: 33px;
 }
 
+.lh-0{
+    line-height:0 !important;
+}
+
 .btn-success-outline {
-    border: 1px solid #0cb1af;
-    color: #0cb1af;
+    border: 1px solid $light-sea-green;
+    color: $light-sea-green;
 }
 
 .btn-success-outline:hover {
     color: $white;
-    background: #0cb1af;
+    background: $light-sea-green;
 }
 
 .btn-success {
-    background: #0cb1af;
+    background: $light-sea-green;
     color: $white;
-    border: 1px solid #0cb1af;
+    border: 1px solid $light-sea-green;
 }
 
 .btn-success:hover,
@@ -2627,17 +2293,17 @@ input[type="checkbox"]:checked:after {
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle{
-    background: #087e7d;
+    background: $teal;
     color: $white;
-    border: 1px solid #087e7d;
+    border: 1px solid $teal;
     box-shadow: none;
 }
 
 .btn-success:disabled,
 .btn-success:disabled:hover {
     color: rgba(255, 255, 255, 0.51);
-    border: 1px solid #81d4d4;
-    background: #81d4d4;
+    border: 1px solid $success-green-disable;
+    background: $success-green-disable;
 }
 .btn-warning{
     color: $white !important;
@@ -2651,18 +2317,18 @@ input[type="checkbox"]:checked:after {
 }
 
 .btn-danger {
-    background: #e4e4e4;
-    color: #e51f0c;
-    border-color: #e4e4e4;
+    background: $whisper;
+    color: $red;
+    border-color: $whisper;
 }
 
 .btn-danger:hover,
 .btn-danger:active,
 .btn-danger:focus,
 .btn-danger:active:focus {
-    background: #d3d3d3;
-    color: #e51f0c;
-    border-color: #d3d3d3;
+    background: $gainsboro-light;
+    color: $red;
+    border-color: $gainsboro;
     outline: none;
     box-shadow: none;
 }
@@ -2672,34 +2338,34 @@ input[type="checkbox"]:checked:after {
 .btn-danger:active:focus,
 .btn-danger:active:hover,
 .btn-danger:focus {
-    background: #e4e4e4;
-    color: #e51f0c;
-    border-color: #e4e4e4;
+    background: $whisper;
+    color: $red;
+    border-color: $whisper;
     opacity: 0.5;
 }
 
 .btn-cancel {
-    background: #e4e4e4;
-    color: #666666;
-    border-color: #e4e4e4;
+    background: $whisper;
+    color: $dark-gray;
+    border-color: $whisper;
 }
 
 .btn-cancel:hover,
 .btn-cancel:active,
 .btn-cancel:focus,
 .btn-cancel:active:focus {
-    background: #d3d3d3;
-    color: #666;
-    border-color: #d3d3d3;
+    background: $pink-swan;
+    color: $dark-gray;
+    border-color: $pink-swan;
     outline: none;
     box-shadow: none;
 }
 
 .btn-cancel:disabled,
 .btn-cancel:disabled:hover {
-    background: #e4e4e4;
-    color: #666;
-    border-color: #e4e4e4;
+    background: $whisper;
+    color: $dark-gray;
+    border-color: $whisper;
     opacity: 0.5;
 }
 
@@ -2725,7 +2391,7 @@ input[type="checkbox"]:checked:after {
     overflow: hidden;
     padding: 0;
     background: $white;
-    border-color: #fbc2a8 !important;
+    border-color: $skin-tone !important;
 }
 
 .thumbnail:hover {
@@ -2735,7 +2401,7 @@ input[type="checkbox"]:checked:after {
 
 .thumbnail .caption {
     padding: 20px 7px;
-    color: #333;
+    color: $night-rider;
     overflow: hidden;
     text-align: center;
 }
@@ -2754,11 +2420,11 @@ input[type="checkbox"]:checked:after {
     border: 0;
     border-radius: 48px;
     top: 0;
-    background: #f0f0f0;
+    background: $white-smoke;
 }
 
 .switch.checked {
-    background: #48d076;
+    background: $success-green;
     border: 0;
 }
 
@@ -2863,14 +2529,6 @@ input[type="checkbox"]:checked:after {
     padding-bottom: 10px;
 }
 
-.pdB0 {
-    padding-bottom: 0;
-}
-
-.pdT0 {
-    padding-top: 0 !important;
-}
-
 .templateInfo {
     position: relative;
     width: 100%;
@@ -2893,7 +2551,7 @@ input[type="checkbox"]:checked:after {
     cursor: pointer;
 }
 
-.pt-05 {
+.pd-t05 {
     padding-top: 5px;
 }
 
@@ -2921,6 +2579,10 @@ input[type="checkbox"]:checked:after {
     font-size: 16px !important;
 }
 
+.font-18 {
+    font-size: 18px;
+}
+
 .font-20 {
     font-size: 20px;
 }
@@ -2947,11 +2609,11 @@ input[type="checkbox"]:checked:after {
 }
 
 .text-green {
-    color: #33bb0c;
+    color: $success-green;
 }
 
 .text-light {
-    color: #cccccc;
+    color: $very-light-gray;
 }
 
 .text-light-2 {
@@ -2971,8 +2633,8 @@ input[type="checkbox"]:checked:after {
     background: $whisper-color;
     padding: 11px 20px;
     font-size: 14px;
-    font-family: "" opensans-semibold "";
-    border: 1px solid #ddd;
+    font-family: 'opensans-semibold';
+    border: 1px solid $gainsboro;
 }
 
 .inner-box2 {
@@ -2995,17 +2657,17 @@ input[type="checkbox"]:checked:after {
 
 .campanien-list ul > li > a {
     display: block;
-    color: #231f20;
+    color: $nero;
     padding: 10px 20px;
 }
 
 .campanien-list ul > li > a:hover {
     color: $chetwode-blue;
-    background: #eeeff9;
+    background: $lavender;
 }
 
 .campanien-list ul > li > a > span {
-    color: #ababab;
+    color: $dim-gray;
     float: right;
 }
 
@@ -3027,7 +2689,7 @@ li.no-click {
     display: inline-block;
     min-width: 150px;
     font-size: 18px;
-    font-family: "" opensans-semibold "";
+    font-family: " opensans-semibold ";
 }
 
 .modal-list ul > li {
@@ -3059,12 +2721,12 @@ li.no-click {
 .company-box h3 {
     font-weight: bold;
     margin-bottom: 7px;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
     padding-bottom: 15px;
 }
 
 .company-box {
-    background: #ebecee;
+    background: $solitude;
     padding: 20px;
     margin-bottom: 30px;
     min-height: 220px;
@@ -3098,7 +2760,7 @@ li.no-click {
     background: none;
     border: 0px;
     padding: 0px;
-    color: #787878;
+    color: $gray;
 }
 
 .align-item-center {
@@ -3139,7 +2801,7 @@ li.no-click {
 .mandatory-asterisk {
     font-size: 14px;
     top: 0;
-    color: red;
+    color: $red;
 }
 
 @media only screen and (max-width: 1400px) {
@@ -3172,7 +2834,7 @@ li.no-click {
 .proforma-list > .filters .separator {
     height: 30px;
     width: 1px;
-    border: 1px solid #ded3c0;
+    border: 1px solid $gainsboro;
     margin-right: 10px;
     vertical-align: bottom;
     float: left;
@@ -3189,12 +2851,6 @@ li.no-click {
     margin-right: 0;
 }
 
-.reset-btn {
-    padding: 8px;
-    background: #f3f0e6;
-    border: 1px solid #f5834e;
-}
-
 .filter-btn {
     right: 2em;
     cursor: pointer;
@@ -3232,7 +2888,7 @@ li.no-click {
     height: 49px;
     border: 0;
     width: 200px;
-    background: #dddddd;
+    background: $gainsboro-light;
     left: 0;
     padding-left: 16px;
     font-size: 17px;
@@ -3275,7 +2931,7 @@ li.no-click {
 
 .daterangepicker td.active,
 .daterangepicker td.active:hover {
-    background-color: #5864c9 !important;
+    background-color: $chetwode-blue !important;
     border-color: transparent;
     color: $white;
 }
@@ -3283,25 +2939,25 @@ li.no-click {
 .daterangepicker td.in-range {
     background-color: $lavender-light !important;
     border-color: transparent;
-    color: #000;
+    color: $black;
     border-radius: 0;
 }
 
 .daterangepicker.dropdown-menu {
     box-shadow: 0 3px 28px 0 rgba(0, 0, 0, 0.14);
-    color: #616161;
-    border: 1px solid #ccc;
+    color: $dark-gray;
+    border: 1px solid $gainsboro;
     z-index: 9999 !important;
 }
 
 .daterangepicker .input-mini.active {
-    border: 1px solid #f7b995;
+    border: 1px solid $skin-tone;
     border-radius: 4px;
 }
 
 #user-dropdown {
     color: $white;
-    background: #333;
+    background: $night-rider;
     width: 50px;
     text-align: center;
     padding: 15px 0;
@@ -3316,11 +2972,11 @@ li.no-click {
     right: 11px;
     top: 22px;
     font-size: 8px;
-    color: #525252;
+    color: $davy-grey;
 }
 
 .ranges li {
-    color: #525252 !important;
+    color: $davy-grey !important;
 }
 
 .ranges li.active,
@@ -3413,13 +3069,13 @@ input[type="number"]::-webkit-inner-spin-button {
 .navbar-right .dropdown-menu,
 .pull-right > .dropdown-menu {
     top: 54px;
-    border-color: #dcdde0;
+    border-color: $gainsboro;
 }
 
 .datePickr .dropdown-menu {
     box-shadow: 0 3px 28px 0 rgba(0, 0, 0, 0.14);
-    color: #616161;
-    border: 1px solid #ccc;
+    color: $dark-gray;
+    border: 1px solid $gainsboro;
 }
 
 .datePickr .dropdown-menu table {
@@ -3447,7 +3103,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .uncfr .form-control {
-    background: #f7edcd !important;
+    background: $floral-white !important;
 }
 
 .active.end-date.in-range.available,
@@ -3480,19 +3136,19 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .upload-btn {
-    background: #f3f0e6;
-    border: 1px solid #f7de8a;
+    background: $floral-white;
+    border: 1px solid $floral-white;
     padding: 6px;
     border-radius: 2px;
     float: right;
     margin-top: 20px;
 }
 
-.upload_div input[type="file"] {
+.upload-div input[type="file"] {
     display: none;
 }
 
-.upload_div {
+.upload-div {
     float: right;
     text-decoration: underline;
 }
@@ -3503,10 +3159,9 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 footer {
-    background-color: #26263a;
     padding: 10px 20px;
     text-align: center;
-    color: #c5c5b8;
+    color: $gray;
     font-size: 17px;
     margin-top: 20px;
     width: 100%;
@@ -3519,7 +3174,7 @@ footer > div {
 
 footer > div > a {
     margin: 0 22px;
-    color: #c5c5b8;
+    color: $gray;
     padding: 0;
     font-size: 16px;
 }
@@ -3537,14 +3192,6 @@ footer > div > a:last-child {
     margin-right: 0;
 }
 
-footer small {
-    color: #565b5b;
-}
-
-footer small a {
-    color: #565b5b;
-}
-
 .daterangepicker .daterangepicker_input {
     display: none !important;
 }
@@ -3565,7 +3212,7 @@ footer small a {
 
 .top_row {
     padding: 9px 10px;
-    border-bottom: 1px solid #d6d6d6;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .search_box {
@@ -3578,7 +3225,7 @@ footer small a {
     transform: translateY(-50%);
     right: 10px;
     z-index: 99;
-    color: #525252;
+    color: $davy-grey;
 }
 
 .stock-grp-list li:first-child {
@@ -3594,9 +3241,9 @@ footer small a {
 }
 
 .form-theme {
-    background: #f4f5f8;
+    background: $solitude;
     padding: 20px;
-    border: 1px solid #f4f5f8;
+    border: 1px solid $gainsboro;
 }
 
 .form-theme .form-control {
@@ -3606,20 +3253,20 @@ footer small a {
 .form-theme .form-control[disabled],
 .form-theme .form-control[readonly],
 .form-theme fieldset[disabled] .form-control {
-    background-color: #eee !important;
+    background-color: $whisper-light !important;
 }
 
 .btn-default-focus {
     box-shadow: none !important;
 }
 
-.form_title {
+.form-title {
     padding: 12px 20px;
-    background: #525252;
+    background: $davy-grey;
     color: $white;
 }
 
-.form_title label {
+.form-title label {
     font-weight: 400;
 }
 
@@ -3636,11 +3283,11 @@ a.btn.btn-xs.btn-link.pull-right {
     top: -4px;
 }
 
-.mutliple_unit {
+.multiple-unit {
     position: relative;
 }
 
-.mutliple_unit button {
+.multiple-unit button {
     padding: 0;
     border: 0;
     background: 0 0;
@@ -3650,25 +3297,25 @@ a.btn.btn-xs.btn-link.pull-right {
     cursor: pointer;
 }
 
-.mutliple_unit button + button {
+.multiple-unit button + button {
     margin-left: 22px;
 }
 
-.add_row {
-    color: #36af47;
+.add-row {
+    color: $success-green;
 }
 
-.dlet {
-    color: #f15757;
+.delete {
+    color: $bitter-sweet;
 }
 
 .table_theme {
-    border: 1px solid #dfe2e5;
+    border: 1px solid $gainsboro;
 }
 
 .table_theme > thead > tr,
 .table_theme > tbody > tr {
-    border-bottom: 1px solid #dfe2e5;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .table_theme > thead > tr > th {
@@ -3679,7 +3326,7 @@ a.btn.btn-xs.btn-link.pull-right {
 .table_theme > tbody > tr > td,
 .table_theme > thead > tr > th {
     padding: 12px 20px;
-    color: #525252;
+    color: $davy-grey;
 }
 
 .stkRprtTbl > tfoot > tr > td,
@@ -3758,7 +3405,7 @@ a.btn.btn-xs.btn-link.pull-right {
 #linkedStock .table_theme tbody tr td:nth-child(1):before {
     position: absolute;
     width: 22px;
-    background: #525252;
+    background: $davy-grey;
     height: 1px;
     content: " ";
     left: 0;
@@ -3775,10 +3422,10 @@ a.btn.btn-xs.btn-link.pull-right {
 }
 
 .list-inline label {
-    color: #616161;
+    color: $dark-gray;
 }
 
-.ReportInfo {
+.report-info {
     text-transform: capitalize;
 }
 
@@ -3789,20 +3436,20 @@ a.btn.btn-xs.btn-link.pull-right {
     padding-left: 2px;
 }
 
-.fb__1-container {
+.fb-1-container {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
-.stock_info {
+.stock-info {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
 }
 
-.stock_wrap {
+.stock-wrap {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -3843,7 +3490,7 @@ a.btn.btn-xs.btn-link.pull-right {
 
 .today.weekend.off.active.end-date.in-range.available {
     background: $white !important;
-    color: #999;
+    color: $nobel;
 }
 
 .dlt_btn {
@@ -3876,7 +3523,7 @@ a.btn.btn-xs.btn-link.pull-right {
 }
 
 .fileName {
-    color: #337ab7;
+    color: $primary;
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -3890,12 +3537,12 @@ a.btn.btn-xs.btn-link.pull-right {
     height: 22px;
 }
 
-.upload_div label {
+.upload-div label {
     font-weight: 400;
 }
 
 .blue {
-    color: #337ab7;
+    color: $primary;
 }
 
 .flowY_scroll {
@@ -3911,22 +3558,22 @@ a.btn.btn-xs.btn-link.pull-right {
 }
 
 .pop-panel .form-control {
-    background: #f9f7f2;
+    background: $floral-white;
     border-color: $gainsboro;
 }
 
 .pop-panel label {
-    color: rgba(0, 0, 0, 0.8);
+    color: $nero;
 }
 
 .inWords {
-    color: rgba(0, 0, 0, 0.8);
+    color: $nero;
     text-align: right;
     text-transform: capitalize;
 }
 
-.bdrT {
-    border-color: #d7d7d7;
+.bd-rt {
+    border-color: $gainsboro;
 }
 
 .popover.bottom > .arrow {
@@ -3935,7 +3582,7 @@ a.btn.btn-xs.btn-link.pull-right {
     border-bottom-color: $white;
 }
 
-.default_clr {
+.default-color {
     color: rgba(0, 0, 0, 0.8);
 }
 
@@ -3974,7 +3621,7 @@ a.btn.btn-xs.btn-link.pull-right {
     background-position: 96% !important;
 }
 
-.pItem .multi-select input.form-control {
+.item-padding .multi-select input.form-control {
     padding-right: 24px !important;
 }
 .card-invoice-table-wrapper .multi-select input.form-control {
@@ -4000,7 +3647,7 @@ a.btn.btn-xs.btn-link.pull-right {
     content: " ";
     margin-left: 2px;
     vertical-align: middle;
-    border-top: 5px dashed #000000;
+    border-top: 5px dashed $black;
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     top: 50%;
@@ -4046,9 +3693,9 @@ a.btn.btn-xs.btn-link.pull-right {
 }
 
 #select_view {
-    background: #ccc !important;
-    border-color: #ccc !important;
-    color: #4d4d4d;
+    background: $gainsboro !important;
+    border-color: $gainsboro !important;
+    color: $matterhorn;
 }
 
 #share-modal .input-group .input-group-btn:last-child > .btn {
@@ -4059,27 +3706,27 @@ a.btn.btn-xs.btn-link.pull-right {
     margin-left: -1px !important;
 }
 
-.l8grey {
-    color: #666;
+.light-gray {
+    color: $dark-gray;
 }
 
-.shared_list li {
-    list-style: none;
-    color: #666;
-    font-size: 16px;
-    padding: 5px 0 2px 0;
-    border-bottom: 1px solid #d6d6d6;
+.shared-list li {
+    list-style: none !important;
+    color: $dark-gray;
+    font-size: 16px !important;
+    padding: 5px 0 2px 0 !important;
+    border-bottom: 1px solid $gainsboro !important;
 }
 
-.shared_list select {
+.shared-list select {
     background: none !important;
     border: 0;
     padding: 0 !important;
     height: auto !important;
-    color: #666 !important;
+    color: $dark-gray !important;
 }
 
-.shared_list select:focus {
+.shared-list select:focus {
     border: 0 !important;
 }
 
@@ -4087,13 +3734,13 @@ a.btn.btn-xs.btn-link.pull-right {
     padding: 0 15px 0 0;
 }
 
-.delIcon {
+.delete-icon {
     width: inherit;
 }
 
 .dashed {
     border-style: dashed;
-    border-color: #ccc;
+    border-color: $very-light-gray;
 }
 
 .input-group button {
@@ -4134,7 +3781,7 @@ a.btn.btn-xs.btn-link.pull-right {
     cursor: pointer;
 }
 
-.pdB5 {
+.pd-b5 {
     padding-bottom: 50px;
 }
 
@@ -4144,7 +3791,7 @@ a.btn.btn-xs.btn-link.pull-right {
 
 .email-type label {
     font-weight: normal;
-    color: #808080;
+    color: $gray;
 }
 
 .email-type input {
@@ -4186,7 +3833,7 @@ input[type=radio]:checked:after {
     position: absolute;
     width: 6px;
     height: 6px;
-    background: #808080;
+    background: $gray;
     left: 3px;
     top: 4px;
     border-radius: 50%;
@@ -4197,25 +3844,25 @@ input[type=radio]:checked:after {
 
 /*====================== mustafa =====================*/
 
-.select_drop {
+.select-drop {
     position: relative;
     top: 0px;
     right: 2px;
     z-index: 9;
 }
 
-.select_drop i {
+.select-drop i {
     position: absolute;
     right: 4px;
     font-size: 16px;
-    color: #4d4d4d;
+    color: $matterhorn;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
 }
 
-.ledger-panel .bdrB {
-    border-bottom: 1px solid #bababa;
+.ledger-panel .bd-rb {
+    border-bottom: 1px solid $gainsboro;
 }
 
 .pop-panel .ui-select-toggle {
@@ -4230,25 +3877,6 @@ input[type=radio]:checked:after {
     top: 0;
 }
 
-/* .entrypanel .upload_div {
-    padding: 6px 8px;
-    float: left;
-    margin-right: 10px;
-    color: #4d4d4d;
-    border: 1px solid #949494;
-    cursor: pointer;
-    background: #f9f7f2;
-    height: 32px;
-}
-
-.entrypanel .upload_div i {
-    cursor: pointer;
-}
-
-.entrypanel .upload_div label {
-    color: #4d4d4d;
-} */
-
 #inventory-sidebar,
 #inventory-sidebar input {
     font-size: 14px;
@@ -4273,7 +3901,7 @@ input[type=radio]:checked:after {
     border-radius: 3px;
 }
 
-.form-group.mrB,
+.form-group.mr-b05,
 .margin-child-label .form-group label {
     margin-bottom: 5px;
 }
@@ -4291,7 +3919,7 @@ select.form-control {
 }
 
 .isFsStock {
-    color: #929292;
+    color: $nobel;
 }
 
 .pdBth1015 {
@@ -4306,17 +3934,17 @@ select.form-control {
     background-color: $white !important;
 }
 
-.linkStockTbl {
-    border-top: 1px solid #dfe2e5;
-    border-left: 1px solid #dfe2e5;
+.link-stock-table {
+    border-top: 1px solid $gainsboro;
+    border-left: 1px solid $gainsboro;
 }
 
-.linkStockTbl > tbody > tr > td {
+.link-stock-table > tbody > tr > td {
     padding: 10px 15px;
     font-size: 14px;
 }
 
-.linkStockTbl > tbody > tr > td:first-child {
+.link-stock-table > tbody > tr > td:first-child {
     padding-left: 0;
     position: relative;
     text-transform: capitalize;
@@ -4326,7 +3954,7 @@ select.form-control {
     width: 10px;
     height: 2px;
     display: inline-block;
-    background-color: #dfe2e5;
+    background-color: $gainsboro;
     position: absolute;
     top: 50%;
     left: 0;
@@ -4338,7 +3966,7 @@ select.form-control {
     margin-bottom: 0;
 }
 
-.noMarg {
+.no-margin {
     margin: 0 !important;
 }
 
@@ -4385,7 +4013,7 @@ select.form-control {
     text-align: left;
     background-color: $white;
     background-clip: padding-box;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -4420,7 +4048,7 @@ select.form-control {
     display: block;
     font-size: 14px;
     font-weight: 500;
-    color: #808080;
+    color: $gray;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -4431,18 +4059,14 @@ select.form-control {
 }
 
 .grp-col {
-    /*max-width: 400px;*/
-    /*max-width: 690px;*/
     float: left;
-    /* min-height: 100%; */
-    /* height: 100%; */
     overflow-x: auto;
 }
 
 .col-wrapper {
     width: 255px;
     float: left;
-    border-right: 1px solid #ccc;
+    border-right: 1px solid $gainsboro;
     min-height: 100%;
     height: 100%;
     position: relative;
@@ -4455,21 +4079,16 @@ select.form-control {
     font-size: 14px;
 }
 
-#getGroupModal.getGroupModal .modal-body {
+#getGroupModal.get-group-modal .modal-body {
     min-height: auto;
     height: auto;
 }
 
-.searchBar {
+.search-bar {
     position: relative;
 }
 
-/* .searchBar .form-control {
-    background: #6b6a6a !important;
-    color: $white;
-} */
-
-.searchBar .form-control {
+.search-bar .form-control {
     padding-right: 40px !important;
 }
 
@@ -4494,14 +4113,14 @@ label {
     margin-bottom: 4px;
 }
 
-#getGroupModal .bdrL,
-#getGroupModal .bdrR {
-    border-color: #ccc;
+#getGroupModal .bd-rl,
+#getGroupModal .bd-rr {
+    border-color: $gainsboro;
 }
 
 #getGroupModal .detailed label {
     font-size: 14px;
-    color: #808080;
+    color: $gray;
 }
 
 .btn-add {
@@ -4513,8 +4132,8 @@ label {
     color: $white !important;
 }
 
-.ledger-panel .bdrB {
-    border-bottom: 1px solid #bababa;
+.ledger-panel .bd-rb {
+    border-bottom: 1px solid $gainsboro;
 }
 
 .pop-panel .ui-select-toggle {
@@ -4534,7 +4153,7 @@ label {
     min-height: 400px;
 }
 
-.vcenter {
+.vertical-center {
     display: table-cell;
     vertical-align: middle;
 }
@@ -4546,24 +4165,24 @@ label {
 
 #App_taxes .btn {
     padding: 4px;
-    background: #e0e0e0;
-    color: #6b6a6a;
+    background: $whisper-color;
+    color: $dark-gray;
     margin: 0 4px 5px 0;
 }
 
 #App_taxes .btn:hover {
-    background: #e0e0e0;
-    color: #6b6a6a;
+    background: $whisper-color;
+    color: $dark-gray;
     box-shadow: none;
 }
 
 #App_taxes .form-control {
-    background: #f4f5f5 !important;
+    background: $gray-95 !important;
     border: 1px solid $gainsboro;
 }
 
 .col-wrapper:nth-child(1) {
-    background: #f4f5f5;
+    background: $gray-95;
     position: fixed;
     height: calc(100% - 58px);
     min-height: 0;
@@ -4581,7 +4200,7 @@ label {
 }
 
 .col-wrapper:nth-child(1) .isParent {
-    background: #e1ebf0 !important;
+    background: $whisper !important;
 }
 
 .col-wrapper:last-child ul li a.isParent {
@@ -4598,15 +4217,15 @@ label {
 }
 
 .isAcc {
-    color: #1a1a1a !important;
+    color: $nero !important;
 }
 
 .isSelectedgrp {
-    background: #f0f0f0;
+    background: $white-smoke;
 }
 
 .isParent {
-    background: #f0f0f0;
+    background: $white-smoke;
 }
 
 .isActive {
@@ -4633,7 +4252,7 @@ label {
     border-color: $deep-sky-blue-hover;
 }
 
-.primary_clr {
+.primary-color {
     color: var(--dark-blue01) !important;
 }
 
@@ -4645,7 +4264,7 @@ label {
     width: calc(100% - 93px) !important;
 }
 
-.view_forms {
+.view-forms {
     float: left;
     width: 100%;
     overflow-y: scroll;
@@ -4664,27 +4283,27 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-    color: #999999;
+    color: $nobel;
 }
 
 .form-control::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
-    color: #999999;
+    color: $nobel;
 }
 
 .form-control::-moz-placeholder {
     /* Firefox 19+ */
-    color: #999999;
+    color: $nobel;
 }
 
 .form-control:-ms-input-placeholder {
     /* IE 10+ */
-    color: #999999;
+    color: $nobel;
 }
 
 .form-control:-moz-placeholder {
     /* Firefox 18- */
-    color: #999999;
+    color: $nobel;
 }
 
 label {
@@ -4695,14 +4314,14 @@ label {
     margin-bottom: 4px;
 }
 
-#getGroupModal .bdrL,
-#getGroupModal .bdrR {
-    border-color: #ccc;
+#getGroupModal .bd-rl,
+#getGroupModal .bd-rr {
+    border-color: $gainsboro;
 }
 
 #getGroupModal .detailed label {
     font-size: 14px;
-    color: #808080;
+    color: $gray;
 }
 
 .btn-add {
@@ -4714,8 +4333,8 @@ label {
     color: $white !important;
 }
 
-.ledger-panel .bdrB {
-    border-bottom: 1px solid #bababa;
+.ledger-panel .bd-rb {
+    border-bottom: 1px solid $gainsboro;
 }
 
 .pop-panel .ui-select-toggle {
@@ -4735,7 +4354,7 @@ label {
     height: 100%;
 }
 
-.vcenter {
+.vertical-center {
     display: table-cell;
     vertical-align: middle;
 }
@@ -4747,33 +4366,33 @@ label {
 
 #App_taxes .btn {
     padding: 4px;
-    background: #e0e0e0;
-    color: #6b6a6a;
+    background: $whisper-color;
+    color: $dark-gray;
     margin: 0 4px 5px 0;
 }
 
 #App_taxes .btn:hover {
-    background: #e0e0e0;
-    color: #6b6a6a;
+    background: $whisper-color;
+    color: $dark-gray;
     box-shadow: none;
 }
 
 #App_taxes .form-control {
-    background: #f4f5f5 !important;
+    background: $gray-95 !important;
     border: 1px solid $gainsboro;
 }
 
 .tax-bullet {
     display: inline-block;
     padding: 4px 8px;
-    color: #808080;
+    color: $gray;
     border-radius: 3px;
     background: $whisper-color;
     margin: 0px 0 4px 4px;
 }
 
 .tax_group small {
-    color: #afa9a9;
+    color: $wistful;
     font-size: 14px;
 }
 
@@ -4791,16 +4410,16 @@ label {
     bottom: -12px;
 }
 
-.shareGrp {
+.share-grp {
     overflow: hidden;
 }
 
-.inline-table.new_form {
+.inline-table.new-form {
     width: 100%;
     text-align: center;
 }
 
-.new_form .btn {
+.new-form .btn {
     padding: 16px !important;
     font-size: 18px;
     min-width: 170px;
@@ -4829,18 +4448,18 @@ label {
 
 .accmerge li a {
     padding: 4px 8px;
-    color: #808080;
+    color: $gray;
     background: $whisper-color;
     float: left;
     border-radius: 2px;
 }
 
 .accmerge li a.isActive {
-    color: #808080;
+    color: $gray;
 }
 
 .accmerge li > a > span {
-    color: #949494;
+    color: $nobel;
     padding-left: 20px;
     font-weight: 500;
     float: right;
@@ -4855,11 +4474,11 @@ label {
 }
 
 #getGroupModal hr {
-    border-color: #c7c7c7;
+    border-color: $gainsboro;
 }
 
 /*#getGroupModal small {
-    color: #ccc;
+    color: $very-light-gray;
 }*/
 
 .breadcrumb {
@@ -4873,7 +4492,7 @@ label {
     padding-left: 4px;
     content: ">";
     font-size: 13px;
-    color: #808080;
+    color: $gray;
 }
 
 .breadcrumb > .active > a {
@@ -4881,7 +4500,7 @@ label {
 }
 
 .breadcrumb a {
-    color: #808080;
+    color: $gray;
 }
 
 .load-bar-wrap {
@@ -4904,12 +4523,12 @@ label {
     margin-bottom: 30px;
 }
 
-#getGroupModal .searchBar .reset {
+#getGroupModal .search-bar .reset {
     position: absolute;
     right: 2px;
     z-index: 9;
     top: 8px;
-    color: #8e9292;
+    color: $gray;
 }
 
 #getGroupModal .search-loading {
@@ -4992,7 +4611,7 @@ label {
 
 #manufacture .form-theme tbody tr td {
     padding: 7px 0;
-    color: #525252;
+    color: $davy-grey;
 }
 
 #manufacture select showGiddhDatepicker {
@@ -5008,13 +4627,13 @@ label {
     padding: 0 20px 0 7px !important;
 }
 
-#manufacture .form-theme tbody tr td .select_drop,
-#manufacture .source tbody tr td .select_drop {
+#manufacture .form-theme tbody tr td .select-drop,
+#manufacture .source tbody tr td .select-drop {
     right: 8px;
 }
 
-#manufacture .bdrT {
-    border-color: #ddd;
+#manufacture .bd-rt {
+    border-color: $gainsboro;
 }
 
 #manufacture thead th {
@@ -5022,17 +4641,17 @@ label {
 }
 
 #manufacture .source thead {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
 #manufacture .source .linkstock {
     height: auto;
-    color: #777;
+    color: $gray;
 }
 
 #manufacture .source .linkstock thead th,
 #manufacture .source .linkstock tfoot tr th {
-    color: #333;
+    color: $night-rider;
     font-weight: 100;
 }
 
@@ -5047,13 +4666,13 @@ label {
 }
 
 #manufacture .source table thead th,
-#manufacture .source .linkStockTbl > tbody > tr > td:first-child,
+#manufacture .source .link-stock-table > tbody > tr > td:first-child,
 #manufacture .source table tfoot th {
     padding: 10px 15px;
     font-size: 14px;
 }
 
-#manufacture .source .linkStockTbl {
+#manufacture .source .link-stock-table {
     border: 0;
 }
 
@@ -5061,7 +4680,7 @@ label {
     width: 10px;
     height: 2px;
     display: inline-block;
-    background-color: #dfe2e5;
+    background-color: $gainsboro;
     position: absolute;
     top: 50%;
     left: 0;
@@ -5077,7 +4696,7 @@ label {
     position: absolute;
     top: 20px;
     width: 2px;
-    background: #ddd;
+    background: $gainsboro-light;
     left: -2px;
 }
 
@@ -5094,7 +4713,7 @@ label {
     position: relative;
 }
 
-.shared_list li .delIcon {
+.shared-list li .delete-icon {
     height: auto;
 }
 
@@ -5102,7 +4721,7 @@ label {
     padding: 0;
 }
 
-#Addaccount .form-inline .select_drop {
+#Addaccount .form-inline .select-drop {
     top: 15px;
 }
 
@@ -5122,7 +4741,7 @@ label {
 
 .companyGst .gst {
     padding-bottom: 20px;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .Default_box {
@@ -5134,7 +4753,7 @@ label {
 }
 
 .grey-color {
-    color: #6d6d6d;
+    color: $dark-gray;
 }
 
 .grp-col::-webkit-scrollbar {
@@ -5144,7 +4763,7 @@ label {
 }
 
 .grp-col::-webkit-scrollbar-track {
-    background: #eee;
+    background: $whisper-light;
     margin-left: 255px;
 }
 
@@ -5166,7 +4785,7 @@ label {
 }
 
 #setupWizardModal .nav-justified > li > a {
-    color: grey;
+    color: $gray;
     text-decoration: none;
     text-transform: uppercase;
     font-weight: 700;
@@ -5175,7 +4794,7 @@ label {
 }
 
 .steps-indicator li.active a:before {
-    background-color: grey;
+    background-color: $gray;
 }
 
 .steps-indicator li a:before {
@@ -5190,7 +4809,7 @@ label {
 
 .steps-indicator li a:before,
 .steps-indicator:before {
-    background-color: #e6e6e6;
+    background-color: $whisper;
     content: "";
     top: -15px;
 }
@@ -5218,7 +4837,7 @@ label {
 
 .steps-indicator li a:before,
 .steps-indicator:before {
-    background-color: #e6e6e6;
+    background-color: $whisper;
     content: "";
 }
 
@@ -5234,7 +4853,7 @@ label {
 }
 
 .grp-col::-webkit-scrollbar-track {
-    background: #eee;
+    background: $whisper-light;
     margin-left: 255px;
 }
 
@@ -5279,7 +4898,7 @@ label {
 .custom-select{
         height: auto;
         padding: 0px;
-        border:0px solid $gainsboro;
+        border: none !important;
         select {
             -moz-appearance: none;
             -webkit-appearance: none;
@@ -5287,7 +4906,7 @@ label {
             border-radius: 0;
             padding-right: 22px !important;
         }
-        .select_drop {
+        .select-drop {
             position: absolute;
             bottom: 16px;
             top: inherit;
@@ -5319,11 +4938,11 @@ label {
 .pagination > li > span:focus,
 .pagination > li > span:hover {
     background-color: $gainsboro !important;
-    border-color: #ddd;
+    border-color: $gainsboro;
 }
 
 #manufacture .section-title {
-    color: #616161;
+    color: $dark-gray;
     font-size: 20px;
     line-height: 34px;
     vertical-align: middle;
@@ -5333,7 +4952,7 @@ label {
     border-radius: 0px !important;
     padding: 6px !important;
     outline: 0;
-    color: #616161;
+    color: $dark-gray;
     font-size: 14px;
     box-shadow: none;
 }
@@ -5350,7 +4969,7 @@ label {
 
 .select2-container--default
     .select2-results__option--highlighted[aria-selected] {
-    background-color: #333 !important;
+    background-color: $night-rider !important;
 }
 
 .select2-results__option[aria-selected] {
@@ -5384,12 +5003,12 @@ label {
     border-radius: 0;
 }
 
-.dropdown-toggle .select_drop {
+.dropdown-toggle .select-drop {
     right: 0;
 }
 
 .add-new-role-modal .dropdown-menu li label {
-    color: #858585;
+    color: $gray;
     font-weight: normal;
 }
 
@@ -5399,14 +5018,14 @@ label {
 }
 
 #single-role .panel-heading {
-    background: #ccc;
+    background: $very-light-gray;
     color: $white;
     border-radius: 0;
 }
 
 #single-role tbody tr td:first-child,
 #single-role thead tr th:first-child {
-    border-right: 1px solid #c2cdd3;
+    border-right: 1px solid $gainsboro;
 }
 
 #single-role .lead {
@@ -5419,7 +5038,7 @@ label {
 }
 
 #single-role .panel-body {
-    background: #f1f1f2;
+    background: $white-smoke;
 }
 
 #single-role .panel-body tbody tr:nth-child(1) td {
@@ -5430,7 +5049,7 @@ label {
 #single-role .panel-body label {
     font-size: 14px;
     text-transform: capitalize;
-    color: #858585;
+    color: $gray;
 }
 
 #single-role table {
@@ -5440,13 +5059,13 @@ label {
 /*************************************************** Dashboard CSS  ****************************************************/
 
 #dashboard .panel-default {
-    color: #4d4d4d;
+    color: $matterhorn;
     border-color: $gainsboro;
 }
 
 #dashboard .panel-default > .panel-heading {
     background-color: transparent;
-    /* border-color: #d6d6d6; */
+    /* border-color: $light-gray; */
     border: 0;
 }
 
@@ -5462,14 +5081,14 @@ label {
 
 /*************************************************** input CSS  ****************************************************/
 
-.radio_theme {
+.radio-theme {
     position: relative;
     margin: 0px 5px !important;
     top: 1px;
     cursor: pointer;
 }
 
-.radio_theme:before {
+.radio-theme:before {
     content: " ";
     position: absolute;
     width: 18px;
@@ -5479,11 +5098,11 @@ label {
     right: -2px; */
     top: 0;
     right: 0;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     border-radius: 50%;
 }
 
-.radio_theme:checked:after {
+.radio-theme:checked:after {
     content: " ";
     position: absolute;
     width: 8px;
@@ -5496,7 +5115,7 @@ label {
     text-align: center;
 }
 
-.radio_theme:checked:before {
+.radio-theme:checked:before {
     border: 1px solid $chetwode-blue;
 }
 
@@ -5533,7 +5152,7 @@ label {
 }
 
 .ledger-row td .select2-results ul li a {
-    color: #333;
+    color: $night-rider;
 }
 
 .ledger-row td .select2-container .select2-selection {
@@ -5543,7 +5162,7 @@ label {
 }
 
 .ledger-row td .select2-container .select2-search__field {
-    background: #f3f0e6 !important;
+    background: $floral-white !important;
 }
 
 /* .ledger-panel .dropdown-container .dropdown-menu li {
@@ -5554,7 +5173,7 @@ label {
 
 .dropdown-container .dropdown-menu li label span {
     max-width: calc(100% - 22px);
-    color: #333;
+    color: $night-rider;
 }
 
 .dropdown-container .dropdown-menu {
@@ -5564,7 +5183,7 @@ label {
 
 /*************************************************** Custom Invoice CSS  ****************************************************/
 
-#customInvoice .templateEditor input[type="checkbox"] {
+#customInvoice .template-editor input[type="checkbox"] {
     margin-right: 12px !important;
     left: 0;
 }
@@ -5574,7 +5193,7 @@ label {
 }
 
 .sticky-footer {
-    background: #5d5d5d;
+    background: $matterhorn;
     width: 100%;
     position: fixed;
     bottom: 0;
@@ -5584,23 +5203,23 @@ label {
     z-index: 2;
 }
 
-#customInvoice .templateEditor .btn-group-lg > .btn {
+#customInvoice .template-editor .btn-group-lg > .btn {
     border-radius: 0;
     border: 0;
     box-shadow: none;
     background: $whisper-color;
 }
 
-#customInvoice .templateEditor .btn-group-lg > .btn:focus {
+#customInvoice .template-editor .btn-group-lg > .btn:focus {
     outline: 0;
 }
 
-#customInvoice .templateEditor .btn-group-lg > .btn:hover {
+#customInvoice .template-editor .btn-group-lg > .btn:hover {
     background: $white;
 }
 
 #customInvoice {
-    background: #f4f5f8;
+    background: $solitude;
     height: calc(100vh - 70px);
 }
 
@@ -5613,56 +5232,56 @@ label {
     margin-bottom: 20px;
 }
 
-#customInvoice .templateEditor label {
+#customInvoice .template-editor label {
     margin-bottom: 15px;
     width: 100%;
 }
 
-#customInvoice .templateEditor .form-control,
-#customInvoice .templateEditor .table > tbody > tr > td .form-control {
+#customInvoice .template-editor .form-control,
+#customInvoice .template-editor .table > tbody > tr > td .form-control {
     margin: 7px 0;
     background: $white;
     border-color: $gainsboro;
     border-radius: 2px;
 }
 
-#customInvoice .templateEditor h3 {
+#customInvoice .template-editor h3 {
     margin: 15px 0;
     font-size: 18px;
 }
 
-.customField .form-control {
+.custom-field .form-control {
     float: right;
     width: 100%;
     margin: 0 !important;
 }
 
-#customInvoice .templateEditor label span {
+#customInvoice .template-editor label span {
     display: block;
 }
 
-#customInvoice .templateEditor .table > thead > tr > th,
-#customInvoice .templateEditor .table > tbody > tr > td {
+#customInvoice .template-editor .table > thead > tr > th,
+#customInvoice .template-editor .table > tbody > tr > td {
     border: 0;
     /* font-weight: normal; */
     /* padding: 0; */
     vertical-align: middle;
 }
 
-#customInvoice .templateEditor .table > tbody > tr > td:first-child,
-#customInvoice .templateEditor .table > thead > tr > th:first-child {
+#customInvoice .template-editor .table > tbody > tr > td:first-child,
+#customInvoice .template-editor .table > thead > tr > th:first-child {
     padding-left: 0;
 }
 
-#customInvoice .templateEditor .table > tbody {
+#customInvoice .template-editor .table > tbody {
     margin: 10px 0;
 }
 
-#customInvoice .templateEditor .table > tbody > tr > td label {
+#customInvoice .template-editor .table > tbody > tr > td label {
     margin-bottom: 0;
 }
 
-#customInvoice .templateEditor .customField span {
+#customInvoice .template-editor .custom-field span {
     display: inline-block;
     float: right;
     width: calc(100% - 30px);
@@ -5681,14 +5300,14 @@ label {
     display: inline-block;
 }
 
-.designTool > li {
+.design-tool > li {
     float: left;
     width: 100%;
     margin: 10px 0;
     list-style: none;
 }
 
-.designTool li > label {
+.design-tool li > label {
     display: inline-block;
     width: auto !important;
     line-height: 50px;
@@ -5696,8 +5315,8 @@ label {
     padding: 0 10px;
 }
 
-.designTool li [class^="ico-"],
-.designTool li [class*=" ico-"] {
+.design-tool li [class^="ico-"],
+.design-tool li [class*=" ico-"] {
     width: 50px;
     height: 50px;
     float: left;
@@ -5725,7 +5344,7 @@ label {
     background-position: center -267px !important;
 }
 
-.templateView li {
+.template-view li {
     float: left;
     width: 190px;
     margin: 0px;
@@ -5735,13 +5354,13 @@ label {
     position: relative;
 }
 
-.templateView li img {
+.template-view li img {
     background: $white;
     height: 100%;
     width: 100%;
     object-fit: contain;
     border-radius: 4px;
-    border: 1px solid $whisper-color;
+    border: 1px solid $gainsboro;
 }
 
 .logo-preview {
@@ -5757,26 +5376,26 @@ label {
     object-fit: contain;
 }
 
-.logoTool ul {
+.logo-tool ul {
     margin: 5px 0;
 }
 
-.logoTool ul li {
+.logo-tool ul li {
     font-weight: bold;
     list-style: none;
     display: inline-block;
-    border: 1px solid #b2b2b2;
+    border: 1px solid $gainsboro;
     border-radius: 50%;
     width: 30px;
     text-align: center;
     height: 30px;
     line-height: 30px;
-    color: #b2b2b2;
+    color: $silver;
 }
 
-.logoTool ul li:hover {
-    border-color: #666666;
-    color: #666666;
+.logo-tool ul li:hover {
+    border-color: $dark-gray;
+    color: $dark-gray;
 }
 
 .swatch-preview span {
@@ -5786,39 +5405,39 @@ label {
     height: 100%;
 }
 
-.printTool .table > tbody > tr > td {
+.print-tool .table > tbody > tr > td {
     padding-top: 0;
 }
 
-.printTool .table > tbody > tr > td > input {
+.print-tool .table > tbody > tr > td > input {
     margin: 0 !important;
 }
 
-.printTool a {
+.print-tool a {
     bottom: 10px;
     top: inherit;
     right: -50px;
 }
 
-.scrollAuto {
+.scroll-auto {
     overflow-y: auto;
     padding-right: 15px;
     max-height: calc(100vh - 245px);
 }
 
-.scrollAuto::-webkit-scrollbar {
+.scroll-auto::-webkit-scrollbar {
     width: 8px;
     position: relative;
     border-radius: 8px;
 }
 
-.scrollAuto::-webkit-scrollbar-track {
-    background: #ddd;
+.scroll-auto::-webkit-scrollbar-track {
+    background: $gainsboro-light;
     /* margin-left: 255px; */
     border-radius: 8px;
 }
 
-.scrollAuto::-webkit-scrollbar-thumb {
+.scroll-auto::-webkit-scrollbar-thumb {
     background-color: $gainsboro;
     outline: 1px solid $gray;
     /* margin-left: 255px; */
@@ -5834,7 +5453,7 @@ label {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    background-color: #eee !important;
+    background-color: $whisper-light !important;
 }
 
 input[type="checkbox"][disabled] {
@@ -5865,8 +5484,8 @@ input[type="checkbox"][disabled] {
     font-size: 12px;
     line-height: 1.5;
     border-radius: 3px;
-    background: #eee;
-    border: 1px solid #d6d6d6;
+    background: $whisper-light;
+    border: 1px solid $gainsboro;
 }
 
 .dashboard-filter label {
@@ -5880,14 +5499,14 @@ input[type="checkbox"][disabled] {
 }
 
 .input-group-btn .btn-default {
-    background: #eeeeee;
-    border: 1px solid #d6d6d6;
+    background: $whisper-light;
+    border: 1px solid $gainsboro;
     color: $charcoal;
 }
 
 .input-group-btn .btn-default:hover {
-    background: #eeeeee;
-    border: 1px solid #d6d6d6;
+    background: $whisper-light;
+    border: 1px solid $gainsboro;
     box-shadow: none;
     outline: 0;
 }
@@ -5898,7 +5517,7 @@ input[type="checkbox"][disabled] {
 
 .subHead {
     font-size: 105%;
-    color: #333333;
+    color: $night-rider;
     padding-bottom: 10px;
 }
 
@@ -5910,7 +5529,7 @@ input[type="checkbox"][disabled] {
     margin-bottom: 7px;
 }
 
-.reconnectDiv .vmiddle {
+.reconnectDiv .vertical-align-middle  {
     top: 50%;
     transform: translateY(-50%);
     position: absolute;
@@ -5918,7 +5537,7 @@ input[type="checkbox"][disabled] {
     right: 0;
 }
 
-.company_gst textarea {
+.company-gst textarea {
     height: 105px;
 }
 
@@ -5995,7 +5614,7 @@ datepicker-inner .well table button.btn.btn-default.btn-sm {
     line-height: 1;
     background-color: transparent !important;
     font-size: 20px;
-    color: #333 !important;
+    color: $night-rider !important;
     box-shadow: none !important;
 }
 
@@ -6043,7 +5662,7 @@ datepicker-inner .well table tbody .btn-default.active {
 
 .calendar-dropdown {
     /* box-shadow: none; */
-    border-color: #ddd;
+    border-color: $gainsboro;
     margin-top: 1px;
     border-radius: 2px;
 }
@@ -6058,12 +5677,17 @@ datepicker-inner .well monthpicker table tbody tr:nth-child(1) td {
     padding-top: 10px;
 }
 
+.datepicker-account{
+    z-index:10;
+    min-height:290px;
+}
+
 input[type="checkbox"][disabled]:after {
     cursor: not-allowed;
 }
 
 .form-bg {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 .toggle-btn i {
@@ -6090,7 +5714,7 @@ input[type="checkbox"][disabled]:after {
 .welcome-header h2 {
     font-size: 26px;
     font-family: "opensans-regular";
-    color: #535353;
+    color: $davy-grey;
 }
 
 .table-container section div:last-child {
@@ -6098,27 +5722,27 @@ input[type="checkbox"][disabled]:after {
 }
 
 .success {
-    color: #3fab63;
+    color: $success-green;
 }
 
 .danger {
-    color: #ef5350;
+    color: $red;
 }
 
 .table-container thead tr th:first-child {
-    border-left: 6px solid $whisper-color;
+    border-left: 6px solid $gainsboro;
 }
 
 .table-container .account {
-    background: #f4f5f8;
-    /* background: #eee; */
+    background: $solitude;
+    /* background: $whisper-light; */
 }
 
 .table-container > div > section > .tb-pl-bs-grid-row > div:nth-child(1) {
     padding-left: 7px !important;
 }
 
-.table-container .profitLoss section div > div {
+.table-container .profit-loss section div > div {
     border-right: 0;
 }
 
@@ -6140,12 +5764,12 @@ input[type="checkbox"][disabled]:after {
     background: $white;
     top: -1px;
     right: -2px;
-    border: 1px solid #999;
+    border: 1px solid $gainsboro;
     border-radius: 50%;
 }
 
 .input-group-addon input[type="radio"]:checked:before {
-    border-color: #5b64c9;
+    border-color: $chetwode-blue;
 }
 
 .input-group-addon input[type="radio"]:checked:after {
@@ -6153,7 +5777,7 @@ input[type="checkbox"][disabled]:after {
     position: absolute;
     width: 10px;
     height: 10px;
-    background: #5b64c9;
+    background: $chetwode-blue;
     left: 0;
     top: 3px;
     border-radius: 50%;
@@ -6161,7 +5785,7 @@ input[type="checkbox"][disabled]:after {
     text-align: center;
 }
 
-.searchBar a {
+.search-bar a {
     right: 7px;
     z-index: 9;
     top: 7px;
@@ -6191,7 +5815,7 @@ input[type="checkbox"][disabled]:after {
 
 #verifyMobile .phoneNum ng-select > div > div.single > div.toggle {
     line-height: 46px;
-    color: #4d4d4d;
+    color: $matterhorn;
     height: 44px;
 }
 
@@ -6230,11 +5854,11 @@ ng-select > div > div.single > div.clear:hover {
     border-left: 0px;
 }
 
-ng-select .select_drop {
+ng-select .select-drop {
     position: initial;
 }
 
-ng-select .select_drop i {
+ng-select .select-drop i {
     right: 9px;
 }
 
@@ -6255,7 +5879,7 @@ virtual-scroll .scrollable-content .item:hover>a {
     color: $chetwode-blue !important;
 }
 virtual-scroll .scrollable-content .item > a .item-unique,
-virtual-scroll .scrollable-content .item > a .item_stock {
+virtual-scroll .scrollable-content .item > a .item-stock {
     color: $moody-blue;
 }
 .customer-invoice-form virtual-scroll .scrollable-content .item > a {
@@ -6269,7 +5893,7 @@ virtual-scroll .scrollable-content .item > a .item_stock {
     border-bottom: 0px !important;
 }
 
-.customerInvoiceTable virtual-scroll .scrollable-content .item > a {
+.customer-invoice-table virtual-scroll .scrollable-content .item > a {
     white-space: initial;
 }
 
@@ -6295,7 +5919,7 @@ table input[type="number"] {
     text-align: right;
 }
 
-.taxInput {
+.tax-input {
     padding-right: 25px !important;
 }
 
@@ -6310,7 +5934,7 @@ typeahead-container .dropdown-menu li.active > a,
 typeahead-container .dropdown-menu li:hover > a,
 typeahead-container .dropdown-menu > .active > a:hover,
 typeahead-container .dropdown-menu li.active > a > a:hover {
-    background-color: rgb(244, 245, 248);
+    background-color: $solitude;
 }
 
 .has-item {
@@ -6332,23 +5956,23 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
 
 /**new modal design**/
 
-.welcome_header {
+.welcome-header {
     background: $white url("../images/Welcome.png") no-repeat center center;
     text-align: center;
     padding: 0px 0 30px;
     position: relative;
 }
 
-.welcome_header h1 {
+.welcome-header h1 {
     font-size: 30px;
     font-family: "opensans-regular";
-    color: #1a237e;
+    color: $midnight-blue;
 }
 
-.welcome_header:after {
+.welcome-header:after {
     position: absolute !important;
     width: 98%;
-    background: #b3b3b3;
+    background: $silver;
     height: 1px;
     margin: 0 auto;
     padding: 0;
@@ -6411,7 +6035,7 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
 .welcome-header h2 {
     font-size: 26px;
     font-family: "opensans-regular";
-    color: #535353;
+    color: $davy-grey;
     position: relative;
 }
 
@@ -6429,20 +6053,20 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
     height: 550px;
 }
 
-.right_section {
+.right-section {
     background: url("../images/Schedule.png") right 100px no-repeat;
 }
 
 /**end new modal design**/
 
 .col-wrapper .btn-link {
-    color: #10aae0 !important;
+    color: $deep-sky-blue-hover !important;
 }
 
 .form-group sup {
     font-size: 14px;
     top: 0;
-    color: red;
+    color: $red;
 }
 
 .btn-share,
@@ -6475,9 +6099,9 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
     position: relative;
     transition: all 0.3s ease;
     width: 100%;
-    border: 1px solid #cccccc;
+    border: 1px solid $gainsboro;
     border-radius: 2px;
-    color: #666;
+    color: $dark-gray;
     padding: 0 7px;
     height: 34px;
 }
@@ -6487,7 +6111,7 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
 }
 
 .square-switch input[type="checkbox"]:checked ~ label {
-    background: #28ab00;
+    background: $light-green;
     color: $white;
 }
 
@@ -6497,7 +6121,7 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
 
 .square-switch input[type="checkbox"] ~ label::after {
     content: " ";
-    background: #ccc;
+    background: $very-light-gray;
     position: absolute;
     height: 34px;
     width: 28px;
@@ -6516,19 +6140,19 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
     font-size: 14px;
 }
 
-.user_list {
+.user-list {
     padding: 15px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gainsboro;
     overflow: hidden;
 }
 
-.permission_list .permission:last-child .form-group {
+.permission-list .permission:last-child .form-group {
     margin-bottom: 0 !important;
 }
 
 .option-box {
     background: $lavender;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
     margin-bottom: 10px;
 }
 
@@ -6536,11 +6160,11 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
     top: -1px;
 }
 
-.dashboard-filter .radio_theme:before {
+.dashboard-filter .radio-theme:before {
     top: 0;
 }
 
-.dashboard-filter .radio_theme:after {
+.dashboard-filter .radio-theme:after {
     left: 4px;
 }
 
@@ -6549,37 +6173,37 @@ typeahead-container .dropdown-menu li.active > a > a:hover {
 .ledg-head table td[class*="col-"],
 .ledg-head table td .select2-container {
     padding: 8px !important;
-    border-bottom: 1px solid #ccc;
-    border-right: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
+    border-right: 1px solid $gainsboro;
     font-size: 13px;
-    color: #4d4d4d;
+    color: $matterhorn;
     text-overflow: ellipsis;
     /* // overflow: hidden; */
     white-space: nowrap;
 }
 
 .ledger-row:hover {
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
 }
 
-.ledg-head table td.pdR25imp {
+.ledg-head table td.pr-25 {
     padding-right: 25px !important;
 }
 
 .ledg-head.entry-popup table td[class*="col-"] {
     padding: 0px !important;
     padding-bottom: 1px !important;
-    border-bottom: 1px solid #ccc;
-    border-right: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
+    border-right: 1px solid $gainsboro;
     font-size: 13px;
-    color: #4d4d4d;
+    color: $matterhorn;
     text-overflow: ellipsis;
     /* overflow: hidden; */
     white-space: nowrap;
     position: relative;
 }
 
-.ledg-head.entry-popup table td.pdR25imp {
+.ledg-head.entry-popup table td.pr-25 {
     padding-right: 25px !important;
 }
 
@@ -6601,7 +6225,7 @@ table td[class*=col-]:last-child {
     border: 0;
 }
 
-.t-h-bg1 th {
+.thead-background1 th {
     border-left: 0;
 }
 
@@ -6612,7 +6236,7 @@ table td[class*=col-]:last-child {
 .ledger-stat {
     padding: 50px 0;
     background: $white;
-    color: #808080;
+    color: $gray;
     font-size: 18px;
     margin: 100px 0;
 }
@@ -6622,7 +6246,7 @@ table td[class*=col-]:last-child {
     margin-top: 0;
 }
 
-.icomoon_ico {
+.icomoon-ico {
     margin-left: 8px;
 }
 
@@ -6672,21 +6296,21 @@ table td[class*=col-]:last-child {
     font-weight: 400;
 }
 
-.pdR25imp {
+.pr-25 {
     padding-right: 25px !important;
 }
 
-.t-h-bg1 th {
-    background: #eaebed;
-    color: #4d4d4d;
-    border-right: 1px solid #c4c6c7;
+.thead-background1 th {
+    background: $whisper-color;
+    color: $matterhorn;
+    border-right: 1px solid $gainsboro;
     padding: 11px !important;
     font-weight: 400;
-    border-bottom: 1px solid #c4c6c7;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .ledger-book {
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     clear: both;
     /* // overflow: hidden; */
     position: relative;
@@ -6725,7 +6349,7 @@ table td[class*=col-]:last-child {
 //     bottom: 0;
 //     width: 1px;
 //     height: 100%;
-//     background: #ccc;
+//     background: $very-light-gray;
 //     right: 1px;
 //     margin: 0 auto;
 // }
@@ -6734,7 +6358,7 @@ table td[class*=col-]:last-child {
     border: 0 !important;
 } */
 
-.select2-ledger sh-select .selectedVal {
+.select2-ledger sh-select .selected-val {
     border: 0 !important;
 }
 
@@ -6748,7 +6372,7 @@ table td[class*=col-]:last-child {
     top: 33px;
 }
 
-.radio_theme {
+.radio-theme {
     height: 18px;
     width: 18px;
 }
@@ -6770,12 +6394,12 @@ table td[class*=col-]:last-child {
     font-family: "opensans-semibold";
 }
 
-.form_body {
+.form-body {
     background: $white;
     /* padding: 15px; */
 }
 
-.noHover:hover td {
+.no-hover:hover td {
     background: $white !important;
 }
 
@@ -6784,11 +6408,11 @@ table td[class*=col-]:last-child {
 } */
 
 .universal-date .btn-link {
-    color: #f5f5f5 !important;
+    color: $gray-95 !important;
     padding-top: 3px;
     padding-left: 0px;
     padding-right: 0px;
-    border-bottom: 1px solid #f5f5f5;
+    border-bottom: 1px solid $gray-95;
     padding-bottom: 0;
     border-radius: 0;
     margin-right: 0;
@@ -6811,7 +6435,7 @@ table td[class*=col-]:last-child {
     left: -7px;
 }
 
-.unit_add {
+.unit-add {
     position: absolute;
     right: 15px;
 }
@@ -6822,7 +6446,7 @@ table td[class*=col-]:last-child {
 
 /* left bar menu */
 
-.form_body .toggle-btn label {
+.form-body .toggle-btn label {
     color: #7f7f7f;
 }
 
@@ -6864,7 +6488,7 @@ table td[class*=col-]:last-child {
 }
 
 .footer-navigate {
-    background: #f5f5f5;
+    background: $gray-95;
     border-radius: 0 0 3px 3px;
 }
 
@@ -6878,12 +6502,12 @@ table td[class*=col-]:last-child {
     list-style-type: none;
     padding: 8px 20px;
     font-size: 11px;
-    color: #666666;
+    color: $dark-gray;
 }
 
 .app-list > ul li a {
     padding: 3px 0;
-    color: #555;
+    color: $davy-grey;
     display: block;
     position: relative;
     font-size: 12px;
@@ -6894,7 +6518,7 @@ table td[class*=col-]:last-child {
 }
 
 .app-list > ul li a:hover {
-    color: #000;
+    color: $black;
     background: none;
 }
 
@@ -6918,27 +6542,27 @@ table td[class*=col-]:last-child {
     border-radius: 100%;
 }
 
-.longcode-details figure ul li {
+.long-code-details figure ul li {
     list-style: none;
     padding: 12px 0;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid $gainsboro;
 }
 
-.longcode-details figure ul li:last-child {
+.long-code-details figure ul li:last-child {
     border-bottom: 0;
 }
 
-.longcode-details figure ul {
-    background: #f4f5f8;
+.long-code-details figure ul {
+    background: $solitude;
     margin-bottom: 10px;
 }
 
-.longcode-details figure ul li h2 {
+.long-code-details figure ul li h2 {
     font-weight: 600;
     margin-bottom: 10px;
 }
 
-.longcode-details figure ul li .cases {
+.long-code-details figure ul li .cases {
     margin-left: 10px;
 }
 
@@ -6990,7 +6614,7 @@ table td[class*=col-]:last-child {
     top: 0;
 }
 
-.illustration_box {
+.illustration-box {
     border-radius: 4px;
     padding: 25px 20px;
     /* box-shadow: 0 0 8px #b3b3b329;
@@ -6998,7 +6622,7 @@ table td[class*=col-]:last-child {
     margin-top: 40px;
 }
 
-.illustration_box img {
+.illustration-box img {
     opacity: 0.7;
     max-width: 400px;
     margin: 0 auto;
@@ -7064,7 +6688,7 @@ table td[class*=col-]:last-child {
     position: absolute;
     top: 2px;
     right: -48px;
-    background: #eee;
+    background: $whisper-light;
     border-radius: 100%;
     padding: 7px 7px;
     text-transform: uppercase;
@@ -7097,7 +6721,7 @@ table td[class*=col-]:last-child {
 }
 
 .dropdown-option li a:hover {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 .text-link,
@@ -7114,7 +6738,7 @@ panel.sFthanks.fieldset {
 }
 
 .tbpl-dropdown > li {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .tbpl-dropdown > li:last-child {
@@ -7122,12 +6746,12 @@ panel.sFthanks.fieldset {
 }
 
 .tbpl-dropdown > li:hover a {
-    background: #f4f5f8;
+    background: $solitude;
 }
 
 .tbpl-dropdown .caret {
     transform: rotate(180deg);
-    border-top: 7px dashed #bbb;
+    border-top: 7px dashed $gainsboro;
     border-right: 7px solid transparent;
     border-left: 7px solid transparent;
     position: absolute;
@@ -7135,7 +6759,7 @@ panel.sFthanks.fieldset {
     top: -8px;
 }
 
-.auto_save {
+.auto-save {
     float: right;
     position: absolute;
     top: 64px;
@@ -7143,12 +6767,12 @@ panel.sFthanks.fieldset {
     z-index: 9;
 }
 
-.auto_save i {
+.auto-save i {
     top: 2px;
     position: relative;
 }
 
-.auto_save i.rotate {
+.auto-save i.rotate {
     animation: rotate 1.5s infinite linear;
 }
 
@@ -7158,7 +6782,7 @@ panel.sFthanks.fieldset {
 
 .unit_action .btn {
     margin-right: 0;
-    border: 1px solid #ccc;
+    border: 1px solid $gainsboro;
     opacity: 0.5;
 }
 
@@ -7187,7 +6811,7 @@ GST filing
 
 .tax-engine .column.list-column {
     display: block;
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
 }
 
 .tax-engine .column {
@@ -7210,7 +6834,7 @@ GST filing
 
 .tax-engine .list-filter {
     padding: 15px !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid $gainsboro !important;
     height: 80px;
 }
 
@@ -7304,12 +6928,12 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .cmp:hover,
 .user-dropdown-header > li a:hover .user-name-wrap small {
-    color: #666;
+    color: $dark-gray;
 }
 
 .user-dropdown-header > li a:hover {
     color: $chetwode-blue;
-    background: #eeeff9;
+    background: $lavender;
 }
 
 .hamburger-menu button,
@@ -7382,7 +7006,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 .tax-engine .dropdown-menu li .help-text,
 .tax-engine .modal-header .help-text,
 .tax-engine .text-muted {
-    color: #777;
+    color: $gray;
 }
 
 .space {
@@ -7402,7 +7026,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .tax-engine .nav-tabs > li a {
     font-size: 15px;
-    color: #555;
+    color: $davy-grey;
     margin-right: 0;
     height: 100%;
     padding: 14px 40px;
@@ -7432,7 +7056,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 .tax-engine hr {
     margin-top: 20px;
     margin-bottom: 20px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine .transactions-overview .gstr-transactions-summary {
@@ -7453,7 +7077,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     .transactions-overview
     .gstr-transactions-summary
     .transactions-table {
-    border: 1px solid #ededed;
+    border: 1px solid $gainsboro;
 }
 
 .tax-engine .table.transactions-table,
@@ -7481,7 +7105,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine .gstr-transactions-summary .table > thead > tr > th {
@@ -7491,7 +7115,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine .table caption + thead tr:first-child td,
@@ -7504,8 +7128,8 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table thead > tr > th {
-    border-bottom: 1px solid #eee;
-    color: #777;
+    border-bottom: 1px solid $whisper-light;
+    color: $gray;
 }
 
 .tax-engine .table.transactions-table tbody > tr > td {
@@ -7517,7 +7141,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .table-striped > tbody > tr:nth-child(even) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-    background-color: #f9f9f9;
+    background-color: $gray-95;
 }
 
 .tax-engine .table tbody > tr > td,
@@ -7529,7 +7153,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     padding: 8px;
     line-height: 1.42857143;
     vertical-align: top;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine
@@ -7538,7 +7162,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     > tr:not(.secondary-row)
     + tr.secondary-row
     > td {
-    border-top: 1px solid #ededed;
+    border-top: 1px solid $gainsboro;
 }
 
 .tax-engine
@@ -7552,7 +7176,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 .tax-engine .table.transactions-summary-table > tbody > tr.secondary-row > td {
     border: none;
     background-color: $white;
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
     font-size: 13px;
     padding: 13px;
 }
@@ -7599,7 +7223,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .tax-engine .sub-filter-nav-band > ul > li.active > a,
 .tax-engine .sub-filter-nav-bandnew ul > li.active > a {
-    color: #222;
+    color: $night-rider;
     font-weight: 600;
 }
 
@@ -7659,7 +7283,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .transactions-list .filter-band {
-    background-color: #f5fafe;
+    background-color: $gray-95;
     padding: 20px;
     height: 66px;
 }
@@ -7707,8 +7331,8 @@ perfect-scrollbar > .ps > .ps-overlay {
 .tax-engine .transactions-list .filter-band .btn,
 .tax-engine .transactions-list .filter-band .btn:focus,
 .tax-engine .transactions-list .filter-band .btn:hover {
-    color: #2a85fb;
-    border-color: #2a85fb;
+    color: $primary;
+    border-color: $primary;
     background-color: transparent;
     box-shadow: none;
 }
@@ -7722,7 +7346,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 .tax-engine .transactions-list .filter-band .btn .caret,
 .tax-engine .transactions-list .filter-band .btn:focus .caret,
 .tax-engine .transactions-list .filter-band .btn:hover .caret {
-    border-top-color: #2a85fb;
+    border-top-color: $primary;
 }
 
 .tax-engine .caret {
@@ -7731,7 +7355,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     height: 0;
     margin-left: 2px;
     vertical-align: middle;
-    border-top: 4px solid #000;
+    border-top: 4px solid $black;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
     border-bottom: 0 dotted;
@@ -7762,8 +7386,8 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .transactions-overview .transaction-info:hover {
-    border: 1px solid #eee;
-    box-shadow: 0 0 20px 3px #f9f9f9;
+    border: 1px solid $gainsboro;
+    box-shadow: 0 0 20px 3px $gray-95;
 }
 
 .tax-engine .transactions-overview .transaction-info {
@@ -7805,15 +7429,15 @@ perfect-scrollbar > .ps > .ps-overlay {
     font-style: italic;
     padding: 14px 25px;
     font-size: 13px;
-    color: #337ab7;
+    color: $curious-blue;
 }
 
 .tax-engine .sub-filter-nav-band > ul > li .count {
-    color: #cb1119;
+    color: $red;
 }
 
 .tax-engine .sub-filter-nav-band > ul > li.active > a {
-    color: #222;
+    color: $night-rider;
     font-weight: 600;
     border: 0;
 }
@@ -7823,7 +7447,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table.reconciliations-table {
-    border-bottom: 1px solid #ededed;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .tax-engine .table-fixed {
@@ -7831,7 +7455,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .zi-table {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $whisper-light;
     table-layout: fixed;
 }
 
@@ -7841,7 +7465,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table thead:first-child tr:first-child th {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
 }
 
 .list-column.expanded-list-column .zi-table tr td:first-of-type,
@@ -7865,7 +7489,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .zi-table.table-hover tbody tr:hover td {
-    background-color: #fafafa;
+    background-color: $whisper-color;
     cursor: pointer;
 }
 
@@ -7878,7 +7502,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     padding: 8px;
     line-height: 1.42857143;
     vertical-align: top;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $whisper-light;
 }
 
 .tax-engine .details .details-info,
@@ -7896,7 +7520,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .table.reconciliations-table tbody > tr > td.primary-details {
-    border-right: 1px solid #ededed;
+    border-right: 1px solid $gainsboro;
 }
 
 .tax-engine .table.reconciliations-table .actions-dropdown {
@@ -7910,7 +7534,7 @@ perfect-scrollbar > .ps > .ps-overlay {
     tbody
     > tr:hover
     .actions-dropdown-btn {
-    border: 1px solid #2a85fb;
+    border: 1px solid $primary;
 }
 
 .tax-engine .table.reconciliations-table .actions-dropdown-btn,
@@ -7919,11 +7543,11 @@ perfect-scrollbar > .ps > .ps-overlay {
     tbody
     > tr:hover
     .reconcile-row-action {
-    color: #2a85fb;
+    color: $primary;
 }
 
 .tax-engine .table.reconciliations-table .unrecognized-value {
-    color: #cb1119;
+    color: $red;
 }
 
 /*.tax-engine .table.reconciliations-table .recognized-value,
@@ -7932,18 +7556,18 @@ perfect-scrollbar > .ps > .ps-overlay {
 }*/
 
 .tax-engine .reconciliation-accepted {
-    color: #39c296;
+    color: $bright-green;
 }
 
 .zi-table.table thead > tr > th {
-    color: #263035;
+    color: $muzli;
     background: $white;
     font-weight: 700;
     font-size: 14px;
     text-transform: capitalize;
     -webkit-font-smoothing: antialiased;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-top: 1px solid $gainsboro;
+    border-bottom: 1px solid $gainsboro;
 }
 
 .subtabs-box1 {
@@ -7955,12 +7579,12 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .sub-filter-nav-band > ul > li.active > a .count {
-    color: #222;
+    color: $night-rider;
 }
 
 .tax-engine .table-striped > tbody > tr:nth-child(odd) > td,
 .tax-engine .table-striped > tbody > tr:nth-child(odd) > th {
-    background-color: #f9f9f9;
+    background-color: $gray-95;
 }
 
 .tax-engine .table-striped > tbody > tr:nth-child(even) > td,
@@ -7978,7 +7602,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .tax-engine .header-band {
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gainsboro;
     padding: 5px 0;
     margin-bottom: 15px;
 }
@@ -7992,12 +7616,12 @@ perfect-scrollbar > .ps > .ps-overlay {
 }
 
 .tax-engine .return-sel {
-    background-color: #f5f5f5;
+    background-color: $gray-95;
     border-radius: 18px;
     padding: 5px 15px;
     cursor: pointer;
     display: inline-block;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
 }
 
 .tax-engine svg.icon.filing-step-icon {
@@ -8017,7 +7641,7 @@ perfect-scrollbar > .ps > .ps-overlay {
 
 .tax-engine .gstr-transactions-summary .table > tbody > tr.row-hover:hover {
     cursor: pointer;
-    background-color: #fafafa;
+    background-color: $whisper-color;
 }
 
 .tax-engine
@@ -8050,11 +7674,11 @@ app-header {
 }
 
 .invalid-inp {
-    border: 2px solid red;
+    border: 2px solid $red;
 }
 
 .text-danger {
-    color: red;
+    color: $red;
 }
 
 #ngb-typeahead-1 {
@@ -8070,7 +7694,7 @@ app-header {
     padding-top: 26px;
 }
 
-.ml0 {
+.ml-0 {
     margin-left: 0px !important;
 }
 
@@ -8079,7 +7703,7 @@ app-header {
 }
 
 .text-warning {
-    color: #ffa000;
+    color: $bright-yellow;
 }
 
 .heightVH-100 {
@@ -8110,14 +7734,14 @@ app-header {
     background-color: transparent;
     border: none;
     display: block;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $very-light-gray;
     width: 100%;
     text-align: left;
     padding: 6px;
 }
 
 #form-place .dropdown-menu .dropdown-item:hover {
-    background-color: rgb(244, 245, 248);
+    background-color: $solitude;
 }
 
 /* sticky footer css merged */
@@ -8144,12 +7768,12 @@ app-header {
 
 .sticky-footer-sale-amount .totalSale h3 {
     font-size: 20px;
-    color: #8f9091;
+    color: $gray;
     padding-right: 13px;
 }
 
 .sticky-footer-sale-amount h2 {
-    color: #333333;
+    color: $night-rider;
     font-size: 32px;
     margin-top: 3px;
 }
@@ -8166,7 +7790,7 @@ app-header {
 }
 
 #middleBody .horizontal-form,
-.view_forms .horizontal-form {
+.view-forms .horizontal-form {
     max-width: 660px;
     width: 100%;
 }
@@ -8200,7 +7824,7 @@ app-header {
 }
 
 .selection-none-header *::selection {
-    background: #ffece094;
+    background: $chablis;
 }
 
 .word-break {
@@ -8208,11 +7832,11 @@ app-header {
     white-space: initial;
 }
 
-footer#footer.absoulte-footer {
+footer#footer.absolute-footer {
     padding-left: 15px;
 }
 
-.menu_open footer#footer.absoulte-footer {
+.menu_open footer#footer.absolute-footer {
     padding-left: 230px;
 }
 
@@ -8220,12 +7844,12 @@ footer#footer.absoulte-footer {
     position: relative;
 }
 
-.inventory-page footer#footer.absoulte-footer {
+.inventory-page footer#footer.absolute-footer {
     bottom: -60px;
     background-color: transparent !important;
 }
 
-.amountFiledCash.form-control[readonly] {
+.amount-filed-cash.form-control[readonly] {
     border: none;
     background-color: transparent !important;
 }
@@ -8259,11 +7883,11 @@ section.ledger-stat.sticky-footer.sticky-footer-sale-amount {
     padding-bottom: 0;
 }
 
-.noBrdRdsModal {
+.border-radius-0 {
     font-family: "opensans-regular";
 }
 
-.noBrdRdsModal small.mr-t.mrB.grey {
+.border-radius-0 small.mr-t05.mr-b05.grey {
     white-space: normal;
 }
 
@@ -8271,17 +7895,17 @@ div#getGroupModal {
     height: 100vh;
 }
 
-.templateView li .beta-img {
+.template-view li .beta-img {
     position: absolute;
     top: 10px;
     right: 10px;
 }
 
-.templateView li:first-child .beta-img {
+.template-view li:first-child .beta-img {
     display: none;
 }
 
-.templateView li .beta-img img {
+.template-view li .beta-img img {
     background-color: transparent;
     border: none;
 }
@@ -8294,14 +7918,14 @@ div#getGroupModal {
     line-height: 2;
 }
 
-.mailbox .modal-dialog.semdMailModal {
+.mailbox .modal-dialog.send-mail-modal {
     width: 100%;
     max-width: 695px;
     margin: 20px auto;
     padding: 0 15px;
 }
 
-.billing-address.disabled .stateField .form-control {
+.billing-address.disabled .state-field .form-control {
     background: transparent !important;
 }
 
@@ -8365,7 +7989,7 @@ ul#dropdown-nested li {
 }
 
 ul#dropdown-nested li a {
-    color: #333;
+    color: $night-rider;
 }
 
 ul#dropdown-nested li:hover .dropdown-menu {
@@ -8377,7 +8001,7 @@ ul#dropdown-nested li:hover .dropdown-menu {
 }
 
 ul#dropdown-nested .dropdown-menu li .dropdown-item {
-    color: #333;
+    color: $night-rider;
 }
 
 ul#dropdown-nested li:hover a,
@@ -8389,7 +8013,7 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
     padding-right: 0;
 }
 
-.paginationWrapper {
+.pagination-wrapper {
     padding: 20px 0;
     text-align: center;
     display: flex;
@@ -8403,7 +8027,7 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
     line-height: 1.5;
 }
 
-.company_gst:last-child {
+.company-gst:last-child {
     border-bottom: none;
 }
 
@@ -8417,7 +8041,7 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
     width: 0px;
     height: 0px;
     display: block;
-    border-top: 5px solid #bfbfbf;
+    border-top: 5px solid $gainsboro;
     border-bottom: 5px solid transparent;
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
@@ -8427,7 +8051,7 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
 }
 
 .welcome-header hr {
-    border-top-color: #b3b4b5;
+    border-top-color: $silver;
 }
 
 .btn-group-voucher-type label {
@@ -8435,14 +8059,14 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
     padding-left: 0 !important;
 }
 
-/* .custom-select input.form-control.selectedVal.cp {
+/* .custom-select input.form-control.selected-val.cp {
   padding-right: 0 !important;
 } */
 
-.welcome-container .select-box .custom-select input.form-control.selectedVal.cp,
+.welcome-container .select-box .custom-select input.form-control.selected-val.cp,
 .welcome-container .select-box input,
 .welcome-container .select-box textarea {
-    color: #333;
+    color: $night-rider;
 }
 
 .welcome-container input::placeholder {
@@ -8454,15 +8078,15 @@ ul#dropdown-nested .dropdown-menu li:hover .dropdown-item {
 }
 
 .agingPage .icon-pointer .fa.fa-long-arrow-up {
-    color: #a9a9a9;
+    color: $dim-gray;
 }
 
 .icon-pointer .fa.fa-long-arrow-up {
-    color: #a9a9a9;
+    color: $dim-gray;
 }
 
 span.red-text {
-    color: red;
+    color: $red;
 }
 
 #invoice-setting .nav > li > a:focus,
@@ -8476,7 +8100,7 @@ span.red-text {
 }
 
 .welcome-header hr {
-    border-top-color: #b3b4b5;
+    border-top-color: $silver;
 }
 
 .no-select {
@@ -8495,11 +8119,11 @@ span.red-text {
 }
 
 .icon-btn .btn-xs {
-    border: 1px solid #d6d6d6;
-    background-color: #eee;
+    border: 1px solid $gainsboro;
+    background-color: $whisper-light;
 }
 
-.modal.fade.openPoup.in.show {
+.modal.fade.open-popup.in.show {
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -8511,11 +8135,11 @@ span.red-text {
     font-size: 14px;
 }
 
-.selectCustomerName .scrollable-content > .item {
+.select-customer-name .scrollable-content > .item {
     height: 48px !important;
 }
 
-.add-companyDetail .add_mailer form {
+.add-company-detail .add-mailer form {
     padding-bottom: 60px;
 }
 
@@ -8602,24 +8226,24 @@ span.red-text {
 }
 
 .ratio-chart-block:first-child span.pie-text_center {
-    color: #2681ef;
+    color: $primary;
 }
 
 .ratio-chart-block:nth-child(2) span.pie-text_center {
-    color: #edaf12;
+    color: $vivid-orange;
 }
 
 .ratio-chart-block:nth-child(3) span.pie-text_center {
-    color: #f74074;
+    color: $violet-red;
 }
 
 .ratio-chart-block:nth-child(4) span.pie-text_center {
-    color: #27a264;
+    color: $java;
 }
 
 .dashboard-container input[type="checkbox"]:checked:after {
-    background-color: #5b64c9;
-    border: 1px solid #5b64c9;
+    background-color: $chetwode-blue;
+    border: 1px solid $chetwode-blue;
 }
 
 .dashboard-container input[type="checkbox"]:checked:before {
@@ -8627,7 +8251,7 @@ span.red-text {
 }
 
 .dashboard-container input[type="checkbox"]:after {
-    border: 1px solid #999999;
+    border: 1px solid $nobel;
 }
 
 .table-custom-invoice ul.dropdown-menu {
@@ -8657,7 +8281,7 @@ ul.dropdown-menu p.lead.pd {
 
 .dropdown-menu>li>a:hover {
     color: $chetwode-blue !important;
-    background: #eeeff9 !important;
+    background: $lavender !important;
 }
 
 .debit-blank-row td .form-control,
@@ -8716,19 +8340,19 @@ ul.dropdown-menu p.lead.pd {
 .btn-lg.btn-primary {
     min-width: 155px;
     background: $white;
-    color: #5b64c9;
+    color: $chetwode-blue;
     box-shadow: none;
 }
 
 .btn-lg.btn-primary:hover {
-    background: #5b64c9;
+    background: $chetwode-blue;
     color: $white;
-    box-shadow: 0px 4px 4px -3px #afabab;
+    box-shadow: 0px 4px 4px -3px $wistful;
     border-radius: 0px;
-    border-color: #5b64c9;
+    border-color: $chetwode-blue;
 }
 
-.asidePanelLedger button.btn.btn-lg.btn-primary {
+.aside-panel-ledger button.btn.btn-lg.btn-primary {
     min-width: 150px;
     font-size: 16px;
 }
@@ -8736,7 +8360,7 @@ ul.dropdown-menu p.lead.pd {
 .setting-page ul.nav.nav-tabs {
     margin-bottom: 15px;
     padding: 0 0px 0 15px !important;
-    background-color: #f7f8fa;
+    background-color: $alice-blue-light;
     z-index: 9;
     position: relative;
     top: -2px;
@@ -8759,7 +8383,7 @@ ul.dropdown-menu p.lead.pd {
     margin-right: 25px;
     padding-bottom: 7px;
     font-size: 14px;
-    color: #333 !important;
+    color: $night-rider !important;
 }
 
 .setting-page .nav > li > a:hover {
@@ -8821,7 +8445,6 @@ ul.dropdown-menu p.lead.pd {
     height: 36px !important;
     border-right: 1px solid $gainsboro !important;
     color: $nobel !important;
-    cursor: pointer;
 }
 
 .date-advance-search .input-group input.form-control {
@@ -8845,11 +8468,11 @@ ul.dropdown-menu p.lead.pd {
 }
 
 table.basic td {
-    color: #1c1c1c;
+    color: $nero;
 }
 
 .invoice-table td > a {
-    color: #1c1c1c;
+    color: $nero;
 }
 
 button.btn.btn-filter {
@@ -8860,17 +8483,17 @@ button.btn.btn-filter {
     top: -3px !important;
 }
 
-.welcome_outer #content-wrapper {
+.welcome-outer #content-wrapper {
     padding-left: 0;
 }
 
 .manage-account-popup.full-screen-modal.modal.fade .modal-dialog {
     transform: translateY(0) !important;
     margin: 0 auto;
-    padding:0 !important
+    padding:0 !important;
 }
 
-.manage-account-popup.full-screen-modal.modal.fade .width100{
+.manage-account-popup.full-screen-modal.modal.fade .width-100{
     width:100% !important;
     max-width: 100% !important;
 }
@@ -8888,7 +8511,7 @@ button.btn.btn-filter {
     transform: translate(0);
 }
 
-.dropdown-container .dropdown-menu li label.checkbox.oh.customItem span {
+.dropdown-container .dropdown-menu li label.checkbox.overflow-hidden.custom-item span {
     max-width: calc(100% - 35px);
     line-height: initial;
 }
@@ -8918,7 +8541,7 @@ button.btn.btn-filter {
 .form-group sup {
     font-size: 14px;
     top: 0;
-    color: red;
+    color: $red;
 }
 
 .aside-pane-form #asidePaneFormTabs ul.nav.nav-tabs {
@@ -8980,16 +8603,16 @@ button.ladda-button .ladda-label {
     color: $white;
 }
 
-.ng-select-wrap.liq.selectGroup .below {
-    border: 1px solid #ddd;
+.ng-select-wrap.select-list.select-group .below {
+    border: 1px solid $gainsboro;
     height: 36px;
     align-items: center;
     display: flex;
 }
 
-.ng-select-wrap.liq ng-select .below {
+.ng-select-wrap.select-list ng-select .below {
     width: 100% !important;
-    border: 1px solid #ddd;
+    border: 1px solid $gainsboro;
     height: 36px;
     display: flex;
     align-items: center;
@@ -9049,7 +8672,7 @@ p.remvBrnchName {
     display: inline;
 }
 
-.asidePanelLedger {
+.aside-panel-ledger {
     display: flex !important;
     vertical-align: middle;
     justify-content: center !important;
@@ -9060,37 +8683,37 @@ p.remvBrnchName {
     transform: translate(0) !important;
 }
 
-.asidePanelLedger .btn-lg:hover {
-    background-color: #5b64c9 !important;
-    border-color: #5b64c9 !important;
+.aside-panel-ledger .btn-lg:hover {
+    background-color: $chetwode-blue !important;
+    border-color: $chetwode-blue !important;
     color: $white !important;
 }
 
 .daterangepicker td.active,
 .daterangepicker td.active:hover {
-    background-color: #5864c9 !important;
+    background-color: $chetwode-blue !important;
 }
 
 .theme-green .bs-datepicker-head {
-    background-color: #5864c9;
+    background-color: $chetwode-blue;
 }
 
 .theme-green .bs-datepicker-body table td span.selected,
 .theme-green .bs-datepicker-body table td.selected span,
 .theme-green .bs-datepicker-body table td span[class*="select-"]:after,
 .theme-green .bs-datepicker-body table td[class*="select-"] span:after {
-    background-color: #5864c9;
+    background-color: $chetwode-blue;
 }
 
 .bs-datepicker-body table.days td.active:not(.select-start):before,
 .bs-datepicker-body table.days td.in-range:not(.select-start):before,
 .bs-datepicker-body table.days span.active:not(.select-start):before,
 .bs-datepicker-body table.days span.in-range:not(.select-start):before {
-    background: #ebedff;
+    background: $lavender-light;
 }
 
 .theme-green .bs-datepicker-body table td.week span {
-    color: #5864c9;
+    color: $chetwode-blue;
 }
 
 .mobileNumberWidth .menu {
@@ -9107,7 +8730,7 @@ p.remvBrnchName {
     margin-bottom: 10px;
 }
 
-.contactForm .mobileNumberWidth input {
+.contact-form .mobileNumberWidth input {
     padding-right: 0 !important;
 }
 
@@ -9145,13 +8768,13 @@ p.remvBrnchName {
     width: 100%;
 }
 
-.createAccForm li.highlighted.selected,
-.createAccForm li.highlighted {
-    background-color: #eeeff9 !important;
+.create-acc-form li.highlighted.selected,
+.create-acc-form li.highlighted {
+    background-color: $lavender !important;
 }
 
-.createAccForm li.highlighted.selected .account-list-item,
-.createAccForm li.highlighted .account-list-item {
+.create-acc-form li.highlighted.selected .account-list-item,
+.create-acc-form li.highlighted .account-list-item {
     color: $chetwode-blue !important;
 }
 
@@ -9404,7 +9027,7 @@ ngx-daterangepicker-material {
             justify-content: space-between;
             padding-top: 30px;
             padding-bottom: 20px;
-            border-bottom: 1px solid $whisper-color;
+            border-bottom: 1px solid $gainsboro;
             margin-bottom: 15px;
             span {
                 padding: 5px 10px;
@@ -9620,7 +9243,7 @@ span#HW_badge_cont:nth-child(3) {
 .select-border-bottom {
     .form-control {
         border: none;
-        border-bottom: 1px solid #d9d9d9;
+        border-bottom: 1px solid $gainsboro;
         width: 100%;
     }
 }
@@ -9852,6 +9475,23 @@ span#HW_badge_cont:nth-child(3) {
     font-size: 24px;
     top:56px !important;
 }
+.change-address-dropdown a {
+    color: $deep-sky-blue;
+    font-size: 12px;
+}
+.change-address-dropdown li {
+    border-bottom: 1px solid $very-light-gray;
+    padding-bottom: 4px;
+}
+.change-address-dropdown li:last-child {
+    border: none;
+}
+
+.transaction-list-sh-select input{
+    min-height: 49px;
+    height: 49px;
+    border: 0 none !important;
+}
 /* responsive */
 ul.dropdown-menu.action-dropdown {
     left: auto;
@@ -9895,7 +9535,6 @@ ul.dropdown-menu.action-dropdown {
 .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button, .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{
     width: 26px;
     height: 26px;
-    margin-right: 6px
 }
 .mat-form-field-appearance-fill:not(.mat-form-field-disabled) .mat-form-field-flex:hover~.mat-form-field-underline .mat-form-field-ripple{
     opacity: 0 !important;
@@ -9946,7 +9585,11 @@ input.mat-input-element{
 .delete-modal-overlay {
     z-index: 9992; /*for delete custom zIndex modal*/
 }
-/* responsive */
+.custom-select{
+    background-image: none !important;
+}
+/* responsive  starts here */
+
 @media (max-width: 1440px) {
     .font-xxlarge {
         font-size: 20px;
@@ -9974,7 +9617,7 @@ input.mat-input-element{
         width: 90%;
         margin: 0 auto;
     }
-    .auto_save {
+    .auto-save {
         top: 96px;
     }
     #setting-tab .tab-container .nav.nav-tabs {
@@ -9994,19 +9637,19 @@ input.mat-input-element{
         float: left;
         margin-bottom: 0px;
     }
-    #setting-tab .tab-integraton .nav.nav-tabs {
+    #setting-tab .tab-integration .nav.nav-tabs {
         overflow: auto;
         white-space: initial;
         width: 100%;
         margin: 0 auto;
         display: block;
     }
-    #setting-tab .tab-integraton .nav-tabs > li {
+    #setting-tab .tab-integration .nav-tabs > li {
         width: 100px;
         margin-bottom: 20px;
         margin-right: 10px;
     }
-    #setting-tab .tab-integraton .nav-tabs > li > a {
+    #setting-tab .tab-integration .nav-tabs > li > a {
         width: 90px;
         height: 90px !important;
         font-size: 14px;
@@ -10014,15 +9657,15 @@ input.mat-input-element{
     .groups-buttons {
         height: auto;
     }
-    #setting-tab-wrapper .tab-integraton .nav-tabs {
+    #setting-tab-wrapper .tab-integration .nav-tabs {
         display: inline-block;
         width: 100%;
         white-space: nowrap;
     }
-    #setting-tab-wrapper .purchase-setting-tab.tab-integraton .nav-tabs{
+    #setting-tab-wrapper .purchase-setting-tab.tab-integration .nav-tabs{
             display: inline-flex;
         }
-    #setting-tab-wrapper .tab-integraton .nav-tabs > li > a {
+    #setting-tab-wrapper .tab-integration .nav-tabs > li > a {
         width: 90px;
         height: 90px;
         font-size: 14px;
@@ -10088,7 +9731,7 @@ input.mat-input-element{
     }
     .grp-list {
         padding: 0px;
-        background: #f4f5f8;
+        background: $solitude;
         width: 100%;
         display: block;
     }
@@ -10123,7 +9766,7 @@ input.mat-input-element{
     }
     .stock-lists {
         position: absolute;
-        box-shadow: 0 3px 6px #ccc;
+        box-shadow: 0 3px 6px $very-light-gray;
         background: $white;
         min-width: 200px;
         display: inline-block;
@@ -10167,10 +9810,10 @@ input.mat-input-element{
 }
 
 @media (max-width: 840px) {
-    .card-invoiceTable
+    .card-invoice-table
         #tax-control-multi-select.multi-select
         input.form-control[readonly],
-    .card-invoiceTable .multi-select input.form-control {
+    .card-invoice-table .multi-select input.form-control {
         background-position: 98% !important;
     }
     .single-card-row .my-dropdown-menu.pd {
@@ -10184,20 +9827,20 @@ input.mat-input-element{
         left: auto;
         right: 0 !important;
     }
-    #setting-tab .tab-integraton .nav-tabs {
+    #setting-tab .tab-integration .nav-tabs {
         padding-top: 0 !important;
     }
-    #setting-tab .tab-integraton .nav-tabs > li > a {
+    #setting-tab .tab-integration .nav-tabs > li > a {
         width: 70px;
         height: 70px !important;
     }
-    .tab-integraton .nav-tabs > li > a > span {
+    .tab-integration .nav-tabs > li > a > span {
         font-size: 22px;
     }
-    .tab-integraton .nav-tabs > li > a span:first-child {
+    .tab-integration .nav-tabs > li > a span:first-child {
         display: none;
     }
-    #setting-tab .tab-integraton .nav-tabs > li {
+    #setting-tab .tab-integration .nav-tabs > li {
         width: 70px;
         margin-bottom: 15px;
     }
@@ -10212,7 +9855,7 @@ input.mat-input-element{
     .basic > thead > tr th:first-child {
         border-left: none !important;
     }
-    .auto_save {
+    .auto-save {
         top: 124px;
     }
     .justify-content-sm-start {
@@ -10225,7 +9868,7 @@ input.mat-input-element{
         text-align: left;
         margin-bottom: 10px;
     }
-    .paginationWrapper {
+    .pagination-wrapper {
         margin-top: 20px;
         border: none;
         background-color: transparent;
@@ -10264,7 +9907,7 @@ input.mat-input-element{
         margin-bottom: 0;
     }
     #middleBody .horizontal-form,
-    .view_forms .horizontal-form {
+    .view-forms .horizontal-form {
         max-width: 100%;
         width: 100%;
     }
@@ -10361,7 +10004,7 @@ input.mat-input-element{
         margin-bottom: 15px;
         padding: 0 0px 0 15px !important;
     }
-    #setting-tab .tab-integraton .nav-tabs > li {
+    #setting-tab .tab-integration .nav-tabs > li {
         margin-top: 0 !important;
     }
     .hamburger-menu-icon{
@@ -10516,7 +10159,7 @@ input.mat-input-element{
         display: none;
     }
     .card-table tbody tr {
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: 1px solid $gainsboro;
     }
     .card-table,
     .card-table tbody,
@@ -10643,7 +10286,7 @@ input.mat-input-element{
     }
     .tax-engine .list-filter {
         padding: 15px !important;
-        border-bottom: 1px solid #ddd !important;
+        border-bottom: 1px solid $gainsboro !important;
         height: auto;
     }
     .list-style ul.list-inline.list-middle.download-drop-down {
@@ -10653,10 +10296,10 @@ input.mat-input-element{
     .radio-custom-label {
         display: inline;
     }
-    #cmpWrp {
+    #company-wrap {
         display: block;
     }
-    .company-text span.c-name {
+    .company-text span.company-name {
         color: $white !important;
     }
     .user-dropdown-header {
@@ -10751,7 +10394,7 @@ input.mat-input-element{
     .hide-scroll-body:last-child .modal {
         z-index: 9993;
     }
-    .page-has-tabs .invoice-genrate-container,
+    .page-has-tabs .invoice-generate-container,
     .page-has-tabs .invoice-container{
         padding-top: 5px !important;
     }
@@ -10920,13 +10563,13 @@ input.mat-input-element{
         margin-top: 10px;
         margin-bottom: 5px;
     }
-    .welcome_header h1 {
+    .welcome-header h1 {
         font-size: 25px !important;
     }
-    .welcome_header:after {
+    .welcome-header:after {
         bottom: 0;
     }
-    #setting-tab-wrapper .tab-integraton .nav-tabs {
+    #setting-tab-wrapper .tab-integration .nav-tabs {
         overflow-y: hidden;
     }
 }
@@ -10980,11 +10623,6 @@ input.mat-input-element{
     .form-bg {
         width: 100%;
     }
-    /* .col-wrapper:nth-child(1) {
-                     position: relative;
-                     height: auto;
-                     width: 100%;
-                    } */
     .grp-col {
         float: none !important;
         width: 100% !important;
@@ -11003,7 +10641,7 @@ input.mat-input-element{
     }
     .grp-list {
         padding: 10px 0px !important;
-        background: #f4f5f8;
+        background: $solitude;
         width: 100%;
         display: block;
     }
@@ -11038,7 +10676,7 @@ input.mat-input-element{
         background-color: $white;
     }
     .breadcrumbs {
-        border-top: 1px solid #ccc;
+        border-top: 1px solid $very-light-gray;
     }
     #getGroupModal #middleBody {
         height: 100%;
@@ -11059,10 +10697,10 @@ input.mat-input-element{
     .col-wrapper.left-account-operation:nth-child(3),
     .col-wrapper.left-account-operation:nth-child(2),
     .col-wrapper.left-account-operation:nth-child(4) {
-        border-top: 1px solid #ddd;
+        border-top: 1px solid $gainsboro;
     }
     .manage-account-popup.modal {
-        background-color: #f4f5f8;
+        background-color: $solitude;
         opacity: 1;
     }
     .manage-account-popup .modal-content.full-screen-modal {
@@ -11086,15 +10724,15 @@ input.mat-input-element{
 }
 
 @media only screen and (max-width: 480px) {
-    td.pItem.price .my-dropdown-menu {
+    td.item-padding.price .my-dropdown-menu {
         width: 180px !important;
     }
     /* manage group account*/
-    .add-manage-group-acc .getGroupModal .breadcrumbs .col-xs-8,
-    .add-manage-group-acc .getGroupModal .breadcrumbs .col-xs-4 {
+    .add-manage-group-acc .get-group-modal .breadcrumbs .col-xs-8,
+    .add-manage-group-acc .get-group-modal .breadcrumbs .col-xs-4 {
         width: 100%;
     }
-    .add-manage-group-acc .getGroupModal .breadcrumbs .col-xs-4 {
+    .add-manage-group-acc .get-group-modal .breadcrumbs .col-xs-4 {
         margin-top: 5px;
     }
     .HW_frame_cont.HW_visible.HW_bottom{
diff --git a/apps/web-giddh/src/assets/css/style-magic.css b/apps/web-giddh/src/assets/css/style-magic.css
index 2312394f441..5deda7da5d0 100644
--- a/apps/web-giddh/src/assets/css/style-magic.css
+++ b/apps/web-giddh/src/assets/css/style-magic.css
@@ -183,7 +183,7 @@ a {
 
 /*typography*/
 
-/*.bold,.c-name,.fw600,.dshUl li .title, .dGryHead, .page-title, .total, .stock-grp-list>li>a, label.boldHead, .table-l tr:last-child, .table-container > section > div.row > div:first-child,.account-card > .balances > span.title, .gTblHead, .gTblFoot, .table.invGenTbl > tfoot > tr > th.bold,.widget-text h1, .widget-text h2,.widget-text h3,.widget-text h4,.widget-text h5,.widget-text h6, .a4-section span.bold,.a4-section span.bold span,.ledger-container table th,.midlight_info,.tcount,.subAccBox li a, .load-more, .company-name, .basic>thead>tr>th {
+/*.bold,.company-name,.fw600,.dshUl li .title, .dGryHead, .page-title, .total, .stock-grp-list>li>a, label.boldHead, .table-l tr:last-child, .table-container > section > div.row > div:first-child,.account-card > .balances > span.title, .head-block-head, .head-block-foot, .table.invGenTbl > tfoot > tr > th.bold,.widget-text h1, .widget-text h2,.widget-text h3,.widget-text h4,.widget-text h5,.widget-text h6, .a4-section span.bold,.a4-section span.bold span,.ledger-container table th,.midlight_info,.tcount,.subAccBox li a, .load-more, .company-name, .basic>thead>tr>th {
 font-family: Roboto-Bold;
 } */
 
@@ -288,12 +288,12 @@ aside-menu-account .container-fluid {
     color: #fff;
 }
 
-#cmpWrp {
+#company-wrap {
     padding-top: 0;
     padding-bottom: 0;
 }
 
-#cmpWrp i {
+#company-wrap i {
     float: left;
     margin: 15px 0;
 }
@@ -302,7 +302,7 @@ aside-menu-account .container-fluid {
   display: block;
 } */
 
-/* .c-name {
+/* .company-name {
     line-height: 20px;
     min-width: 130px;
     text-transform: uppercase;
@@ -451,7 +451,7 @@ aside-menu-account .container-fluid {
     padding-right: 0;
 }
 
-.pdR0 {
+.pr-0 {
     padding-right: 0 !important;
 }
 
@@ -479,43 +479,43 @@ aside-menu-account .container-fluid {
     padding: 10px;
 }
 
-.pd15 {
+.pd-15 {
     padding: 15px;
 }
 
-.pd2 {
+.pd-2 {
     padding: 20px;
 }
 
-.pd3 {
+.pd-3 {
     padding: 30px;
 }
 
-.pd4 {
+.pd-4 {
     padding: 40px;
 }
 
-.pdT {
+.pd-t05 {
     padding-top: 5px;
 }
 
-.pdB {
+.pd-b05 {
     padding-bottom: 5px;
 }
 
-.pdL {
+.pd-l05 {
     padding-left: 5px;
 }
 
-.pdL0 {
+.pl-0 {
     padding-left: 0;
 }
 
-.pdR {
+.pd-r05 {
     padding-right: 5px;
 }
 
-.pdR0 {
+.pr-0 {
     padding-right: 0;
 }
 
@@ -523,8 +523,8 @@ aside-menu-account .container-fluid {
     padding-top: 10px;
 }
 
-.pdT2,
-.pdT3 {
+.pd-t2,
+.pd-t3 {
     padding-top: 20px;
 }
 
@@ -544,55 +544,55 @@ aside-menu-account .container-fluid {
     padding-right: 10px;
 }
 
-.pdB2 {
+.pd-b2 {
     padding-bottom: 20px;
 }
 
-.pdL2 {
+.pd-l2 {
     padding-left: 20px;
 }
 
-.pdR2 {
+.pd-r2 {
     padding-right: 20px;
 }
 
-.pdB3 {
+.pd-b3 {
     padding-bottom: 30px;
 }
 
-.pdL3 {
+.pd-l3 {
     padding-left: 30px;
 }
 
-.pdR3 {
+.pd-r3 {
     padding-right: 30px !important;
 }
 
-.pdT4 {
+.pd-t4 {
     padding-top: 30px;
 }
 
-.pdT5 {
+.pd-t5 {
     padding-top: 30px;
 }
 
-.pdB4 {
+.pd-b4 {
     padding-bottom: 40px;
 }
 
-.pdL4 {
+.pd-l4 {
     padding-left: 40px;
 }
 
-.pdR4 {
+.pd-r4 {
     padding-right: 40px;
 }
 
-.pd0 {
+.p-0 {
     padding: 0;
 }
 
-.mr0 {
+.m-0 {
     margin: 0;
 }
 
@@ -600,39 +600,39 @@ aside-menu-account .container-fluid {
     margin: 5px;
 }
 
-.mr1 {
+.m-10 {
     margin: 10px;
 }
 
-.mr15 {
+.mr-r15 {
     margin: 15px;
 }
 
-.mr2 {
+.m-20 {
     margin: 20px;
 }
 
-.mr3 {
+.m-30 {
     margin: 30px;
 }
 
-.mr4 {
+.m-40 {
     margin: 40px;
 }
 
-.mr-t {
+.mr-t05 {
     margin-top: 5px;
 }
 
-.mrB {
+.mr-b05 {
     margin-bottom: 5px !important;
 }
 
-.mrL {
+.mr-l05 {
     margin-left: 5px;
 }
 
-.mrR {
+.mr-r05 {
     margin-right: 5px;
 }
 
@@ -656,7 +656,7 @@ aside-menu-account .container-fluid {
     margin-left: 15px;
 }
 
-.mrR1 {
+.mr-r1 {
     margin-right: 10px;
 }
 
@@ -668,27 +668,27 @@ aside-menu-account .container-fluid {
     margin-bottom: 20px;
 }
 
-.mrL2 {
+.mr-l2 {
     margin-left: 20px;
 }
 
-.mrR2 {
+.mr-r2 {
     margin-right: 20px;
 }
 
-.mrT3 {
+.mr-t3 {
     margin-top: 30px;
 }
 
-.mrB3 {
+.mr-b3 {
     margin-bottom: 30px;
 }
 
-.mrL3 {
+.mr-l3 {
     margin-left: 30px;
 }
 
-.mrR3 {
+.mr-r3 {
     margin-right: 30px;
 }
 
@@ -696,19 +696,19 @@ aside-menu-account .container-fluid {
     margin-top: 40px;
 }
 
-.mrT5 {
+.mr-t5 {
     margin-top: 50px;
 }
 
-.mrB4 {
+.mr-b4 {
     margin-bottom: 40px;
 }
 
-.mrL4 {
+.mr-l4 {
     margin-left: 40px;
 }
 
-.mrR4 {
+.mr-r4 {
     margin-right: 40px;
 }
 
@@ -716,23 +716,23 @@ aside-menu-account .container-fluid {
     border: 1px solid #ccc;
 }
 
-.bdrN {
+.border-none {
     border: none;
 }
 
-.bdrT {
+.bd-rt {
     border-top: 1px solid #ccc;
 }
 
-.bdrB {
+.bd-rb {
     border-bottom: 1px solid #ccc;
 }
 
-.bdrL {
+.bd-rl {
     border-left: 1px solid #ccc;
 }
 
-.bdrR {
+.bd-rr {
     border-right: 1px solid #ccc !important;
 }
 
@@ -752,7 +752,7 @@ aside-menu-account .container-fluid {
     position: fixed;
 }
 
-.witClr {
+.white-color {
     color: #fff;
 }
 
@@ -760,68 +760,68 @@ aside-menu-account .container-fluid {
     color: #777;
 }
 
-.greyBg {
+.grey-bg {
     background: #f5f5f5;
     /*min-width:320px;*/
 }
 
-.witBg {
+.white-bg {
     background: #fff;
 }
 
-.transBg {
+.transparent-bg {
     background: 0 0;
 }
 
-.oh {
+.overflow-hidden {
     overflow: hidden;
 }
 
-.oyAuto {
+.overflow-y-auto {
     overflow-y: auto;
 }
 
-.oxAuto {
+.overflow-x-auto {
     overflow-x: auto;
 }
 
-.rn {
+.resize-none {
     resize: none;
 }
 
-.ln {
+.list-style-none {
     list-style: none;
 }
 
-.txtUpc {
+.text-uppercase {
     text-transform: uppercase;
 }
 
-.txt-lwc {
+.text-lowercase {
     text-transform: lowercase;
 }
 
-.txtCpc {
+.text-capitalize {
     text-transform: capitalize;
 }
 
-.td-undr {
+.text-underline {
     text-decoration: underline;
 }
 
-.alR {
+.text-right {
     text-align: right;
 }
 
-.alL {
+.text-left {
     text-align: left;
 }
 
-.alC {
+.text-center {
     text-align: center;
 }
 
-.ellp {
+.text-ellipsis {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -839,12 +839,12 @@ aside-menu-account .container-fluid {
     font-size: 16px;
 }
 
-.scrClass {
+.scroll-class {
     /* overflow: hidden;
 position: relative; */
 }
 
-.scrItem {
+.scroll-item {
     overflow: auto;
     position: relative;
 }
@@ -874,29 +874,29 @@ position: relative; */
 
 /*companylist div style*/
 
-.companyList li {
+.company-list li {
     min-height: 49px;
     border-bottom: 1px solid #e5e5e5;
     position: relative;
     padding-top: 4px;
 }
 
-.companyList li:hover {
+.company-list li:hover {
     background: #fafafa;
 }
 
-.companyList li.active {
+.company-list li.active {
     background: #ddd;
 }
 
-.companyList > li > a {
+.company-list > li > a {
     color: #777;
     position: absolute;
     right: 40px;
     left: 10px;
 }
 
-.companyList li h3 {
+.company-list li h3 {
     padding: 4px 0 2px;
     color: #333;
     font-size: 14px;
@@ -906,11 +906,11 @@ position: relative; */
     font-size: 11px;
 }
 
-.companyList .ui-icon {
+.company-list .ui-icon {
     margin: 4px 4px 20px;
 }
 
-.companyList li .action {
+.company-list li .action {
     right: 10px;
     position: absolute;
     opacity: 0.3;
@@ -919,13 +919,13 @@ position: relative; */
     top: 15px;
 }
 
-.companyList li:hover .action {
+.company-list li:hover .action {
     opacity: 1;
 }
 
 /*manage company detail*/
 
-.greyBox {
+.grey-box {
     color: #444;
     background: #f3f3f3;
     border: solid 1px #ddd;
@@ -933,7 +933,7 @@ position: relative; */
     padding: 15px;
 }
 
-.delIcon {
+.delete-icon {
     float: right;
     width: 34px;
     height: 34px;
@@ -941,7 +941,7 @@ position: relative; */
     cursor: pointer;
 }
 
-.delIcon .glyphicon {
+.delete-icon .glyphicon {
     left: 9px;
     top: 9px;
 }
@@ -967,7 +967,7 @@ position: relative; */
 
 /*modal settings override*/
 
-.noBrdRdsModal .modal-content {
+.border-radius-0 .modal-content {
     border-radius: 0;
 }
 
@@ -999,7 +999,7 @@ position: relative; */
     -webkit-overflow-scrolling: touch;
 }
 
-#getGroupModal.getGroupModal #middleBody {
+#getGroupModal.get-group-modal #middleBody {
     height: auto;
 }
 .scroll-btn {
@@ -1022,23 +1022,23 @@ position: relative; */
     padding: 9px 20px;
 }
 
-.fs13 {
+.font-13 {
     font-size: 13px;
 }
 
-.fs14 {
+.font-14 {
     font-size: 14px;
 }
 
-.fs16 {
+.font-16 {
     font-size: 16px;
 }
 
-.fs18 {
+.font-18 {
     font-size: 18px;
 }
 
-.fs20 {
+.font-20 {
     font-size: 20px;
 }
 
@@ -1126,20 +1126,20 @@ li:last-child .angular-ui-tree-handle {
     border-bottom: 1px solid gray;
 }
 
-.acntListDiv .list-group-item {
+.account-list-div .list-group-item {
     padding: 6px 10px;
     border-left: 0;
     border-right: 0;
 }
 
-.acntListDiv .list-group-item-heading,
-.acntListDiv .list-group {
+.account-list-div .list-group-item-heading,
+.account-list-div .list-group {
     margin-bottom: 0;
     line-height: 20px;
 }
 
-.acntListDiv .list-group-item:first-child,
-.acntListDiv .list-group-item:last-child {
+.account-list-div .list-group-item:first-child,
+.account-list-div .list-group-item:last-child {
     border-radius: 0;
 }
 
@@ -1272,26 +1272,26 @@ li:last-child .angular-ui-tree-handle {
 
 /*account list menus*/
 
-.acntAccordion {
+.account-accordion {
     font-size: 12px;
 }
 
-.acntAccordion a {
+.account-accordion a {
     color: #333;
 }
 
-.acntAccordion .title a {
+.account-accordion .title a {
     display: block;
     padding: 0 15px;
     cursor: pointer;
 }
 
-.acntAccordion > li > ul > li > ul > li {
+.account-accordion > li > ul > li > ul > li {
     line-height: 0;
     list-style: none;
 }
 
-.acntAccordion > li > ul > li > ul > li > a > div {
+.account-accordion > li > ul > li > ul > li > a > div {
     overflow: hidden;
 }
 
@@ -1411,7 +1411,7 @@ li:last-child .angular-ui-tree-handle {
     opacity: 0.8;
 }
 
-.eLedgEntryForm .popover {
+.eledger-entry-form .popover {
     z-index: 10;
 }
 
@@ -1419,12 +1419,12 @@ li:last-child .angular-ui-tree-handle {
     margin-bottom: 0;
 }
 
-.ledgerTable.table .nopad {
+.ledger-table.table .nopad {
     padding: 0 !important;
 }
 
-.greyBg td,
-.greyBg th {
+.grey-bg td,
+.grey-bg th {
     background-color: #f5f5f5;
 }
 
@@ -1433,86 +1433,86 @@ li:last-child .angular-ui-tree-handle {
     color: #fff;
 }
 
-.ledgerBodyContent td {
+.ledger-body-content td {
     padding: 0 !important;
 }
 
-.ledgerBodyContent input.nobdr {
+.ledger-body-content input.nobdr {
     width: 100%;
     border: 0;
     padding: 8px;
     background-color: #fff;
 }
 
-.ledgerBodyContent input.nobdr.error {
+.ledger-body-content input.nobdr.error {
     border: 1px solid #a94442;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 }
 
-.ldgrInnerTbl .dropdown-menu > li > a {
+.ledger-inner-table .dropdown-menu > li > a {
     display: block;
     cursor: pointer;
 }
 
-.ledgerBodyContent .table.ldgrInnerTbl {
+.ledger-body-content .table.ledger-inner-table {
     border-top: 0 !important;
 }
 
-.ldgrInnerTbl > tbody > tr > td {
+.ledger-inner-table > tbody > tr > td {
     border-right: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
     border-top: 0px;
 }
 
-.ldgrInnerTbl > tbody > tr > td:last-child {
+.ledger-inner-table > tbody > tr > td:last-child {
     border-right: 0;
 }
 
-.ledgerTable.table tfoot td {
+.ledger-table.table tfoot td {
     border-bottom: 1px solid #ddd;
 }
 
-.ldgTheadL span,
-.ldgTheadL .ledgerHead {
+.ledger-top-header-left span,
+.ledger-top-header-left .ledger-main-head {
     float: left;
     display: block;
 }
 
 .ldgTheadR span,
-.ldgTheadR .ledgerHead {
+.ldgTheadR .ledger-main-head {
     float: right;
     display: block;
 }
 
-.ledgerHead span {
+.ledger-main-head span {
     display: inline-block;
     line-height: 48px;
     font-size: 18px;
 }
 
-.ledgerHead .ellp {
+.ledger-main-head .text-ellipsis {
     text-transform: capitalize;
     max-width: 200px;
 }
 
-.popover.ledgerPopDiv {
+.popover.ledger-popover-div {
     z-index: 3 !important;
 }
 
-.popover.ledgerPopDiv > .arrow {
+.popover.ledger-popover-div > .arrow {
     border-width: 21px;
 }
 
-.popover.ledgerPopDiv.bottom > .arrow::after {
+.popover.ledger-popover-div.bottom > .arrow::after {
     margin-left: -20px;
     top: -19px;
 }
 
-.popover.ledgerPopDiv > .arrow::after {
+.popover.ledger-popover-div > .arrow::after {
     border-width: 20px;
 }
 
-.popover.ledgerPopDiv.bottom > .arrow {
+.popover.ledger-popover-div.bottom > .arrow {
     margin-left: -21px;
     top: -42px;
 }
@@ -1522,11 +1522,11 @@ li:last-child .angular-ui-tree-handle {
     display: inline-block;
 }
 
-.ledgerBodyContent .highlightRow input.nobdr {
+.ledger-body-content .highlightRow input.nobdr {
     background-color: #ffffcc;
 }
 
-.ledgerBodyContent .newMultiEntryRow input.nobdr {
+.ledger-body-content .newMultiEntryRow input.nobdr {
     background-color: #e3fadc;
 }
 
@@ -1580,7 +1580,7 @@ li:last-child .angular-ui-tree-handle {
     max-width: 350px;
 }
 
-.max500 {
+.max-width-500 {
     max-width: 500px;
 }
 
@@ -1641,17 +1641,17 @@ li:last-child .angular-ui-tree-handle {
     float: none;
 }
 
-.plBtTbl th {
+.pl-bs-tb th {
     color: #000;
     font-size: 16px;
     font-weight: 400 !important;
 }
 
-.plBtTbl thead {
+.pl-bs-tb thead {
     background: #e0e0e0;
 }
 
-.plBtTbl tfoot {
+.pl-bs-tb tfoot {
     background: #f7f7f7;
 }
 
@@ -2215,7 +2215,7 @@ z-index: 9;
     display: none;
 }
 
-.profitLoss.table-container > div > section {
+.profit-loss.table-container > div > section {
     border-left: 1px solid #e0e0e0;
 }
 
@@ -2307,7 +2307,7 @@ table:focus {
     max-width: 110px;
 }
 
-.mart100 {
+.mt-100 {
     margin-top: 100px;
 }
 
@@ -2326,11 +2326,11 @@ table:focus {
 
 /*tbpl list*/
 
-.tbplList .list-inline {
+.tbpl-list .list-inline {
     line-height: normal;
 }
 
-.tbplList .circle {
+.tbpl-list .circle {
     vertical-align: sub;
 }
 
@@ -2366,7 +2366,7 @@ i.cls-alert {
     font-size: 18px;
 }
 
-.width100 {
+.width-100 {
     width: 100%;
 }
 
@@ -2531,7 +2531,7 @@ padding: 0;
     overflow: hidden;
 }
 
-.pos-rel {
+.position-relative {
     position: relative !important;
 }
 
@@ -2748,42 +2748,42 @@ background: #f9f9f9;
 
 /*div table*/
 
-.gTbl {
+.head-block {
     display: table;
     width: 100%;
 }
 
-.gTblRow {
+.head-block-row {
     display: table-row;
 }
 
-.gTblHead {
+.head-block-head {
     display: table-header-group;
     background-color: #ddd;
 }
 
-.gTblCell,
-.gTblHead {
+.head-block-cell,
+.head-block-head {
     display: table-cell;
     padding: 8px;
     border: 1px solid #ddd;
 }
 
-.gTblHead {
+.head-block-head {
     display: table-header-group;
     background-color: #ddd;
 }
 
-.gTblFoot {
+.head-block-foot {
     display: table-footer-group;
     background-color: #ddd;
 }
 
-.gTblBody {
+.head-block-body {
     display: table-row-group;
 }
 
-.gTbl .gTblRow:nth-of-type(odd) {
+.head-block .head-block-row:nth-of-type(odd) {
     background-color: #f9f9f9;
 }
 
@@ -2854,24 +2854,24 @@ input.isNotEditable:disabled {
     clear: both;
 }
 
-.taxTable {
+.tax-table {
     min-width: 860px;
 }
 
-.taxTable.table > tbody > tr > td,
-.taxTable.table > tbody > tr > th {
+.tax-table.table > tbody > tr > td,
+.tax-table.table > tbody > tr > th {
     vertical-align: middle;
 }
 
-.taxTable tbody tr td input.form-control {
+.tax-table tbody tr td input.form-control {
     border-radius: 0;
 }
 
-.taxTable tbody tr td select.form-control {
+.tax-table tbody tr td select.form-control {
     border-radius: 0;
 }
 
-.taxTable tbody tr td a {
+.tax-table tbody tr td a {
     display: block;
     overflow: hidden;
     margin: 5px;
@@ -2883,7 +2883,7 @@ table.nopad th {
 }
 
 table.nopad td .form-control,
-.taxTable.table .form-control {
+.tax-table.table .form-control {
     width: 100%;
 }
 
@@ -2938,11 +2938,11 @@ table td.nopad {
     cursor: pointer;
 }
 
-.table-striped .selectedForInv {
+.table-striped .selected-for-inv {
     background-color: #cce7e7 !important;
 }
 
-.table-bordered > tbody > tr.selectedForInv > td {
+.table-bordered > tbody > tr.selected-for-inv > td {
     border-color: #b7cfcf;
 }
 
@@ -3165,18 +3165,18 @@ ul.pills li {
     padding-left: 20px !important;
 }
 
-.t-h-bg1 th {
+.thead-background1 th {
     background: #5c534d;
     color: #fff;
 }
 
-.t-h-bg2 th,
-.t-h-bg2 td {
+.thead-background1 th,
+.thead-background1 td {
     background: #e6e6e6;
 }
 
-.t-h-bg3 th,
-.t-h-bg3 td {
+.thead-background3 th,
+.thead-background3 td {
     background: #f5f5f5;
     color: #333;
 }
@@ -3242,13 +3242,13 @@ ul.pills li {
 .h32 {
     height: 32px;
 }
-.compoundEntry td,
-.compoundEntry td input{
+.compound-entry td,
+.compound-entry td input{
     background-color: transparent !important;
 }
 
-.compoundEntry td:hover,
-.compoundEntry td input:hover {
+.compound-entry td:hover,
+.compound-entry td input:hover {
     background: transparent !important;
 }
 
@@ -3518,7 +3518,7 @@ ul.pills li {
     border-top: 2px solid #5c534d;
 }
 
-.pos-rel {
+.position-relative {
     position: relative;
 }
 
@@ -3806,7 +3806,7 @@ tr.db-bnk-account > td.reconnectDiv {
     z-index: 1000;
 }
 
-.dashboard-reconnectdiv {
+.dashboard-reconnect-block {
     background: rgba(255, 255, 255, 0.9);
     position: absolute;
     height: 100%;
@@ -3824,19 +3824,19 @@ tr.db-bnk-account > td.reconnectDiv {
     padding-top: 40px;
 }
 
-.longcode-details {
+.long-code-details {
     margin-top: 10px;
 }
 
-.longcode-details figure {
+.long-code-details figure {
     margin-left: 8px;
 }
 
-.longcode-details figure ul {
+.long-code-details figure ul {
     padding: 0 20px;
 }
 
-.longcode-details figure h1 {
+.long-code-details figure h1 {
     font-size: 18px;
 }
 
@@ -4790,7 +4790,7 @@ border-bottom: 1px solid #e0e0e0;
     background-color: rgba(0, 0, 0, 0.5);
 }
 
-.parent_body {
+.parent-body {
     padding-bottom: 52px;
     position: relative;
     overflow: hidden;
@@ -4798,13 +4798,13 @@ border-bottom: 1px solid #e0e0e0;
     width: 100%;
 }
 
-.parent_body tr {
+.parent-body tr {
     width: 100%;
     float: left;
     display: inline-table;
 }
 
-.pd2 {
+.pd-2 {
     padding: 20px;
 }
 
@@ -5174,7 +5174,7 @@ perfect-scrollbar.ps-show-active
     margin: 0 !important;
 }
 
-.customItem:hover {
+.custom-item:hover {
     background-color: #e3e4ed !important;
     color: #5b64c9 !important;
 }
@@ -5240,7 +5240,7 @@ form#groupDetailForm {
 #getGroupModal #middleBody {
     height: 100%;
 }
-#getGroupModal.getGroupModal #middleBody {
+#getGroupModal.get-group-modal #middleBody {
     height: auto;
 }
 .select2-ledger .menu .item {
diff --git a/apps/web-giddh/src/assets/css/table.scss b/apps/web-giddh/src/assets/css/table.scss
index 813ca402cfd..facfecd0583 100644
--- a/apps/web-giddh/src/assets/css/table.scss
+++ b/apps/web-giddh/src/assets/css/table.scss
@@ -75,7 +75,7 @@
     .icon-sort-dsc {
         color: $wild-blue-yonder;
     }
-    .icon-pointer .activeTextColor {
+    .icon-pointer .active-text-color {
         color: $deep-sky-blue;
         opacity: 1;
     }
diff --git a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.eot b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.eot
index cd5b05b351c..71d06772c7b 100755
Binary files a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.eot and b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.eot differ
diff --git a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.svg b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.svg
index 4cb0bf19096..67b7d96fee1 100755
--- a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.svg
+++ b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.svg
@@ -22,156 +22,160 @@
 <glyph unicode="&#xe014;" glyph-name="permission" d="M691.2 960.001c-166.4 0-300.8-134.4-300.8-300.8 0-57.6 19.2-121.6 51.2-166.4l-409.6-422.4 102.4-102.4 70.4 70.4 102.4-102.4 230.4 230.4-102.4 102.4 121.6 121.6c147.2-83.2 326.4-25.6 403.2 121.6s25.6 332.801-115.201 409.6c-51.2 25.6-102.4 38.4-153.6 38.4zM691.2 460.801c-108.8 0-192 89.6-192 198.4s89.6 198.4 192 198.4c108.8 0 192-89.6 192-198.4s-83.2-198.4-192-198.4c0 0 0 0 0 0z" />
 <glyph unicode="&#xe015;" glyph-name="daybook" horiz-adv-x="904" d="M842.355 952.001h-686.701c-25.2 0-50.4-25.2-50.4-50.4v-100.8h-44.1c-25.2 0-50.4-25.2-50.4-50.4s18.9-50.4 50.4-50.4h50.4v-100.8h-50.4c-25.2 0-50.4-25.2-50.4-50.4s18.9-50.4 50.4-50.4h50.4v-100.8h-50.4c-25.2 0-50.4-25.2-50.4-50.4s18.9-50.4 50.4-50.4h50.4v-100.8h-50.4c-25.2 0-50.4-25.2-50.4-50.4s18.9-50.4 50.4-50.4h50.4v-100.8c0-25.2 18.9-50.4 50.4-50.4h686.701c25.2 0 50.4 25.2 50.4 50.4v907.2c-6.301 25.2-25.2 50.4-56.7 50.4zM697.454 567.701c0-12.6-6.301-18.9-18.9-18.9h-352.801c-12.6 0-18.9 6.301-18.9 18.9v214.2c0 12.6 6.301 18.9 18.9 18.9h352.801c12.6 0 18.9-6.301 18.9-18.9v-214.2z" />
 <glyph unicode="&#xe016;" glyph-name="journal" d="M1023.999 960h-1024v-1024h1024v1024zM992-31.999h-959.999v966.4h959.999v-966.4zM377.6 371.201c0-38.4 0-70.4-6.4-89.6s-12.8-38.4-25.6-51.2c-19.2-19.2-38.4-32-64-44.8s-57.6-12.8-96-12.8c-44.8 0-83.2 12.8-108.8 32s-38.4 44.8-38.4 76.8c0 19.2 6.4 38.4 19.2 51.2s32 19.2 51.2 19.2c19.2 0 32-6.4 44.8-19.2s19.2-25.6 19.2-44.8-6.4-38.4-25.6-51.2c-6.4-6.4-6.4-6.4-6.4-6.4 0-6.4 6.4-6.4 12.8-12.8s12.8-6.4 25.6-6.4c25.6 0 44.8 12.8 51.2 32 12.8 19.2 19.2 51.2 19.2 89.6v288c0 25.6-6.4 38.4-12.8 44.8-12.8 6.4-32 12.8-64 12.8v38.4h262.4v-38.4c-19.2 0-38.4-6.4-44.8-12.8s-12.8-19.2-12.8-44.8v-249.6zM678.4 172.801l-160 441.6c-12.8 25.6-19.2 38.4-25.6 44.8-12.8 12.8-25.6 19.2-44.8 19.2v38.4h256v-38.4c-19.2 0-32-6.4-44.8-12.8s-12.8-12.8-12.8-19.2c0 0 0-6.4 0-12.8s0-6.4 6.4-12.8l108.8-300.8 102.399 288v6.4c6.4 12.8 6.4 25.6 6.4 32 0 12.8-6.4 19.2-12.8 25.6s-25.6 12.8-44.8 12.8v32h166.4v-38.4c-19.2 0-32-12.8-38.4-19.2-12.8-12.8-19.2-25.6-32-51.2l-160-435.2c0 0-70.4 0-70.4 0z" />
-<glyph unicode="&#xe900;" glyph-name="windows" d="M896 806.375l-352-46.875v-279.5h352v326.375zM480 750.875l-352-46.875v-224h352v270.875zM128 416v-224l352-46.875v270.875h-352zM544 416v-279.5l352-46.875v326.375h-352z" />
-<glyph unicode="&#xe901;" glyph-name="mac" d="M682.88 878.080c-95.72-32.337-170.316-64.674-159.68-204.8 95.72 21.558 180.951 75.453 159.68 204.8zM378.88 683.52c-92.16 0-225.28-81.92-225.28-235.519 0-215.041 143.36-430.081 225.28-430.081 61.44 0 112.64 40.96 153.6 40.96s81.92-40.96 143.36-40.96c81.92 0 174.080 122.88 194.56 235.52-71.68 51.2-122.88 81.92-122.88 174.081 0 61.44 51.2 122.88 112.64 174.080-30.72 40.96-92.16 81.92-153.6 81.92s-127.509-48.61-174.080-51.2c-40.96 0-92.16 51.2-153.6 51.2z" />
-<glyph unicode="&#xe902;" glyph-name="android" d="M738.611 644.086c0 47.913-17.531 92.068-46.95 127.304l40.356 70.574c2.898 5.059 1.096 11.438-3.881 14.336-5.079 2.908-11.52 1.157-14.367-3.912l-37.069-64.819c-41.359 40.335-99.953 65.495-164.884 65.495-65.004 0-123.638-25.211-164.956-65.597l-37.151 64.901c-2.867 5.069-9.339 6.82-14.316 3.922-5.069-2.888-6.83-9.288-3.922-14.346l40.407-70.666c-29.379-35.215-46.828-79.329-46.828-127.191h453.56zM598.63 755.302c10.045 0 18.166-8.12 18.166-18.156 0-10.025-8.12-18.156-18.166-18.156-10.025 0-18.145 8.141-18.145 18.156 0 10.025 8.11 18.156 18.145 18.156zM425.206 755.302c10.045 0 18.176-8.12 18.176-18.156 0-10.025-8.12-18.156-18.176-18.156-10.025 0-18.145 8.141-18.145 18.156 0 10.025 8.131 18.156 18.145 18.156zM773.816 314.9h0.195c1.946-24.289 23.972-43.438 50.821-43.438 26.829 0 48.855 19.149 50.831 43.438h0.143v226.591h-0.082c0.082 0.87 0.082 1.741 0.082 2.611 0 25.938-22.825 46.981-50.975 46.981s-50.985-21.043-50.985-46.981c0-0.85 0.061-1.731 0.102-2.611h-0.102v-226.591h-0.031zM148.224 314.778h0.123c1.976-24.3 23.972-43.448 50.821-43.448 26.89 0 48.845 19.149 50.842 43.448h0.123v226.601h-0.031c0.072 0.87 0.072 1.761 0.072 2.601 0 25.969-22.825 47.012-50.964 47.012-28.15 0-50.985-21.064-50.985-47.012 0-0.84 0-1.731 0.051-2.601h-0.051v-226.601zM396.851 359.608c-4.444 0-8.684-1.403-12.278-4.045-4.454-3.277-7.352-8.079-8.182-13.578-0.829-5.458 0.522-10.916 3.82-15.38 3.881-5.284 10.117-8.417 16.691-8.417 4.444 0 8.684 1.403 12.278 4.045 4.465 3.297 7.352 8.1 8.192 13.578 0.819 5.499-0.522 10.957-3.809 15.401-3.912 5.274-10.148 8.397-16.712 8.397zM627.139 502.723c4.444 0 8.684 1.393 12.278 4.045 4.454 3.287 7.352 8.11 8.182 13.578 0.819 5.468-0.522 10.936-3.82 15.38-3.871 5.284-10.107 8.428-16.681 8.428-4.444 0-8.694-1.403-12.278-4.045-4.465-3.277-7.363-8.11-8.192-13.578s0.522-10.936 3.809-15.391c3.891-5.274 10.138-8.417 16.701-8.417zM512.573 558.879c11.407 0.317 20.449 9.871 20.132 21.289-0.307 11.305-9.4 20.142-20.695 20.142l-0.594-0.010c-11.428-0.317-20.449-9.861-20.132-21.279 0.317-11.295 9.4-20.142 20.695-20.152l0.594 0.010zM409.17 540.109c-3.594 2.652-7.834 4.045-12.278 4.045-6.564 0-12.81-3.154-16.691-8.428-3.287-4.454-4.649-9.912-3.809-15.391 0.819-5.468 3.727-10.291 8.182-13.578 3.584-2.642 7.834-4.045 12.278-4.045 6.574 0 12.8 3.144 16.701 8.417 3.277 4.454 4.628 9.923 3.809 15.391-0.84 5.489-3.738 10.312-8.192 13.588zM575.58 477.932c-1.638 2.222-3.4 4.362-5.274 6.4-13.578 14.909-32.748 24.566-54.18 25.692-1.372 0.072-2.744 0.215-4.137 0.215s-2.755-0.143-4.137-0.215c-21.432-1.126-40.602-10.783-54.18-25.692-1.864-2.038-3.625-4.178-5.253-6.4-9.667-13.117-15.442-29.235-15.442-46.735s5.775-33.618 15.442-46.735c1.638-2.222 3.389-4.383 5.263-6.4 13.578-14.92 32.748-24.576 54.18-25.702 1.382-0.061 2.755-0.205 4.147-0.205s2.765 0.143 4.137 0.205c21.422 1.116 40.591 10.783 54.18 25.702 1.874 2.017 3.625 4.178 5.263 6.4 9.656 13.097 15.442 29.235 15.442 46.735s-5.796 33.628-15.452 46.735zM741.048 616.1c0 3.564-2.877 6.502-6.492 6.502h-445.471c-3.615 0-6.502-2.939-6.502-6.502v-338.237c0-0.952 0.195-1.812 0.532-2.621-0.338-2.273-0.522-4.577-0.522-6.902 0-23.255 18.278-42.537 42.322-46.295v-0.707h20.019v-139.592h0.174c1.987-24.3 23.972-43.428 50.842-43.428 26.839 0 48.855 19.128 50.811 43.428h0.164v139.571h129.843v-139.581h0.195c1.976-24.32 23.941-43.438 50.801-43.438 26.839 0 48.886 19.118 50.821 43.438h0.184v139.581h19.845v0.686c24.105 3.697 42.455 23.020 42.455 46.316 0 2.324-0.133 4.628-0.512 6.912 0.338 0.799 0.512 1.638 0.512 2.601v338.268zM650.455 321.69c-5.437-7.404-14.193-11.776-23.357-11.776-6.226 0-12.175 1.935-17.203 5.642-6.236 4.598-10.301 11.356-11.459 18.995-0.993 6.564 0.266 13.097 3.523 18.739l-18.678 14.602c-16.62-18.719-40.468-30.863-67.133-32.020v-24.463c13.834-1.935 24.453-13.455 24.852-27.884 0.44-15.985-12.196-29.358-28.191-29.798h-0.829c-15.8 0-28.539 12.38-28.969 28.18-0.41 14.879 10.486 27.443 24.852 29.522v24.443c-26.665 1.157-50.524 13.302-67.164 32.020l-18.657-14.602c3.256-5.642 4.506-12.175 3.512-18.739-1.147-7.639-5.222-14.397-11.459-18.995-5.028-3.697-10.977-5.663-17.193-5.663-9.185 0-17.92 4.403-23.368 11.796-4.598 6.236-6.492 13.875-5.335 21.555 1.157 7.639 5.233 14.397 11.469 18.995 5.028 3.697 10.957 5.663 17.193 5.663 7.506 0 14.684-2.98 20.040-8.1l18.565 14.5c-11.837 15.882-18.852 35.564-18.852 56.852s7.014 40.97 18.842 56.852l-18.555 14.5c-5.356-5.12-12.534-8.1-20.050-8.1-6.226 0-12.165 1.956-17.183 5.663-6.246 4.598-10.312 11.356-11.469 19.005-1.157 7.67 0.748 15.319 5.335 21.545 5.437 7.393 14.172 11.796 23.368 11.796 6.216 0 12.165-1.956 17.183-5.663 6.236-4.598 10.301-11.346 11.469-19.005 0.983-6.543-0.266-13.087-3.523-18.739l18.668-14.592c16.63 18.719 40.489 30.863 67.154 32.010v24.453c-13.834 1.935-24.443 13.466-24.842 27.873-0.451 15.985 12.186 29.358 28.17 29.798l0.829 0.010c15.821 0 28.539-12.38 28.979-28.201 0.41-14.848-10.476-27.433-24.852-29.491v-24.443c26.665-1.157 50.514-13.302 67.144-32.010l18.678 14.592c-3.256 5.652-4.516 12.186-3.523 18.739 1.157 7.67 5.222 14.418 11.459 19.005 5.018 3.697 10.967 5.663 17.203 5.663 9.175 0 17.9-4.403 23.357-11.796 4.598-6.226 6.492-13.875 5.335-21.545-1.147-7.67-5.222-14.418-11.448-19.005-5.028-3.707-10.977-5.663-17.203-5.663-7.506 0-14.694 2.99-20.040 8.1l-18.565-14.5c11.848-15.892 18.862-35.564 18.862-56.852s-7.014-40.97-18.862-56.852l18.565-14.5c5.345 5.12 12.534 8.079 20.040 8.079 6.216 0 12.165-1.935 17.203-5.642 6.226-4.618 10.301-11.356 11.459-19.016 1.147-7.639-0.737-15.299-5.345-21.535zM511.416 303.473c-11.418-0.317-20.449-9.861-20.132-21.279 0.317-11.284 9.411-20.142 20.695-20.142l0.594 0.020c11.428 0.297 20.449 9.841 20.132 21.258-0.307 11.305-9.4 20.142-20.695 20.163l-0.594-0.020zM639.416 355.594c-3.594 2.642-7.844 4.045-12.278 4.045-6.574 0-12.81-3.144-16.701-8.417-3.287-4.444-4.639-9.902-3.809-15.38 0.829-5.499 3.727-10.301 8.192-13.599 3.604-2.642 7.844-4.024 12.278-4.024 6.574 0 12.81 3.144 16.691 8.417 3.287 4.444 4.628 9.902 3.809 15.38s-3.727 10.271-8.182 13.578z" />
-<glyph unicode="&#xe903;" glyph-name="branch-icon" d="M796.467 220.467h227.533v-284.467h-284.467v170.667l-227.533 238.933-227.533-238.933v-170.667h-284.467v284.467h227.533l227.533 227.533v182.067c-34.763 12.699-63.723 34.334-85.005 62.153l-0.328 0.447c-21.236 26.217-34.103 59.97-34.133 96.727v0.007c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667v0c0.032-1.138 0.051-2.478 0.051-3.821 0-35.54-12.933-68.060-34.349-93.109l0.164 0.197c-21.611-28.267-50.57-49.901-84.043-62.186l-1.291-0.414v-182.067z" />
-<glyph unicode="&#xe904;" glyph-name="info" d="M870.4 88.849c-89.912-94.275-216.492-152.895-356.763-152.895-2.376 0-4.748 0.017-7.115 0.050l0.359-0.004c-2.939-0.066-6.401-0.103-9.873-0.103-137.714 0-261.698 58.783-348.23 152.625l-0.297 0.327c-91.692 88.058-148.661 211.677-148.661 348.601 0 4.646 0.066 9.277 0.196 13.892l-0.015-0.679c-0.016 1.485-0.025 3.239-0.025 4.996 0 139.475 56.776 265.689 148.478 356.791l0.027 0.027c88.751 91.164 212.659 147.718 349.776 147.718 4.833 0 9.65-0.070 14.449-0.21l-0.705 0.016c1.584 0.018 3.455 0.028 5.329 0.028 139.771 0 266.359-56.443 358.215-147.78l-0.023 0.023c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.109-141.545-60.429-269.070-153.571-361.579l-0.029-0.029zM798.72 735.881c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.128 0.012-2.461 0.019-3.796 0.019-111.434 0-211.909-46.924-282.743-122.090l-0.181-0.194c-75.725-71.739-122.855-173.006-122.88-285.281v-0.005c-0.040-2.039-0.062-4.443-0.062-6.852 0-110.162 47.279-209.281 122.653-278.173l0.29-0.261c67.293-78.2 166.386-127.415 276.974-127.415 1.627 0 3.251 0.011 4.873 0.032l-0.246-0.003c1.128-0.012 2.461-0.019 3.796-0.019 111.434 0 211.909 46.924 282.743 122.090l0.181 0.194c75.725 71.739 122.855 173.006 122.88 285.281v0.005c0.282 5.423 0.443 11.773 0.443 18.161 0 107.308-45.379 204.017-117.994 271.984l-0.209 0.193zM558.080 190.771h-102.4v305.63h102.4zM558.080 598.323h-102.4v101.922h102.4z" />
-<glyph unicode="&#xe905;" glyph-name="copy-small" horiz-adv-x="884" d="M791.296 773.803v-744.704h-744.704v-93.099h744.704c50.887 1.298 91.801 42.212 93.096 92.977l0.002 0.122v744.704zM93.099 960c-50.905-1.254-91.845-42.194-93.096-92.981l-0.002-0.118v-651.605c1.298-50.887 42.212-91.801 92.977-93.096l0.122-0.002h512c50.905 1.254 91.845 42.194 93.096 92.981l0.002 0.118v651.605c-1.254 50.905-42.194 91.845-92.981 93.096l-0.118 0.002zM93.099 215.296v651.605h512v-651.605z" />
-<glyph unicode="&#xe906;" glyph-name="envelope" horiz-adv-x="1417" d="M1416.96 960h-1416.96v-1024h1416.96zM708.693 377.173l-600.235 523.861h1200.299zM538.027 448.085l-478.464-417.536v834.987zM582.912 408.917l125.355-110.165 126.293 110.080 474.112-413.781h-1200.384zM879.957 448.085l478.464 417.536v-835.072z" />
-<glyph unicode="&#xe907;" glyph-name="tick" horiz-adv-x="1325" d="M421.547 150.016l797.867 809.984 105.387-107.008-903.253-916.992-421.547 427.947 105.387 107.008z" />
-<glyph unicode="&#xe908;" glyph-name="branch" horiz-adv-x="1143" d="M737.28 960v-146.286h-737.28v146.286zM737.28 667.429v-146.286h-737.28v146.286zM0 228.571v146.286h491.52v-146.286zM897.682 374.857h245.76v-146.286h-245.76v-292.571h-122.88v292.571h-245.76v146.286h245.76v292.571h122.88z" />
-<glyph unicode="&#xe909;" glyph-name="company-profile" horiz-adv-x="1138" d="M568.905 732.453h568.905v-796.453h-1137.81v1024h568.905zM227.547 732.453v113.81h-113.737v-113.81zM227.547 504.905v113.81h-113.737v-113.81zM227.547 277.358v113.81h-113.737v-113.81zM227.547 49.81v113.737h-113.737v-113.737zM455.095 732.453v113.81h-113.81v-113.81zM455.095 504.905v113.81h-113.81v-113.81zM455.095 277.358v113.81h-113.81v-113.81zM455.095 49.81v113.737h-113.81v-113.737zM1029.632 49.81v568.905h-455.095v-113.81h113.737v-113.737h-113.737v-113.81h113.737v-113.81h-113.737v-113.737zM910.19 504.905v-113.737h-113.81v113.737zM910.19 277.358v-113.81h-113.81v113.81z" />
-<glyph unicode="&#xe90a;" glyph-name="discount" d="M148.48 811.52c88.631 91.718 212.741 148.664 350.152 148.664 4.701 0 9.386-0.067 14.055-0.199l-0.687 0.015c1.513 0.016 3.299 0.026 5.088 0.026 139.984 0 266.712-56.753 358.431-148.504l0.001-0.001c91.726-87.426 148.766-210.538 148.766-346.973 0-5.819-0.104-11.614-0.31-17.383l0.024 0.836c0.016-1.521 0.026-3.319 0.026-5.118 0-139.974-56.753-266.692-148.504-358.4l-0.002-0.002c-87.426-91.726-210.538-148.766-346.973-148.766-5.819 0-11.614 0.104-17.383 0.31l0.836-0.024c-1.521-0.016-3.319-0.026-5.118-0.026-139.974 0-266.692 56.753-358.4 148.504l-0.002 0.002c-91.726 87.426-148.766 210.538-148.766 346.973 0 5.819 0.104 11.614 0.31 17.383l-0.024-0.836c-0.047 2.551-0.074 5.559-0.074 8.573 0 138.895 56.825 264.518 148.495 354.889l0.059 0.058zM225.28 161.28c72.232-75.766 173.937-122.88 286.647-122.88 0.026 0 0.051 0 0.077 0h-0.004c1.058-0.010 2.308-0.016 3.56-0.016 111.624 0 212.229 47.178 282.962 122.682l0.198 0.214c73.896 73.476 120.395 174.437 122.872 286.254l0.008 0.466c0.010 1.058 0.016 2.308 0.016 3.56 0 111.624-47.178 212.229-122.682 282.962l-0.214 0.198c-73.476 73.896-174.437 120.395-286.254 122.872l-0.466 0.008c-1.058 0.010-2.308 0.016-3.56 0.016-111.624 0-212.229-47.178-282.962-122.682l-0.198-0.214c-73.896-73.476-120.395-174.437-122.872-286.254l-0.008-0.466c0-0.022 0-0.047 0-0.073 0-112.71 47.114-214.415 122.722-286.497l0.158-0.15zM711.826 338.505c0.022-0.821 0.035-1.788 0.035-2.757 0-32.95-14.613-62.488-37.713-82.485l-0.137-0.116c-29.892-23.849-67.607-39.070-108.772-41.376l-0.503-0.023v-77.458h-47.47v75.337c-1.95-0.037-4.249-0.058-6.553-0.058-50.028 0-97.728 9.965-141.224 28.020l2.443-0.898v75.337c20.44-9.965 44.353-18.596 69.273-24.652l2.48-0.509c21.872-5.971 47.125-9.743 73.143-10.45l0.439-0.009v133.486l-29.989 11.045c-33.658 11.351-62.347 29.807-85.447 53.701l-0.057 0.059c-16.73 19.734-26.903 45.488-26.903 73.618 0 1.299 0.022 2.593 0.065 3.881l-0.005-0.187c-0.012 0.577-0.019 1.257-0.019 1.939 0 31.998 14.933 60.508 38.209 78.943l0.21 0.16c28.691 21.941 64.474 35.98 103.412 38.302l0.524 0.025v59.977h47.47v-58.88c49.904-1.551 96.916-12.157 140.029-30.221l-2.594 0.964-26.039-65.317c-32.636 13.545-70.45 22.928-109.978 26.307l-1.418 0.098v-129.975l27.136-10.386c36.54-11.855 67.942-30.702 94.055-55.133l-0.14 0.129c16.174-17.951 26.067-41.837 26.067-68.034 0-0.845-0.010-1.688-0.031-2.528l0.002 0.125zM627.566 333.166c0.009 0.337 0.014 0.735 0.014 1.133 0 13.055-5.635 24.794-14.605 32.918l-0.038 0.034c-13.661 11.186-29.689 20.107-47.15 25.884l-1.052 0.301v-113.883q62.83 9.289 62.83 53.541zM458.679 552.594c-0.016-0.456-0.024-0.991-0.024-1.529 0-12.524 4.82-23.922 12.707-32.44l-0.029 0.031c12.815-11.591 28.1-20.723 44.945-26.497l0.916-0.273v111.177c-16.766-1.591-31.806-7.92-44.060-17.614l0.175 0.133c-8.987-7.745-14.642-19.142-14.642-31.86 0-0.371 0.005-0.74 0.014-1.109l-0.001 0.054z" />
-<glyph unicode="&#xe90b;" glyph-name="financial-year" horiz-adv-x="945" d="M840.192 857.6c28.722-0.203 54.671-11.903 73.51-30.721l-0.001 0.001c19.153-18.012 31.184-43.408 31.524-71.618l0.001-0.062v-716.8c-0.331-28.274-12.364-53.673-31.472-71.631l-0.052-0.049c-18.833-18.823-44.786-30.525-73.471-30.72h-735.196c-0.856-0.027-1.863-0.043-2.873-0.043-27.865 0-52.971 11.814-70.582 30.705l-0.053 0.057c-19.16 18.007-31.193 43.406-31.524 71.619l-0.001 0.061v716.8c0.34 28.272 12.371 53.668 31.473 71.632l0.052 0.048c18.837 18.817 44.787 30.517 73.47 30.72h52.556v102.4h105.033v-102.4h420.133v102.4h105.033v-102.4zM840.192 38.4v563.2h-735.159v-563.2zM735.159 499.2v-102.4h-525.093v102.4zM577.609 294.4v-102.4h-367.616v102.4z" />
-<glyph unicode="&#xe90c;" glyph-name="refresh" d="M598.443 551.552l118.357 113.301c-53.345 50.65-125.628 81.803-205.188 81.803-133.058 0-245.765-87.135-284.171-207.457l-0.582-2.112-122.197 38.187c55.678 174.905 216.679 299.388 406.754 299.388 115.932 0 221.047-46.309 297.858-121.438l-0.078 0.076 111.253 106.432c1.931 1.936 4.602 3.134 7.552 3.134 5.868 0 10.629-4.738 10.666-10.597v-318.937h-332.693c-5.89 0.001-10.664 4.776-10.664 10.667 0 2.95 1.198 5.621 3.134 7.552v0zM419.221 362.667c5.89-0.001 10.664-4.776 10.664-10.667 0-2.94-1.189-5.602-3.113-7.531v0l-120.021-112.939c53.399-50.879 125.846-82.184 205.606-82.184 133.065 0 245.779 87.132 284.201 207.453l0.582 2.112 122.197-38.187c-55.719-174.903-216.738-299.376-406.829-299.376-116.507 0-222.093 46.758-299.016 122.532l0.053-0.052-109.995-103.509c-1.931-1.936-4.602-3.134-7.552-3.134-5.89 0-10.665 4.774-10.667 10.664v0 314.816z" />
-<glyph unicode="&#xe90d;" glyph-name="history-icon" horiz-adv-x="1189" d="M312.917 812.117c88.975 91.38 213.189 148.068 350.643 148.068 4.738 0 9.461-0.067 14.166-0.201l-0.692 0.016c1.234 0.011 2.692 0.017 4.152 0.017 140.357 0 267.522-56.477 360.011-147.945l-0.046 0.046c91.391-87.633 148.184-210.732 148.184-347.096 0-5.986-0.109-11.946-0.326-17.879l0.025 0.858c0.011-1.234 0.017-2.692 0.017-4.152 0-140.357-56.477-267.522-147.945-360.011l0.046 0.046c-87.633-91.391-210.732-148.184-347.096-148.184-5.986 0-11.946 0.109-17.879 0.326l0.858-0.025c-2.322-0.040-5.061-0.062-7.805-0.062-137.416 0-261.604 56.637-350.494 147.841l-0.101 0.104 79.616 85.333c69.296-73.626 167.388-119.476 276.188-119.476 0.913 0 1.825 0.003 2.736 0.010l-0.14-0.001c0.338-0.001 0.739-0.002 1.14-0.002 109.982 0 209.84 43.347 283.421 113.888l-0.144-0.138c73.656 70.249 119.456 169.147 119.456 278.741s-45.8 208.492-119.303 278.597l-0.153 0.145c-71.998 70.367-170.598 113.782-279.339 113.782-1.785 0-3.567-0.012-5.347-0.035l0.27 0.003c-2.593 0.064-5.647 0.101-8.71 0.101-105.834 0-201.489-43.58-270-113.774l-0.074-0.076c-70.288-70.009-113.78-166.874-113.78-273.897 0-1.718 0.011-3.434 0.034-5.146l-0.003 0.26h170.667l-227.584-227.584-227.584 227.584h170.667c-0.726 9.773-1.141 21.17-1.141 32.664 0 132.388 54.934 251.945 143.25 337.121l0.141 0.135zM620.117 675.584h85.333v-238.933l199.083-119.467-45.483-68.267-244.651 147.883v278.784z" />
-<glyph unicode="&#xe90e;" glyph-name="advance-filter" d="M1001.062 936.38c-14.302 14.555-34.185 23.586-56.177 23.62h-866.994c-43.171-0.877-77.832-36.080-77.832-79.379 0-0.389 0.003-0.778 0.008-1.166l-0.001 0.059v-65.536c-0.010-0.46-0.015-1.003-0.015-1.547 0-21.734 8.651-41.447 22.697-55.884l-0.018 0.018 361.267-369.596v-370.278c0-0.089-0.001-0.194-0.001-0.299 0-31.73 18.408-59.161 45.127-72.196l0.475-0.209c9.525-4.577 20.654-7.447 32.401-7.914l0.162-0.005h1.502c19.968 0.518 37.955 8.593 51.291 21.458l-0.023-0.022 98.099 87.177c16.326 14.997 26.623 36.334 26.965 60.081l0.001 0.062v282.078l361.335 369.664c14.023 14.357 22.674 34.015 22.674 55.693 0 0.436-0.004 0.872-0.010 1.306l0.001-0.065v66.56c0.002 0.214 0.003 0.467 0.003 0.72 0 21.697-8.764 41.347-22.944 55.604l0.003-0.003zM979.012 813.5c0.005-0.217 0.008-0.472 0.008-0.728 0-9.512-3.778-18.142-9.915-24.472l0.009 0.009-374.101-382.771v-142.473l-88.064-78.78c-8.721-8.535-20.562-13.912-33.656-14.266l-0.068-0.001c-8 0.187-15.53 2.004-22.335 5.129l0.353-0.145c-9.495 4.678-17.145 11.868-22.258 20.708l-0.133 0.249v209.306l-373.555 382.635c-6.174 6.448-9.974 15.212-9.974 24.864 0 0.259 0.003 0.517 0.008 0.775l-0.001-0.039v66.355c-0.004 0.183-0.006 0.399-0.006 0.616 0 18.922 15.244 34.283 34.121 34.473h865.366c18.921-0.302 34.143-15.711 34.143-34.675 0-0.29-0.004-0.578-0.011-0.866l0.001 0.043z" />
-<glyph unicode="&#xe90f;" glyph-name="integration" horiz-adv-x="1536" d="M397.509 210.076v475.848c-0.045 1.823-0.070 3.969-0.070 6.122 0 145.75 116.235 264.353 261.065 268.166l0.353 0.007h472.885c44.903-1.091 80.886-37.751 80.886-82.814 0-0.703-0.009-1.403-0.026-2.101l0.002 0.104v-854.485c0.014-0.563 0.022-1.226 0.022-1.891 0-45.085-35.97-81.769-80.777-82.919l-0.107-0.002h-472.995c-145.132 3.885-261.302 122.461-261.302 268.171 0 2.038 0.023 4.071 0.068 6.098l-0.005-0.302zM1050.991 790.376h-392.133c-55.39-1.397-99.758-46.63-99.758-102.227 0-0.782 0.009-1.563 0.026-2.341l-0.002 0.116v-475.848c-0.015-0.663-0.024-1.444-0.024-2.228 0-55.618 44.356-100.877 99.624-102.331l0.135-0.003h392.133zM0 423.697c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h323.34c45.007-2.361 80.606-39.429 80.606-84.812s-35.6-82.452-80.397-84.803l-0.209-0.009h-323.34c-44.903 1.091-80.886 37.751-80.886 82.814 0 0.703 0.009 1.403 0.026 2.101l-0.002-0.104zM1131.853 678.134c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h242.587c45.007-2.361 80.606-39.429 80.606-84.812s-35.6-82.452-80.397-84.803l-0.209-0.009h-242.587c-44.903 1.091-80.886 37.751-80.886 82.814 0 0.703 0.009 1.403 0.026 2.101l-0.002-0.104zM1131.853 169.371c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h242.587c44.571-2.864 79.637-39.715 79.637-84.757s-35.066-81.894-79.388-84.744l-0.249-0.013h-242.587c-44.902 1.093-80.884 37.751-80.884 82.814 0 0.664 0.008 1.326 0.023 1.986l-0.002-0.098z" />
-<glyph unicode="&#xe910;" glyph-name="invoice-managment" horiz-adv-x="1061" d="M1060.498 708.023c-0.737 3.026-1.766 5.682-3.089 8.157l0.090-0.185c-1.346 2.548-2.953 4.738-4.833 6.661l0.005-0.005-228.425 229.157c-2.138 1.843-4.535 3.494-7.102 4.87l-0.212 0.104c-3.784 1.98-8.257 3.164-13.002 3.218h-427.025c-44.215-0.29-79.945-36.2-79.945-80.456 0-0.001 0-0.001 0-0.002v0-73.801c-4.564 10.422-14.743 17.594-26.61 17.7h-55.31c-40.238-0.208-72.777-32.875-72.777-73.142 0 0 0-0.001 0-0.001v0-741.157c0 0 0-0.001 0-0.001 0-40.267 32.539-72.934 72.757-73.142h55.389c16.158 0 29.257 13.099 29.257 29.257s-13.099 29.257-29.257 29.257h-55.369c-8.139 0.284-14.629 6.95-14.629 15.132 0 0.003 0 0.006 0 0.009v0 740.645c0.236 7.982 6.646 14.392 14.606 14.628l0.022 0.001h55.369c11.865 0.093 22.040 7.235 26.55 17.44l0.074 0.187v-766.098c0-0.001 0-0.001 0-0.002 0-44.23 35.689-80.123 79.84-80.455h604.558c44.215 0.29 79.945 36.2 79.945 80.456 0 0.001 0 0.001 0 0.002v0 686.226c-0.092 1.937-0.407 3.763-0.919 5.504l0.042-0.165zM858.551 672.914h144.823v-656.457c0-0.009 0-0.020 0-0.031 0-11.707-9.168-21.273-20.716-21.909l-0.056-0.002h-605.989c-12.119 0-21.943 9.824-21.943 21.943v0 863.086c0 12.119 9.824 21.943 21.943 21.943v0h398.336v-144.603c0-0.022 0-0.048 0-0.073 0-46.257 37.436-83.77 83.664-83.895h0.012zM833.243 756.37v104.082l128.878-129.243h-103.717c-13.865 0.042-25.088 11.291-25.088 25.161 0 0 0 0 0 0v0zM408.942 505.344c0.243-16.060 13.198-29.014 29.234-29.257h458.629c16.158 0 29.257 13.099 29.257 29.257v0c0.003 0.147 0.004 0.32 0.004 0.493 0 7.982-3.245 15.206-8.488 20.425l-0.001 0.001c-5.314 5.419-12.712 8.778-20.894 8.778-0.060 0-0.12 0-0.18-0.001h-458.304c-16.211-0.247-29.257-13.446-29.257-29.693 0-0.001 0-0.002 0-0.003v0zM926.354 372.882c0 16.158-13.099 29.257-29.257 29.257v0h-458.898c-16.36 0-29.623-13.263-29.623-29.623s13.263-29.623 29.623-29.623v0h458.606c0.090-0.001 0.196-0.002 0.302-0.002 16.158 0 29.257 13.099 29.257 29.257 0 0.258-0.003 0.515-0.010 0.771l0.001-0.038zM64.512 596.699h44.251c16.36 0 29.623 13.263 29.623 29.623s-13.263 29.623-29.623 29.623v0h-44.251c-35.596-0.083-64.429-28.916-64.512-64.504v-590.856c0.083-35.61 28.908-64.461 64.5-64.585h44.263c16.32 0 29.55 13.23 29.55 29.55s-13.23 29.55-29.55 29.55v0h-43.886c-2.982 0.116-5.37 2.504-5.485 5.475v590.859c0.038 2.842 2.291 5.147 5.109 5.266h0.011zM878.885 284.087v20.846c0 10.786-8.743 19.529-19.529 19.529s-19.529-8.743-19.529-19.529v0-18.213c-11.498-2.043-21.501-7.387-29.266-15.003l0.009 0.009c-12.064-11.937-19.534-28.496-19.534-46.8 0-0.287 0.002-0.574 0.005-0.86v0.044c1.463-22.601 13.312-51.712 65.024-63.927 38.693-9.289 38.693-19.529 38.693-33.719-0.030-4.799-2.235-9.076-5.678-11.901l-0.027-0.022c-6.796-6.142-15.693-10.074-25.495-10.601l-0.105-0.004c-0.817-0.064-1.77-0.101-2.73-0.101-19.457 0-35.401 15.045-36.832 34.136l-0.007 0.123v1.609c0 10.786-8.743 19.529-19.529 19.529s-19.529-8.743-19.529-19.529v0c-0.016-0.561-0.025-1.221-0.025-1.883 0-33.649 23.281-61.861 54.614-69.406l0.487-0.099v-19.968c0-10.786 8.743-19.529 19.529-19.529s19.529 8.743 19.529 19.529v18.651c14.491 3.388 27.051 10.242 37.21 19.651l-0.053-0.049c10.97 9.935 17.869 24.191 17.993 40.060v0.022c0.585 48.64-32.768 63.122-68.462 71.826-34.158 8.119-34.67 21.943-35.767 28.453 0.431 6.7 3.314 12.655 7.751 17.040l0.003 0.003c3.403 3.482 8.147 5.641 13.395 5.641 1.029 0 2.039-0.083 3.024-0.243l-0.108 0.014c33.426-2.779 36.571-20.846 37.961-26.77 1.123-9.822 9.389-17.381 19.419-17.381 10.791 0 19.539 8.748 19.539 19.539 0 0.76-0.043 1.51-0.128 2.248l0.008-0.090c-0.101 1.037-0.282 1.982-0.54 2.894l0.028-0.115c-4.935 26.83-25.013 47.912-50.879 54.248l-0.468 0.097z" />
-<glyph unicode="&#xe911;" glyph-name="linked-accounts" horiz-adv-x="1039" d="M314.807-64c-0.462-0.002-1.007-0.004-1.554-0.004-172.894 0-313.051 140.158-313.051 313.051 0 2.65 0.033 5.293 0.098 7.928l-0.008-0.39c1.769 90.489 38.994 171.953 98.308 231.355l-0.004-0.004c13.883 14.56 33.429 23.613 55.090 23.613 42.012 0 76.069-34.057 76.069-76.069 0-21.352-8.797-40.649-22.964-54.464l-0.016-0.015c-32.641-32.558-53.191-77.224-54.341-126.686l-0.004-0.216c-0.039-1.326-0.061-2.886-0.061-4.452 0-44.942 18.283-85.613 47.816-114.983l0.007-0.007c29.999-28.738 70.779-46.431 115.692-46.431 1.55 0 3.095 0.021 4.635 0.063l-0.227-0.005c49.666 1.665 94.114 22.709 126.277 55.766l0.041 0.042c13.692 13.353 32.429 21.589 53.088 21.589 42.012 0 76.069-34.057 76.069-76.069 0-20.351-7.991-38.835-21.007-52.485l0.029 0.030c-58.746-60.031-139.729-98.098-229.599-100.852l-0.509-0.012zM886.126 385.682c-41.864 0.194-75.726 34.177-75.726 76.068 0 20.703 8.27 39.474 21.687 53.189l-0.013-0.014c32.628 32.566 53.175 77.226 54.341 126.683l0.004 0.22c0.037 1.294 0.058 2.818 0.058 4.346 0 44.998-18.279 85.726-47.816 115.165l-0.004 0.004c-30.272 28.737-71.288 46.412-116.433 46.412-1.289 0-2.576-0.014-3.858-0.043l0.191 0.003c-49.687-1.678-94.154-22.717-126.352-55.768l-0.039-0.040c-13.933-14.991-33.761-24.34-55.772-24.34-42.012 0-76.069 34.057-76.069 76.069 0 21.72 9.103 41.314 23.703 55.175l0.033 0.031c58.745 60.046 139.722 98.134 229.592 100.924l0.516 0.013c3.363 0.129 7.313 0.203 11.279 0.203 172.934 0 313.125-140.191 313.125-313.125 0-2.618-0.032-5.228-0.096-7.83l0.007 0.386c-1.769-90.489-38.994-171.953-98.308-231.355l0.004 0.004c-13.709-13.824-32.709-22.382-53.708-22.382-0.121 0-0.242 0-0.363 0.001h0.019zM401.701 250.295c-41.864 0.194-75.726 34.177-75.726 76.068 0 20.703 8.27 39.474 21.687 53.189l-0.013-0.014 213.87 216.283c13.883 14.56 33.429 23.613 55.090 23.613 42.012 0 76.069-34.057 76.069-76.069 0-21.352-8.797-40.649-22.964-54.464l-0.016-0.015-213.943-216.357c-13.695-13.737-32.637-22.237-53.564-22.237-0.172 0-0.344 0.001-0.515 0.002h0.026z" />
-<glyph unicode="&#xe912;" glyph-name="manage-user" horiz-adv-x="833" d="M728.942 664.942c56.939-1.431 102.724-47.217 104.153-104.021l0.003-0.135v-520.704c-1.431-56.939-47.217-102.724-104.021-104.153l-0.135-0.003h-624.786c-56.939 1.431-102.724 47.217-104.153 104.021l-0.003 0.135v520.704c1.431 56.939 47.217 102.724 104.021 104.153l0.135 0.003h52.078v104.155c0 73.143 26.039 65.829 78.117 112.786 47.217 46.123 111.046 75.422 181.691 78.101l0.508 0.015c0.947 0.013 2.065 0.021 3.185 0.021 70.675 0 134.341-30.012 178.948-77.987l0.139-0.151c46.885-52.078 78.117-45.129 78.117-112.786v-104.155zM728.942 40.155v520.704h-624.786v-520.704zM531.090 814.226c-29.467 28.977-69.915 46.867-114.542 46.867s-85.075-17.89-114.564-46.889l0.022 0.022c-31.232-31.232-46.885 1.755-41.691-45.129v-104.155h317.513v104.155c0 41.618-15.506 13.897-46.738 45.129zM489.472 227.547c-18.038-17.214-42.524-27.808-69.485-27.808-55.625 0-100.718 45.093-100.718 100.718s45.093 100.718 100.718 100.718c55.543 0 100.585-44.96 100.717-100.472v-0.013c0.175-2.049 0.275-4.434 0.275-6.843 0-26.653-12.216-50.453-31.355-66.106l-0.152-0.121z" />
-<glyph unicode="&#xe913;" glyph-name="subscription" horiz-adv-x="878" d="M638.83 717.458l-250.002-242.542v210.213c-80.040-12.113-149.303-51.181-199.692-107.493l-0.281-0.319c-48.32-52.030-77.971-121.982-77.971-198.859 0-3.993 0.080-7.967 0.238-11.921l-0.018 0.567c-0.003-0.544-0.005-1.188-0.005-1.833 0-79.887 29.449-152.897 78.083-208.764l-0.327 0.384c49.122-58.682 119.182-98.422 198.549-107.678l1.424-0.135v-107.813c-110.898 11.099-207.98 62.786-277.612 139.771l-0.33 0.371c-68.825 71.159-111.241 168.234-111.241 275.215 0 3.66 0.050 7.308 0.148 10.943l-0.011-0.536c1.737 221.851 170.781 403.682 387.080 425.615l1.82 0.149v167.205zM494.373 49.152c52.456 9.645 99.154 28.456 140.55 54.847l-1.579-0.941 83.456-80.823c-59.955-46.472-134.013-77.542-214.792-86.076l-1.857-0.159v113.152zM877.641 421.010h-111.104c-10.094 51.070-29.461 96.322-56.409 136.010l0.82-1.281 83.31 75.41c44.203-58.51 74.113-130.137 83.262-208.113l0.194-2.027zM711.022 178.469c29.392 37.228 49.325 83.197 55.459 133.428l0.129 1.301h111.104c-11.474-80.43-43.111-151.899-89.593-211.172l0.725 0.959z" />
-<glyph unicode="&#xe914;" glyph-name="tags" d="M877.714 960c0.356 0.003 0.776 0.004 1.197 0.004 38.227 0 73.453-12.845 101.599-34.454l-0.396 0.292c25.585-17.859 42.479-46.645 43.879-79.443l0.007-0.209v-910.19l-512 170.642-512-170.642v910.19c1.478 32.989 18.35 61.748 43.558 79.435l0.328 0.218c27.741 21.317 62.96 34.162 101.179 34.162 0.429 0 0.859-0.002 1.287-0.005h-0.066zM935.497 106.642v739.547h-837.047v-739.547l413.477 125.147z" />
-<glyph unicode="&#xe915;" glyph-name="taxes" d="M148.543 84.543c-91.719 87.339-148.76 210.375-148.76 346.733 0 5.868 0.106 11.712 0.315 17.529l-0.024-0.842c-0.048 2.574-0.075 5.61-0.075 8.652 0 138.874 56.853 264.469 148.555 354.78l0.063 0.062c88.567 91.71 212.62 148.655 349.973 148.655 4.729 0 9.442-0.067 14.138-0.202l-0.69 0.016c1.466 0.015 3.198 0.024 4.933 0.024 140.104 0 266.948-56.773 358.782-148.568l-0.001 0.001c91.593-87.461 148.537-210.529 148.537-346.897 0-5.837-0.104-11.649-0.311-17.435l0.024 0.838c0.016-1.502 0.025-3.276 0.025-5.053 0-139.921-56.657-266.61-148.282-358.375l0.007 0.007c-87.524-91.723-210.716-148.753-347.228-148.753-5.797 0-11.571 0.103-17.318 0.307l0.833-0.023c-1.571-0.018-3.427-0.028-5.286-0.028-139.925 0-266.587 56.783-358.201 148.562l-0.008 0.008zM225.264 734.663c-73.841-73.502-120.322-174.436-122.863-286.221l-0.009-0.478c0.025-112.72 47.128-214.434 122.715-286.552l0.156-0.148c72.099-75.755 173.688-122.871 286.281-122.871 0.147 0 0.294 0 0.441 0h-0.023c1.152-0.012 2.512-0.019 3.874-0.019 111.518 0 212.017 47.181 282.623 122.672l0.203 0.219c73.959 73.427 120.477 174.408 122.864 286.25l0.008 0.449c0.010 1.058 0.016 2.308 0.016 3.559 0 111.616-47.175 212.213-122.674 282.942l-0.214 0.198c-73.471 73.89-174.424 120.387-286.233 122.863l-0.466 0.008c-1.058 0.010-2.308 0.016-3.559 0.016-111.616 0-212.213-47.175-282.942-122.674l-0.198-0.214zM589.562 220.432c-18.103 27.385-28.882 60.992-28.882 97.117 0 3.966 0.13 7.902 0.386 11.803l-0.028-0.531q0 145.398 109.706 145.324c1.634 0.098 3.545 0.154 5.469 0.154 31.276 0 59.099-14.783 76.864-37.743l0.166-0.223c18.238-27.063 29.111-60.402 29.111-96.281 0-3.977-0.134-7.923-0.397-11.834l0.029 0.53c0.308-3.909 0.483-8.463 0.483-13.059 0-35.956-10.744-69.403-29.197-97.305l0.409 0.658c-18.138-22.5-45.699-36.774-76.593-36.774-2.232 0-4.448 0.075-6.643 0.221l0.298-0.016c-1.399-0.073-3.038-0.115-4.687-0.115-31.116 0-58.765 14.844-76.251 37.838l-0.172 0.236zM648.073 388.21c-4.751-15.505-7.487-33.327-7.487-51.788 0-2.802 0.063-5.588 0.188-8.359l-0.014 0.394c-0.105-2.342-0.164-5.088-0.164-7.847 0-18.679 2.732-36.72 7.818-53.745l-0.34 1.327c4.608-13.238 12.507-19.893 22.892-19.893 20.405 0 30.645 26.915 30.645 80.451s-10.239 79.281-30.645 79.281c-10.239-0.366-18.065-6.875-22.746-19.82zM340.894 188.617l257.664 464.278h76.283l-257.737-464.278zM264.1 405.617c-18.256 27.366-29.131 61.009-29.131 97.193 0 4.12 0.141 8.207 0.418 12.256l-0.030-0.547q0 144.959 109.706 145.032c1.59 0.092 3.45 0.145 5.323 0.145 31.272 0 59.116-14.68 77.015-37.524l0.161-0.214c18.259-27.25 29.14-60.782 29.14-96.854 0-3.75-0.118-7.472-0.349-11.163l0.025 0.505c0.267-3.67 0.42-7.952 0.42-12.269 0-36.21-10.714-69.917-29.145-98.125l0.422 0.688c-18.287-22.497-45.96-36.754-76.962-36.754-2.128 0-4.241 0.067-6.336 0.2l0.286-0.014c-1.416-0.075-3.075-0.118-4.743-0.118-30.859 0-58.299 14.633-75.762 37.339l-0.166 0.225zM322.61 573.833c-4.729-15.746-7.45-33.841-7.45-52.571 0-2.526 0.049-5.040 0.148-7.542l-0.011 0.36c-0.079-2.077-0.125-4.515-0.125-6.964 0-18.983 2.717-37.331 7.783-54.678l-0.344 1.376c4.827-13.238 12.507-19.747 23.185-19.747 20.113 0 30.352 26.695 30.352 80.013s-10.239 79.501-30.352 79.501c-10.459-0.293-18.138-6.656-22.965-19.967z" />
-<glyph unicode="&#xe916;" glyph-name="trigger" d="M926.72 494.153h97.28v-92.233h-97.28c-22.98-194.415-176.059-346.92-368.764-368.828l-1.924-0.178v-96.914h-92.672v96.841c-194.641 22.059-347.735 174.577-370.498 367.028l-0.19 1.978h-92.672v92.233h97.28c22.953 194.428 176.047 346.947 368.766 368.828l1.922 0.177v96.914h92.672v-96.841c98.794-9.523 185.806-53.613 250.127-119.856l0.095-0.098c65.219-64.204 108.039-150.992 115.77-247.674l0.089-1.377zM282.697 217.381c55.452-56.988 132.886-92.343 218.577-92.343 2.871 0 5.734 0.040 8.586 0.119l-0.42-0.009c176.21 0.21 318.974 143.103 318.974 319.342 0 176.368-142.974 319.342-319.342 319.342s-319.342-142.974-319.342-319.342c0-0.386 0.001-0.772 0.002-1.157v0.060c-0.067-2.368-0.105-5.156-0.105-7.952 0-85.651 35.638-162.978 92.894-217.962l0.102-0.098zM379.977 577.17c31.791 30.134 74.842 48.666 122.222 48.666 98.202 0 177.81-79.608 177.81-177.81s-79.608-177.81-177.81-177.81c-98.193 0-177.796 79.594-177.81 177.783v0.002c1.801 50.501 22.683 95.802 55.611 129.193l-0.022-0.022z" />
-<glyph unicode="&#xe917;" glyph-name="user" d="M294.4 358.4c63.416 16.263 136.218 25.598 211.2 25.598s147.784-9.335 217.306-26.905l-6.106 1.308c80.152-21.079 150.457-51.771 214.558-91.518l-3.322 1.918c53.772-26.342 91.203-78.697 96-140.213l0.037-0.587v-192h-1024v192c6.541 61.516 43.353 113.18 95.054 140.33l0.983 0.47c56.363 40.735 122.739 71.719 194.496 88.836l3.794 0.764zM761.563 211.163c-77.659 31.498-167.687 50.208-261.963 51.197l-0.4 0.003c-94.761-1.655-184.695-20.299-267.543-53.002l5.18 1.802c-89.6-32.037-128-64-128-83.163v-70.437h780.8v70.437c-0.073 19.237-38.473 51.2-128.073 83.237zM320 883.2c44.307 42.253 104.438 68.253 170.642 68.253 136.659 0 247.442-110.784 247.442-247.442s-110.784-247.442-247.442-247.442c-136.655 0-247.436 110.778-247.442 247.431v0c-0.007 0.666-0.010 1.453-0.010 2.241 0 69.76 29.487 132.633 76.676 176.835l0.134 0.124zM595.237 799.963c-25.357 26.554-61.036 43.063-100.571 43.063-76.752 0-138.971-62.22-138.971-138.971s62.22-138.971 138.971-138.971c76.707 0 138.898 62.147 138.971 138.836v0.007c0.031 1.069 0.049 2.326 0.049 3.587 0 36.146-14.73 68.851-38.514 92.441l-0.009 0.009z" />
-<glyph unicode="&#xe918;" glyph-name="warehouse" d="M371.273 960h-251.831c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h251.839c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-0.008zM401.262 840.558v-251.904c0-0.044 0-0.096 0-0.148 0-16.401-13.295-29.696-29.696-29.696-0.103 0-0.206 0.001-0.309 0.002h-252.107c-0.050 0-0.109 0-0.169 0-8.074 0-15.384 3.27-20.677 8.558v0c-5.423 5.404-8.779 12.88-8.779 21.14 0 0.102 0.001 0.205 0.002 0.307v-0.016 251.831c-0.001 0.093-0.002 0.204-0.002 0.314 0 8.074 3.271 15.385 8.56 20.678v0c5.321 5.464 12.749 8.854 20.969 8.854 0.162 0 0.325-0.001 0.487-0.004h252.026c16.41-0.041 29.696-13.354 29.696-29.769 0-0.051 0-0.103 0-0.154v0.008zM652.581 469.285h251.831c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-251.839c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h0.008zM622.665 588.727v251.904c0 0 0 0 0 0 0 16.481 13.361 29.842 29.842 29.842 0.026 0 0.051 0 0.077 0h252.193c16.219-0.288 29.258-13.504 29.258-29.765 0-0.053 0-0.106 0-0.159v0.008-251.904c0 0 0 0 0 0 0-16.481-13.361-29.842-29.842-29.842-0.051 0-0.103 0-0.154 0h-251.75c-16.211 0.246-29.259 13.446-29.259 29.693 0 0.104 0.001 0.208 0.002 0.312v-0.016zM371.273 426.862h-251.831c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h251.839c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-0.008zM401.262 307.419v-251.977c0.002-0.133 0.003-0.291 0.003-0.448 0-16.158-13.099-29.257-29.257-29.257-0.258 0-0.516 0.003-0.773 0.010l0.038-0.001h-251.977c-0.738-0.079-1.595-0.125-2.462-0.125-7.364 0-13.964 3.268-18.43 8.432l-0.026 0.031c-5.467 5.422-8.851 12.937-8.851 21.242 0 0.092 0 0.184 0.001 0.276v-0.014 251.977c-0.003 0.155-0.005 0.337-0.005 0.52 0 16.158 13.099 29.257 29.257 29.257 0.233 0 0.466-0.003 0.697-0.008l-0.034 0.001h252.123c0 0 0.001 0 0.001 0 16.401 0 29.696-13.295 29.696-29.696 0-0.077 0-0.154-0.001-0.231v0.012zM778.24 426.862c-135.37-0.208-245.028-109.995-245.028-245.394 0-135.528 109.867-245.394 245.394-245.394s245.394 109.867 245.394 245.394c0 0.103 0 0.205 0 0.308v-0.016c-0.333 135.437-110.203 245.102-245.686 245.102-0.026 0-0.052 0-0.078 0h0.004zM778.24 25.893c-86.083 0-155.867 69.784-155.867 155.867s69.784 155.867 155.867 155.867v0c86.083 0 155.867-69.784 155.867-155.867s-69.784-155.867-155.867-155.867v0z" />
-<glyph unicode="&#xe919;" glyph-name="generate-invoice" horiz-adv-x="762" d="M761.722 710.28v0c-0.463 1.955-1.072 3.662-1.843 5.278l0.068-0.158-0.683 1.161c-0.868 1.733-1.939 3.219-3.21 4.508l-232.583 232.719c-1.333 1.207-2.806 2.311-4.377 3.272l-0.129 0.073-0.887 0.614c-2.699 1.412-5.893 2.244-9.281 2.253h-435.544c-0.061 0-0.133 0-0.205 0-40.38 0-73.114-32.734-73.114-73.114 0 0 0 0 0 0v0-877.909c0.078-40.273 32.704-72.9 72.97-72.977h616.182c40.273 0.078 72.9 32.704 72.977 72.97v697.078c0.002 0.108 0.003 0.235 0.003 0.363 0 1.368-0.125 2.706-0.365 4.004l0.021-0.135zM690.247 727.414h-126.293c-18.851 0-34.133 15.282-34.133 34.133v0 126.43zM689.086-21.403h-616.175c0 0 0 0 0 0-17.055 0-30.886 13.807-30.925 30.853v877.435c0.077 17.048 13.877 30.848 30.917 30.925h414.522v-156.058c0.271-42.087 34.413-76.109 76.52-76.186h156.133v-676.318c-0.155-16.961-13.94-30.652-30.924-30.652-0.024 0-0.049 0-0.073 0h0.004zM147.868 485.409h458.547c11.122 0.653 19.895 9.832 19.895 21.060s-8.773 20.407-19.837 21.058l-0.057 0.003h-458.547c-11.122-0.653-19.895-9.832-19.895-21.060s8.773-20.407 19.837-21.058l0.057-0.003zM627.441 371.54c0 11.65-9.444 21.094-21.094 21.094v0h-458.479c-0.358 0.022-0.778 0.034-1.2 0.034-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.422 0 0.841 0.012 1.257 0.037l-0.057-0.003h458.547c11.597 0.039 20.987 9.429 21.026 21.022v0.004z" />
-<glyph unicode="&#xe91a;" glyph-name="no-selected" horiz-adv-x="1084" d="M1083.597 569.924l-292.591-254.635 86.699-379.29-335.94 205.892-335.94-205.892 86.699 379.29-292.591 254.635 390.076 32.495 151.689 357.581 151.689-357.581zM547.226 239.445l205.892-119.194-54.204 232.994 178.79 157.013-238.387 21.709-92.092 216.747-92.092-216.747-238.387-21.709 178.79-157.013-54.204-232.926z" />
-<glyph unicode="&#xe91b;" glyph-name="edit-pencil" d="M1009.113 723.692l-221.42 221.342c-6.215 8.992-16.469 14.809-28.081 14.809s-21.867-5.817-28.007-14.696l-0.074-0.113q-329.413-329.255-658.905-658.59c-8.041-7.886-13.673-18.202-15.706-29.759l-0.048-0.331c-13.154-66.481-26.703-132.962-40.094-199.444-5.278-26.23-10.87-52.539-15.754-78.769-0.809-2.724-1.274-5.854-1.274-9.093 0-18.271 14.812-33.083 33.083-33.083 0.531 0 1.060 0.013 1.585 0.037l-0.074-0.003c2.442 0.394 7.089 1.103 11.737 2.048q137.61 27.727 275.141 55.138c11.511 2.255 21.454 7.857 29.050 15.737l0.016 0.017q329.255 329.57 658.668 658.747c9.005 6.196 14.834 16.446 14.834 28.056 0 11.544-5.761 21.742-14.566 27.875l-0.111 0.073zM622.277 738.186l65.063-64.985-388.017-388.332-65.063 65.221zM414.641 169.236l-65.221 65.3 388.332 388.254 65.3-65.221zM851.653 605.538l-182.114 182.036 90.821 90.742 182.351-182.272z" />
-<glyph unicode="&#xe91c;" glyph-name="collapse" d="M981.052 960c-11.768-0.022-22.414-4.806-30.117-12.528l-305.695-305.816v201.487c0 23.62-19.147 42.767-42.767 42.767s-42.767-19.147-42.767-42.767v0-304.429c-0.002-0.154-0.003-0.336-0.003-0.518 0-14.645 7.392-27.563 18.649-35.227l0.148-0.095 1.325-0.843 0.542-0.301 1.205-0.663 0.663-0.361 1.084-0.542 0.783-0.422 0.904-0.422 1.144-0.482h0.542l1.506-0.542h0.361l1.626-0.542h0.361l1.687-0.482 1.807-0.422h313.224c23.62 0 42.767 19.147 42.767 42.767s-19.147 42.767-42.767 42.767v0h-201.547l305.574 305.815c7.052 7.603 11.379 17.821 11.379 29.049 0 23.215-18.498 42.11-41.558 42.75l-0.059 0.001zM42.767 960c-23.565-0.072-42.641-19.192-42.641-42.767 0-11.809 4.786-22.499 12.524-30.238v0l305.453-305.875h-201.608c-23.62 0-42.767-19.147-42.767-42.767s19.147-42.767 42.767-42.767v0h304.791c0.012 0 0.026 0 0.041 0 5.783 0 11.296 1.151 16.325 3.236l-0.283-0.104 1.687 0.723h0.361l1.385 0.663h0.602l1.144 0.602 0.723 0.422 0.904 1.084 0.964 0.602 0.602 0.301 1.205 0.843h0.361c10.091 7.783 16.528 19.878 16.528 33.475 0 0.493-0.008 0.983-0.025 1.472l0.002-0.071v304.309c0 23.62-19.147 42.767-42.767 42.767s-42.767-19.147-42.767-42.767v0-201.487l-305.272 305.754c-7.718 7.776-18.411 12.589-30.229 12.589-0.003 0-0.007 0-0.010 0h0.001zM602.353 400.474c-19.099-0.006-35.271-12.531-40.757-29.815l-0.083-0.303q-0.602-1.928-1.024-3.976c-0.538-2.554-0.846-5.488-0.846-8.494 0-0.169 0.001-0.338 0.003-0.506v0.026-304.55c0-23.62 19.147-42.767 42.767-42.767s42.767 19.147 42.767 42.767v0 201.487l305.574-305.815c7.899-9.426 19.677-15.377 32.845-15.377 23.62 0 42.767 19.147 42.767 42.767 0 13.168-5.951 24.946-15.31 32.791l-0.066 0.054-305.574 305.815h201.547c23.62 0 42.767 19.147 42.767 42.767s-19.147 42.767-42.767 42.767v0h-304.61zM116.375 400.474c-23.62 0-42.767-19.147-42.767-42.767s19.147-42.767 42.767-42.767v0h201.788l-305.634-305.935c-7.738-7.739-12.523-18.43-12.523-30.238 0-23.618 19.144-42.764 42.761-42.767v0c11.77 0.007 22.421 4.795 30.116 12.527l305.515 305.817v-201.487c0-23.62 19.147-42.767 42.767-42.767s42.767 19.147 42.767 42.767v0 304.309c0.060 0.841 0.095 1.823 0.095 2.813 0 1.491-0.078 2.965-0.231 4.416l0.015-0.181c0 0.663 0 1.385-0.361 2.048s0 0 0 0.301 0 1.205-0.422 1.747v0 0c0 0.602-0.301 1.144-0.482 1.747v0.482l-0.542 1.506v0.361l-0.602 1.566v0.422l-0.602 1.385-0.301 0.663-0.602 1.205-0.361 0.663-1.747 1.385v0.783l-0.602 0.964-0.843 1.205-0.301 0.422-1.265 1.626c-7.892 9.662-19.806 15.782-33.15 15.782-0.014 0-0.028 0-0.042 0h-305.090z" />
-<glyph unicode="&#xe91d;" glyph-name="info1" d="M870.4 88.849c-89.912-94.275-216.492-152.895-356.763-152.895-2.376 0-4.748 0.017-7.115 0.050l0.359-0.004c-2.939-0.066-6.401-0.103-9.873-0.103-137.714 0-261.698 58.783-348.23 152.625l-0.297 0.327c-91.692 88.058-148.661 211.677-148.661 348.601 0 4.646 0.066 9.277 0.196 13.892l-0.015-0.679c-0.016 1.485-0.025 3.239-0.025 4.996 0 139.475 56.776 265.689 148.478 356.791l0.027 0.027c88.751 91.164 212.659 147.718 349.776 147.718 4.833 0 9.65-0.070 14.449-0.21l-0.705 0.016c1.584 0.018 3.455 0.028 5.329 0.028 139.771 0 266.359-56.443 358.215-147.78l-0.023 0.023c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.109-141.545-60.429-269.070-153.571-361.579l-0.029-0.029zM798.72 735.881c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.128 0.012-2.461 0.019-3.796 0.019-111.434 0-211.909-46.924-282.743-122.090l-0.181-0.194c-75.725-71.739-122.855-173.006-122.88-285.281v-0.005c-0.040-2.039-0.062-4.443-0.062-6.852 0-110.162 47.279-209.281 122.653-278.173l0.29-0.261c67.293-78.2 166.386-127.415 276.974-127.415 1.627 0 3.251 0.011 4.873 0.032l-0.246-0.003c1.128-0.012 2.461-0.019 3.796-0.019 111.434 0 211.909 46.924 282.743 122.090l0.181 0.194c75.725 71.739 122.855 173.006 122.88 285.281v0.005c0.282 5.423 0.443 11.773 0.443 18.161 0 107.308-45.379 204.017-117.994 271.984l-0.209 0.193zM558.080 190.771h-102.4v305.63h102.4zM558.080 598.323h-102.4v101.922h102.4z" />
-<glyph unicode="&#xe91e;" glyph-name="expandIcon" horiz-adv-x="1023" d="M34.274 960c-18.703-0.552-33.722-15.571-34.273-34.222l-0.001-0.052v-204.8c0-18.796 15.237-34.033 34.033-34.033s34.033 15.237 34.033 34.033v122.94l283.106-283.106c6.294-7.188 15.489-11.703 25.738-11.703 18.862 0 34.153 15.291 34.153 34.153 0 10.249-4.514 19.444-11.663 25.704l-0.039 0.034-283.106 283.106h122.519c0.477-0.024 1.035-0.037 1.596-0.037 18.833 0 34.1 15.267 34.1 34.1 0 18.272-14.371 33.187-32.426 34.060l-0.078 0.003h-207.691zM781.192 960c-18.121-0.892-32.476-15.801-32.476-34.063 0-18.834 15.268-34.102 34.102-34.102 0.572 0 1.141 0.014 1.706 0.042l-0.080-0.003h122.458l-283.106-283.106c-7.188-6.294-11.703-15.489-11.703-25.738 0-18.862 15.291-34.153 34.153-34.153 10.249 0 19.444 4.514 25.704 11.663l0.034 0.039 283.106 283.106v-122.94c0-18.796 15.237-34.033 34.033-34.033s34.033 15.237 34.033 34.033v204.8c-0.552 18.703-15.571 33.722-34.222 34.273l-0.052 0.001h-207.691zM350.931 335.119l-283.106-283.106v123.061c0 18.796-15.237 34.033-34.033 34.033s-34.033-15.237-34.033-34.033v0-204.8c0.552-18.703 15.571-33.722 34.222-34.273l0.052-0.001h207.872c18.134 0.876 32.504 15.791 32.504 34.063 0 18.833-15.267 34.1-34.1 34.1-0.561 0-1.12-0.014-1.674-0.040l0.078 0.003h-122.278l283.106 283.106c7.188 6.294 11.703 15.489 11.703 25.738 0 18.862-15.291 34.153-34.153 34.153-10.249 0-19.444-4.514-25.704-11.663l-0.034-0.039zM622.472 337.167c-6.138-6.227-9.929-14.783-9.929-24.224 0-10.23 4.451-19.421 11.522-25.742l0.033-0.029 283.106-283.106h-122.82c-0.486 0.025-1.054 0.039-1.626 0.039-18.834 0-34.102-15.268-34.102-34.102 0-18.262 14.355-33.171 32.396-34.060l0.080-0.003h207.872c18.703 0.552 33.722 15.571 34.273 34.222l0.001 0.052v204.8c0 18.796-15.237 34.033-34.033 34.033s-34.033-15.237-34.033-34.033v0-122.94l-283.106 283.106c-6.585 6.833-15.816 11.077-26.038 11.077-9.18 0-17.561-3.423-23.936-9.062l0.038 0.033z" />
-<glyph unicode="&#xe91f;" glyph-name="advance-search" d="M5.666 846.199h565.726v-113.801h-565.726zM226.304 618.667h113.118v-341.333h-113.118v113.801h-226.304v113.801h226.304zM5.666 163.533h339.422v-113.801h-339.422zM1024 391.066h-565.726v113.801h565.726zM565.726-64.068h-113.118v341.333h113.118v-113.801h452.608v-113.801h-452.608zM684.51 618.598v341.333h113.118v-113.801h226.372v-113.801h-226.304v-113.664z" />
-<glyph unicode="&#xe920;" glyph-name="help-support-icon" d="M24.404-39.62v500.663c7.263 263.632 222.708 474.577 487.422 474.577 0.061 0 0.123 0 0.184 0h-0.010c0.159 0 0.348 0 0.537 0 268.996 0 487.059-218.064 487.059-487.059 0-0.189 0-0.378 0-0.567v0.030c0-0.005 0-0.012 0-0.018 0-267.818-215.92-485.204-483.178-487.576l-0.225-0.002zM209.69 757.892c-78.336-75.73-127.926-180.769-131.054-297.395l-0.012-0.575v-446.492h436.642c237.503 3.879 428.715 196.628 430.108 434.362l0.001 0.135c0 0.072 0 0.158 0 0.244 0 239.239-193.941 433.18-433.18 433.18-0.069 0-0.137 0-0.206 0h0.011c-0.526 0.002-1.148 0.004-1.77 0.004-117.182 0-223.352-47.145-300.579-123.502l0.040 0.039zM430.376 169.802c-9.4 9.565-15.203 22.692-15.203 37.175 0 1.074 0.032 2.14 0.095 3.198l-0.007-0.146c0 35.594 19.504 53.636 58.511 53.636 1.382 0.111 2.991 0.174 4.616 0.174 14.983 0 28.711-5.372 39.364-14.295l-0.096 0.078c9.391-9.3 15.206-22.197 15.206-36.452 0-1.071-0.033-2.134-0.097-3.188l0.007 0.145c0.043-0.798 0.067-1.732 0.067-2.672 0-14.533-5.854-27.698-15.333-37.266l0.004 0.004c-10.46-9.174-24.257-14.771-39.36-14.771-1.454 0-2.897 0.052-4.325 0.154l0.192-0.011c-1.274-0.096-2.759-0.15-4.257-0.15-15.088 0-28.882 5.54-39.458 14.696l0.076-0.064zM431.595 323.249v22.673c-0.054 1.36-0.085 2.957-0.085 4.561 0 22.193 5.931 43.001 16.294 60.926l-0.313-0.587c14.891 21.463 33.307 39.335 54.586 53.175l0.756 0.461c23.198 14.937 43.222 32.016 60.715 51.421l0.234 0.264c8.576 11.788 13.719 26.553 13.719 42.52 0 0.565-0.006 1.129-0.019 1.692l0.002-0.084c0.042 0.79 0.066 1.714 0.066 2.644 0 17.701-8.717 33.365-22.092 42.935l-0.159 0.108c-16.135 10.183-35.766 16.225-56.809 16.225-2.486 0-4.953-0.084-7.397-0.25l0.331 0.018c-0.359 0.002-0.784 0.003-1.209 0.003-24.414 0-47.997-3.564-70.255-10.2l1.738 0.445c-25.038-7.511-45.8-15.383-65.882-24.49l3.275 1.329-33.352 62.461c49.648 25.277 108.273 40.086 170.356 40.086 0.723 0 1.446-0.002 2.169-0.006h-0.111c3.217 0.184 6.98 0.289 10.767 0.289 41.961 0 80.918-12.865 113.141-34.867l-0.692 0.446c27.87-20.37 45.77-52.945 45.77-89.7 0-1.498-0.030-2.99-0.089-4.473l0.007 0.213c0.013-0.65 0.020-1.417 0.020-2.185 0-16.281-3.25-31.803-9.138-45.952l0.292 0.792c-6.752-15.309-15.605-28.426-26.379-39.692l0.048 0.051c-18.148-17.617-38.024-33.667-59.28-47.807l-1.523-0.953c-18.904-12.198-35.146-26.393-49.097-42.614l-0.247-0.294c-7.885-11.78-12.584-26.272-12.584-41.861 0-1.38 0.037-2.752 0.11-4.114l-0.008 0.19v-15.847z" />
-<glyph unicode="&#xe921;" glyph-name="back-arrow" d="M1024 512v-128h-780.8l358.4-358.4-89.6-89.6-512 512 512 512 89.6-89.6-358.4-358.4z" />
-<glyph unicode="&#xe922;" glyph-name="home-icon" horiz-adv-x="1173" d="M1165.449 507.733c-6.884-9.515-17.954-15.633-30.454-15.633-8.286 0-15.943 2.689-22.148 7.241l0.105-0.073-526.541 378.743-526.268-378.743c-6.109-4.423-13.753-7.074-22.016-7.074-20.873 0-37.794 16.921-37.794 37.794 0 12.61 6.176 23.778 15.668 30.644l0.111 0.076 548.25 394.513h1.297c0.929 0.695 1.982 1.332 3.095 1.863l0.113 0.049 3.413 1.707h3.209l3.959 1.161h17.476l3.755-1.297 2.799-1.297 3.755-2.048h1.161l548.591-394.923c9.523-6.912 15.644-18.007 15.644-30.531 0-8.307-2.693-15.984-7.252-22.208l0.074 0.106zM1010.483 505.481c-20.774 0-37.615-16.841-37.615-37.615v0-456.636h-212.924v229.239c0.022 1.024 0.034 2.232 0.034 3.442 0 95.878-77.724 173.602-173.602 173.602s-173.602-77.724-173.602-173.602c0-1.21 0.012-2.418 0.037-3.622l-0.003 0.18v-229.239h-212.924v456.636c0.043 0.677 0.068 1.468 0.068 2.265 0 20.774-16.841 37.615-37.615 37.615s-37.615-16.841-37.615-37.615c0-0.797 0.025-1.588 0.074-2.373l-0.005 0.107v-494.251c0-20.774 16.841-37.615 37.615-37.615v0h288.085c20.774 0 37.615 16.841 37.615 37.615v0 266.854c0 54.33 44.043 98.372 98.372 98.372s98.372-44.043 98.372-98.372v0-266.854c0-20.774 16.841-37.615 37.615-37.615v0h288.085c20.774 0 37.615 16.841 37.615 37.615v0 494.251c0 0 0 0 0 0 0 20.774-16.841 37.615-37.615 37.615-0.024 0-0.048 0-0.072 0h0.004z" />
-<glyph unicode="&#xe923;" glyph-name="copy" d="M573.676 737.398c48.651-1.241 87.769-40.358 89.007-88.893l0.002-0.117v-623.301c-1.241-48.651-40.358-87.769-88.893-89.007l-0.117-0.002h-445.282c-48.651 1.241-87.769 40.358-89.007 88.893l-0.002 0.117v623.301c1.241 48.651 40.358 87.769 88.893 89.007l0.117 0.002zM573.676 25.088v623.301h-445.282v-623.301zM885.366 960c48.651-1.241 87.769-40.358 89.007-88.893l0.002-0.117v-623.301c-1.241-48.651-40.358-87.769-88.893-89.007l-0.117-0.002h-445.282c-48.651 1.241-87.769 40.358-89.007 88.893l-0.002 0.117v623.301c1.241 48.651 40.358 87.769 88.893 89.007l0.117 0.002zM885.366 247.69v623.301h-445.282v-623.301z" />
-<glyph unicode="&#xe924;" glyph-name="edit" d="M1009.113 723.692l-221.42 221.342c-6.215 8.992-16.469 14.809-28.081 14.809s-21.867-5.817-28.007-14.696l-0.074-0.113q-329.413-329.255-658.905-658.59c-8.041-7.886-13.673-18.202-15.706-29.759l-0.048-0.331c-13.154-66.481-26.703-132.962-40.094-199.444-5.278-26.23-10.87-52.539-15.754-78.769-0.809-2.724-1.274-5.854-1.274-9.093 0-18.271 14.812-33.083 33.083-33.083 0.531 0 1.060 0.013 1.585 0.037l-0.074-0.003c2.442 0.394 7.089 1.103 11.737 2.048q137.61 27.727 275.141 55.138c11.511 2.255 21.454 7.857 29.050 15.737l0.016 0.017q329.255 329.57 658.668 658.747c9.005 6.196 14.834 16.446 14.834 28.056 0 11.544-5.761 21.742-14.566 27.875l-0.111 0.073zM622.277 738.186l65.063-64.985-388.017-388.332-65.063 65.221zM414.641 169.236l-65.221 65.3 388.332 388.254 65.3-65.221zM851.653 605.538l-182.114 182.036 90.821 90.742 182.351-182.272z" />
-<glyph unicode="&#xe925;" glyph-name="expand" d="M910.257 49.743v329.964h113.743v-329.964c-1.583-62.171-51.571-112.16-113.594-113.74l-0.149-0.003h-796.514c-0.867-0.026-1.888-0.041-2.911-0.041-30.408 0-57.746 13.143-76.644 34.058l-0.080 0.090c-20.819 20.215-33.825 48.38-34.107 79.583v796.489c1.583 62.171 51.571 112.16 113.594 113.74l0.149 0.003h329.964v-113.743h-329.964v-796.436zM625.743 960h398.257v-398.257h-113.743v204.8l-557.529-557.529-79.636 79.636 557.529 557.529h-204.8z" />
-<glyph unicode="&#xe926;" glyph-name="eye" d="M1021.901 482.406c-56.218 70.042-257.024 298.394-504.934 298.394s-448.717-228.352-504.934-298.394c-7.512-9.348-12.057-21.359-12.057-34.432s4.545-25.084 12.141-34.54l-0.084 0.108c56.269-69.99 257.075-298.342 504.934-298.342s448.717 228.352 504.934 298.394c6.992 9.53 11.189 21.491 11.189 34.432s-4.197 24.902-11.304 34.596l0.115-0.164zM516.966 184.013c-211.149 0-393.626 204.288-444.109 263.936 49.357 60.826 232.96 263.936 444.109 263.936s393.626-203.11 444.109-263.936c-50.483-60.774-232.909-263.885-444.109-263.885zM517.018 652.288c-112.825 0-204.288-91.463-204.288-204.288s91.463-204.288 204.288-204.288c112.825 0 204.288 91.463 204.288 204.288v0c-0.291 112.708-91.58 203.998-204.26 204.288h-0.028zM517.018 312.627c-74.793 0-135.424 60.631-135.424 135.424s60.631 135.424 135.424 135.424c74.793 0 135.424-60.631 135.424-135.424v0c-0.145-74.734-60.69-135.279-135.41-135.424h-0.014z" />
-<glyph unicode="&#xe927;" glyph-name="favorite-selected" d="M503.077 163.767l-311.881-191.195 80.457 352.183-271.653 236.471 362.203 30.208 140.873 332.069 140.873-332.069 362.203-30.208-271.653-236.471 80.457-352.183z" />
-<glyph unicode="&#xe928;" glyph-name="filter" d="M464.457-27.429c-8.483 0.276-16.439 2.242-23.637 5.569l0.378-0.157c-18.938 9.278-31.748 28.413-31.748 50.539 0 0.232 0.001 0.464 0.004 0.696v-0.035 215.259c1.354-20.664 13.81-38.128 31.411-46.594l0.333-0.144c6.82-3.174 14.777-5.141 23.163-5.41l0.096-0.002c14.016 0.403 26.619 6.132 35.923 15.224l-0.010-0.010 95.086 84.553c11.51 10.554 18.772 25.58 19.017 42.306l0.001 0.044v-219.429c-0.266-16.743-7.524-31.739-18.974-42.237l-0.043-0.039-95.086-84.553c-9.26-9.198-21.856-15.048-35.814-15.576l-0.099-0.003z" />
-<glyph unicode="&#xe929;" glyph-name="sort-asc" d="M474.821 566.705l-59.156 66.166 306.727 321.378 301.529-317.991-63.015-63.803-199.444 210.786v-847.242h-87.198v841.964zM571.077-63.921v74.831h-570.998v-74.831zM489.314 94.405v73.413h-488.842v-73.413zM406.686 252.731v73.255h-405.977v-73.255zM0 483.21v-72.231h324.608v72.231zM0.945 568.596h241.349v73.57h-241.349zM0.158 800.65v-73.886h160.374v73.886zM77.666 960h-76.879v-75.697h76.879z" />
-<glyph unicode="&#xe92a;" glyph-name="sort-dsc" d="M964.844 323.623l59.156-66.166-306.727-321.457-301.607 318.070 63.015 63.803 199.444-210.865v847.321h87.276v-841.964zM571.077 960v-74.831h-570.998v74.831zM489.314 801.753v-73.413h-488.842v73.413zM406.764 643.348v-73.255h-406.055v73.255zM0 412.79v72.231h324.608v-72.231zM0.945 327.483h241.349v-73.57h-241.349zM0.158 95.35v73.886h160.374v-73.886zM77.745-63.842h-76.958v75.697h76.958z" />
-<glyph unicode="&#xe92b;" glyph-name="collapse-icon" d="M910.199 49.801v329.933h113.801v-329.933c-1.559-62.213-51.587-112.242-113.654-113.798l-0.147-0.003h-796.399c-0.867-0.026-1.887-0.041-2.91-0.041-30.423 0-57.775 13.154-76.677 34.084l-0.080 0.090c-20.839 20.217-33.856 48.396-34.133 79.615v796.519c1.559 62.213 51.587 112.242 113.654 113.798l0.147 0.003h329.933v-113.801h-329.933v-796.467zM625.801 960h398.199v-398.199h-113.801v204.8l-557.534-557.534-79.667 79.667 557.534 557.534h-204.8z" />
-<glyph unicode="&#xe92c;" glyph-name="info-icon" d="M148.48 806.4c89.783 94.711 216.497 153.644 356.975 153.644 2.301 0 4.598-0.016 6.892-0.047l-0.347 0.004c0.456 0.001 0.996 0.002 1.535 0.002 141.099 0 268.958-56.691 362.041-148.538l-0.056 0.055c91.718-88.633 148.663-212.745 148.663-350.158 0-4.699-0.067-9.382-0.199-14.049l0.015 0.687c0.016-1.503 0.025-3.28 0.025-5.058 0-139.993-56.752-266.73-148.504-358.46l-0.001-0.001c-88.633-91.718-212.745-148.663-350.158-148.663-4.699 0-9.382 0.067-14.049 0.199l0.687-0.015c-1.53-0.017-3.337-0.026-5.146-0.026-279.942 0-506.88 226.938-506.88 506.88 0 1.809 0.009 3.617 0.028 5.421l-0.002-0.275c-0.015 1.448-0.024 3.16-0.024 4.873 0 138.44 56.826 263.608 148.425 353.45l0.079 0.077zM563.2 396.8v307.2h-102.4v-307.2zM563.2 192v102.4h-102.4v-102.4z" />
-<glyph unicode="&#xe92d;" glyph-name="folder-group" horiz-adv-x="1100" d="M1062.042 846.079h-379.221c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-189.611c-20.886-0.096-37.792-17.002-37.888-37.879v-75.87h-75.861c-20.886-0.096-37.792-17.002-37.888-37.879v-75.87h-75.861c-20.923-0.048-37.877-16.972-37.973-37.879v-720.564c0.096-20.886 17.002-37.792 37.879-37.888h796.425c20.886 0.096 37.792 17.002 37.888 37.879v75.87h75.861c20.886 0.096 37.792 17.002 37.888 37.879v75.87h75.861c20.886 0.096 37.792 17.002 37.888 37.879v606.729c-0.096 20.856-16.953 37.743-37.789 37.888h-0.014zM38.042 694.357h189.611c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.473-17.845 56.79-29.012 90.633-30.368l0.333-0.011h379.221v-75.861h-796.331v189.867zM834.458-26.198h-796.416v379.392h796.416zM948.293 87.551h-75.861v493.056c-0.096 20.886-17.002 37.792-37.879 37.888h-379.316c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-75.861v75.861h189.696c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.473-17.845 56.79-29.012 90.633-30.368l0.333-0.011h379.221v-606.891zM1062.042 201.301h-75.861v493.227c-0.096 20.886-17.002 37.792-37.879 37.888h-379.23c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-75.861v75.861h189.611c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.489-17.889 56.837-29.087 90.717-30.453l0.334-0.011h379.221v-606.891z" />
-<glyph unicode="&#xe92e;" glyph-name="file-path" d="M1023.867 682.238c-5.986 151.706-128.002 273.032-279.435 277.902l-0.458 0.012c-1.14 0.018-2.485 0.028-3.832 0.028-75.273 0-143.25-31.238-191.675-81.457l-0.077-0.081-497.186-503.945c-1.775-1.638-3.55-3.755-5.188-5.666-28.526-32.696-45.92-75.748-45.92-122.862 0-55.071 23.765-104.592 61.599-138.867l0.159-0.142c34.256-35.39 82.113-57.435 135.121-57.685h0.047c51.734 0.118 98.444 21.53 131.848 55.934l0.044 0.045 413.901 419.908c19.088 18.922 30.911 45.148 30.925 74.135v0.003c-0.333 28.944-12.252 55.042-31.326 73.924l-0.009 0.009c-18.604 19.242-44.284 31.542-72.836 32.693l-0.209 0.007c-1.207 0.053-2.623 0.083-4.046 0.083-27.924 0-53.127-11.651-71.012-30.357l-0.035-0.037-293.547-297.711 41.847-42.462 293.547 297.711c7.482 7.89 18.039 12.799 29.744 12.799 0.583 0 1.164-0.012 1.741-0.036l-0.083 0.003c13.019-0.644 24.602-6.302 32.954-15.067l0.019-0.020c8.367-8.057 13.664-19.251 13.993-31.684l0.001-0.060c-0.132-12.338-5.342-23.434-13.635-31.317l-0.019-0.018-415.812-422.093c-22.884-22.334-54.208-36.111-88.749-36.111-36.492 0-69.393 15.377-92.575 40.006l-0.060 0.065c-24.727 24.182-40.961 56.958-43.863 93.489l-0.033 0.515c-0.154 2.231-0.242 4.835-0.242 7.46 0 31.724 12.819 60.453 33.56 81.291l-0.004-0.004 497.459 504.013c38.107 39.154 91.316 63.445 150.198 63.445 1.148 0 2.294-0.009 3.437-0.028l-0.172 0.002c60.335-1.066 114.563-26.346 153.548-66.506l0.052-0.054c2.253-2.048 4.506-4.301 6.827-6.485 37.565-38.281 60.751-90.786 60.751-148.707 0-42.787-12.653-82.62-34.422-115.959l0.499 0.815c-12.659 8.148-28.117 12.99-44.705 12.99-23.587 0-44.887-9.789-60.060-25.525l-0.024-0.025-451.106-467.763c-15.038-15.66-24.298-36.967-24.298-60.437 0-24.189 9.836-46.081 25.728-61.893l0.004-0.004c15.282-15.225 36.364-24.638 59.645-24.638 23.986 0 45.639 9.993 61.022 26.042l0.029 0.030 450.56 468.036c14.501 15.391 23.412 36.189 23.412 59.068 0 9.057-1.396 17.787-3.986 25.988l0.166-0.611c35.095 44.585 56.288 101.548 56.288 163.461 0 1.55-0.013 3.096-0.040 4.639l0.003-0.232z" />
-<glyph unicode="&#xe92f;" glyph-name="arrow-down-2" horiz-adv-x="745" d="M372.5-64l-372.395 372.395h279.296v651.605h186.197v-651.605h279.296z" />
-<glyph unicode="&#xe930;" glyph-name="image" horiz-adv-x="1280" d="M139.098-63.999c-77.843 4.944-139.106 69.289-139.106 147.943 0 0.669 0.004 1.337 0.013 2.003l-0.001-0.101v723.541c-0.015 0.782-0.023 1.704-0.023 2.627 0 78.464 60.933 142.697 138.061 147.961l0.458 0.025h1002.411c77.843-4.944 139.106-69.289 139.106-147.943 0-0.669-0.004-1.337-0.013-2.003l0.001 0.101v-724.395c0.008-0.577 0.013-1.258 0.013-1.94 0-78.396-60.898-142.569-137.969-147.795l-0.455-0.025zM1140.144 899.756h-1001.045c-46.808-3.481-83.466-42.313-83.466-89.708 0-0.472 0.004-0.943 0.011-1.414l-0.001 0.071v-722.091c-0.002-0.205-0.003-0.446-0.003-0.689 0-47.646 37.083-86.63 83.961-89.666l0.265-0.014h1001.045c46.806 3.483 83.463 42.314 83.463 89.708 0 0.382-0.002 0.764-0.007 1.145l0.001-0.058v722.347c0.002 0.205 0.003 0.446 0.003 0.689 0 47.646-37.083 86.63-83.961 89.666l-0.265 0.014zM1085.189 116.737h-891.648l250.88 349.184 139.093-180.736 196.267 273.067z" />
-<glyph unicode="&#xe931;" glyph-name="Revert" horiz-adv-x="1365" d="M759.979-63.988c-12.045 0.019-22.826 5.417-30.072 13.919l-0.046 0.055-403.576 469.353c-6.508 7.689-10.464 17.719-10.464 28.672s3.956 20.983 10.518 28.737l-0.054-0.065 403.576 469.353c7.186 8.542 17.882 13.933 29.836 13.933 5.269 0 10.293-1.047 14.876-2.945l-0.258 0.095c15.261-6.701 25.725-21.682 25.725-39.106 0-0.228-0.002-0.456-0.005-0.683v0.034-214.799c318.593-32.557 565.056-299.457 565.056-623.923 0-5.124-0.061-10.233-0.184-15.327l0.014 0.756v-85.353c0.003-0.175 0.004-0.382 0.004-0.589 0-16.58-9.449-30.954-23.255-38.030l-0.241-0.112c-4.993-2.53-10.886-4.012-17.125-4.012-10.006 0-19.122 3.812-25.974 10.063l0.030-0.027-68.006 61.681c-113.98 104.479-263.326 172.029-428.162 182.825l-2.099 0.11v-212.209c0.003-0.182 0.004-0.396 0.004-0.611 0-17.467-10.457-32.492-25.452-39.156l-0.273-0.108c-4.144-1.603-8.939-2.532-13.951-2.532-0.157 0-0.313 0.001-0.469 0.003h0.024zM759.979 277.365c202.025-0.927 385.735-78.587 523.645-205.31l-0.562 0.51 1.385-1.265c0.030 2.11 0.047 4.602 0.047 7.098 0 292.851-232.984 531.286-523.708 540.060l-0.808 0.019c-22.436 0.663-40.372 19.010-40.372 41.545 0 0.387 0.005 0.773 0.016 1.158l-0.001-0.057v145.89l-308.585-359.002 308.706-359.002v145.649c-0.010 0.347-0.016 0.755-0.016 1.165 0 22.494 17.869 40.814 40.187 41.54l0.067 0.002zM579.694-63.988c-0.296-0.005-0.645-0.008-0.994-0.008-14.548 0-27.861 5.29-38.119 14.051l0.081-0.068-527.059 469.353c-8.382 6.813-13.694 17.122-13.694 28.672s5.312 21.859 13.626 28.619l0.068 0.053 527.059 469.353c10.562 8.708 24.232 13.988 39.136 13.988 13.218 0 25.467-4.154 35.51-11.228l-0.196 0.131c10.469-6.693 17.311-18.256 17.311-31.417 0-11.595-5.31-21.95-13.631-28.766l-0.066-0.052-494.833-440.681 494.833-440.681c8.362-6.879 13.654-17.227 13.654-28.812 0-13.153-6.822-24.713-17.12-31.335l-0.148-0.089c-9.638-6.933-21.679-11.088-34.691-11.088-0.256 0-0.511 0.002-0.766 0.005h0.039z" />
-<glyph unicode="&#xe932;" glyph-name="payment" horiz-adv-x="1178" d="M247.808-64c108.852 0.19 197.811 85.101 204.464 192.303l0.029 0.585c8.81 2.303 16.438 5.173 23.672 8.722l-0.735-0.326 1.195 0.614 109.227 62.532 204.732 105.984 101.683 63.386c16.25 10.217 30.289 20.586 43.507 31.888l-0.499-0.417 99.43 84.582 28.467 21.504c18.415 13.931 40.458 24.117 64.434 28.975l1.033 0.175 33.621 6.519c9.125 1.815 15.907 9.758 15.907 19.285 0 10.849-8.795 19.644-19.644 19.644-1.322 0-2.614-0.131-3.863-0.38l0.125 0.021-33.655-6.554c-31.168-6.269-58.637-18.973-82.081-36.716l0.502 0.364-29.355-22.221-100.284-85.333c-11.336-9.694-23.848-18.938-36.996-27.267l-1.335-0.79-101.103-62.942-203.401-105.267-109.227-62.601c-7.804-3.805-16.867-6.537-26.412-7.707l-0.416-0.042c-3.005-0.388-6.481-0.609-10.009-0.609-4.164 0-8.255 0.308-12.254 0.903l0.452-0.055-22.63 2.833h-5.461l-26.965-0.307c-17.46-0.341-33.851-4.589-48.439-11.901l0.652 0.296-30.72-15.394c-0.979-0.502-2.117-0.924-3.308-1.208l-0.105-0.021-22.289-5.359c-1.025-0.261-2.203-0.411-3.415-0.411-0.060 0-0.119 0-0.178 0.001h-13.064c-4.577 0.299-8.791 1.604-12.503 3.694l0.147-0.076c-1.626 1.224-2.947 2.763-3.89 4.534l-0.036 0.074-2.048 3.755 0.887 13.449c1.431 20.657 8.908 39.33 20.653 54.539l-0.173-0.233 2.116 2.765c6.508 8.451 14.155 15.621 22.797 21.422l0.345 0.218 22.733 15.087c0.718 0.479 1.341 0.962 1.93 1.484l-0.018-0.016c12.083 10.374 25.983 19.119 41.069 25.639l1.051 0.404 33.485 14.131c6.485 2.731 12.39 5.564 18.125 8.636l49.732 27.102c16.028 8.837 29.848 19.034 42.164 30.793l-0.077-0.073 44.373 42.155c7.913 7.571 12.831 18.215 12.831 30.008 0 12.283-5.336 23.32-13.816 30.92l-0.039 0.035-73.83 65.809c-14.97 13.268-34.781 21.37-56.485 21.37-4.338 0-8.6-0.324-12.763-0.948l0.469 0.058-67.721-10.24c-9.209-1.336-17.467-4.541-24.677-9.224l0.237 0.144-97.929-61.918c-12.731-8.178-21.184-22.057-21.741-37.944l-0.002-0.081-2.799-77.653c-0.021-0.523-0.033-1.137-0.033-1.753 0-8.513 2.253-16.499 6.196-23.396l-0.122 0.231c-28.342-12.996-52.243-31.149-71.453-53.456l-0.227-0.27-16.555 17.067c-9.546 9.787-15.973 22.655-17.653 36.975l-0.029 0.299-18.261 163.021c-0.219 2.33-0.344 5.038-0.344 7.776 0 25.396 10.762 48.278 27.975 64.334l0.052 0.048 269.21 234.052c1.762 1.607 4.003 2.718 6.484 3.097l0.069 0.009 818.074 119.876c9.546 1.44 16.78 9.586 16.78 19.422 0 10.841-8.789 19.63-19.63 19.63-1.006 0-1.994-0.076-2.959-0.221l0.108 0.013-818.176-119.945c-10.429-1.585-19.596-6.101-26.874-12.67l0.045 0.040-269.244-234.121c-25.308-23.432-41.098-56.832-41.098-93.919 0-4.031 0.187-8.019 0.552-11.955l-0.038 0.505 18.295-163.43c2.733-23.682 13.137-44.534 28.624-60.403l-0.020 0.021 21.606-22.118c-16.581-28.956-26.359-63.649-26.359-100.625 0-113.308 91.818-205.171 205.109-205.244h0.007zM199.748 429.329c0.062 2.605 1.388 4.887 3.387 6.263l0.026 0.017 97.997 62.327c2.575 1.71 5.632 2.915 8.925 3.399l0.121 0.015 67.755 10.24c2.006 0.311 4.32 0.489 6.675 0.489 11.637 0 22.26-4.339 30.34-11.488l-0.049 0.042 73.762-65.741c0.436-0.386 0.711-0.945 0.717-1.569v-0.001c0-0.015 0.001-0.033 0.001-0.051 0-0.625-0.262-1.188-0.682-1.586l-0.001-0.001-44.373-42.223c-9.828-9.41-20.924-17.623-32.974-24.329l-0.818-0.418-49.596-27.034c-4.813-2.594-9.728-4.881-14.643-6.827l-10.581-4.471c-25.996 12.512-56.523 19.822-88.757 19.822-16.16 0-31.891-1.837-46.995-5.315l1.404 0.272-3.652 6.451c-0.649 1.109-1.033 2.442-1.033 3.865 0 0.129 0.003 0.258 0.009 0.386l-0.001-0.018zM197.939 299.622c14.732 4.705 31.677 7.417 49.256 7.417 13.696 0 27.008-1.646 39.748-4.752l-1.145 0.236c-9.142-5.686-17.031-11.457-24.462-17.754l0.295 0.244-21.777-14.438c-12.657-8.482-23.427-18.58-32.363-30.165l-0.234-0.316-2.116-2.765c-16.121-20.812-26.539-46.775-28.511-75.065l-0.024-0.438-1.297-19.183c-0.032-0.418-0.050-0.906-0.050-1.398 0-3.443 0.891-6.679 2.456-9.488l-0.051 0.099 4.642-8.431c3.658-6.797 8.518-12.486 14.35-16.976l0.123-0.091c10.164-7.211 22.742-11.647 36.339-11.979l0.081-0.002h13.073c0.097-0.001 0.211-0.001 0.326-0.001 4.602 0 9.065 0.598 13.315 1.721l-0.362-0.081 21.777 5.222c4.531 1.103 8.5 2.602 12.221 4.513l-0.308-0.144 30.413 15.326c8.957 4.52 19.49 7.266 30.64 7.508l26.294 0.308 23.142-2.799c3.004-0.41 6.042-0.683 9.079-0.887-8.552-84.333-79.182-149.595-165.055-149.595-91.599 0-165.854 74.255-165.854 165.854 0 73.81 48.214 136.358 114.866 157.869l1.174 0.327z" />
-<glyph unicode="&#xe933;" glyph-name="edit-ico" d="M796.708 334.936c-7.658 3.056-14.361 1.715-20.096-4.017l-36.739-36.739c-3.44-3.434-5.173-7.652-5.173-12.618v-72.332c0-25.261-8.973-46.872-26.956-64.865-17.998-17.984-39.608-26.976-64.865-26.976h-477.571c-25.255 0-46.878 8.993-64.865 26.976-17.988 17.992-26.976 39.602-26.976 64.865v477.559c0 25.257 8.989 46.878 26.976 64.867 17.988 17.984 39.61 26.976 64.865 26.976h477.575c8.416 0 17.029-1.148 25.828-3.446 6.902-2.294 13.012-0.766 18.363 4.592l28.118 28.126c4.596 4.586 6.309 10.139 5.167 16.643-1.148 6.12-4.596 10.523-10.336 13.199-20.667 9.554-43.048 14.353-67.155 14.353h-477.561c-45.533 0-84.473-16.168-116.811-48.504-32.328-32.34-48.496-71.271-48.496-116.809v-477.569c0-45.531 16.168-84.467 48.498-116.803 32.336-32.344 71.279-48.512 116.811-48.512h477.561c45.531 0 84.467 16.168 116.803 48.512 32.344 32.336 48.512 71.271 48.512 116.803v109.057c-0.002 8.050-3.836 13.593-11.478 16.663zM367.352 356.152v-165.301h165.318l385.725 385.723-165.316 165.309-385.727-385.732zM509.698 245.949v0l-32.147 0.014v55.088h-55.098v32.135l66.586 66.586 87.246-87.254-66.586-66.57zM761.682 640.292l-200.907-200.901c-6.502-6.516-12.819-6.703-18.94-0.579-6.118 6.124-5.931 12.437 0.577 18.936l200.907 200.903c6.5 6.512 12.803 6.701 18.94 0.577s5.917-12.435-0.577-18.936zM1007.932 744.182l-87.246 87.246c-10.712 10.716-23.715 16.074-39.029 16.074-15.31 0-28.319-5.358-39.025-16.074l-52.813-52.801 165.316-165.318 52.799 52.811c10.712 10.71 16.066 23.723 16.066 39.031s-5.356 28.315-16.068 39.031z" />
-<glyph unicode="&#xe934;" glyph-name="traingle-info" d="M0-12.8l512 921.6 512-921.6zM558.541 326.758v193.997h-93.082v-193.997zM558.541 132.762v96.973h-93.082v-97.024z" />
-<glyph unicode="&#xe935;" glyph-name="cash" horiz-adv-x="1536" d="M1499.731 960.043h-1463.381c-20.135-0.232-36.369-16.608-36.369-36.776 0-0.391 0.006-0.78 0.018-1.168l-0.001 0.057v-948.395c-0.011-0.331-0.017-0.72-0.017-1.111 0-20.151 16.244-36.508 36.351-36.692h1463.313c20.116 0.134 36.372 16.472 36.372 36.607 0 0.42-0.007 0.839-0.021 1.256l0.002-0.061v948.395c0.012 0.357 0.020 0.776 0.020 1.197 0 20.122-16.197 36.461-36.264 36.691h-0.022zM71.848 11.648v873.813h1391.531v-873.813zM1311.571 616.832c-47.519 2.945-84.943 42.205-84.943 90.205 0 1.648 0.044 3.286 0.131 4.912l-0.010-0.227c0.005 0.229 0.008 0.498 0.008 0.768 0 19.888-16.123 36.011-36.011 36.011-0.003 0-0.006 0-0.009 0h-846.080c-0.002 0-0.005 0-0.008 0-19.888 0-36.011-16.123-36.011-36.011 0-0.27 0.003-0.539 0.009-0.808l-0.001 0.040c0.077-1.4 0.122-3.037 0.122-4.686 0-48-37.424-87.26-84.685-90.192l-0.258-0.013c-0.002 0-0.005 0-0.008 0-19.888 0-36.011-16.123-36.011-36.011 0-0.27 0.003-0.539 0.009-0.808l-0.001 0.040v-265.472c1.292-19.087 16.735-34.175 35.856-34.899l0.069-0.002c47.528-2.989 84.943-42.268 84.943-90.285 0-1.65-0.044-3.29-0.131-4.918l0.010 0.227c-0.005-0.229-0.008-0.498-0.008-0.768 0-19.841 16.084-35.925 35.925-35.925 0.033 0 0.066 0 0.099 0h846.075c0.028 0 0.061 0 0.094 0 19.841 0 35.925 16.084 35.925 35.925 0 0.27-0.003 0.539-0.009 0.808l0.001-0.040c-0.078 1.401-0.122 3.041-0.122 4.691 0 48.017 37.415 87.296 84.682 90.272l0.261 0.013c19.901 0.045 36.017 16.188 36.017 36.096 0 0.24-0.002 0.48-0.007 0.719l0.001-0.036v263.595c0.005 0.229 0.008 0.498 0.008 0.768 0 19.861-16.079 35.967-35.929 36.011h-0.004zM376.83 221.483c-11.953 61.685-57.25 110.37-116.010 127.038l-1.153 0.28v198.912c59.923 16.88 105.238 65.554 116.997 126.204l0.166 1.028h781.568c11.983-61.65 57.272-110.298 116.010-126.953l1.153-0.279v-198.912c-59.901-16.966-105.19-65.642-116.995-126.285l-0.167-1.033zM768.083 611.030c-89.427-0.29-161.843-72.706-162.133-162.105v-0.028c0.29-89.427 72.706-161.843 162.105-162.133h0.028c89.427 0.29 161.843 72.706 162.133 162.105v0.028c-0.29 89.427-72.706 161.843-162.105 162.133h-0.028z" />
-<glyph unicode="&#xe936;" glyph-name="atm-card" horiz-adv-x="1536" d="M1426.006 959.616h-1316.011c-61.396-2.91-110.072-53.395-110.072-115.249 0-1.483 0.028-2.96 0.083-4.43l-0.006 0.212v-784.299c-0.049-1.258-0.077-2.734-0.077-4.218 0-61.854 48.676-112.339 109.811-115.239l0.26-0.010h1316.011c61.396 2.91 110.072 53.395 110.072 115.249 0 1.483-0.028 2.96-0.083 4.43l0.006-0.212v784.299c0.049 1.258 0.077 2.734 0.077 4.218 0 61.854-48.676 112.339-109.811 115.239l-0.26 0.010zM1455.617 55.083c0.095-0.937 0.149-2.025 0.149-3.125 0-17.038-13.004-31.039-29.628-32.62l-0.132-0.010h-1316.011c-16.756 1.591-29.76 15.591-29.76 32.63 0 1.1 0.054 2.188 0.16 3.261l-0.011-0.136v381.44h1375.232zM80.385 839.381c-0.095 0.937-0.149 2.025-0.149 3.125 0 17.038 13.004 31.039 29.628 32.62l0.132 0.010h1316.011c16.756-1.591 29.76-15.591 29.76-32.63 0-1.1-0.054-2.188-0.16-3.261l0.011 0.136v-119.979h-1375.232zM1455.617 635.264v-114.603h-1375.232v114.603zM917.334 93.824h403.968c22.977 0.749 41.319 19.555 41.319 42.645 0 0.428-0.006 0.854-0.019 1.278l0.001-0.062v116.992c0.011 0.362 0.017 0.788 0.017 1.216 0 23.090-18.342 41.896-41.25 42.644l-0.069 0.002h-403.968c-22.939-0.795-41.233-19.582-41.233-42.643 0-0.429 0.006-0.856 0.019-1.281l-0.001 0.062v-116.992c-0.011-0.363-0.017-0.79-0.017-1.219 0-23.060 18.294-41.847 41.161-42.641l0.073-0.002z" />
-<glyph unicode="&#xe937;" glyph-name="copy-icon" horiz-adv-x="884" d="M791.291 773.806v-744.709h-744.441v-93.097h744.709c50.896 1.274 91.824 42.201 93.095 92.977l0.002 0.12v744.709zM93.097 960c-50.896-1.274-91.824-42.201-93.095-92.977l-0.002-0.12v-651.612c1.274-50.896 42.201-91.824 92.977-93.095l0.12-0.002h512c50.896 1.274 91.824 42.201 93.095 92.977l0.002 0.12v651.612c-1.274 50.896-42.201 91.824-92.977 93.095l-0.12 0.002zM93.097 215.291v651.612h512v-651.612z" />
-<glyph unicode="&#xe938;" glyph-name="divide-ico" horiz-adv-x="1053" d="M526.5 923.541c-69.746 0-126.811-57.065-126.811-126.811s57.065-126.811 126.811-126.811c69.746 0 126.811 57.065 126.811 126.811s-57.065 126.811-126.811 126.811zM50.958 543.108v-190.217h951.084v190.217h-951.084zM526.5 226.080c-69.746 0-126.811-57.065-126.811-126.811s57.065-126.811 126.811-126.811c69.746 0 126.811 57.065 126.811 126.811s-57.065 126.811-126.811 126.811z" />
-<glyph unicode="&#xe939;" glyph-name="estimate1" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM273.067 601.873c7.288 6.797 15.195 13.187 23.538 18.997l0.697 0.459c8.335 5.831 17.847 11.267 27.846 15.82l1.133 0.462c9.656 4.429 20.998 8.257 32.786 10.905l1.177 0.222c11.464 2.585 24.629 4.066 38.141 4.066 0.451 0 0.902-0.002 1.352-0.005h-0.069c0.45 0.005 0.983 0.007 1.516 0.007 17.991 0 35.287-2.976 51.423-8.463l-1.124 0.332c15.862-5.295 29.57-13.123 41.38-23.121l-0.181 0.15c11.419-9.805 20.633-21.826 27.033-35.433l0.273-0.646c6.261-13.505 9.913-29.312 9.913-45.971 0-0.638-0.005-1.275-0.016-1.911l0.001 0.096c0.022-0.86 0.034-1.874 0.034-2.89 0-15.611-2.931-30.538-8.272-44.26l0.285 0.832c-5.287-13.068-12.065-24.341-20.317-34.356l0.178 0.222c-7.905-9.538-16.665-17.908-26.3-25.18l-0.393-0.284q-14.507-10.786-27.034-20.48c-7.96-5.994-15.005-12.25-21.517-19.022l-0.056-0.058c-5.535-5.561-9.312-12.876-10.423-21.039l-0.021-0.191-6.485-53.931h-43.145l-4.233 58.709v3.891c-0.004 0.223-0.006 0.485-0.006 0.748 0 9.571 2.978 18.447 8.057 25.751l-0.098-0.148c5.828 8.215 12.468 15.31 19.946 21.419l0.193 0.153q12.186 10.24 26.18 20.139c9.702 7.042 18.25 14.355 26.179 22.288l0.001 0.001c7.929 7.935 14.647 17.083 19.851 27.14l0.287 0.611c5.032 10.161 7.977 22.126 7.977 34.778 0 0.685-0.009 1.369-0.026 2.050l0.002-0.101c0.004 0.261 0.006 0.568 0.006 0.877 0 9.703-2.218 18.888-6.176 27.075l0.162-0.372c-4.046 8.301-9.528 15.3-16.19 20.95l-0.092 0.076c-6.84 5.718-14.91 10.238-23.726 13.101l-0.509 0.143c-8.732 2.923-18.786 4.61-29.234 4.61-0.223 0-0.445-0.001-0.667-0.002h0.034c-0.765 0.018-1.666 0.029-2.569 0.029-12.286 0-24.117-1.946-35.203-5.546l0.806 0.226c-9.977-3.336-18.562-7.285-26.625-12.027l0.65 0.353c-6.519-3.857-12.092-7.711-17.377-11.912l0.31 0.238c-2.841-2.784-6.55-4.692-10.684-5.279l-0.102-0.012c-0.025 0-0.055 0-0.084 0-5.84 0-10.92 3.252-13.529 8.043l-0.040 0.081zM342.357 247.569c0 0.049 0 0.106 0 0.163 0 6.197 1.255 12.101 3.524 17.471l-0.111-0.295c2.255 5.48 5.357 10.169 9.194 14.144l-0.013-0.013c3.886 3.976 8.522 7.201 13.682 9.449l0.279 0.108c5.090 2.314 11.038 3.67 17.3 3.686h0.006c0.163 0.002 0.355 0.003 0.547 0.003 6.066 0 11.838-1.257 17.071-3.524l-0.278 0.107c5.486-2.39 10.172-5.61 14.132-9.558l-0.001 0.001c3.933-3.936 7.106-8.631 9.282-13.847l0.105-0.284c2.159-5.076 3.414-10.979 3.414-17.176 0-0.057 0-0.115 0-0.172v0.009c0.001-0.12 0.002-0.263 0.002-0.405 0-6.173-1.256-12.052-3.525-17.397l0.11 0.292c-2.311-5.429-5.48-10.064-9.386-13.96l-0.001-0.001c-3.936-3.933-8.631-7.106-13.847-9.282l-0.284-0.105c-5.076-2.159-10.979-3.414-17.176-3.414-0.057 0-0.115 0-0.172 0h0.009c-0.049 0-0.106 0-0.163 0-6.197 0-12.101 1.255-17.471 3.524l0.295-0.111c-5.453 2.245-10.099 5.423-13.952 9.378l-0.009 0.009c-3.798 3.923-6.894 8.552-9.071 13.666l-0.111 0.294c-2.137 5.030-3.38 10.88-3.38 17.020 0 0.077 0 0.153 0.001 0.229v-0.012z" />
-<glyph unicode="&#xe93a;" glyph-name="invoice-icon" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM320.853 270.507l361.813 361.813 47.787-47.787-409.6-409.6-191.147 191.147 47.787 47.787z" />
-<glyph unicode="&#xe93b;" glyph-name="sales-order" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM307.2 741.547l136.533-136.533h-102.4v-238.933h-68.267v238.933h-102.4zM546.133 263.68h102.4l-136.533-136.533-136.533 136.533h102.4v238.933h68.267z" />
-<glyph unicode="&#xe93c;" glyph-name="card" horiz-adv-x="1576" d="M110.792 959.888c-61.143-0.136-110.671-49.663-110.807-110.794v-663.657c0.136-61.143 49.663-110.671 110.794-110.807h27.722v-27.71c0.136-61.143 49.663-110.671 110.794-110.807h1215.913c61.143 0.136 110.671 49.663 110.807 110.794v663.077c-0.136 61.143-49.663 110.671-110.794 110.807h-27.722v27.71c-0.136 61.143-49.663 110.671-110.794 110.807h-1215.913zM110.792 904.468h1215.321c0.236 0.004 0.513 0.006 0.79 0.006 30.154 0 54.6-24.446 54.6-54.6 0-0.277-0.002-0.557-0.006-0.833v0.043-55.387h-1326.125v55.387c-0.004 0.236-0.006 0.513-0.006 0.79 0 30.154 24.446 54.6 54.6 54.6 0.291 0 0.58-0.002 0.87-0.007l-0.045 0.001zM1436.921 766.566h27.71c0.236 0.004 0.513 0.006 0.79 0.006 30.154 0 54.6-24.446 54.6-54.6 0-0.291-0.002-0.58-0.007-0.87l0.001 0.045v-663.065c0.004-0.236 0.006-0.513 0.006-0.79 0-30.154-24.446-54.6-54.6-54.6-0.277 0-0.557 0.002-0.833 0.006h-1215.893c-0.236-0.004-0.513-0.006-0.79-0.006-30.154 0-54.6 24.446-54.6 54.6 0 0.277 0.002 0.557 0.006 0.833v-0.043 27.71h1132.976c61.143 0.136 110.671 49.663 110.807 110.794v579.979zM55.372 738.857h1326.125v-55.42h-1326.125zM55.372 628.049h1326.125v-442.030c0.004-0.245 0.006-0.534 0.006-0.825 0-30.154-24.446-54.6-54.6-54.6-0.277 0-0.557 0.002-0.833 0.006h-1215.278c-0.236-0.004-0.513-0.006-0.79-0.006-30.154 0-54.6 24.446-54.6 54.6 0 0.291 0.002 0.58 0.007 0.87l-0.001-0.045zM135.535 462.438c-14.465-0.469-26.013-12.307-26.013-26.845 0-0.713 0.027-1.419 0.081-2.12l-0.006 0.092c0.722-14.501 12.655-25.982 27.268-25.982 0.565 0 1.124 0.016 1.677 0.052l-0.075-0.004h303.549c0.179-0.004 0.387-0.006 0.596-0.006 15.307 0 27.716 12.409 27.716 27.716 0 15.098-12.072 27.376-27.087 27.71l-0.030 0.001h-305.323c-0.552-0.396-1.238-0.635-1.983-0.635-0.131 0-0.261 0.007-0.388 0.021l0.015-0.001zM135.535 352.211c-14.512-0.802-25.975-12.762-25.975-27.402 0-15.156 12.286-27.442 27.442-27.442 0.516 0 1.029 0.013 1.539 0.043l-0.071-0.003h196.871c0.406-0.020 0.885-0.035 1.364-0.035 15.303 0 27.71 12.406 27.71 27.71s-12.406 27.71-27.71 27.71c-0.060 0-0.119 0-0.18-0.001h-197.919c-0.656-0.405-1.455-0.647-2.306-0.647-0.269 0-0.534 0.023-0.791 0.071l0.026-0.004zM439.084 352.211c-14.512-0.802-25.975-12.762-25.975-27.402 0-15.156 12.286-27.442 27.442-27.442 0.516 0 1.029 0.013 1.539 0.043l-0.071-0.003h28.291c0.406-0.020 0.885-0.035 1.364-0.035 15.303 0 27.71 12.406 27.71 27.71s-12.406 27.71-27.71 27.71c-0.060 0-0.119 0-0.18-0.001h-29.476c-0.714-0.379-1.559-0.601-2.457-0.601-0.169 0-0.333 0.008-0.499 0.022l0.020-0.002z" />
-<glyph unicode="&#xe93d;" glyph-name="chat2" d="M168.288 147.251h60.484v-211.251l290.645 211.251h429.295c92.884 0.039 168.17 75.325 168.209 168.205v476.335c-0.039 92.884-75.325 168.17-168.205 168.209h-780.428c-92.884-0.039-168.17-75.325-168.209-168.205v-476.335c0.039-92.884 75.325-168.17 168.205-168.209h0.004zM79.473 791.791c0.478 48.82 39.926 88.269 88.701 88.746h780.538c48.82-0.478 88.269-39.926 88.746-88.701v-476.376c-0.478-48.82-39.926-88.269-88.701-88.746h-454.838l-184.32-134.554v134.485h-141.312c-48.82 0.478-88.269 39.926-88.746 88.701v0.045zM830.406 672.017h-543.607v79.428h543.505zM830.406 522.65h-543.607v79.428h543.505zM830.406 374.647h-543.607v79.394h543.505z" />
-<glyph unicode="&#xe93e;" glyph-name="ecomm" horiz-adv-x="1121" d="M692.698 45.704c0 60.588 49.116 109.705 109.705 109.705s109.705-49.116 109.705-109.705c0-60.588-49.116-109.705-109.705-109.705-0.024 0-0.048 0-0.072 0h0.004c-60.427 0.366-109.309 49.272-109.636 109.673v0.031zM741.065 45.704c0-34.536 27.997-62.532 62.532-62.532s62.532 27.997 62.532 62.532c0 34.536-27.997 62.532-62.532 62.532v0c-34.443-0.231-62.302-28.090-62.532-62.51v-0.022zM289.242 45.704c0.272 60.118 49.070 108.748 109.226 108.748 60.324 0 109.227-48.902 109.227-109.227 0-60.156-48.63-108.954-108.722-109.226h-0.026c-0.142-0.001-0.311-0.001-0.479-0.001-60.324 0-109.227 48.902-109.227 109.227 0 0.168 0 0.337 0.001 0.505v-0.026zM336.414 45.704c0-34.536 27.997-62.532 62.532-62.532s62.532 27.997 62.532 62.532c0 34.536-27.997 62.532-62.532 62.532v0c-34.443-0.231-62.302-28.090-62.532-62.51v-0.022zM297.502 214.425c0 0 0 0-0.001 0-11.846 0-21.679 8.621-23.566 19.931l-0.019 0.14-28.297 169.882c-0.781 1.754-1.236 3.8-1.236 5.953 0 0.392 0.015 0.78 0.045 1.164l-0.003-0.051-82.603 501.385h-138.035c-13.026 0-23.586 10.56-23.586 23.586s10.56 23.586 23.586 23.586v0h158.106c0 0 0 0 0.001 0 11.846 0 21.679-8.621 23.566-19.931l0.019-0.14 16.589-102.639h875.281c7.654-0.158 14.429-3.785 18.836-9.369l0.040-0.052c2.843-3.294 4.575-7.617 4.575-12.345 0-2.344-0.426-4.589-1.204-6.661l0.043 0.131-106.189-403.456c-2.383-10.201-11.4-17.683-22.165-17.683-0.092 0-0.183 0.001-0.275 0.002h-694.702l21.231-126.293h650.035c13.026 0 23.586-10.56 23.586-23.586s-10.56-23.586-23.586-23.586v0zM288.082 433.868h684.203l94.379 356.25h-837.598z" />
-<glyph unicode="&#xe93f;" glyph-name="mail" horiz-adv-x="1018" d="M-0.065-64v549.171l164.489 153.088v233.643h250.505l94.242 88.098 94.276-88.098h250.505v-235.52l0.683 0.683 163.43-152.439v-548.625zM56.016-31.3h906.001l-277.675 277.675-175.138-116.975-175.172 116.975zM712.537 264.943l273.067-273.067v455.1zM32.976-8.124l272.862 273.067-272.862 182.033zM197.123 376.9l312.081-207.838 312.081 207.838v461.995h-624.196zM853.985 398.916l121.446 81.203-121.481 113.084zM42.943 479.983l121.446-81.203v194.56zM462.783 871.902h92.843l-46.455 43.042zM558.356 313.105v33.041h33.041v-33.041zM492.991 313.105v33.041h33.041v-33.041zM427.284 313.105v33.041h33.041v-33.041zM425.202 430.080c-26.49 11.767-47.802 31.186-61.613 55.434l-0.339 0.647c-12.578 23.057-19.975 50.503-19.975 79.676 0 0.537 0.003 1.074 0.008 1.609l-0.001-0.082c-0.002 0.352-0.004 0.768-0.004 1.184 0 32.504 8.414 63.044 23.182 89.559l-0.48-0.938c14.269 26.703 35.59 48.025 61.496 61.903l0.797 0.39c25.272 12.935 55.131 20.516 86.76 20.516 1.311 0 2.618-0.013 3.923-0.039l-0.195 0.003c1.065 0.024 2.32 0.038 3.578 0.038 26.626 0 51.795-6.24 74.124-17.336l-0.97 0.436c21.611-10.792 39.066-27.15 50.892-47.221l0.308-0.565c11.247-18.855 17.896-41.583 17.896-65.863 0-0.557-0.003-1.113-0.010-1.668l0.001 0.084c0.001-0.23 0.002-0.503 0.002-0.776 0-29.663-10.098-56.967-27.044-78.663l0.213 0.283c-18.915-26.97-49.864-44.384-84.881-44.384-0.519 0-1.037 0.004-1.555 0.011l0.078-0.001c-0.507-0.023-1.101-0.036-1.699-0.036-7.221 0-13.991 1.926-19.826 5.293l0.192-0.102c-4.86 3.355-8.342 8.408-9.598 14.286l-0.027 0.152c-11.758-12.111-28.191-19.627-46.38-19.627-0.026 0-0.053 0-0.079 0h0.004c-0.515-0.015-1.12-0.024-1.728-0.024-17.89 0-34.018 7.541-45.38 19.619l-0.030 0.032c-11.574 12.88-18.653 30.004-18.653 48.781 0 1.235 0.031 2.463 0.091 3.682l-0.007-0.172c-0.002 0.293-0.004 0.64-0.004 0.988 0 27.171 8.496 52.358 22.975 73.049l-0.273-0.411c14.338 24.346 40.358 40.463 70.156 40.619h0.022c0.872 0.055 1.891 0.086 2.918 0.086 17.719 0 33.264-9.304 42.017-23.294l0.121-0.208 4.13 18.91h45.056l-25.805-122.88c-1.122-4.374-1.969-9.547-2.37-14.844l-0.019-0.311c-0.016-0.204-0.025-0.442-0.025-0.682 0-2.232 0.782-4.281 2.087-5.889l-0.014 0.017c1.028-1.255 2.578-2.050 4.314-2.050 0.055 0 0.111 0.001 0.166 0.002h-0.008c8.3 1.169 15.606 4.748 21.365 9.995l-0.032-0.028c12.016 9.062 21.591 20.725 27.99 34.191l0.238 0.557c6.897 13.207 10.967 28.838 11.025 45.413v0.019c0.020 0.714 0.031 1.554 0.031 2.397 0 27.026-11.633 51.334-30.164 68.192l-0.075 0.067c-20.909 17.873-48.265 28.749-78.162 28.749-2.523 0-5.028-0.077-7.512-0.23l0.341 0.017c-1.5 0.053-3.262 0.083-5.031 0.083-27.061 0-52.478-7.040-74.519-19.389l0.771 0.397c-21.157-12.594-37.817-30.802-48.188-52.581l-0.315-0.735c-10.16-20.983-16.121-45.628-16.179-71.66v-0.020c-0.003-0.332-0.005-0.723-0.005-1.116 0-23.898 6.786-46.21 18.536-65.116l-0.304 0.525c11.981-19.503 29.563-34.553 50.493-43.094l0.707-0.255c21.214-8.666 45.831-13.696 71.622-13.696 1.436 0 2.869 0.016 4.298 0.047l-0.213-0.004c1.327-0.032 2.889-0.051 4.456-0.051 23.57 0 46.162 4.185 67.075 11.851l-1.353-0.434c19.148 7.436 35.193 19.266 47.454 34.303l0.162 0.205h36.454c-11.671-23.345-29.772-42.006-51.982-54.051l-0.651-0.323c-26.963-14.358-58.963-22.79-92.933-22.79-2.129 0-4.25 0.033-6.363 0.099l0.309-0.008c-1.553-0.037-3.382-0.059-5.216-0.059-33.5 0-65.337 7.12-94.081 19.93l1.471-0.586zM478.177 628.053c-9.034-8.531-15.66-19.521-18.811-31.899l-0.099-0.46c-3.672-11.056-5.923-23.8-6.21-37.028l-0.002-0.143c-0.088-1.099-0.139-2.379-0.139-3.67 0-10.624 3.404-20.453 9.18-28.456l-0.098 0.143c5.046-6.266 12.718-10.242 21.318-10.242 0.125 0 0.251 0.001 0.375 0.003h-0.019c6.701 0.050 12.977 1.828 18.416 4.911l-0.188-0.098c4.925 3.042 9.126 6.689 12.666 10.911l0.065 0.080c7.067 8.497 12.512 18.617 15.695 29.695l0.143 0.581c3.598 10.896 5.94 23.485 6.509 36.534l0.010 0.296c0.086 1.025 0.136 2.219 0.136 3.424 0 10.034-3.417 19.269-9.151 26.606l0.072-0.095c-5.331 6.285-13.235 10.247-22.064 10.247-0.223 0-0.446-0.003-0.668-0.008l0.033 0.001c-10.606-0.153-20.17-4.492-27.137-11.436l0.001 0.001z" />
-<glyph unicode="&#xe940;" glyph-name="add" d="M928 496h-368v368h-112v-368h-352v-96h352v-368h112v368h368z" />
-<glyph unicode="&#xe941;" glyph-name="cross" d="M920.96 123.664l-324.352 324.336 324.352 324.336-98.704 98.704-324.336-324.336-310.256 310.224-84.592-84.592 310.224-310.256-324.336-324.336 98.704-98.704 324.336 324.352 324.336-324.352z" />
-<glyph unicode="&#xe942;" glyph-name="inventory" horiz-adv-x="1009" d="M90.798 384.947h827.271v272.394h-232.039c-10.089-35.31-25.222-65.576-50.443-85.754-35.31-30.266-80.709-50.443-131.153-50.443s-95.842 20.177-131.153 50.443c-25.222 20.177-45.399 50.443-50.443 85.754h-232.039v-272.394zM353.103 727.962h524.611l-116.020 131.153h-479.212l-141.241-131.153h211.862zM610.365 657.341h-211.862c5.044-10.089 10.089-25.222 20.177-35.31 25.222-15.133 45.399-30.266 80.709-30.266s65.576 10.089 85.754 30.266c10.089 10.089 20.177 20.177 25.222 35.31zM30.266 722.917l211.862 196.729c5.044 5.044 15.133 10.089 25.222 10.089h509.478c10.089 0 20.177-5.044 25.222-10.089l176.552-201.773v-716.296c0-20.177-15.133-35.31-35.31-35.31h-887.803c-20.177 0-35.31 15.133-35.31 35.31v691.074c-5.044 10.089 5.044 20.177 10.089 30.266v0zM398.502 314.326c5.044-15.133 15.133-25.222 25.222-35.31 20.177-20.177 50.443-30.266 85.754-30.266s60.532 10.089 85.754 30.266c10.089 10.089 20.177 20.177 25.222 35.31h-221.951zM322.837 314.326h-232.039v-272.394h832.315v272.394h-232.039c-10.089-35.31-25.222-65.576-50.443-85.754-35.31-30.266-80.709-50.443-131.153-50.443s-95.842 20.177-131.153 50.443c-30.266 20.177-50.443 50.443-55.488 85.754z" />
-<glyph unicode="&#xe943;" glyph-name="caret-down" d="M96 736h840l-409.392-608.384-426.608 607.184z" />
-<glyph unicode="&#xe944;" glyph-name="edit1" d="M915.904 672.176c-59.856 59.888-119.744 119.776-179.664 179.648-16.192 16.192-29.664 16.256-45.664 0.24-178.432-178.4-356.816-356.8-535.328-535.088-7.024-6.992-11.008-14.784-12.912-24.432-10.672-54.032-21.68-108.048-32.608-162.048-4.32-21.344-8.848-42.688-13.024-64.096-3.728-19.232 7.584-34.304 27.216-34.4 2 0.352 5.792 0.912 9.536 1.664 74.528 15.008 149.024 30.080 223.584 44.944 9.312 1.872 16.864 5.84 23.648 12.624 178.336 178.512 356.768 356.88 535.168 535.264 16.176 16.176 16.176 29.552 0.048 45.68zM601.616 683.76c16.864-16.848 35.184-35.184 52.88-52.832-105.232-105.232-210.704-210.688-315.472-315.488-17.36 17.424-35.584 35.712-52.848 52.992 104.16 104.16 209.648 209.584 315.44 315.328zM360.24 145.76c-10.224-11.824-22.448-17.104-37.616-19.952-53.52-10.080-106.816-21.376-160.176-32.192-1.664-0.336-3.328-0.496-6.080-0.928 3.968 19.856 7.712 38.8 11.52 57.728 8.080 40.128 15.984 80.256 24.544 120.288 1.248 5.872 4.608 12.048 8.736 16.432 13.856 14.848 28.512 28.976 42 42.48 50.064-50.048 99.792-99.744 150.352-150.304-10.272-10.24-22.592-21.2-33.28-33.552zM432.912 221.456c-17.424 17.456-35.712 35.728-53.008 53.040 104.32 104.304 209.824 209.76 315.552 315.488 17.008-16.992 35.344-35.328 53.040-53.008-105.296-105.248-210.784-210.72-315.584-315.52zM787.968 575.712c-49.2 49.136-98.96 98.912-148.256 148.144 24.304 24.304 49.28 49.264 73.76 73.744 49.088-49.088 98.912-98.848 148.208-148.112-24.32-24.352-49.296-49.328-73.712-73.776z" />
-<glyph unicode="&#xe945;" glyph-name="arrow-down" d="M908.496 683.808c-25.808 26.928-67.952 26.928-93.776 0l-302.704-312.752-302.896 312.752c-25.792 26.928-67.744 26.928-93.744 0-25.84-26.592-25.84-70.208 0-97.456l349.76-360.816c25.808-26.912 67.776-26.912 93.76 0l349.6 360.816c26 27.264 26 70.88 0 97.456z" />
-<glyph unicode="&#xe946;" glyph-name="child" horiz-adv-x="2560" d="M42.667 942.933h204.8v-947.2h-204.8v947.2zM42.667 157.867h2483.2v-204.8h-2483.2v204.8z" />
-<glyph unicode="&#xe947;" glyph-name="group" d="M354.462 960v-354.462h-354.462v-669.538h669.538v354.462h354.462v669.538h-669.538zM567.138 30.523h-472.615v472.615h228.431v-252.062h244.185v-220.554zM567.138 392.862v-39.385h-141.785v157.538h141.785v-118.154zM929.477 392.862h-259.938v212.677h-212.677v259.938h472.615v-472.615zM425.354 503.138v0-157.538h141.785v15.754h-141.785z" />
-<glyph unicode="&#xe948;" glyph-name="bar" d="M0 960h1024v-149.662h-1024v149.662zM0 526.769h1024v-149.662h-1024v149.662zM0 85.662h1024v-149.662h-1024v149.662z" />
-<glyph unicode="&#xe949;" glyph-name="Search" d="M640.218 250.596c-172.546-120.030-405.107-82.523-532.642 82.523-120.030 157.542-90.022 375.099 52.516 502.631s360.096 127.535 502.631 7.503c157.542-127.535 180.045-360.096 52.516-517.637 0 0-7.503-7.503-7.503-7.503l255.067-255.067c15.004-15.004 22.509-37.513 7.503-60.015 0 0 0-7.503-7.503-7.503v0c-15.004-15.004-45.012-22.509-60.015-7.503 0 0 0 0-7.503 7.503-82.523 82.523-172.546 165.041-255.067 255.067zM415.162 880.76c-180.045 0-330.089-157.542-322.584-337.588 0-180.045 157.542-330.089 337.588-322.584 180.045 0 322.584 150.037 322.584 330.089s-142.539 330.089-322.584 330.089c-7.503 0-15.004 0-15.004 0zM932.794-41.98c-15.004 0-30.008 7.503-37.513 15.004 0 0-7.503 0-7.503 7.503-30.008 30.008-60.015 52.516-90.022 82.523-45.012 52.516-105.026 105.026-157.542 165.041-180.045-112.531-412.606-75.018-547.645 90.022-120.030 165.041-97.527 390.103 60.015 517.637 150.037 135.034 375.099 135.034 525.137 7.503 82.523-67.52 127.535-157.542 142.539-255.067 7.503-105.026-22.509-202.554-82.523-277.572l247.564-240.061c7.503-7.503 15.004-22.509 22.509-37.513 0-15.004 0-30.008-15.004-45.012 0 0-7.503-7.503-7.503-7.503-15.004-15.004-30.008-22.509-52.516-22.509 7.503 0 7.503 0 0 0zM640.218 265.6l7.503-7.503c52.516-60.015 112.531-112.531 172.546-172.546 30.008-30.008 60.015-60.015 90.022-82.523v0c7.503-7.503 15.004-7.503 22.509-7.503s15.004 0 15.004 7.503c0 0 7.503 7.503 7.503 7.503 7.503 7.503 7.503 15.004 7.503 15.004 0 7.503-7.503 15.004-7.503 15.004l-262.568 262.568 7.503 15.004c0 0 7.503 7.503 7.503 7.503 60.015 75.018 90.022 165.041 75.018 255.067s-52.516 180.045-127.535 240.061c-135.034 120.030-345.092 120.030-480.126-7.503-142.539-120.030-165.041-330.089-52.516-480.126 120.030-150.037 345.092-187.55 510.134-75.018l7.503 7.503zM422.661 205.586c-187.55 0-345.092 150.037-345.092 337.588s150.037 345.092 337.588 352.591c7.503 0 7.503 0 15.004 0 187.55 0 337.588-157.542 337.588-345.092s-150.037-337.588-345.092-345.092c0 0 0 0 0 0zM422.661 865.756c0 0-7.503 0-7.503 0v0c-172.546 0-307.58-150.037-307.58-322.584s142.539-315.085 322.584-307.58c172.546 0 307.58 142.539 307.58 315.085s-142.539 315.085-315.085 315.085c0 0 0 0 0 0z" />
-<glyph unicode="&#xe94a;" glyph-name="download" horiz-adv-x="1050" d="M987.241 130.297v-126.031h-918.974v126.031h-52.513v-152.287c0-15.754 10.503-26.256 26.256-26.256h971.487c15.754 0 26.256 10.503 26.256 26.256v152.287h-52.513zM813.949 482.133l-262.564-262.564v729.928h-52.513v-729.928l-262.564 262.564-36.759-36.759 304.574-304.574c5.251-5.251 10.503-5.251 15.754-5.251s10.503 0 15.754 5.251l304.574 304.574-26.256 36.759z" />
-<glyph unicode="&#xe94b;" glyph-name="share" horiz-adv-x="1185" d="M438.857 299.701l-10.737 97.971c-1.342 6.71-16.105 166.417 89.919 283.177 65.761 73.814 163.733 114.076 291.229 119.444l1.342 150.312 361.017-263.046-361.017-268.414v157.022c-5.368 0-10.737 0-17.447 0-208.021 0-287.203-116.76-316.729-185.206l-37.578-91.261zM861.609 851.292l-1.342-101.997h-24.157c-124.813 0-218.758-34.894-279.151-103.339-41.604-46.972-61.735-101.997-71.13-147.628 95.287 112.734 241.573 126.155 308.676 126.155 28.183 0 45.63-2.684 45.63-2.684l21.473-2.684v-101.997l226.81 169.101-226.81 165.075zM858.925-46.553h-845.505v272.44h49.657v-222.784h744.849v222.784h50.999z" />
-<glyph unicode="&#xe94c;" glyph-name="magic_link" horiz-adv-x="1023" d="M880.14 684.069c0 6.793-2.597 13.187-7.393 17.982l-107.695 107.695c-9.99 9.99-25.975 9.99-35.965 0l-717.699-717.699c-9.99-9.99-9.99-25.975 0-35.965l107.695-107.695c4.795-4.795 11.189-7.393 17.982-7.393s13.187 2.597 17.982 7.393l717.699 717.699c4.795 4.795 7.393 11.189 7.393 17.982zM648.966 514.036l-71.73 71.73 170.034 170.034 71.73-71.73-170.034-170.034zM917.504 753.002c0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501 0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.356 101.501-101.501zM562.251 753.002c0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501 0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.556 101.501-101.501zM917.504 600.751c0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.356 101.501-101.501 0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501z" />
-<glyph unicode="&#xe94d;" glyph-name="dropdown" horiz-adv-x="1746" d="M728.132 37.209c79.38-87.318 206.388-87.318 285.767 0l674.729 750.14c79.38 87.318 47.628 158.76-71.442 158.76h-1492.341c-119.070 0-146.853-71.442-71.442-158.76l674.729-750.14z" />
-<glyph unicode="&#xe94e;" glyph-name="plus" horiz-adv-x="1011" d="M505.519 944.486c-40.738 0-74.069-33.331-74.069-74.069v-351.826h-351.826c-40.738 0-74.069-33.331-74.069-74.069s33.331-74.069 74.069-74.069h351.826v-351.826c0-40.738 33.331-74.069 74.069-74.069s74.069 33.331 74.069 74.069v351.826h351.826c40.738 0 74.069 33.331 74.069 74.069s-33.331 74.069-74.069 74.069h-351.826v351.826c0 40.738-33.331 74.069-74.069 74.069z" />
-<glyph unicode="&#xe94f;" glyph-name="search" horiz-adv-x="1027" d="M434.473 834.232c171.101 0 309.908-138.807 309.908-309.908s-138.606-309.908-309.908-309.908-309.908 138.807-309.908 309.908v0c0 171.101 138.807 309.908 309.908 309.908zM434.473 956.791c-238.9 0-432.467-193.768-432.467-432.668 0-173.709 104.105-330.568 263.973-398.367 220.045-93.073 473.989 10.029 566.861 230.074s-10.029 473.989-230.074 566.861c-53.156 22.666-110.524 34.3-168.293 34.1v0 0zM1026.977 22.911l-86.662-86.662-308.067 308.067 86.662 86.662 308.067-308.067z" />
-<glyph unicode="&#xe950;" glyph-name="building" horiz-adv-x="848" d="M830.53 924.322v-962.004h-171.023v213.779h-235.157v-213.779h-171.023v962.004h577.203zM766.397 860.189h-106.889v-106.889h106.889v106.889zM595.374 860.189h-106.889v-106.889h106.889v106.889zM424.351 860.189h-106.889v-106.889h106.889v106.889zM766.397 689.166h-106.889v-106.889h106.889v106.889zM595.374 689.166h-106.889v-106.889h106.889v106.889zM424.351 689.166h-106.889v-106.889h106.889v106.889zM231.95 646.41v-684.092h-213.779v684.092h213.779zM167.816 582.276h-85.511v-85.511h85.511v85.511zM766.397 518.143h-106.889v-106.889h106.889v106.889zM595.374 518.143h-106.889v-106.889h106.889v106.889zM424.351 518.143h-106.889v-106.889h106.889v106.889zM167.816 432.631h-85.511v-85.511h85.511v85.511zM766.397 347.12h-106.889v-106.889h106.889v106.889zM595.374 347.12h-106.889v-106.889h106.889v106.889zM424.351 347.12h-106.889v-106.889h106.889v106.889zM167.816 282.986h-85.511v-85.511h85.511v85.511zM167.816 133.341h-85.511v-85.511h85.511v85.511z" />
-<glyph unicode="&#xe951;" glyph-name="options" horiz-adv-x="1159" d="M393.432 841.432c-16.168 64.674-70.063 107.789-140.126 107.789s-123.958-48.505-140.126-107.789h-113.179v-70.063h113.179c16.168-64.674 70.063-107.789 140.126-107.789s123.958 48.505 140.126 107.789h765.305v70.063h-765.305zM258.695 733.642c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c0-37.726-32.337-70.063-70.063-70.063zM905.432 588.126c-64.674 0-123.958-48.505-140.126-107.789h-765.305v-70.063h765.305c16.168-64.674 70.063-107.789 140.126-107.789s123.958 48.505 140.126 107.789h113.179v70.063h-113.179c-16.168 59.284-70.063 107.789-140.126 107.789zM905.432 372.547c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c5.389-37.726-26.947-70.063-70.063-70.063zM474.274 227.032c-64.674 0-123.958-48.505-140.126-107.789h-328.758v-70.063h328.758c16.168-64.674 70.063-107.789 140.126-107.789 64.674 0 123.958 48.505 140.126 107.789h549.726v70.063h-549.726c-16.168 59.284-75.453 107.789-140.126 107.789zM474.274 6.063c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c0-37.726-32.337-70.063-70.063-70.063z" />
-<glyph unicode="&#xe952;" glyph-name="checkboxfill-icon" d="M96 864v-832h832v832h-832zM410.512 166.352c-75.008 77.28-188.8 195.072-264.336 272.88 32.768 32.72 65.008 64.944 97.376 97.232 42.336-42.384 123.248-125.056 168.048-169.952 124.784 122.416 247.824 243.12 370.176 363.12 32.88-32.88 64.928-64.928 96.032-96-154.848-154.864-310.56-310.56-467.296-467.28z" />
-<glyph unicode="&#xe953;" glyph-name="dots-three-vertical" d="M512.051 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64zM512.051 706.56c62.208 0 112.589 50.483 112.589 112.64s-50.381 112.64-112.589 112.64c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64zM512.051 215.040c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64z" />
-<glyph unicode="&#xe954;" glyph-name="calender" horiz-adv-x="922" d="M204.8 618.598h102.4v-102.4h-102.4v102.4zM204.8 413.798h102.4v-102.4h-102.4v102.4zM204.8 208.998h102.4v-102.4h-102.4v102.4zM819.2 857.6c55.978-1.41 100.99-46.422 102.397-102.267l0.003-0.133v-716.8c-1.41-55.978-46.422-100.99-102.267-102.397l-0.133-0.003h-716.8c-0.772-0.023-1.679-0.036-2.59-0.036-27.383 0-52.002 11.838-69.018 30.675l-0.072 0.081c-18.747 18.193-30.46 43.544-30.72 71.631v716.849c1.41 55.978 46.422 100.99 102.267 102.397l0.133 0.003h51.2v102.4h102.4v-102.4h409.6v102.4h102.4v-102.4zM819.2 38.4v699.733h-716.8v-699.733zM409.6 618.598h102.4v-102.4h-102.4v102.4zM614.4 618.598h102.4v-102.4h-102.4v102.4zM409.6 413.798h102.4v-102.4h-102.4v102.4zM409.6 208.998h102.4v-102.4h-102.4v102.4zM614.4 413.798h102.4v-102.4h-102.4v102.4zM614.4 208.998h102.4v-102.4h-102.4v102.4z" />
-<glyph unicode="&#xe955;" glyph-name="car" horiz-adv-x="1231" d="M222.208 520.792c-0.015 0-0.033 0-0.051 0-54.369 0-98.45-44.046-98.509-98.401v-0.006c0.058-54.325 44.081-98.348 98.401-98.406h0.006c54.325 0.058 98.348 44.081 98.406 98.401v0.006c-0.058 54.271-43.994 98.261-98.239 98.406h-0.014zM222.208 354.341c-37.579 0.029-68.038 30.47-68.096 68.039v0.006c0.029 37.597 30.499 68.067 68.093 68.096h0.003c37.597-0.029 68.067-30.499 68.096-68.093v-0.003c-0.058-37.575-30.517-68.016-68.093-68.045h-0.003zM123.648 207.858h196.762v74.803h-196.762zM153.958 252.351h136.141v-14.182h-135.731zM987.187 613.976v0c0 156.006-192.41 227.021-371.2 227.021s-371.2-71.066-371.2-227.021v-15.36h742.4zM275.814 629.336c12.698 124.621 182.221 181.555 340.122 181.555s327.68-56.934 340.122-181.555zM1009.766 520.792c-54.325-0.058-98.348-44.081-98.406-98.401v-0.006c0.058-54.325 44.081-98.348 98.401-98.406h0.006c54.325 0.058 98.348 44.081 98.406 98.401v0.006c-0.058 54.325-44.081 98.348-98.401 98.406h-0.006zM1009.766 354.341c-37.557 0.058-67.987 30.488-68.045 68.039v0.006c0 37.59 30.458 68.067 68.042 68.096h0.003c37.597-0.029 68.067-30.499 68.096-68.093v-0.003c-0.058-37.575-30.517-68.016-68.093-68.045h-0.003zM911.36 207.858h196.762v74.803h-196.762zM941.722 252.351h136.090v-14.182h-136.090zM470.835 403.647h290.253v-30.31h-290.253v30.31zM470.835 354.29h290.253v-30.31h-290.253v30.31zM470.835 304.933h290.253v-30.31h-290.253v30.31zM470.835 255.576h290.253v-30.31h-290.253v30.31zM1221.376 498.469c-6.545 60.783-50.239 109.783-107.659 124.155l-0.988 0.209-115.251 270.182c-25.261 40.501-69.572 67.051-120.084 67.051-2.154 0-4.297-0.048-6.427-0.144l0.303 0.011h-512c-1.521 0.059-3.306 0.092-5.1 0.092-50.602 0-94.969-26.693-119.788-66.767l-0.347-0.602-115.149-269.875c-58.481-14.612-102.206-63.732-108.593-123.996l-0.054-0.625-10.24-367.718h112.64v-109.67c0.058-46.831 38.007-84.78 84.833-84.838h48.39c46.831 0.058 84.78 38.007 84.838 84.833v109.676h569.549v-109.67c0.058-46.831 38.007-84.78 84.833-84.838h48.441c46.831 0.058 84.78 38.007 84.838 84.833v109.676h112.64zM246.63-33.704h-48.435c-30.103 0.029-54.499 24.425-54.528 54.525v109.673h157.389v-109.67c-0.029-30.067-24.366-54.441-54.417-54.528h-0.008zM1034.189-33.704h-48.435c-30.103 0.029-54.499 24.425-54.528 54.525v109.673h157.389v-109.67c-0.029-30.121-24.454-54.528-54.579-54.528-0.018 0-0.036 0-0.054 0h0.003zM31.898 160.856l9.216 336.384c3.328 76.186 89.19 97.28 92.774 98.099l7.475 1.741 120.934 283.494c21.504 47.616 89.446 49.152 98.355 49.152h512c7.731 0 75.93-1.382 97.28-48.845l121.139-283.75 7.475-1.741c3.635-0.87 89.446-21.914 92.774-97.894l9.216-336.589z" />
-<glyph unicode="&#xe956;" glyph-name="download1" horiz-adv-x="910" d="M796.333 277.333h113.801v-341.333h-910.268v341.333h113.801v-227.533h682.667zM676.867 391.134l-227.533-227.533-227.601 227.533h170.667v568.866h113.801v-568.866z" />
-<glyph unicode="&#xe957;" glyph-name="edit11" horiz-adv-x="1007" d="M-0.061 149.823l624.64 624.64 213.709-213.811-624.64-624.64h-213.709zM995.779 729.305l-101.274-101.274-213.811 213.811 101.274 101.274c9.923 10.404 23.892 16.873 39.373 16.873s29.45-6.469 39.352-16.851l0.020-0.022 129.434-129.434c10.405-9.409 16.915-22.957 16.915-38.026 0-0.492-0.007-0.981-0.021-1.47l0.002 0.072c0-16.794 0-39.526-11.264-44.954z" />
-<glyph unicode="&#xe958;" glyph-name="plane" d="M247.981 723.058c-0.716-0.092-1.352-0.224-1.962-0.396l0.099 0.019-106.925-35.757c-4.757-1.675-8.103-6.138-8.103-11.372 0-1.393 0.237-2.735 0.671-3.982l-0.022 0.086c0.946-2.815 2.837-5.11 5.273-6.557l0.052-0.029s136.579-81.943 216.019-129.875l-138.174-49.314-90.355 45.547c-1.476 0.686-3.209 1.084-5.031 1.084-1.015 0-2.010-0.12-2.946-0.361l0.086 0.017-107.303-23.725c-5.394-1.258-9.352-6.038-9.352-11.726 0-0.947 0.114-1.875 0.324-2.77l-0.017 0.086c0.426-1.832 1.214-3.427 2.288-4.797l-0.017 0.020 118.963-154.753 0.74-0.74c16.612-17.219 39.896-27.903 65.668-27.903 1.012 0 2.013 0.017 3.011 0.052l-0.149-0.005c26.89 0.375 52.593 4.903 76.68 12.955l-1.777-0.517 228.159 70.761c0.568-1.43 1.329-2.666 2.288-3.734l-0.016 0.017 198.403-208.946c2.2-2.298 5.294-3.734 8.723-3.734 1.462 0 2.873 0.258 4.176 0.74l-0.086-0.023 88.452 33.115c4.514 1.811 7.639 6.153 7.639 11.23 0 1.573-0.299 3.079-0.848 4.456l0.026-0.086c-0.148 0.396-0.286 0.715-0.432 1.026l0.023-0.056s-69.385 141.94-108.787 228.159l262.795 81.712c22.128 4.765 40.808 17.070 53.658 34.041l0.161 0.224c8.746 13.024 13.953 29.058 13.953 46.303 0 0.74-0.014 1.485-0.027 2.22l0.003-0.112c-0.606 15.733-7.106 29.837-17.325 40.275l0.015-0.015c-11.188 11.888-24.388 21.729-39.092 28.99l-0.802 0.361c-31.946 16.202-69.604 25.802-109.486 26.066l-0.086 0.001c-40.445-1.703-78.366-10.543-113.192-25.273l2.131 0.805-139.26-46.71-353.823 82.836c-0.74 0.155-1.591 0.253-2.461 0.253s-1.718-0.086-2.534-0.258l0.085 0.017zM250.623 698.586l353.823-82.46c0.76-0.168 1.634-0.262 2.529-0.262 1.393 0 2.725 0.231 3.97 0.67l-0.086-0.022 143.054 47.449c30.331 13.14 65.531 21.557 102.486 23.325l0.685 0.023c35.971-0.397 69.832-8.979 99.967-23.959l-1.34 0.602c12.817-6.208 23.766-14.159 33.084-23.699l0.017-0.018c6.354-6.279 10.443-14.857 10.91-24.378l0.005-0.086c0.017-0.568 0.029-1.242 0.029-1.91 0-12.179-3.658-23.509-9.927-32.946l0.137 0.224c-9.745-12.941-23.931-22.073-40.268-25.15l-0.404-0.061h-0.37l-690.398-214.602c-20.187-6.765-43.453-10.829-67.621-11.167l-0.164-0.002c-0.911-0.049-1.976-0.069-3.045-0.069-18.338 0-34.957 7.364-47.057 19.291l-0.74 0.74-106.89 139.26 84.318 18.625 91.475-45.547c1.65-0.911 3.622-1.45 5.712-1.45 1.454 0 2.838 0.258 4.129 0.733l-0.086-0.023 166.412 59.854c4.621 1.749 7.838 6.142 7.838 11.273 0 1.515-0.282 2.967-0.791 4.299l0.025-0.086c-0.936 2.503-2.606 4.559-4.762 5.935l-0.052 0.026c-65.921 39.816-189.428 113.779-215.687 129.531l79.031 26.336zM861.622 668.792l-42.166-13.187 11.654-37.248 42.166 13.187zM761.847 638.997l-42.166-13.557 11.654-37.248 42.166 13.557zM649.292 598.326l-42.574-13.149 12.063-37.248 42.166 13.187-11.654 37.248zM546.873 563.694l-42.166-13.149 11.654-37.248 42.166 13.187zM669.998 443.613c37.467-81.943 98.323-205.367 105.032-219.108l-68.868-26.067-187.487 198.364 151.323 46.71z" />
-<glyph unicode="&#xe959;" glyph-name="minus" horiz-adv-x="1011" d="M931.414 522.995h-851.79c-40.738 0-74.069-33.331-74.069-74.069s33.331-74.069 74.069-74.069h851.79c40.738 0 74.069 33.331 74.069 74.069s-33.331 74.069-74.069 74.069z" />
-<glyph unicode="&#xe95a;" glyph-name="trash" d="M858.768 742.96h-173.536v28.080c0 50.224-41.152 91.072-91.744 91.072h-164.96c-50.592 0-91.728-40.848-91.728-91.072v-28.080h-173.536c-12.864 0-23.152-10.208-23.152-22.992 0-12.768 10.288-22.976 23.152-22.976h41.84v-539.968c0-67.744 55.552-122.912 123.792-122.912h364.224c68.24 0 123.792 55.152 123.792 122.912v539.968h41.84c12.864 0 23.136 10.208 23.136 22.976 0.016 12.784-10.256 22.992-23.12 22.992v0zM383.088 771.040c0 24.864 20.4 45.104 45.44 45.104h164.96c25.040 0 45.44-20.256 45.44-45.104v-28.080h-255.84v28.080zM770.624 157.024c0-42.384-34.816-76.944-77.504-76.944h-364.224c-42.688 0-77.504 34.544-77.504 76.944v539.968h519.392v-539.968h-0.16zM511.008 162.48c12.864 0 23.152 10.208 23.152 22.976v406.176c0 12.768-10.288 22.992-23.152 22.992s-23.152-10.224-23.152-22.992v-406c0-12.768 10.288-23.152 23.152-23.152v0zM359.936 187.84c12.864 0 23.152 10.224 23.152 22.992v355.6c0 12.768-10.288 22.992-23.152 22.992s-23.136-10.224-23.136-22.992v-355.6c0-12.768 10.464-22.992 23.136-22.992v0zM662.080 187.84c12.864 0 23.152 10.224 23.152 22.992v355.6c0 12.768-10.304 22.992-23.152 22.992s-23.152-10.208-23.152-22.992v-355.6c0-12.768 10.288-22.992 23.152-22.992v0z" />
-<glyph unicode="&#xe95b;" glyph-name="checkbox-icon" d="M96 864v-832h832v832h-832zM832 128h-640v640h640v-640z" />
-<glyph unicode="&#xe95c;" glyph-name="read" horiz-adv-x="1233" d="M233.454 186.949l42.052 42.052c-86.267 55.596-156.563 128.729-207.269 214.784l-1.627 2.986c111.053 191.046 314.77 317.442 548.008 317.442 0.613 0 1.226-0.001 1.839-0.003h-0.095c60.503-0.316 118.9-8.769 174.331-24.317l-4.62 1.107 46.421 46.421c-64.484 21.714-138.757 34.423-215.944 34.815l-0.188 0.001c-266.888-0.020-498.575-150.718-614.627-371.662l-1.821-3.805c56.33-106.257 135.335-193.674 231.035-258.23l2.505-1.593zM999.543 707.619l-42.052-42.052c87.047-55.116 157.889-128.272 208.725-214.618l1.605-2.948c-112.020-191.243-316.495-317.645-550.492-317.645-0.243 0-0.487 0-0.73 0h0.038c-61.004 0.319-119.899 8.771-175.838 24.324l4.693-1.114-46.421-46.421c63.954-22.076 137.655-34.824 214.333-34.824 1.137 0 2.273 0.003 3.408 0.008l-0.175-0.001c266.888 0.020 498.575 150.718 614.627 371.662l1.821 3.805c-56.33 106.257-135.335 193.674-231.035 258.23l-2.505 1.593zM503.244 292.831l268.356 268.356 40.619 42.052 92.843 91.409 42.052 43.486 181.248 179.814-42.052 42.052-194.355-194.355-43.486-44.988-76.868-76.868-42.052-40.619-268.356-268.356-40.619-42.052-94.276-92.843-42.052-43.486-179.883-178.381 42.052-42.052 192.922 194.355 121.788 121.788zM616.294 639.421c0.682 0.010 1.488 0.016 2.295 0.016 20.522 0 40.171-3.736 58.305-10.564l-1.14 0.377 44.988 44.988c-30.75 14.629-66.821 23.172-104.887 23.172-137.502 0-248.969-111.467-248.969-248.969 0-38.067 8.543-74.138 23.817-106.401l-0.644 1.513 44.988 44.988c-6.009 17.675-9.695 38.056-10.168 59.229l-0.004 0.231c0 0.081 0 0.177 0 0.273 0 105.567 85.579 191.147 191.147 191.147 0.096 0 0.192 0 0.288 0h-0.015zM616.362 256.581c-0.682-0.010-1.488-0.016-2.295-0.016-20.522 0-40.171 3.736-58.305 10.564l1.14-0.377-44.988-44.988c30.75-14.629 66.821-23.172 104.887-23.172 137.502 0 248.969 111.467 248.969 248.969 0 38.067-8.543 74.138-23.817 106.401l0.644-1.513-44.988-44.988c6.009-17.675 9.695-38.056 10.168-59.229l0.004-0.231c0-0.081 0-0.177 0-0.273 0-105.567-85.579-191.147-191.147-191.147-0.096 0-0.192 0-0.288 0h0.015z" />
-<glyph unicode="&#xe95d;" glyph-name="search2" d="M731.403 313.985l292.608-290.901-87.808-87.296-292.608 290.901v46.592l-17.579 17.067c-64.43-54.325-148.376-87.34-240.032-87.34-2.014 0-4.025 0.016-6.031 0.048l0.303-0.004c-3.409-0.118-7.416-0.185-11.438-0.185-101.45 0-192.944 42.629-257.547 110.951l-0.156 0.167c-68.149 68.707-110.421 163.17-110.933 267.506v0.099c-0.123 3.467-0.193 7.54-0.193 11.63 0 100.913 42.661 191.862 110.932 255.795l0.194 0.18c69.304 68.112 164.234 110.344 269.027 110.933l0.114 0.001c2.293 0.052 4.994 0.082 7.703 0.082 102.6 0 195.267-42.525 261.338-110.911l0.1-0.104c68.465-65.513 111.021-157.618 111.021-259.663 0-2.793-0.032-5.578-0.095-8.356l0.007 0.413c0.026-1.629 0.041-3.551 0.041-5.477 0-91.38-33.233-174.998-88.273-239.427l0.425 0.509 17.579-17.067h40.96zM193.035 389.591c48.434-46.795 114.482-75.63 187.264-75.63s138.829 28.835 187.341 75.704l-0.077-0.074c47.040 47.93 76.076 113.673 76.076 186.197s-29.036 138.267-76.116 186.238l0.040-0.041c-48.426 46.814-114.476 75.663-187.264 75.663s-138.838-28.849-187.34-75.736l0.076 0.073c-47.040-47.93-76.076-113.673-76.076-186.197s29.036-138.267 76.116-186.238l-0.040 0.041z" />
-<glyph unicode="&#xe95e;" glyph-name="ship" horiz-adv-x="1074" d="M537.028 959.996c-0.132 0.006-0.288 0.009-0.444 0.009-1.818 0-3.533-0.439-5.046-1.216l0.062 0.029-349.645-174.848c-4.194-2.122-7.027-6.383-7.066-11.31v-294.61l-92.877-43.725c-4.213-2.168-7.044-6.485-7.044-11.464 0-1.185 0.16-2.333 0.461-3.423l-0.021 0.090 124.877-424.602c0.639-2.311 1.852-4.286 3.476-5.832l0.005-0.005c-21.328-17.398-48.815-27.982-78.769-28.109h-0.028c-43.764 0.076-82.050 23.456-103.121 58.39l-0.303 0.542c-2.264 2.157-5.335 3.484-8.717 3.484-0.086 0-0.171-0.001-0.256-0.003h0.013c-6.9 0-12.493-5.593-12.493-12.493v0c0.033-2.452 0.753-4.73 1.976-6.657l-0.031 0.052c27.25-39.912 71.784-66.286 122.583-68.291l0.297-0.009c59.773 1.918 111.074 36.369 136.95 86.153l0.42 0.887c26.27-50.693 77.586-85.156 137.121-87.034l0.249-0.006c55.421 1.481 103.522 31.474 130.32 75.791l0.394 0.702c1.875-1.218 4.168-1.942 6.63-1.942s4.756 0.724 6.678 1.971l-0.048-0.029c27.191-45.019 75.292-75.012 130.504-76.488l0.209-0.004c59.784 1.884 111.099 36.347 136.95 86.152l0.419 0.888c26.295-50.671 77.596-85.122 137.116-87.034l0.253-0.006c51.096 2.015 95.631 28.389 122.535 67.766l0.345 0.535c1.192 1.875 1.913 4.152 1.946 6.596v0.009c0 6.9-5.593 12.493-12.493 12.493v0c-0.072 0.001-0.158 0.002-0.243 0.002-3.381 0-6.453-1.327-8.722-3.489l0.005 0.005c-21.374-35.476-59.66-58.855-103.413-58.931h-0.011c-29.982 0.127-57.468 10.711-79.025 28.289l0.228-0.18c1.63 1.551 2.842 3.526 3.461 5.748l0.021 0.089 124.877 424.602c0.279 0.999 0.44 2.147 0.44 3.332 0 4.979-2.832 9.297-6.972 11.431l-0.072 0.034-92.877 43.725v294.605c-0.039 4.932-2.872 9.193-6.993 11.282l-0.073 0.033-349.645 174.848c-1.457 0.746-3.179 1.184-5.003 1.184-0.131 0-0.262-0.002-0.392-0.007l0.019 0.001zM537.028 933.833l337.203-168.55v-275.046l-331.725 156.518c-0.651 0.281-1.436 0.544-2.246 0.745l-0.109 0.023c-0.677 0.186-1.465 0.314-2.276 0.357l-0.028 0.001c-0.123 0.024-0.265 0.038-0.41 0.038s-0.286-0.014-0.423-0.041l0.014 0.002c-0.115 0.024-0.248 0.038-0.384 0.038s-0.269-0.014-0.397-0.040l0.013 0.002c-0.839-0.044-1.627-0.172-2.384-0.377l0.080 0.018c-0.919-0.224-1.704-0.487-2.459-0.807l0.104 0.039-331.725-156.518v275.149zM467.96 824.572c-1.9-0.148-3.643-0.7-5.182-1.568l0.062 0.032-174.797-87.040c-0.904-0.343-1.68-0.739-2.405-1.208l0.050 0.030c-5.424-4.224-8.985-10.621-9.367-17.86l-0.003-0.060v-112.64c-0.020-0.208-0.032-0.449-0.032-0.693 0-4.185 3.393-7.578 7.578-7.578 1.556 0 3.003 0.469 4.207 1.274l-0.028-0.017 174.797 87.040c6.558 4.097 11.028 11.011 11.718 19.005l0.006 0.093v112.384c0.051 5.12-2.253 8.909-6.605 8.806zM606.2 824.572c-4.352 0-6.656-3.686-6.656-8.602v-112.384c0.697-8.087 5.167-15 11.62-19.037l0.104-0.061 174.797-87.040c1.176-0.787 2.623-1.257 4.179-1.257 4.185 0 7.578 3.393 7.578 7.578 0 0.244-0.012 0.486-0.034 0.724l0.002-0.030v112.64c-0.384 7.299-3.945 13.696-9.315 17.879l-0.054 0.041c-0.675 0.438-1.452 0.835-2.269 1.148l-0.087 0.029-174.797 87.040c-1.489 0.769-3.24 1.252-5.095 1.33l-0.025 0.001zM451.268 791.394v-86.118l-151.45-75.725v85.965zM622.942 791.394l151.45-75.674v-86.272l-151.45 75.725zM537.080 621.257l434.381-204.851-26.573-90.931-403.866 134.605c-1.153 0.517-2.5 0.819-3.917 0.819s-2.763-0.301-3.979-0.843l0.062 0.025-403.866-134.605-26.573 90.931 87.808 41.37zM524.638 430.844v-379.75c-17.942-52.819-67.094-90.148-124.963-90.148-58.608 0-108.273 38.286-125.35 91.212l-0.26 0.932c-2.256 4.239-6.646 7.076-11.699 7.076s-9.443-2.837-11.665-7.005l-0.035-0.071c-7.076-17.543-16.413-32.651-27.87-45.871l0.17 0.201-86.272 294.246zM549.572 430.844l387.942-129.178-86.272-294.246c-11.287 13.020-20.624 28.127-27.312 44.593l-0.387 1.077c-2.256 4.239-6.646 7.076-11.699 7.076s-9.443-2.837-11.665-7.005l-0.035-0.071c-17.336-53.858-67.002-92.144-125.609-92.144-57.87 0-107.021 37.328-124.689 89.22l-0.274 0.927z" />
-<glyph unicode="&#xe95f;" glyph-name="train" horiz-adv-x="857" d="M194.749 224.081c0.091 0 0.2-0.001 0.308-0.001 38.542 0 69.786 31.244 69.786 69.786 0 0.108 0 0.216-0.001 0.325v-0.017c0 0.091 0.001 0.2 0.001 0.308 0 38.542-31.244 69.786-69.786 69.786-0.108 0-0.216 0-0.325-0.001h0.017c-0.091 0-0.2 0.001-0.308 0.001-38.542 0-69.786-31.244-69.786-69.786 0-0.108 0-0.216 0.001-0.325v0.017c0-0.076 0-0.166 0-0.256 0-38.57 31.267-69.837 69.837-69.837 0.090 0 0.18 0 0.27 0.001h-0.014zM194.749 338.309c0.107 0.001 0.233 0.001 0.36 0.001 24.177 0 43.776-19.599 43.776-43.776 0-0.127-0.001-0.253-0.002-0.379v0.019c0.001-0.107 0.001-0.233 0.001-0.36 0-24.177-19.599-43.776-43.776-43.776-0.127 0-0.253 0.001-0.379 0.002h0.019c-0.092-0.001-0.2-0.001-0.308-0.001-24.205 0-43.827 19.622-43.827 43.827 0 0.108 0 0.217 0.001 0.325v-0.017c-0.001 0.107-0.001 0.233-0.001 0.36 0 24.177 19.599 43.776 43.776 43.776 0.127 0 0.253-0.001 0.379-0.002h-0.019zM662.103 224.081c0.122-0.001 0.267-0.001 0.411-0.001 38.57 0 69.837 31.267 69.837 69.837 0 0.162-0.001 0.325-0.002 0.487v-0.025c0 0.091 0.001 0.2 0.001 0.308 0 38.542-31.244 69.786-69.786 69.786-0.108 0-0.216 0-0.325-0.001h0.017c-0.091 0-0.2 0.001-0.308 0.001-38.542 0-69.786-31.244-69.786-69.786 0-0.108 0-0.216 0.001-0.325v0.017c-0.001-0.152-0.002-0.332-0.002-0.512 0-38.542 31.244-69.786 69.786-69.786 0.055 0 0.109 0 0.164 0h-0.009zM662.103 338.309c0.107 0.001 0.233 0.001 0.36 0.001 24.177 0 43.776-19.599 43.776-43.776 0-0.127-0.001-0.253-0.002-0.379v0.019c0.001-0.092 0.001-0.2 0.001-0.308 0-24.205-19.622-43.827-43.827-43.827-0.108 0-0.217 0-0.325 0.001h0.017c-0.107-0.001-0.233-0.001-0.36-0.001-24.177 0-43.776 19.599-43.776 43.776 0 0.127 0.001 0.253 0.002 0.379v-0.019c-0.001 0.107-0.001 0.233-0.001 0.36 0 24.177 19.599 43.776 43.776 43.776 0.127 0 0.253-0.001 0.379-0.002h-0.019zM333.757 779.601h189.44c0.046 0 0.1 0 0.154 0 26.439 0 47.872 21.433 47.872 47.872 0 0.036 0 0.072 0 0.108v-0.006c-0.425 26.351-21.674 47.601-47.985 48.025l-0.040 0.001h-189.44c-0.046 0-0.1 0-0.154 0-26.439 0-47.872-21.433-47.872-47.872 0-0.054 0-0.108 0-0.162v0.008c0-0.030 0-0.067 0-0.103 0-26.439 21.433-47.872 47.872-47.872 0.054 0 0.108 0 0.162 0h-0.008zM333.757 849.643h189.44c0.061 0.001 0.133 0.001 0.206 0.001 12.074 0 21.862-9.788 21.862-21.862 0-0.072 0-0.145-0.001-0.217v0.011c-0.36-12.029-10.033-21.685-22.036-22.015l-0.031-0.001h-189.44c-0.076-0.001-0.167-0.002-0.257-0.002-12.046 0-21.811 9.765-21.811 21.811 0 0.073 0 0.145 0.001 0.217v-0.011c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.074 9.788 21.862 21.862 21.862 0.072 0 0.145 0 0.217-0.001h-0.011zM843.811 169.605h-18.176v589.21c-0.061 38.633-15.96 73.541-41.55 98.587l-0.025 0.024c-62.259 67.533-182.989 102.4-356.864 102.4-175.206 0-294.605-33.741-356.915-102.4-24.889-25.027-40.569-59.235-41.52-97.1l-0.004-0.18v-590.49h-15.36c-0.205 0.012-0.446 0.019-0.688 0.019-6.786 0-12.288-5.502-12.288-12.288 0-0.259 0.008-0.516 0.024-0.771l-0.002 0.035v-66.15c1.356-6.547 6.415-11.623 12.845-12.986l0.109-0.019 167.424-10.24-87.040-110.285c-1.689-2.136-2.71-4.869-2.71-7.841 0-4.245 2.083-8.004 5.284-10.309l0.038-0.026c2.221-1.403 4.869-2.34 7.712-2.606l0.071-0.005c0.147-0.007 0.319-0.010 0.492-0.010 4.029 0 7.587 2.015 9.723 5.091l0.026 0.039 11.674 15.36h603.494l11.674-15.36c2.603-2.806 6.168-4.687 10.169-5.114l0.071-0.006c2.913 0.29 5.558 1.223 7.86 2.656l-0.077-0.045c2.978 2.578 4.851 6.364 4.851 10.587 0 2.821-0.836 5.446-2.273 7.643l0.033-0.053-87.040 110.285 170.035 10.24c6.569 0.596 11.676 6.077 11.676 12.751 0 0.089-0.001 0.179-0.003 0.268v-0.013 66.15c0.012 0.202 0.019 0.438 0.019 0.675 0 6.786-5.502 12.288-12.288 12.288-0.169 0-0.336-0.003-0.503-0.010l0.024 0.001zM91.171 840.325c38.963 42.803 129.792 93.44 337.459 93.44 206.336 0 296.96-50.637 337.459-93.44 21.097-20.263 34.359-48.547 34.866-79.932l0.001-0.094v-48.026h-744.96v48.026c0.479 31.592 13.808 59.981 34.979 80.242l0.042 0.040zM801.111 417.208v-247.859h-744.96v247.91zM56.151 443.166v244.019h364.698v-244.019zM446.807 443.166v244.019h354.304v-244.019zM688.215 10.987l22.067-27.238h-562.278l21.043 27.238h519.168zM667.427 35.665h-478.874l23.347 29.85 218.010-13.005 215.45 11.725zM832.24 101.867l-403.61-24.678-401.050 24.678v41.523h804.659z" />
-<glyph unicode="&#xe960;" glyph-name="file" d="M802.822 655.948h-306.142c-5.696 0-10.314 4.618-10.314 10.314v0 275.643c0.005 5.692 4.621 10.305 10.314 10.305 2.656 0 5.077-1.004 6.905-2.653l-0.009 0.008 306.142-275.643c2.096-1.895 3.407-4.625 3.407-7.66 0-5.693-4.612-10.308-10.303-10.314h-0.001zM506.974 676.576h268.968l-268.968 242.168zM702.175-56.44h-583.615c-0.416-0.006-0.908-0.009-1.4-0.009-59.951 0-108.664 48.12-109.62 107.844l-0.001 0.090v792.428c0.946 59.822 49.663 107.954 109.621 107.954 0.492 0 0.984-0.003 1.475-0.010l-0.075 0.001h378.099c5.696 0 10.314-4.618 10.314-10.314v0-264.967h295.949c5.696 0 10.314-4.618 10.314-10.314v0-213.317h-20.588v203.063h-295.989c-5.696 0-10.314 4.618-10.314 10.314v0 264.907h-367.785c-0.441 0.008-0.962 0.012-1.483 0.012-48.567 0-88.049-38.899-88.989-87.241l-0.001-0.088v-792.428c0.941-48.43 40.423-87.329 88.99-87.329 0.522 0 1.042 0.004 1.562 0.013l-0.078-0.001h583.615c0.21-0.002 0.459-0.003 0.707-0.003 42.57 0 78.24 29.538 87.634 69.237l0.122 0.611 20.105-4.282c-11.605-49.71-55.543-86.173-107.996-86.173-0.201 0-0.402 0.001-0.603 0.002h0.031zM789.372 23.337c-118.834 3.647-213.779 100.854-213.779 220.236 0 121.687 98.647 220.333 220.333 220.333s220.333-98.647 220.333-220.333c0-0.001 0-0.002 0-0.003v0c-2.047-122.077-101.49-220.253-223.862-220.253-1.064 0-2.126 0.007-3.186 0.022l0.161-0.002zM789.372 443.175c-107.458-3.628-193.191-91.611-193.191-199.619 0-110.305 89.42-199.725 199.725-199.725s199.725 89.42 199.725 199.725c0 0.005 0 0.010 0 0.014v-0.001c-2.032 110.682-92.235 199.628-203.212 199.628-1.072 0-2.142-0.008-3.209-0.025l0.161 0.002zM874.819 233.276h-170.895c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h170.895c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM789.332 147.768c-5.696 0-10.314 4.618-10.314 10.314v170.895c0 5.696 4.618 10.314 10.314 10.314s10.314-4.618 10.314-10.314v0-170.895c0-5.696-4.618-10.314-10.314-10.314v0zM379.949 745.96h-197.031c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314h197.031c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM379.949 623.298h-197.031c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314h197.031c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM626.801 500.615h-443.924c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h443.924c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM487.813 255.311h-304.936c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h304.936c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0z" />
-<glyph unicode="&#xe961;" glyph-name="link" d="M439.393 298.759c2.677 0.319 5.339 0.652 7.974 1.137 1.678 0.305 3.328 0.693 4.992 1.040 2.635 0.568 5.27 1.179 7.863 1.886 1.719 0.471 3.411 0.984 5.103 1.525q3.758 1.179 7.447 2.552c1.664 0.624 3.328 1.248 4.964 1.928 2.468 1.026 4.881 2.135 7.294 3.287 1.539 0.735 3.093 1.456 4.604 2.26 2.552 1.387 5.048 2.774 7.53 4.285 1.276 0.777 2.579 1.484 3.841 2.288q4.992 3.203 9.707 6.837c0.347 0.264 0.721 0.499 1.068 0.763h0.083c3.397-2.635 6.934-5.103 10.484-7.419 0.957-0.61 1.942-1.137 2.912-1.733 2.774-1.719 5.547-3.384 8.501-4.909 1.387-0.749 2.871-1.387 4.313-2.108 2.524-1.234 5.061-2.413 7.655-3.495 1.595-0.666 3.203-1.276 4.826-1.886 2.538-0.957 5.075-1.83 7.655-2.649 1.664-0.527 3.342-1.026 5.034-1.498 2.649-0.735 5.325-1.387 8.015-1.942 1.636-0.347 3.273-0.735 4.937-1.026 2.704-0.485 5.422-0.846 8.168-1.165h309.381c73.865 9.826 130.256 72.421 130.256 148.187 0 82.523-66.898 149.421-149.421 149.421-0.054 0-0.107 0-0.161 0h-24.44c-0.139 0.319-0.291 0.624-0.43 0.957h-36.138l0.485-0.957h-211.062c-0.143 0.004-0.31 0.007-0.478 0.007-9.122 0-16.516-7.395-16.516-16.516s7.395-16.516 16.516-16.516c0.168 0 0.336 0.003 0.503 0.008l-0.024-0.001h271.593c64.287 0 116.403-52.115 116.403-116.403s-52.115-116.403-116.403-116.403h-271.593c-4.22 0.012-8.372 0.243-12.461 0.683l0.521-0.045c-20.763 2.221-39.439 9.686-55.124 21.031l0.334-0.23c21.096 25.588 33.889 58.706 33.889 94.812 0 82.416-66.657 149.264-149 149.573h-211.063l0.485 0.957h-36.194c-0.139-0.319-0.291-0.624-0.43-0.957h-24.462c-82.482-0.045-149.329-66.92-149.329-149.407 0-75.721 56.329-138.285 129.37-148.075l0.766-0.084zM33.078 446.904c0 0.033 0 0.072 0 0.111 0 64.202 52.026 116.252 116.219 116.292h271.666c4.22-0.012 8.371-0.243 12.46-0.683l-0.521 0.045c26.494-2.766 49.906-14.173 67.783-31.309l-0.041 0.038c22.539-21.218 36.575-51.251 36.575-84.562 0-27.371-9.476-52.529-25.328-72.372l0.179 0.232c-15.77 19.601-25.339 44.772-25.419 72.176v0.018c-0.266 8.913-7.556 16.037-16.509 16.037s-16.243-7.124-16.509-16.013l-0.001-0.024c0.085-36.175 13.019-69.314 34.476-95.11l-0.196 0.243c-18.553-13.463-41.778-21.536-66.888-21.536-0.017 0-0.035 0-0.052 0h-271.645c-64.196 0.15-116.183 52.206-116.223 116.413v0.004z" />
-<glyph unicode="&#xe962;" glyph-name="pass" horiz-adv-x="1233" d="M233.54 186.948l42.052 42.052c-86.267 55.596-156.563 128.729-207.269 214.784l-1.627 2.986c111.053 191.046 314.77 317.442 548.008 317.442 0.613 0 1.226-0.001 1.839-0.003h-0.095c60.503-0.316 118.9-8.769 174.331-24.317l-4.62 1.107 46.421 46.421c-64.484 21.714-138.757 34.423-215.944 34.815l-0.188 0.001c-266.888-0.020-498.575-150.718-614.627-371.662l-1.821-3.805c56.33-106.257 135.335-193.674 231.035-258.23l2.505-1.593zM999.629 707.618l-42.052-42.052c87.047-55.116 157.889-128.272 208.725-214.618l1.605-2.948c-112.020-191.243-316.495-317.645-550.492-317.645-0.243 0-0.487 0-0.73 0h0.038c-61.004 0.319-119.899 8.771-175.838 24.324l4.693-1.114-46.421-46.421c63.954-22.076 137.655-34.824 214.333-34.824 1.137 0 2.273 0.003 3.408 0.008l-0.175-0.001c266.888 0.020 498.575 150.718 614.627 371.662l1.821 3.805c-56.33 106.257-135.335 193.674-231.035 258.23l-2.505 1.593zM503.33 292.83l268.356 268.356 40.619 42.052 92.843 91.409 42.052 43.486 181.248 179.814-42.052 42.052-194.355-194.355-43.486-44.988-76.868-76.868-42.052-40.619-268.356-268.356-40.619-42.052-94.276-92.843-42.052-43.486-179.883-178.381 42.052-42.052 192.922 194.355 121.788 121.788zM616.38 639.42c0.682 0.010 1.488 0.016 2.295 0.016 20.522 0 40.171-3.736 58.305-10.564l-1.14 0.377 44.988 44.988c-30.75 14.629-66.821 23.172-104.887 23.172-137.502 0-248.969-111.467-248.969-248.969 0-38.067 8.543-74.138 23.817-106.401l-0.644 1.513 44.988 44.988c-6.009 17.675-9.695 38.056-10.168 59.229l-0.004 0.231c0 0.081 0 0.177 0 0.273 0 105.567 85.579 191.147 191.147 191.147 0.096 0 0.192 0 0.288 0h-0.015zM616.448 256.58c-0.682-0.010-1.488-0.016-2.295-0.016-20.522 0-40.171 3.736-58.305 10.564l1.14-0.377-44.988-44.988c30.75-14.629 66.821-23.172 104.887-23.172 137.502 0 248.969 111.467 248.969 248.969 0 38.067-8.543 74.138-23.817 106.401l0.644-1.513-44.988-44.988c6.009-17.675 9.695-38.056 10.168-59.229l0.004-0.231c0-0.081 0-0.177 0-0.273 0-105.567-85.579-191.147-191.147-191.147-0.096 0-0.192 0-0.288 0h0.015z" />
-<glyph unicode="&#xe963;" glyph-name="vol" horiz-adv-x="1417" d="M1417.011 960h-1417.011v-1024h1417.011zM708.506 377.139l-600.269 523.776h1200.538zM537.498 448l-478.413-417.485v835.379zM582.451 408.781l126.054-109.978 126.054 109.978 474.112-413.286h-1200.435zM879.411 448l478.515 417.894v-835.072z" />
-<glyph unicode="&#xe964;" glyph-name="support" d="M512 929.28c-169.657 0-307.2-137.543-307.2-307.2v-102.401h-10.24c-73.217 0-133.12-59.902-133.12-133.12v-81.92c0-73.217 59.903-133.12 133.12-133.12h102.4c16.084 0.002 30.718 14.636 30.72 30.72v286.72c-0.002 16.085-14.636 30.719-30.72 30.72h-30.72v102.401c0 136.682 109.078 245.76 245.76 245.76s245.76-109.078 245.76-245.76v-102.401h-30.72c-19.599-1.024-30.383-17.774-30.72-30.72v-286.72c0.002-16.084 14.636-30.718 30.72-30.72h25.6c-6.169-18.686-18.2-35.973-38.080-51.2-26.83-20.55-68.389-36.806-127.040-40.32-12.456 29.496-41.755 50.56-75.52 50.56-44.879 0-81.92-37.040-81.92-81.92s37.041-81.92 81.92-81.92c34.361 0 64.095 21.52 76.16 51.84 69.559 3.655 124.496 22.665 163.84 52.801 34.727 26.598 56.378 62.182 64 100.159h13.44c73.217 0 133.12 59.903 133.12 133.12v81.92c0 73.218-59.903 133.12-133.12 133.12h-10.24v102.401c0 169.657-137.543 307.2-307.2 307.2z" />
-<glyph unicode="&#xe965;" glyph-name="summary" d="M847.2 936.2h-670.4c-31.4 0-57-25.6-57-57v-862.4c0-31.4 25.6-57 57-57h670.4c31.4 0 57 25.6 57 57v862.4c0 31.4-25.6 57-57 57zM864.2 16.8c0-9.4-7.6-17-17-17h-670.4c-9.4 0-17 7.6-17 17v862.4c0 9.4 7.6 17 17 17h670.4c9.4 0 17-7.6 17-17v-862.4zM698 730h-382c-11 0-20-9-20-20s9-20 20-20h382c11 0 20 9 20 20s-9 20-20 20zM698 538h-382c-11 0-20-9-20-20s9-20 20-20h382c11 0 20 9 20 20s-9 20-20 20zM492 346h-176c-11 0-20-9-20-20s9-20 20-20h176c11 0 20 9 20 20s-9 20-20 20z" />
-<glyph unicode="&#xe966;" glyph-name="switch-icon" d="M763.426 443.528l-63.42-62.874 135.919-134.758h-527.838v-112.299h527.838l-135.919-134.758 63.42-62.874 256 253.747zM0 245.896h172.169v-112.299h-172.169v112.299zM851.831 762.402h172.169v-112.299h-172.169v112.299zM188.006 650.172h527.838v112.23h-527.838l135.919 134.758-63.42 62.874-256-253.747 256-253.747 63.42 62.874z" />
-<glyph unicode="&#xe967;" glyph-name="rupees" horiz-adv-x="695" d="M403.357-64.182c-0.614 0.922-1.229 1.946-1.843 2.867l-365.158 456.397c-1.334 1.481-2.15 3.451-2.15 5.612 0 0.007 0 0.014 0 0.022v-0.001 87.347h99.226c0.279-0.001 0.609-0.001 0.939-0.001 35.402 0 69.625 5.049 101.988 14.467l-2.575-0.642c27.329 7.729 51.196 19.439 72.361 34.668l-0.681-0.466c27.347 19.445 48.326 46.23 60.235 77.49l0.386 1.153c5.212 13.485 8.439 29.081 8.904 45.368l0.005 0.2v4.198h-375.501l1.434 2.56 61.44 92.16c0.965 1.46 2.6 2.411 4.457 2.411 0.27 0 0.536-0.020 0.795-0.059l-0.029 0.004h295.731l-2.15 4.813c-14.929 31.538-39.93 56.275-70.78 70.489l-0.9 0.372c-16.137 7.499-34.915 13.535-54.534 17.18l-1.479 0.228c-22.223 4.29-48.19 7.126-74.679 7.87l-0.687 0.015c-42.803 1.536-85.606 0.512-128.512 0.819h-29.286c0.43 0.99 0.841 1.797 1.293 2.577l-0.064-0.119 61.44 92.16c0.698 1.321 2.062 2.205 3.633 2.205 0.236 0 0.467-0.020 0.692-0.058l-0.024 0.003h627.814c-0.819-1.434-1.126-2.253-1.741-3.072l-60.621-91.341c-0.964-1.469-2.603-2.425-4.466-2.425-0.303 0-0.601 0.025-0.89 0.074l0.031-0.004h-163.84c23.973-27.734 41.114-62.020 48.421-99.81l0.219-1.361h183.296c-0.52-1.177-1.034-2.151-1.603-3.088l0.067 0.119-10.24-15.77-50.074-75.366c-1.065-1.916-3.078-3.191-5.388-3.191-0.158 0-0.315 0.006-0.47 0.018l0.021-0.001h-113.766c0-2.253-0.819-4.403-1.126-6.554-7.969-48.722-28.83-91.568-58.936-126.156l0.261 0.306c-24.552-28.142-53.711-51.518-86.429-69.135l-1.635-0.805c-33.904-18.495-73.245-32.721-114.841-40.566l-2.51-0.394c-15.917-3.223-35.084-5.737-54.593-6.997l-1.318-0.068h-5.222l2.56-3.482 379.187-473.293v-0.512z" />
-<glyph unicode="&#xe968;" glyph-name="export-icon" horiz-adv-x="1215" d="M0-64.076v151.816h1214.529v-151.816zM235.771 490.509c59.948 97.22 147.811 172.206 252.35 214.688l3.537 1.271c60.097 26.080 130.093 41.251 203.632 41.251 64.894 0 127.029-11.814 184.372-33.408l-3.605 1.191 104.146 244.424 175.727-435.257-435.105-175.879 108.549 246.398c-39.192 13.875-84.391 21.893-131.462 21.893-56.676 0-110.638-11.623-159.631-32.616l2.643 1.007c-83.072-33.566-150.864-90.52-196.971-162.672l-0.998-1.669c-39.499-63.248-62.921-140.063-62.921-222.35 0-9.743 0.328-19.41 0.975-28.989l-0.070 1.297-126.918-6.224c-0.807 11.090-1.267 24.027-1.267 37.072 0 106.97 30.929 206.716 84.332 290.784l-1.312-2.21z" />
-<glyph unicode="&#xe969;" glyph-name="edit-pencil1" d="M0 105.995h1024v-169.984h-1024zM759.467 658.341l-426.667-424.892h-162.133v161.451l426.667 424.892zM883.234 785.794l-85.333-84.992-162.133 161.451 85.333 84.992c7.542 7.86 18.134 12.744 29.867 12.744s22.324-4.884 29.853-12.73l0.014-0.014 98.167-97.758c7.901-7.081 12.849-17.318 12.849-28.711 0-0.37-0.005-0.74-0.016-1.107l0.001 0.054c-0.068-12.698-0.068-29.696-8.602-33.929z" />
-<glyph unicode="&#xe96a;" glyph-name="customise-columns" horiz-adv-x="1297" d="M261.837 883.813h78.643v-116.053h-78.643zM261.837 694.169h78.643v-531.183h-78.643zM1297.033 137.249h-119.945v119.603h-81.374v-119.808h-119.535v-81.442h119.808v-119.603h81.442v119.808h119.603zM261.359 137.249h-179.951v544.905h1014.306v-303.991h81.442v581.837h-1177.19v-904.192h853.811v81.442h-592.555zM261.359 878.625h834.355v-114.961h-1014.306v114.893z" />
-<glyph unicode="&#xe96b;" glyph-name="account" horiz-adv-x="1952" d="M323.735 944.669l-323.735-952.89h139.289l97.638 295.584h323.839l100.359-295.584h143.58l-325.147 952.89zM398.141 809.618c12.349-48.244 25.482-98.214 43.953-152.475l88.952-261.625h-264.764l88.952 263.352c14.546 44.738 28.203 93.191 42.906 150.748zM1424.182 960h-108.836l-394.060-1024.209h107.423l392.019 1015.105zM1917.397 121.387c-42.856-20.742-93.207-32.864-146.389-32.864-0.576 0-1.152 0.001-1.728 0.004h0.089c-136.045 0-227.666 98.79-227.666 245.927 0 151.010 91.045 248.648 231.904 248.648 3.11 0.125 6.762 0.196 10.43 0.196 46.994 0 91.258-11.689 130.043-32.318l-1.498 0.727 7.169-4.134 31.761 108.051-4.919 2.459c-49.529 22.431-107.394 35.503-168.311 35.503-1.644 0-3.286-0.010-4.925-0.029l0.25 0.002c-5.446 0.302-11.82 0.474-18.234 0.474-193.936 0-351.153-157.217-351.153-351.153 0-4.988 0.104-9.952 0.31-14.889l-0.023 0.706c0-209.876 137.667-350.891 342.572-350.891 2.888-0.065 6.291-0.103 9.703-0.103 67.772 0 132.114 14.683 190.020 41.042l-2.876-1.172 4.5 2.302-23.808 104.65z" />
-<glyph unicode="&#xe96c;" glyph-name="hand_icon" horiz-adv-x="1054" d="M439.272 539.517v0l-88.29 88.29zM961.029 538.104c-5.079 5.805-10.12 10.845-15.275 15.924l-161.381 161.381c-16.914 17.041-40.349 27.59-66.248 27.59-16.583 0-32.156-4.325-45.652-11.908l0.469 0.242-121.589 121.589c-18.433 18.117-43.73 29.301-71.64 29.301s-53.207-11.184-71.655-29.316l0.015 0.014c-12.252-11.985-21.331-27.165-25.89-44.193l-0.154-0.678c-17.315 14.254-39.716 22.897-64.136 22.897-55.932 0-101.273-45.342-101.273-101.273 0-27.444 10.917-52.339 28.644-70.579l-0.023 0.024 5.805-5.805c-42.71-12.515-73.371-51.339-73.371-97.325 0-9.921 1.427-19.509 4.088-28.57l-0.18 0.716c4.94-17.279 13.7-32.13 25.346-44.174l-0.028 0.029 17.375-17.375c-17.408-4.903-32.311-13.948-44.127-26.026l-0.017-0.018c-18.11-18.301-29.299-43.483-29.299-71.277s11.189-52.976 29.307-71.286l254.74-254.74c65.75-65.838 156.545-106.651 256.873-106.925h2.23c198.945 0.085 360.189 161.381 360.189 360.338 0 93.18-35.368 178.099-93.412 242.066l0.268-0.3zM911.843 77.829c-54.981-55.442-131.183-89.766-215.402-89.766-1.361 0-2.72 0.009-4.077 0.027l0.206-0.002c-86.248 0.229-164.257 35.317-220.718 91.911l-0.006 0.006-254.138 255.475c-8.938 8.837-14.473 21.1-14.473 34.656 0 0.033 0 0.067 0 0.1v-0.005c-0.002 0.175-0.004 0.382-0.004 0.59 0 13.401 5.544 25.507 14.464 34.149l0.012 0.012c9.229 8.416 21.56 13.57 35.094 13.57s25.865-5.154 35.136-13.607l-0.041 0.037 178.756-178.031c4.483-4.079 10.469-6.577 17.037-6.577 7.639 0 14.49 3.378 19.138 8.722l0.026 0.031c4.047 4.619 6.515 10.709 6.515 17.375s-2.469 12.757-6.542 17.406l0.026-0.030-178.642 177.267-79.774 79.583c-9.043 8.953-14.643 21.37-14.643 35.094s5.6 26.141 14.639 35.090l0.004 0.004c9.095 8.729 21.467 14.104 35.094 14.104s26-5.375 35.112-14.121l219.256-219.256c4.601-4.701 11.010-7.616 18.101-7.616s13.5 2.915 18.097 7.611l0.004 0.005c4.537 4.676 7.333 11.062 7.333 18.101s-2.797 13.425-7.34 18.107l0.006-0.007-287.132 288.011c-9.466 9.055-15.35 21.788-15.35 35.895 0 27.418 22.226 49.644 49.644 49.644 14.107 0 26.839-5.884 35.877-15.331l248.963-248.963c4.72-4.72 11.242-7.64 18.445-7.64 14.406 0 26.085 11.678 26.085 26.085 0 7.203-2.92 13.724-7.64 18.445v0l-128.081 126.63-65.835 66.026c-9.043 8.953-14.643 21.37-14.643 35.094s5.6 26.141 14.639 35.090l0.004 0.004c9.095 8.729 21.467 14.104 35.094 14.104s26-5.375 35.112-14.121l-0.017 0.017 121.589-122.2c-7.341-13.027-11.666-28.6-11.666-45.183 0-25.899 10.549-49.334 27.585-66.242l66.567-66.567c-19.081-24.295-30.6-55.316-30.6-89.028 0-35.338 12.658-67.72 33.688-92.858l-0.185 0.228c0.726-0.726 0.726-1.451 1.451-1.451 4.646-4.654 11.068-7.533 18.163-7.533 6.342 0 12.146 2.3 16.624 6.112l-0.036-0.030c5.685 4.829 9.269 11.984 9.269 19.975 0 6.154-2.125 11.812-5.682 16.28l0.041-0.053c-13.637 16.041-21.931 36.993-21.931 59.883 0 25.89 10.612 49.302 27.723 66.124l2.915 2.915c6.335 4.712 10.395 12.176 10.395 20.588 0 5.905-2 11.342-5.36 15.672l0.043-0.058c-0.726 0.726-1.451 2.177-2.177 2.902l-84.662 84.013c-4.736 6.775-7.568 15.184-7.568 24.256 0 23.558 19.098 42.656 42.656 42.656 9.071 0 17.481-2.832 24.394-7.659l-0.138 0.092 160.541-161.839c4.631-4.438 8.896-9.163 12.803-14.18l0.219-0.293c49.293-54.732 79.445-127.549 79.445-207.408 0-85.031-34.183-162.078-89.558-218.148l0.032 0.032zM938.613 311.575c-0.192-31.565-12.862-60.134-33.321-81.056l0.021 0.022c-4.533-4.465-10.759-7.222-17.629-7.222-0.166 0-0.332 0.002-0.497 0.005h0.025c-14.392 0.044-26.042 11.722-26.042 26.12 0 6.994 2.749 13.346 7.225 18.035l-0.010-0.010c11.402 11.385 18.456 27.123 18.456 44.508s-7.054 33.122-18.455 44.507l-0.001 0.001c-4.729 4.724-7.654 11.252-7.654 18.464 0 14.414 11.685 26.098 26.098 26.098 7.202 0 13.723-2.917 18.445-7.635v0c20.609-20.854 33.34-49.533 33.34-81.185 0-0.229-0.001-0.457-0.002-0.686v0.035zM833.673 730.416c-0.034 0-0.074 0-0.115 0-14.32 0-25.929 11.609-25.929 25.929 0 0.040 0 0.081 0 0.121v-0.006c-0.022 34.769-28.202 62.95-62.969 62.971h-0.002c-14.384 0-26.044 11.66-26.044 26.044s11.66 26.044 26.044 26.044v0 0c0.102 0 0.223 0.001 0.344 0.001 63.448 0 114.885-51.424 114.906-114.867v-0.002c0.004-0.161 0.006-0.35 0.006-0.54 0-14.088-11.421-25.509-25.509-25.509-0.19 0-0.379 0.002-0.568 0.006h0.028zM922.001 735.648c-0.034 0-0.074 0-0.115 0-14.32 0-25.929 11.609-25.929 25.929 0 0.040 0 0.081 0 0.121v-0.006c-0.043 80.717-65.465 146.139-146.178 146.182h-0.004c-14.384 0-26.044 11.66-26.044 26.044s11.66 26.044 26.044 26.044v0c109.554-0.52 198.179-89.386 198.308-198.983v-0.012c-0.016-13.992-11.363-25.328-25.357-25.328-0.242 0-0.483 0.003-0.723 0.010l0.035-0.001zM204.074 100.092c-0.046 0-0.099 0-0.153 0-63.461 0-114.906 51.445-114.906 114.906 0 0.121 0 0.242 0.001 0.362v-0.019c0 14.384 11.66 26.044 26.044 26.044s26.044-11.66 26.044-26.044v0c0.022-34.769 28.202-62.95 62.969-62.971h0.002c0.034 0 0.074 0 0.115 0 14.32 0 25.929-11.609 25.929-25.929 0-0.040 0-0.081 0-0.121v0.006c-0.269-14.313-11.748-25.858-26.009-26.234l-0.035-0.001zM198.308 11.955c-109.461 0.152-198.156 88.847-198.308 198.293v0.015c0 14.384 11.66 26.044 26.044 26.044s26.044-11.66 26.044-26.044v0 0c0-0.012 0-0.026 0-0.040 0-80.872 65.365-146.478 146.145-146.868h0.763c0.034 0 0.074 0 0.115 0 14.32 0 25.929-11.609 25.929-25.929 0-0.040 0-0.081 0-0.121v0.006c-0.848-14.129-12.475-25.277-26.723-25.357h-0.008z" />
-<glyph unicode="&#xe96d;" glyph-name="users" d="M972.8 226.304v5.12c-1.024 15.36-4.096 52.224-10.24 68.608-8.192 22.528-18.432 32.768-30.72 40.96-6.144 4.096-27.648 12.288-61.44 24.576-28.672 10.24-63.488 23.552-75.776 30.72-9.216 5.12-17.408 31.744-18.432 40.96 0 1.024 2.048 3.072 7.168 8.192 13.312 14.336 30.72 41.984 37.888 68.608 9.216 35.84 17.408 109.568-16.384 154.624-19.456 25.6-49.152 39.936-89.088 40.96h-4.096c-39.936-1.024-69.632-15.36-89.088-40.96-33.792-45.056-26.624-118.784-16.384-154.624 7.168-26.624 24.576-54.272 37.888-68.608 1.024-2.048 6.144-6.144 7.168-8.192 3.072-8.192-9.216-35.84-18.432-40.96-12.288-7.168-45.056-19.456-74.752-30.72h-1.024c-7.168-3.072-13.312-5.12-19.456-7.168-19.456 7.168-35.84 14.336-44.032 19.456-14.336 8.192-25.6 46.080-25.6 57.344 0 1.024 1.024 3.072 9.216 12.288 17.408 18.432 38.912 54.272 48.128 89.088 12.288 47.104 22.528 142.336-21.504 200.704-24.576 33.792-63.488 51.2-114.688 52.224h-5.12c-51.2-2.048-90.112-19.456-114.688-53.248-44.032-58.368-33.792-153.6-21.504-200.704 9.216-34.816 31.744-69.632 48.128-88.064v0 0c2.048-3.072 8.192-9.216 9.216-12.288 4.096-12.288-12.288-49.152-25.6-57.344-16.384-9.216-60.416-25.6-100.352-40.96-43.008-16.384-71.68-26.624-78.848-31.744-15.36-10.24-28.672-23.552-38.912-52.224-5.12-21.504-8.192-70.656-10.24-90.112v-5.12l4.096-4.096c11.264-11.264 69.632-47.104 332.8-47.104 261.12 0 320.512 36.864 332.8 48.128l4.096 4.096v5.12c0 6.144-1.024 13.312-2.048 22.528 191.488 1.024 236.544 28.672 245.76 36.864l4.096 3.072zM388.096 130.048c-231.424 0-296.96 28.672-313.344 37.888 2.048 28.672 6.144 62.464 11.264 77.824 8.192 22.528 17.408 31.744 29.696 40.96 6.144 4.096 47.104 19.456 74.752 29.696 41.984 15.36 86.016 31.744 103.424 41.984 21.504 12.288 45.056 60.416 35.84 84.992-2.048 7.168-7.168 13.312-14.336 20.48v0 0c-15.36 16.384-34.816 48.128-43.008 78.848-11.264 43.008-20.48 129.024 17.408 181.248 20.48 27.648 52.224 41.984 96.256 43.008h4.096c44.032-1.024 75.776-16.384 96.256-43.008 37.888-51.2 28.672-138.24 17.408-181.248-8.192-30.72-28.672-62.464-43.008-78.848-11.264-12.288-15.36-18.432-16.384-27.648 0-16.384 12.288-64.512 36.864-78.848 5.12-3.072 13.312-7.168 23.552-11.264 9.216-4.096 19.456-8.192 30.72-12.288 15.36-6.144 32.768-12.288 49.152-18.432 27.648-10.24 68.608-25.6 74.752-29.696 12.288-8.192 21.504-17.408 29.696-40.96 3.072-8.192 5.12-21.504 7.168-36.864 1.024-7.168 2.048-15.36 3.072-22.528 1.024-6.144 1.024-12.288 2.048-18.432-16.384-8.192-81.92-36.864-313.344-36.864zM720.896 208.896c-2.048 16.384-5.12 33.792-9.216 44.032-10.24 28.672-22.528 41.984-38.912 52.224-8.192 5.12-36.864 16.384-79.872 31.744-8.192 3.072-16.384 6.144-23.552 9.216 30.72 11.264 61.44 23.552 74.752 30.72 17.408 10.24 35.84 47.104 28.672 67.584-2.048 5.12-6.144 10.24-11.264 16.384-11.264 12.288-25.6 35.84-31.744 58.368-8.192 31.744-15.36 97.28 13.312 135.168 15.36 20.48 38.912 30.72 71.68 31.744v0h2.048c32.768-1.024 56.32-11.264 71.68-31.744 28.672-37.888 21.504-103.424 13.312-135.168-6.144-22.528-21.504-46.080-32.768-58.368-8.192-9.216-12.288-15.36-12.288-22.528 0-13.312 9.216-50.176 29.696-61.44 13.312-8.192 47.104-20.48 78.848-31.744 19.456-7.168 52.224-19.456 56.32-22.528 9.216-6.144 15.36-13.312 21.504-29.696 3.072-9.216 6.144-30.72 8.192-56.32-14.336-7.168-65.536-26.624-230.4-27.648z" />
-<glyph unicode="&#xe96e;" glyph-name="folder1" d="M640 672.563c-0.004 0.226-0.006 0.493-0.006 0.76 0 13.665 5.474 26.052 14.349 35.087l-0.007-0.007c10.119 10.125 24.101 16.388 39.547 16.388 0.227 0 0.454-0.001 0.68-0.004h-0.034q137.574 0 274.995 0c0.748 0.038 1.623 0.060 2.504 0.060 27.958 0 50.765-22.056 51.969-49.718l0.004-0.109c0.307-22.835 0-45.773 0-68.608v-518.963c0-29.952 0-60.058 0-90.061-0.124-34.093-27.79-61.683-61.9-61.683-1.929 0-3.837 0.088-5.721 0.261l0.242-0.018h-889.549c-1.581-0.144-3.419-0.226-5.276-0.226-33.94 0-61.489 27.36-61.796 61.227v614.429c0 0.085-0.001 0.187-0.001 0.288 0 33.932 27.508 61.44 61.44 61.44 2.092 0 4.159-0.105 6.197-0.309l-0.257 0.021h562.893c3.174-0.256 6.349-0.256 9.728-0.256zM0.768 575.59c0 32.922-1.792 71.066 0.307 107.52 4.813 81.92 31.437 135.014 64.819 135.014h573.44c1.229 17.203 1.792 32.563 3.482 47.104 6.861 55.552 26.88 93.696 51.712 94.106 91.699 0.717 183.245 1.229 274.944 0 30.72-0.358 53.299-59.085 53.914-135.014 0-29.901 0-59.443 0-90.88-0.922 3.738-1.638 5.99-2.099 8.602-10.24 69.171-27.187 99.123-56.627 99.123h-252.262c-2.56 0.313-5.523 0.492-8.528 0.492-6.632 0-13.060-0.871-19.177-2.504l0.518 0.118c-24.781-9.728-43.059-60.979-44.851-123.443 0-4.096 0-8.602-0.307-15.36h-10.598c-183.962 0-368.077-0.768-552.090 0.768-33.997 0.358-64.051-23.552-76.595-125.645z" />
-<glyph unicode="&#xe96f;" glyph-name="group-folder" horiz-adv-x="1350" d="M1185.589 652.92v226.313h-750.482l-96.757 80.767h-338.35v-1024h1183.352l166.719 716.92zM86.498 22.498v851.005h220.31l97.030-80.822h695.255v-139.76h-888.987v-86.552h1031.040l-126.445-543.87z" />
-<glyph unicode="&#xe970;" glyph-name="menu" horiz-adv-x="1145" d="M0 960h1144.611v-104.24h-1144.611v104.24zM0 500.12h1144.611v-104.24h-1144.611v104.24zM0 40.24h1144.611v-104.24h-1144.611v104.24z" />
-<glyph unicode="&#xe971;" glyph-name="balance-sheet" horiz-adv-x="740" d="M663.706-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.646 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM307.2 473.6c14.138 0 25.6-11.462 25.6-25.6v-102.4c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v102.4c0 14.138 11.462 25.6 25.6 25.6zM563.2 473.6c14.138 0 25.6-11.462 25.6-25.6v-102.4c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v102.4c0 14.138 11.462 25.6 25.6 25.6zM435.2 678.4c14.138 0 25.6-11.462 25.6-25.6v-307.2c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v307.2c0 14.138 11.462 25.6 25.6 25.6zM179.2 524.8c14.138 0 25.6-11.462 25.6-25.6v-153.6c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v153.6c0 14.138 11.462 25.6 25.6 25.6zM614.4 217.6c0-14.138-11.462-25.6-25.6-25.6h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h435.2c14.138 0 25.6-11.462 25.6-25.6z" />
-<glyph unicode="&#xe972;" glyph-name="cash-invoice" horiz-adv-x="739" d="M283.546-64c-7.037 0.016-13.405 2.869-18.023 7.476l-62.309 62.309-58.061-58.061c-4.626-4.592-10.999-7.431-18.034-7.431-5.675 0-10.919 1.847-15.163 4.972l0.071-0.050-101.632 74.906c-6.246 4.72-10.24 12.134-10.24 20.48v0 842.906c0.174 42.176 34.317 76.319 76.476 76.493h585.643c42.176-0.174 76.319-34.317 76.493-76.476v-842.871c-0.023-8.544-4.228-16.101-10.676-20.735l-0.076-0.052-106.598-75.469c-4.102-2.918-9.214-4.665-14.734-4.665-7.035 0-13.408 2.838-18.035 7.432l-63.896 63.896-63.898-63.898c-4.617-4.606-10.985-7.459-18.019-7.475h-0.003c-7.037 0.016-13.405 2.869-18.023 7.476l-59.647 59.647-63.334-63.386c-4.625-4.589-10.996-7.425-18.029-7.425-0.088 0-0.175 0-0.263 0.001h0.013zM203.213 67.328c7.037-0.016 13.405-2.869 18.023-7.476l62.309-62.309 63.334 63.386c4.617 4.606 10.985 7.459 18.019 7.475h0.003c7.056-0.002 13.444-2.857 18.074-7.476l59.647-59.647 63.898 63.898c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l66.556-66.556 78.285 55.45v829.44c0 14.138-11.462 25.6-25.6 25.6v0h-585.114c-14.138 0-25.6-11.462-25.6-25.6v0-829.952l73.626-54.272 60.57 60.57c4.625 4.589 10.995 7.424 18.028 7.424 0.034 0 0.068 0 0.102 0h-0.005zM494.592 374.272c0.031 0 0.067 0 0.103 0 8.257 0 14.95-6.694 14.95-14.95 0-0.036 0-0.072 0-0.108v0.006-4.045c15.691-2.198 29.853-7.080 42.601-14.191l-0.617 0.316c6.237-3.339 10.408-9.81 10.408-17.255 0-10.774-8.734-19.507-19.507-19.507-0.059 0-0.118 0-0.177 0.001h0.009c-0.022 0-0.048 0-0.074 0-3.73 0-7.233 0.968-10.273 2.666l0.107-0.055c-6.88 3.901-14.849 7.268-23.221 9.686l-0.792 0.196v-43.981c43.981-11.878 62.822-29.85 62.822-62.259s-24.883-53.248-61.44-57.344v-15.36c0-8.328-6.751-15.078-15.078-15.078s-15.078 6.751-15.078 15.078v0 15.616c-21.435 2.959-40.715 10.195-57.639 20.833l0.602-0.353c-5.981 3.498-9.935 9.89-9.935 17.206 0 10.971 8.894 19.866 19.866 19.866 0.109 0 0.218-0.001 0.326-0.003h-0.016c4.231-0.147 8.112-1.524 11.331-3.782l-0.067 0.045c10.59-7.293 22.984-12.897 36.318-16.079l0.751-0.151v46.080c-41.677 11.315-62.259 27.238-62.259 61.44 1.262 31.775 27.327 57.056 59.297 57.056 0.538 0 1.073-0.007 1.608-0.021l-0.079 0.002v3.482c0 0 0 0.001 0 0.001 0 8.257 6.694 14.95 14.95 14.95 0.072 0 0.144-0.001 0.216-0.002h-0.011zM480.973 280.474v39.117c-13.875-2.048-19.968-9.011-19.968-18.227s4.045-15.002 19.968-20.787zM508.211 229.786v-40.243c13.619 1.997 20.48 8.397 20.48 18.79 0.051 9.728-4.864 16.077-20.48 21.606zM602.726 757.197h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM602.726 655.104h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM602.726 552.96h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 655.104h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 552.96h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 169.882h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 272.026h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
-<glyph unicode="&#xe973;" glyph-name="company-import" horiz-adv-x="914" d="M855.398-64h-765.747c-49.638 0.577-89.655 40.95-89.655 90.669 0 0.272 0.001 0.544 0.004 0.815v-0.042 585.574c0.013 9.007 4.347 16.999 11.039 22.016l0.071 0.051 429.466 319.437c4.529 3.397 10.243 5.44 16.435 5.44s11.906-2.043 16.507-5.492l-0.071 0.051 429.414-319.437c6.77-5.063 11.106-13.058 11.11-22.066v-617.524c0.001-0.107 0.001-0.234 0.001-0.361 0-32.462-26.157-58.815-58.544-59.133h-0.030zM55.091 599.194v-571.802c-0.006-0.248-0.010-0.54-0.010-0.832 0-19.286 15.364-34.983 34.52-35.519l0.050-0.001h765.798c1.99 0.303 3.497 2.001 3.497 4.052 0 0.124-0.005 0.246-0.016 0.367l0.001-0.016v603.75l-401.92 298.906zM718.694 108.083h-523.366c-15.213 0-27.546 12.333-27.546 27.546v0 110.182c0 15.213 12.333 27.546 27.546 27.546s27.546-12.333 27.546-27.546v0-82.637h468.275v82.637c0 15.213 12.333 27.546 27.546 27.546s27.546-12.333 27.546-27.546v0-110.182c0-15.213-12.333-27.546-27.546-27.546v0zM351.078 273.562v0c-0.893-0.115-1.926-0.181-2.974-0.181-13.346 0-24.197 10.683-24.468 23.964v0.025l0.717 173.568c0 15.36 12.39 22.989 27.546 22.989v0c0.553 0.042 1.197 0.067 1.847 0.067 13.982 0 25.346-11.209 25.596-25.131v-0.023l-0.717-172.954c-0.051-15.36-12.39-22.323-27.546-22.323zM350.822 212.019c-0.009 0-0.019 0-0.029 0-7.611 0-14.499 3.092-19.477 8.089l-81.921 81.921c-4.986 4.986-8.070 11.874-8.070 19.482 0 15.216 12.335 27.551 27.551 27.551 7.608 0 14.496-3.084 19.482-8.070l62.618-62.566 64.461 64.512c4.986 4.986 11.874 8.070 19.482 8.070 15.216 0 27.551-12.335 27.551-27.551 0-7.608-3.084-14.496-8.070-19.482l-83.968-83.968c-4.961-4.937-11.802-7.988-19.356-7.988-0.089 0-0.179 0-0.268 0.001h0.014zM572.16 218.47v0c-0.769-0.084-1.66-0.132-2.563-0.132-13.609 0-24.667 10.925-24.88 24.483v0.020l0.717 173.312c0 15.36 12.39 22.682 27.546 22.682v0c0.738 0.077 1.594 0.121 2.46 0.121 13.68 0 24.792-10.994 24.983-24.628v-0.018l-0.717-173.21c-0.051-15.411-12.39-22.63-27.546-22.63zM488.909 359.731c-15.194 0.025-27.502 12.348-27.502 27.546 0 7.596 3.074 14.473 8.047 19.457v0l83.968 84.019c4.985 4.987 11.873 8.072 19.482 8.072s14.496-3.085 19.482-8.072l81.92-81.92c4.986-4.986 8.070-11.874 8.070-19.482 0-15.216-12.335-27.551-27.551-27.551-7.608 0-14.496 3.084-19.482 8.070l-62.566 62.566-64.512-64.512c-4.934-5.011-11.774-8.133-19.343-8.192h-0.011z" />
-<glyph unicode="&#xe974;" glyph-name="credit-debit-note" horiz-adv-x="758" d="M425.062 628.838h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 526.438h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM135.731 374.426c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.244 9.926 22.17 22.17 22.17 0.072 0 0.145 0 0.217-0.001h56.923c2.006 0.142 4.347 0.222 6.707 0.222 55.92 0 101.254-45.323 101.274-101.238v-0.565c0-0.028 0-0.060 0-0.093 0-56.158-45.525-101.683-101.683-101.683-2.216 0-4.415 0.071-6.595 0.21l0.297-0.015h-56.934c-0.061-0.001-0.133-0.001-0.205-0.001-12.244 0-22.17 9.926-22.17 22.17 0 0.054 0 0.109 0.001 0.163v-0.008zM214.989 233.933c1.094-0.074 2.371-0.116 3.658-0.116 31.953 0 57.856 25.903 57.856 57.856 0 1.031-0.027 2.056-0.080 3.074l0.006-0.142v0.614c0.056 0.96 0.089 2.082 0.089 3.212 0 32.207-26.109 58.317-58.317 58.317-1.13 0-2.252-0.032-3.366-0.096l0.154 0.007h-34.56v-122.47zM362.906 374.426c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.244 9.926 22.17 22.17 22.17 0.072 0 0.145 0 0.217-0.001h70.543c1.559 0.107 3.38 0.168 5.215 0.168 20.793 0 39.757-7.835 54.099-20.714l-0.075 0.066c10.812-11.406 17.46-26.852 17.46-43.851 0-0.91-0.019-1.815-0.057-2.716l0.004 0.129v-0.614c0.066-1.071 0.104-2.324 0.104-3.585 0-26.609-16.776-49.3-40.328-58.074l-0.428-0.14 31.078-37.734c4.296-4.464 7.021-10.468 7.269-17.104l0.001-0.048c-0.171-11.349-9.411-20.484-20.785-20.484-0.145 0-0.289 0.001-0.433 0.004h0.022c-9.121 0.003-17.176 4.567-22.009 11.534l-0.058 0.089-43.571 55.194h-35.84v-44.442c-0.587-11.888-10.368-21.304-22.349-21.304s-21.762 9.416-22.347 21.252l-0.002 0.052zM452.915 298.086c21.76 0 34.253 11.622 34.253 28.723v0.563c0 19.149-13.363 29.030-35.123 29.030h-44.442v-58.317zM501.965-64h-424.96c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h514.816c8.728-0.016 16.429-4.397 21.038-11.076l0.056-0.086 123.443-180.787c2.789-4.039 4.454-9.040 4.454-14.43 0-0.003 0-0.006 0-0.009v0-525.722c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 517.837l-111.36 163.123h-501.35c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h424.96c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM681.114 731.238h-128c-14.138 0-25.6 11.462-25.6 25.6v0 153.6c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-128h102.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM655.514-62.413c-14.138 0-25.6 11.462-25.6 25.6v0 153.6c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-153.6c0-14.138-11.462-25.6-25.6-25.6v0zM732.314 14.387h-153.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h153.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
-<glyph unicode="&#xe975;" glyph-name="credit-note" horiz-adv-x="762" d="M761.805 710.298v0c-0.469 1.956-1.084 3.662-1.86 5.276l0.068-0.156-0.717 1.178c-0.872 1.734-1.949 3.22-3.227 4.507l0.001-0.001-232.499 232.755c-1.332 1.2-2.806 2.299-4.376 3.255l-0.13 0.073-1.178 0.614c-2.694 1.409-5.882 2.241-9.263 2.253h-435.614c-40.335-0.058-73.011-32.77-73.011-73.114 0-0.018 0-0.036 0-0.054v0.003-877.875c0.058-40.3 32.712-72.953 73.006-73.011h616.147c0.030 0 0.066 0 0.102 0 40.344 0 73.055 32.676 73.114 73.006v697.401c0 1.394-0.131 2.757-0.38 4.079l0.021-0.136zM690.125 727.45h-126.106c0 0 0 0 0 0-18.966 0-34.348 15.346-34.406 34.298v126.214zM689.152-21.35h-616.141c-16.966 0-30.72 13.754-30.72 30.72v0 877.517c0.2 16.885 13.835 30.52 30.701 30.72h414.739v-155.853c0.204-42.261 34.51-76.442 76.799-76.442 0 0 0.001 0 0.001 0h156.109v-676.301c-0.202-16.811-13.878-30.362-30.718-30.362-0.001 0-0.001 0-0.002 0v0zM147.917 587.827h458.547c11.194 0.569 20.055 9.784 20.055 21.069s-8.861 20.5-20.005 21.067l-0.051 0.002h-458.547c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002zM627.507 473.958c0 11.65-9.444 21.094-21.094 21.094v0h-458.496c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002h458.547c11.65 0 21.094 9.444 21.094 21.094v0zM324.506 257.997h27.034c-1.377 10.709-4.799 20.386-9.869 28.973l0.192-0.352c-4.879 8.106-11.048 14.911-18.301 20.349l-0.183 0.131c-7.225 5.509-15.652 9.911-24.769 12.748l-0.575 0.154c-8.834 2.698-18.988 4.252-29.504 4.252-0.229 0-0.459-0.001-0.688-0.002h0.035c-0.549 0.011-1.196 0.017-1.844 0.017-14.33 0-27.937-3.099-40.187-8.662l0.61 0.248c-11.961-5.525-22.026-13.279-30.051-22.808l-0.106-0.13c-7.961-9.614-14.24-20.954-18.185-33.336l-0.196-0.712c-3.964-12.166-6.25-26.165-6.25-40.699 0-0.362 0.001-0.724 0.004-1.085v0.055c-0.003-0.318-0.004-0.694-0.004-1.071 0-14.438 2.134-28.377 6.104-41.519l-0.264 1.015c3.807-12.905 9.81-24.111 17.65-33.765l-0.14 0.177c7.857-9.477 17.663-17.053 28.832-22.167l0.506-0.208c11.503-5.128 24.926-8.115 39.046-8.115 0.781 0 1.56 0.009 2.337 0.027l-0.115-0.002c1.407-0.083 3.052-0.13 4.709-0.13 21.801 0 41.7 8.145 56.82 21.557l-0.089-0.077c15.274 15.448 25.127 36.282 26.459 59.402l0.011 0.246h-27.034c-0.536-8.53-2.368-16.48-5.304-23.872l0.184 0.524c-2.835-7.233-6.842-13.427-11.847-18.658l0.020 0.021c-4.966-5.13-10.924-9.266-17.569-12.104l-0.351-0.133c-6.703-2.792-14.491-4.413-22.657-4.413-0.387 0-0.773 0.004-1.158 0.011l0.058-0.001c-0.513-0.014-1.116-0.022-1.721-0.022-10.806 0-21.013 2.561-30.049 7.109l0.384-0.175c-8.656 4.511-15.853 10.71-21.385 18.212l-0.119 0.169c-5.554 7.696-9.826 16.732-12.275 26.491l-0.115 0.542c-2.538 9.665-3.995 20.761-3.995 32.198 0 0.236 0.001 0.473 0.002 0.709v-0.036c0 0.092 0 0.202 0 0.311 0 10.814 1.458 21.288 4.187 31.236l-0.193-0.827c2.627 10.011 6.834 18.777 12.398 26.5l-0.161-0.235c5.669 7.655 12.883 13.838 21.214 18.168l0.341 0.161c8.535 4.312 18.605 6.837 29.265 6.837 0.674 0 1.345-0.010 2.014-0.030l-0.098 0.002c0.48 0.013 1.044 0.021 1.611 0.021 13.16 0 25.375-4.046 35.468-10.963l-0.214 0.139c10.446-7.639 17.772-19.008 20.028-32.111l0.043-0.299zM387.123 319.437v-203.264h27.034v87.040h66.099c0.466 0.022 1.012 0.034 1.561 0.034 5.196 0 10.133-1.106 14.59-3.094l-0.228 0.091c3.912-1.99 7.158-4.777 9.624-8.167l0.053-0.077c2.448-3.314 4.321-7.219 5.379-11.446l0.048-0.228q1.69-6.707 2.867-14.080c0.894-4.466 1.5-9.698 1.685-15.038l0.005-0.168q0.307-7.68 0.563-14.387c0.163-4.397 0.622-8.557 1.361-12.619l-0.081 0.536c0.486-3.299 1.857-6.214 3.86-8.575l-0.020 0.024h30.157c-2.774 3.338-4.961 7.277-6.332 11.581l-0.068 0.246c-1.3 3.902-2.441 8.615-3.208 13.452l-0.069 0.526c-0.712 4.366-1.226 9.574-1.426 14.862l-0.007 0.242q-0.307 7.68-0.87 15.104c-0.589 5.512-1.4 10.359-2.469 15.108l0.165-0.874c-1.155 4.675-2.914 8.789-5.227 12.524l0.107-0.185c-2.29 3.806-5.236 6.98-8.711 9.459l-0.095 0.065c-4.090 2.783-8.943 4.78-14.176 5.654l-0.212 0.029v0.563c11.406 2.671 20.865 9.573 26.827 18.923l0.104 0.175c5.287 8.909 8.412 19.639 8.412 31.1 0 0.479-0.005 0.956-0.016 1.432l0.001-0.071c0.037 0.715 0.059 1.553 0.059 2.395 0 14.541-6.334 27.603-16.394 36.577l-0.048 0.042c-11.276 8.947-25.713 14.353-41.412 14.353-1.408 0-2.806-0.043-4.192-0.129l0.19 0.009zM470.528 225.741h-56.32v70.707h67.174c0.968 0.095 2.094 0.149 3.231 0.149 9.467 0 18.060-3.746 24.376-9.836l-0.011 0.010c5.338-6.299 8.583-14.519 8.583-23.497 0-0.542-0.012-1.080-0.035-1.616l0.003 0.076c0.020-0.457 0.032-0.993 0.032-1.532 0-6.026-1.43-11.718-3.969-16.755l0.098 0.214c-2.485-4.559-5.947-8.3-10.124-11.039l-0.116-0.071c-4.278-2.72-9.322-4.665-14.731-5.502l-0.219-0.028c-5.39-0.945-11.597-1.485-17.93-1.485-0.014 0-0.029 0-0.043 0h0.002z" />
-<glyph unicode="&#xe976;" glyph-name="customer" horiz-adv-x="1272" d="M629.863 701.979c0-6.195-0.256-12.237-0.666-18.432l-0.768-8.141c-0.41-3.43 1.331-3.43 0 0.666 0-0.002 0-0.005 0-0.007 0-1.913-0.281-3.761-0.803-5.504l0.035 0.136c-2.135-12.982-4.965-24.327-8.604-35.303l0.464 1.614c-1.69-5.12-3.686-10.547-5.786-15.667s0.666 1.178 0.666 1.434c-0.49-1.809-1.209-3.393-2.139-4.827l0.040 0.066c-1.178-2.611-2.509-5.12-3.84-7.885-5.895-11.443-11.844-21.126-18.42-30.33l0.5 0.736c-0.768-1.178-5.12-7.526-3.021-4.198s-2.509-3.021-3.277-4.096c-3.686-4.454-7.526-8.704-11.469-12.902s-8.141-8.141-12.39-11.981c-1.997-1.69-3.84-3.43-5.939-5.12l-3.277-2.765c-0.41-0.41-0.922-0.666-1.331-1.075l1.178 0.922c-0.768-1.69-5.53-4.096-6.963-5.12l-5.683-3.942c-5.12-3.277-10.24-6.451-15.36-9.37s-9.728-5.12-14.746-7.526l-3.174-1.434c-5.53-2.611 5.53 2.099 0 0l-8.141-3.174c-9.507-3.643-20.94-6.917-32.714-9.244l-1.385-0.228c-2.611-0.512-5.12-1.075-7.885-1.434-1.327-0.392-2.856-0.633-4.436-0.665h-0.018c3.174-0.768 4.608 0.512 1.587 0.256-6.042-0.666-12.083-1.178-18.176-1.434-2.633-0.101-5.724-0.159-8.828-0.159-9.825 0-19.514 0.579-29.036 1.704l1.154-0.111c-5.12 0.512 1.331-0.41 1.587-0.256-1.178-0.41-4.096 0.666-5.376 0.768-2.611 0.41-5.12 0.922-7.885 1.434-5.786 1.178-11.571 2.611-17.254 4.198s-10.65 3.277-15.923 5.12l-8.141 3.174c-3.174 1.178-0.666-0.922 1.434-0.666-1.178 0-3.533 1.587-4.762 2.099-11.759 5.485-21.68 11.099-31.117 17.382l0.858-0.537-6.451 4.352c-1.587 1.075-5.53 2.918-6.298 4.608l2.611-1.997-1.997 1.587-3.277 2.765c-2.355 1.997-5.12 4.096-7.117 6.195-8.33 7.538-15.947 15.447-22.995 23.849l-0.301 0.369-2.765 3.277c0 0.256-0.41 0.41-0.512 0.666l0.922-1.178c-1.69 0.768-3.533 4.762-4.608 6.298-3.533 5.12-6.861 10.24-9.882 15.36-2.611 4.454-5.12 9.062-7.526 13.67-1.331 2.611-2.611 5.12-3.84 7.885-0.512 1.075-0.922 2.099-1.434 3.174-2.355 5.12 1.843-4.762 0 0-3.837 9.155-7.537 20.352-10.436 31.868l-0.367 1.72c-1.178 5.12-2.355 10.547-3.174 15.77-0.493 1.44-0.778 3.1-0.778 4.826 0 0.193 0.004 0.386 0.011 0.578l-0.001-0.028c0-0.41 0.768-6.605 0.256-1.587-0.41 3.277-0.666 6.605-0.922 10.24-0.469 5.367-0.737 11.612-0.737 17.92s0.267 12.553 0.792 18.725l-0.055-0.805c0.256 3.021 0.512 6.042 0.922 9.062s-1.075 1.587-0.256-1.587c0.032 1.598 0.273 3.127 0.697 4.578l-0.031-0.124c1.075 6.195 2.253 12.39 3.686 18.432 3.132 12.592 6.639 23.207 10.827 33.472l-0.587-1.626c2.253 5.786-2.509-5.376 0 0 0.512 1.075 0.922 2.099 1.434 3.174 1.178 2.611 2.509 5.12 3.84 7.885 2.611 5.12 5.376 10.24 8.448 15.36s5.53 8.806 8.55 13.056c1.075 1.434 3.277 6.195 5.12 6.963-2.099-0.922-3.021-3.686-0.922-1.178 1.331 1.587 2.509 3.174 3.84 4.762 7.34 8.707 14.956 16.566 23.080 23.873l0.216 0.191c2.099 1.997 4.352 3.84 6.605 5.683 1.075 0.768 7.373 5.53 4.096 3.277s3.021 2.253 4.198 3.021c2.765 1.997 5.683 3.942 8.55 5.786 8.121 5.356 17.57 10.663 27.391 15.312l1.434 0.611c0.922 0.41 3.84 2.355 4.762 2.099-0.256 0-6.042-2.355-1.434-0.666l8.141 3.174c5.53 1.997 11.213 3.84 16.845 5.376s10.24 2.611 15.36 3.84c2.918 0.666 5.939 1.178 8.806 1.587l4.454 0.666c2.509 0.41-6.042-0.666 0 0 7.956 0.967 17.168 1.519 26.509 1.519 3.282 0 6.547-0.068 9.796-0.203l-0.465 0.015c5.786-0.256 11.571-0.666 17.357-1.331 1.843-0.256 6.042-1.331-0.666 0 0.97-0.207 2.176-0.388 3.402-0.502l0.131-0.010c3.533-0.512 7.117-1.178 10.547-1.997 12.978-2.732 24.086-5.996 34.826-10.012l-1.649 0.54c2.509-0.922 5.12-1.843 7.373-2.918 5.53-2.099-4.096 1.997-0.666 0.256l3.942-1.843c5.12-2.355 10.24-5.12 15.36-7.885s9.472-5.53 14.080-8.55l6.451-4.352 3.533-2.509 2.099-1.587c2.253-1.69 1.843-1.331-1.178 0.922 4.582-2.824 8.487-6.224 11.765-10.163l0.062-0.077c4.352-3.84 8.448-7.782 12.39-11.981s7.782-8.448 11.469-12.902c1.331-1.587 3.686-3.43 4.352-5.376l-1.997 2.611c0.666-0.922 1.434-1.843 2.099-2.765l3.021-4.198c5.824-8.248 11.587-17.73 16.706-27.599l0.651-1.38c1.178-2.355 2.355-4.762 3.43-7.117 0.666-1.331 1.178-2.611 1.843-3.942 1.69-3.43-2.355 6.195-0.256 0.666s4.198-10.906 6.042-16.435c3.213-9.587 6.096-21.244 8.099-33.201l0.195-1.411c0.124-1.357 0.305-2.564 0.549-3.747l-0.037 0.214c-1.331 6.298-0.41 3.277-0.256 1.587 0.256-3.021 0.666-6.042 0.922-9.062-0.512-5.376-0.41-11.571-0.41-17.766 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.016 55.639-17.655 107.154-47.639 149.271l0.535-0.791c-30.633 42.818-72.688 75.684-121.727 94.417l-1.819 0.61c-25.812 9.428-55.613 14.88-86.687 14.88-79.664 0-150.958-35.837-198.641-92.268l-0.317-0.385c-33.195-40.027-54.856-90.698-59.282-146.227l-0.059-0.922c-0.433-5.602-0.68-12.132-0.68-18.719 0-103.143 60.526-192.149 147.998-233.439l1.572-0.667c32.246-15.066 70.014-23.858 109.835-23.858 18.149 0 35.871 1.826 52.993 5.305l-1.701-0.289c104.225 22.401 184.213 105.092 202.324 209.035l0.224 1.551c2.089 12.587 3.42 27.273 3.683 42.22l0.004 0.276c0 14.506-11.76 26.266-26.266 26.266s-26.266-11.76-26.266-26.266v0zM1096.192 628.916c0-4.352 0-8.55-0.512-12.902 0-2.099-0.41-4.198-0.512-6.298-0.666-6.605 0.768 4.352-0.256-1.997-1.562-9.603-3.663-18.018-6.379-26.152l0.338 1.166c-1.331-3.942-2.611-7.782-4.198-11.571s2.253 4.608-0.41-0.922c-1.075-2.099-1.997-4.198-3.021-6.298-4.205-8.282-8.491-15.304-13.25-21.964l0.347 0.511c-0.922-1.331-2.611-4.762-4.096-5.53 0 0 3.533 4.096 1.434 1.997l-1.587-1.997c-3.036-3.725-6.049-7.063-9.22-10.244l0.004 0.004q-4.147-4.352-8.704-8.294l-3.942-3.43-2.611-2.253c-3.686-3.174 3.277 2.253 0.512 0.41-6.015-4.52-12.856-9.008-19.976-13.062l-0.965-0.506c-3.533-1.997-7.117-3.84-10.803-5.53l-2.355-1.075c-3.174-1.69 4.762 1.843 1.434 0.666-2.253-0.768-4.352-1.69-6.605-2.509-6.837-2.608-15.092-4.978-23.586-6.686l-1.041-0.175c-2.099-0.41-4.096-0.768-6.195-1.075-6.195-1.075 3.84 0.256-1.075 0s-9.062-0.922-13.67-1.075c-1.558-0.044-3.392-0.069-5.231-0.069-7.518 0-14.939 0.415-22.241 1.225l0.899-0.081c-5.12 0.512 5.12-0.768-1.075 0l-6.195 1.075c-4.352 0.922-8.704 1.997-12.902 3.174-4.841 1.318-8.743 2.629-12.552 4.126l0.827-0.286c-1.997 0.666-3.84 1.434-5.683 2.253-3.533 1.331 0.666-0.922 1.434-0.666-1.207 0.337-2.263 0.827-3.216 1.459l0.042-0.026c-8.643 4.103-15.84 8.145-22.742 12.605l0.777-0.47c-3.43 2.253-6.605 4.608-9.882 6.963s3.84-3.277 1.331-0.922l-1.997 1.587c-1.69 1.434-3.533 2.918-5.12 4.454-6.187 5.565-11.83 11.418-17.035 17.65l-0.22 0.27c-0.768 0.922-1.434 1.843-2.253 2.611-1.997 2.253 1.587-1.997 1.434-1.997-1.331 0.768-2.611 3.533-3.533 5.12-2.509 3.533-5.12 7.117-7.117 10.803s-4.096 6.963-5.939 10.547c-0.922 1.843-1.843 3.686-2.611 5.376s-0.922 2.099-1.434 3.174c-1.587 3.021 2.355-6.195 0.256-0.666-2.644 6.357-5.222 14.174-7.259 22.206l-0.267 1.243c-0.922 4.096-1.843 8.141-2.509 12.237-0.301 1.053-0.486 2.266-0.512 3.518v0.015s0.768-6.861 0.256-1.587c-0.256 2.355-0.512 5.12-0.666 7.219-0.346 3.979-0.543 8.61-0.543 13.286s0.197 9.307 0.584 13.884l-0.041-0.598c0 2.099 0.41 4.198 0.666 6.298 0.512 5.12-0.922-5.683 0 1.075 0.666 4.352 1.587 8.806 2.611 13.158 2.491 9.67 5.188 17.736 8.366 25.556l-0.481-1.339c1.075 2.765-0.922-2.355-0.922-2.253 0.401 1.216 0.886 2.266 1.474 3.247l-0.040-0.073c0.768 1.843 1.69 3.686 2.611 5.53 1.997 3.84 4.096 7.629 6.298 11.315s4.352 6.861 6.605 10.24l3.533 5.12-1.434-1.997c0 0.41 2.355 2.918 2.765 3.277 5.425 6.502 11.067 12.355 17.1 17.783l0.155 0.137c1.434 1.331 3.021 2.611 4.608 3.942l1.997 1.587c3.533 3.021-1.075-0.666-1.331-0.922 3.015 2.97 6.493 5.483 10.312 7.418l0.235 0.108c6.264 4.224 13.469 8.273 21 11.737l0.965 0.398c0.908 0.546 1.958 1.032 3.061 1.401l0.113 0.033s-5.12-1.997-2.253-0.922c1.997 0.666 3.84 1.434 5.683 2.253 4.096 1.587 8.294 2.918 12.493 4.096s8.038 2.099 12.134 2.918l6.195 1.178c1.335 0.112 2.542 0.293 3.722 0.546l-0.19-0.034c-1.331-0.41-5.12-0.666-1.587-0.256 6.61 0.729 14.275 1.145 22.037 1.145 1.919 0 3.832-0.025 5.739-0.076l-0.281 0.006c3.942 0 7.885-0.512 11.827-0.922 6.861-0.768-3.84 0.666 1.075 0 2.355-0.41 4.762-0.768 7.117-1.331 9.846-1.915 18.427-4.41 26.673-7.582l-1.073 0.363c1.587-0.666 3.277-1.331 5.12-1.843 4.762-1.843-1.331 0.666-1.434 0.666 1.222-0.416 2.27-0.901 3.258-1.479l-0.083 0.045c3.942-1.843 7.782-3.84 11.571-5.939s6.963-4.096 10.24-6.195 8.806-4.608 10.547-7.526c0 0-4.198 3.43-1.997 1.434 0.768-0.768 1.843-1.434 2.611-2.253l4.608-3.942c3.174-2.918 6.298-5.786 9.216-8.96s5.376-5.939 8.038-8.96l1.587-1.997c1.843-2.099 1.843-0.512-0.922 1.331 1.583-1.596 2.944-3.415 4.033-5.404l0.063-0.125c4.324-6.106 8.606-13.125 12.416-20.429l0.486-1.024c0.922-1.843 1.843-3.686 2.611-5.53 0.41-0.768 0.666-1.587 1.075-2.355 1.587-3.174-1.843 5.12-0.666 1.434s3.174-8.141 4.454-12.39c2.293-6.867 4.391-15.278 5.885-23.897l0.156-1.089c1.075-6.195-0.256 3.84 0-1.075 0.256-2.099 0.41-4.198 0.666-6.298 0.256-4.352 0.41-8.96 0.41-13.568 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.131 110.181-89.481 199.45-199.68 199.45-61.111 0-115.81-27.452-152.438-70.698l-0.241-0.292c-25.653-30.951-42.449-70.083-46.030-112.97l-0.050-0.745c-0.361-4.494-0.567-9.729-0.567-15.013 0-79.514 46.608-148.143 113.994-180.056l1.21-0.515c24.987-11.7 54.257-18.528 85.123-18.528 14.324 0 28.304 1.47 41.798 4.269l-1.327-0.23c79.952 17.531 141.248 81.047 155.268 160.847l0.175 1.201c1.733 9.925 2.789 21.43 2.917 33.157l0.001 0.123c-0.087 14.499-11.817 26.23-26.309 26.317h-0.008c-14.528-0.371-26.164-12.237-26.164-26.821 0-0.075 0-0.15 0.001-0.225v0.011zM794.932 112.206v-86.477c0-4.096 0-8.038 0-12.134 0-6.042 1.587 5.683 0 0-0.256-1.178-0.512-2.355-0.768-3.43-0.472-2.012-1.017-3.721-1.676-5.372l0.089 0.252s2.918 5.376 0 0.768c-0.768-1.178-1.331-2.509-2.099-3.84-0.256-0.512-0.666-0.922-0.922-1.434-1.587-2.355-1.331-1.997 1.075 1.178 0.41-1.178-6.298-6.605-7.117-7.373-4.198-3.942 5.12 2.765 0 0-1.119-0.594-2.074-1.205-2.974-1.884l0.056 0.040c-1.327-0.903-2.847-1.697-4.458-2.305l-0.15-0.050c1.075 0.41 2.099 0.922 3.021 1.331l-3.277-1.178c-0.894-0.311-2.044-0.629-3.218-0.883l-0.213-0.039-1.69-0.41c-2.918-0.512-2.355-0.41 1.69 0-1.171-0.198-2.519-0.31-3.894-0.31-0.575 0-1.146 0.020-1.712 0.059l0.076-0.004h-1.997c-37.274 0-74.496 0-111.77 0h-573.44c-0.277-0.032-0.597-0.050-0.922-0.050s-0.645 0.018-0.96 0.054l0.039-0.004c-2.918 0.256-2.355 0 1.587-0.256-1.619 0.175-3.094 0.499-4.505 0.965l0.153-0.044c-1.434 0.41-2.765 0.922-4.198 1.178-5.683 1.434 5.12-2.918 0 0-1.331 0.666-2.509 1.331-3.84 2.099s-1.434 0.922-2.253 1.331c-2.355 1.587-1.997 1.331 1.178-1.075-1.075-0.256-5.376 5.12-6.195 5.786-0.419 0.407-0.805 0.841-1.157 1.303l-0.021 0.028c-1.843 2.253-1.434 1.69 0.922-1.331-1.033 1.266-1.954 2.694-2.706 4.22l-0.059 0.132c-0.512 1.075-1.075 2.099-1.587 3.021-2.918 5.12 1.434-5.53 0 0-0.41 1.69-1.075 3.277-1.434 5.12l-0.41 1.69c-0.512 2.918-0.41 2.355 0-1.69-0.283 2.391-0.444 5.16-0.444 7.968 0 1.827 0.068 3.637 0.203 5.43l-0.014-0.239v87.040c0 5.53 0 11.059 0.512 16.589 0.256 3.686 0.512 7.219 0.922 10.906l0.41 3.533c0.41 2.918 0.256 2.355-0.256-1.587 0 1.178 0.41 2.355 0.512 3.533 2.237 14.632 5.306 27.498 9.307 39.946l-0.5-1.802c1.843 5.939 3.84 11.725 6.042 17.51l1.587 4.096c2.253 5.786-2.509-5.376 0 0l4.352 9.472c6.272 12.82 12.625 23.635 19.684 33.929l-0.586-0.905c1.587 2.355 3.277 4.762 5.12 7.117 0.82 1.615 1.829 2.999 3.022 4.199l-0.001-0.001-1.997-2.611c0.666 0.922 1.434 1.843 2.099 2.765 3.942 5.12 8.038 9.728 12.39 14.336 8.57 9.216 17.596 17.691 27.166 25.524l0.482 0.383c1.187 1.216 2.533 2.268 4.006 3.126l0.090 0.048c-5.683-2.611-1.69-1.331 0 0s4.608 3.43 6.963 5.12c5.376 3.84 11.059 7.373 16.845 10.65s10.65 5.939 16.077 8.704c2.611 1.331 5.12 2.509 7.885 3.686 1.37 0.864 2.951 1.58 4.63 2.067l0.132 0.033c-3.533-1.434-4.096-1.69-1.434-0.666 1.075 0.41 2.099 0.922 3.277 1.331 10.191 4.167 22.585 8.105 35.338 11.114l1.782 0.354c5.786 1.331 11.725 2.509 17.613 3.43 1.591 0.421 3.434 0.697 5.33 0.767l0.046 0.001c-6.963 0.256-1.843-0.256 0 0 3.686 0.41 7.219 0.768 10.906 0.922 6.605 0.41 13.158 0.666 19.61 0.666h263.373c6.042 0 12.134-0.256 18.278-0.666 3.686-0.256 7.526-0.512 11.213-1.075 1.075 0 8.448-1.178 1.843 0l6.605-1.075c17.973-3.063 33.889-7.49 49.101-13.337l-1.741 0.588 5.12-1.997c0.922-0.41 7.526-3.277 1.69-0.666 3.277-1.434 6.605-2.918 9.728-4.454 8.997-4.274 16.378-8.35 23.5-12.804l-0.972 0.567q9.062-5.53 17.766-11.827c1.69-1.178 3.533-2.509 5.12-3.84-4.608 3.942-1.075 0.768 0 0 3.277-2.611 6.605-5.376 9.728-8.141 10.841-9.548 20.629-19.709 29.536-30.618l0.365-0.461 3.021-3.84c2.509-3.174-3.686 5.12 0 0 2.099-2.918 4.198-5.786 6.298-8.806 4.198-6.195 8.294-12.646 11.981-19.2s6.605-12.237 9.472-18.432c0.666-1.434 1.331-3.021 2.099-4.454 2.918-6.195-1.997 5.12 0.41-1.075 1.434-3.686 2.918-7.373 4.198-11.213 4.183-11.377 7.958-25.128 10.639-39.266l0.267-1.694c0.41-1.997 0.666-4.096 1.075-6.042s1.69-8.038 0.256-1.178c0.515-2.939 0.899-6.463 1.068-10.044l0.007-0.196c0.756-6.213 1.188-13.406 1.188-20.699 0-0.679-0.004-1.357-0.011-2.034l0.001 0.103c0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.419 69.482-24.768 133.198-65.211 183.404l0.443-0.568c-41.124 51.011-98.456 87.488-164.091 101.647l-1.899 0.343c-23.234 4.177-49.978 6.565-77.28 6.565-5.503 0-10.983-0.097-16.439-0.289l0.791 0.022h-208.845c-3.562 0.117-7.75 0.184-11.954 0.184-28.736 0-56.743-3.126-83.698-9.056l2.57 0.474c-111.736-28.841-196.487-119.231-216.671-232.004l-0.263-1.775c-3.043-24.716-4.78-53.327-4.78-82.344 0-10.114 0.211-20.18 0.629-30.191l-0.047 1.431c0-12.646-0.768-25.6 0.256-38.195 2.845-35.882 28.424-65.070 62.21-73.305l0.561-0.116c9.006-1.426 19.391-2.241 29.967-2.241 3.489 0 6.957 0.089 10.402 0.264l-0.484-0.020h662.374c0.078 0 0.169 0 0.261 0 23.41 0 44.526 9.819 59.455 25.564l0.034 0.037c12.139 13.235 20.074 30.502 21.588 49.578l0.019 0.291c0.41 4.454 0.256 8.96 0.256 13.568v87.040c0.016 0.346 0.026 0.751 0.026 1.158 0 14.478-11.737 26.214-26.214 26.214s-26.214-11.737-26.214-26.214c0-0.407 0.009-0.813 0.028-1.215l-0.002 0.057zM1219.38 181.428v-81.92c0-2.355 0-4.608 0-6.963v-2.253c-0.41 0.41 1.434 5.12 0.41 2.611-0.252-0.693-0.483-1.536-0.648-2.401l-0.017-0.108c-0.922-5.12 0 1.843 0.768 1.434s-1.075-2.099-1.178-2.253c-2.611-5.12 0.41 0.768 0.666 0.512-1.092-1.285-2.248-2.44-3.49-3.497l-0.043-0.036c-1.075 1.075 5.12 2.918 1.178 1.178-0.884-0.389-1.624-0.783-2.331-1.223l0.078 0.045c-2.355-1.69 2.253 1.434 2.355 0.922s-2.918-0.768-3.277-0.922c-4.608-1.434 5.12 0 0 0h-316.928c-24.73 0-49.766 0.922-74.65 0h-1.178l26.317-26.317c0.277 7.798 0.435 16.961 0.435 26.16 0 18.539-0.641 36.928-1.903 55.146l0.136-2.458c-5.189 53.982-24.391 102.655-53.884 143.389l0.585-0.849c-18.101 24.387-38.789 45.416-62.025 63.295l-0.746 0.551c1.69-13.824 3.533-27.494 5.12-41.318l4.762 4.096c0.768 0.666 6.298 5.12 1.178 1.075 2.765 2.099 5.53 4.096 8.448 6.042 6.033 4.064 13.104 8.215 20.425 11.946l1.181 0.546c1.843 0.922 3.84 1.69 5.683 2.611 6.298 3.021-5.12-1.843 1.434 0.666 3.277 1.178 6.605 2.509 9.882 3.533 6.781 2.406 15.085 4.639 23.602 6.271l1.127 0.18c1.877 0.522 4.078 0.904 6.339 1.069l0.112 0.007c-6.605 0 0.41 0 1.587 0 3.686 0.41 7.219 0.666 10.906 0.768s6.298 0.256 9.626 0.256h217.293q5.53 0 11.059-0.41c0.669 0.048 1.45 0.075 2.237 0.075 3.083 0 6.069-0.42 8.902-1.206l-0.234 0.055-3.43 0.41 3.533-0.512 5.12-0.922q4.352-0.768 8.704-1.997c8.231-1.971 15.068-4.096 21.718-6.605l-1.238 0.41c1.69-0.666 3.277-1.331 5.12-1.843 5.53-2.099-4.096 1.997-0.666 0.256s5.786-2.611 8.704-4.096c7.164-3.576 13.063-6.981 18.749-10.684l-0.727 0.444c2.918-1.843 5.786-3.84 8.55-5.939l1.434-1.075c2.253-1.69 1.843-1.331-1.178 0.922 1.587-0.256 4.096-3.277 5.376-4.352 5.53-4.729 10.545-9.597 15.238-14.763l0.122-0.137c2.509-2.765 5.12-5.53 7.373-8.397 0.666-0.922 3.021-2.918 3.277-4.096-2.099 2.918-2.611 3.43-1.434 1.997 0.512-0.666 1.075-1.331 1.587-2.099 4.033-5.427 8.048-11.616 11.674-18.054l0.461-0.89c1.997-3.533 3.84-7.117 5.683-10.803 0.443-0.829 0.925-1.874 1.353-2.947l0.080-0.228c0.512-1.075 0.922-2.099 1.434-3.174-1.434 3.533-1.69 4.096-0.666 1.434 2.332-5.623 4.796-12.845 6.866-20.231l0.354-1.477c0.922-3.43 1.69-6.963 2.509-10.24 0.41-1.69 0.666-3.533 1.075-5.12s0.768-9.882 0.41-1.997c0.666-7.885 1.69-15.667 1.69-23.706 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.13 64.693-28.752 122.675-73.982 162.084l-0.258 0.22c-38.145 32.565-88.033 52.379-142.548 52.379-0.285 0-0.571-0.001-0.856-0.002h-198.049c-1.612 0.028-3.513 0.044-5.419 0.044-15.167 0-30.096-1.021-44.721-2.998l1.705 0.189c-42.555-6.818-79.939-25.247-109.832-51.899l0.213 0.187c-4.669-4.568-7.563-10.933-7.563-17.974 0-1.464 0.125-2.898 0.365-4.294l-0.021 0.149c1.29-8.101 5.909-14.924 12.385-19.134l0.108-0.066c-5.12 3.942 1.075-0.922 2.355-1.997l6.707-5.683c4.454-3.84 8.704-7.885 12.902-12.134s7.782-8.038 11.315-12.134l5.12-5.939c0.768-1.075 1.69-1.997 2.509-3.021s3.84-5.12 1.587-1.997 1.331-1.843 1.434-2.099c0.768-1.075 1.587-2.099 2.253-3.174 1.587-2.099 3.021-4.352 4.454-6.451 3.277-5.12 6.451-10.24 9.37-15.002s5.12-9.216 7.526-13.926c1.178-2.355 2.355-4.762 3.43-7.117l1.587-3.533c2.509-5.376-1.587 4.096 0.41-1.075 3.617-8.553 7.306-19.285 10.34-30.287l0.463-1.969c1.434-5.53 2.765-11.213 3.84-16.845l1.587-9.062c0.303-1.174 0.539-2.571 0.659-4l0.006-0.096-0.41 2.918c0-1.075 0.256-2.099 0.41-3.021 1.123-10.937 1.764-23.633 1.764-36.479 0-2.638-0.027-5.269-0.081-7.894l0.006 0.392v-37.888c0.227-14.442 11.875-26.090 26.295-26.317h379.771c1.963-0.16 4.248-0.251 6.556-0.251 10.202 0 19.987 1.78 29.064 5.047l-0.598-0.188c21.052 9.203 35.555 29.728 35.84 53.673v0.036c0 6.451 0 13.005 0 19.61v69.376c-0.143 14.476-11.84 26.174-26.303 26.317h-0.014c-14.395-0.543-25.927-12.075-26.469-26.42l-0.002-0.051z" />
-<glyph unicode="&#xe977;" glyph-name="day-book" horiz-adv-x="739" d="M662.595-64h-586.189c-42.415 0-76.8 34.385-76.8 76.8v0 868.966c0 42.415 34.385 76.8 76.8 76.8v0h586.189c42.415 0 76.8-34.385 76.8-76.8v0-869.222c-0.146-42.305-34.474-76.544-76.8-76.544 0 0 0 0 0 0v0zM76.407 907.315c-14.138 0-25.6-11.462-25.6-25.6v0-869.222c0-14.138 11.462-25.6 25.6-25.6v0h586.189c14.138 0 25.6 11.462 25.6 25.6v0 869.274c0 14.138-11.462 25.6-25.6 25.6v0zM424.259 372.019h-281.139c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.19c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM577.603 269.773h-434.483c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.534c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM577.603 167.526h-434.483c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.534c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM322.013 602.163c-7.158 0.001-13.629 2.94-18.274 7.676l-0.004 0.004-71.168 72.858-71.168-72.858c-4.645-4.708-11.096-7.624-18.227-7.624-14.101 0-25.539 11.401-25.6 25.487v306.694c0 14.138 11.462 25.6 25.6 25.6v0h178.944c14.138 0 25.6-11.462 25.6-25.6v0-306.739c-0.058-14.094-11.497-25.498-25.6-25.498-0.036 0-0.072 0-0.108 0h0.006zM232.567 744.858c7.158-0.001 13.629-2.94 18.274-7.676l0.004-0.004 45.619-46.746v218.368h-127.744v-218.419l45.619 46.694c4.649 4.74 11.12 7.679 18.278 7.68v0z" />
-<glyph unicode="&#xe978;" glyph-name="E-way-bill" horiz-adv-x="739" d="M398.438 348.211h-280.781c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h280.883c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM551.629 194.867h-433.971c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.074c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM283.546-64v0c-7.037 0.016-13.405 2.869-18.023 7.476l-62.309 62.309-58.061-58.061c-4.631-4.623-11.024-7.482-18.086-7.482-5.675 0-10.918 1.846-15.163 4.971l0.071-0.050-101.632 74.957c-6.246 4.72-10.24 12.134-10.24 20.48v0 842.803c0 0 0 0 0 0.001 0 42.307 34.21 76.625 76.476 76.799h585.54c42.283-0.175 76.493-34.492 76.493-76.799 0 0 0 0 0-0.001v0-842.752c-0.023-8.544-4.228-16.101-10.676-20.735l-0.076-0.052-106.598-75.418c-4.102-2.918-9.214-4.665-14.734-4.665-7.035 0-13.408 2.838-18.035 7.432l-63.844 63.844-63.846-63.846c-4.614-4.525-10.941-7.318-17.92-7.318s-13.306 2.793-17.924 7.322l-59.644 59.593-63.334-63.334c-4.63-4.619-11.021-7.475-18.079-7.475-0.016 0-0.032 0-0.048 0h0.002zM203.213 67.328c7.037-0.016 13.405-2.869 18.023-7.476l62.309-62.309 63.334 63.386c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l59.593-59.593 63.846 63.846c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l66.556-66.556 78.285 55.398v829.44c0 14.138-11.462 25.6-25.6 25.6v0h-584.704c-14.138 0-25.6-11.462-25.6-25.6v0-829.85l73.626-54.272 60.57 60.57c4.597 4.437 10.863 7.17 17.768 7.17 0.125 0 0.25-0.001 0.375-0.003h-0.019zM246.221 819.251c0.046 0 0.1 0.001 0.154 0.001 10.519 0 19.046-8.527 19.046-19.046 0-0.036 0-0.072 0-0.109v0.006-5.12c19.979-2.831 38.005-9.042 54.249-18.070l-0.796 0.406c7.908-4.273 13.191-12.502 13.191-21.965 0-13.743-11.141-24.883-24.883-24.883-0.029 0-0.059 0-0.088 0h0.005c-0.065-0.001-0.143-0.001-0.22-0.001-4.69 0-9.095 1.215-12.92 3.347l0.135-0.069c-8.802 4.946-19.001 9.205-29.712 12.248l-1.008 0.245v-56.013c56.013-15.36 79.974-37.99 79.974-79.258s-31.693-67.84-78.029-73.011v-19.507c-0.542-10.169-8.919-18.209-19.174-18.209s-18.633 8.040-19.172 18.161l-0.002 0.048v19.917c-27.25 3.617-51.802 12.672-73.39 26.055l0.788-0.455c-7.497 4.494-12.437 12.576-12.437 21.811 0 13.997 11.347 25.344 25.344 25.344 0.035 0 0.069 0 0.103 0h-0.005c5.401-0.198 10.356-1.95 14.475-4.82l-0.088 0.058c13.474-9.23 29.246-16.306 46.208-20.292l0.947-0.188v58.522c-53.043 14.387-79.258 34.662-79.258 78.541 1.627 40.45 34.813 72.626 75.514 72.626 0.668 0 1.335-0.009 1.999-0.026l-0.098 0.002v4.454c-0.001 0.076-0.002 0.166-0.002 0.256 0 10.519 8.527 19.046 19.046 19.046 0.019 0 0.037 0 0.056 0h-0.003zM228.915 699.853v49.766c-17.664-2.56-25.6-11.469-25.6-23.194s5.222-19.251 25.6-26.624zM263.578 635.341v-51.2c17.306 2.56 26.010 10.65 26.010 23.962 0.205 12.083-6.298 20.019-26.010 27.187z" />
-<glyph unicode="&#xe979;" glyph-name="import-trial-balance" horiz-adv-x="1047" d="M116.971 490.906l-116.326-512c-0.358-1.922-0.563-4.133-0.563-6.393 0-19.559 15.361-35.531 34.678-36.509l0.087-0.004h977.306c19.404 0.982 34.765 16.953 34.765 36.513 0 2.259-0.205 4.471-0.597 6.617l0.034-0.224-116.326 512c-4.058 15.442-17.783 26.688-34.174 26.931h-162.945c-19.285 0-34.918-15.634-34.918-34.918s15.634-34.918 34.918-34.918v0h134.912l100.352-442.163h-889.395l100.352 442.163h134.912c19.285 0 34.918 15.634 34.918 34.918s-15.634 34.918-34.918 34.918v0h-162.918c-16.312-0.544-29.887-11.651-34.139-26.673l-0.063-0.259zM523.396 75.622c-9.235 0.376-17.581 3.897-24.062 9.513l0.049-0.041-197.837 186.163c-6.622 7.115-10.686 16.688-10.686 27.21 0 8.911 2.915 17.142 7.844 23.79l-0.076-0.108c6.532 6.319 15.443 10.214 25.264 10.214 10.001 0 19.058-4.038 25.631-10.574l-0.002 0.002 138.906-130.918v734.208c0 19.285 15.634 34.918 34.918 34.918s34.918-15.634 34.918-34.918v-734.157l138.906 130.918c6.773 6.084 15.777 9.805 25.649 9.805 9.682 0 18.529-3.579 25.289-9.485l-0.045 0.039c4.945-6.522 7.922-14.774 7.922-23.721 0-10.537-4.128-20.11-10.856-27.189l0.016 0.017-197.837-186.163c-6.045-5.892-14.315-9.527-23.435-9.527-0.167 0-0.334 0.001-0.501 0.004h0.025z" />
-<glyph unicode="&#xe97a;" glyph-name="invoice1" horiz-adv-x="762" d="M761.805 710.298v0c-0.469 1.956-1.084 3.662-1.86 5.276l0.068-0.156-0.717 1.178c-0.872 1.734-1.949 3.22-3.227 4.507l0.001-0.001-232.499 232.755c-1.332 1.2-2.806 2.299-4.376 3.255l-0.13 0.073-1.178 0.614c-2.694 1.409-5.882 2.241-9.263 2.253h-435.614c-40.335-0.058-73.011-32.77-73.011-73.114 0-0.018 0-0.036 0-0.054v0.003-877.875c0.058-40.3 32.712-72.953 73.006-73.011h616.147c0.030 0 0.066 0 0.102 0 40.344 0 73.055 32.676 73.114 73.006v697.401c0 1.394-0.131 2.757-0.38 4.079l0.021-0.136zM690.125 727.45h-126.106c0 0 0 0 0 0-18.966 0-34.348 15.346-34.406 34.298v126.214zM689.152-21.35h-616.141c-16.966 0-30.72 13.754-30.72 30.72v0 877.517c0.2 16.885 13.835 30.52 30.701 30.72h414.739v-155.853c0.204-42.261 34.51-76.442 76.799-76.442 0 0 0.001 0 0.001 0h156.109v-676.301c-0.202-16.811-13.878-30.362-30.718-30.362-0.001 0-0.001 0-0.002 0v0zM147.917 280.627h458.547c11.194 0.569 20.055 9.784 20.055 21.069s-8.861 20.5-20.005 21.067l-0.051 0.002h-458.547c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002zM627.507 166.758c0 11.65-9.444 21.094-21.094 21.094v0h-458.496c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002h458.547c11.65 0 21.094 9.444 21.094 21.094v0zM246.221 768.051c0.046 0 0.1 0.001 0.154 0.001 10.519 0 19.046-8.527 19.046-19.046 0-0.036 0-0.072 0-0.109v0.006-5.12c19.979-2.831 38.005-9.042 54.249-18.070l-0.796 0.406c7.908-4.273 13.191-12.502 13.191-21.965 0-13.743-11.141-24.883-24.883-24.883-0.029 0-0.059 0-0.088 0h0.005c-0.065-0.001-0.143-0.001-0.22-0.001-4.69 0-9.095 1.215-12.92 3.347l0.135-0.069c-8.802 4.946-19.001 9.205-29.712 12.248l-1.008 0.245v-56.013c56.013-15.36 79.974-37.99 79.974-79.258s-31.693-67.84-78.029-73.011v-19.507c-0.542-10.169-8.919-18.209-19.174-18.209s-18.633 8.040-19.172 18.161l-0.002 0.048v19.917c-27.25 3.617-51.802 12.672-73.39 26.055l0.788-0.455c-7.497 4.494-12.437 12.576-12.437 21.811 0 13.997 11.347 25.344 25.344 25.344 0.035 0 0.069 0 0.103 0h-0.005c5.401-0.198 10.356-1.95 14.475-4.82l-0.088 0.058c13.474-9.23 29.246-16.306 46.208-20.292l0.947-0.188v58.522c-53.043 14.387-79.258 34.662-79.258 78.541 1.627 40.45 34.813 72.626 75.514 72.626 0.668 0 1.335-0.009 1.999-0.026l-0.098 0.002v4.454c-0.001 0.076-0.002 0.166-0.002 0.256 0 10.519 8.527 19.046 19.046 19.046 0.019 0 0.037 0 0.056 0h-0.003zM228.915 648.653v49.766c-17.664-2.56-25.6-11.469-25.6-23.194s5.222-19.251 25.6-26.624zM263.578 584.141v-51.2c17.306 2.56 26.010 10.65 26.010 23.962 0.205 12.083-6.298 20.019-26.010 27.187z" />
-<glyph unicode="&#xe97b;" glyph-name="journal-voucher" horiz-adv-x="741" d="M663.859-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.8 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM575.078 244.787h-431.514c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h370.79l-31.488 32.256c-4.517 4.617-7.304 10.943-7.304 17.92 0 14.157 11.477 25.634 25.634 25.634 7.18 0 13.671-2.952 18.325-7.709l73.886-75.729c4.525-4.614 7.318-10.941 7.318-17.92 0-14.138-11.462-25.6-25.6-25.6-0.017 0-0.033 0-0.050 0h0.003zM217.446 66.662c-0.014 0-0.032 0-0.049 0-6.955 0-13.263 2.774-17.877 7.276l0.005-0.005-77.568 75.725c-4.739 4.65-7.676 11.121-7.676 18.278 0 14.137 11.459 25.598 25.596 25.6h438.835c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0h-376.013l32.563-31.795c4.739-4.65 7.676-11.121 7.676-18.278 0-14.137-11.459-25.598-25.596-25.6v0zM425.165 731.136h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.765 628.736h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.765 526.336h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
-<glyph unicode="&#xe97c;" glyph-name="header-setting" horiz-adv-x="1025" d="M909.708 411.308v73.237l97.519 72.847c10.658 8.614 17.417 21.686 17.417 36.337 0 10.316-3.351 19.849-9.023 27.57l0.091-0.13-98.982 169.586c-7.896 15.131-23.471 25.283-41.417 25.283-6.898 0-13.446-1.5-19.335-4.192l0.291 0.119-111.269-43.64c-19.287 14.68-41.238 27.569-64.666 37.688l-2.037 0.783-17.944 114.878c-4.975 22.060-24.403 38.29-47.622 38.29-0.4 0-0.799-0.005-1.196-0.014l0.059 0.001h-198.647c-0.673 0.034-1.46 0.054-2.253 0.054-23.553 0-43.060-17.323-46.474-39.924l-0.032-0.26-17.944-113.659c-25.349-11.889-46.983-24.582-67.319-38.987l1.347 0.906-109.953 43.006c-6.093 3.122-13.293 4.952-20.92 4.952-17.536 0-32.813-9.673-40.786-23.975l-0.121-0.237-99.616-171.049c-4.057-7.369-6.444-16.151-6.444-25.49 0-15.895 6.914-30.176 17.9-39.997l0.052-0.046 94.642-70.701v-73.139l-97.519-73.139c-10.668-8.605-17.435-21.677-17.435-36.328 0-10.321 3.358-19.858 9.041-27.578l-0.090 0.129 98.787-169.537c7.836-15.196 23.421-25.406 41.391-25.406 6.91 0 13.467 1.51 19.36 4.218l-0.289-0.119 111.221 43.884c19.288-14.667 41.239-27.555 64.66-37.685l2.043-0.787 18.139-114.926c5.268-22.016 24.779-38.13 48.053-38.13 0.043 0 0.085 0 0.128 0h199.127c0.685-0.036 1.488-0.056 2.295-0.056 23.544 0 43.041 17.328 46.433 39.927l0.032 0.258 17.846 113.707c25.377 11.894 47.027 24.57 67.389 38.949l-1.369-0.917 109.855-43.006c6.061-3.088 13.218-4.897 20.797-4.897 17.603 0 32.928 9.758 40.859 24.16l0.122 0.241 99.616 171.049c4.057 7.369 6.444 16.151 6.444 25.49 0 15.895-6.914 30.176-17.9 39.997l-0.052 0.046zM874.113 129.38l-136.966 53.636-10.581-8.094c-22.989-17.415-49.135-32.778-77.007-44.923l-2.471-0.959-12.434-5.266-21.064-136.527c-1.17-3.657-2.194-5.754-1.707-2.779l-199.475-1.121-22.283 141.208-13.409 4.876c-29.713 11.155-55.359 26.259-77.858 45.010l0.428-0.346-11.068 9.167-137.6-54.562-101.030 172.999 114.195 85.329v121.899l-111.659 82.891c-0.759 0.773-1.227 1.834-1.227 3.005 0 0.568 0.111 1.111 0.311 1.608l-0.010-0.029 99.275 170.171 136.966-53.636 10.873 8.094c22.975 17.385 49.105 32.731 76.953 44.872l2.476 0.962 12.385 5.315 21.015 136.186c1.463 4.096 2.097 5.217 1.804 2.828l199.622 1.073 22.137-140.866 13.36-4.876c29.724-11.19 55.381-26.29 77.917-45.018l-0.438 0.354 11.020-9.167 137.6 54.708 101.079-173.145-114.292-85.281s-1.512-116.048 0-117.316l112.44-92.302zM375.498 586.94c-34.769-35.923-56.198-84.942-56.198-138.965s21.429-103.042 56.25-139.019l-0.052 0.054 0.829-0.829c36.623-34.025 85.867-54.904 139.987-54.904 0.206 0 0.413 0 0.619 0.001h-0.032c0.047 0 0.103 0 0.158 0 54.891 0 104.826 21.217 142.052 55.897l-0.125-0.115c34.777 35.925 56.212 84.949 56.212 138.979 0 54.375-21.708 103.68-56.931 139.72l0.037-0.038c-36.953 34.101-86.525 55.012-140.981 55.012-54.86 0-104.763-21.223-141.947-55.905l0.123 0.113zM625 343.923c-28.228-26.077-66.109-42.070-107.725-42.070-41.439 0-79.174 15.857-107.469 41.834l0.116-0.105c-26.010 27.028-42.030 63.831-42.030 104.376 0 40.396 15.903 77.078 41.79 104.126l-0.053-0.055c28.223 26.087 66.105 42.087 107.724 42.087 41.187 0 78.714-15.669 106.946-41.372l-0.128 0.114c26.355-27.096 42.607-64.137 42.607-104.974 0-40.343-15.861-76.981-41.687-104.019l0.055 0.058z" />
-<glyph unicode="&#xe97d;" glyph-name="uniE97A" horiz-adv-x="908" d="M907.878 132.155c-1.77 13.214-8.861 24.494-19.010 31.788l-0.139 0.095-224.497 159.539-7.088-8.448-18.088 15.177c19.314 33.452 30.709 73.578 30.709 116.366 0 130.244-105.583 235.827-235.827 235.827s-235.827-105.583-235.827-235.827c0-130.244 105.583-235.827 235.827-235.827 57.253 0 109.741 20.402 150.589 54.333l-0.387-0.312 18.088-15.177-7.088-8.448 196.096-193.375c8.363-8.27 19.867-13.378 32.564-13.378 14.199 0 26.905 6.388 35.402 16.447l0.057 0.069 38.181 45.502c6.726 7.994 10.812 18.403 10.812 29.766 0 2.074-0.136 4.117-0.4 6.119l0.025-0.235zM298.598 285.959c-45.859 38.791-74.779 96.372-74.779 160.709 0 116.024 94.056 210.081 210.081 210.081s210.081-94.056 210.081-210.081c0-51.569-18.581-98.798-49.413-135.358l0.259 0.315c-38.867-45.9-96.534-74.843-160.96-74.843-51.631 0-98.921 18.588-135.542 49.438l0.318-0.261zM603.173 282.485c3.92 4.037 7.753 8.185 11.432 12.559s7.088 8.88 10.386 13.436l15.579-13.071-2.245-2.684-19.566-23.311zM877.663 113.086l-38.181-45.502c-3.798-4.49-9.436-7.322-15.735-7.322-5.634 0-10.739 2.265-14.453 5.934l-179.147 176.66 38.554 45.941 205.093-145.744c5.273-3.775 8.669-9.881 8.669-16.78 0-5.043-1.814-9.661-4.825-13.24l0.026 0.031z" />
-<glyph unicode="&#xe97e;" glyph-name="download-circle" d="M148.48 88.849c-91.692 88.069-148.66 211.696-148.66 348.629 0 4.636 0.065 9.257 0.195 13.862l-0.015-0.678c-0.015 1.468-0.024 3.203-0.024 4.94 0 139.492 56.775 265.724 148.478 356.848l0.026 0.026c88.762 91.164 212.678 147.717 349.804 147.717 4.823 0 9.63-0.070 14.42-0.209l-0.704 0.016c1.551 0.017 3.383 0.027 5.217 0.027 139.806 0 266.43-56.441 358.328-147.781l-0.026 0.025c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.067-141.618-60.394-269.221-153.572-361.786l-0.028-0.028c-89.923-94.275-216.512-152.895-356.792-152.895-2.365 0-4.727 0.017-7.085 0.050l0.357-0.004c-2.874-0.063-6.262-0.098-9.658-0.098-137.818 0-261.888 58.864-348.44 152.821l-0.301 0.331zM225.28 735.881c-75.706-71.752-122.829-173.011-122.88-285.277v-0.010c-0.039-2.021-0.061-4.404-0.061-6.793 0-110.18 47.277-209.318 122.653-278.233l0.289-0.26c67.305-78.201 166.408-127.415 277.005-127.415 1.616 0 3.229 0.011 4.84 0.031l-0.244-0.002c1.137-0.012 2.48-0.019 3.825-0.019 111.425 0 211.89 46.924 282.713 122.090l0.182 0.195c75.732 71.735 122.864 173.005 122.88 285.283v0.003c0.284 5.442 0.446 11.815 0.446 18.226 0 107.31-45.381 204.020-117.998 271.987l-0.208 0.193c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.12 0.012-2.442 0.018-3.767 0.018-111.443 0-211.927-46.923-282.772-122.090l-0.181-0.194zM307.2 380.894h153.6v324.198h102.4v-324.198h153.6l-204.8-185.276z" />
-<glyph unicode="&#xe97f;" glyph-name="company-HO" horiz-adv-x="988" d="M532.056 929.416v-948.907h146.091v869.581l-108.544 109.909zM790.855 573.201v-592.691h94.617l1.365 544.016zM232.706-19.49h-230.741l-1.365-44.51h986.453v44.51h-754.346zM102.181-19.49h130.799v665.054l-130.799-90.453z" />
-<glyph unicode="&#xe980;" glyph-name="warehouse-icon" horiz-adv-x="1061" d="M1044.48-30.822h-88.269v628.873l27.648-22.391c2.816-2.208 6.409-3.541 10.314-3.541 5.246 0 9.93 2.405 13.009 6.173l0.024 0.030c2.282 2.81 3.663 6.431 3.663 10.374 0 5.169-2.374 9.784-6.091 12.813l-0.030 0.024-423.253 340.787c-13.92 11.116-31.775 17.838-51.2 17.838s-37.28-6.722-51.366-17.966l0.166 0.128-425.37-343.45c-3.771-3.066-6.16-7.704-6.16-12.901 0-3.973 1.397-7.62 3.726-10.477l-0.024 0.030c3.097-3.728 7.718-6.097 12.894-6.144h0.008c0.016 0 0.036 0 0.055 0 3.941 0 7.564 1.363 10.423 3.644l-0.034-0.026 29.013 23.552v-627.234h-87.040c-9.162 0-16.589-7.427-16.589-16.589s7.427-16.589 16.589-16.589v0c-28.058 0 411.102 0 1027.686 0 9.162 0 16.589 7.427 16.589 16.589s-7.427 16.589-16.589 16.589v0zM250.88 522.138h559.787v-552.96h-559.787zM393.421 165.444l-8.26-4.779v55.433h35.157v-55.842l-10.581 5.325c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.029-0.068-5.845-0.922-8.27-2.364l0.078 0.043zM513.843 199.236v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.962c-9.162 0-16.589 7.427-16.589 16.589v180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.45h43.759c0 0 0.001 0 0.001 0 9.199 0 16.657-7.458 16.657-16.657 0-0.072 0-0.144-0.001-0.216v0.011zM648.738 165.444l-8.26-4.779v55.433h35.157v-55.842l-10.581 5.325c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.029-0.068-5.845-0.922-8.27-2.364l0.078 0.043zM769.024 199.236v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.894c-9.162 0-16.589 7.427-16.589 16.589v0 180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.45h43.759c9.171-0.038 16.59-7.481 16.59-16.657 0-0.072 0-0.144-0.001-0.216v0.011zM521.079 412.092l-8.26-4.779v55.228h35.157v-55.842l-10.65 5.53c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.006-0.081-5.796-0.933-8.202-2.364l0.078 0.043zM641.502 445.884v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.962c-9.162 0-16.589 7.427-16.589 16.589v0 180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.177h43.759c0 0 0 0 0 0 9.175 0 16.618-7.419 16.657-16.585v-0.004z" />
-<glyph unicode="&#xe981;" glyph-name="estimate" horiz-adv-x="784" d="M606.925-64h-534.118c-40.186 0.058-72.748 32.62-72.806 72.801v792.070c0.058 40.186 32.62 72.748 72.801 72.806h534.124c40.198-0.029 72.777-32.608 72.806-72.804v-792.067c-0.029-40.198-32.608-72.777-72.804-72.806h-0.003zM72.806 821.146c-11.2-0.144-20.224-9.258-20.224-20.478 0-0.001 0-0.001 0-0.002v0-792.064c0.142-11.112 9.112-20.082 20.21-20.224h534.132c0 0 0.001 0 0.002 0 11.221 0 20.334 9.024 20.478 20.21v792.078c0 11.311-9.169 20.48-20.48 20.48v0zM711.475 22.323h-39.117c-14.52 0-26.291 11.771-26.291 26.291s11.771 26.291 26.291 26.291v0h39.117c11.112 0.142 20.082 9.112 20.224 20.21v792.078c-0.142 11.112-9.112 20.082-20.21 20.224h-534.184c-14.131 0-20.48-30.72-20.48-46.541 0-14.506-11.76-26.266-26.266-26.266s-26.266 11.76-26.266 26.266v0c0 47.718 22.784 99.123 72.806 99.123h534.17c40.186-0.058 72.748-32.62 72.806-72.801v-792.121c-0.087-40.093-32.521-72.581-72.585-72.755h-0.017zM199.936 696.013c0.015 0 0.033 0 0.051 0 6.702 0 12.134-5.433 12.134-12.134 0-0.018 0-0.036 0-0.054v0.003-3.277c12.708-1.799 24.174-5.76 34.498-11.521l-0.501 0.257c5.131-2.672 8.574-7.95 8.574-14.032 0-8.709-7.060-15.77-15.77-15.77-0.116 0-0.232 0.001-0.348 0.004h0.017c-3.005 0.001-5.828 0.779-8.279 2.144l0.087-0.044c-5.576 3.159-12.033 5.881-18.818 7.83l-0.638 0.157v-35.84c35.84-9.626 50.893-24.166 50.893-50.432s-20.173-43.162-49.715-46.438v-12.442c0-6.744-5.467-12.211-12.211-12.211s-12.211 5.467-12.211 12.211v0 12.646c-17.309 2.361-32.887 8.169-46.573 16.723l0.493-0.287c-4.766 2.861-7.907 8.001-7.907 13.875 0 8.897 7.204 16.111 16.097 16.128h0.002c3.439-0.124 6.596-1.236 9.222-3.058l-0.057 0.037c8.571-5.912 18.602-10.455 29.396-13.036l0.607-0.123v37.325c-33.792 9.165-50.432 22.067-50.432 49.971 1.092 25.686 22.181 46.095 48.036 46.095 0.428 0 0.856-0.006 1.281-0.017l-0.063 0.001v2.816c-0.003 0.107-0.005 0.232-0.005 0.358 0 6.702 5.433 12.134 12.134 12.134 0.002 0 0.004 0 0.006 0v0zM188.928 620.032v31.693c-11.264-1.638-16.179-7.27-16.179-14.797s3.379-12.237 16.128-16.896zM210.944 579.072v-32.614c11.008 1.638 16.64 6.81 16.64 15.36s-3.994 12.698-16.64 17.152zM296.96 314.368c-0.056 0-0.121-0.001-0.187-0.001-11.701 0-21.308 8.961-22.335 20.394l-0.006 0.086c0.148 4.885 1.055 9.511 2.607 13.829l-0.098-0.312c11.008 28.979 25.6 48.998 56.013 48.998s57.037-19.507 75.008-19.507c0.43-0.027 0.932-0.043 1.439-0.043 9.835 0 18.29 5.913 22.002 14.378l0.060 0.154c3.916 6.939 11.24 11.547 19.64 11.547 11.738 0 21.375-8.998 22.389-20.473l0.006-0.085c-0.148-4.885-1.055-9.511-2.607-13.829l0.098 0.312c-11.008-29.030-25.6-48.998-56.013-48.998s-57.037 19.456-75.008 19.456c-0.435 0.028-0.944 0.044-1.456 0.044-9.845 0-18.309-5.912-22.036-14.379l-0.061-0.154c-3.901-6.849-11.145-11.398-19.453-11.418h-0.003zM437.094 200.909h-131.635c-14.534 0-26.317 11.782-26.317 26.317s11.782 26.317 26.317 26.317v0h131.635c14.534 0 26.317-11.782 26.317-26.317s-11.782-26.317-26.317-26.317v0z" />
-<glyph unicode="&#xe982;" glyph-name="gstr" horiz-adv-x="740" d="M122.163 114.995v0.41c-0.001 0.172-0.002 0.376-0.002 0.58 0 39.927 32.367 72.294 72.294 72.294 0.541 0 1.080-0.006 1.619-0.018l-0.080 0.001c1.135 0.059 2.463 0.093 3.8 0.093 16.576 0 31.944-5.169 44.582-13.982l-0.254 0.168c3.906-2.806 6.427-7.327 6.451-12.438v-0.004c-0.028-8.462-6.894-15.312-15.36-15.312-3.566 0-6.848 1.215-9.455 3.254l0.034-0.025c-8.077 6.025-18.255 9.647-29.278 9.647-0.507 0-1.012-0.008-1.515-0.023l0.074 0.002c-22.564-0.998-40.479-19.533-40.479-42.252 0-0.572 0.011-1.141 0.034-1.707l-0.003 0.081v-0.41c-0.046-0.736-0.072-1.595-0.072-2.461 0-23.3 18.889-42.189 42.189-42.189 0.187 0 0.374 0.001 0.561 0.004h-0.028c0.457-0.015 0.995-0.024 1.534-0.024 10.319 0 19.898 3.167 27.819 8.581l-0.17-0.109v20.122h-20.941c-0.046-0.001-0.1-0.001-0.154-0.001-7.334 0-13.283 5.931-13.312 13.259v0.003c0 0.015 0 0.033 0 0.051 0 7.437 6.029 13.466 13.466 13.466 0 0 0 0 0 0h35.43c8.483 0 15.36-6.877 15.36-15.36v0-34.202c0.027-0.398 0.042-0.862 0.042-1.33 0-7.911-4.376-14.8-10.84-18.378l-0.108-0.055c-14.011-8.813-31.044-14.052-49.298-14.080h-0.007c-1.048-0.056-2.275-0.087-3.509-0.087-38.909 0-70.451 31.542-70.451 70.451 0 0.697 0.010 1.391 0.030 2.083l-0.002-0.102zM283.238 59.853c-3.559 2.67-5.837 6.88-5.837 11.622 0 0.018 0 0.036 0 0.054v-0.003c0 0.016 0 0.035 0 0.054 0 7.861 6.373 14.234 14.234 14.234 0.090 0 0.18-0.001 0.27-0.003h-0.013c0.037 0 0.080 0.001 0.124 0.001 3.279 0 6.312-1.056 8.777-2.846l-0.043 0.030c9.782-7.725 22.24-12.457 35.797-12.646h0.043c12.698 0 20.48 5.12 20.48 13.312v0.41c0 7.885-4.864 11.878-28.365 17.92-28.365 7.27-46.694 15.104-46.694 43.059v0.41c0.706 23.766 20.141 42.764 44.014 42.764 1.865 0 3.703-0.116 5.507-0.341l-0.215 0.022c0.357 0.006 0.779 0.009 1.201 0.009 16.122 0 31.156-4.657 43.831-12.7l-0.334 0.198c4.099-2.571 6.785-7.065 6.785-12.186 0-7.918-6.418-14.336-14.336-14.336-0.045 0-0.091 0-0.136 0.001h0.007c-0.020 0-0.044 0-0.068 0-2.875 0-5.558 0.82-7.828 2.238l0.062-0.036c-8.367 5.528-18.531 8.996-29.472 9.468l-0.122 0.004c-11.878 0-18.125-5.478-18.125-12.288v-0.41c0-9.267 6.042-12.288 30.413-18.534 28.57-7.424 44.646-17.715 44.646-42.24v-0.41c0-27.955-21.35-43.674-51.712-43.674-0.049 0-0.108 0-0.167 0-19.774 0-38.074 6.312-52.995 17.031l0.272-0.186zM444.57 157.235h-29.798c-7.889 0-14.285 6.396-14.285 14.285s6.396 14.285 14.285 14.285h90.522c7.889 0 14.285-6.396 14.285-14.285s-6.396-14.285-14.285-14.285h-30.003v-97.997c0-8.554-6.934-15.488-15.488-15.488s-15.488 6.934-15.488 15.488v0zM663.808-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM425.062 372.787h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 270.387h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM181.862 526.438c-5.705 0.036-10.954 1.955-15.166 5.165l0.062-0.045c-6.418 4.709-10.538 12.223-10.538 20.7 0 5.696 1.86 10.957 5.006 15.21l-0.049-0.070 145.050 198.4c4.713 6.401 12.219 10.508 20.685 10.508 14.145 0 25.612-11.467 25.612-25.612 0-5.68-1.849-10.927-4.977-15.175l0.050 0.071-145.254-198.656c-4.674-6.344-12.093-10.432-20.47-10.496h-0.010zM223.488 724.838c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213zM377.088 571.187c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213z" />
-<glyph unicode="&#xe983;" glyph-name="import-from-tally" horiz-adv-x="1122" d="M1084.727 129.149h-1047.454c-0.014 0-0.032 0-0.049 0-19.929 0-36.084 16.155-36.084 36.084 0 0.017 0 0.034 0 0.051v-0.003 216.698c0.734 19.376 16.619 34.805 36.108 34.805s35.374-15.429 36.106-34.739l0.002-0.067v-180.419h975.238v180.419c0 19.955 16.177 36.133 36.133 36.133s36.133-16.177 36.133-36.133v0-216.698c0-0.014 0-0.032 0-0.049 0-19.929-16.155-36.084-36.084-36.084-0.017 0-0.034 0-0.051 0h0.003zM569.362 369.35v0c-19.992 0-36.084 7.948-36.035 27.892l1.463 342.114c0 19.895 16.238 27.307 36.133 27.307v0c1.055 0.121 2.277 0.191 3.515 0.191 17.772 0 32.215-14.255 32.519-31.955v-0.029l-1.463-340.163c-0.098-19.895-16.238-25.356-36.133-25.356zM568.972 282.456v0c-0.019 0-0.041 0-0.064 0-9.958 0-18.971 4.045-25.486 10.58l-161.695 161.695c-5.907 6.412-9.528 15.008-9.528 24.449 0 19.955 16.177 36.133 36.133 36.133 9.442 0 18.038-3.622 24.475-9.551l-0.025 0.023 136.192-136.192 139.947 139.947c6.412 5.907 15.008 9.528 24.449 9.528 19.955 0 36.133-16.177 36.133-36.133 0-9.442-3.622-18.038-9.551-24.475l0.023 0.025-165.498-165.498c-6.526-6.508-15.533-10.533-25.479-10.533-0.008 0-0.017 0-0.025 0h0.001z" />
-<glyph unicode="&#xe984;" glyph-name="new-old-invoices" horiz-adv-x="740" d="M442.982 52.736h-312.32c-14.138 0-25.6 11.462-25.6 25.6v0 370.381c0 14.138 11.462 25.6 25.6 25.6v0h312.32c14.138 0 25.6-11.462 25.6-25.6v0-370.381c0-14.138-11.462-25.6-25.6-25.6v0zM156.262 103.936h261.12v319.181h-261.12zM611.174 178.893h-88.166c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h62.566v319.283h-211.712v-24.013c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 49.613c0 14.138 11.462 25.6 25.6 25.6v0h262.912c14.138 0 25.6-11.462 25.6-25.6v0-370.381c0-14.138-11.462-25.6-25.6-25.6v0zM297.062 321.536h-76.8c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h76.8c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM348.262 244.736h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM348.262 167.936h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM663.706-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.646 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM207.821 870.246c0.030 0 0.066 0 0.102 0 8.285 0 15.002-6.716 15.002-15.002 0-0.018 0-0.036 0-0.054v0.003-4.096c15.732-2.237 29.924-7.133 42.713-14.246l-0.627 0.32c6.26-3.346 10.447-9.837 10.447-17.307 0-10.802-8.757-19.558-19.558-19.558-0.073 0-0.146 0-0.219 0.001h0.011c-0.061-0.001-0.133-0.001-0.205-0.001-3.68 0-7.137 0.949-10.142 2.616l0.107-0.055c-6.895 3.886-14.882 7.237-23.271 9.636l-0.793 0.194v-44.134c44.083-11.878 62.976-29.901 62.976-62.413s-24.934-53.402-61.44-57.446v-15.36c0-8.342-6.762-15.104-15.104-15.104s-15.104 6.762-15.104 15.104v15.667c-21.471 2.958-40.785 10.193-57.745 20.835l0.606-0.355c-5.925 3.536-9.831 9.914-9.831 17.203 0 11.028 8.94 19.968 19.968 19.968 0.036 0 0.072 0 0.108 0h-0.006c4.247-0.155 8.144-1.531 11.385-3.784l-0.070 0.046c10.602-7.323 23.014-12.945 36.372-16.131l0.748-0.151v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.29 31.837 27.412 57.158 59.448 57.158 0.52 0 1.039-0.007 1.556-0.020l-0.076 0.002v3.533c-0.003 0.107-0.004 0.232-0.004 0.358 0 8.285 6.716 15.002 15.002 15.002 0.002 0 0.003 0 0.005 0v0zM194.202 776.243v39.168c-13.926-2.048-20.019-9.011-20.019-18.278s3.994-15.104 19.968-20.736zM221.491 725.453v-40.294c13.67 1.997 20.48 8.397 20.48 18.842 0 9.574-4.813 15.974-20.48 21.453z" />
-<glyph unicode="&#xe985;" glyph-name="onboarding" horiz-adv-x="1082" d="M846.541 65.894c-7.999 0.013-15.237 3.258-20.48 8.499l-40.192 40.141c-4.443 5.073-7.153 11.762-7.153 19.083 0 16.033 12.997 29.030 29.030 29.030 7.321 0 14.010-2.71 19.116-7.182l-0.034 0.029 19.661-19.61 85.606 85.606c5.073 4.443 11.762 7.153 19.083 7.153 16.033 0 29.030-12.997 29.030-29.030 0-7.321-2.71-14.010-7.182-19.116l0.029 0.034-106.138-106.138c-5.216-5.222-12.415-8.464-20.371-8.499h-0.007zM875.11-64c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM875.11 291.789c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM206.848-64c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM206.848 291.789c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM555.469 546.099c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM555.469 901.888c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM271.514 291.789c-0.008 0-0.017 0-0.026 0-5.287 0-10.24 1.426-14.497 3.914l0.136-0.074c-8.807 5.097-14.637 14.473-14.637 25.211 0 5.305 1.423 10.278 3.908 14.557l-0.074-0.139 168.96 296.346c4.983 9.278 14.62 15.48 25.705 15.48 16.061 0 29.082-13.020 29.082-29.082 0-5.633-1.602-10.893-4.375-15.347l0.071 0.123-168.96-296.294c-5.076-8.838-14.461-14.695-25.214-14.695-0.028 0-0.055 0-0.083 0h0.004zM845.517 295.68c-0.008 0-0.018 0-0.027 0-10.741 0-20.119 5.833-25.14 14.504l-0.075 0.14-168.96 296.346c-2.4 4.133-3.816 9.095-3.816 14.387 0 16.034 12.998 29.032 29.032 29.032 10.741 0 20.12-5.833 25.141-14.505l0.075-0.14 168.96-296.294c2.418-4.145 3.845-9.125 3.845-14.438 0-16.033-12.997-29.030-29.030-29.030-0.002 0-0.004 0-0.005 0v0zM255.283 142.899c0-26.722-21.662-48.384-48.384-48.384s-48.384 21.662-48.384 48.384c0 26.722 21.662 48.384 48.384 48.384s48.384-21.662 48.384-48.384zM603.904 752.998c0-26.722-21.662-48.384-48.384-48.384s-48.384 21.662-48.384 48.384c0 26.722 21.662 48.384 48.384 48.384s48.384-21.662 48.384-48.384z" />
-<glyph unicode="&#xe986;" glyph-name="profit-loss" horiz-adv-x="1112" d="M544.614 173.005c-158.599 0.083-287.137 128.672-287.137 287.283 0 158.662 128.621 287.283 287.283 287.283s287.283-128.621 287.283-287.283c0-79.367-32.185-151.218-84.215-203.211l-0.001-0.001c-51.895-51.941-123.612-84.071-202.834-84.071-0.133 0-0.266 0-0.4 0h0.021zM544.614 680.397c-0.017 0-0.037 0-0.057 0-121.591 0-220.16-98.569-220.16-220.16s98.569-220.16 220.16-220.16c121.591 0 220.16 98.569 220.16 220.16 0 60.781-24.631 115.81-64.455 155.649l0.001-0.001c-39.623 39.88-94.499 64.564-155.14 64.564-0.178 0-0.357 0-0.535-0.001h0.028zM538.368 626.125c0.030 0 0.067 0 0.103 0 10.887 0 19.712-8.825 19.712-19.712 0-0.036 0-0.072 0-0.108v0.006-5.12c20.69-2.938 39.354-9.383 56.168-18.749l-0.82 0.42c8.221-4.371 13.723-12.882 13.723-22.678 0-0.091 0-0.182-0.001-0.273v0.014c0-0.001 0-0.002 0-0.003 0-14.138-11.462-25.6-25.6-25.6-0.144 0-0.288 0.001-0.431 0.004h0.022c-4.885 0.012-9.47 1.282-13.453 3.503l0.141-0.072c-9.086 5.145-19.609 9.562-30.667 12.704l-1.026 0.249v-58.010c58.010-15.667 82.79-39.322 82.79-81.92s-32.768-70.246-80.896-75.571v-20.48c0.016-0.301 0.026-0.654 0.026-1.008 0-10.971-8.894-19.866-19.866-19.866s-19.866 8.894-19.866 19.866c0 0.355 0.009 0.707 0.028 1.057l-0.002-0.049v20.48c-28.228 3.818-53.64 13.266-75.968 27.195l0.806-0.469c-7.822 4.633-12.984 13.029-12.984 22.631 0 14.478 11.737 26.214 26.214 26.214 0.029 0 0.057 0 0.086 0h-0.004c5.613-0.262 10.741-2.141 14.984-5.177l-0.084 0.057c13.952-9.612 30.287-16.986 47.862-21.154l0.982-0.196v60.672c-54.938 14.899-81.92 35.84-81.92 81.306 1.684 41.904 36.062 75.236 78.225 75.236 0.669 0 1.336-0.008 2.001-0.025l-0.098 0.002v4.557c-0.002 0.107-0.003 0.233-0.003 0.359 0 10.887 8.825 19.712 19.712 19.712 0.037 0 0.074 0 0.111 0h-0.006zM520.448 502.477v51.507c-18.33-2.714-26.317-11.827-26.317-24.064s5.274-19.814 26.266-27.443zM556.288 435.917v-53.043c17.971 2.662 27.085 11.059 27.085 24.781 0 12.39-6.502 20.838-27.136 28.058zM134.195 11.315v0c-1.078-0.137-2.325-0.216-3.59-0.216-16.33 0-29.608 13.068-29.945 29.317l-0.001 0.032 0.87 212.070c0 18.534 15.36 28.058 33.638 28.058v0c0.736 0.062 1.593 0.097 2.459 0.097 17.072 0 30.93-13.766 31.077-30.803v-0.014l-0.87-211.302c-0.051-18.483-15.053-27.238-33.638-27.238zM133.939-64c-0.004 0-0.009 0-0.014 0-9.297 0-17.711 3.777-23.793 9.881l-100.251 100.251c-6.093 6.093-9.862 14.51-9.862 23.808 0 18.595 15.074 33.67 33.67 33.67 9.298 0 17.715-3.769 23.808-9.862v0l76.493-76.493 78.797 78.848c6.166 6.593 14.917 10.702 24.629 10.702 18.606 0 33.69-15.083 33.69-33.69 0-9.711-4.109-18.463-10.683-24.611l-0.019-0.018-102.4-102.4c-6.094-6.226-14.583-10.087-23.975-10.087-0.031 0-0.063 0-0.094 0h0.005zM976.589 617.165v0c-0.938-0.103-2.025-0.161-3.127-0.161-16.637 0-30.154 13.359-30.409 29.936v0.024l0.87 211.763c0 18.534 15.36 27.75 33.638 27.75v0c0.846 0.083 1.828 0.13 2.822 0.13 16.76 0 30.385-13.421 30.714-30.102v-0.031l-0.87-211.661c-0.051-18.586-15.053-27.648-33.638-27.648zM875.11 790.016c-0.013 0-0.029 0-0.044 0-18.578 0-33.638 15.060-33.638 33.638 0 9.3 3.774 17.719 9.874 23.808v0l102.4 102.656c6.095 6.088 14.512 9.853 23.808 9.853s17.713-3.765 23.808-9.854v0l100.25-100.25c6.093-6.093 9.862-14.51 9.862-23.808 0-18.595-15.074-33.67-33.67-33.67-9.298 0-17.715 3.769-23.808 9.862v0l-76.493 76.442-78.848-78.848c-6.019-6.023-14.316-9.768-23.489-9.83h-0.012z" />
-<glyph unicode="&#xe987;" glyph-name="proforma" horiz-adv-x="848" d="M605.85 372.736c0.031 0 0.067 0 0.103 0 8.285 0 15.002-6.716 15.002-15.002 0-0.036 0-0.072 0-0.108v0.006-4.045c15.731-2.211 29.926-7.11 42.704-14.243l-0.618 0.317c6.26-3.346 10.447-9.837 10.447-17.306 0-10.802-8.757-19.558-19.558-19.558-0.055 0-0.109 0-0.164 0.001h0.008c-0.018 0-0.039 0-0.061 0-3.734 0-7.242 0.968-10.287 2.666l0.107-0.055c-6.909 3.903-14.913 7.271-23.32 9.686l-0.795 0.195v-44.134c44.134-11.93 62.976-29.901 62.976-62.413s-24.986-53.402-61.44-57.498v-15.36c-1.367-7.198-7.608-12.567-15.104-12.567s-13.737 5.369-15.089 12.471l-0.015 0.096v15.667c-21.489 2.948-40.822 10.185-57.797 20.835l0.606-0.355c-6.003 3.506-9.973 9.918-9.973 17.257 0 11 8.917 19.917 19.917 19.917 0.104 0 0.208-0.001 0.311-0.002h-0.016c4.254-0.153 8.154-1.549 11.381-3.833l-0.066 0.044c10.619-7.315 23.047-12.937 36.418-16.13l0.753-0.152v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.262 31.86 27.396 57.21 59.451 57.21 0.538 0 1.073-0.007 1.608-0.021l-0.079 0.002v3.482c0 8.285 6.716 15.002 15.002 15.002v0zM592.179 278.682v39.219c-13.926-2.048-20.019-9.011-20.019-18.278s4.096-15.002 20.070-20.838zM619.469 227.891v-40.346c13.67 2.048 20.48 8.397 20.48 18.842 0.154 9.728-4.762 16.128-20.429 21.606zM714.24 756.838h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM714.24 654.438h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM714.24 552.038h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM381.44 167.987h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM381.44 270.387h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM771.789-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 427.213c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-427.315c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0h-587.11c-14.138 0-25.6-11.462-25.6-25.6v0-30.72c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 30.72c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c-0.058-42.371-34.42-76.698-76.8-76.698 0 0 0 0 0 0v0zM147.456 482.714c-0.035 0-0.075 0-0.116 0-10.722 0-20.425 4.365-27.427 11.416l-108.546 108.546c-7.032 7.048-11.381 16.776-11.381 27.52s4.349 20.472 11.382 27.521l160.921 160.921c4.622 4.637 11.011 7.51 18.070 7.526h130.819c0.003 0 0.006 0 0.009 0 14.138 0 25.6-11.462 25.6-25.6 0-0.234-0.003-0.467-0.009-0.7l0.001 0.034-3.43-127.437c-0.187-6.813-3.007-12.934-7.476-17.408v0l-160.922-160.922c-7.005-7.052-16.707-11.418-27.429-11.418-0.023 0-0.046 0-0.069 0h0.004zM56.166 630.17l91.29-91.29 145.101 145.101 2.458 90.982h-94.003zM277.658 727.296c0-14.534-11.782-26.317-26.317-26.317s-26.317 11.782-26.317 26.317c0 14.534 11.782 26.317 26.317 26.317s26.317-11.782 26.317-26.317z" />
-<glyph unicode="&#xe988;" glyph-name="purchase-management" horiz-adv-x="939" d="M429.619 381.594v0c-0.94-0.12-2.027-0.188-3.13-0.188-14.217 0-25.781 11.363-26.105 25.502l-0.001 0.030 0.768 243.354c0 16.179 13.158 24.474 29.338 24.474v0c0.645 0.055 1.395 0.086 2.152 0.086 14.845 0 26.9-11.942 27.083-26.744v-0.017l-0.768-242.688c0-16.179-13.21-23.808-29.338-23.808zM429.312 316.058c-8.010 0.054-15.245 3.332-20.478 8.6l-87.349 87.349c-5.674 5.362-9.206 12.939-9.206 21.341 0 16.203 13.135 29.338 29.338 29.338 8.402 0 15.979-3.532 21.328-9.192l0.013-0.014 66.56-66.56 68.659 68.659c5.241 4.952 12.331 7.997 20.131 7.997 16.203 0 29.338-13.135 29.338-29.338 0-7.801-3.044-14.89-8.010-20.145l0.013 0.014-89.395-89.344c-5.288-5.374-12.64-8.704-20.77-8.704-0.060 0-0.12 0-0.18 0.001h0.009zM910.285 726.272c12.303 2.218 21.521 12.828 21.555 25.596v32.158c-0.013 12.78-9.241 23.401-21.398 25.577l-0.158 0.023-23.347 3.942c-2.594 8.348-5.582 15.486-9.149 22.27l0.343-0.715 13.67 19.354c3.032 4.21 4.85 9.472 4.85 15.158 0 7.143-2.868 13.616-7.515 18.33l-22.474 22.474c-4.914 4.316-11.385 6.965-18.473 7.014h-0.010c-5.626-0.041-10.824-1.837-15.083-4.868l0.081 0.055-19.354-13.67c-6.156 3.162-13.586 6.296-21.258 8.907l-1.219 0.36-3.994 22.886c-2.010 12.229-12.457 21.458-25.078 21.555h-32.164c-12.78-0.013-23.401-9.241-25.577-21.398l-0.023-0.158-3.942-23.757c-8.307-2.766-15.297-5.744-21.996-9.206l0.851 0.4-18.944 13.67c-4.179 2.973-9.376 4.768-14.991 4.813h-0.011c-7.181-0.027-13.693-2.871-18.492-7.484l0.009 0.008-22.886-22.886c-4.653-4.705-7.528-11.178-7.528-18.322 0-5.69 1.823-10.954 4.918-15.24l-0.053 0.077 14.080-19.814c-3.243-6.081-6.232-13.219-8.561-20.648l-0.245-0.907-22.886-3.942c-12.444-1.438-22.016-11.914-22.016-24.626 0-0.018 0-0.037 0-0.055v0.003-32.154c0.013-12.78 9.241-23.401 21.398-25.577l0.158-0.023 23.757-3.942c2.765-8.306 5.744-15.296 9.206-21.996l-0.4 0.85-13.67-18.944c-3.032-4.21-4.85-9.472-4.85-15.158 0-7.143 2.868-13.616 7.515-18.33l22.474-22.474c4.7-4.622 11.151-7.476 18.269-7.476 0.075 0 0.15 0 0.225 0.001h-0.011c5.625 0.045 10.822 1.84 15.083 4.868l-0.082-0.055 19.814 14.080c5.774-3.085 12.555-5.933 19.612-8.161l0.868-0.236 3.942-23.347c2.199-12.314 12.82-21.542 25.599-21.555h32.155c12.78 0.013 23.401 9.241 25.577 21.398l0.023 0.158 3.994 23.347c8.367 2.623 15.503 5.61 22.298 9.16l-0.742-0.353 19.354-13.67c4.178-2.975 9.376-4.772 14.992-4.813h0.010c7.184 0.010 13.701 2.858 18.491 7.483l-0.008-0.007 22.477 22.477c4.649 4.697 7.522 11.161 7.522 18.295 0 5.681-1.821 10.937-4.912 15.215l0.052-0.076-13.67 19.405c3.216 6.065 6.204 13.201 8.552 20.622l0.255 0.933zM873.728 747.878c-5.402-0.963-9.662-4.966-10.987-10.145l-0.021-0.095c-2.942-11.645-7.317-21.879-13.026-31.208l0.277 0.488c-1.222-2.034-1.944-4.488-1.944-7.111 0-2.926 0.899-5.642 2.436-7.887l-0.031 0.048 18.074-25.6-20.48-20.48-25.088 18.074c-2.168 1.595-4.892 2.552-7.838 2.552-2.659 0-5.137-0.78-7.215-2.123l0.052 0.032c-8.842-5.346-19.066-9.712-29.903-12.566l-0.817-0.183c-5.274-1.346-9.277-5.606-10.228-10.925l-0.012-0.083-5.12-30.72h-29.491l-5.12 30.72c-0.95 5.408-4.959 9.674-10.145 10.988l-0.095 0.020c-11.562 3.086-21.673 7.287-31.053 12.623l0.64-0.335c-1.881 1.307-4.213 2.089-6.727 2.089-2.788 0-5.351-0.96-7.377-2.568l0.025 0.019-25.6-18.074-20.48 20.48 18.074 25.139c1.591 2.161 2.546 4.875 2.546 7.813 0 2.65-0.777 5.119-2.116 7.19l0.031-0.052c-5.343 8.832-9.846 19.029-12.982 29.807l-0.228 0.913c-1.346 5.274-5.606 9.277-10.925 10.228l-0.083 0.012-30.72 5.12v29.491l30.413 5.12c5.414 0.937 9.686 4.952 10.988 10.146l0.020 0.094c2.98 11.648 7.37 21.879 13.080 31.213l-0.28-0.493c1.193 1.951 1.9 4.313 1.9 6.839 0 3.069-1.042 5.894-2.792 8.141l0.022-0.030-18.074 25.6 20.48 20.48 25.088-18.074c2.168-1.595 4.892-2.552 7.838-2.552 2.659 0 5.137 0.78 7.215 2.123l-0.052-0.032c8.833 5.345 19.029 9.847 29.808 12.982l0.912 0.227c5.288 1.322 9.303 5.594 10.228 10.926l0.012 0.082 5.12 30.72h29.491l5.12-30.413c0.95-5.408 4.959-9.674 10.145-10.988l0.095-0.020c12.011-2.987 22.575-7.525 32.165-13.483l-0.473 0.274c2.043-1.215 4.504-1.932 7.133-1.932 2.934 0 5.659 0.894 7.918 2.425l-0.050-0.032 25.6 18.074 20.48-20.48-18.074-25.139c-1.597-2.158-2.557-4.872-2.557-7.811 0-2.652 0.782-5.122 2.127-7.191l-0.031 0.051c5.343-8.842 9.71-19.065 12.566-29.902l0.183-0.818c1.334-5.281 5.6-9.29 10.925-10.228l0.083-0.012 30.72-5.12v-29.491zM746.854 849.613c-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.677 81.92 81.92v0c0 45.225-36.648 81.891-81.866 81.92h-0.003zM746.854 713.062c-30.121 0.029-54.528 24.454-54.528 54.579 0 30.143 24.436 54.579 54.579 54.579 30.125 0 54.55-24.407 54.579-54.525v-0.003c0-0.015 0-0.033 0-0.051 0-30.143-24.436-54.579-54.579-54.579 0 0 0 0 0 0v0zM763.187 576.256h-32.154c-16.347 0.055-29.922 11.851-32.737 27.393l-0.031 0.204-3.226 19.046c-5.528 1.887-10.012 3.739-14.364 5.822l0.796-0.343-16.23-11.571c-5.392-3.759-12.081-6.006-19.295-6.006-9.152 0-17.459 3.616-23.571 9.498l0.011-0.010-22.477 22.477c-5.952 6.033-9.627 14.325-9.627 23.475 0 7.334 2.362 14.117 6.366 19.63l-0.067-0.096 11.008 15.36c-2.202 4.608-4.045 9.318-5.734 13.926l-19.507 3.277c-15.789 2.802-27.635 16.392-27.699 32.761v32.161c0 0.065-0.001 0.143-0.001 0.22 0 16.463 12.471 30.012 28.482 31.717l0.14 0.012 18.022 3.123c2.051 5.881 4.057 10.65 6.308 15.278l-0.368-0.839-11.622 16.282c-3.9 5.382-6.239 12.118-6.239 19.4 0 9.177 3.714 17.486 9.721 23.506l22.886 22.937c6.083 5.897 14.389 9.532 23.544 9.532 7.225 0 13.922-2.264 19.419-6.122l-0.108 0.072 15.36-11.11c4.352 2.048 8.858 3.891 13.978 5.734l3.226 19.507c2.802 15.789 16.392 27.635 32.761 27.699h32.161c0.002 0 0.003 0 0.005 0 16.352 0 29.903-11.997 32.33-27.669l0.023-0.183 3.226-18.432c5.12-1.894 10.24-3.994 15.36-6.298l15.872 11.162c5.461 3.791 12.23 6.057 19.528 6.057 8.764 0 16.764-3.267 22.851-8.649l-0.037 0.032 22.938-22.938c5.96-6.042 9.641-14.346 9.641-23.51 0-7.317-2.347-14.087-6.33-19.596l0.067 0.098-11.059-15.667c1.939-3.844 3.962-8.612 5.704-13.514l0.286-0.924 18.944-3.226c15.8-2.782 27.657-16.384 27.699-32.763v-32.159c-0.055-16.347-11.851-29.922-27.393-32.737l-0.204-0.031h-0.307l-18.278-2.458c-2.050-5.812-4.055-10.529-6.303-15.104l0.364 0.819 11.162-15.821c3.901-5.382 6.239-12.118 6.239-19.4 0-9.151-3.694-17.44-9.671-23.456l-22.475-22.475c-6.072-5.914-14.376-9.561-23.533-9.561-7.233 0-13.935 2.276-19.428 6.151l0.106-0.071-15.872 11.213c-3.809-1.92-8.56-3.943-13.44-5.694l-0.948-0.297-3.277-18.944c-2.701-15.927-16.395-27.904-32.886-27.904-0.012 0-0.025 0-0.037 0h0.002zM680.294 645.478l3.994-2.099c5.505-2.926 11.953-5.588 18.672-7.629l0.784-0.205 4.301-1.331 4.762-27.75c1.63-8.772 9.21-15.33 18.326-15.36h32.157c9.128 0.009 16.719 6.578 18.312 15.246l0.017 0.114 4.71 27.802 4.403 1.28c7.927 2.448 14.709 5.28 21.153 8.668l-0.673-0.323 3.891 1.946 22.938-16.179c3.045-2.168 6.84-3.466 10.938-3.466 5.221 0 9.949 2.106 13.383 5.515l22.271 22.271c3.328 3.357 5.384 7.979 5.384 13.082 0 4.131-1.348 7.947-3.627 11.033l-16.143 22.887 1.946 3.942c3.097 5.789 5.93 12.573 8.121 19.639l0.224 0.841 1.331 4.557 27.494 3.686c8.761 1.649 15.309 9.217 15.36 18.324v32.16c-0.030 9.12-6.588 16.699-15.244 18.312l-0.116 0.018-27.75 4.71-1.331 4.352c-2.438 7.921-5.271 14.703-8.665 21.145l0.319-0.665-1.946 3.942 16.179 22.938c2.17 3.030 3.47 6.811 3.47 10.896 0 5.177-2.088 9.866-5.468 13.272l-22.322 22.322c-3.466 2.974-8.005 4.784-12.968 4.784-4.158 0-8.020-1.271-11.217-3.446l0.069 0.045-22.938-16.179-3.891 1.946c-5.876 3.009-12.984 6.004-20.321 8.507l-1.183 0.351-4.147 1.382-4.71 27.238c-1.466 8.693-8.885 15.249-17.857 15.36h-32.166c-9.12-0.030-16.699-6.588-18.312-15.244l-0.018-0.116-4.608-27.955-4.096-1.434c-7.903-2.617-14.556-5.441-20.932-8.725l0.81 0.379-3.994-2.15-22.63 16.384c-3.028 2.111-6.785 3.372-10.837 3.372-5.213 0-9.938-2.088-13.384-5.474l-22.679-22.679c-3.336-3.366-5.397-8.001-5.397-13.117 0-4.114 1.333-7.917 3.591-11l16.603-23.346-1.946-3.942c-3.082-5.781-5.915-12.564-8.116-19.626l-0.23-0.854-1.28-4.352-27.392-4.71c-8.926-0.934-15.836-8.376-15.923-17.45v-32.163c0.009-9.128 6.578-16.719 15.246-18.312l0.114-0.017 27.955-4.71 1.434-4.045c2.684-7.946 5.523-14.595 8.798-20.983l-0.401 0.862 2.15-4.045-16.333-22.63c-2.166-3.022-3.464-6.795-3.464-10.871 0-5.168 2.086-9.848 5.462-13.245l22.322-22.322c3.413-3.265 8.051-5.275 13.157-5.275 4.083 0 7.866 1.285 10.967 3.472l-0.060-0.040zM767.642 602.214h-41.882l-6.349 36.915c-0.451 2.495-2.285 4.466-4.665 5.11l-0.045 0.010c-12.22 3.246-22.911 7.693-32.818 13.355l0.665-0.35c-0.864 0.687-1.971 1.103-3.174 1.103s-2.311-0.415-3.185-1.111l0.010 0.008-30.72-21.606-29.44 29.491 21.709 30.157c0.66 0.944 1.055 2.115 1.055 3.379s-0.395 2.436-1.068 3.398l0.013-0.019c-5.729 9.424-10.531 20.304-13.845 31.814l-0.235 0.954c-0.524 2.589-2.531 4.596-5.078 5.113l-0.042 0.007-36.915 6.349v41.83l36.454 6.349c2.495 0.451 4.466 2.285 5.11 4.665l0.010 0.045c3.082 12.417 7.743 23.339 13.856 33.271l-0.288-0.503c0.54 0.892 0.86 1.969 0.86 3.121 0 1.348-0.438 2.594-1.179 3.603l0.012-0.017-21.914 30.72 29.44 29.44 30.208-21.709c0.936-0.656 2.099-1.048 3.354-1.048s2.417 0.392 3.373 1.061l-0.019-0.013c9.439 5.734 20.337 10.537 31.866 13.846l0.953 0.234c2.582 0.537 4.583 2.538 5.113 5.077l0.007 0.043 6.298 36.915h41.882l6.349-36.454c0.426-2.506 2.272-4.49 4.666-5.11l0.044-0.010c12.769-3.182 23.999-8.019 34.187-14.369l-0.498 0.289c0.992-0.612 2.195-0.974 3.482-0.974s2.489 0.363 3.511 0.991l-0.029-0.017 30.72 21.606 29.44-29.491-21.658-30.157c-0.66-0.944-1.055-2.115-1.055-3.379s0.395-2.436 1.068-3.398l-0.013 0.019c5.745-9.505 10.429-20.498 13.477-32.152l0.194-0.872c0.654-2.425 2.625-4.26 5.081-4.704l0.039-0.006 36.966-6.349v-41.882l-37.837-6.298c-2.489-0.463-4.455-2.292-5.109-4.665l-0.011-0.046c-3.093-12.399-7.752-23.302-13.857-33.221l0.289 0.504c-0.622-0.998-0.99-2.21-0.99-3.507s0.368-2.509 1.007-3.536l-0.017 0.029 21.555-30.72-29.491-29.44-30.157 21.709c-0.936 0.656-2.099 1.048-3.354 1.048s-2.417-0.392-3.373-1.061l0.019 0.013c-9.505-5.757-20.496-10.457-32.148-13.526l-0.876-0.196c-2.425-0.654-4.26-2.625-4.704-5.081l-0.006-0.039zM738.15 616.858h17.101l4.25 24.781c1.405 8.201 7.408 14.701 15.213 16.811l0.147 0.034c10.977 2.876 20.602 6.978 29.438 12.264l-0.51-0.283c3.094 1.976 6.866 3.149 10.912 3.149 4.497 0 8.655-1.449 12.034-3.906l-0.059 0.041 20.122-14.49 11.93 11.93-14.49 20.48c-2.326 3.385-3.715 7.571-3.715 12.082 0 3.897 1.037 7.552 2.849 10.704l-0.055-0.104c5.157 8.354 9.304 18.026 11.927 28.307l0.156 0.723c2.067 8.1 8.636 14.239 16.822 15.649l0.125 0.018 25.6 4.301v17.101l-24.73 4.25c-8.234 1.361-14.768 7.381-16.863 15.214l-0.033 0.146c-2.867 10.976-6.97 20.602-12.262 29.434l0.281-0.506c-1.976 3.094-3.149 6.866-3.149 10.912 0 4.497 1.449 8.655 3.906 12.034l-0.041-0.059 14.438 20.122-11.878 11.93-20.48-14.49c-3.39-2.336-7.585-3.731-12.106-3.731-3.908 0-7.573 1.043-10.731 2.865l0.104-0.055c-8.599 5.413-18.567 9.723-29.187 12.392l-0.714 0.152c-8.12 2.062-14.271 8.66-15.65 16.875l-0.017 0.123-4.198 24.218h-17.203l-4.198-24.73c-1.387-8.222-7.394-14.744-15.213-16.862l-0.147-0.034c-10.989-3.153-20.574-7.376-29.426-12.696l0.549 0.306c-3.094-1.976-6.866-3.149-10.912-3.149-4.497 0-8.655 1.449-12.034 3.906l0.059-0.041-20.122 14.49-11.878-11.93 14.49-20.48c2.591-3.394 4.151-7.696 4.151-12.362 0-3.824-1.048-7.403-2.872-10.465l0.052 0.094c-5.158-8.354-9.305-18.026-11.927-28.307l-0.156-0.723c-2.055-8.107-8.63-14.252-16.823-15.65l-0.124-0.018-24.269-4.198v-17.203l24.678-4.198c8.234-1.361 14.768-7.381 16.863-15.214l0.033-0.146c3.145-11.007 7.369-20.61 12.696-29.476l-0.305 0.548c1.976-3.094 3.149-6.866 3.149-10.912 0-4.497-1.449-8.655-3.906-12.034l0.041 0.059-14.49-20.122 11.878-11.93 20.48 14.49c3.182 2.43 7.216 3.893 11.591 3.893 4.224 0 8.129-1.364 11.299-3.675l-0.055 0.038c7.937-4.445 17.128-8.208 26.794-10.812l0.854-0.196c7.966-2.152 13.973-8.674 15.343-16.772l0.017-0.124zM746.957 678.298c-49.287 0-89.242 39.955-89.242 89.242s39.955 89.242 89.242 89.242c49.287 0 89.242-39.955 89.242-89.242v0c-0.146-49.215-40.061-89.059-89.29-89.088h-0.003zM746.957 842.138c-41.2 0-74.598-33.399-74.598-74.598s33.399-74.598 74.598-74.598c41.2 0 74.598 33.399 74.598 74.598v0c0 0.015 0 0.033 0 0.051 0 41.238-33.415 74.672-74.647 74.701h-0.003zM746.957 705.587c-0.015 0-0.033 0-0.051 0-34.215 0-61.952 27.737-61.952 61.952s27.737 61.952 61.952 61.952c34.215 0 61.952-27.737 61.952-61.952 0-0.018 0-0.036 0-0.054v0.003c-0.145-34.115-27.82-61.718-61.949-61.747h-0.003zM746.957 814.797c-26.1 0-47.258-21.158-47.258-47.258s21.158-47.258 47.258-47.258c26.082 0 47.228 21.129 47.258 47.204v0.003c0 0.076 0.001 0.166 0.001 0.256 0 26.138-21.175 47.331-47.307 47.36h-0.003zM350.771-4.045c0-33.141-26.866-60.006-60.006-60.006s-60.006 26.866-60.006 60.006c0 33.141 26.866 60.006 60.006 60.006s60.006-26.866 60.006-60.006zM673.28-4.045c0-33.141-26.866-60.006-60.006-60.006s-60.006 26.866-60.006 60.006c0 33.141 26.866 60.006 60.006 60.006s60.006-26.866 60.006-60.006zM645.12 117.709h-415.181c-0.010 0-0.021 0-0.032 0-12.573 0-23.296 7.923-27.447 19.049l-0.066 0.202-100.403 273.92h-72.55c-0.366-0.016-0.794-0.026-1.225-0.026-16.203 0-29.338 13.135-29.338 29.338s13.135 29.338 29.338 29.338c0.431 0 0.86-0.009 1.286-0.028l-0.061 0.002h92.979c0.010 0 0.021 0 0.032 0 12.573 0 23.296-7.923 27.447-19.049l0.066-0.202 100.454-273.92h375.654l121.446 274.074c4.674 10.359 14.912 17.439 26.803 17.439 16.192 0 29.317-13.126 29.317-29.317 0-4.3-0.926-8.384-2.589-12.063l0.075 0.185-129.178-291.482c-4.66-10.369-14.898-17.459-26.792-17.459-0.013 0-0.026 0-0.039 0h0.002z" />
-<glyph unicode="&#xe989;" glyph-name="purchase-record" horiz-adv-x="1342" d="M588.698 138.854c0-24.573-19.92-44.493-44.493-44.493s-44.493 19.92-44.493 44.493c0 24.573 19.92 44.493 44.493 44.493s44.493-19.92 44.493-44.493zM827.904 138.854c0-24.573-19.92-44.493-44.493-44.493s-44.493 19.92-44.493 44.493c0 24.573 19.92 44.493 44.493 44.493s44.493-19.92 44.493-44.493zM777.933 218.624h-247.603c-34.279 0.020-63.55 21.44-75.18 51.622l-0.187 0.551-60.109 159.693h-41.728c-0.401-0.016-0.872-0.026-1.345-0.026-19.511 0-35.328 15.817-35.328 35.328s15.817 35.328 35.328 35.328c0.473 0 0.944-0.009 1.412-0.028l-0.067 0.002h34.867c0.008 0 0.018 0 0.028 0 34.25 0 63.506-21.379 75.152-51.52l0.187-0.55 49.101-130.458c6.625-17.252 23.052-29.277 42.29-29.286h200.449c18.095 0.103 33.668 10.796 40.843 26.192l0.117 0.279 75.776 166.298c5.703 12.306 17.949 20.688 32.154 20.688 19.513 0 35.331-15.818 35.331-35.331 0-5.309-1.171-10.344-3.268-14.861l0.091 0.218-85.248-186.982c-12.969-27.98-40.776-47.060-73.050-47.155h-0.013zM1261.261-64h-1180.723c-44.48 0-80.538 36.058-80.538 80.538v0 862.925c0 44.48 36.058 80.538 80.538 80.538v0h356.147c0.005 0 0.011 0 0.017 0 25.975 0 49.076-12.304 63.792-31.402l0.139-0.188 97.28-127.232c8.341-10.798 21.283-17.691 35.836-17.715h627.358c44.48 0 80.538-36.058 80.538-80.538v0-686.336c0-0.015 0-0.033 0-0.051 0-44.426-35.97-80.45-80.376-80.537h-0.008zM115.866 6.605h1110.067c24.969 0 45.21 20.241 45.21 45.21v0 615.782c0 24.969-20.241 45.21-45.21 45.21v0h-609.28c-25.976 0.019-49.075 12.318-63.81 31.403l-0.139 0.187-97.28 127.283c-8.341 10.798-21.283 17.691-35.836 17.715h-303.415c-24.969 0-45.21-20.241-45.21-45.21v0-792.269c0-0.031 0-0.067 0-0.103 0-24.861 20.066-45.034 44.886-45.208h0.017zM1129.933 712.858c-0.015 0-0.033 0-0.051 0-19.483 0-35.277 15.794-35.277 35.277 0 0.018 0 0.036 0 0.054v-0.003 25.6c0 24.969-20.241 45.21-45.21 45.21v0h-519.731c-18.924 0.743-33.983 16.264-33.983 35.302s15.059 34.559 33.916 35.3l0.067 0.002h555.008c44.48 0 80.538-36.058 80.538-80.538v0-60.723c0-0.061 0.001-0.133 0.001-0.205 0-19.483-15.794-35.277-35.277-35.277 0 0 0 0-0.001 0v0z" />
-<glyph unicode="&#xe98a;" glyph-name="search-app" horiz-adv-x="754" d="M727.603 596.224h-207.872c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h207.872c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 440.32h-77.978c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h77.978c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 284.416h-77.978c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h77.978c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM648.55-64.051c-0.025 0-0.056 0-0.086 0-6.309 0-12.018 2.564-16.144 6.707l-197.223 197.275c-3.633 4.048-5.855 9.428-5.855 15.327 0 12.696 10.292 22.989 22.989 22.989 5.899 0 11.278-2.222 15.348-5.874l-0.021 0.019 197.274-197.274c4.145-4.158 6.708-9.895 6.708-16.23 0-12.679-10.264-22.96-22.936-22.989h-0.003zM727.552 752.128h-701.44c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h701.44c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 908.032h-701.44c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h701.44c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM268.8 83.763c-148.461 0.028-268.802 120.386-268.802 268.851 0 148.482 120.369 268.851 268.851 268.851 74.242 0 141.455-30.092 190.107-78.745v0c48.695-48.652 78.816-115.887 78.816-190.157 0-148.454-120.346-268.8-268.8-268.8-0.061 0-0.122 0-0.183 0h0.009zM268.8 569.395c-119.566-0.21-216.411-97.186-216.411-216.78 0-119.725 97.056-216.781 216.781-216.781s216.781 97.056 216.781 216.781c0 59.89-24.287 114.108-63.549 153.342l-0.001 0.001c-39.154 39.193-93.266 63.438-153.040 63.438-0.197 0-0.394 0-0.59-0.001h0.031z" />
-<glyph unicode="&#xe98b;" glyph-name="settings-taxes" horiz-adv-x="864" d="M304.23 351.59c-0.019 0-0.042 0-0.064 0-168.022 0-304.23 136.209-304.23 304.23s136.209 304.23 304.23 304.23c168.022 0 304.23-136.209 304.23-304.23 0-84.020-34.060-160.086-89.126-215.142v0c-54.726-55.031-130.492-89.089-214.213-89.089-0.291 0-0.582 0-0.872 0.001h0.045zM304.23 906.957c-138.626-0.096-250.968-112.496-250.968-251.136 0-138.699 112.437-251.136 251.136-251.136s251.136 112.437 251.136 251.136c0 69.391-28.143 132.209-73.638 177.662l-0.002 0.002c-45.353 45.393-108.029 73.472-177.263 73.472-0.141 0-0.282 0-0.423 0h0.022zM637.594-64c-124.734 0.107-225.809 101.248-225.809 225.997 0 124.815 101.182 225.997 225.997 225.997s225.997-101.182 225.997-225.997c0-62.454-25.333-118.991-66.285-159.895l-0.002-0.002c-40.779-40.837-97.146-66.1-159.414-66.1-0.17 0-0.34 0-0.51 0.001h0.026zM637.594 335.36c-0.019 0-0.043 0-0.066 0-95.661 0-173.21-77.549-173.21-173.21s77.549-173.21 173.21-173.21c95.661 0 173.21 77.549 173.21 173.21 0 47.827-19.384 91.126-50.725 122.47v0c-31.159 31.251-74.254 50.586-121.865 50.586-0.195 0-0.389 0-0.584-0.001h0.030zM632.627 292.403c0.076 0.001 0.166 0.002 0.256 0.002 8.483 0 15.36-6.877 15.36-15.36 0-0.001 0-0.001 0-0.002v0-4.198c16.266-2.295 30.944-7.355 44.164-14.716l-0.644 0.329c6.471-3.521 10.793-10.266 10.803-18.021v-0.002c0-0.032 0-0.070 0-0.108 0-11.056-8.963-20.019-20.019-20.019-0.162 0-0.324 0.002-0.485 0.006h0.024c-3.852 0.010-7.468 1.014-10.607 2.77l0.111-0.057c-7.148 4.061-15.425 7.551-24.124 10.042l-0.81 0.198v-45.619c45.619-12.288 65.126-30.72 65.126-64.512s-25.6-55.245-63.642-59.443v-15.923c0-8.624-6.992-15.616-15.616-15.616s-15.616 6.992-15.616 15.616v0 15.974c-22.21 3.007-42.204 10.446-59.769 21.412l0.633-0.369c-6.356 3.559-10.581 10.251-10.581 17.929 0 11.311 9.169 20.48 20.48 20.48 0.21 0 0.419-0.003 0.627-0.009l-0.031 0.001c4.403-0.161 8.442-1.593 11.796-3.938l-0.071 0.047c10.969-7.557 23.81-13.357 37.627-16.639l0.773-0.155v47.718c-43.213 11.725-64.563 28.211-64.563 63.949 1.263 32.936 28.268 59.158 61.398 59.158 0.573 0 1.144-0.008 1.713-0.023l-0.084 0.002v3.584c-0.001 0.047-0.001 0.103-0.001 0.159 0 8.483 6.877 15.36 15.36 15.36 0.144 0 0.288-0.002 0.432-0.006h-0.021zM618.496 195.123v40.55c-14.387-2.099-20.48-9.318-20.48-18.944s3.994-15.565 20.48-21.606zM646.707 142.592v-41.728c14.131 2.099 21.299 8.704 21.299 19.507-0.102 9.933-5.222 16.538-21.248 22.221zM210.483 522.035c-0.004 0-0.009 0-0.014 0-14.619 0-26.47 11.851-26.47 26.47 0 5.895 1.927 11.34 5.185 15.739l-0.051-0.072 181.914 248.832c4.875 6.607 12.63 10.846 21.376 10.846 14.629 0 26.488-11.859 26.488-26.488 0-5.883-1.918-11.318-5.163-15.714l0.051 0.073-181.914-248.832c-4.871-6.612-12.627-10.854-21.373-10.854-0.010 0-0.020 0-0.030 0h0.002zM262.656 765.286c0-29.917-24.253-54.17-54.17-54.17s-54.17 24.253-54.17 54.17c0 29.917 24.253 54.17 54.17 54.17s54.17-24.253 54.17-54.17zM455.27 572.621c0-29.917-24.253-54.17-54.17-54.17s-54.17 24.253-54.17 54.17c0 29.917 24.253 54.17 54.17 54.17s54.17-24.253 54.17-54.17z" />
-<glyph unicode="&#xe98c;" glyph-name="subscription1" horiz-adv-x="740" d="M575.027 500.582h-409.6c-15.722 0-28.467 12.745-28.467 28.467v0 269.363c0 15.722 12.745 28.467 28.467 28.467v0h409.6c15.722 0 28.467-12.745 28.467-28.467v0-269.363c0-15.722-12.745-28.467-28.467-28.467v0zM193.894 557.568h352.666v212.378h-352.666zM663.603-64h-586.906c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h586.906c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.493 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM341.197 595.302c-0.014 0-0.030 0-0.046 0-7.058 0-13.449 2.856-18.080 7.476l0.001-0.001-35.43 35.379c-4.446 4.599-7.186 10.872-7.186 17.785 0 14.138 11.462 25.6 25.6 25.6 6.913 0 13.186-2.74 17.792-7.193l17.299-17.299 75.418 75.418c4.599 4.446 10.872 7.186 17.785 7.186 14.138 0 25.6-11.462 25.6-25.6 0-6.913-2.74-13.186-7.193-17.792l-93.535-93.535c-4.624-4.587-10.992-7.423-18.022-7.424v0zM362.035 39.987v0c-0.738-0.084-1.594-0.131-2.461-0.131-12.647 0-22.925 10.145-23.139 22.742v0.020l0.666 314.675c0 14.131 11.52 21.146 25.6 21.146v0c0.692 0.073 1.495 0.115 2.307 0.115 12.726 0 23.069-10.205 23.292-22.878v-0.021l-0.666-314.573c0-14.182-11.469-21.094-25.6-21.094zM284.877 325.069c-0.014 0-0.030 0-0.046 0-14.138 0-25.6 11.462-25.6 25.6 0 7.081 2.875 13.49 7.521 18.124h0.001l78.080 78.080c4.632 4.631 11.031 7.495 18.099 7.495s13.467-2.864 18.099-7.495l76.288-76.288c4.822-4.662 7.815-11.188 7.815-18.414 0-14.138-11.462-25.6-25.6-25.6-7.226 0-13.752 2.994-18.407 7.808l-58.17 58.17-59.955-59.955c-4.634-4.648-11.043-7.525-18.125-7.526v0z" />
-<glyph unicode="&#xe98d;" glyph-name="aging-report" horiz-adv-x="740" d="M435.046 731.136h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM588.646 628.736h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM588.646 526.336h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM663.654-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.397-34.355-76.771-76.746-76.8h-0.003zM76.595 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM234.496 61.44c-14.126 0.017-25.571 11.472-25.571 25.6 0 3.103 0.552 6.078 1.564 8.83l-0.057-0.178c11.162 31.13 71.68 186.47 158.72 186.47 38.042 0 88.576 91.085 110.797 152.627 3.762 9.754 13.061 16.548 23.946 16.548 14.138 0 25.6-11.462 25.6-25.6 0-2.955-0.501-5.792-1.421-8.433l0.055 0.18c-11.162-31.13-71.68-186.522-158.72-186.522-38.042 0-88.627-91.085-110.797-152.627-3.668-9.938-13.059-16.896-24.075-16.896-0.014 0-0.028 0-0.043 0h0.002zM504.166 61.491c-0.006 0-0.014 0-0.022 0-11.035 0-20.439 6.982-24.036 16.77l-0.057 0.178c-22.17 61.44-72.755 152.627-110.797 152.627-87.501 0-147.763 155.392-158.72 186.522-1.183 2.842-1.87 6.143-1.87 9.605 0 14.138 11.462 25.6 25.6 25.6 11.369 0 21.008-7.412 24.347-17.667l0.051-0.181c22.17-61.44 72.755-152.627 110.797-152.627 87.501 0 147.763-155.341 158.72-186.47 0.954-2.575 1.507-5.549 1.507-8.653 0-14.128-11.445-25.583-25.569-25.6h-0.002zM537.446 423.936h-358.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h358.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM537.446 39.936h-358.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h358.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
-<glyph unicode="&#xe98e;" glyph-name="unlink" d="M608.188 148.173c4.393-4.356 7.114-10.394 7.114-17.067s-2.72-12.711-7.112-17.065l-89.295-89.363c-55.034-55.034-131.062-89.072-215.040-89.072-167.957 0-304.112 136.156-304.112 304.112 0 83.978 34.039 160.006 89.072 215.040l89.429 89.361c4.356 4.393 10.394 7.114 17.067 7.114s12.711-2.72 17.065-7.112l79.191-79.191c4.393-4.356 7.114-10.394 7.114-17.067s-2.72-12.711-7.112-17.065l-0.002-0.002-89.498-89.156c-26.058-26.058-42.175-62.057-42.175-101.82 0-79.526 64.469-143.995 143.995-143.995 39.763 0 75.762 16.117 101.82 42.175l89.361 89.361c4.356 4.393 10.394 7.114 17.067 7.114s12.711-2.72 17.065-7.112l0.002-0.002zM495.070 668.57c4.356-4.393 10.394-7.114 17.067-7.114s12.711 2.72 17.065 7.112l0.002 0.002 89.156 89.361c26.058 26.058 62.057 42.175 101.82 42.175 79.526 0 143.995-64.469 143.995-143.995 0-39.763-16.117-75.762-42.175-101.82l-89.361-89.361c-4.393-4.356-7.114-10.394-7.114-17.067s2.72-12.711 7.112-17.065l79.191-79.191c4.356-4.393 10.394-7.114 17.067-7.114s12.711 2.72 17.065 7.112l0.002 0.002 89.361 89.498c55.034 55.034 89.072 131.062 89.072 215.040 0 167.957-136.156 304.112-304.112 304.112-83.978 0-160.006-34.039-215.040-89.072l-89.361-89.429c-4.393-4.356-7.114-10.394-7.114-17.067s2.72-12.711 7.112-17.065l79.191-79.191zM964.745-50.005l45.261 45.261c8.731 8.661 14.135 20.664 14.135 33.929s-5.405 25.267-14.132 33.925l-882.828 882.828c-8.661 8.731-20.664 14.135-33.929 14.135s-25.267-5.405-33.925-14.132l-45.264-45.264c-8.731-8.661-14.135-20.664-14.135-33.929s5.405-25.267 14.132-33.925l882.759-882.759c8.661-8.731 20.664-14.135 33.929-14.135s25.267 5.405 33.925 14.132l0.003 0.003z" />
-<glyph unicode="&#xe98f;" glyph-name="notification" horiz-adv-x="826" d="M818.278 124.979c-39.9 59.077-63.693 131.888-63.693 210.255 0 0.044 0 0.089 0 0.133v-0.007 158.208c0.001 0.327 0.002 0.713 0.002 1.099 0 139.365-80.222 259.994-197.007 318.227l-2.060 0.93v3.994c0 78.539-63.669 142.208-142.208 142.208s-142.208-63.669-142.208-142.208v0-2.509c-118.449-55.255-199.066-173.338-199.066-310.249 0-0.026 0-0.052 0-0.077v0.004-169.626c0-0.068 0-0.148 0-0.228 0-78.367-23.793-151.178-64.549-211.602l0.856 1.347c-5.172-7.481-8.27-16.739-8.294-26.72v-0.006c0.143-26.727 21.842-48.337 48.588-48.337 0.234 0 0.468 0.002 0.702 0.005h225.245c13.581-65.5 70.807-114.025 139.366-114.025s125.785 48.525 139.206 113.103l0.16 0.922h225.28c26.505 0.247 47.897 21.791 47.897 48.331 0 9.958-3.011 19.212-8.173 26.902l0.11-0.174zM413.286 903.219c41.065-0.046 75.343-29.052 83.511-67.692l0.099-0.558c-22.993 6.491-49.531 10.59-76.903 11.356l-0.46 0.010c-1.758 0.032-3.832 0.051-5.91 0.051-29.703 0-58.529-3.753-86.030-10.811l2.392 0.521c8.566 38.648 42.545 67.123 83.175 67.123 0.027 0 0.054 0 0.080 0h-0.004zM413.286-6.861c-36.598 0.36-67.65 23.713-79.428 56.289l-0.188 0.594h160.41c-12.030-33.477-43.501-56.986-80.463-56.986-0.116 0-0.232 0-0.348 0.001h0.018zM552.653 106.906h-488.243c40.501 65.075 64.511 144.063 64.512 228.659v0 169.37c0 157.079 127.337 284.416 284.416 284.416v0h5.478c50.645-0.964 97.646-15.74 137.636-40.7l-1.137 0.661c86.079-53.444 142.543-147.458 142.543-254.659 0-0.381-0.001-0.762-0.002-1.143v0.059-158.208c0.037-84.607 24.082-163.591 65.691-230.518l-1.076 1.858z" />
-<glyph unicode="&#xe990;" glyph-name="branch-alice" d="M384 960l-147.183-147.183 339.217-339.217v-537.6h-128v486.4l-300.783 300.783-147.251-147.183v384h384zM640 960h384v-384l-147.183 147.183-185.617-185.617-89.566 89.566 185.617 185.617z" />
-<glyph unicode="&#xe991;" glyph-name="trial-balance" horiz-adv-x="740" d="M663.757-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM604.262 628.736h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM604.262 526.336h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM604.262 423.936h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM271.462 526.336h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM271.462 423.936h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM207.821 870.246c0.107 0.003 0.232 0.004 0.359 0.004 8.285 0 15.002-6.716 15.002-15.002 0-0.020 0-0.039 0-0.058v0.003-4.096c15.732-2.237 29.924-7.133 42.713-14.246l-0.627 0.32c6.26-3.346 10.447-9.837 10.447-17.307 0-10.802-8.757-19.558-19.558-19.558-0.073 0-0.146 0-0.219 0.001h0.011c-0.061-0.001-0.133-0.001-0.205-0.001-3.68 0-7.137 0.949-10.142 2.616l0.107-0.055c-6.894 3.885-14.882 7.236-23.271 9.636l-0.793 0.194v-44.134c44.083-11.878 62.976-29.901 62.976-62.413s-24.986-53.402-61.44-57.446v-15.36c0-8.342-6.762-15.104-15.104-15.104s-15.104 6.762-15.104 15.104v15.667c-21.471 2.958-40.785 10.193-57.745 20.835l0.606-0.355c-5.925 3.536-9.831 9.914-9.831 17.203 0 11.028 8.94 19.968 19.968 19.968 0.036 0 0.072 0 0.108 0h-0.006c4.247-0.155 8.144-1.531 11.385-3.784l-0.070 0.046c10.601-7.324 23.014-12.947 36.372-16.131l0.748-0.15v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.29 31.837 27.412 57.158 59.448 57.158 0.52 0 1.039-0.007 1.556-0.020l-0.076 0.002v3.533c-0.003 0.107-0.004 0.232-0.004 0.358 0 8.285 6.716 15.002 15.002 15.002 0.002 0 0.003 0 0.005 0v0zM194.202 776.243v39.168c-13.926-2.048-20.019-9.011-20.019-18.278s3.994-15.104 19.968-20.736zM221.491 725.453v-40.294c13.619 1.997 20.48 8.397 20.48 18.842 0 9.574-4.813 15.974-20.48 21.453zM124.774 177.613l36.557 44.851-34.406 41.933c-2.577 2.948-4.224 6.766-4.452 10.962l-0.002 0.046c-0.003 0.108-0.005 0.235-0.005 0.362 0 7.918 6.418 14.336 14.336 14.336 0.11 0 0.219-0.001 0.328-0.004h-0.016c0.136 0.004 0.297 0.007 0.458 0.007 5.561 0 10.445-2.897 13.226-7.265l0.038-0.063 29.594-39.475 29.389 38.656c3.026 4.914 8.376 8.141 14.479 8.141 0.004 0 0.007 0 0.011 0h-0.001c7.472-0.029 13.518-6.092 13.518-13.568 0-0.054 0-0.108-0.001-0.162v0.008c-0.090-4.396-1.763-8.385-4.47-11.436l0.016 0.018-34.406-42.138 36.352-44.646c2.583-2.944 4.232-6.764 4.453-10.963l0.002-0.045c0.003-0.108 0.005-0.235 0.005-0.363 0-7.918-6.418-14.336-14.336-14.336-0.128 0-0.255 0.002-0.382 0.005h0.019c-0.177-0.007-0.385-0.012-0.595-0.012-5.535 0-10.385 2.927-13.089 7.318l-0.038 0.066-31.693 41.574-31.334-40.96c-3.041-4.903-8.387-8.123-14.487-8.141h-0.003c-7.478 0.058-13.517 6.133-13.517 13.619 0 0.036 0 0.072 0 0.108v-0.006c0.046 4.452 1.727 8.503 4.47 11.589l-0.016-0.018zM319.642 246.835c0.029 7.351 5.965 13.305 13.306 13.363h71.174c7.366 0 13.338-5.971 13.338-13.338s-5.971-13.338-13.338-13.338h-71.27c-7.308 0.058-13.21 5.996-13.21 13.312 0 0 0 0 0 0v0zM319.642 196.557c0.029 7.351 5.965 13.305 13.306 13.363h71.174c7.366 0 13.338-5.971 13.338-13.338s-5.971-13.338-13.338-13.338h-71.27c-7.308 0.058-13.21 5.996-13.21 13.312 0 0 0 0 0 0v0zM501.811 177.613l36.557 44.851-34.406 41.933c-2.587 2.942-4.237 6.764-4.453 10.964l-0.002 0.044c-0.003 0.108-0.005 0.235-0.005 0.363 0 7.918 6.418 14.336 14.336 14.336 0.128 0 0.255-0.002 0.382-0.005h-0.019c0.145 0.005 0.315 0.008 0.486 0.008 5.553 0 10.429-2.899 13.198-7.265l0.038-0.064 29.542-39.424 29.389 38.656c3.043 4.886 8.386 8.090 14.477 8.090 0.004 0 0.009 0 0.013 0h-0.001c7.478-0.058 13.517-6.133 13.517-13.619 0-0.036 0-0.072 0-0.108v0.006c-0.090-4.396-1.763-8.385-4.47-11.436l0.016 0.018-34.406-42.138 36.352-44.646c2.587-2.942 4.237-6.764 4.453-10.964l0.002-0.044c0.003-0.108 0.005-0.235 0.005-0.363 0-7.918-6.418-14.336-14.336-14.336-0.128 0-0.255 0.002-0.382 0.005h0.019c-0.145-0.005-0.315-0.008-0.486-0.008-5.553 0-10.429 2.899-13.198 7.265l-0.038 0.064-31.693 41.574-31.334-40.96c-3.031-4.885-8.366-8.090-14.448-8.090-0.015 0-0.029 0-0.044 0h0.002c-7.472 0.029-13.518 6.092-13.518 13.568 0 0.054 0 0.108 0.001 0.162v-0.008c0.031 4.455 1.715 8.51 4.469 11.588l-0.015-0.017z" />
-<glyph unicode="&#xe992;" glyph-name="user1" horiz-adv-x="915" d="M457.37 906.189c99.365 0 179.917-80.551 179.917-179.917s-80.551-179.917-179.917-179.917c-99.365 0-179.917 80.551-179.917 179.917v0c0.029 99.354 80.563 179.888 179.914 179.917h0.003zM457.37 960c-129.084 0-233.728-104.644-233.728-233.728s104.644-233.728 233.728-233.728c129.084 0 233.728 104.644 233.728 233.728v0c0 129.084-104.644 233.728-233.728 233.728v0zM834.048-64h-753.357c-44.565 0-80.691 36.127-80.691 80.691v0 149.094c0 155.523 126.077 281.6 281.6 281.6v0h351.949c155.523 0 281.6-126.077 281.6-281.6v0-149.094c0 0 0-0.001 0-0.001 0-44.565-36.127-80.691-80.691-80.691-0.144 0-0.288 0-0.432 0.001h0.022zM281.6 393.37c-125.632-0.146-227.438-101.951-227.584-227.57v-149.108c0-14.845 12.035-26.88 26.88-26.88v0h753.152c14.845 0 26.88 12.035 26.88 26.88v0 149.094c-0.146 125.632-101.951 227.438-227.57 227.584h-0.014z" />
-<glyph unicode="&#xe993;" glyph-name="vat" horiz-adv-x="740" d="M663.808-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM425.062 372.787h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 270.387h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM165.99 54.989l-45.67 109.261c-1.044 2.188-1.694 4.744-1.791 7.441l-0.001 0.034c0 8.483 6.877 15.36 15.36 15.36v0c0.136 0.004 0.296 0.006 0.457 0.006 7.040 0 13.026-4.51 15.227-10.799l0.034-0.113 35.226-91.136 35.84 92.16c2.49 5.853 8.192 9.882 14.835 9.882 0.022 0 0.045 0 0.067 0h-0.003c0.122 0.004 0.266 0.006 0.41 0.006 8.241 0 14.924-6.668 14.95-14.902v-0.002c-0.11-2.49-0.702-4.815-1.685-6.922l0.047 0.112-46.080-110.234c-2.521-7.211-9.266-12.291-17.197-12.291-0.11 0-0.22 0.001-0.33 0.003h-2.031c-0.155-0.005-0.336-0.007-0.519-0.007-7.876 0-14.581 5.009-17.105 12.015l-0.040 0.127zM252.518 64.87l49.101 110.848c2.853 7.251 9.795 12.289 17.913 12.289 0.074 0 0.149 0 0.223-0.001h1.781c0.055 0.001 0.119 0.001 0.183 0.001 8.072 0 14.964-5.048 17.693-12.159l0.044-0.13 49.101-110.848c0.939-1.817 1.533-3.951 1.637-6.213l0.001-0.034c0.001-0.061 0.001-0.133 0.001-0.205 0-8.115-6.579-14.694-14.694-14.694 0 0-0.001 0-0.001 0v0c-6.869 0.007-12.71 4.406-14.865 10.539l-0.034 0.11-9.472 22.17h-61.952l-9.882-23.142c-2.322-5.718-7.834-9.677-14.27-9.677-0.005 0-0.010 0-0.016 0h0.001c0 0-0.001 0-0.001 0-7.889 0-14.285 6.396-14.285 14.285 0 0.072 0.001 0.144 0.002 0.216v-0.011c0.137 2.451 0.784 4.722 1.836 6.749l-0.044-0.093zM339.558 103.885l-19.558 46.49-19.507-46.49zM432.077 157.235h-29.798c-7.889 0-14.285 6.396-14.285 14.285s6.396 14.285 14.285 14.285h90.624c7.889 0 14.285-6.396 14.285-14.285s-6.396-14.285-14.285-14.285h-29.798v-97.997c0-8.568-6.946-15.514-15.514-15.514s-15.514 6.946-15.514 15.514v0zM181.862 526.438c-5.705 0.036-10.954 1.955-15.166 5.165l0.062-0.045c-6.418 4.709-10.538 12.223-10.538 20.7 0 5.696 1.86 10.957 5.006 15.21l-0.049-0.070 145.050 198.4c4.713 6.401 12.219 10.508 20.685 10.508 14.145 0 25.612-11.467 25.612-25.612 0-5.68-1.849-10.927-4.977-15.175l0.050 0.071-145.254-198.656c-4.674-6.344-12.093-10.432-20.47-10.496h-0.010zM223.488 724.838c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213zM377.088 571.187c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213z" />
-<glyph unicode="&#xe994;" glyph-name="copy-file" d="M919.552 744.96l-179.2 179.2c-6.144 6.144-15.36 10.24-24.576 10.24h-409.6c-19.456 0-34.816-15.36-34.816-34.816v-141.312h-142.336c-19.456 0-34.816-15.36-34.816-34.816v-726.016c0-19.456 15.36-34.816 34.816-34.816h588.8c19.456 0 34.816 15.36 34.816 34.816v140.288h141.312c19.456 0 34.816 15.36 34.816 34.816v546.816c1.024 10.24-2.048 18.432-9.216 25.6zM854.016 711.168h-147.456v146.432l147.456-146.432zM683.008 32.256h-518.144v655.36h105.472v-514.048c0-19.456 15.36-34.816 34.816-34.816h377.856v-106.496zM340.992 208.384v655.36h294.912v-188.416c0-19.456 15.36-34.816 34.816-34.816h188.416v-432.128h-518.144z" />
-<glyph unicode="&#xe995;" glyph-name="user-black" d="M511.875 927.875c-141.006 0-255.812-114.806-255.812-255.812s114.807-256.062 255.812-256.062c141.006 0 256.062 115.056 256.062 256.062s-115.057 255.812-256.062 255.812zM736.125 432.938c-0.26 0.008-0.567 0.012-0.874 0.012-7.766 0-14.886-2.766-20.428-7.367l0.053 0.043c-55.556-45.905-126.298-73.5-203-73.5-76.676 0-147.316 27.568-202.813 73.438-5.488 4.552-12.603 7.314-20.363 7.314-4.808 0-9.368-1.060-13.459-2.959l0.198 0.082c-29.588-13.464-58.144-29.734-84.75-49.5-92.963-69.063-158.684-180.911-158.687-316.5-0.002-52.679 43.423-96 96.062-96h767.937c52.639 0 96.002 43.359 96 96-0.004 135.589-65.725 247.437-158.687 316.5-26.609 19.768-55.166 36.075-84.813 49.562-3.628 1.697-7.863 2.743-12.328 2.874l-0.047 0.001z" />
+<glyph unicode="&#xe900;" glyph-name="item-product" horiz-adv-x="941" d="M883.2 838.4v-6.4c0-3.535-2.865-6.4-6.4-6.4v0c0-3.535-2.865-6.4-6.4-6.4v0c-3.535 0-6.4-2.865-6.4-6.4v0l-371.2-211.2h-51.2l-307.2 76.8h-25.6c-6.4 0-6.4-6.4-12.8-6.4l-12.8-12.8c0-6.4 0-6.4-6.4-12.8v-12.8l6.4-12.8 12.8-12.8 294.4-166.4 6.4-6.4c6.4 0 6.4-6.4 12.8-6.4 0-6.4 6.4-6.4 6.4-12.8s6.4-6.4 6.4-12.8v-448l-6.4-6.4s0-6.4 0-12.8h-25.6l-364.8 211.2c-6.4 0-6.4 6.4-12.8 12.8s-6.4 6.4-6.4 12.8 0 6.4-6.4 12.8v460.8c0 12.8 6.4 19.2 6.4 32s12.8 19.2 19.2 32 25.6 19.2 38.4 25.6v0l358.4 211.2 12.8 6.4h6.4l6.4 6.4h38.4l377.6-96h6.4c3.535 0 6.4-2.865 6.4-6.4v0c0-3.535 2.865-6.4 6.4-6.4v0c0-6.4 0-12.8 0-12.8zM902.4 684.8c6.4-6.4 12.8-6.4 19.2-12.8l12.8-12.8c0-6.4 6.4-12.8 6.4-19.2v-454.4c0-6.4 0-6.4-6.4-12.8 0-6.4-6.4-6.4-6.4-12.8l-12.8-12.8-364.8-211.2h-12.8c-3.535 0-6.4 2.865-6.4 6.4v0l-19.2 6.4v448c0 6.4 0 6.4 6.4 12.8 0 6.4 6.4 6.4 6.4 12.8s6.4 6.4 12.8 6.4l300.8 172.8c3.535 0 6.4 2.865 6.4 6.4v0c0 3.535 2.865 6.4 6.4 6.4v0 12.8c0 3.535-2.865 6.4-6.4 6.4v0c-12.8 6.4-19.2 6.4-32 12.8s-19.2 12.8-32 19.2c-17.434 8.448-32.108 16.968-46.096 26.426l1.296-0.826 70.4 38.4z" />
+<glyph unicode="&#xe901;" d="M19.922 956.016h984.156c8.802 0 15.938-7.136 15.938-15.938v-984.156c0-8.802-7.136-15.938-15.938-15.938h-984.156c-8.802 0-15.938 7.136-15.938 15.938v984.156c0 8.802 7.136 15.938 15.938 15.938z" />
+<glyph unicode="&#xe902;" glyph-name="windows" d="M896 806.375l-352-46.875v-279.5h352v326.375zM480 750.875l-352-46.875v-224h352v270.875zM128 416v-224l352-46.875v270.875h-352zM544 416v-279.5l352-46.875v326.375h-352z" />
+<glyph unicode="&#xe903;" glyph-name="mac" d="M682.88 878.080c-95.72-32.337-170.316-64.674-159.68-204.8 95.72 21.558 180.951 75.453 159.68 204.8zM378.88 683.52c-92.16 0-225.28-81.92-225.28-235.519 0-215.041 143.36-430.081 225.28-430.081 61.44 0 112.64 40.96 153.6 40.96s81.92-40.96 143.36-40.96c81.92 0 174.080 122.88 194.56 235.52-71.68 51.2-122.88 81.92-122.88 174.081 0 61.44 51.2 122.88 112.64 174.080-30.72 40.96-92.16 81.92-153.6 81.92s-127.509-48.61-174.080-51.2c-40.96 0-92.16 51.2-153.6 51.2z" />
+<glyph unicode="&#xe904;" glyph-name="android" d="M738.611 644.086c0 47.913-17.531 92.068-46.95 127.304l40.356 70.574c2.898 5.059 1.096 11.438-3.881 14.336-5.079 2.908-11.52 1.157-14.367-3.912l-37.069-64.819c-41.359 40.335-99.953 65.495-164.884 65.495-65.004 0-123.638-25.211-164.956-65.597l-37.151 64.901c-2.867 5.069-9.339 6.82-14.316 3.922-5.069-2.888-6.83-9.288-3.922-14.346l40.407-70.666c-29.379-35.215-46.828-79.329-46.828-127.191h453.56zM598.63 755.302c10.045 0 18.166-8.12 18.166-18.156 0-10.025-8.12-18.156-18.166-18.156-10.025 0-18.145 8.141-18.145 18.156 0 10.025 8.11 18.156 18.145 18.156zM425.206 755.302c10.045 0 18.176-8.12 18.176-18.156 0-10.025-8.12-18.156-18.176-18.156-10.025 0-18.145 8.141-18.145 18.156 0 10.025 8.131 18.156 18.145 18.156zM773.816 314.9h0.195c1.946-24.289 23.972-43.438 50.821-43.438 26.829 0 48.855 19.149 50.831 43.438h0.143v226.591h-0.082c0.082 0.87 0.082 1.741 0.082 2.611 0 25.938-22.825 46.981-50.975 46.981s-50.985-21.043-50.985-46.981c0-0.85 0.061-1.731 0.102-2.611h-0.102v-226.591h-0.031zM148.224 314.778h0.123c1.976-24.3 23.972-43.448 50.821-43.448 26.89 0 48.845 19.149 50.842 43.448h0.123v226.601h-0.031c0.072 0.87 0.072 1.761 0.072 2.601 0 25.969-22.825 47.012-50.964 47.012-28.15 0-50.985-21.064-50.985-47.012 0-0.84 0-1.731 0.051-2.601h-0.051v-226.601zM396.851 359.608c-4.444 0-8.684-1.403-12.278-4.045-4.454-3.277-7.352-8.079-8.182-13.578-0.829-5.458 0.522-10.916 3.82-15.38 3.881-5.284 10.117-8.417 16.691-8.417 4.444 0 8.684 1.403 12.278 4.045 4.465 3.297 7.352 8.1 8.192 13.578 0.819 5.499-0.522 10.957-3.809 15.401-3.912 5.274-10.148 8.397-16.712 8.397zM627.139 502.723c4.444 0 8.684 1.393 12.278 4.045 4.454 3.287 7.352 8.11 8.182 13.578 0.819 5.468-0.522 10.936-3.82 15.38-3.871 5.284-10.107 8.428-16.681 8.428-4.444 0-8.694-1.403-12.278-4.045-4.465-3.277-7.363-8.11-8.192-13.578s0.522-10.936 3.809-15.391c3.891-5.274 10.138-8.417 16.701-8.417zM512.573 558.879c11.407 0.317 20.449 9.871 20.132 21.289-0.307 11.305-9.4 20.142-20.695 20.142l-0.594-0.010c-11.428-0.317-20.449-9.861-20.132-21.279 0.317-11.295 9.4-20.142 20.695-20.152l0.594 0.010zM409.17 540.109c-3.594 2.652-7.834 4.045-12.278 4.045-6.564 0-12.81-3.154-16.691-8.428-3.287-4.454-4.649-9.912-3.809-15.391 0.819-5.468 3.727-10.291 8.182-13.578 3.584-2.642 7.834-4.045 12.278-4.045 6.574 0 12.8 3.144 16.701 8.417 3.277 4.454 4.628 9.923 3.809 15.391-0.84 5.489-3.738 10.312-8.192 13.588zM575.58 477.932c-1.638 2.222-3.4 4.362-5.274 6.4-13.578 14.909-32.748 24.566-54.18 25.692-1.372 0.072-2.744 0.215-4.137 0.215s-2.755-0.143-4.137-0.215c-21.432-1.126-40.602-10.783-54.18-25.692-1.864-2.038-3.625-4.178-5.253-6.4-9.667-13.117-15.442-29.235-15.442-46.735s5.775-33.618 15.442-46.735c1.638-2.222 3.389-4.383 5.263-6.4 13.578-14.92 32.748-24.576 54.18-25.702 1.382-0.061 2.755-0.205 4.147-0.205s2.765 0.143 4.137 0.205c21.422 1.116 40.591 10.783 54.18 25.702 1.874 2.017 3.625 4.178 5.263 6.4 9.656 13.097 15.442 29.235 15.442 46.735s-5.796 33.628-15.452 46.735zM741.048 616.1c0 3.564-2.877 6.502-6.492 6.502h-445.471c-3.615 0-6.502-2.939-6.502-6.502v-338.237c0-0.952 0.195-1.812 0.532-2.621-0.338-2.273-0.522-4.577-0.522-6.902 0-23.255 18.278-42.537 42.322-46.295v-0.707h20.019v-139.592h0.174c1.987-24.3 23.972-43.428 50.842-43.428 26.839 0 48.855 19.128 50.811 43.428h0.164v139.571h129.843v-139.581h0.195c1.976-24.32 23.941-43.438 50.801-43.438 26.839 0 48.886 19.118 50.821 43.438h0.184v139.581h19.845v0.686c24.105 3.697 42.455 23.020 42.455 46.316 0 2.324-0.133 4.628-0.512 6.912 0.338 0.799 0.512 1.638 0.512 2.601v338.268zM650.455 321.69c-5.437-7.404-14.193-11.776-23.357-11.776-6.226 0-12.175 1.935-17.203 5.642-6.236 4.598-10.301 11.356-11.459 18.995-0.993 6.564 0.266 13.097 3.523 18.739l-18.678 14.602c-16.62-18.719-40.468-30.863-67.133-32.020v-24.463c13.834-1.935 24.453-13.455 24.852-27.884 0.44-15.985-12.196-29.358-28.191-29.798h-0.829c-15.8 0-28.539 12.38-28.969 28.18-0.41 14.879 10.486 27.443 24.852 29.522v24.443c-26.665 1.157-50.524 13.302-67.164 32.020l-18.657-14.602c3.256-5.642 4.506-12.175 3.512-18.739-1.147-7.639-5.222-14.397-11.459-18.995-5.028-3.697-10.977-5.663-17.193-5.663-9.185 0-17.92 4.403-23.368 11.796-4.598 6.236-6.492 13.875-5.335 21.555 1.157 7.639 5.233 14.397 11.469 18.995 5.028 3.697 10.957 5.663 17.193 5.663 7.506 0 14.684-2.98 20.040-8.1l18.565 14.5c-11.837 15.882-18.852 35.564-18.852 56.852s7.014 40.97 18.842 56.852l-18.555 14.5c-5.356-5.12-12.534-8.1-20.050-8.1-6.226 0-12.165 1.956-17.183 5.663-6.246 4.598-10.312 11.356-11.469 19.005-1.157 7.67 0.748 15.319 5.335 21.545 5.437 7.393 14.172 11.796 23.368 11.796 6.216 0 12.165-1.956 17.183-5.663 6.236-4.598 10.301-11.346 11.469-19.005 0.983-6.543-0.266-13.087-3.523-18.739l18.668-14.592c16.63 18.719 40.489 30.863 67.154 32.010v24.453c-13.834 1.935-24.443 13.466-24.842 27.873-0.451 15.985 12.186 29.358 28.17 29.798l0.829 0.010c15.821 0 28.539-12.38 28.979-28.201 0.41-14.848-10.476-27.433-24.852-29.491v-24.443c26.665-1.157 50.514-13.302 67.144-32.010l18.678 14.592c-3.256 5.652-4.516 12.186-3.523 18.739 1.157 7.67 5.222 14.418 11.459 19.005 5.018 3.697 10.967 5.663 17.203 5.663 9.175 0 17.9-4.403 23.357-11.796 4.598-6.226 6.492-13.875 5.335-21.545-1.147-7.67-5.222-14.418-11.448-19.005-5.028-3.707-10.977-5.663-17.203-5.663-7.506 0-14.694 2.99-20.040 8.1l-18.565-14.5c11.848-15.892 18.862-35.564 18.862-56.852s-7.014-40.97-18.862-56.852l18.565-14.5c5.345 5.12 12.534 8.079 20.040 8.079 6.216 0 12.165-1.935 17.203-5.642 6.226-4.618 10.301-11.356 11.459-19.016 1.147-7.639-0.737-15.299-5.345-21.535zM511.416 303.473c-11.418-0.317-20.449-9.861-20.132-21.279 0.317-11.284 9.411-20.142 20.695-20.142l0.594 0.020c11.428 0.297 20.449 9.841 20.132 21.258-0.307 11.305-9.4 20.142-20.695 20.163l-0.594-0.020zM639.416 355.594c-3.594 2.642-7.844 4.045-12.278 4.045-6.574 0-12.81-3.144-16.701-8.417-3.287-4.444-4.639-9.902-3.809-15.38 0.829-5.499 3.727-10.301 8.192-13.599 3.604-2.642 7.844-4.024 12.278-4.024 6.574 0 12.81 3.144 16.691 8.417 3.287 4.444 4.628 9.902 3.809 15.38s-3.727 10.271-8.182 13.578z" />
+<glyph unicode="&#xe905;" glyph-name="branch-icon" d="M796.467 220.467h227.533v-284.467h-284.467v170.667l-227.533 238.933-227.533-238.933v-170.667h-284.467v284.467h227.533l227.533 227.533v182.067c-34.763 12.699-63.723 34.334-85.005 62.153l-0.328 0.447c-21.236 26.217-34.103 59.97-34.133 96.727v0.007c0 94.257 76.41 170.667 170.667 170.667s170.667-76.41 170.667-170.667v0c0.032-1.138 0.051-2.478 0.051-3.821 0-35.54-12.933-68.060-34.349-93.109l0.164 0.197c-21.611-28.267-50.57-49.901-84.043-62.186l-1.291-0.414v-182.067z" />
+<glyph unicode="&#xe906;" glyph-name="info" d="M870.4 88.849c-89.912-94.275-216.492-152.895-356.763-152.895-2.376 0-4.748 0.017-7.115 0.050l0.359-0.004c-2.939-0.066-6.401-0.103-9.873-0.103-137.714 0-261.698 58.783-348.23 152.625l-0.297 0.327c-91.692 88.058-148.661 211.677-148.661 348.601 0 4.646 0.066 9.277 0.196 13.892l-0.015-0.679c-0.016 1.485-0.025 3.239-0.025 4.996 0 139.475 56.776 265.689 148.478 356.791l0.027 0.027c88.751 91.164 212.659 147.718 349.776 147.718 4.833 0 9.65-0.070 14.449-0.21l-0.705 0.016c1.584 0.018 3.455 0.028 5.329 0.028 139.771 0 266.359-56.443 358.215-147.78l-0.023 0.023c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.109-141.545-60.429-269.070-153.571-361.579l-0.029-0.029zM798.72 735.881c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.128 0.012-2.461 0.019-3.796 0.019-111.434 0-211.909-46.924-282.743-122.090l-0.181-0.194c-75.725-71.739-122.855-173.006-122.88-285.281v-0.005c-0.040-2.039-0.062-4.443-0.062-6.852 0-110.162 47.279-209.281 122.653-278.173l0.29-0.261c67.293-78.2 166.386-127.415 276.974-127.415 1.627 0 3.251 0.011 4.873 0.032l-0.246-0.003c1.128-0.012 2.461-0.019 3.796-0.019 111.434 0 211.909 46.924 282.743 122.090l0.181 0.194c75.725 71.739 122.855 173.006 122.88 285.281v0.005c0.282 5.423 0.443 11.773 0.443 18.161 0 107.308-45.379 204.017-117.994 271.984l-0.209 0.193zM558.080 190.771h-102.4v305.63h102.4zM558.080 598.323h-102.4v101.922h102.4z" />
+<glyph unicode="&#xe907;" glyph-name="copy-small" horiz-adv-x="884" d="M791.296 773.803v-744.704h-744.704v-93.099h744.704c50.887 1.298 91.801 42.212 93.096 92.977l0.002 0.122v744.704zM93.099 960c-50.905-1.254-91.845-42.194-93.096-92.981l-0.002-0.118v-651.605c1.298-50.887 42.212-91.801 92.977-93.096l0.122-0.002h512c50.905 1.254 91.845 42.194 93.096 92.981l0.002 0.118v651.605c-1.254 50.905-42.194 91.845-92.981 93.096l-0.118 0.002zM93.099 215.296v651.605h512v-651.605z" />
+<glyph unicode="&#xe908;" glyph-name="envelope" horiz-adv-x="1417" d="M1416.96 960h-1416.96v-1024h1416.96zM708.693 377.173l-600.235 523.861h1200.299zM538.027 448.085l-478.464-417.536v834.987zM582.912 408.917l125.355-110.165 126.293 110.080 474.112-413.781h-1200.384zM879.957 448.085l478.464 417.536v-835.072z" />
+<glyph unicode="&#xe909;" glyph-name="tick" horiz-adv-x="1325" d="M421.547 150.016l797.867 809.984 105.387-107.008-903.253-916.992-421.547 427.947 105.387 107.008z" />
+<glyph unicode="&#xe90a;" glyph-name="branch" horiz-adv-x="1143" d="M737.28 960v-146.286h-737.28v146.286zM737.28 667.429v-146.286h-737.28v146.286zM0 228.571v146.286h491.52v-146.286zM897.682 374.857h245.76v-146.286h-245.76v-292.571h-122.88v292.571h-245.76v146.286h245.76v292.571h122.88z" />
+<glyph unicode="&#xe90b;" glyph-name="company-profile" horiz-adv-x="1138" d="M568.905 732.453h568.905v-796.453h-1137.81v1024h568.905zM227.547 732.453v113.81h-113.737v-113.81zM227.547 504.905v113.81h-113.737v-113.81zM227.547 277.358v113.81h-113.737v-113.81zM227.547 49.81v113.737h-113.737v-113.737zM455.095 732.453v113.81h-113.81v-113.81zM455.095 504.905v113.81h-113.81v-113.81zM455.095 277.358v113.81h-113.81v-113.81zM455.095 49.81v113.737h-113.81v-113.737zM1029.632 49.81v568.905h-455.095v-113.81h113.737v-113.737h-113.737v-113.81h113.737v-113.81h-113.737v-113.737zM910.19 504.905v-113.737h-113.81v113.737zM910.19 277.358v-113.81h-113.81v113.81z" />
+<glyph unicode="&#xe90c;" glyph-name="discount" d="M148.48 811.52c88.631 91.718 212.741 148.664 350.152 148.664 4.701 0 9.386-0.067 14.055-0.199l-0.687 0.015c1.513 0.016 3.299 0.026 5.088 0.026 139.984 0 266.712-56.753 358.431-148.504l0.001-0.001c91.726-87.426 148.766-210.538 148.766-346.973 0-5.819-0.104-11.614-0.31-17.383l0.024 0.836c0.016-1.521 0.026-3.319 0.026-5.118 0-139.974-56.753-266.692-148.504-358.4l-0.002-0.002c-87.426-91.726-210.538-148.766-346.973-148.766-5.819 0-11.614 0.104-17.383 0.31l0.836-0.024c-1.521-0.016-3.319-0.026-5.118-0.026-139.974 0-266.692 56.753-358.4 148.504l-0.002 0.002c-91.726 87.426-148.766 210.538-148.766 346.973 0 5.819 0.104 11.614 0.31 17.383l-0.024-0.836c-0.047 2.551-0.074 5.559-0.074 8.573 0 138.895 56.825 264.518 148.495 354.889l0.059 0.058zM225.28 161.28c72.232-75.766 173.937-122.88 286.647-122.88 0.026 0 0.051 0 0.077 0h-0.004c1.058-0.010 2.308-0.016 3.56-0.016 111.624 0 212.229 47.178 282.962 122.682l0.198 0.214c73.896 73.476 120.395 174.437 122.872 286.254l0.008 0.466c0.010 1.058 0.016 2.308 0.016 3.56 0 111.624-47.178 212.229-122.682 282.962l-0.214 0.198c-73.476 73.896-174.437 120.395-286.254 122.872l-0.466 0.008c-1.058 0.010-2.308 0.016-3.56 0.016-111.624 0-212.229-47.178-282.962-122.682l-0.198-0.214c-73.896-73.476-120.395-174.437-122.872-286.254l-0.008-0.466c0-0.022 0-0.047 0-0.073 0-112.71 47.114-214.415 122.722-286.497l0.158-0.15zM711.826 338.505c0.022-0.821 0.035-1.788 0.035-2.757 0-32.95-14.613-62.488-37.713-82.485l-0.137-0.116c-29.892-23.849-67.607-39.070-108.772-41.376l-0.503-0.023v-77.458h-47.47v75.337c-1.95-0.037-4.249-0.058-6.553-0.058-50.028 0-97.728 9.965-141.224 28.020l2.443-0.898v75.337c20.44-9.965 44.353-18.596 69.273-24.652l2.48-0.509c21.872-5.971 47.125-9.743 73.143-10.45l0.439-0.009v133.486l-29.989 11.045c-33.658 11.351-62.347 29.807-85.447 53.701l-0.057 0.059c-16.73 19.734-26.903 45.488-26.903 73.618 0 1.299 0.022 2.593 0.065 3.881l-0.005-0.187c-0.012 0.577-0.019 1.257-0.019 1.939 0 31.998 14.933 60.508 38.209 78.943l0.21 0.16c28.691 21.941 64.474 35.98 103.412 38.302l0.524 0.025v59.977h47.47v-58.88c49.904-1.551 96.916-12.157 140.029-30.221l-2.594 0.964-26.039-65.317c-32.636 13.545-70.45 22.928-109.978 26.307l-1.418 0.098v-129.975l27.136-10.386c36.54-11.855 67.942-30.702 94.055-55.133l-0.14 0.129c16.174-17.951 26.067-41.837 26.067-68.034 0-0.845-0.010-1.688-0.031-2.528l0.002 0.125zM627.566 333.166c0.009 0.337 0.014 0.735 0.014 1.133 0 13.055-5.635 24.794-14.605 32.918l-0.038 0.034c-13.661 11.186-29.689 20.107-47.15 25.884l-1.052 0.301v-113.883q62.83 9.289 62.83 53.541zM458.679 552.594c-0.016-0.456-0.024-0.991-0.024-1.529 0-12.524 4.82-23.922 12.707-32.44l-0.029 0.031c12.815-11.591 28.1-20.723 44.945-26.497l0.916-0.273v111.177c-16.766-1.591-31.806-7.92-44.060-17.614l0.175 0.133c-8.987-7.745-14.642-19.142-14.642-31.86 0-0.371 0.005-0.74 0.014-1.109l-0.001 0.054z" />
+<glyph unicode="&#xe90d;" glyph-name="financial-year" horiz-adv-x="945" d="M840.192 857.6c28.722-0.203 54.671-11.903 73.51-30.721l-0.001 0.001c19.153-18.012 31.184-43.408 31.524-71.618l0.001-0.062v-716.8c-0.331-28.274-12.364-53.673-31.472-71.631l-0.052-0.049c-18.833-18.823-44.786-30.525-73.471-30.72h-735.196c-0.856-0.027-1.863-0.043-2.873-0.043-27.865 0-52.971 11.814-70.582 30.705l-0.053 0.057c-19.16 18.007-31.193 43.406-31.524 71.619l-0.001 0.061v716.8c0.34 28.272 12.371 53.668 31.473 71.632l0.052 0.048c18.837 18.817 44.787 30.517 73.47 30.72h52.556v102.4h105.033v-102.4h420.133v102.4h105.033v-102.4zM840.192 38.4v563.2h-735.159v-563.2zM735.159 499.2v-102.4h-525.093v102.4zM577.609 294.4v-102.4h-367.616v102.4z" />
+<glyph unicode="&#xe90e;" glyph-name="refresh" d="M598.443 551.552l118.357 113.301c-53.345 50.65-125.628 81.803-205.188 81.803-133.058 0-245.765-87.135-284.171-207.457l-0.582-2.112-122.197 38.187c55.678 174.905 216.679 299.388 406.754 299.388 115.932 0 221.047-46.309 297.858-121.438l-0.078 0.076 111.253 106.432c1.931 1.936 4.602 3.134 7.552 3.134 5.868 0 10.629-4.738 10.666-10.597v-318.937h-332.693c-5.89 0.001-10.664 4.776-10.664 10.667 0 2.95 1.198 5.621 3.134 7.552v0zM419.221 362.667c5.89-0.001 10.664-4.776 10.664-10.667 0-2.94-1.189-5.602-3.113-7.531v0l-120.021-112.939c53.399-50.879 125.846-82.184 205.606-82.184 133.065 0 245.779 87.132 284.201 207.453l0.582 2.112 122.197-38.187c-55.719-174.903-216.738-299.376-406.829-299.376-116.507 0-222.093 46.758-299.016 122.532l0.053-0.052-109.995-103.509c-1.931-1.936-4.602-3.134-7.552-3.134-5.89 0-10.665 4.774-10.667 10.664v0 314.816z" />
+<glyph unicode="&#xe90f;" glyph-name="history-icon" horiz-adv-x="1189" d="M312.917 812.117c88.975 91.38 213.189 148.068 350.643 148.068 4.738 0 9.461-0.067 14.166-0.201l-0.692 0.016c1.234 0.011 2.692 0.017 4.152 0.017 140.357 0 267.522-56.477 360.011-147.945l-0.046 0.046c91.391-87.633 148.184-210.732 148.184-347.096 0-5.986-0.109-11.946-0.326-17.879l0.025 0.858c0.011-1.234 0.017-2.692 0.017-4.152 0-140.357-56.477-267.522-147.945-360.011l0.046 0.046c-87.633-91.391-210.732-148.184-347.096-148.184-5.986 0-11.946 0.109-17.879 0.326l0.858-0.025c-2.322-0.040-5.061-0.062-7.805-0.062-137.416 0-261.604 56.637-350.494 147.841l-0.101 0.104 79.616 85.333c69.296-73.626 167.388-119.476 276.188-119.476 0.913 0 1.825 0.003 2.736 0.010l-0.14-0.001c0.338-0.001 0.739-0.002 1.14-0.002 109.982 0 209.84 43.347 283.421 113.888l-0.144-0.138c73.656 70.249 119.456 169.147 119.456 278.741s-45.8 208.492-119.303 278.597l-0.153 0.145c-71.998 70.367-170.598 113.782-279.339 113.782-1.785 0-3.567-0.012-5.347-0.035l0.27 0.003c-2.593 0.064-5.647 0.101-8.71 0.101-105.834 0-201.489-43.58-270-113.774l-0.074-0.076c-70.288-70.009-113.78-166.874-113.78-273.897 0-1.718 0.011-3.434 0.034-5.146l-0.003 0.26h170.667l-227.584-227.584-227.584 227.584h170.667c-0.726 9.773-1.141 21.17-1.141 32.664 0 132.388 54.934 251.945 143.25 337.121l0.141 0.135zM620.117 675.584h85.333v-238.933l199.083-119.467-45.483-68.267-244.651 147.883v278.784z" />
+<glyph unicode="&#xe910;" glyph-name="advance-filter" d="M1001.062 936.38c-14.302 14.555-34.185 23.586-56.177 23.62h-866.994c-43.171-0.877-77.832-36.080-77.832-79.379 0-0.389 0.003-0.778 0.008-1.166l-0.001 0.059v-65.536c-0.010-0.46-0.015-1.003-0.015-1.547 0-21.734 8.651-41.447 22.697-55.884l-0.018 0.018 361.267-369.596v-370.278c0-0.089-0.001-0.194-0.001-0.299 0-31.73 18.408-59.161 45.127-72.196l0.475-0.209c9.525-4.577 20.654-7.447 32.401-7.914l0.162-0.005h1.502c19.968 0.518 37.955 8.593 51.291 21.458l-0.023-0.022 98.099 87.177c16.326 14.997 26.623 36.334 26.965 60.081l0.001 0.062v282.078l361.335 369.664c14.023 14.357 22.674 34.015 22.674 55.693 0 0.436-0.004 0.872-0.010 1.306l0.001-0.065v66.56c0.002 0.214 0.003 0.467 0.003 0.72 0 21.697-8.764 41.347-22.944 55.604l0.003-0.003zM979.012 813.5c0.005-0.217 0.008-0.472 0.008-0.728 0-9.512-3.778-18.142-9.915-24.472l0.009 0.009-374.101-382.771v-142.473l-88.064-78.78c-8.721-8.535-20.562-13.912-33.656-14.266l-0.068-0.001c-8 0.187-15.53 2.004-22.335 5.129l0.353-0.145c-9.495 4.678-17.145 11.868-22.258 20.708l-0.133 0.249v209.306l-373.555 382.635c-6.174 6.448-9.974 15.212-9.974 24.864 0 0.259 0.003 0.517 0.008 0.775l-0.001-0.039v66.355c-0.004 0.183-0.006 0.399-0.006 0.616 0 18.922 15.244 34.283 34.121 34.473h865.366c18.921-0.302 34.143-15.711 34.143-34.675 0-0.29-0.004-0.578-0.011-0.866l0.001 0.043z" />
+<glyph unicode="&#xe911;" glyph-name="integration" horiz-adv-x="1536" d="M397.509 210.076v475.848c-0.045 1.823-0.070 3.969-0.070 6.122 0 145.75 116.235 264.353 261.065 268.166l0.353 0.007h472.885c44.903-1.091 80.886-37.751 80.886-82.814 0-0.703-0.009-1.403-0.026-2.101l0.002 0.104v-854.485c0.014-0.563 0.022-1.226 0.022-1.891 0-45.085-35.97-81.769-80.777-82.919l-0.107-0.002h-472.995c-145.132 3.885-261.302 122.461-261.302 268.171 0 2.038 0.023 4.071 0.068 6.098l-0.005-0.302zM1050.991 790.376h-392.133c-55.39-1.397-99.758-46.63-99.758-102.227 0-0.782 0.009-1.563 0.026-2.341l-0.002 0.116v-475.848c-0.015-0.663-0.024-1.444-0.024-2.228 0-55.618 44.356-100.877 99.624-102.331l0.135-0.003h392.133zM0 423.697c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h323.34c45.007-2.361 80.606-39.429 80.606-84.812s-35.6-82.452-80.397-84.803l-0.209-0.009h-323.34c-44.903 1.091-80.886 37.751-80.886 82.814 0 0.703 0.009 1.403 0.026 2.101l-0.002-0.104zM1131.853 678.134c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h242.587c45.007-2.361 80.606-39.429 80.606-84.812s-35.6-82.452-80.397-84.803l-0.209-0.009h-242.587c-44.903 1.091-80.886 37.751-80.886 82.814 0 0.703 0.009 1.403 0.026 2.101l-0.002-0.104zM1131.853 169.371c-0.015 0.595-0.024 1.295-0.024 1.998 0 45.064 35.984 81.723 80.785 82.812l0.101 0.002h242.587c44.571-2.864 79.637-39.715 79.637-84.757s-35.066-81.894-79.388-84.744l-0.249-0.013h-242.587c-44.902 1.093-80.884 37.751-80.884 82.814 0 0.664 0.008 1.326 0.023 1.986l-0.002-0.098z" />
+<glyph unicode="&#xe912;" glyph-name="invoice-managment" horiz-adv-x="1061" d="M1060.498 708.023c-0.737 3.026-1.766 5.682-3.089 8.157l0.090-0.185c-1.346 2.548-2.953 4.738-4.833 6.661l0.005-0.005-228.425 229.157c-2.138 1.843-4.535 3.494-7.102 4.87l-0.212 0.104c-3.784 1.98-8.257 3.164-13.002 3.218h-427.025c-44.215-0.29-79.945-36.2-79.945-80.456 0-0.001 0-0.001 0-0.002v0-73.801c-4.564 10.422-14.743 17.594-26.61 17.7h-55.31c-40.238-0.208-72.777-32.875-72.777-73.142 0 0 0-0.001 0-0.001v0-741.157c0 0 0-0.001 0-0.001 0-40.267 32.539-72.934 72.757-73.142h55.389c16.158 0 29.257 13.099 29.257 29.257s-13.099 29.257-29.257 29.257h-55.369c-8.139 0.284-14.629 6.95-14.629 15.132 0 0.003 0 0.006 0 0.009v0 740.645c0.236 7.982 6.646 14.392 14.606 14.628l0.022 0.001h55.369c11.865 0.093 22.040 7.235 26.55 17.44l0.074 0.187v-766.098c0-0.001 0-0.001 0-0.002 0-44.23 35.689-80.123 79.84-80.455h604.558c44.215 0.29 79.945 36.2 79.945 80.456 0 0.001 0 0.001 0 0.002v0 686.226c-0.092 1.937-0.407 3.763-0.919 5.504l0.042-0.165zM858.551 672.914h144.823v-656.457c0-0.009 0-0.020 0-0.031 0-11.707-9.168-21.273-20.716-21.909l-0.056-0.002h-605.989c-12.119 0-21.943 9.824-21.943 21.943v0 863.086c0 12.119 9.824 21.943 21.943 21.943v0h398.336v-144.603c0-0.022 0-0.048 0-0.073 0-46.257 37.436-83.77 83.664-83.895h0.012zM833.243 756.37v104.082l128.878-129.243h-103.717c-13.865 0.042-25.088 11.291-25.088 25.161 0 0 0 0 0 0v0zM408.942 505.344c0.243-16.060 13.198-29.014 29.234-29.257h458.629c16.158 0 29.257 13.099 29.257 29.257v0c0.003 0.147 0.004 0.32 0.004 0.493 0 7.982-3.245 15.206-8.488 20.425l-0.001 0.001c-5.314 5.419-12.712 8.778-20.894 8.778-0.060 0-0.12 0-0.18-0.001h-458.304c-16.211-0.247-29.257-13.446-29.257-29.693 0-0.001 0-0.002 0-0.003v0zM926.354 372.882c0 16.158-13.099 29.257-29.257 29.257v0h-458.898c-16.36 0-29.623-13.263-29.623-29.623s13.263-29.623 29.623-29.623v0h458.606c0.090-0.001 0.196-0.002 0.302-0.002 16.158 0 29.257 13.099 29.257 29.257 0 0.258-0.003 0.515-0.010 0.771l0.001-0.038zM64.512 596.699h44.251c16.36 0 29.623 13.263 29.623 29.623s-13.263 29.623-29.623 29.623v0h-44.251c-35.596-0.083-64.429-28.916-64.512-64.504v-590.856c0.083-35.61 28.908-64.461 64.5-64.585h44.263c16.32 0 29.55 13.23 29.55 29.55s-13.23 29.55-29.55 29.55v0h-43.886c-2.982 0.116-5.37 2.504-5.485 5.475v590.859c0.038 2.842 2.291 5.147 5.109 5.266h0.011zM878.885 284.087v20.846c0 10.786-8.743 19.529-19.529 19.529s-19.529-8.743-19.529-19.529v0-18.213c-11.498-2.043-21.501-7.387-29.266-15.003l0.009 0.009c-12.064-11.937-19.534-28.496-19.534-46.8 0-0.287 0.002-0.574 0.005-0.86v0.044c1.463-22.601 13.312-51.712 65.024-63.927 38.693-9.289 38.693-19.529 38.693-33.719-0.030-4.799-2.235-9.076-5.678-11.901l-0.027-0.022c-6.796-6.142-15.693-10.074-25.495-10.601l-0.105-0.004c-0.817-0.064-1.77-0.101-2.73-0.101-19.457 0-35.401 15.045-36.832 34.136l-0.007 0.123v1.609c0 10.786-8.743 19.529-19.529 19.529s-19.529-8.743-19.529-19.529v0c-0.016-0.561-0.025-1.221-0.025-1.883 0-33.649 23.281-61.861 54.614-69.406l0.487-0.099v-19.968c0-10.786 8.743-19.529 19.529-19.529s19.529 8.743 19.529 19.529v18.651c14.491 3.388 27.051 10.242 37.21 19.651l-0.053-0.049c10.97 9.935 17.869 24.191 17.993 40.060v0.022c0.585 48.64-32.768 63.122-68.462 71.826-34.158 8.119-34.67 21.943-35.767 28.453 0.431 6.7 3.314 12.655 7.751 17.040l0.003 0.003c3.403 3.482 8.147 5.641 13.395 5.641 1.029 0 2.039-0.083 3.024-0.243l-0.108 0.014c33.426-2.779 36.571-20.846 37.961-26.77 1.123-9.822 9.389-17.381 19.419-17.381 10.791 0 19.539 8.748 19.539 19.539 0 0.76-0.043 1.51-0.128 2.248l0.008-0.090c-0.101 1.037-0.282 1.982-0.54 2.894l0.028-0.115c-4.935 26.83-25.013 47.912-50.879 54.248l-0.468 0.097z" />
+<glyph unicode="&#xe913;" glyph-name="linked-accounts" horiz-adv-x="1039" d="M314.807-64c-0.462-0.002-1.007-0.004-1.554-0.004-172.894 0-313.051 140.158-313.051 313.051 0 2.65 0.033 5.293 0.098 7.928l-0.008-0.39c1.769 90.489 38.994 171.953 98.308 231.355l-0.004-0.004c13.883 14.56 33.429 23.613 55.090 23.613 42.012 0 76.069-34.057 76.069-76.069 0-21.352-8.797-40.649-22.964-54.464l-0.016-0.015c-32.641-32.558-53.191-77.224-54.341-126.686l-0.004-0.216c-0.039-1.326-0.061-2.886-0.061-4.452 0-44.942 18.283-85.613 47.816-114.983l0.007-0.007c29.999-28.738 70.779-46.431 115.692-46.431 1.55 0 3.095 0.021 4.635 0.063l-0.227-0.005c49.666 1.665 94.114 22.709 126.277 55.766l0.041 0.042c13.692 13.353 32.429 21.589 53.088 21.589 42.012 0 76.069-34.057 76.069-76.069 0-20.351-7.991-38.835-21.007-52.485l0.029 0.030c-58.746-60.031-139.729-98.098-229.599-100.852l-0.509-0.012zM886.126 385.682c-41.864 0.194-75.726 34.177-75.726 76.068 0 20.703 8.27 39.474 21.687 53.189l-0.013-0.014c32.628 32.566 53.175 77.226 54.341 126.683l0.004 0.22c0.037 1.294 0.058 2.818 0.058 4.346 0 44.998-18.279 85.726-47.816 115.165l-0.004 0.004c-30.272 28.737-71.288 46.412-116.433 46.412-1.289 0-2.576-0.014-3.858-0.043l0.191 0.003c-49.687-1.678-94.154-22.717-126.352-55.768l-0.039-0.040c-13.933-14.991-33.761-24.34-55.772-24.34-42.012 0-76.069 34.057-76.069 76.069 0 21.72 9.103 41.314 23.703 55.175l0.033 0.031c58.745 60.046 139.722 98.134 229.592 100.924l0.516 0.013c3.363 0.129 7.313 0.203 11.279 0.203 172.934 0 313.125-140.191 313.125-313.125 0-2.618-0.032-5.228-0.096-7.83l0.007 0.386c-1.769-90.489-38.994-171.953-98.308-231.355l0.004 0.004c-13.709-13.824-32.709-22.382-53.708-22.382-0.121 0-0.242 0-0.363 0.001h0.019zM401.701 250.295c-41.864 0.194-75.726 34.177-75.726 76.068 0 20.703 8.27 39.474 21.687 53.189l-0.013-0.014 213.87 216.283c13.883 14.56 33.429 23.613 55.090 23.613 42.012 0 76.069-34.057 76.069-76.069 0-21.352-8.797-40.649-22.964-54.464l-0.016-0.015-213.943-216.357c-13.695-13.737-32.637-22.237-53.564-22.237-0.172 0-0.344 0.001-0.515 0.002h0.026z" />
+<glyph unicode="&#xe914;" glyph-name="manage-user" horiz-adv-x="833" d="M728.942 664.942c56.939-1.431 102.724-47.217 104.153-104.021l0.003-0.135v-520.704c-1.431-56.939-47.217-102.724-104.021-104.153l-0.135-0.003h-624.786c-56.939 1.431-102.724 47.217-104.153 104.021l-0.003 0.135v520.704c1.431 56.939 47.217 102.724 104.021 104.153l0.135 0.003h52.078v104.155c0 73.143 26.039 65.829 78.117 112.786 47.217 46.123 111.046 75.422 181.691 78.101l0.508 0.015c0.947 0.013 2.065 0.021 3.185 0.021 70.675 0 134.341-30.012 178.948-77.987l0.139-0.151c46.885-52.078 78.117-45.129 78.117-112.786v-104.155zM728.942 40.155v520.704h-624.786v-520.704zM531.090 814.226c-29.467 28.977-69.915 46.867-114.542 46.867s-85.075-17.89-114.564-46.889l0.022 0.022c-31.232-31.232-46.885 1.755-41.691-45.129v-104.155h317.513v104.155c0 41.618-15.506 13.897-46.738 45.129zM489.472 227.547c-18.038-17.214-42.524-27.808-69.485-27.808-55.625 0-100.718 45.093-100.718 100.718s45.093 100.718 100.718 100.718c55.543 0 100.585-44.96 100.717-100.472v-0.013c0.175-2.049 0.275-4.434 0.275-6.843 0-26.653-12.216-50.453-31.355-66.106l-0.152-0.121z" />
+<glyph unicode="&#xe915;" glyph-name="subscription" horiz-adv-x="878" d="M638.83 717.458l-250.002-242.542v210.213c-80.040-12.113-149.303-51.181-199.692-107.493l-0.281-0.319c-48.32-52.030-77.971-121.982-77.971-198.859 0-3.993 0.080-7.967 0.238-11.921l-0.018 0.567c-0.003-0.544-0.005-1.188-0.005-1.833 0-79.887 29.449-152.897 78.083-208.764l-0.327 0.384c49.122-58.682 119.182-98.422 198.549-107.678l1.424-0.135v-107.813c-110.898 11.099-207.98 62.786-277.612 139.771l-0.33 0.371c-68.825 71.159-111.241 168.234-111.241 275.215 0 3.66 0.050 7.308 0.148 10.943l-0.011-0.536c1.737 221.851 170.781 403.682 387.080 425.615l1.82 0.149v167.205zM494.373 49.152c52.456 9.645 99.154 28.456 140.55 54.847l-1.579-0.941 83.456-80.823c-59.955-46.472-134.013-77.542-214.792-86.076l-1.857-0.159v113.152zM877.641 421.010h-111.104c-10.094 51.070-29.461 96.322-56.409 136.010l0.82-1.281 83.31 75.41c44.203-58.51 74.113-130.137 83.262-208.113l0.194-2.027zM711.022 178.469c29.392 37.228 49.325 83.197 55.459 133.428l0.129 1.301h111.104c-11.474-80.43-43.111-151.899-89.593-211.172l0.725 0.959z" />
+<glyph unicode="&#xe916;" glyph-name="tags" d="M877.714 960c0.356 0.003 0.776 0.004 1.197 0.004 38.227 0 73.453-12.845 101.599-34.454l-0.396 0.292c25.585-17.859 42.479-46.645 43.879-79.443l0.007-0.209v-910.19l-512 170.642-512-170.642v910.19c1.478 32.989 18.35 61.748 43.558 79.435l0.328 0.218c27.741 21.317 62.96 34.162 101.179 34.162 0.429 0 0.859-0.002 1.287-0.005h-0.066zM935.497 106.642v739.547h-837.047v-739.547l413.477 125.147z" />
+<glyph unicode="&#xe917;" glyph-name="taxes" d="M148.543 84.543c-91.719 87.339-148.76 210.375-148.76 346.733 0 5.868 0.106 11.712 0.315 17.529l-0.024-0.842c-0.048 2.574-0.075 5.61-0.075 8.652 0 138.874 56.853 264.469 148.555 354.78l0.063 0.062c88.567 91.71 212.62 148.655 349.973 148.655 4.729 0 9.442-0.067 14.138-0.202l-0.69 0.016c1.466 0.015 3.198 0.024 4.933 0.024 140.104 0 266.948-56.773 358.782-148.568l-0.001 0.001c91.593-87.461 148.537-210.529 148.537-346.897 0-5.837-0.104-11.649-0.311-17.435l0.024 0.838c0.016-1.502 0.025-3.276 0.025-5.053 0-139.921-56.657-266.61-148.282-358.375l0.007 0.007c-87.524-91.723-210.716-148.753-347.228-148.753-5.797 0-11.571 0.103-17.318 0.307l0.833-0.023c-1.571-0.018-3.427-0.028-5.286-0.028-139.925 0-266.587 56.783-358.201 148.562l-0.008 0.008zM225.264 734.663c-73.841-73.502-120.322-174.436-122.863-286.221l-0.009-0.478c0.025-112.72 47.128-214.434 122.715-286.552l0.156-0.148c72.099-75.755 173.688-122.871 286.281-122.871 0.147 0 0.294 0 0.441 0h-0.023c1.152-0.012 2.512-0.019 3.874-0.019 111.518 0 212.017 47.181 282.623 122.672l0.203 0.219c73.959 73.427 120.477 174.408 122.864 286.25l0.008 0.449c0.010 1.058 0.016 2.308 0.016 3.559 0 111.616-47.175 212.213-122.674 282.942l-0.214 0.198c-73.471 73.89-174.424 120.387-286.233 122.863l-0.466 0.008c-1.058 0.010-2.308 0.016-3.559 0.016-111.616 0-212.213-47.175-282.942-122.674l-0.198-0.214zM589.562 220.432c-18.103 27.385-28.882 60.992-28.882 97.117 0 3.966 0.13 7.902 0.386 11.803l-0.028-0.531q0 145.398 109.706 145.324c1.634 0.098 3.545 0.154 5.469 0.154 31.276 0 59.099-14.783 76.864-37.743l0.166-0.223c18.238-27.063 29.111-60.402 29.111-96.281 0-3.977-0.134-7.923-0.397-11.834l0.029 0.53c0.308-3.909 0.483-8.463 0.483-13.059 0-35.956-10.744-69.403-29.197-97.305l0.409 0.658c-18.138-22.5-45.699-36.774-76.593-36.774-2.232 0-4.448 0.075-6.643 0.221l0.298-0.016c-1.399-0.073-3.038-0.115-4.687-0.115-31.116 0-58.765 14.844-76.251 37.838l-0.172 0.236zM648.073 388.21c-4.751-15.505-7.487-33.327-7.487-51.788 0-2.802 0.063-5.588 0.188-8.359l-0.014 0.394c-0.105-2.342-0.164-5.088-0.164-7.847 0-18.679 2.732-36.72 7.818-53.745l-0.34 1.327c4.608-13.238 12.507-19.893 22.892-19.893 20.405 0 30.645 26.915 30.645 80.451s-10.239 79.281-30.645 79.281c-10.239-0.366-18.065-6.875-22.746-19.82zM340.894 188.617l257.664 464.278h76.283l-257.737-464.278zM264.1 405.617c-18.256 27.366-29.131 61.009-29.131 97.193 0 4.12 0.141 8.207 0.418 12.256l-0.030-0.547q0 144.959 109.706 145.032c1.59 0.092 3.45 0.145 5.323 0.145 31.272 0 59.116-14.68 77.015-37.524l0.161-0.214c18.259-27.25 29.14-60.782 29.14-96.854 0-3.75-0.118-7.472-0.349-11.163l0.025 0.505c0.267-3.67 0.42-7.952 0.42-12.269 0-36.21-10.714-69.917-29.145-98.125l0.422 0.688c-18.287-22.497-45.96-36.754-76.962-36.754-2.128 0-4.241 0.067-6.336 0.2l0.286-0.014c-1.416-0.075-3.075-0.118-4.743-0.118-30.859 0-58.299 14.633-75.762 37.339l-0.166 0.225zM322.61 573.833c-4.729-15.746-7.45-33.841-7.45-52.571 0-2.526 0.049-5.040 0.148-7.542l-0.011 0.36c-0.079-2.077-0.125-4.515-0.125-6.964 0-18.983 2.717-37.331 7.783-54.678l-0.344 1.376c4.827-13.238 12.507-19.747 23.185-19.747 20.113 0 30.352 26.695 30.352 80.013s-10.239 79.501-30.352 79.501c-10.459-0.293-18.138-6.656-22.965-19.967z" />
+<glyph unicode="&#xe918;" glyph-name="trigger" d="M926.72 494.153h97.28v-92.233h-97.28c-22.98-194.415-176.059-346.92-368.764-368.828l-1.924-0.178v-96.914h-92.672v96.841c-194.641 22.059-347.735 174.577-370.498 367.028l-0.19 1.978h-92.672v92.233h97.28c22.953 194.428 176.047 346.947 368.766 368.828l1.922 0.177v96.914h92.672v-96.841c98.794-9.523 185.806-53.613 250.127-119.856l0.095-0.098c65.219-64.204 108.039-150.992 115.77-247.674l0.089-1.377zM282.697 217.381c55.452-56.988 132.886-92.343 218.577-92.343 2.871 0 5.734 0.040 8.586 0.119l-0.42-0.009c176.21 0.21 318.974 143.103 318.974 319.342 0 176.368-142.974 319.342-319.342 319.342s-319.342-142.974-319.342-319.342c0-0.386 0.001-0.772 0.002-1.157v0.060c-0.067-2.368-0.105-5.156-0.105-7.952 0-85.651 35.638-162.978 92.894-217.962l0.102-0.098zM379.977 577.17c31.791 30.134 74.842 48.666 122.222 48.666 98.202 0 177.81-79.608 177.81-177.81s-79.608-177.81-177.81-177.81c-98.193 0-177.796 79.594-177.81 177.783v0.002c1.801 50.501 22.683 95.802 55.611 129.193l-0.022-0.022z" />
+<glyph unicode="&#xe919;" glyph-name="user" d="M294.4 358.4c63.416 16.263 136.218 25.598 211.2 25.598s147.784-9.335 217.306-26.905l-6.106 1.308c80.152-21.079 150.457-51.771 214.558-91.518l-3.322 1.918c53.772-26.342 91.203-78.697 96-140.213l0.037-0.587v-192h-1024v192c6.541 61.516 43.353 113.18 95.054 140.33l0.983 0.47c56.363 40.735 122.739 71.719 194.496 88.836l3.794 0.764zM761.563 211.163c-77.659 31.498-167.687 50.208-261.963 51.197l-0.4 0.003c-94.761-1.655-184.695-20.299-267.543-53.002l5.18 1.802c-89.6-32.037-128-64-128-83.163v-70.437h780.8v70.437c-0.073 19.237-38.473 51.2-128.073 83.237zM320 883.2c44.307 42.253 104.438 68.253 170.642 68.253 136.659 0 247.442-110.784 247.442-247.442s-110.784-247.442-247.442-247.442c-136.655 0-247.436 110.778-247.442 247.431v0c-0.007 0.666-0.010 1.453-0.010 2.241 0 69.76 29.487 132.633 76.676 176.835l0.134 0.124zM595.237 799.963c-25.357 26.554-61.036 43.063-100.571 43.063-76.752 0-138.971-62.22-138.971-138.971s62.22-138.971 138.971-138.971c76.707 0 138.898 62.147 138.971 138.836v0.007c0.031 1.069 0.049 2.326 0.049 3.587 0 36.146-14.73 68.851-38.514 92.441l-0.009 0.009z" />
+<glyph unicode="&#xe91a;" glyph-name="warehouse" d="M371.273 960h-251.831c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h251.839c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-0.008zM401.262 840.558v-251.904c0-0.044 0-0.096 0-0.148 0-16.401-13.295-29.696-29.696-29.696-0.103 0-0.206 0.001-0.309 0.002h-252.107c-0.050 0-0.109 0-0.169 0-8.074 0-15.384 3.27-20.677 8.558v0c-5.423 5.404-8.779 12.88-8.779 21.14 0 0.102 0.001 0.205 0.002 0.307v-0.016 251.831c-0.001 0.093-0.002 0.204-0.002 0.314 0 8.074 3.271 15.385 8.56 20.678v0c5.321 5.464 12.749 8.854 20.969 8.854 0.162 0 0.325-0.001 0.487-0.004h252.026c16.41-0.041 29.696-13.354 29.696-29.769 0-0.051 0-0.103 0-0.154v0.008zM652.581 469.285h251.831c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-251.839c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h0.008zM622.665 588.727v251.904c0 0 0 0 0 0 0 16.481 13.361 29.842 29.842 29.842 0.026 0 0.051 0 0.077 0h252.193c16.219-0.288 29.258-13.504 29.258-29.765 0-0.053 0-0.106 0-0.159v0.008-251.904c0 0 0 0 0 0 0-16.481-13.361-29.842-29.842-29.842-0.051 0-0.103 0-0.154 0h-251.75c-16.211 0.246-29.259 13.446-29.259 29.693 0 0.104 0.001 0.208 0.002 0.312v-0.016zM371.273 426.862h-251.831c-65.933-0.083-119.359-53.51-119.442-119.434v-251.839c0.083-65.933 53.51-119.359 119.434-119.442h251.839c65.933 0.083 119.359 53.51 119.442 119.434v251.839c-0.083 65.933-53.51 119.359-119.434 119.442h-0.008zM401.262 307.419v-251.977c0.002-0.133 0.003-0.291 0.003-0.448 0-16.158-13.099-29.257-29.257-29.257-0.258 0-0.516 0.003-0.773 0.010l0.038-0.001h-251.977c-0.738-0.079-1.595-0.125-2.462-0.125-7.364 0-13.964 3.268-18.43 8.432l-0.026 0.031c-5.467 5.422-8.851 12.937-8.851 21.242 0 0.092 0 0.184 0.001 0.276v-0.014 251.977c-0.003 0.155-0.005 0.337-0.005 0.52 0 16.158 13.099 29.257 29.257 29.257 0.233 0 0.466-0.003 0.697-0.008l-0.034 0.001h252.123c0 0 0.001 0 0.001 0 16.401 0 29.696-13.295 29.696-29.696 0-0.077 0-0.154-0.001-0.231v0.012zM778.24 426.862c-135.37-0.208-245.028-109.995-245.028-245.394 0-135.528 109.867-245.394 245.394-245.394s245.394 109.867 245.394 245.394c0 0.103 0 0.205 0 0.308v-0.016c-0.333 135.437-110.203 245.102-245.686 245.102-0.026 0-0.052 0-0.078 0h0.004zM778.24 25.893c-86.083 0-155.867 69.784-155.867 155.867s69.784 155.867 155.867 155.867v0c86.083 0 155.867-69.784 155.867-155.867s-69.784-155.867-155.867-155.867v0z" />
+<glyph unicode="&#xe91b;" glyph-name="generate-invoice" horiz-adv-x="762" d="M761.722 710.28v0c-0.463 1.955-1.072 3.662-1.843 5.278l0.068-0.158-0.683 1.161c-0.868 1.733-1.939 3.219-3.21 4.508l-232.583 232.719c-1.333 1.207-2.806 2.311-4.377 3.272l-0.129 0.073-0.887 0.614c-2.699 1.412-5.893 2.244-9.281 2.253h-435.544c-0.061 0-0.133 0-0.205 0-40.38 0-73.114-32.734-73.114-73.114 0 0 0 0 0 0v0-877.909c0.078-40.273 32.704-72.9 72.97-72.977h616.182c40.273 0.078 72.9 32.704 72.977 72.97v697.078c0.002 0.108 0.003 0.235 0.003 0.363 0 1.368-0.125 2.706-0.365 4.004l0.021-0.135zM690.247 727.414h-126.293c-18.851 0-34.133 15.282-34.133 34.133v0 126.43zM689.086-21.403h-616.175c0 0 0 0 0 0-17.055 0-30.886 13.807-30.925 30.853v877.435c0.077 17.048 13.877 30.848 30.917 30.925h414.522v-156.058c0.271-42.087 34.413-76.109 76.52-76.186h156.133v-676.318c-0.155-16.961-13.94-30.652-30.924-30.652-0.024 0-0.049 0-0.073 0h0.004zM147.868 485.409h458.547c11.122 0.653 19.895 9.832 19.895 21.060s-8.773 20.407-19.837 21.058l-0.057 0.003h-458.547c-11.122-0.653-19.895-9.832-19.895-21.060s8.773-20.407 19.837-21.058l0.057-0.003zM627.441 371.54c0 11.65-9.444 21.094-21.094 21.094v0h-458.479c-0.358 0.022-0.778 0.034-1.2 0.034-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.422 0 0.841 0.012 1.257 0.037l-0.057-0.003h458.547c11.597 0.039 20.987 9.429 21.026 21.022v0.004z" />
+<glyph unicode="&#xe91c;" glyph-name="no-selected" horiz-adv-x="1084" d="M1083.597 569.924l-292.591-254.635 86.699-379.29-335.94 205.892-335.94-205.892 86.699 379.29-292.591 254.635 390.076 32.495 151.689 357.581 151.689-357.581zM547.226 239.445l205.892-119.194-54.204 232.994 178.79 157.013-238.387 21.709-92.092 216.747-92.092-216.747-238.387-21.709 178.79-157.013-54.204-232.926z" />
+<glyph unicode="&#xe91d;" glyph-name="edit-pencil" d="M1009.113 723.692l-221.42 221.342c-6.215 8.992-16.469 14.809-28.081 14.809s-21.867-5.817-28.007-14.696l-0.074-0.113q-329.413-329.255-658.905-658.59c-8.041-7.886-13.673-18.202-15.706-29.759l-0.048-0.331c-13.154-66.481-26.703-132.962-40.094-199.444-5.278-26.23-10.87-52.539-15.754-78.769-0.809-2.724-1.274-5.854-1.274-9.093 0-18.271 14.812-33.083 33.083-33.083 0.531 0 1.060 0.013 1.585 0.037l-0.074-0.003c2.442 0.394 7.089 1.103 11.737 2.048q137.61 27.727 275.141 55.138c11.511 2.255 21.454 7.857 29.050 15.737l0.016 0.017q329.255 329.57 658.668 658.747c9.005 6.196 14.834 16.446 14.834 28.056 0 11.544-5.761 21.742-14.566 27.875l-0.111 0.073zM622.277 738.186l65.063-64.985-388.017-388.332-65.063 65.221zM414.641 169.236l-65.221 65.3 388.332 388.254 65.3-65.221zM851.653 605.538l-182.114 182.036 90.821 90.742 182.351-182.272z" />
+<glyph unicode="&#xe91e;" glyph-name="collapse" d="M981.052 960c-11.768-0.022-22.414-4.806-30.117-12.528l-305.695-305.816v201.487c0 23.62-19.147 42.767-42.767 42.767s-42.767-19.147-42.767-42.767v0-304.429c-0.002-0.154-0.003-0.336-0.003-0.518 0-14.645 7.392-27.563 18.649-35.227l0.148-0.095 1.325-0.843 0.542-0.301 1.205-0.663 0.663-0.361 1.084-0.542 0.783-0.422 0.904-0.422 1.144-0.482h0.542l1.506-0.542h0.361l1.626-0.542h0.361l1.687-0.482 1.807-0.422h313.224c23.62 0 42.767 19.147 42.767 42.767s-19.147 42.767-42.767 42.767v0h-201.547l305.574 305.815c7.052 7.603 11.379 17.821 11.379 29.049 0 23.215-18.498 42.11-41.558 42.75l-0.059 0.001zM42.767 960c-23.565-0.072-42.641-19.192-42.641-42.767 0-11.809 4.786-22.499 12.524-30.238v0l305.453-305.875h-201.608c-23.62 0-42.767-19.147-42.767-42.767s19.147-42.767 42.767-42.767v0h304.791c0.012 0 0.026 0 0.041 0 5.783 0 11.296 1.151 16.325 3.236l-0.283-0.104 1.687 0.723h0.361l1.385 0.663h0.602l1.144 0.602 0.723 0.422 0.904 1.084 0.964 0.602 0.602 0.301 1.205 0.843h0.361c10.091 7.783 16.528 19.878 16.528 33.475 0 0.493-0.008 0.983-0.025 1.472l0.002-0.071v304.309c0 23.62-19.147 42.767-42.767 42.767s-42.767-19.147-42.767-42.767v0-201.487l-305.272 305.754c-7.718 7.776-18.411 12.589-30.229 12.589-0.003 0-0.007 0-0.010 0h0.001zM602.353 400.474c-19.099-0.006-35.271-12.531-40.757-29.815l-0.083-0.303q-0.602-1.928-1.024-3.976c-0.538-2.554-0.846-5.488-0.846-8.494 0-0.169 0.001-0.338 0.003-0.506v0.026-304.55c0-23.62 19.147-42.767 42.767-42.767s42.767 19.147 42.767 42.767v0 201.487l305.574-305.815c7.899-9.426 19.677-15.377 32.845-15.377 23.62 0 42.767 19.147 42.767 42.767 0 13.168-5.951 24.946-15.31 32.791l-0.066 0.054-305.574 305.815h201.547c23.62 0 42.767 19.147 42.767 42.767s-19.147 42.767-42.767 42.767v0h-304.61zM116.375 400.474c-23.62 0-42.767-19.147-42.767-42.767s19.147-42.767 42.767-42.767v0h201.788l-305.634-305.935c-7.738-7.739-12.523-18.43-12.523-30.238 0-23.618 19.144-42.764 42.761-42.767v0c11.77 0.007 22.421 4.795 30.116 12.527l305.515 305.817v-201.487c0-23.62 19.147-42.767 42.767-42.767s42.767 19.147 42.767 42.767v0 304.309c0.060 0.841 0.095 1.823 0.095 2.813 0 1.491-0.078 2.965-0.231 4.416l0.015-0.181c0 0.663 0 1.385-0.361 2.048s0 0 0 0.301 0 1.205-0.422 1.747v0 0c0 0.602-0.301 1.144-0.482 1.747v0.482l-0.542 1.506v0.361l-0.602 1.566v0.422l-0.602 1.385-0.301 0.663-0.602 1.205-0.361 0.663-1.747 1.385v0.783l-0.602 0.964-0.843 1.205-0.301 0.422-1.265 1.626c-7.892 9.662-19.806 15.782-33.15 15.782-0.014 0-0.028 0-0.042 0h-305.090z" />
+<glyph unicode="&#xe91f;" glyph-name="info1" d="M870.4 88.849c-89.912-94.275-216.492-152.895-356.763-152.895-2.376 0-4.748 0.017-7.115 0.050l0.359-0.004c-2.939-0.066-6.401-0.103-9.873-0.103-137.714 0-261.698 58.783-348.23 152.625l-0.297 0.327c-91.692 88.058-148.661 211.677-148.661 348.601 0 4.646 0.066 9.277 0.196 13.892l-0.015-0.679c-0.016 1.485-0.025 3.239-0.025 4.996 0 139.475 56.776 265.689 148.478 356.791l0.027 0.027c88.751 91.164 212.659 147.718 349.776 147.718 4.833 0 9.65-0.070 14.449-0.21l-0.705 0.016c1.584 0.018 3.455 0.028 5.329 0.028 139.771 0 266.359-56.443 358.215-147.78l-0.023 0.023c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.109-141.545-60.429-269.070-153.571-361.579l-0.029-0.029zM798.72 735.881c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.128 0.012-2.461 0.019-3.796 0.019-111.434 0-211.909-46.924-282.743-122.090l-0.181-0.194c-75.725-71.739-122.855-173.006-122.88-285.281v-0.005c-0.040-2.039-0.062-4.443-0.062-6.852 0-110.162 47.279-209.281 122.653-278.173l0.29-0.261c67.293-78.2 166.386-127.415 276.974-127.415 1.627 0 3.251 0.011 4.873 0.032l-0.246-0.003c1.128-0.012 2.461-0.019 3.796-0.019 111.434 0 211.909 46.924 282.743 122.090l0.181 0.194c75.725 71.739 122.855 173.006 122.88 285.281v0.005c0.282 5.423 0.443 11.773 0.443 18.161 0 107.308-45.379 204.017-117.994 271.984l-0.209 0.193zM558.080 190.771h-102.4v305.63h102.4zM558.080 598.323h-102.4v101.922h102.4z" />
+<glyph unicode="&#xe920;" glyph-name="expandIcon" horiz-adv-x="1023" d="M34.274 960c-18.703-0.552-33.722-15.571-34.273-34.222l-0.001-0.052v-204.8c0-18.796 15.237-34.033 34.033-34.033s34.033 15.237 34.033 34.033v122.94l283.106-283.106c6.294-7.188 15.489-11.703 25.738-11.703 18.862 0 34.153 15.291 34.153 34.153 0 10.249-4.514 19.444-11.663 25.704l-0.039 0.034-283.106 283.106h122.519c0.477-0.024 1.035-0.037 1.596-0.037 18.833 0 34.1 15.267 34.1 34.1 0 18.272-14.371 33.187-32.426 34.060l-0.078 0.003h-207.691zM781.192 960c-18.121-0.892-32.476-15.801-32.476-34.063 0-18.834 15.268-34.102 34.102-34.102 0.572 0 1.141 0.014 1.706 0.042l-0.080-0.003h122.458l-283.106-283.106c-7.188-6.294-11.703-15.489-11.703-25.738 0-18.862 15.291-34.153 34.153-34.153 10.249 0 19.444 4.514 25.704 11.663l0.034 0.039 283.106 283.106v-122.94c0-18.796 15.237-34.033 34.033-34.033s34.033 15.237 34.033 34.033v204.8c-0.552 18.703-15.571 33.722-34.222 34.273l-0.052 0.001h-207.691zM350.931 335.119l-283.106-283.106v123.061c0 18.796-15.237 34.033-34.033 34.033s-34.033-15.237-34.033-34.033v0-204.8c0.552-18.703 15.571-33.722 34.222-34.273l0.052-0.001h207.872c18.134 0.876 32.504 15.791 32.504 34.063 0 18.833-15.267 34.1-34.1 34.1-0.561 0-1.12-0.014-1.674-0.040l0.078 0.003h-122.278l283.106 283.106c7.188 6.294 11.703 15.489 11.703 25.738 0 18.862-15.291 34.153-34.153 34.153-10.249 0-19.444-4.514-25.704-11.663l-0.034-0.039zM622.472 337.167c-6.138-6.227-9.929-14.783-9.929-24.224 0-10.23 4.451-19.421 11.522-25.742l0.033-0.029 283.106-283.106h-122.82c-0.486 0.025-1.054 0.039-1.626 0.039-18.834 0-34.102-15.268-34.102-34.102 0-18.262 14.355-33.171 32.396-34.060l0.080-0.003h207.872c18.703 0.552 33.722 15.571 34.273 34.222l0.001 0.052v204.8c0 18.796-15.237 34.033-34.033 34.033s-34.033-15.237-34.033-34.033v0-122.94l-283.106 283.106c-6.585 6.833-15.816 11.077-26.038 11.077-9.18 0-17.561-3.423-23.936-9.062l0.038 0.033z" />
+<glyph unicode="&#xe921;" glyph-name="advance-search" d="M5.666 846.199h565.726v-113.801h-565.726zM226.304 618.667h113.118v-341.333h-113.118v113.801h-226.304v113.801h226.304zM5.666 163.533h339.422v-113.801h-339.422zM1024 391.066h-565.726v113.801h565.726zM565.726-64.068h-113.118v341.333h113.118v-113.801h452.608v-113.801h-452.608zM684.51 618.598v341.333h113.118v-113.801h226.372v-113.801h-226.304v-113.664z" />
+<glyph unicode="&#xe922;" glyph-name="help-support-icon" d="M24.404-39.62v500.663c7.263 263.632 222.708 474.577 487.422 474.577 0.061 0 0.123 0 0.184 0h-0.010c0.159 0 0.348 0 0.537 0 268.996 0 487.059-218.064 487.059-487.059 0-0.189 0-0.378 0-0.567v0.030c0-0.005 0-0.012 0-0.018 0-267.818-215.92-485.204-483.178-487.576l-0.225-0.002zM209.69 757.892c-78.336-75.73-127.926-180.769-131.054-297.395l-0.012-0.575v-446.492h436.642c237.503 3.879 428.715 196.628 430.108 434.362l0.001 0.135c0 0.072 0 0.158 0 0.244 0 239.239-193.941 433.18-433.18 433.18-0.069 0-0.137 0-0.206 0h0.011c-0.526 0.002-1.148 0.004-1.77 0.004-117.182 0-223.352-47.145-300.579-123.502l0.040 0.039zM430.376 169.802c-9.4 9.565-15.203 22.692-15.203 37.175 0 1.074 0.032 2.14 0.095 3.198l-0.007-0.146c0 35.594 19.504 53.636 58.511 53.636 1.382 0.111 2.991 0.174 4.616 0.174 14.983 0 28.711-5.372 39.364-14.295l-0.096 0.078c9.391-9.3 15.206-22.197 15.206-36.452 0-1.071-0.033-2.134-0.097-3.188l0.007 0.145c0.043-0.798 0.067-1.732 0.067-2.672 0-14.533-5.854-27.698-15.333-37.266l0.004 0.004c-10.46-9.174-24.257-14.771-39.36-14.771-1.454 0-2.897 0.052-4.325 0.154l0.192-0.011c-1.274-0.096-2.759-0.15-4.257-0.15-15.088 0-28.882 5.54-39.458 14.696l0.076-0.064zM431.595 323.249v22.673c-0.054 1.36-0.085 2.957-0.085 4.561 0 22.193 5.931 43.001 16.294 60.926l-0.313-0.587c14.891 21.463 33.307 39.335 54.586 53.175l0.756 0.461c23.198 14.937 43.222 32.016 60.715 51.421l0.234 0.264c8.576 11.788 13.719 26.553 13.719 42.52 0 0.565-0.006 1.129-0.019 1.692l0.002-0.084c0.042 0.79 0.066 1.714 0.066 2.644 0 17.701-8.717 33.365-22.092 42.935l-0.159 0.108c-16.135 10.183-35.766 16.225-56.809 16.225-2.486 0-4.953-0.084-7.397-0.25l0.331 0.018c-0.359 0.002-0.784 0.003-1.209 0.003-24.414 0-47.997-3.564-70.255-10.2l1.738 0.445c-25.038-7.511-45.8-15.383-65.882-24.49l3.275 1.329-33.352 62.461c49.648 25.277 108.273 40.086 170.356 40.086 0.723 0 1.446-0.002 2.169-0.006h-0.111c3.217 0.184 6.98 0.289 10.767 0.289 41.961 0 80.918-12.865 113.141-34.867l-0.692 0.446c27.87-20.37 45.77-52.945 45.77-89.7 0-1.498-0.030-2.99-0.089-4.473l0.007 0.213c0.013-0.65 0.020-1.417 0.020-2.185 0-16.281-3.25-31.803-9.138-45.952l0.292 0.792c-6.752-15.309-15.605-28.426-26.379-39.692l0.048 0.051c-18.148-17.617-38.024-33.667-59.28-47.807l-1.523-0.953c-18.904-12.198-35.146-26.393-49.097-42.614l-0.247-0.294c-7.885-11.78-12.584-26.272-12.584-41.861 0-1.38 0.037-2.752 0.11-4.114l-0.008 0.19v-15.847z" />
+<glyph unicode="&#xe923;" glyph-name="back-arrow" d="M1024 512v-128h-780.8l358.4-358.4-89.6-89.6-512 512 512 512 89.6-89.6-358.4-358.4z" />
+<glyph unicode="&#xe924;" glyph-name="home-icon" horiz-adv-x="1173" d="M1165.449 507.733c-6.884-9.515-17.954-15.633-30.454-15.633-8.286 0-15.943 2.689-22.148 7.241l0.105-0.073-526.541 378.743-526.268-378.743c-6.109-4.423-13.753-7.074-22.016-7.074-20.873 0-37.794 16.921-37.794 37.794 0 12.61 6.176 23.778 15.668 30.644l0.111 0.076 548.25 394.513h1.297c0.929 0.695 1.982 1.332 3.095 1.863l0.113 0.049 3.413 1.707h3.209l3.959 1.161h17.476l3.755-1.297 2.799-1.297 3.755-2.048h1.161l548.591-394.923c9.523-6.912 15.644-18.007 15.644-30.531 0-8.307-2.693-15.984-7.252-22.208l0.074 0.106zM1010.483 505.481c-20.774 0-37.615-16.841-37.615-37.615v0-456.636h-212.924v229.239c0.022 1.024 0.034 2.232 0.034 3.442 0 95.878-77.724 173.602-173.602 173.602s-173.602-77.724-173.602-173.602c0-1.21 0.012-2.418 0.037-3.622l-0.003 0.18v-229.239h-212.924v456.636c0.043 0.677 0.068 1.468 0.068 2.265 0 20.774-16.841 37.615-37.615 37.615s-37.615-16.841-37.615-37.615c0-0.797 0.025-1.588 0.074-2.373l-0.005 0.107v-494.251c0-20.774 16.841-37.615 37.615-37.615v0h288.085c20.774 0 37.615 16.841 37.615 37.615v0 266.854c0 54.33 44.043 98.372 98.372 98.372s98.372-44.043 98.372-98.372v0-266.854c0-20.774 16.841-37.615 37.615-37.615v0h288.085c20.774 0 37.615 16.841 37.615 37.615v0 494.251c0 0 0 0 0 0 0 20.774-16.841 37.615-37.615 37.615-0.024 0-0.048 0-0.072 0h0.004z" />
+<glyph unicode="&#xe925;" glyph-name="copy" d="M573.676 737.398c48.651-1.241 87.769-40.358 89.007-88.893l0.002-0.117v-623.301c-1.241-48.651-40.358-87.769-88.893-89.007l-0.117-0.002h-445.282c-48.651 1.241-87.769 40.358-89.007 88.893l-0.002 0.117v623.301c1.241 48.651 40.358 87.769 88.893 89.007l0.117 0.002zM573.676 25.088v623.301h-445.282v-623.301zM885.366 960c48.651-1.241 87.769-40.358 89.007-88.893l0.002-0.117v-623.301c-1.241-48.651-40.358-87.769-88.893-89.007l-0.117-0.002h-445.282c-48.651 1.241-87.769 40.358-89.007 88.893l-0.002 0.117v623.301c1.241 48.651 40.358 87.769 88.893 89.007l0.117 0.002zM885.366 247.69v623.301h-445.282v-623.301z" />
+<glyph unicode="&#xe926;" glyph-name="edit" d="M1009.113 723.692l-221.42 221.342c-6.215 8.992-16.469 14.809-28.081 14.809s-21.867-5.817-28.007-14.696l-0.074-0.113q-329.413-329.255-658.905-658.59c-8.041-7.886-13.673-18.202-15.706-29.759l-0.048-0.331c-13.154-66.481-26.703-132.962-40.094-199.444-5.278-26.23-10.87-52.539-15.754-78.769-0.809-2.724-1.274-5.854-1.274-9.093 0-18.271 14.812-33.083 33.083-33.083 0.531 0 1.060 0.013 1.585 0.037l-0.074-0.003c2.442 0.394 7.089 1.103 11.737 2.048q137.61 27.727 275.141 55.138c11.511 2.255 21.454 7.857 29.050 15.737l0.016 0.017q329.255 329.57 658.668 658.747c9.005 6.196 14.834 16.446 14.834 28.056 0 11.544-5.761 21.742-14.566 27.875l-0.111 0.073zM622.277 738.186l65.063-64.985-388.017-388.332-65.063 65.221zM414.641 169.236l-65.221 65.3 388.332 388.254 65.3-65.221zM851.653 605.538l-182.114 182.036 90.821 90.742 182.351-182.272z" />
+<glyph unicode="&#xe927;" glyph-name="expand" d="M910.257 49.743v329.964h113.743v-329.964c-1.583-62.171-51.571-112.16-113.594-113.74l-0.149-0.003h-796.514c-0.867-0.026-1.888-0.041-2.911-0.041-30.408 0-57.746 13.143-76.644 34.058l-0.080 0.090c-20.819 20.215-33.825 48.38-34.107 79.583v796.489c1.583 62.171 51.571 112.16 113.594 113.74l0.149 0.003h329.964v-113.743h-329.964v-796.436zM625.743 960h398.257v-398.257h-113.743v204.8l-557.529-557.529-79.636 79.636 557.529 557.529h-204.8z" />
+<glyph unicode="&#xe928;" glyph-name="eye" d="M1021.901 482.406c-56.218 70.042-257.024 298.394-504.934 298.394s-448.717-228.352-504.934-298.394c-7.512-9.348-12.057-21.359-12.057-34.432s4.545-25.084 12.141-34.54l-0.084 0.108c56.269-69.99 257.075-298.342 504.934-298.342s448.717 228.352 504.934 298.394c6.992 9.53 11.189 21.491 11.189 34.432s-4.197 24.902-11.304 34.596l0.115-0.164zM516.966 184.013c-211.149 0-393.626 204.288-444.109 263.936 49.357 60.826 232.96 263.936 444.109 263.936s393.626-203.11 444.109-263.936c-50.483-60.774-232.909-263.885-444.109-263.885zM517.018 652.288c-112.825 0-204.288-91.463-204.288-204.288s91.463-204.288 204.288-204.288c112.825 0 204.288 91.463 204.288 204.288v0c-0.291 112.708-91.58 203.998-204.26 204.288h-0.028zM517.018 312.627c-74.793 0-135.424 60.631-135.424 135.424s60.631 135.424 135.424 135.424c74.793 0 135.424-60.631 135.424-135.424v0c-0.145-74.734-60.69-135.279-135.41-135.424h-0.014z" />
+<glyph unicode="&#xe929;" glyph-name="favorite-selected" d="M503.077 163.767l-311.881-191.195 80.457 352.183-271.653 236.471 362.203 30.208 140.873 332.069 140.873-332.069 362.203-30.208-271.653-236.471 80.457-352.183z" />
+<glyph unicode="&#xe92a;" glyph-name="filter" d="M464.457-27.429c-8.483 0.276-16.439 2.242-23.637 5.569l0.378-0.157c-18.938 9.278-31.748 28.413-31.748 50.539 0 0.232 0.001 0.464 0.004 0.696v-0.035 215.259c1.354-20.664 13.81-38.128 31.411-46.594l0.333-0.144c6.82-3.174 14.777-5.141 23.163-5.41l0.096-0.002c14.016 0.403 26.619 6.132 35.923 15.224l-0.010-0.010 95.086 84.553c11.51 10.554 18.772 25.58 19.017 42.306l0.001 0.044v-219.429c-0.266-16.743-7.524-31.739-18.974-42.237l-0.043-0.039-95.086-84.553c-9.26-9.198-21.856-15.048-35.814-15.576l-0.099-0.003z" />
+<glyph unicode="&#xe92b;" glyph-name="sort-asc" d="M474.821 566.705l-59.156 66.166 306.727 321.378 301.529-317.991-63.015-63.803-199.444 210.786v-847.242h-87.198v841.964zM571.077-63.921v74.831h-570.998v-74.831zM489.314 94.405v73.413h-488.842v-73.413zM406.686 252.731v73.255h-405.977v-73.255zM0 483.21v-72.231h324.608v72.231zM0.945 568.596h241.349v73.57h-241.349zM0.158 800.65v-73.886h160.374v73.886zM77.666 960h-76.879v-75.697h76.879z" />
+<glyph unicode="&#xe92c;" glyph-name="sort-dsc" d="M964.844 323.623l59.156-66.166-306.727-321.457-301.607 318.070 63.015 63.803 199.444-210.865v847.321h87.276v-841.964zM571.077 960v-74.831h-570.998v74.831zM489.314 801.753v-73.413h-488.842v73.413zM406.764 643.348v-73.255h-406.055v73.255zM0 412.79v72.231h324.608v-72.231zM0.945 327.483h241.349v-73.57h-241.349zM0.158 95.35v73.886h160.374v-73.886zM77.745-63.842h-76.958v75.697h76.958z" />
+<glyph unicode="&#xe92d;" glyph-name="collapse-icon" d="M910.199 49.801v329.933h113.801v-329.933c-1.559-62.213-51.587-112.242-113.654-113.798l-0.147-0.003h-796.399c-0.867-0.026-1.887-0.041-2.91-0.041-30.423 0-57.775 13.154-76.677 34.084l-0.080 0.090c-20.839 20.217-33.856 48.396-34.133 79.615v796.519c1.559 62.213 51.587 112.242 113.654 113.798l0.147 0.003h329.933v-113.801h-329.933v-796.467zM625.801 960h398.199v-398.199h-113.801v204.8l-557.534-557.534-79.667 79.667 557.534 557.534h-204.8z" />
+<glyph unicode="&#xe92e;" glyph-name="info-icon" d="M148.48 806.4c89.783 94.711 216.497 153.644 356.975 153.644 2.301 0 4.598-0.016 6.892-0.047l-0.347 0.004c0.456 0.001 0.996 0.002 1.535 0.002 141.099 0 268.958-56.691 362.041-148.538l-0.056 0.055c91.718-88.633 148.663-212.745 148.663-350.158 0-4.699-0.067-9.382-0.199-14.049l0.015 0.687c0.016-1.503 0.025-3.28 0.025-5.058 0-139.993-56.752-266.73-148.504-358.46l-0.001-0.001c-88.633-91.718-212.745-148.663-350.158-148.663-4.699 0-9.382 0.067-14.049 0.199l0.687-0.015c-1.53-0.017-3.337-0.026-5.146-0.026-279.942 0-506.88 226.938-506.88 506.88 0 1.809 0.009 3.617 0.028 5.421l-0.002-0.275c-0.015 1.448-0.024 3.16-0.024 4.873 0 138.44 56.826 263.608 148.425 353.45l0.079 0.077zM563.2 396.8v307.2h-102.4v-307.2zM563.2 192v102.4h-102.4v-102.4z" />
+<glyph unicode="&#xe92f;" glyph-name="folder-group" horiz-adv-x="1100" d="M1062.042 846.079h-379.221c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-189.611c-20.886-0.096-37.792-17.002-37.888-37.879v-75.87h-75.861c-20.886-0.096-37.792-17.002-37.888-37.879v-75.87h-75.861c-20.923-0.048-37.877-16.972-37.973-37.879v-720.564c0.096-20.886 17.002-37.792 37.879-37.888h796.425c20.886 0.096 37.792 17.002 37.888 37.879v75.87h75.861c20.886 0.096 37.792 17.002 37.888 37.879v75.87h75.861c20.886 0.096 37.792 17.002 37.888 37.879v606.729c-0.096 20.856-16.953 37.743-37.789 37.888h-0.014zM38.042 694.357h189.611c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.473-17.845 56.79-29.012 90.633-30.368l0.333-0.011h379.221v-75.861h-796.331v189.867zM834.458-26.198h-796.416v379.392h796.416zM948.293 87.551h-75.861v493.056c-0.096 20.886-17.002 37.792-37.879 37.888h-379.316c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-75.861v75.861h189.696c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.473-17.845 56.79-29.012 90.633-30.368l0.333-0.011h379.221v-606.891zM1062.042 201.301h-75.861v493.227c-0.096 20.886-17.002 37.792-37.879 37.888h-379.23c-25.622 1.287-49.067 9.619-68.722 23.079l0.456-0.295-91.051 68.267c-19.198 13.169-42.644 21.502-67.951 22.771l-0.316 0.013h-75.861v75.861h189.611c17.037-1.305 32.565-6.79 45.862-15.42l-0.38 0.231 91.051-68.267c25.489-17.889 56.837-29.087 90.717-30.453l0.334-0.011h379.221v-606.891z" />
+<glyph unicode="&#xe930;" glyph-name="file-path" d="M1023.867 682.238c-5.986 151.706-128.002 273.032-279.435 277.902l-0.458 0.012c-1.14 0.018-2.485 0.028-3.832 0.028-75.273 0-143.25-31.238-191.675-81.457l-0.077-0.081-497.186-503.945c-1.775-1.638-3.55-3.755-5.188-5.666-28.526-32.696-45.92-75.748-45.92-122.862 0-55.071 23.765-104.592 61.599-138.867l0.159-0.142c34.256-35.39 82.113-57.435 135.121-57.685h0.047c51.734 0.118 98.444 21.53 131.848 55.934l0.044 0.045 413.901 419.908c19.088 18.922 30.911 45.148 30.925 74.135v0.003c-0.333 28.944-12.252 55.042-31.326 73.924l-0.009 0.009c-18.604 19.242-44.284 31.542-72.836 32.693l-0.209 0.007c-1.207 0.053-2.623 0.083-4.046 0.083-27.924 0-53.127-11.651-71.012-30.357l-0.035-0.037-293.547-297.711 41.847-42.462 293.547 297.711c7.482 7.89 18.039 12.799 29.744 12.799 0.583 0 1.164-0.012 1.741-0.036l-0.083 0.003c13.019-0.644 24.602-6.302 32.954-15.067l0.019-0.020c8.367-8.057 13.664-19.251 13.993-31.684l0.001-0.060c-0.132-12.338-5.342-23.434-13.635-31.317l-0.019-0.018-415.812-422.093c-22.884-22.334-54.208-36.111-88.749-36.111-36.492 0-69.393 15.377-92.575 40.006l-0.060 0.065c-24.727 24.182-40.961 56.958-43.863 93.489l-0.033 0.515c-0.154 2.231-0.242 4.835-0.242 7.46 0 31.724 12.819 60.453 33.56 81.291l-0.004-0.004 497.459 504.013c38.107 39.154 91.316 63.445 150.198 63.445 1.148 0 2.294-0.009 3.437-0.028l-0.172 0.002c60.335-1.066 114.563-26.346 153.548-66.506l0.052-0.054c2.253-2.048 4.506-4.301 6.827-6.485 37.565-38.281 60.751-90.786 60.751-148.707 0-42.787-12.653-82.62-34.422-115.959l0.499 0.815c-12.659 8.148-28.117 12.99-44.705 12.99-23.587 0-44.887-9.789-60.060-25.525l-0.024-0.025-451.106-467.763c-15.038-15.66-24.298-36.967-24.298-60.437 0-24.189 9.836-46.081 25.728-61.893l0.004-0.004c15.282-15.225 36.364-24.638 59.645-24.638 23.986 0 45.639 9.993 61.022 26.042l0.029 0.030 450.56 468.036c14.501 15.391 23.412 36.189 23.412 59.068 0 9.057-1.396 17.787-3.986 25.988l0.166-0.611c35.095 44.585 56.288 101.548 56.288 163.461 0 1.55-0.013 3.096-0.040 4.639l0.003-0.232z" />
+<glyph unicode="&#xe931;" glyph-name="arrow-down-2" horiz-adv-x="745" d="M372.5-64l-372.395 372.395h279.296v651.605h186.197v-651.605h279.296z" />
+<glyph unicode="&#xe932;" glyph-name="image" horiz-adv-x="1280" d="M139.098-63.999c-77.843 4.944-139.106 69.289-139.106 147.943 0 0.669 0.004 1.337 0.013 2.003l-0.001-0.101v723.541c-0.015 0.782-0.023 1.704-0.023 2.627 0 78.464 60.933 142.697 138.061 147.961l0.458 0.025h1002.411c77.843-4.944 139.106-69.289 139.106-147.943 0-0.669-0.004-1.337-0.013-2.003l0.001 0.101v-724.395c0.008-0.577 0.013-1.258 0.013-1.94 0-78.396-60.898-142.569-137.969-147.795l-0.455-0.025zM1140.144 899.756h-1001.045c-46.808-3.481-83.466-42.313-83.466-89.708 0-0.472 0.004-0.943 0.011-1.414l-0.001 0.071v-722.091c-0.002-0.205-0.003-0.446-0.003-0.689 0-47.646 37.083-86.63 83.961-89.666l0.265-0.014h1001.045c46.806 3.483 83.463 42.314 83.463 89.708 0 0.382-0.002 0.764-0.007 1.145l0.001-0.058v722.347c0.002 0.205 0.003 0.446 0.003 0.689 0 47.646-37.083 86.63-83.961 89.666l-0.265 0.014zM1085.189 116.737h-891.648l250.88 349.184 139.093-180.736 196.267 273.067z" />
+<glyph unicode="&#xe933;" glyph-name="Revert" horiz-adv-x="1365" d="M759.979-63.988c-12.045 0.019-22.826 5.417-30.072 13.919l-0.046 0.055-403.576 469.353c-6.508 7.689-10.464 17.719-10.464 28.672s3.956 20.983 10.518 28.737l-0.054-0.065 403.576 469.353c7.186 8.542 17.882 13.933 29.836 13.933 5.269 0 10.293-1.047 14.876-2.945l-0.258 0.095c15.261-6.701 25.725-21.682 25.725-39.106 0-0.228-0.002-0.456-0.005-0.683v0.034-214.799c318.593-32.557 565.056-299.457 565.056-623.923 0-5.124-0.061-10.233-0.184-15.327l0.014 0.756v-85.353c0.003-0.175 0.004-0.382 0.004-0.589 0-16.58-9.449-30.954-23.255-38.030l-0.241-0.112c-4.993-2.53-10.886-4.012-17.125-4.012-10.006 0-19.122 3.812-25.974 10.063l0.030-0.027-68.006 61.681c-113.98 104.479-263.326 172.029-428.162 182.825l-2.099 0.11v-212.209c0.003-0.182 0.004-0.396 0.004-0.611 0-17.467-10.457-32.492-25.452-39.156l-0.273-0.108c-4.144-1.603-8.939-2.532-13.951-2.532-0.157 0-0.313 0.001-0.469 0.003h0.024zM759.979 277.365c202.025-0.927 385.735-78.587 523.645-205.31l-0.562 0.51 1.385-1.265c0.030 2.11 0.047 4.602 0.047 7.098 0 292.851-232.984 531.286-523.708 540.060l-0.808 0.019c-22.436 0.663-40.372 19.010-40.372 41.545 0 0.387 0.005 0.773 0.016 1.158l-0.001-0.057v145.89l-308.585-359.002 308.706-359.002v145.649c-0.010 0.347-0.016 0.755-0.016 1.165 0 22.494 17.869 40.814 40.187 41.54l0.067 0.002zM579.694-63.988c-0.296-0.005-0.645-0.008-0.994-0.008-14.548 0-27.861 5.29-38.119 14.051l0.081-0.068-527.059 469.353c-8.382 6.813-13.694 17.122-13.694 28.672s5.312 21.859 13.626 28.619l0.068 0.053 527.059 469.353c10.562 8.708 24.232 13.988 39.136 13.988 13.218 0 25.467-4.154 35.51-11.228l-0.196 0.131c10.469-6.693 17.311-18.256 17.311-31.417 0-11.595-5.31-21.95-13.631-28.766l-0.066-0.052-494.833-440.681 494.833-440.681c8.362-6.879 13.654-17.227 13.654-28.812 0-13.153-6.822-24.713-17.12-31.335l-0.148-0.089c-9.638-6.933-21.679-11.088-34.691-11.088-0.256 0-0.511 0.002-0.766 0.005h0.039z" />
+<glyph unicode="&#xe934;" glyph-name="payment" horiz-adv-x="1178" d="M247.808-64c108.852 0.19 197.811 85.101 204.464 192.303l0.029 0.585c8.81 2.303 16.438 5.173 23.672 8.722l-0.735-0.326 1.195 0.614 109.227 62.532 204.732 105.984 101.683 63.386c16.25 10.217 30.289 20.586 43.507 31.888l-0.499-0.417 99.43 84.582 28.467 21.504c18.415 13.931 40.458 24.117 64.434 28.975l1.033 0.175 33.621 6.519c9.125 1.815 15.907 9.758 15.907 19.285 0 10.849-8.795 19.644-19.644 19.644-1.322 0-2.614-0.131-3.863-0.38l0.125 0.021-33.655-6.554c-31.168-6.269-58.637-18.973-82.081-36.716l0.502 0.364-29.355-22.221-100.284-85.333c-11.336-9.694-23.848-18.938-36.996-27.267l-1.335-0.79-101.103-62.942-203.401-105.267-109.227-62.601c-7.804-3.805-16.867-6.537-26.412-7.707l-0.416-0.042c-3.005-0.388-6.481-0.609-10.009-0.609-4.164 0-8.255 0.308-12.254 0.903l0.452-0.055-22.63 2.833h-5.461l-26.965-0.307c-17.46-0.341-33.851-4.589-48.439-11.901l0.652 0.296-30.72-15.394c-0.979-0.502-2.117-0.924-3.308-1.208l-0.105-0.021-22.289-5.359c-1.025-0.261-2.203-0.411-3.415-0.411-0.060 0-0.119 0-0.178 0.001h-13.064c-4.577 0.299-8.791 1.604-12.503 3.694l0.147-0.076c-1.626 1.224-2.947 2.763-3.89 4.534l-0.036 0.074-2.048 3.755 0.887 13.449c1.431 20.657 8.908 39.33 20.653 54.539l-0.173-0.233 2.116 2.765c6.508 8.451 14.155 15.621 22.797 21.422l0.345 0.218 22.733 15.087c0.718 0.479 1.341 0.962 1.93 1.484l-0.018-0.016c12.083 10.374 25.983 19.119 41.069 25.639l1.051 0.404 33.485 14.131c6.485 2.731 12.39 5.564 18.125 8.636l49.732 27.102c16.028 8.837 29.848 19.034 42.164 30.793l-0.077-0.073 44.373 42.155c7.913 7.571 12.831 18.215 12.831 30.008 0 12.283-5.336 23.32-13.816 30.92l-0.039 0.035-73.83 65.809c-14.97 13.268-34.781 21.37-56.485 21.37-4.338 0-8.6-0.324-12.763-0.948l0.469 0.058-67.721-10.24c-9.209-1.336-17.467-4.541-24.677-9.224l0.237 0.144-97.929-61.918c-12.731-8.178-21.184-22.057-21.741-37.944l-0.002-0.081-2.799-77.653c-0.021-0.523-0.033-1.137-0.033-1.753 0-8.513 2.253-16.499 6.196-23.396l-0.122 0.231c-28.342-12.996-52.243-31.149-71.453-53.456l-0.227-0.27-16.555 17.067c-9.546 9.787-15.973 22.655-17.653 36.975l-0.029 0.299-18.261 163.021c-0.219 2.33-0.344 5.038-0.344 7.776 0 25.396 10.762 48.278 27.975 64.334l0.052 0.048 269.21 234.052c1.762 1.607 4.003 2.718 6.484 3.097l0.069 0.009 818.074 119.876c9.546 1.44 16.78 9.586 16.78 19.422 0 10.841-8.789 19.63-19.63 19.63-1.006 0-1.994-0.076-2.959-0.221l0.108 0.013-818.176-119.945c-10.429-1.585-19.596-6.101-26.874-12.67l0.045 0.040-269.244-234.121c-25.308-23.432-41.098-56.832-41.098-93.919 0-4.031 0.187-8.019 0.552-11.955l-0.038 0.505 18.295-163.43c2.733-23.682 13.137-44.534 28.624-60.403l-0.020 0.021 21.606-22.118c-16.581-28.956-26.359-63.649-26.359-100.625 0-113.308 91.818-205.171 205.109-205.244h0.007zM199.748 429.329c0.062 2.605 1.388 4.887 3.387 6.263l0.026 0.017 97.997 62.327c2.575 1.71 5.632 2.915 8.925 3.399l0.121 0.015 67.755 10.24c2.006 0.311 4.32 0.489 6.675 0.489 11.637 0 22.26-4.339 30.34-11.488l-0.049 0.042 73.762-65.741c0.436-0.386 0.711-0.945 0.717-1.569v-0.001c0-0.015 0.001-0.033 0.001-0.051 0-0.625-0.262-1.188-0.682-1.586l-0.001-0.001-44.373-42.223c-9.828-9.41-20.924-17.623-32.974-24.329l-0.818-0.418-49.596-27.034c-4.813-2.594-9.728-4.881-14.643-6.827l-10.581-4.471c-25.996 12.512-56.523 19.822-88.757 19.822-16.16 0-31.891-1.837-46.995-5.315l1.404 0.272-3.652 6.451c-0.649 1.109-1.033 2.442-1.033 3.865 0 0.129 0.003 0.258 0.009 0.386l-0.001-0.018zM197.939 299.622c14.732 4.705 31.677 7.417 49.256 7.417 13.696 0 27.008-1.646 39.748-4.752l-1.145 0.236c-9.142-5.686-17.031-11.457-24.462-17.754l0.295 0.244-21.777-14.438c-12.657-8.482-23.427-18.58-32.363-30.165l-0.234-0.316-2.116-2.765c-16.121-20.812-26.539-46.775-28.511-75.065l-0.024-0.438-1.297-19.183c-0.032-0.418-0.050-0.906-0.050-1.398 0-3.443 0.891-6.679 2.456-9.488l-0.051 0.099 4.642-8.431c3.658-6.797 8.518-12.486 14.35-16.976l0.123-0.091c10.164-7.211 22.742-11.647 36.339-11.979l0.081-0.002h13.073c0.097-0.001 0.211-0.001 0.326-0.001 4.602 0 9.065 0.598 13.315 1.721l-0.362-0.081 21.777 5.222c4.531 1.103 8.5 2.602 12.221 4.513l-0.308-0.144 30.413 15.326c8.957 4.52 19.49 7.266 30.64 7.508l26.294 0.308 23.142-2.799c3.004-0.41 6.042-0.683 9.079-0.887-8.552-84.333-79.182-149.595-165.055-149.595-91.599 0-165.854 74.255-165.854 165.854 0 73.81 48.214 136.358 114.866 157.869l1.174 0.327z" />
+<glyph unicode="&#xe935;" glyph-name="edit-ico" d="M796.708 334.936c-7.658 3.056-14.361 1.715-20.096-4.017l-36.739-36.739c-3.44-3.434-5.173-7.652-5.173-12.618v-72.332c0-25.261-8.973-46.872-26.956-64.865-17.998-17.984-39.608-26.976-64.865-26.976h-477.571c-25.255 0-46.878 8.993-64.865 26.976-17.988 17.992-26.976 39.602-26.976 64.865v477.559c0 25.257 8.989 46.878 26.976 64.867 17.988 17.984 39.61 26.976 64.865 26.976h477.575c8.416 0 17.029-1.148 25.828-3.446 6.902-2.294 13.012-0.766 18.363 4.592l28.118 28.126c4.596 4.586 6.309 10.139 5.167 16.643-1.148 6.12-4.596 10.523-10.336 13.199-20.667 9.554-43.048 14.353-67.155 14.353h-477.561c-45.533 0-84.473-16.168-116.811-48.504-32.328-32.34-48.496-71.271-48.496-116.809v-477.569c0-45.531 16.168-84.467 48.498-116.803 32.336-32.344 71.279-48.512 116.811-48.512h477.561c45.531 0 84.467 16.168 116.803 48.512 32.344 32.336 48.512 71.271 48.512 116.803v109.057c-0.002 8.050-3.836 13.593-11.478 16.663zM367.352 356.152v-165.301h165.318l385.725 385.723-165.316 165.309-385.727-385.732zM509.698 245.949v0l-32.147 0.014v55.088h-55.098v32.135l66.586 66.586 87.246-87.254-66.586-66.57zM761.682 640.292l-200.907-200.901c-6.502-6.516-12.819-6.703-18.94-0.579-6.118 6.124-5.931 12.437 0.577 18.936l200.907 200.903c6.5 6.512 12.803 6.701 18.94 0.577s5.917-12.435-0.577-18.936zM1007.932 744.182l-87.246 87.246c-10.712 10.716-23.715 16.074-39.029 16.074-15.31 0-28.319-5.358-39.025-16.074l-52.813-52.801 165.316-165.318 52.799 52.811c10.712 10.71 16.066 23.723 16.066 39.031s-5.356 28.315-16.068 39.031z" />
+<glyph unicode="&#xe936;" glyph-name="traingle-info" d="M0-12.8l512 921.6 512-921.6zM558.541 326.758v193.997h-93.082v-193.997zM558.541 132.762v96.973h-93.082v-97.024z" />
+<glyph unicode="&#xe937;" glyph-name="cash" horiz-adv-x="1536" d="M1499.731 960.043h-1463.381c-20.135-0.232-36.369-16.608-36.369-36.776 0-0.391 0.006-0.78 0.018-1.168l-0.001 0.057v-948.395c-0.011-0.331-0.017-0.72-0.017-1.111 0-20.151 16.244-36.508 36.351-36.692h1463.313c20.116 0.134 36.372 16.472 36.372 36.607 0 0.42-0.007 0.839-0.021 1.256l0.002-0.061v948.395c0.012 0.357 0.020 0.776 0.020 1.197 0 20.122-16.197 36.461-36.264 36.691h-0.022zM71.848 11.648v873.813h1391.531v-873.813zM1311.571 616.832c-47.519 2.945-84.943 42.205-84.943 90.205 0 1.648 0.044 3.286 0.131 4.912l-0.010-0.227c0.005 0.229 0.008 0.498 0.008 0.768 0 19.888-16.123 36.011-36.011 36.011-0.003 0-0.006 0-0.009 0h-846.080c-0.002 0-0.005 0-0.008 0-19.888 0-36.011-16.123-36.011-36.011 0-0.27 0.003-0.539 0.009-0.808l-0.001 0.040c0.077-1.4 0.122-3.037 0.122-4.686 0-48-37.424-87.26-84.685-90.192l-0.258-0.013c-0.002 0-0.005 0-0.008 0-19.888 0-36.011-16.123-36.011-36.011 0-0.27 0.003-0.539 0.009-0.808l-0.001 0.040v-265.472c1.292-19.087 16.735-34.175 35.856-34.899l0.069-0.002c47.528-2.989 84.943-42.268 84.943-90.285 0-1.65-0.044-3.29-0.131-4.918l0.010 0.227c-0.005-0.229-0.008-0.498-0.008-0.768 0-19.841 16.084-35.925 35.925-35.925 0.033 0 0.066 0 0.099 0h846.075c0.028 0 0.061 0 0.094 0 19.841 0 35.925 16.084 35.925 35.925 0 0.27-0.003 0.539-0.009 0.808l0.001-0.040c-0.078 1.401-0.122 3.041-0.122 4.691 0 48.017 37.415 87.296 84.682 90.272l0.261 0.013c19.901 0.045 36.017 16.188 36.017 36.096 0 0.24-0.002 0.48-0.007 0.719l0.001-0.036v263.595c0.005 0.229 0.008 0.498 0.008 0.768 0 19.861-16.079 35.967-35.929 36.011h-0.004zM376.83 221.483c-11.953 61.685-57.25 110.37-116.010 127.038l-1.153 0.28v198.912c59.923 16.88 105.238 65.554 116.997 126.204l0.166 1.028h781.568c11.983-61.65 57.272-110.298 116.010-126.953l1.153-0.279v-198.912c-59.901-16.966-105.19-65.642-116.995-126.285l-0.167-1.033zM768.083 611.030c-89.427-0.29-161.843-72.706-162.133-162.105v-0.028c0.29-89.427 72.706-161.843 162.105-162.133h0.028c89.427 0.29 161.843 72.706 162.133 162.105v0.028c-0.29 89.427-72.706 161.843-162.105 162.133h-0.028z" />
+<glyph unicode="&#xe938;" glyph-name="atm-card" horiz-adv-x="1536" d="M1426.006 959.616h-1316.011c-61.396-2.91-110.072-53.395-110.072-115.249 0-1.483 0.028-2.96 0.083-4.43l-0.006 0.212v-784.299c-0.049-1.258-0.077-2.734-0.077-4.218 0-61.854 48.676-112.339 109.811-115.239l0.26-0.010h1316.011c61.396 2.91 110.072 53.395 110.072 115.249 0 1.483-0.028 2.96-0.083 4.43l0.006-0.212v784.299c0.049 1.258 0.077 2.734 0.077 4.218 0 61.854-48.676 112.339-109.811 115.239l-0.26 0.010zM1455.617 55.083c0.095-0.937 0.149-2.025 0.149-3.125 0-17.038-13.004-31.039-29.628-32.62l-0.132-0.010h-1316.011c-16.756 1.591-29.76 15.591-29.76 32.63 0 1.1 0.054 2.188 0.16 3.261l-0.011-0.136v381.44h1375.232zM80.385 839.381c-0.095 0.937-0.149 2.025-0.149 3.125 0 17.038 13.004 31.039 29.628 32.62l0.132 0.010h1316.011c16.756-1.591 29.76-15.591 29.76-32.63 0-1.1-0.054-2.188-0.16-3.261l0.011 0.136v-119.979h-1375.232zM1455.617 635.264v-114.603h-1375.232v114.603zM917.334 93.824h403.968c22.977 0.749 41.319 19.555 41.319 42.645 0 0.428-0.006 0.854-0.019 1.278l0.001-0.062v116.992c0.011 0.362 0.017 0.788 0.017 1.216 0 23.090-18.342 41.896-41.25 42.644l-0.069 0.002h-403.968c-22.939-0.795-41.233-19.582-41.233-42.643 0-0.429 0.006-0.856 0.019-1.281l-0.001 0.062v-116.992c-0.011-0.363-0.017-0.79-0.017-1.219 0-23.060 18.294-41.847 41.161-42.641l0.073-0.002z" />
+<glyph unicode="&#xe939;" glyph-name="copy-icon" horiz-adv-x="884" d="M791.291 773.806v-744.709h-744.441v-93.097h744.709c50.896 1.274 91.824 42.201 93.095 92.977l0.002 0.12v744.709zM93.097 960c-50.896-1.274-91.824-42.201-93.095-92.977l-0.002-0.12v-651.612c1.274-50.896 42.201-91.824 92.977-93.095l0.12-0.002h512c50.896 1.274 91.824 42.201 93.095 92.977l0.002 0.12v651.612c-1.274 50.896-42.201 91.824-92.977 93.095l-0.12 0.002zM93.097 215.291v651.612h512v-651.612z" />
+<glyph unicode="&#xe93a;" glyph-name="divide-ico" horiz-adv-x="1053" d="M526.5 923.541c-69.746 0-126.811-57.065-126.811-126.811s57.065-126.811 126.811-126.811c69.746 0 126.811 57.065 126.811 126.811s-57.065 126.811-126.811 126.811zM50.958 543.108v-190.217h951.084v190.217h-951.084zM526.5 226.080c-69.746 0-126.811-57.065-126.811-126.811s57.065-126.811 126.811-126.811c69.746 0 126.811 57.065 126.811 126.811s-57.065 126.811-126.811 126.811z" />
+<glyph unicode="&#xe93b;" glyph-name="estimate1" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM273.067 601.873c7.288 6.797 15.195 13.187 23.538 18.997l0.697 0.459c8.335 5.831 17.847 11.267 27.846 15.82l1.133 0.462c9.656 4.429 20.998 8.257 32.786 10.905l1.177 0.222c11.464 2.585 24.629 4.066 38.141 4.066 0.451 0 0.902-0.002 1.352-0.005h-0.069c0.45 0.005 0.983 0.007 1.516 0.007 17.991 0 35.287-2.976 51.423-8.463l-1.124 0.332c15.862-5.295 29.57-13.123 41.38-23.121l-0.181 0.15c11.419-9.805 20.633-21.826 27.033-35.433l0.273-0.646c6.261-13.505 9.913-29.312 9.913-45.971 0-0.638-0.005-1.275-0.016-1.911l0.001 0.096c0.022-0.86 0.034-1.874 0.034-2.89 0-15.611-2.931-30.538-8.272-44.26l0.285 0.832c-5.287-13.068-12.065-24.341-20.317-34.356l0.178 0.222c-7.905-9.538-16.665-17.908-26.3-25.18l-0.393-0.284q-14.507-10.786-27.034-20.48c-7.96-5.994-15.005-12.25-21.517-19.022l-0.056-0.058c-5.535-5.561-9.312-12.876-10.423-21.039l-0.021-0.191-6.485-53.931h-43.145l-4.233 58.709v3.891c-0.004 0.223-0.006 0.485-0.006 0.748 0 9.571 2.978 18.447 8.057 25.751l-0.098-0.148c5.828 8.215 12.468 15.31 19.946 21.419l0.193 0.153q12.186 10.24 26.18 20.139c9.702 7.042 18.25 14.355 26.179 22.288l0.001 0.001c7.929 7.935 14.647 17.083 19.851 27.14l0.287 0.611c5.032 10.161 7.977 22.126 7.977 34.778 0 0.685-0.009 1.369-0.026 2.050l0.002-0.101c0.004 0.261 0.006 0.568 0.006 0.877 0 9.703-2.218 18.888-6.176 27.075l0.162-0.372c-4.046 8.301-9.528 15.3-16.19 20.95l-0.092 0.076c-6.84 5.718-14.91 10.238-23.726 13.101l-0.509 0.143c-8.732 2.923-18.786 4.61-29.234 4.61-0.223 0-0.445-0.001-0.667-0.002h0.034c-0.765 0.018-1.666 0.029-2.569 0.029-12.286 0-24.117-1.946-35.203-5.546l0.806 0.226c-9.977-3.336-18.562-7.285-26.625-12.027l0.65 0.353c-6.519-3.857-12.092-7.711-17.377-11.912l0.31 0.238c-2.841-2.784-6.55-4.692-10.684-5.279l-0.102-0.012c-0.025 0-0.055 0-0.084 0-5.84 0-10.92 3.252-13.529 8.043l-0.040 0.081zM342.357 247.569c0 0.049 0 0.106 0 0.163 0 6.197 1.255 12.101 3.524 17.471l-0.111-0.295c2.255 5.48 5.357 10.169 9.194 14.144l-0.013-0.013c3.886 3.976 8.522 7.201 13.682 9.449l0.279 0.108c5.090 2.314 11.038 3.67 17.3 3.686h0.006c0.163 0.002 0.355 0.003 0.547 0.003 6.066 0 11.838-1.257 17.071-3.524l-0.278 0.107c5.486-2.39 10.172-5.61 14.132-9.558l-0.001 0.001c3.933-3.936 7.106-8.631 9.282-13.847l0.105-0.284c2.159-5.076 3.414-10.979 3.414-17.176 0-0.057 0-0.115 0-0.172v0.009c0.001-0.12 0.002-0.263 0.002-0.405 0-6.173-1.256-12.052-3.525-17.397l0.11 0.292c-2.311-5.429-5.48-10.064-9.386-13.96l-0.001-0.001c-3.936-3.933-8.631-7.106-13.847-9.282l-0.284-0.105c-5.076-2.159-10.979-3.414-17.176-3.414-0.057 0-0.115 0-0.172 0h0.009c-0.049 0-0.106 0-0.163 0-6.197 0-12.101 1.255-17.471 3.524l0.295-0.111c-5.453 2.245-10.099 5.423-13.952 9.378l-0.009 0.009c-3.798 3.923-6.894 8.552-9.071 13.666l-0.111 0.294c-2.137 5.030-3.38 10.88-3.38 17.020 0 0.077 0 0.153 0.001 0.229v-0.012z" />
+<glyph unicode="&#xe93c;" glyph-name="invoice-icon" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM320.853 270.507l361.813 361.813 47.787-47.787-409.6-409.6-191.147 191.147 47.787 47.787z" />
+<glyph unicode="&#xe93d;" glyph-name="sales-order" horiz-adv-x="828" d="M828.075 719.974c-0.059 2.099-0.531 4.074-1.336 5.866l0.039-0.097c-0.421 0.922-0.865 1.706-1.368 2.447l0.037-0.058c-0.518 0.766-1.068 1.435-1.674 2.050l-225.517 225.517c-0.614 0.6-1.283 1.15-1.997 1.639l-0.051 0.033-0.751 0.478c-0.409 0.259-0.901 0.531-1.408 0.778l-0.094 0.041-0.853 0.375c-0.47 0.185-1.062 0.372-1.668 0.524l-0.106 0.023-1.331 0.239c-0.628 0.1-1.381 0.173-2.145 0.204l-0.039 0.001h-517.598c-38.735-0.058-70.12-31.443-70.178-70.173v-883.65c0.039-38.743 31.436-70.139 70.174-70.178h687.722c38.75 0.039 70.154 31.431 70.212 70.173v0.006zM643.174 734.515c-22.394 0.019-40.546 18.159-40.585 40.547v134.387l174.933-174.933zM643.174 704.887h155.307v-698.709c-0.039-22.392-18.19-40.531-40.583-40.55h-687.72c-22.38 0.039-40.512 18.171-40.55 40.547v883.648c0.039 22.38 18.171 40.512 40.547 40.55h502.788v-155.307c0.039-38.755 31.455-70.159 70.21-70.178h0.002zM307.2 741.547l136.533-136.533h-102.4v-238.933h-68.267v238.933h-102.4zM546.133 263.68h102.4l-136.533-136.533-136.533 136.533h102.4v238.933h68.267z" />
+<glyph unicode="&#xe93e;" glyph-name="card" horiz-adv-x="1576" d="M110.792 959.888c-61.143-0.136-110.671-49.663-110.807-110.794v-663.657c0.136-61.143 49.663-110.671 110.794-110.807h27.722v-27.71c0.136-61.143 49.663-110.671 110.794-110.807h1215.913c61.143 0.136 110.671 49.663 110.807 110.794v663.077c-0.136 61.143-49.663 110.671-110.794 110.807h-27.722v27.71c-0.136 61.143-49.663 110.671-110.794 110.807h-1215.913zM110.792 904.468h1215.321c0.236 0.004 0.513 0.006 0.79 0.006 30.154 0 54.6-24.446 54.6-54.6 0-0.277-0.002-0.557-0.006-0.833v0.043-55.387h-1326.125v55.387c-0.004 0.236-0.006 0.513-0.006 0.79 0 30.154 24.446 54.6 54.6 54.6 0.291 0 0.58-0.002 0.87-0.007l-0.045 0.001zM1436.921 766.566h27.71c0.236 0.004 0.513 0.006 0.79 0.006 30.154 0 54.6-24.446 54.6-54.6 0-0.291-0.002-0.58-0.007-0.87l0.001 0.045v-663.065c0.004-0.236 0.006-0.513 0.006-0.79 0-30.154-24.446-54.6-54.6-54.6-0.277 0-0.557 0.002-0.833 0.006h-1215.893c-0.236-0.004-0.513-0.006-0.79-0.006-30.154 0-54.6 24.446-54.6 54.6 0 0.277 0.002 0.557 0.006 0.833v-0.043 27.71h1132.976c61.143 0.136 110.671 49.663 110.807 110.794v579.979zM55.372 738.857h1326.125v-55.42h-1326.125zM55.372 628.049h1326.125v-442.030c0.004-0.245 0.006-0.534 0.006-0.825 0-30.154-24.446-54.6-54.6-54.6-0.277 0-0.557 0.002-0.833 0.006h-1215.278c-0.236-0.004-0.513-0.006-0.79-0.006-30.154 0-54.6 24.446-54.6 54.6 0 0.291 0.002 0.58 0.007 0.87l-0.001-0.045zM135.535 462.438c-14.465-0.469-26.013-12.307-26.013-26.845 0-0.713 0.027-1.419 0.081-2.12l-0.006 0.092c0.722-14.501 12.655-25.982 27.268-25.982 0.565 0 1.124 0.016 1.677 0.052l-0.075-0.004h303.549c0.179-0.004 0.387-0.006 0.596-0.006 15.307 0 27.716 12.409 27.716 27.716 0 15.098-12.072 27.376-27.087 27.71l-0.030 0.001h-305.323c-0.552-0.396-1.238-0.635-1.983-0.635-0.131 0-0.261 0.007-0.388 0.021l0.015-0.001zM135.535 352.211c-14.512-0.802-25.975-12.762-25.975-27.402 0-15.156 12.286-27.442 27.442-27.442 0.516 0 1.029 0.013 1.539 0.043l-0.071-0.003h196.871c0.406-0.020 0.885-0.035 1.364-0.035 15.303 0 27.71 12.406 27.71 27.71s-12.406 27.71-27.71 27.71c-0.060 0-0.119 0-0.18-0.001h-197.919c-0.656-0.405-1.455-0.647-2.306-0.647-0.269 0-0.534 0.023-0.791 0.071l0.026-0.004zM439.084 352.211c-14.512-0.802-25.975-12.762-25.975-27.402 0-15.156 12.286-27.442 27.442-27.442 0.516 0 1.029 0.013 1.539 0.043l-0.071-0.003h28.291c0.406-0.020 0.885-0.035 1.364-0.035 15.303 0 27.71 12.406 27.71 27.71s-12.406 27.71-27.71 27.71c-0.060 0-0.119 0-0.18-0.001h-29.476c-0.714-0.379-1.559-0.601-2.457-0.601-0.169 0-0.333 0.008-0.499 0.022l0.020-0.002z" />
+<glyph unicode="&#xe93f;" glyph-name="chat2" d="M168.288 147.251h60.484v-211.251l290.645 211.251h429.295c92.884 0.039 168.17 75.325 168.209 168.205v476.335c-0.039 92.884-75.325 168.17-168.205 168.209h-780.428c-92.884-0.039-168.17-75.325-168.209-168.205v-476.335c0.039-92.884 75.325-168.17 168.205-168.209h0.004zM79.473 791.791c0.478 48.82 39.926 88.269 88.701 88.746h780.538c48.82-0.478 88.269-39.926 88.746-88.701v-476.376c-0.478-48.82-39.926-88.269-88.701-88.746h-454.838l-184.32-134.554v134.485h-141.312c-48.82 0.478-88.269 39.926-88.746 88.701v0.045zM830.406 672.017h-543.607v79.428h543.505zM830.406 522.65h-543.607v79.428h543.505zM830.406 374.647h-543.607v79.394h543.505z" />
+<glyph unicode="&#xe940;" glyph-name="ecomm" horiz-adv-x="1121" d="M692.698 45.704c0 60.588 49.116 109.705 109.705 109.705s109.705-49.116 109.705-109.705c0-60.588-49.116-109.705-109.705-109.705-0.024 0-0.048 0-0.072 0h0.004c-60.427 0.366-109.309 49.272-109.636 109.673v0.031zM741.065 45.704c0-34.536 27.997-62.532 62.532-62.532s62.532 27.997 62.532 62.532c0 34.536-27.997 62.532-62.532 62.532v0c-34.443-0.231-62.302-28.090-62.532-62.51v-0.022zM289.242 45.704c0.272 60.118 49.070 108.748 109.226 108.748 60.324 0 109.227-48.902 109.227-109.227 0-60.156-48.63-108.954-108.722-109.226h-0.026c-0.142-0.001-0.311-0.001-0.479-0.001-60.324 0-109.227 48.902-109.227 109.227 0 0.168 0 0.337 0.001 0.505v-0.026zM336.414 45.704c0-34.536 27.997-62.532 62.532-62.532s62.532 27.997 62.532 62.532c0 34.536-27.997 62.532-62.532 62.532v0c-34.443-0.231-62.302-28.090-62.532-62.51v-0.022zM297.502 214.425c0 0 0 0-0.001 0-11.846 0-21.679 8.621-23.566 19.931l-0.019 0.14-28.297 169.882c-0.781 1.754-1.236 3.8-1.236 5.953 0 0.392 0.015 0.78 0.045 1.164l-0.003-0.051-82.603 501.385h-138.035c-13.026 0-23.586 10.56-23.586 23.586s10.56 23.586 23.586 23.586v0h158.106c0 0 0 0 0.001 0 11.846 0 21.679-8.621 23.566-19.931l0.019-0.14 16.589-102.639h875.281c7.654-0.158 14.429-3.785 18.836-9.369l0.040-0.052c2.843-3.294 4.575-7.617 4.575-12.345 0-2.344-0.426-4.589-1.204-6.661l0.043 0.131-106.189-403.456c-2.383-10.201-11.4-17.683-22.165-17.683-0.092 0-0.183 0.001-0.275 0.002h-694.702l21.231-126.293h650.035c13.026 0 23.586-10.56 23.586-23.586s-10.56-23.586-23.586-23.586v0zM288.082 433.868h684.203l94.379 356.25h-837.598z" />
+<glyph unicode="&#xe941;" glyph-name="mail" horiz-adv-x="1018" d="M-0.065-64v549.171l164.489 153.088v233.643h250.505l94.242 88.098 94.276-88.098h250.505v-235.52l0.683 0.683 163.43-152.439v-548.625zM56.016-31.3h906.001l-277.675 277.675-175.138-116.975-175.172 116.975zM712.537 264.943l273.067-273.067v455.1zM32.976-8.124l272.862 273.067-272.862 182.033zM197.123 376.9l312.081-207.838 312.081 207.838v461.995h-624.196zM853.985 398.916l121.446 81.203-121.481 113.084zM42.943 479.983l121.446-81.203v194.56zM462.783 871.902h92.843l-46.455 43.042zM558.356 313.105v33.041h33.041v-33.041zM492.991 313.105v33.041h33.041v-33.041zM427.284 313.105v33.041h33.041v-33.041zM425.202 430.080c-26.49 11.767-47.802 31.186-61.613 55.434l-0.339 0.647c-12.578 23.057-19.975 50.503-19.975 79.676 0 0.537 0.003 1.074 0.008 1.609l-0.001-0.082c-0.002 0.352-0.004 0.768-0.004 1.184 0 32.504 8.414 63.044 23.182 89.559l-0.48-0.938c14.269 26.703 35.59 48.025 61.496 61.903l0.797 0.39c25.272 12.935 55.131 20.516 86.76 20.516 1.311 0 2.618-0.013 3.923-0.039l-0.195 0.003c1.065 0.024 2.32 0.038 3.578 0.038 26.626 0 51.795-6.24 74.124-17.336l-0.97 0.436c21.611-10.792 39.066-27.15 50.892-47.221l0.308-0.565c11.247-18.855 17.896-41.583 17.896-65.863 0-0.557-0.003-1.113-0.010-1.668l0.001 0.084c0.001-0.23 0.002-0.503 0.002-0.776 0-29.663-10.098-56.967-27.044-78.663l0.213 0.283c-18.915-26.97-49.864-44.384-84.881-44.384-0.519 0-1.037 0.004-1.555 0.011l0.078-0.001c-0.507-0.023-1.101-0.036-1.699-0.036-7.221 0-13.991 1.926-19.826 5.293l0.192-0.102c-4.86 3.355-8.342 8.408-9.598 14.286l-0.027 0.152c-11.758-12.111-28.191-19.627-46.38-19.627-0.026 0-0.053 0-0.079 0h0.004c-0.515-0.015-1.12-0.024-1.728-0.024-17.89 0-34.018 7.541-45.38 19.619l-0.030 0.032c-11.574 12.88-18.653 30.004-18.653 48.781 0 1.235 0.031 2.463 0.091 3.682l-0.007-0.172c-0.002 0.293-0.004 0.64-0.004 0.988 0 27.171 8.496 52.358 22.975 73.049l-0.273-0.411c14.338 24.346 40.358 40.463 70.156 40.619h0.022c0.872 0.055 1.891 0.086 2.918 0.086 17.719 0 33.264-9.304 42.017-23.294l0.121-0.208 4.13 18.91h45.056l-25.805-122.88c-1.122-4.374-1.969-9.547-2.37-14.844l-0.019-0.311c-0.016-0.204-0.025-0.442-0.025-0.682 0-2.232 0.782-4.281 2.087-5.889l-0.014 0.017c1.028-1.255 2.578-2.050 4.314-2.050 0.055 0 0.111 0.001 0.166 0.002h-0.008c8.3 1.169 15.606 4.748 21.365 9.995l-0.032-0.028c12.016 9.062 21.591 20.725 27.99 34.191l0.238 0.557c6.897 13.207 10.967 28.838 11.025 45.413v0.019c0.020 0.714 0.031 1.554 0.031 2.397 0 27.026-11.633 51.334-30.164 68.192l-0.075 0.067c-20.909 17.873-48.265 28.749-78.162 28.749-2.523 0-5.028-0.077-7.512-0.23l0.341 0.017c-1.5 0.053-3.262 0.083-5.031 0.083-27.061 0-52.478-7.040-74.519-19.389l0.771 0.397c-21.157-12.594-37.817-30.802-48.188-52.581l-0.315-0.735c-10.16-20.983-16.121-45.628-16.179-71.66v-0.020c-0.003-0.332-0.005-0.723-0.005-1.116 0-23.898 6.786-46.21 18.536-65.116l-0.304 0.525c11.981-19.503 29.563-34.553 50.493-43.094l0.707-0.255c21.214-8.666 45.831-13.696 71.622-13.696 1.436 0 2.869 0.016 4.298 0.047l-0.213-0.004c1.327-0.032 2.889-0.051 4.456-0.051 23.57 0 46.162 4.185 67.075 11.851l-1.353-0.434c19.148 7.436 35.193 19.266 47.454 34.303l0.162 0.205h36.454c-11.671-23.345-29.772-42.006-51.982-54.051l-0.651-0.323c-26.963-14.358-58.963-22.79-92.933-22.79-2.129 0-4.25 0.033-6.363 0.099l0.309-0.008c-1.553-0.037-3.382-0.059-5.216-0.059-33.5 0-65.337 7.12-94.081 19.93l1.471-0.586zM478.177 628.053c-9.034-8.531-15.66-19.521-18.811-31.899l-0.099-0.46c-3.672-11.056-5.923-23.8-6.21-37.028l-0.002-0.143c-0.088-1.099-0.139-2.379-0.139-3.67 0-10.624 3.404-20.453 9.18-28.456l-0.098 0.143c5.046-6.266 12.718-10.242 21.318-10.242 0.125 0 0.251 0.001 0.375 0.003h-0.019c6.701 0.050 12.977 1.828 18.416 4.911l-0.188-0.098c4.925 3.042 9.126 6.689 12.666 10.911l0.065 0.080c7.067 8.497 12.512 18.617 15.695 29.695l0.143 0.581c3.598 10.896 5.94 23.485 6.509 36.534l0.010 0.296c0.086 1.025 0.136 2.219 0.136 3.424 0 10.034-3.417 19.269-9.151 26.606l0.072-0.095c-5.331 6.285-13.235 10.247-22.064 10.247-0.223 0-0.446-0.003-0.668-0.008l0.033 0.001c-10.606-0.153-20.17-4.492-27.137-11.436l0.001 0.001z" />
+<glyph unicode="&#xe942;" glyph-name="add" d="M928 496h-368v368h-112v-368h-352v-96h352v-368h112v368h368z" />
+<glyph unicode="&#xe943;" glyph-name="cross" d="M920.96 123.664l-324.352 324.336 324.352 324.336-98.704 98.704-324.336-324.336-310.256 310.224-84.592-84.592 310.224-310.256-324.336-324.336 98.704-98.704 324.336 324.352 324.336-324.352z" />
+<glyph unicode="&#xe944;" glyph-name="inventory" horiz-adv-x="1009" d="M90.798 384.947h827.271v272.394h-232.039c-10.089-35.31-25.222-65.576-50.443-85.754-35.31-30.266-80.709-50.443-131.153-50.443s-95.842 20.177-131.153 50.443c-25.222 20.177-45.399 50.443-50.443 85.754h-232.039v-272.394zM353.103 727.962h524.611l-116.020 131.153h-479.212l-141.241-131.153h211.862zM610.365 657.341h-211.862c5.044-10.089 10.089-25.222 20.177-35.31 25.222-15.133 45.399-30.266 80.709-30.266s65.576 10.089 85.754 30.266c10.089 10.089 20.177 20.177 25.222 35.31zM30.266 722.917l211.862 196.729c5.044 5.044 15.133 10.089 25.222 10.089h509.478c10.089 0 20.177-5.044 25.222-10.089l176.552-201.773v-716.296c0-20.177-15.133-35.31-35.31-35.31h-887.803c-20.177 0-35.31 15.133-35.31 35.31v691.074c-5.044 10.089 5.044 20.177 10.089 30.266v0zM398.502 314.326c5.044-15.133 15.133-25.222 25.222-35.31 20.177-20.177 50.443-30.266 85.754-30.266s60.532 10.089 85.754 30.266c10.089 10.089 20.177 20.177 25.222 35.31h-221.951zM322.837 314.326h-232.039v-272.394h832.315v272.394h-232.039c-10.089-35.31-25.222-65.576-50.443-85.754-35.31-30.266-80.709-50.443-131.153-50.443s-95.842 20.177-131.153 50.443c-30.266 20.177-50.443 50.443-55.488 85.754z" />
+<glyph unicode="&#xe945;" glyph-name="caret-down" d="M96 736h840l-409.392-608.384-426.608 607.184z" />
+<glyph unicode="&#xe946;" glyph-name="edit1" d="M915.904 672.176c-59.856 59.888-119.744 119.776-179.664 179.648-16.192 16.192-29.664 16.256-45.664 0.24-178.432-178.4-356.816-356.8-535.328-535.088-7.024-6.992-11.008-14.784-12.912-24.432-10.672-54.032-21.68-108.048-32.608-162.048-4.32-21.344-8.848-42.688-13.024-64.096-3.728-19.232 7.584-34.304 27.216-34.4 2 0.352 5.792 0.912 9.536 1.664 74.528 15.008 149.024 30.080 223.584 44.944 9.312 1.872 16.864 5.84 23.648 12.624 178.336 178.512 356.768 356.88 535.168 535.264 16.176 16.176 16.176 29.552 0.048 45.68zM601.616 683.76c16.864-16.848 35.184-35.184 52.88-52.832-105.232-105.232-210.704-210.688-315.472-315.488-17.36 17.424-35.584 35.712-52.848 52.992 104.16 104.16 209.648 209.584 315.44 315.328zM360.24 145.76c-10.224-11.824-22.448-17.104-37.616-19.952-53.52-10.080-106.816-21.376-160.176-32.192-1.664-0.336-3.328-0.496-6.080-0.928 3.968 19.856 7.712 38.8 11.52 57.728 8.080 40.128 15.984 80.256 24.544 120.288 1.248 5.872 4.608 12.048 8.736 16.432 13.856 14.848 28.512 28.976 42 42.48 50.064-50.048 99.792-99.744 150.352-150.304-10.272-10.24-22.592-21.2-33.28-33.552zM432.912 221.456c-17.424 17.456-35.712 35.728-53.008 53.040 104.32 104.304 209.824 209.76 315.552 315.488 17.008-16.992 35.344-35.328 53.040-53.008-105.296-105.248-210.784-210.72-315.584-315.52zM787.968 575.712c-49.2 49.136-98.96 98.912-148.256 148.144 24.304 24.304 49.28 49.264 73.76 73.744 49.088-49.088 98.912-98.848 148.208-148.112-24.32-24.352-49.296-49.328-73.712-73.776z" />
+<glyph unicode="&#xe947;" glyph-name="arrow-down" d="M908.496 683.808c-25.808 26.928-67.952 26.928-93.776 0l-302.704-312.752-302.896 312.752c-25.792 26.928-67.744 26.928-93.744 0-25.84-26.592-25.84-70.208 0-97.456l349.76-360.816c25.808-26.912 67.776-26.912 93.76 0l349.6 360.816c26 27.264 26 70.88 0 97.456z" />
+<glyph unicode="&#xe948;" glyph-name="child" horiz-adv-x="2560" d="M42.667 942.933h204.8v-947.2h-204.8v947.2zM42.667 157.867h2483.2v-204.8h-2483.2v204.8z" />
+<glyph unicode="&#xe949;" glyph-name="group" d="M354.462 960v-354.462h-354.462v-669.538h669.538v354.462h354.462v669.538h-669.538zM567.138 30.523h-472.615v472.615h228.431v-252.062h244.185v-220.554zM567.138 392.862v-39.385h-141.785v157.538h141.785v-118.154zM929.477 392.862h-259.938v212.677h-212.677v259.938h472.615v-472.615zM425.354 503.138v0-157.538h141.785v15.754h-141.785z" />
+<glyph unicode="&#xe94a;" glyph-name="bar" d="M0 960h1024v-149.662h-1024v149.662zM0 526.769h1024v-149.662h-1024v149.662zM0 85.662h1024v-149.662h-1024v149.662z" />
+<glyph unicode="&#xe94b;" glyph-name="Search" d="M640.218 250.596c-172.546-120.030-405.107-82.523-532.642 82.523-120.030 157.542-90.022 375.099 52.516 502.631s360.096 127.535 502.631 7.503c157.542-127.535 180.045-360.096 52.516-517.637 0 0-7.503-7.503-7.503-7.503l255.067-255.067c15.004-15.004 22.509-37.513 7.503-60.015 0 0 0-7.503-7.503-7.503v0c-15.004-15.004-45.012-22.509-60.015-7.503 0 0 0 0-7.503 7.503-82.523 82.523-172.546 165.041-255.067 255.067zM415.162 880.76c-180.045 0-330.089-157.542-322.584-337.588 0-180.045 157.542-330.089 337.588-322.584 180.045 0 322.584 150.037 322.584 330.089s-142.539 330.089-322.584 330.089c-7.503 0-15.004 0-15.004 0zM932.794-41.98c-15.004 0-30.008 7.503-37.513 15.004 0 0-7.503 0-7.503 7.503-30.008 30.008-60.015 52.516-90.022 82.523-45.012 52.516-105.026 105.026-157.542 165.041-180.045-112.531-412.606-75.018-547.645 90.022-120.030 165.041-97.527 390.103 60.015 517.637 150.037 135.034 375.099 135.034 525.137 7.503 82.523-67.52 127.535-157.542 142.539-255.067 7.503-105.026-22.509-202.554-82.523-277.572l247.564-240.061c7.503-7.503 15.004-22.509 22.509-37.513 0-15.004 0-30.008-15.004-45.012 0 0-7.503-7.503-7.503-7.503-15.004-15.004-30.008-22.509-52.516-22.509 7.503 0 7.503 0 0 0zM640.218 265.6l7.503-7.503c52.516-60.015 112.531-112.531 172.546-172.546 30.008-30.008 60.015-60.015 90.022-82.523v0c7.503-7.503 15.004-7.503 22.509-7.503s15.004 0 15.004 7.503c0 0 7.503 7.503 7.503 7.503 7.503 7.503 7.503 15.004 7.503 15.004 0 7.503-7.503 15.004-7.503 15.004l-262.568 262.568 7.503 15.004c0 0 7.503 7.503 7.503 7.503 60.015 75.018 90.022 165.041 75.018 255.067s-52.516 180.045-127.535 240.061c-135.034 120.030-345.092 120.030-480.126-7.503-142.539-120.030-165.041-330.089-52.516-480.126 120.030-150.037 345.092-187.55 510.134-75.018l7.503 7.503zM422.661 205.586c-187.55 0-345.092 150.037-345.092 337.588s150.037 345.092 337.588 352.591c7.503 0 7.503 0 15.004 0 187.55 0 337.588-157.542 337.588-345.092s-150.037-337.588-345.092-345.092c0 0 0 0 0 0zM422.661 865.756c0 0-7.503 0-7.503 0v0c-172.546 0-307.58-150.037-307.58-322.584s142.539-315.085 322.584-307.58c172.546 0 307.58 142.539 307.58 315.085s-142.539 315.085-315.085 315.085c0 0 0 0 0 0z" />
+<glyph unicode="&#xe94c;" glyph-name="download" horiz-adv-x="1050" d="M987.241 130.297v-126.031h-918.974v126.031h-52.513v-152.287c0-15.754 10.503-26.256 26.256-26.256h971.487c15.754 0 26.256 10.503 26.256 26.256v152.287h-52.513zM813.949 482.133l-262.564-262.564v729.928h-52.513v-729.928l-262.564 262.564-36.759-36.759 304.574-304.574c5.251-5.251 10.503-5.251 15.754-5.251s10.503 0 15.754 5.251l304.574 304.574-26.256 36.759z" />
+<glyph unicode="&#xe94d;" glyph-name="share" horiz-adv-x="1185" d="M438.857 299.701l-10.737 97.971c-1.342 6.71-16.105 166.417 89.919 283.177 65.761 73.814 163.733 114.076 291.229 119.444l1.342 150.312 361.017-263.046-361.017-268.414v157.022c-5.368 0-10.737 0-17.447 0-208.021 0-287.203-116.76-316.729-185.206l-37.578-91.261zM861.609 851.292l-1.342-101.997h-24.157c-124.813 0-218.758-34.894-279.151-103.339-41.604-46.972-61.735-101.997-71.13-147.628 95.287 112.734 241.573 126.155 308.676 126.155 28.183 0 45.63-2.684 45.63-2.684l21.473-2.684v-101.997l226.81 169.101-226.81 165.075zM858.925-46.553h-845.505v272.44h49.657v-222.784h744.849v222.784h50.999z" />
+<glyph unicode="&#xe94e;" glyph-name="magic_link" horiz-adv-x="1023" d="M880.14 684.069c0 6.793-2.597 13.187-7.393 17.982l-107.695 107.695c-9.99 9.99-25.975 9.99-35.965 0l-717.699-717.699c-9.99-9.99-9.99-25.975 0-35.965l107.695-107.695c4.795-4.795 11.189-7.393 17.982-7.393s13.187 2.597 17.982 7.393l717.699 717.699c4.795 4.795 7.393 11.189 7.393 17.982zM648.966 514.036l-71.73 71.73 170.034 170.034 71.73-71.73-170.034-170.034zM917.504 753.002c0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501 0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.356 101.501-101.501zM562.251 753.002c0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501 0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.556 101.501-101.501zM917.504 600.751c0-56.145-45.356-101.501-101.501-101.501 56.145 0 101.501-45.356 101.501-101.501 0 56.145 45.356 101.501 101.501 101.501-56.145 0-101.501 45.356-101.501 101.501z" />
+<glyph unicode="&#xe94f;" glyph-name="dropdown" horiz-adv-x="1746" d="M728.132 37.209c79.38-87.318 206.388-87.318 285.767 0l674.729 750.14c79.38 87.318 47.628 158.76-71.442 158.76h-1492.341c-119.070 0-146.853-71.442-71.442-158.76l674.729-750.14z" />
+<glyph unicode="&#xe950;" glyph-name="plus" horiz-adv-x="1011" d="M505.519 944.486c-40.738 0-74.069-33.331-74.069-74.069v-351.826h-351.826c-40.738 0-74.069-33.331-74.069-74.069s33.331-74.069 74.069-74.069h351.826v-351.826c0-40.738 33.331-74.069 74.069-74.069s74.069 33.331 74.069 74.069v351.826h351.826c40.738 0 74.069 33.331 74.069 74.069s-33.331 74.069-74.069 74.069h-351.826v351.826c0 40.738-33.331 74.069-74.069 74.069z" />
+<glyph unicode="&#xe951;" glyph-name="search" horiz-adv-x="1027" d="M434.473 834.232c171.101 0 309.908-138.807 309.908-309.908s-138.606-309.908-309.908-309.908-309.908 138.807-309.908 309.908v0c0 171.101 138.807 309.908 309.908 309.908zM434.473 956.791c-238.9 0-432.467-193.768-432.467-432.668 0-173.709 104.105-330.568 263.973-398.367 220.045-93.073 473.989 10.029 566.861 230.074s-10.029 473.989-230.074 566.861c-53.156 22.666-110.524 34.3-168.293 34.1v0 0zM1026.977 22.911l-86.662-86.662-308.067 308.067 86.662 86.662 308.067-308.067z" />
+<glyph unicode="&#xe952;" glyph-name="building" horiz-adv-x="848" d="M830.53 924.322v-962.004h-171.023v213.779h-235.157v-213.779h-171.023v962.004h577.203zM766.397 860.189h-106.889v-106.889h106.889v106.889zM595.374 860.189h-106.889v-106.889h106.889v106.889zM424.351 860.189h-106.889v-106.889h106.889v106.889zM766.397 689.166h-106.889v-106.889h106.889v106.889zM595.374 689.166h-106.889v-106.889h106.889v106.889zM424.351 689.166h-106.889v-106.889h106.889v106.889zM231.95 646.41v-684.092h-213.779v684.092h213.779zM167.816 582.276h-85.511v-85.511h85.511v85.511zM766.397 518.143h-106.889v-106.889h106.889v106.889zM595.374 518.143h-106.889v-106.889h106.889v106.889zM424.351 518.143h-106.889v-106.889h106.889v106.889zM167.816 432.631h-85.511v-85.511h85.511v85.511zM766.397 347.12h-106.889v-106.889h106.889v106.889zM595.374 347.12h-106.889v-106.889h106.889v106.889zM424.351 347.12h-106.889v-106.889h106.889v106.889zM167.816 282.986h-85.511v-85.511h85.511v85.511zM167.816 133.341h-85.511v-85.511h85.511v85.511z" />
+<glyph unicode="&#xe953;" glyph-name="options" horiz-adv-x="1159" d="M393.432 841.432c-16.168 64.674-70.063 107.789-140.126 107.789s-123.958-48.505-140.126-107.789h-113.179v-70.063h113.179c16.168-64.674 70.063-107.789 140.126-107.789s123.958 48.505 140.126 107.789h765.305v70.063h-765.305zM258.695 733.642c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c0-37.726-32.337-70.063-70.063-70.063zM905.432 588.126c-64.674 0-123.958-48.505-140.126-107.789h-765.305v-70.063h765.305c16.168-64.674 70.063-107.789 140.126-107.789s123.958 48.505 140.126 107.789h113.179v70.063h-113.179c-16.168 59.284-70.063 107.789-140.126 107.789zM905.432 372.547c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c5.389-37.726-26.947-70.063-70.063-70.063zM474.274 227.032c-64.674 0-123.958-48.505-140.126-107.789h-328.758v-70.063h328.758c16.168-64.674 70.063-107.789 140.126-107.789 64.674 0 123.958 48.505 140.126 107.789h549.726v70.063h-549.726c-16.168 59.284-75.453 107.789-140.126 107.789zM474.274 6.063c-37.726 0-70.063 32.337-70.063 70.063s32.337 70.063 70.063 70.063 70.063-32.337 70.063-70.063c0-37.726-32.337-70.063-70.063-70.063z" />
+<glyph unicode="&#xe954;" glyph-name="checkboxfill-icon" d="M96 864v-832h832v832h-832zM410.512 166.352c-75.008 77.28-188.8 195.072-264.336 272.88 32.768 32.72 65.008 64.944 97.376 97.232 42.336-42.384 123.248-125.056 168.048-169.952 124.784 122.416 247.824 243.12 370.176 363.12 32.88-32.88 64.928-64.928 96.032-96-154.848-154.864-310.56-310.56-467.296-467.28z" />
+<glyph unicode="&#xe955;" glyph-name="dots-three-vertical" d="M512.051 573.44c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64zM512.051 706.56c62.208 0 112.589 50.483 112.589 112.64s-50.381 112.64-112.589 112.64c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64zM512.051 215.040c-62.208 0-112.691-50.432-112.691-112.64s50.483-112.64 112.691-112.64c62.208 0 112.589 50.432 112.589 112.64s-50.381 112.64-112.589 112.64z" />
+<glyph unicode="&#xe956;" glyph-name="calender" horiz-adv-x="922" d="M204.8 618.598h102.4v-102.4h-102.4v102.4zM204.8 413.798h102.4v-102.4h-102.4v102.4zM204.8 208.998h102.4v-102.4h-102.4v102.4zM819.2 857.6c55.978-1.41 100.99-46.422 102.397-102.267l0.003-0.133v-716.8c-1.41-55.978-46.422-100.99-102.267-102.397l-0.133-0.003h-716.8c-0.772-0.023-1.679-0.036-2.59-0.036-27.383 0-52.002 11.838-69.018 30.675l-0.072 0.081c-18.747 18.193-30.46 43.544-30.72 71.631v716.849c1.41 55.978 46.422 100.99 102.267 102.397l0.133 0.003h51.2v102.4h102.4v-102.4h409.6v102.4h102.4v-102.4zM819.2 38.4v699.733h-716.8v-699.733zM409.6 618.598h102.4v-102.4h-102.4v102.4zM614.4 618.598h102.4v-102.4h-102.4v102.4zM409.6 413.798h102.4v-102.4h-102.4v102.4zM409.6 208.998h102.4v-102.4h-102.4v102.4zM614.4 413.798h102.4v-102.4h-102.4v102.4zM614.4 208.998h102.4v-102.4h-102.4v102.4z" />
+<glyph unicode="&#xe957;" glyph-name="car" horiz-adv-x="1231" d="M222.208 520.792c-0.015 0-0.033 0-0.051 0-54.369 0-98.45-44.046-98.509-98.401v-0.006c0.058-54.325 44.081-98.348 98.401-98.406h0.006c54.325 0.058 98.348 44.081 98.406 98.401v0.006c-0.058 54.271-43.994 98.261-98.239 98.406h-0.014zM222.208 354.341c-37.579 0.029-68.038 30.47-68.096 68.039v0.006c0.029 37.597 30.499 68.067 68.093 68.096h0.003c37.597-0.029 68.067-30.499 68.096-68.093v-0.003c-0.058-37.575-30.517-68.016-68.093-68.045h-0.003zM123.648 207.858h196.762v74.803h-196.762zM153.958 252.351h136.141v-14.182h-135.731zM987.187 613.976v0c0 156.006-192.41 227.021-371.2 227.021s-371.2-71.066-371.2-227.021v-15.36h742.4zM275.814 629.336c12.698 124.621 182.221 181.555 340.122 181.555s327.68-56.934 340.122-181.555zM1009.766 520.792c-54.325-0.058-98.348-44.081-98.406-98.401v-0.006c0.058-54.325 44.081-98.348 98.401-98.406h0.006c54.325 0.058 98.348 44.081 98.406 98.401v0.006c-0.058 54.325-44.081 98.348-98.401 98.406h-0.006zM1009.766 354.341c-37.557 0.058-67.987 30.488-68.045 68.039v0.006c0 37.59 30.458 68.067 68.042 68.096h0.003c37.597-0.029 68.067-30.499 68.096-68.093v-0.003c-0.058-37.575-30.517-68.016-68.093-68.045h-0.003zM911.36 207.858h196.762v74.803h-196.762zM941.722 252.351h136.090v-14.182h-136.090zM470.835 403.647h290.253v-30.31h-290.253v30.31zM470.835 354.29h290.253v-30.31h-290.253v30.31zM470.835 304.933h290.253v-30.31h-290.253v30.31zM470.835 255.576h290.253v-30.31h-290.253v30.31zM1221.376 498.469c-6.545 60.783-50.239 109.783-107.659 124.155l-0.988 0.209-115.251 270.182c-25.261 40.501-69.572 67.051-120.084 67.051-2.154 0-4.297-0.048-6.427-0.144l0.303 0.011h-512c-1.521 0.059-3.306 0.092-5.1 0.092-50.602 0-94.969-26.693-119.788-66.767l-0.347-0.602-115.149-269.875c-58.481-14.612-102.206-63.732-108.593-123.996l-0.054-0.625-10.24-367.718h112.64v-109.67c0.058-46.831 38.007-84.78 84.833-84.838h48.39c46.831 0.058 84.78 38.007 84.838 84.833v109.676h569.549v-109.67c0.058-46.831 38.007-84.78 84.833-84.838h48.441c46.831 0.058 84.78 38.007 84.838 84.833v109.676h112.64zM246.63-33.704h-48.435c-30.103 0.029-54.499 24.425-54.528 54.525v109.673h157.389v-109.67c-0.029-30.067-24.366-54.441-54.417-54.528h-0.008zM1034.189-33.704h-48.435c-30.103 0.029-54.499 24.425-54.528 54.525v109.673h157.389v-109.67c-0.029-30.121-24.454-54.528-54.579-54.528-0.018 0-0.036 0-0.054 0h0.003zM31.898 160.856l9.216 336.384c3.328 76.186 89.19 97.28 92.774 98.099l7.475 1.741 120.934 283.494c21.504 47.616 89.446 49.152 98.355 49.152h512c7.731 0 75.93-1.382 97.28-48.845l121.139-283.75 7.475-1.741c3.635-0.87 89.446-21.914 92.774-97.894l9.216-336.589z" />
+<glyph unicode="&#xe958;" glyph-name="download1" horiz-adv-x="910" d="M796.333 277.333h113.801v-341.333h-910.268v341.333h113.801v-227.533h682.667zM676.867 391.134l-227.533-227.533-227.601 227.533h170.667v568.866h113.801v-568.866z" />
+<glyph unicode="&#xe959;" glyph-name="edit11" horiz-adv-x="1007" d="M-0.061 149.823l624.64 624.64 213.709-213.811-624.64-624.64h-213.709zM995.779 729.305l-101.274-101.274-213.811 213.811 101.274 101.274c9.923 10.404 23.892 16.873 39.373 16.873s29.45-6.469 39.352-16.851l0.020-0.022 129.434-129.434c10.405-9.409 16.915-22.957 16.915-38.026 0-0.492-0.007-0.981-0.021-1.47l0.002 0.072c0-16.794 0-39.526-11.264-44.954z" />
+<glyph unicode="&#xe95a;" glyph-name="plane" d="M247.981 723.058c-0.716-0.092-1.352-0.224-1.962-0.396l0.099 0.019-106.925-35.757c-4.757-1.675-8.103-6.138-8.103-11.372 0-1.393 0.237-2.735 0.671-3.982l-0.022 0.086c0.946-2.815 2.837-5.11 5.273-6.557l0.052-0.029s136.579-81.943 216.019-129.875l-138.174-49.314-90.355 45.547c-1.476 0.686-3.209 1.084-5.031 1.084-1.015 0-2.010-0.12-2.946-0.361l0.086 0.017-107.303-23.725c-5.394-1.258-9.352-6.038-9.352-11.726 0-0.947 0.114-1.875 0.324-2.77l-0.017 0.086c0.426-1.832 1.214-3.427 2.288-4.797l-0.017 0.020 118.963-154.753 0.74-0.74c16.612-17.219 39.896-27.903 65.668-27.903 1.012 0 2.013 0.017 3.011 0.052l-0.149-0.005c26.89 0.375 52.593 4.903 76.68 12.955l-1.777-0.517 228.159 70.761c0.568-1.43 1.329-2.666 2.288-3.734l-0.016 0.017 198.403-208.946c2.2-2.298 5.294-3.734 8.723-3.734 1.462 0 2.873 0.258 4.176 0.74l-0.086-0.023 88.452 33.115c4.514 1.811 7.639 6.153 7.639 11.23 0 1.573-0.299 3.079-0.848 4.456l0.026-0.086c-0.148 0.396-0.286 0.715-0.432 1.026l0.023-0.056s-69.385 141.94-108.787 228.159l262.795 81.712c22.128 4.765 40.808 17.070 53.658 34.041l0.161 0.224c8.746 13.024 13.953 29.058 13.953 46.303 0 0.74-0.014 1.485-0.027 2.22l0.003-0.112c-0.606 15.733-7.106 29.837-17.325 40.275l0.015-0.015c-11.188 11.888-24.388 21.729-39.092 28.99l-0.802 0.361c-31.946 16.202-69.604 25.802-109.486 26.066l-0.086 0.001c-40.445-1.703-78.366-10.543-113.192-25.273l2.131 0.805-139.26-46.71-353.823 82.836c-0.74 0.155-1.591 0.253-2.461 0.253s-1.718-0.086-2.534-0.258l0.085 0.017zM250.623 698.586l353.823-82.46c0.76-0.168 1.634-0.262 2.529-0.262 1.393 0 2.725 0.231 3.97 0.67l-0.086-0.022 143.054 47.449c30.331 13.14 65.531 21.557 102.486 23.325l0.685 0.023c35.971-0.397 69.832-8.979 99.967-23.959l-1.34 0.602c12.817-6.208 23.766-14.159 33.084-23.699l0.017-0.018c6.354-6.279 10.443-14.857 10.91-24.378l0.005-0.086c0.017-0.568 0.029-1.242 0.029-1.91 0-12.179-3.658-23.509-9.927-32.946l0.137 0.224c-9.745-12.941-23.931-22.073-40.268-25.15l-0.404-0.061h-0.37l-690.398-214.602c-20.187-6.765-43.453-10.829-67.621-11.167l-0.164-0.002c-0.911-0.049-1.976-0.069-3.045-0.069-18.338 0-34.957 7.364-47.057 19.291l-0.74 0.74-106.89 139.26 84.318 18.625 91.475-45.547c1.65-0.911 3.622-1.45 5.712-1.45 1.454 0 2.838 0.258 4.129 0.733l-0.086-0.023 166.412 59.854c4.621 1.749 7.838 6.142 7.838 11.273 0 1.515-0.282 2.967-0.791 4.299l0.025-0.086c-0.936 2.503-2.606 4.559-4.762 5.935l-0.052 0.026c-65.921 39.816-189.428 113.779-215.687 129.531l79.031 26.336zM861.622 668.792l-42.166-13.187 11.654-37.248 42.166 13.187zM761.847 638.997l-42.166-13.557 11.654-37.248 42.166 13.557zM649.292 598.326l-42.574-13.149 12.063-37.248 42.166 13.187-11.654 37.248zM546.873 563.694l-42.166-13.149 11.654-37.248 42.166 13.187zM669.998 443.613c37.467-81.943 98.323-205.367 105.032-219.108l-68.868-26.067-187.487 198.364 151.323 46.71z" />
+<glyph unicode="&#xe95b;" glyph-name="minus" horiz-adv-x="1011" d="M931.414 522.995h-851.79c-40.738 0-74.069-33.331-74.069-74.069s33.331-74.069 74.069-74.069h851.79c40.738 0 74.069 33.331 74.069 74.069s-33.331 74.069-74.069 74.069z" />
+<glyph unicode="&#xe95c;" glyph-name="trash" d="M858.768 742.96h-173.536v28.080c0 50.224-41.152 91.072-91.744 91.072h-164.96c-50.592 0-91.728-40.848-91.728-91.072v-28.080h-173.536c-12.864 0-23.152-10.208-23.152-22.992 0-12.768 10.288-22.976 23.152-22.976h41.84v-539.968c0-67.744 55.552-122.912 123.792-122.912h364.224c68.24 0 123.792 55.152 123.792 122.912v539.968h41.84c12.864 0 23.136 10.208 23.136 22.976 0.016 12.784-10.256 22.992-23.12 22.992v0zM383.088 771.040c0 24.864 20.4 45.104 45.44 45.104h164.96c25.040 0 45.44-20.256 45.44-45.104v-28.080h-255.84v28.080zM770.624 157.024c0-42.384-34.816-76.944-77.504-76.944h-364.224c-42.688 0-77.504 34.544-77.504 76.944v539.968h519.392v-539.968h-0.16zM511.008 162.48c12.864 0 23.152 10.208 23.152 22.976v406.176c0 12.768-10.288 22.992-23.152 22.992s-23.152-10.224-23.152-22.992v-406c0-12.768 10.288-23.152 23.152-23.152v0zM359.936 187.84c12.864 0 23.152 10.224 23.152 22.992v355.6c0 12.768-10.288 22.992-23.152 22.992s-23.136-10.224-23.136-22.992v-355.6c0-12.768 10.464-22.992 23.136-22.992v0zM662.080 187.84c12.864 0 23.152 10.224 23.152 22.992v355.6c0 12.768-10.304 22.992-23.152 22.992s-23.152-10.208-23.152-22.992v-355.6c0-12.768 10.288-22.992 23.152-22.992v0z" />
+<glyph unicode="&#xe95d;" glyph-name="checkbox-icon" d="M96 864v-832h832v832h-832zM832 128h-640v640h640v-640z" />
+<glyph unicode="&#xe95e;" glyph-name="read" horiz-adv-x="1233" d="M233.454 186.949l42.052 42.052c-86.267 55.596-156.563 128.729-207.269 214.784l-1.627 2.986c111.053 191.046 314.77 317.442 548.008 317.442 0.613 0 1.226-0.001 1.839-0.003h-0.095c60.503-0.316 118.9-8.769 174.331-24.317l-4.62 1.107 46.421 46.421c-64.484 21.714-138.757 34.423-215.944 34.815l-0.188 0.001c-266.888-0.020-498.575-150.718-614.627-371.662l-1.821-3.805c56.33-106.257 135.335-193.674 231.035-258.23l2.505-1.593zM999.543 707.619l-42.052-42.052c87.047-55.116 157.889-128.272 208.725-214.618l1.605-2.948c-112.020-191.243-316.495-317.645-550.492-317.645-0.243 0-0.487 0-0.73 0h0.038c-61.004 0.319-119.899 8.771-175.838 24.324l4.693-1.114-46.421-46.421c63.954-22.076 137.655-34.824 214.333-34.824 1.137 0 2.273 0.003 3.408 0.008l-0.175-0.001c266.888 0.020 498.575 150.718 614.627 371.662l1.821 3.805c-56.33 106.257-135.335 193.674-231.035 258.23l-2.505 1.593zM503.244 292.831l268.356 268.356 40.619 42.052 92.843 91.409 42.052 43.486 181.248 179.814-42.052 42.052-194.355-194.355-43.486-44.988-76.868-76.868-42.052-40.619-268.356-268.356-40.619-42.052-94.276-92.843-42.052-43.486-179.883-178.381 42.052-42.052 192.922 194.355 121.788 121.788zM616.294 639.421c0.682 0.010 1.488 0.016 2.295 0.016 20.522 0 40.171-3.736 58.305-10.564l-1.14 0.377 44.988 44.988c-30.75 14.629-66.821 23.172-104.887 23.172-137.502 0-248.969-111.467-248.969-248.969 0-38.067 8.543-74.138 23.817-106.401l-0.644 1.513 44.988 44.988c-6.009 17.675-9.695 38.056-10.168 59.229l-0.004 0.231c0 0.081 0 0.177 0 0.273 0 105.567 85.579 191.147 191.147 191.147 0.096 0 0.192 0 0.288 0h-0.015zM616.362 256.581c-0.682-0.010-1.488-0.016-2.295-0.016-20.522 0-40.171 3.736-58.305 10.564l1.14-0.377-44.988-44.988c30.75-14.629 66.821-23.172 104.887-23.172 137.502 0 248.969 111.467 248.969 248.969 0 38.067-8.543 74.138-23.817 106.401l0.644-1.513-44.988-44.988c6.009-17.675 9.695-38.056 10.168-59.229l0.004-0.231c0-0.081 0-0.177 0-0.273 0-105.567-85.579-191.147-191.147-191.147-0.096 0-0.192 0-0.288 0h0.015z" />
+<glyph unicode="&#xe95f;" glyph-name="search2" d="M731.403 313.985l292.608-290.901-87.808-87.296-292.608 290.901v46.592l-17.579 17.067c-64.43-54.325-148.376-87.34-240.032-87.34-2.014 0-4.025 0.016-6.031 0.048l0.303-0.004c-3.409-0.118-7.416-0.185-11.438-0.185-101.45 0-192.944 42.629-257.547 110.951l-0.156 0.167c-68.149 68.707-110.421 163.17-110.933 267.506v0.099c-0.123 3.467-0.193 7.54-0.193 11.63 0 100.913 42.661 191.862 110.932 255.795l0.194 0.18c69.304 68.112 164.234 110.344 269.027 110.933l0.114 0.001c2.293 0.052 4.994 0.082 7.703 0.082 102.6 0 195.267-42.525 261.338-110.911l0.1-0.104c68.465-65.513 111.021-157.618 111.021-259.663 0-2.793-0.032-5.578-0.095-8.356l0.007 0.413c0.026-1.629 0.041-3.551 0.041-5.477 0-91.38-33.233-174.998-88.273-239.427l0.425 0.509 17.579-17.067h40.96zM193.035 389.591c48.434-46.795 114.482-75.63 187.264-75.63s138.829 28.835 187.341 75.704l-0.077-0.074c47.040 47.93 76.076 113.673 76.076 186.197s-29.036 138.267-76.116 186.238l0.040-0.041c-48.426 46.814-114.476 75.663-187.264 75.663s-138.838-28.849-187.34-75.736l0.076 0.073c-47.040-47.93-76.076-113.673-76.076-186.197s29.036-138.267 76.116-186.238l-0.040 0.041z" />
+<glyph unicode="&#xe960;" glyph-name="ship" horiz-adv-x="1074" d="M537.028 959.996c-0.132 0.006-0.288 0.009-0.444 0.009-1.818 0-3.533-0.439-5.046-1.216l0.062 0.029-349.645-174.848c-4.194-2.122-7.027-6.383-7.066-11.31v-294.61l-92.877-43.725c-4.213-2.168-7.044-6.485-7.044-11.464 0-1.185 0.16-2.333 0.461-3.423l-0.021 0.090 124.877-424.602c0.639-2.311 1.852-4.286 3.476-5.832l0.005-0.005c-21.328-17.398-48.815-27.982-78.769-28.109h-0.028c-43.764 0.076-82.050 23.456-103.121 58.39l-0.303 0.542c-2.264 2.157-5.335 3.484-8.717 3.484-0.086 0-0.171-0.001-0.256-0.003h0.013c-6.9 0-12.493-5.593-12.493-12.493v0c0.033-2.452 0.753-4.73 1.976-6.657l-0.031 0.052c27.25-39.912 71.784-66.286 122.583-68.291l0.297-0.009c59.773 1.918 111.074 36.369 136.95 86.153l0.42 0.887c26.27-50.693 77.586-85.156 137.121-87.034l0.249-0.006c55.421 1.481 103.522 31.474 130.32 75.791l0.394 0.702c1.875-1.218 4.168-1.942 6.63-1.942s4.756 0.724 6.678 1.971l-0.048-0.029c27.191-45.019 75.292-75.012 130.504-76.488l0.209-0.004c59.784 1.884 111.099 36.347 136.95 86.152l0.419 0.888c26.295-50.671 77.596-85.122 137.116-87.034l0.253-0.006c51.096 2.015 95.631 28.389 122.535 67.766l0.345 0.535c1.192 1.875 1.913 4.152 1.946 6.596v0.009c0 6.9-5.593 12.493-12.493 12.493v0c-0.072 0.001-0.158 0.002-0.243 0.002-3.381 0-6.453-1.327-8.722-3.489l0.005 0.005c-21.374-35.476-59.66-58.855-103.413-58.931h-0.011c-29.982 0.127-57.468 10.711-79.025 28.289l0.228-0.18c1.63 1.551 2.842 3.526 3.461 5.748l0.021 0.089 124.877 424.602c0.279 0.999 0.44 2.147 0.44 3.332 0 4.979-2.832 9.297-6.972 11.431l-0.072 0.034-92.877 43.725v294.605c-0.039 4.932-2.872 9.193-6.993 11.282l-0.073 0.033-349.645 174.848c-1.457 0.746-3.179 1.184-5.003 1.184-0.131 0-0.262-0.002-0.392-0.007l0.019 0.001zM537.028 933.833l337.203-168.55v-275.046l-331.725 156.518c-0.651 0.281-1.436 0.544-2.246 0.745l-0.109 0.023c-0.677 0.186-1.465 0.314-2.276 0.357l-0.028 0.001c-0.123 0.024-0.265 0.038-0.41 0.038s-0.286-0.014-0.423-0.041l0.014 0.002c-0.115 0.024-0.248 0.038-0.384 0.038s-0.269-0.014-0.397-0.040l0.013 0.002c-0.839-0.044-1.627-0.172-2.384-0.377l0.080 0.018c-0.919-0.224-1.704-0.487-2.459-0.807l0.104 0.039-331.725-156.518v275.149zM467.96 824.572c-1.9-0.148-3.643-0.7-5.182-1.568l0.062 0.032-174.797-87.040c-0.904-0.343-1.68-0.739-2.405-1.208l0.050 0.030c-5.424-4.224-8.985-10.621-9.367-17.86l-0.003-0.060v-112.64c-0.020-0.208-0.032-0.449-0.032-0.693 0-4.185 3.393-7.578 7.578-7.578 1.556 0 3.003 0.469 4.207 1.274l-0.028-0.017 174.797 87.040c6.558 4.097 11.028 11.011 11.718 19.005l0.006 0.093v112.384c0.051 5.12-2.253 8.909-6.605 8.806zM606.2 824.572c-4.352 0-6.656-3.686-6.656-8.602v-112.384c0.697-8.087 5.167-15 11.62-19.037l0.104-0.061 174.797-87.040c1.176-0.787 2.623-1.257 4.179-1.257 4.185 0 7.578 3.393 7.578 7.578 0 0.244-0.012 0.486-0.034 0.724l0.002-0.030v112.64c-0.384 7.299-3.945 13.696-9.315 17.879l-0.054 0.041c-0.675 0.438-1.452 0.835-2.269 1.148l-0.087 0.029-174.797 87.040c-1.489 0.769-3.24 1.252-5.095 1.33l-0.025 0.001zM451.268 791.394v-86.118l-151.45-75.725v85.965zM622.942 791.394l151.45-75.674v-86.272l-151.45 75.725zM537.080 621.257l434.381-204.851-26.573-90.931-403.866 134.605c-1.153 0.517-2.5 0.819-3.917 0.819s-2.763-0.301-3.979-0.843l0.062 0.025-403.866-134.605-26.573 90.931 87.808 41.37zM524.638 430.844v-379.75c-17.942-52.819-67.094-90.148-124.963-90.148-58.608 0-108.273 38.286-125.35 91.212l-0.26 0.932c-2.256 4.239-6.646 7.076-11.699 7.076s-9.443-2.837-11.665-7.005l-0.035-0.071c-7.076-17.543-16.413-32.651-27.87-45.871l0.17 0.201-86.272 294.246zM549.572 430.844l387.942-129.178-86.272-294.246c-11.287 13.020-20.624 28.127-27.312 44.593l-0.387 1.077c-2.256 4.239-6.646 7.076-11.699 7.076s-9.443-2.837-11.665-7.005l-0.035-0.071c-17.336-53.858-67.002-92.144-125.609-92.144-57.87 0-107.021 37.328-124.689 89.22l-0.274 0.927z" />
+<glyph unicode="&#xe961;" glyph-name="train" horiz-adv-x="857" d="M194.749 224.081c0.091 0 0.2-0.001 0.308-0.001 38.542 0 69.786 31.244 69.786 69.786 0 0.108 0 0.216-0.001 0.325v-0.017c0 0.091 0.001 0.2 0.001 0.308 0 38.542-31.244 69.786-69.786 69.786-0.108 0-0.216 0-0.325-0.001h0.017c-0.091 0-0.2 0.001-0.308 0.001-38.542 0-69.786-31.244-69.786-69.786 0-0.108 0-0.216 0.001-0.325v0.017c0-0.076 0-0.166 0-0.256 0-38.57 31.267-69.837 69.837-69.837 0.090 0 0.18 0 0.27 0.001h-0.014zM194.749 338.309c0.107 0.001 0.233 0.001 0.36 0.001 24.177 0 43.776-19.599 43.776-43.776 0-0.127-0.001-0.253-0.002-0.379v0.019c0.001-0.107 0.001-0.233 0.001-0.36 0-24.177-19.599-43.776-43.776-43.776-0.127 0-0.253 0.001-0.379 0.002h0.019c-0.092-0.001-0.2-0.001-0.308-0.001-24.205 0-43.827 19.622-43.827 43.827 0 0.108 0 0.217 0.001 0.325v-0.017c-0.001 0.107-0.001 0.233-0.001 0.36 0 24.177 19.599 43.776 43.776 43.776 0.127 0 0.253-0.001 0.379-0.002h-0.019zM662.103 224.081c0.122-0.001 0.267-0.001 0.411-0.001 38.57 0 69.837 31.267 69.837 69.837 0 0.162-0.001 0.325-0.002 0.487v-0.025c0 0.091 0.001 0.2 0.001 0.308 0 38.542-31.244 69.786-69.786 69.786-0.108 0-0.216 0-0.325-0.001h0.017c-0.091 0-0.2 0.001-0.308 0.001-38.542 0-69.786-31.244-69.786-69.786 0-0.108 0-0.216 0.001-0.325v0.017c-0.001-0.152-0.002-0.332-0.002-0.512 0-38.542 31.244-69.786 69.786-69.786 0.055 0 0.109 0 0.164 0h-0.009zM662.103 338.309c0.107 0.001 0.233 0.001 0.36 0.001 24.177 0 43.776-19.599 43.776-43.776 0-0.127-0.001-0.253-0.002-0.379v0.019c0.001-0.092 0.001-0.2 0.001-0.308 0-24.205-19.622-43.827-43.827-43.827-0.108 0-0.217 0-0.325 0.001h0.017c-0.107-0.001-0.233-0.001-0.36-0.001-24.177 0-43.776 19.599-43.776 43.776 0 0.127 0.001 0.253 0.002 0.379v-0.019c-0.001 0.107-0.001 0.233-0.001 0.36 0 24.177 19.599 43.776 43.776 43.776 0.127 0 0.253-0.001 0.379-0.002h-0.019zM333.757 779.601h189.44c0.046 0 0.1 0 0.154 0 26.439 0 47.872 21.433 47.872 47.872 0 0.036 0 0.072 0 0.108v-0.006c-0.425 26.351-21.674 47.601-47.985 48.025l-0.040 0.001h-189.44c-0.046 0-0.1 0-0.154 0-26.439 0-47.872-21.433-47.872-47.872 0-0.054 0-0.108 0-0.162v0.008c0-0.030 0-0.067 0-0.103 0-26.439 21.433-47.872 47.872-47.872 0.054 0 0.108 0 0.162 0h-0.008zM333.757 849.643h189.44c0.061 0.001 0.133 0.001 0.206 0.001 12.074 0 21.862-9.788 21.862-21.862 0-0.072 0-0.145-0.001-0.217v0.011c-0.36-12.029-10.033-21.685-22.036-22.015l-0.031-0.001h-189.44c-0.076-0.001-0.167-0.002-0.257-0.002-12.046 0-21.811 9.765-21.811 21.811 0 0.073 0 0.145 0.001 0.217v-0.011c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.074 9.788 21.862 21.862 21.862 0.072 0 0.145 0 0.217-0.001h-0.011zM843.811 169.605h-18.176v589.21c-0.061 38.633-15.96 73.541-41.55 98.587l-0.025 0.024c-62.259 67.533-182.989 102.4-356.864 102.4-175.206 0-294.605-33.741-356.915-102.4-24.889-25.027-40.569-59.235-41.52-97.1l-0.004-0.18v-590.49h-15.36c-0.205 0.012-0.446 0.019-0.688 0.019-6.786 0-12.288-5.502-12.288-12.288 0-0.259 0.008-0.516 0.024-0.771l-0.002 0.035v-66.15c1.356-6.547 6.415-11.623 12.845-12.986l0.109-0.019 167.424-10.24-87.040-110.285c-1.689-2.136-2.71-4.869-2.71-7.841 0-4.245 2.083-8.004 5.284-10.309l0.038-0.026c2.221-1.403 4.869-2.34 7.712-2.606l0.071-0.005c0.147-0.007 0.319-0.010 0.492-0.010 4.029 0 7.587 2.015 9.723 5.091l0.026 0.039 11.674 15.36h603.494l11.674-15.36c2.603-2.806 6.168-4.687 10.169-5.114l0.071-0.006c2.913 0.29 5.558 1.223 7.86 2.656l-0.077-0.045c2.978 2.578 4.851 6.364 4.851 10.587 0 2.821-0.836 5.446-2.273 7.643l0.033-0.053-87.040 110.285 170.035 10.24c6.569 0.596 11.676 6.077 11.676 12.751 0 0.089-0.001 0.179-0.003 0.268v-0.013 66.15c0.012 0.202 0.019 0.438 0.019 0.675 0 6.786-5.502 12.288-12.288 12.288-0.169 0-0.336-0.003-0.503-0.010l0.024 0.001zM91.171 840.325c38.963 42.803 129.792 93.44 337.459 93.44 206.336 0 296.96-50.637 337.459-93.44 21.097-20.263 34.359-48.547 34.866-79.932l0.001-0.094v-48.026h-744.96v48.026c0.479 31.592 13.808 59.981 34.979 80.242l0.042 0.040zM801.111 417.208v-247.859h-744.96v247.91zM56.151 443.166v244.019h364.698v-244.019zM446.807 443.166v244.019h354.304v-244.019zM688.215 10.987l22.067-27.238h-562.278l21.043 27.238h519.168zM667.427 35.665h-478.874l23.347 29.85 218.010-13.005 215.45 11.725zM832.24 101.867l-403.61-24.678-401.050 24.678v41.523h804.659z" />
+<glyph unicode="&#xe962;" glyph-name="file" d="M802.822 655.948h-306.142c-5.696 0-10.314 4.618-10.314 10.314v0 275.643c0.005 5.692 4.621 10.305 10.314 10.305 2.656 0 5.077-1.004 6.905-2.653l-0.009 0.008 306.142-275.643c2.096-1.895 3.407-4.625 3.407-7.66 0-5.693-4.612-10.308-10.303-10.314h-0.001zM506.974 676.576h268.968l-268.968 242.168zM702.175-56.44h-583.615c-0.416-0.006-0.908-0.009-1.4-0.009-59.951 0-108.664 48.12-109.62 107.844l-0.001 0.090v792.428c0.946 59.822 49.663 107.954 109.621 107.954 0.492 0 0.984-0.003 1.475-0.010l-0.075 0.001h378.099c5.696 0 10.314-4.618 10.314-10.314v0-264.967h295.949c5.696 0 10.314-4.618 10.314-10.314v0-213.317h-20.588v203.063h-295.989c-5.696 0-10.314 4.618-10.314 10.314v0 264.907h-367.785c-0.441 0.008-0.962 0.012-1.483 0.012-48.567 0-88.049-38.899-88.989-87.241l-0.001-0.088v-792.428c0.941-48.43 40.423-87.329 88.99-87.329 0.522 0 1.042 0.004 1.562 0.013l-0.078-0.001h583.615c0.21-0.002 0.459-0.003 0.707-0.003 42.57 0 78.24 29.538 87.634 69.237l0.122 0.611 20.105-4.282c-11.605-49.71-55.543-86.173-107.996-86.173-0.201 0-0.402 0.001-0.603 0.002h0.031zM789.372 23.337c-118.834 3.647-213.779 100.854-213.779 220.236 0 121.687 98.647 220.333 220.333 220.333s220.333-98.647 220.333-220.333c0-0.001 0-0.002 0-0.003v0c-2.047-122.077-101.49-220.253-223.862-220.253-1.064 0-2.126 0.007-3.186 0.022l0.161-0.002zM789.372 443.175c-107.458-3.628-193.191-91.611-193.191-199.619 0-110.305 89.42-199.725 199.725-199.725s199.725 89.42 199.725 199.725c0 0.005 0 0.010 0 0.014v-0.001c-2.032 110.682-92.235 199.628-203.212 199.628-1.072 0-2.142-0.008-3.209-0.025l0.161 0.002zM874.819 233.276h-170.895c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h170.895c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM789.332 147.768c-5.696 0-10.314 4.618-10.314 10.314v170.895c0 5.696 4.618 10.314 10.314 10.314s10.314-4.618 10.314-10.314v0-170.895c0-5.696-4.618-10.314-10.314-10.314v0zM379.949 745.96h-197.031c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314h197.031c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM379.949 623.298h-197.031c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314h197.031c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM626.801 500.615h-443.924c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h443.924c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0zM487.813 255.311h-304.936c-5.696 0-10.314 4.618-10.314 10.314s4.618 10.314 10.314 10.314v0h304.936c5.696 0 10.314-4.618 10.314-10.314s-4.618-10.314-10.314-10.314v0z" />
+<glyph unicode="&#xe963;" glyph-name="link" d="M439.393 298.759c2.677 0.319 5.339 0.652 7.974 1.137 1.678 0.305 3.328 0.693 4.992 1.040 2.635 0.568 5.27 1.179 7.863 1.886 1.719 0.471 3.411 0.984 5.103 1.525q3.758 1.179 7.447 2.552c1.664 0.624 3.328 1.248 4.964 1.928 2.468 1.026 4.881 2.135 7.294 3.287 1.539 0.735 3.093 1.456 4.604 2.26 2.552 1.387 5.048 2.774 7.53 4.285 1.276 0.777 2.579 1.484 3.841 2.288q4.992 3.203 9.707 6.837c0.347 0.264 0.721 0.499 1.068 0.763h0.083c3.397-2.635 6.934-5.103 10.484-7.419 0.957-0.61 1.942-1.137 2.912-1.733 2.774-1.719 5.547-3.384 8.501-4.909 1.387-0.749 2.871-1.387 4.313-2.108 2.524-1.234 5.061-2.413 7.655-3.495 1.595-0.666 3.203-1.276 4.826-1.886 2.538-0.957 5.075-1.83 7.655-2.649 1.664-0.527 3.342-1.026 5.034-1.498 2.649-0.735 5.325-1.387 8.015-1.942 1.636-0.347 3.273-0.735 4.937-1.026 2.704-0.485 5.422-0.846 8.168-1.165h309.381c73.865 9.826 130.256 72.421 130.256 148.187 0 82.523-66.898 149.421-149.421 149.421-0.054 0-0.107 0-0.161 0h-24.44c-0.139 0.319-0.291 0.624-0.43 0.957h-36.138l0.485-0.957h-211.062c-0.143 0.004-0.31 0.007-0.478 0.007-9.122 0-16.516-7.395-16.516-16.516s7.395-16.516 16.516-16.516c0.168 0 0.336 0.003 0.503 0.008l-0.024-0.001h271.593c64.287 0 116.403-52.115 116.403-116.403s-52.115-116.403-116.403-116.403h-271.593c-4.22 0.012-8.372 0.243-12.461 0.683l0.521-0.045c-20.763 2.221-39.439 9.686-55.124 21.031l0.334-0.23c21.096 25.588 33.889 58.706 33.889 94.812 0 82.416-66.657 149.264-149 149.573h-211.063l0.485 0.957h-36.194c-0.139-0.319-0.291-0.624-0.43-0.957h-24.462c-82.482-0.045-149.329-66.92-149.329-149.407 0-75.721 56.329-138.285 129.37-148.075l0.766-0.084zM33.078 446.904c0 0.033 0 0.072 0 0.111 0 64.202 52.026 116.252 116.219 116.292h271.666c4.22-0.012 8.371-0.243 12.46-0.683l-0.521 0.045c26.494-2.766 49.906-14.173 67.783-31.309l-0.041 0.038c22.539-21.218 36.575-51.251 36.575-84.562 0-27.371-9.476-52.529-25.328-72.372l0.179 0.232c-15.77 19.601-25.339 44.772-25.419 72.176v0.018c-0.266 8.913-7.556 16.037-16.509 16.037s-16.243-7.124-16.509-16.013l-0.001-0.024c0.085-36.175 13.019-69.314 34.476-95.11l-0.196 0.243c-18.553-13.463-41.778-21.536-66.888-21.536-0.017 0-0.035 0-0.052 0h-271.645c-64.196 0.15-116.183 52.206-116.223 116.413v0.004z" />
+<glyph unicode="&#xe964;" glyph-name="pass" horiz-adv-x="1233" d="M233.54 186.948l42.052 42.052c-86.267 55.596-156.563 128.729-207.269 214.784l-1.627 2.986c111.053 191.046 314.77 317.442 548.008 317.442 0.613 0 1.226-0.001 1.839-0.003h-0.095c60.503-0.316 118.9-8.769 174.331-24.317l-4.62 1.107 46.421 46.421c-64.484 21.714-138.757 34.423-215.944 34.815l-0.188 0.001c-266.888-0.020-498.575-150.718-614.627-371.662l-1.821-3.805c56.33-106.257 135.335-193.674 231.035-258.23l2.505-1.593zM999.629 707.618l-42.052-42.052c87.047-55.116 157.889-128.272 208.725-214.618l1.605-2.948c-112.020-191.243-316.495-317.645-550.492-317.645-0.243 0-0.487 0-0.73 0h0.038c-61.004 0.319-119.899 8.771-175.838 24.324l4.693-1.114-46.421-46.421c63.954-22.076 137.655-34.824 214.333-34.824 1.137 0 2.273 0.003 3.408 0.008l-0.175-0.001c266.888 0.020 498.575 150.718 614.627 371.662l1.821 3.805c-56.33 106.257-135.335 193.674-231.035 258.23l-2.505 1.593zM503.33 292.83l268.356 268.356 40.619 42.052 92.843 91.409 42.052 43.486 181.248 179.814-42.052 42.052-194.355-194.355-43.486-44.988-76.868-76.868-42.052-40.619-268.356-268.356-40.619-42.052-94.276-92.843-42.052-43.486-179.883-178.381 42.052-42.052 192.922 194.355 121.788 121.788zM616.38 639.42c0.682 0.010 1.488 0.016 2.295 0.016 20.522 0 40.171-3.736 58.305-10.564l-1.14 0.377 44.988 44.988c-30.75 14.629-66.821 23.172-104.887 23.172-137.502 0-248.969-111.467-248.969-248.969 0-38.067 8.543-74.138 23.817-106.401l-0.644 1.513 44.988 44.988c-6.009 17.675-9.695 38.056-10.168 59.229l-0.004 0.231c0 0.081 0 0.177 0 0.273 0 105.567 85.579 191.147 191.147 191.147 0.096 0 0.192 0 0.288 0h-0.015zM616.448 256.58c-0.682-0.010-1.488-0.016-2.295-0.016-20.522 0-40.171 3.736-58.305 10.564l1.14-0.377-44.988-44.988c30.75-14.629 66.821-23.172 104.887-23.172 137.502 0 248.969 111.467 248.969 248.969 0 38.067-8.543 74.138-23.817 106.401l0.644-1.513-44.988-44.988c6.009-17.675 9.695-38.056 10.168-59.229l0.004-0.231c0-0.081 0-0.177 0-0.273 0-105.567-85.579-191.147-191.147-191.147-0.096 0-0.192 0-0.288 0h0.015z" />
+<glyph unicode="&#xe965;" glyph-name="vol" horiz-adv-x="1417" d="M1417.011 960h-1417.011v-1024h1417.011zM708.506 377.139l-600.269 523.776h1200.538zM537.498 448l-478.413-417.485v835.379zM582.451 408.781l126.054-109.978 126.054 109.978 474.112-413.286h-1200.435zM879.411 448l478.515 417.894v-835.072z" />
+<glyph unicode="&#xe966;" glyph-name="support" d="M512 929.28c-169.657 0-307.2-137.543-307.2-307.2v-102.401h-10.24c-73.217 0-133.12-59.902-133.12-133.12v-81.92c0-73.217 59.903-133.12 133.12-133.12h102.4c16.084 0.002 30.718 14.636 30.72 30.72v286.72c-0.002 16.085-14.636 30.719-30.72 30.72h-30.72v102.401c0 136.682 109.078 245.76 245.76 245.76s245.76-109.078 245.76-245.76v-102.401h-30.72c-19.599-1.024-30.383-17.774-30.72-30.72v-286.72c0.002-16.084 14.636-30.718 30.72-30.72h25.6c-6.169-18.686-18.2-35.973-38.080-51.2-26.83-20.55-68.389-36.806-127.040-40.32-12.456 29.496-41.755 50.56-75.52 50.56-44.879 0-81.92-37.040-81.92-81.92s37.041-81.92 81.92-81.92c34.361 0 64.095 21.52 76.16 51.84 69.559 3.655 124.496 22.665 163.84 52.801 34.727 26.598 56.378 62.182 64 100.159h13.44c73.217 0 133.12 59.903 133.12 133.12v81.92c0 73.218-59.903 133.12-133.12 133.12h-10.24v102.401c0 169.657-137.543 307.2-307.2 307.2z" />
+<glyph unicode="&#xe967;" glyph-name="summary" d="M847.2 936.2h-670.4c-31.4 0-57-25.6-57-57v-862.4c0-31.4 25.6-57 57-57h670.4c31.4 0 57 25.6 57 57v862.4c0 31.4-25.6 57-57 57zM864.2 16.8c0-9.4-7.6-17-17-17h-670.4c-9.4 0-17 7.6-17 17v862.4c0 9.4 7.6 17 17 17h670.4c9.4 0 17-7.6 17-17v-862.4zM698 730h-382c-11 0-20-9-20-20s9-20 20-20h382c11 0 20 9 20 20s-9 20-20 20zM698 538h-382c-11 0-20-9-20-20s9-20 20-20h382c11 0 20 9 20 20s-9 20-20 20zM492 346h-176c-11 0-20-9-20-20s9-20 20-20h176c11 0 20 9 20 20s-9 20-20 20z" />
+<glyph unicode="&#xe968;" glyph-name="switch-icon" d="M763.426 443.528l-63.42-62.874 135.919-134.758h-527.838v-112.299h527.838l-135.919-134.758 63.42-62.874 256 253.747zM0 245.896h172.169v-112.299h-172.169v112.299zM851.831 762.402h172.169v-112.299h-172.169v112.299zM188.006 650.172h527.838v112.23h-527.838l135.919 134.758-63.42 62.874-256-253.747 256-253.747 63.42 62.874z" />
+<glyph unicode="&#xe969;" glyph-name="rupees" horiz-adv-x="695" d="M403.357-64.182c-0.614 0.922-1.229 1.946-1.843 2.867l-365.158 456.397c-1.334 1.481-2.15 3.451-2.15 5.612 0 0.007 0 0.014 0 0.022v-0.001 87.347h99.226c0.279-0.001 0.609-0.001 0.939-0.001 35.402 0 69.625 5.049 101.988 14.467l-2.575-0.642c27.329 7.729 51.196 19.439 72.361 34.668l-0.681-0.466c27.347 19.445 48.326 46.23 60.235 77.49l0.386 1.153c5.212 13.485 8.439 29.081 8.904 45.368l0.005 0.2v4.198h-375.501l1.434 2.56 61.44 92.16c0.965 1.46 2.6 2.411 4.457 2.411 0.27 0 0.536-0.020 0.795-0.059l-0.029 0.004h295.731l-2.15 4.813c-14.929 31.538-39.93 56.275-70.78 70.489l-0.9 0.372c-16.137 7.499-34.915 13.535-54.534 17.18l-1.479 0.228c-22.223 4.29-48.19 7.126-74.679 7.87l-0.687 0.015c-42.803 1.536-85.606 0.512-128.512 0.819h-29.286c0.43 0.99 0.841 1.797 1.293 2.577l-0.064-0.119 61.44 92.16c0.698 1.321 2.062 2.205 3.633 2.205 0.236 0 0.467-0.020 0.692-0.058l-0.024 0.003h627.814c-0.819-1.434-1.126-2.253-1.741-3.072l-60.621-91.341c-0.964-1.469-2.603-2.425-4.466-2.425-0.303 0-0.601 0.025-0.89 0.074l0.031-0.004h-163.84c23.973-27.734 41.114-62.020 48.421-99.81l0.219-1.361h183.296c-0.52-1.177-1.034-2.151-1.603-3.088l0.067 0.119-10.24-15.77-50.074-75.366c-1.065-1.916-3.078-3.191-5.388-3.191-0.158 0-0.315 0.006-0.47 0.018l0.021-0.001h-113.766c0-2.253-0.819-4.403-1.126-6.554-7.969-48.722-28.83-91.568-58.936-126.156l0.261 0.306c-24.552-28.142-53.711-51.518-86.429-69.135l-1.635-0.805c-33.904-18.495-73.245-32.721-114.841-40.566l-2.51-0.394c-15.917-3.223-35.084-5.737-54.593-6.997l-1.318-0.068h-5.222l2.56-3.482 379.187-473.293v-0.512z" />
+<glyph unicode="&#xe96a;" glyph-name="export-icon" horiz-adv-x="1215" d="M0-64.076v151.816h1214.529v-151.816zM235.771 490.509c59.948 97.22 147.811 172.206 252.35 214.688l3.537 1.271c60.097 26.080 130.093 41.251 203.632 41.251 64.894 0 127.029-11.814 184.372-33.408l-3.605 1.191 104.146 244.424 175.727-435.257-435.105-175.879 108.549 246.398c-39.192 13.875-84.391 21.893-131.462 21.893-56.676 0-110.638-11.623-159.631-32.616l2.643 1.007c-83.072-33.566-150.864-90.52-196.971-162.672l-0.998-1.669c-39.499-63.248-62.921-140.063-62.921-222.35 0-9.743 0.328-19.41 0.975-28.989l-0.070 1.297-126.918-6.224c-0.807 11.090-1.267 24.027-1.267 37.072 0 106.97 30.929 206.716 84.332 290.784l-1.312-2.21z" />
+<glyph unicode="&#xe96b;" glyph-name="edit-pencil1" d="M0 105.995h1024v-169.984h-1024zM759.467 658.341l-426.667-424.892h-162.133v161.451l426.667 424.892zM883.234 785.794l-85.333-84.992-162.133 161.451 85.333 84.992c7.542 7.86 18.134 12.744 29.867 12.744s22.324-4.884 29.853-12.73l0.014-0.014 98.167-97.758c7.901-7.081 12.849-17.318 12.849-28.711 0-0.37-0.005-0.74-0.016-1.107l0.001 0.054c-0.068-12.698-0.068-29.696-8.602-33.929z" />
+<glyph unicode="&#xe96c;" glyph-name="customise-columns" horiz-adv-x="1297" d="M261.837 883.813h78.643v-116.053h-78.643zM261.837 694.169h78.643v-531.183h-78.643zM1297.033 137.249h-119.945v119.603h-81.374v-119.808h-119.535v-81.442h119.808v-119.603h81.442v119.808h119.603zM261.359 137.249h-179.951v544.905h1014.306v-303.991h81.442v581.837h-1177.19v-904.192h853.811v81.442h-592.555zM261.359 878.625h834.355v-114.961h-1014.306v114.893z" />
+<glyph unicode="&#xe96d;" glyph-name="account" horiz-adv-x="1952" d="M323.735 944.669l-323.735-952.89h139.289l97.638 295.584h323.839l100.359-295.584h143.58l-325.147 952.89zM398.141 809.618c12.349-48.244 25.482-98.214 43.953-152.475l88.952-261.625h-264.764l88.952 263.352c14.546 44.738 28.203 93.191 42.906 150.748zM1424.182 960h-108.836l-394.060-1024.209h107.423l392.019 1015.105zM1917.397 121.387c-42.856-20.742-93.207-32.864-146.389-32.864-0.576 0-1.152 0.001-1.728 0.004h0.089c-136.045 0-227.666 98.79-227.666 245.927 0 151.010 91.045 248.648 231.904 248.648 3.11 0.125 6.762 0.196 10.43 0.196 46.994 0 91.258-11.689 130.043-32.318l-1.498 0.727 7.169-4.134 31.761 108.051-4.919 2.459c-49.529 22.431-107.394 35.503-168.311 35.503-1.644 0-3.286-0.010-4.925-0.029l0.25 0.002c-5.446 0.302-11.82 0.474-18.234 0.474-193.936 0-351.153-157.217-351.153-351.153 0-4.988 0.104-9.952 0.31-14.889l-0.023 0.706c0-209.876 137.667-350.891 342.572-350.891 2.888-0.065 6.291-0.103 9.703-0.103 67.772 0 132.114 14.683 190.020 41.042l-2.876-1.172 4.5 2.302-23.808 104.65z" />
+<glyph unicode="&#xe96e;" glyph-name="hand_icon" horiz-adv-x="1054" d="M439.272 539.517v0l-88.29 88.29zM961.029 538.104c-5.079 5.805-10.12 10.845-15.275 15.924l-161.381 161.381c-16.914 17.041-40.349 27.59-66.248 27.59-16.583 0-32.156-4.325-45.652-11.908l0.469 0.242-121.589 121.589c-18.433 18.117-43.73 29.301-71.64 29.301s-53.207-11.184-71.655-29.316l0.015 0.014c-12.252-11.985-21.331-27.165-25.89-44.193l-0.154-0.678c-17.315 14.254-39.716 22.897-64.136 22.897-55.932 0-101.273-45.342-101.273-101.273 0-27.444 10.917-52.339 28.644-70.579l-0.023 0.024 5.805-5.805c-42.71-12.515-73.371-51.339-73.371-97.325 0-9.921 1.427-19.509 4.088-28.57l-0.18 0.716c4.94-17.279 13.7-32.13 25.346-44.174l-0.028 0.029 17.375-17.375c-17.408-4.903-32.311-13.948-44.127-26.026l-0.017-0.018c-18.11-18.301-29.299-43.483-29.299-71.277s11.189-52.976 29.307-71.286l254.74-254.74c65.75-65.838 156.545-106.651 256.873-106.925h2.23c198.945 0.085 360.189 161.381 360.189 360.338 0 93.18-35.368 178.099-93.412 242.066l0.268-0.3zM911.843 77.829c-54.981-55.442-131.183-89.766-215.402-89.766-1.361 0-2.72 0.009-4.077 0.027l0.206-0.002c-86.248 0.229-164.257 35.317-220.718 91.911l-0.006 0.006-254.138 255.475c-8.938 8.837-14.473 21.1-14.473 34.656 0 0.033 0 0.067 0 0.1v-0.005c-0.002 0.175-0.004 0.382-0.004 0.59 0 13.401 5.544 25.507 14.464 34.149l0.012 0.012c9.229 8.416 21.56 13.57 35.094 13.57s25.865-5.154 35.136-13.607l-0.041 0.037 178.756-178.031c4.483-4.079 10.469-6.577 17.037-6.577 7.639 0 14.49 3.378 19.138 8.722l0.026 0.031c4.047 4.619 6.515 10.709 6.515 17.375s-2.469 12.757-6.542 17.406l0.026-0.030-178.642 177.267-79.774 79.583c-9.043 8.953-14.643 21.37-14.643 35.094s5.6 26.141 14.639 35.090l0.004 0.004c9.095 8.729 21.467 14.104 35.094 14.104s26-5.375 35.112-14.121l219.256-219.256c4.601-4.701 11.010-7.616 18.101-7.616s13.5 2.915 18.097 7.611l0.004 0.005c4.537 4.676 7.333 11.062 7.333 18.101s-2.797 13.425-7.34 18.107l0.006-0.007-287.132 288.011c-9.466 9.055-15.35 21.788-15.35 35.895 0 27.418 22.226 49.644 49.644 49.644 14.107 0 26.839-5.884 35.877-15.331l248.963-248.963c4.72-4.72 11.242-7.64 18.445-7.64 14.406 0 26.085 11.678 26.085 26.085 0 7.203-2.92 13.724-7.64 18.445v0l-128.081 126.63-65.835 66.026c-9.043 8.953-14.643 21.37-14.643 35.094s5.6 26.141 14.639 35.090l0.004 0.004c9.095 8.729 21.467 14.104 35.094 14.104s26-5.375 35.112-14.121l-0.017 0.017 121.589-122.2c-7.341-13.027-11.666-28.6-11.666-45.183 0-25.899 10.549-49.334 27.585-66.242l66.567-66.567c-19.081-24.295-30.6-55.316-30.6-89.028 0-35.338 12.658-67.72 33.688-92.858l-0.185 0.228c0.726-0.726 0.726-1.451 1.451-1.451 4.646-4.654 11.068-7.533 18.163-7.533 6.342 0 12.146 2.3 16.624 6.112l-0.036-0.030c5.685 4.829 9.269 11.984 9.269 19.975 0 6.154-2.125 11.812-5.682 16.28l0.041-0.053c-13.637 16.041-21.931 36.993-21.931 59.883 0 25.89 10.612 49.302 27.723 66.124l2.915 2.915c6.335 4.712 10.395 12.176 10.395 20.588 0 5.905-2 11.342-5.36 15.672l0.043-0.058c-0.726 0.726-1.451 2.177-2.177 2.902l-84.662 84.013c-4.736 6.775-7.568 15.184-7.568 24.256 0 23.558 19.098 42.656 42.656 42.656 9.071 0 17.481-2.832 24.394-7.659l-0.138 0.092 160.541-161.839c4.631-4.438 8.896-9.163 12.803-14.18l0.219-0.293c49.293-54.732 79.445-127.549 79.445-207.408 0-85.031-34.183-162.078-89.558-218.148l0.032 0.032zM938.613 311.575c-0.192-31.565-12.862-60.134-33.321-81.056l0.021 0.022c-4.533-4.465-10.759-7.222-17.629-7.222-0.166 0-0.332 0.002-0.497 0.005h0.025c-14.392 0.044-26.042 11.722-26.042 26.12 0 6.994 2.749 13.346 7.225 18.035l-0.010-0.010c11.402 11.385 18.456 27.123 18.456 44.508s-7.054 33.122-18.455 44.507l-0.001 0.001c-4.729 4.724-7.654 11.252-7.654 18.464 0 14.414 11.685 26.098 26.098 26.098 7.202 0 13.723-2.917 18.445-7.635v0c20.609-20.854 33.34-49.533 33.34-81.185 0-0.229-0.001-0.457-0.002-0.686v0.035zM833.673 730.416c-0.034 0-0.074 0-0.115 0-14.32 0-25.929 11.609-25.929 25.929 0 0.040 0 0.081 0 0.121v-0.006c-0.022 34.769-28.202 62.95-62.969 62.971h-0.002c-14.384 0-26.044 11.66-26.044 26.044s11.66 26.044 26.044 26.044v0 0c0.102 0 0.223 0.001 0.344 0.001 63.448 0 114.885-51.424 114.906-114.867v-0.002c0.004-0.161 0.006-0.35 0.006-0.54 0-14.088-11.421-25.509-25.509-25.509-0.19 0-0.379 0.002-0.568 0.006h0.028zM922.001 735.648c-0.034 0-0.074 0-0.115 0-14.32 0-25.929 11.609-25.929 25.929 0 0.040 0 0.081 0 0.121v-0.006c-0.043 80.717-65.465 146.139-146.178 146.182h-0.004c-14.384 0-26.044 11.66-26.044 26.044s11.66 26.044 26.044 26.044v0c109.554-0.52 198.179-89.386 198.308-198.983v-0.012c-0.016-13.992-11.363-25.328-25.357-25.328-0.242 0-0.483 0.003-0.723 0.010l0.035-0.001zM204.074 100.092c-0.046 0-0.099 0-0.153 0-63.461 0-114.906 51.445-114.906 114.906 0 0.121 0 0.242 0.001 0.362v-0.019c0 14.384 11.66 26.044 26.044 26.044s26.044-11.66 26.044-26.044v0c0.022-34.769 28.202-62.95 62.969-62.971h0.002c0.034 0 0.074 0 0.115 0 14.32 0 25.929-11.609 25.929-25.929 0-0.040 0-0.081 0-0.121v0.006c-0.269-14.313-11.748-25.858-26.009-26.234l-0.035-0.001zM198.308 11.955c-109.461 0.152-198.156 88.847-198.308 198.293v0.015c0 14.384 11.66 26.044 26.044 26.044s26.044-11.66 26.044-26.044v0 0c0-0.012 0-0.026 0-0.040 0-80.872 65.365-146.478 146.145-146.868h0.763c0.034 0 0.074 0 0.115 0 14.32 0 25.929-11.609 25.929-25.929 0-0.040 0-0.081 0-0.121v0.006c-0.848-14.129-12.475-25.277-26.723-25.357h-0.008z" />
+<glyph unicode="&#xe96f;" glyph-name="users" d="M972.8 226.304v5.12c-1.024 15.36-4.096 52.224-10.24 68.608-8.192 22.528-18.432 32.768-30.72 40.96-6.144 4.096-27.648 12.288-61.44 24.576-28.672 10.24-63.488 23.552-75.776 30.72-9.216 5.12-17.408 31.744-18.432 40.96 0 1.024 2.048 3.072 7.168 8.192 13.312 14.336 30.72 41.984 37.888 68.608 9.216 35.84 17.408 109.568-16.384 154.624-19.456 25.6-49.152 39.936-89.088 40.96h-4.096c-39.936-1.024-69.632-15.36-89.088-40.96-33.792-45.056-26.624-118.784-16.384-154.624 7.168-26.624 24.576-54.272 37.888-68.608 1.024-2.048 6.144-6.144 7.168-8.192 3.072-8.192-9.216-35.84-18.432-40.96-12.288-7.168-45.056-19.456-74.752-30.72h-1.024c-7.168-3.072-13.312-5.12-19.456-7.168-19.456 7.168-35.84 14.336-44.032 19.456-14.336 8.192-25.6 46.080-25.6 57.344 0 1.024 1.024 3.072 9.216 12.288 17.408 18.432 38.912 54.272 48.128 89.088 12.288 47.104 22.528 142.336-21.504 200.704-24.576 33.792-63.488 51.2-114.688 52.224h-5.12c-51.2-2.048-90.112-19.456-114.688-53.248-44.032-58.368-33.792-153.6-21.504-200.704 9.216-34.816 31.744-69.632 48.128-88.064v0 0c2.048-3.072 8.192-9.216 9.216-12.288 4.096-12.288-12.288-49.152-25.6-57.344-16.384-9.216-60.416-25.6-100.352-40.96-43.008-16.384-71.68-26.624-78.848-31.744-15.36-10.24-28.672-23.552-38.912-52.224-5.12-21.504-8.192-70.656-10.24-90.112v-5.12l4.096-4.096c11.264-11.264 69.632-47.104 332.8-47.104 261.12 0 320.512 36.864 332.8 48.128l4.096 4.096v5.12c0 6.144-1.024 13.312-2.048 22.528 191.488 1.024 236.544 28.672 245.76 36.864l4.096 3.072zM388.096 130.048c-231.424 0-296.96 28.672-313.344 37.888 2.048 28.672 6.144 62.464 11.264 77.824 8.192 22.528 17.408 31.744 29.696 40.96 6.144 4.096 47.104 19.456 74.752 29.696 41.984 15.36 86.016 31.744 103.424 41.984 21.504 12.288 45.056 60.416 35.84 84.992-2.048 7.168-7.168 13.312-14.336 20.48v0 0c-15.36 16.384-34.816 48.128-43.008 78.848-11.264 43.008-20.48 129.024 17.408 181.248 20.48 27.648 52.224 41.984 96.256 43.008h4.096c44.032-1.024 75.776-16.384 96.256-43.008 37.888-51.2 28.672-138.24 17.408-181.248-8.192-30.72-28.672-62.464-43.008-78.848-11.264-12.288-15.36-18.432-16.384-27.648 0-16.384 12.288-64.512 36.864-78.848 5.12-3.072 13.312-7.168 23.552-11.264 9.216-4.096 19.456-8.192 30.72-12.288 15.36-6.144 32.768-12.288 49.152-18.432 27.648-10.24 68.608-25.6 74.752-29.696 12.288-8.192 21.504-17.408 29.696-40.96 3.072-8.192 5.12-21.504 7.168-36.864 1.024-7.168 2.048-15.36 3.072-22.528 1.024-6.144 1.024-12.288 2.048-18.432-16.384-8.192-81.92-36.864-313.344-36.864zM720.896 208.896c-2.048 16.384-5.12 33.792-9.216 44.032-10.24 28.672-22.528 41.984-38.912 52.224-8.192 5.12-36.864 16.384-79.872 31.744-8.192 3.072-16.384 6.144-23.552 9.216 30.72 11.264 61.44 23.552 74.752 30.72 17.408 10.24 35.84 47.104 28.672 67.584-2.048 5.12-6.144 10.24-11.264 16.384-11.264 12.288-25.6 35.84-31.744 58.368-8.192 31.744-15.36 97.28 13.312 135.168 15.36 20.48 38.912 30.72 71.68 31.744v0h2.048c32.768-1.024 56.32-11.264 71.68-31.744 28.672-37.888 21.504-103.424 13.312-135.168-6.144-22.528-21.504-46.080-32.768-58.368-8.192-9.216-12.288-15.36-12.288-22.528 0-13.312 9.216-50.176 29.696-61.44 13.312-8.192 47.104-20.48 78.848-31.744 19.456-7.168 52.224-19.456 56.32-22.528 9.216-6.144 15.36-13.312 21.504-29.696 3.072-9.216 6.144-30.72 8.192-56.32-14.336-7.168-65.536-26.624-230.4-27.648z" />
+<glyph unicode="&#xe970;" glyph-name="folder1" d="M640 672.563c-0.004 0.226-0.006 0.493-0.006 0.76 0 13.665 5.474 26.052 14.349 35.087l-0.007-0.007c10.119 10.125 24.101 16.388 39.547 16.388 0.227 0 0.454-0.001 0.68-0.004h-0.034q137.574 0 274.995 0c0.748 0.038 1.623 0.060 2.504 0.060 27.958 0 50.765-22.056 51.969-49.718l0.004-0.109c0.307-22.835 0-45.773 0-68.608v-518.963c0-29.952 0-60.058 0-90.061-0.124-34.093-27.79-61.683-61.9-61.683-1.929 0-3.837 0.088-5.721 0.261l0.242-0.018h-889.549c-1.581-0.144-3.419-0.226-5.276-0.226-33.94 0-61.489 27.36-61.796 61.227v614.429c0 0.085-0.001 0.187-0.001 0.288 0 33.932 27.508 61.44 61.44 61.44 2.092 0 4.159-0.105 6.197-0.309l-0.257 0.021h562.893c3.174-0.256 6.349-0.256 9.728-0.256zM0.768 575.59c0 32.922-1.792 71.066 0.307 107.52 4.813 81.92 31.437 135.014 64.819 135.014h573.44c1.229 17.203 1.792 32.563 3.482 47.104 6.861 55.552 26.88 93.696 51.712 94.106 91.699 0.717 183.245 1.229 274.944 0 30.72-0.358 53.299-59.085 53.914-135.014 0-29.901 0-59.443 0-90.88-0.922 3.738-1.638 5.99-2.099 8.602-10.24 69.171-27.187 99.123-56.627 99.123h-252.262c-2.56 0.313-5.523 0.492-8.528 0.492-6.632 0-13.060-0.871-19.177-2.504l0.518 0.118c-24.781-9.728-43.059-60.979-44.851-123.443 0-4.096 0-8.602-0.307-15.36h-10.598c-183.962 0-368.077-0.768-552.090 0.768-33.997 0.358-64.051-23.552-76.595-125.645z" />
+<glyph unicode="&#xe971;" glyph-name="group-folder" horiz-adv-x="1350" d="M1185.589 652.92v226.313h-750.482l-96.757 80.767h-338.35v-1024h1183.352l166.719 716.92zM86.498 22.498v851.005h220.31l97.030-80.822h695.255v-139.76h-888.987v-86.552h1031.040l-126.445-543.87z" />
+<glyph unicode="&#xe972;" glyph-name="menu" horiz-adv-x="1145" d="M0 960h1144.611v-104.24h-1144.611v104.24zM0 500.12h1144.611v-104.24h-1144.611v104.24zM0 40.24h1144.611v-104.24h-1144.611v104.24z" />
+<glyph unicode="&#xe973;" glyph-name="balance-sheet" horiz-adv-x="740" d="M663.706-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.646 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM307.2 473.6c14.138 0 25.6-11.462 25.6-25.6v-102.4c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v102.4c0 14.138 11.462 25.6 25.6 25.6zM563.2 473.6c14.138 0 25.6-11.462 25.6-25.6v-102.4c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v102.4c0 14.138 11.462 25.6 25.6 25.6zM435.2 678.4c14.138 0 25.6-11.462 25.6-25.6v-307.2c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v307.2c0 14.138 11.462 25.6 25.6 25.6zM179.2 524.8c14.138 0 25.6-11.462 25.6-25.6v-153.6c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v153.6c0 14.138 11.462 25.6 25.6 25.6zM614.4 217.6c0-14.138-11.462-25.6-25.6-25.6h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h435.2c14.138 0 25.6-11.462 25.6-25.6z" />
+<glyph unicode="&#xe974;" glyph-name="cash-invoice" horiz-adv-x="739" d="M283.546-64c-7.037 0.016-13.405 2.869-18.023 7.476l-62.309 62.309-58.061-58.061c-4.626-4.592-10.999-7.431-18.034-7.431-5.675 0-10.919 1.847-15.163 4.972l0.071-0.050-101.632 74.906c-6.246 4.72-10.24 12.134-10.24 20.48v0 842.906c0.174 42.176 34.317 76.319 76.476 76.493h585.643c42.176-0.174 76.319-34.317 76.493-76.476v-842.871c-0.023-8.544-4.228-16.101-10.676-20.735l-0.076-0.052-106.598-75.469c-4.102-2.918-9.214-4.665-14.734-4.665-7.035 0-13.408 2.838-18.035 7.432l-63.896 63.896-63.898-63.898c-4.617-4.606-10.985-7.459-18.019-7.475h-0.003c-7.037 0.016-13.405 2.869-18.023 7.476l-59.647 59.647-63.334-63.386c-4.625-4.589-10.996-7.425-18.029-7.425-0.088 0-0.175 0-0.263 0.001h0.013zM203.213 67.328c7.037-0.016 13.405-2.869 18.023-7.476l62.309-62.309 63.334 63.386c4.617 4.606 10.985 7.459 18.019 7.475h0.003c7.056-0.002 13.444-2.857 18.074-7.476l59.647-59.647 63.898 63.898c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l66.556-66.556 78.285 55.45v829.44c0 14.138-11.462 25.6-25.6 25.6v0h-585.114c-14.138 0-25.6-11.462-25.6-25.6v0-829.952l73.626-54.272 60.57 60.57c4.625 4.589 10.995 7.424 18.028 7.424 0.034 0 0.068 0 0.102 0h-0.005zM494.592 374.272c0.031 0 0.067 0 0.103 0 8.257 0 14.95-6.694 14.95-14.95 0-0.036 0-0.072 0-0.108v0.006-4.045c15.691-2.198 29.853-7.080 42.601-14.191l-0.617 0.316c6.237-3.339 10.408-9.81 10.408-17.255 0-10.774-8.734-19.507-19.507-19.507-0.059 0-0.118 0-0.177 0.001h0.009c-0.022 0-0.048 0-0.074 0-3.73 0-7.233 0.968-10.273 2.666l0.107-0.055c-6.88 3.901-14.849 7.268-23.221 9.686l-0.792 0.196v-43.981c43.981-11.878 62.822-29.85 62.822-62.259s-24.883-53.248-61.44-57.344v-15.36c0-8.328-6.751-15.078-15.078-15.078s-15.078 6.751-15.078 15.078v0 15.616c-21.435 2.959-40.715 10.195-57.639 20.833l0.602-0.353c-5.981 3.498-9.935 9.89-9.935 17.206 0 10.971 8.894 19.866 19.866 19.866 0.109 0 0.218-0.001 0.326-0.003h-0.016c4.231-0.147 8.112-1.524 11.331-3.782l-0.067 0.045c10.59-7.293 22.984-12.897 36.318-16.079l0.751-0.151v46.080c-41.677 11.315-62.259 27.238-62.259 61.44 1.262 31.775 27.327 57.056 59.297 57.056 0.538 0 1.073-0.007 1.608-0.021l-0.079 0.002v3.482c0 0 0 0.001 0 0.001 0 8.257 6.694 14.95 14.95 14.95 0.072 0 0.144-0.001 0.216-0.002h-0.011zM480.973 280.474v39.117c-13.875-2.048-19.968-9.011-19.968-18.227s4.045-15.002 19.968-20.787zM508.211 229.786v-40.243c13.619 1.997 20.48 8.397 20.48 18.79 0.051 9.728-4.864 16.077-20.48 21.606zM602.726 757.197h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM602.726 655.104h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM602.726 552.96h-229.734c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h229.837c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 655.104h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 552.96h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 169.882h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM270.746 272.026h-127.59c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h127.693c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
+<glyph unicode="&#xe975;" glyph-name="company-import" horiz-adv-x="914" d="M855.398-64h-765.747c-49.638 0.577-89.655 40.95-89.655 90.669 0 0.272 0.001 0.544 0.004 0.815v-0.042 585.574c0.013 9.007 4.347 16.999 11.039 22.016l0.071 0.051 429.466 319.437c4.529 3.397 10.243 5.44 16.435 5.44s11.906-2.043 16.507-5.492l-0.071 0.051 429.414-319.437c6.77-5.063 11.106-13.058 11.11-22.066v-617.524c0.001-0.107 0.001-0.234 0.001-0.361 0-32.462-26.157-58.815-58.544-59.133h-0.030zM55.091 599.194v-571.802c-0.006-0.248-0.010-0.54-0.010-0.832 0-19.286 15.364-34.983 34.52-35.519l0.050-0.001h765.798c1.99 0.303 3.497 2.001 3.497 4.052 0 0.124-0.005 0.246-0.016 0.367l0.001-0.016v603.75l-401.92 298.906zM718.694 108.083h-523.366c-15.213 0-27.546 12.333-27.546 27.546v0 110.182c0 15.213 12.333 27.546 27.546 27.546s27.546-12.333 27.546-27.546v0-82.637h468.275v82.637c0 15.213 12.333 27.546 27.546 27.546s27.546-12.333 27.546-27.546v0-110.182c0-15.213-12.333-27.546-27.546-27.546v0zM351.078 273.562v0c-0.893-0.115-1.926-0.181-2.974-0.181-13.346 0-24.197 10.683-24.468 23.964v0.025l0.717 173.568c0 15.36 12.39 22.989 27.546 22.989v0c0.553 0.042 1.197 0.067 1.847 0.067 13.982 0 25.346-11.209 25.596-25.131v-0.023l-0.717-172.954c-0.051-15.36-12.39-22.323-27.546-22.323zM350.822 212.019c-0.009 0-0.019 0-0.029 0-7.611 0-14.499 3.092-19.477 8.089l-81.921 81.921c-4.986 4.986-8.070 11.874-8.070 19.482 0 15.216 12.335 27.551 27.551 27.551 7.608 0 14.496-3.084 19.482-8.070l62.618-62.566 64.461 64.512c4.986 4.986 11.874 8.070 19.482 8.070 15.216 0 27.551-12.335 27.551-27.551 0-7.608-3.084-14.496-8.070-19.482l-83.968-83.968c-4.961-4.937-11.802-7.988-19.356-7.988-0.089 0-0.179 0-0.268 0.001h0.014zM572.16 218.47v0c-0.769-0.084-1.66-0.132-2.563-0.132-13.609 0-24.667 10.925-24.88 24.483v0.020l0.717 173.312c0 15.36 12.39 22.682 27.546 22.682v0c0.738 0.077 1.594 0.121 2.46 0.121 13.68 0 24.792-10.994 24.983-24.628v-0.018l-0.717-173.21c-0.051-15.411-12.39-22.63-27.546-22.63zM488.909 359.731c-15.194 0.025-27.502 12.348-27.502 27.546 0 7.596 3.074 14.473 8.047 19.457v0l83.968 84.019c4.985 4.987 11.873 8.072 19.482 8.072s14.496-3.085 19.482-8.072l81.92-81.92c4.986-4.986 8.070-11.874 8.070-19.482 0-15.216-12.335-27.551-27.551-27.551-7.608 0-14.496 3.084-19.482 8.070l-62.566 62.566-64.512-64.512c-4.934-5.011-11.774-8.133-19.343-8.192h-0.011z" />
+<glyph unicode="&#xe976;" glyph-name="credit-debit-note" horiz-adv-x="758" d="M425.062 628.838h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 526.438h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM135.731 374.426c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.244 9.926 22.17 22.17 22.17 0.072 0 0.145 0 0.217-0.001h56.923c2.006 0.142 4.347 0.222 6.707 0.222 55.92 0 101.254-45.323 101.274-101.238v-0.565c0-0.028 0-0.060 0-0.093 0-56.158-45.525-101.683-101.683-101.683-2.216 0-4.415 0.071-6.595 0.21l0.297-0.015h-56.934c-0.061-0.001-0.133-0.001-0.205-0.001-12.244 0-22.17 9.926-22.17 22.17 0 0.054 0 0.109 0.001 0.163v-0.008zM214.989 233.933c1.094-0.074 2.371-0.116 3.658-0.116 31.953 0 57.856 25.903 57.856 57.856 0 1.031-0.027 2.056-0.080 3.074l0.006-0.142v0.614c0.056 0.96 0.089 2.082 0.089 3.212 0 32.207-26.109 58.317-58.317 58.317-1.13 0-2.252-0.032-3.366-0.096l0.154 0.007h-34.56v-122.47zM362.906 374.426c-0.001 0.061-0.001 0.133-0.001 0.206 0 12.244 9.926 22.17 22.17 22.17 0.072 0 0.145 0 0.217-0.001h70.543c1.559 0.107 3.38 0.168 5.215 0.168 20.793 0 39.757-7.835 54.099-20.714l-0.075 0.066c10.812-11.406 17.46-26.852 17.46-43.851 0-0.91-0.019-1.815-0.057-2.716l0.004 0.129v-0.614c0.066-1.071 0.104-2.324 0.104-3.585 0-26.609-16.776-49.3-40.328-58.074l-0.428-0.14 31.078-37.734c4.296-4.464 7.021-10.468 7.269-17.104l0.001-0.048c-0.171-11.349-9.411-20.484-20.785-20.484-0.145 0-0.289 0.001-0.433 0.004h0.022c-9.121 0.003-17.176 4.567-22.009 11.534l-0.058 0.089-43.571 55.194h-35.84v-44.442c-0.587-11.888-10.368-21.304-22.349-21.304s-21.762 9.416-22.347 21.252l-0.002 0.052zM452.915 298.086c21.76 0 34.253 11.622 34.253 28.723v0.563c0 19.149-13.363 29.030-35.123 29.030h-44.442v-58.317zM501.965-64h-424.96c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h514.816c8.728-0.016 16.429-4.397 21.038-11.076l0.056-0.086 123.443-180.787c2.789-4.039 4.454-9.040 4.454-14.43 0-0.003 0-0.006 0-0.009v0-525.722c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 517.837l-111.36 163.123h-501.35c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h424.96c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM681.114 731.238h-128c-14.138 0-25.6 11.462-25.6 25.6v0 153.6c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-128h102.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM655.514-62.413c-14.138 0-25.6 11.462-25.6 25.6v0 153.6c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-153.6c0-14.138-11.462-25.6-25.6-25.6v0zM732.314 14.387h-153.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h153.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
+<glyph unicode="&#xe977;" glyph-name="credit-note" horiz-adv-x="762" d="M761.805 710.298v0c-0.469 1.956-1.084 3.662-1.86 5.276l0.068-0.156-0.717 1.178c-0.872 1.734-1.949 3.22-3.227 4.507l0.001-0.001-232.499 232.755c-1.332 1.2-2.806 2.299-4.376 3.255l-0.13 0.073-1.178 0.614c-2.694 1.409-5.882 2.241-9.263 2.253h-435.614c-40.335-0.058-73.011-32.77-73.011-73.114 0-0.018 0-0.036 0-0.054v0.003-877.875c0.058-40.3 32.712-72.953 73.006-73.011h616.147c0.030 0 0.066 0 0.102 0 40.344 0 73.055 32.676 73.114 73.006v697.401c0 1.394-0.131 2.757-0.38 4.079l0.021-0.136zM690.125 727.45h-126.106c0 0 0 0 0 0-18.966 0-34.348 15.346-34.406 34.298v126.214zM689.152-21.35h-616.141c-16.966 0-30.72 13.754-30.72 30.72v0 877.517c0.2 16.885 13.835 30.52 30.701 30.72h414.739v-155.853c0.204-42.261 34.51-76.442 76.799-76.442 0 0 0.001 0 0.001 0h156.109v-676.301c-0.202-16.811-13.878-30.362-30.718-30.362-0.001 0-0.001 0-0.002 0v0zM147.917 587.827h458.547c11.194 0.569 20.055 9.784 20.055 21.069s-8.861 20.5-20.005 21.067l-0.051 0.002h-458.547c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002zM627.507 473.958c0 11.65-9.444 21.094-21.094 21.094v0h-458.496c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002h458.547c11.65 0 21.094 9.444 21.094 21.094v0zM324.506 257.997h27.034c-1.377 10.709-4.799 20.386-9.869 28.973l0.192-0.352c-4.879 8.106-11.048 14.911-18.301 20.349l-0.183 0.131c-7.225 5.509-15.652 9.911-24.769 12.748l-0.575 0.154c-8.834 2.698-18.988 4.252-29.504 4.252-0.229 0-0.459-0.001-0.688-0.002h0.035c-0.549 0.011-1.196 0.017-1.844 0.017-14.33 0-27.937-3.099-40.187-8.662l0.61 0.248c-11.961-5.525-22.026-13.279-30.051-22.808l-0.106-0.13c-7.961-9.614-14.24-20.954-18.185-33.336l-0.196-0.712c-3.964-12.166-6.25-26.165-6.25-40.699 0-0.362 0.001-0.724 0.004-1.085v0.055c-0.003-0.318-0.004-0.694-0.004-1.071 0-14.438 2.134-28.377 6.104-41.519l-0.264 1.015c3.807-12.905 9.81-24.111 17.65-33.765l-0.14 0.177c7.857-9.477 17.663-17.053 28.832-22.167l0.506-0.208c11.503-5.128 24.926-8.115 39.046-8.115 0.781 0 1.56 0.009 2.337 0.027l-0.115-0.002c1.407-0.083 3.052-0.13 4.709-0.13 21.801 0 41.7 8.145 56.82 21.557l-0.089-0.077c15.274 15.448 25.127 36.282 26.459 59.402l0.011 0.246h-27.034c-0.536-8.53-2.368-16.48-5.304-23.872l0.184 0.524c-2.835-7.233-6.842-13.427-11.847-18.658l0.020 0.021c-4.966-5.13-10.924-9.266-17.569-12.104l-0.351-0.133c-6.703-2.792-14.491-4.413-22.657-4.413-0.387 0-0.773 0.004-1.158 0.011l0.058-0.001c-0.513-0.014-1.116-0.022-1.721-0.022-10.806 0-21.013 2.561-30.049 7.109l0.384-0.175c-8.656 4.511-15.853 10.71-21.385 18.212l-0.119 0.169c-5.554 7.696-9.826 16.732-12.275 26.491l-0.115 0.542c-2.538 9.665-3.995 20.761-3.995 32.198 0 0.236 0.001 0.473 0.002 0.709v-0.036c0 0.092 0 0.202 0 0.311 0 10.814 1.458 21.288 4.187 31.236l-0.193-0.827c2.627 10.011 6.834 18.777 12.398 26.5l-0.161-0.235c5.669 7.655 12.883 13.838 21.214 18.168l0.341 0.161c8.535 4.312 18.605 6.837 29.265 6.837 0.674 0 1.345-0.010 2.014-0.030l-0.098 0.002c0.48 0.013 1.044 0.021 1.611 0.021 13.16 0 25.375-4.046 35.468-10.963l-0.214 0.139c10.446-7.639 17.772-19.008 20.028-32.111l0.043-0.299zM387.123 319.437v-203.264h27.034v87.040h66.099c0.466 0.022 1.012 0.034 1.561 0.034 5.196 0 10.133-1.106 14.59-3.094l-0.228 0.091c3.912-1.99 7.158-4.777 9.624-8.167l0.053-0.077c2.448-3.314 4.321-7.219 5.379-11.446l0.048-0.228q1.69-6.707 2.867-14.080c0.894-4.466 1.5-9.698 1.685-15.038l0.005-0.168q0.307-7.68 0.563-14.387c0.163-4.397 0.622-8.557 1.361-12.619l-0.081 0.536c0.486-3.299 1.857-6.214 3.86-8.575l-0.020 0.024h30.157c-2.774 3.338-4.961 7.277-6.332 11.581l-0.068 0.246c-1.3 3.902-2.441 8.615-3.208 13.452l-0.069 0.526c-0.712 4.366-1.226 9.574-1.426 14.862l-0.007 0.242q-0.307 7.68-0.87 15.104c-0.589 5.512-1.4 10.359-2.469 15.108l0.165-0.874c-1.155 4.675-2.914 8.789-5.227 12.524l0.107-0.185c-2.29 3.806-5.236 6.98-8.711 9.459l-0.095 0.065c-4.090 2.783-8.943 4.78-14.176 5.654l-0.212 0.029v0.563c11.406 2.671 20.865 9.573 26.827 18.923l0.104 0.175c5.287 8.909 8.412 19.639 8.412 31.1 0 0.479-0.005 0.956-0.016 1.432l0.001-0.071c0.037 0.715 0.059 1.553 0.059 2.395 0 14.541-6.334 27.603-16.394 36.577l-0.048 0.042c-11.276 8.947-25.713 14.353-41.412 14.353-1.408 0-2.806-0.043-4.192-0.129l0.19 0.009zM470.528 225.741h-56.32v70.707h67.174c0.968 0.095 2.094 0.149 3.231 0.149 9.467 0 18.060-3.746 24.376-9.836l-0.011 0.010c5.338-6.299 8.583-14.519 8.583-23.497 0-0.542-0.012-1.080-0.035-1.616l0.003 0.076c0.020-0.457 0.032-0.993 0.032-1.532 0-6.026-1.43-11.718-3.969-16.755l0.098 0.214c-2.485-4.559-5.947-8.3-10.124-11.039l-0.116-0.071c-4.278-2.72-9.322-4.665-14.731-5.502l-0.219-0.028c-5.39-0.945-11.597-1.485-17.93-1.485-0.014 0-0.029 0-0.043 0h0.002z" />
+<glyph unicode="&#xe978;" glyph-name="customer" horiz-adv-x="1272" d="M629.863 701.979c0-6.195-0.256-12.237-0.666-18.432l-0.768-8.141c-0.41-3.43 1.331-3.43 0 0.666 0-0.002 0-0.005 0-0.007 0-1.913-0.281-3.761-0.803-5.504l0.035 0.136c-2.135-12.982-4.965-24.327-8.604-35.303l0.464 1.614c-1.69-5.12-3.686-10.547-5.786-15.667s0.666 1.178 0.666 1.434c-0.49-1.809-1.209-3.393-2.139-4.827l0.040 0.066c-1.178-2.611-2.509-5.12-3.84-7.885-5.895-11.443-11.844-21.126-18.42-30.33l0.5 0.736c-0.768-1.178-5.12-7.526-3.021-4.198s-2.509-3.021-3.277-4.096c-3.686-4.454-7.526-8.704-11.469-12.902s-8.141-8.141-12.39-11.981c-1.997-1.69-3.84-3.43-5.939-5.12l-3.277-2.765c-0.41-0.41-0.922-0.666-1.331-1.075l1.178 0.922c-0.768-1.69-5.53-4.096-6.963-5.12l-5.683-3.942c-5.12-3.277-10.24-6.451-15.36-9.37s-9.728-5.12-14.746-7.526l-3.174-1.434c-5.53-2.611 5.53 2.099 0 0l-8.141-3.174c-9.507-3.643-20.94-6.917-32.714-9.244l-1.385-0.228c-2.611-0.512-5.12-1.075-7.885-1.434-1.327-0.392-2.856-0.633-4.436-0.665h-0.018c3.174-0.768 4.608 0.512 1.587 0.256-6.042-0.666-12.083-1.178-18.176-1.434-2.633-0.101-5.724-0.159-8.828-0.159-9.825 0-19.514 0.579-29.036 1.704l1.154-0.111c-5.12 0.512 1.331-0.41 1.587-0.256-1.178-0.41-4.096 0.666-5.376 0.768-2.611 0.41-5.12 0.922-7.885 1.434-5.786 1.178-11.571 2.611-17.254 4.198s-10.65 3.277-15.923 5.12l-8.141 3.174c-3.174 1.178-0.666-0.922 1.434-0.666-1.178 0-3.533 1.587-4.762 2.099-11.759 5.485-21.68 11.099-31.117 17.382l0.858-0.537-6.451 4.352c-1.587 1.075-5.53 2.918-6.298 4.608l2.611-1.997-1.997 1.587-3.277 2.765c-2.355 1.997-5.12 4.096-7.117 6.195-8.33 7.538-15.947 15.447-22.995 23.849l-0.301 0.369-2.765 3.277c0 0.256-0.41 0.41-0.512 0.666l0.922-1.178c-1.69 0.768-3.533 4.762-4.608 6.298-3.533 5.12-6.861 10.24-9.882 15.36-2.611 4.454-5.12 9.062-7.526 13.67-1.331 2.611-2.611 5.12-3.84 7.885-0.512 1.075-0.922 2.099-1.434 3.174-2.355 5.12 1.843-4.762 0 0-3.837 9.155-7.537 20.352-10.436 31.868l-0.367 1.72c-1.178 5.12-2.355 10.547-3.174 15.77-0.493 1.44-0.778 3.1-0.778 4.826 0 0.193 0.004 0.386 0.011 0.578l-0.001-0.028c0-0.41 0.768-6.605 0.256-1.587-0.41 3.277-0.666 6.605-0.922 10.24-0.469 5.367-0.737 11.612-0.737 17.92s0.267 12.553 0.792 18.725l-0.055-0.805c0.256 3.021 0.512 6.042 0.922 9.062s-1.075 1.587-0.256-1.587c0.032 1.598 0.273 3.127 0.697 4.578l-0.031-0.124c1.075 6.195 2.253 12.39 3.686 18.432 3.132 12.592 6.639 23.207 10.827 33.472l-0.587-1.626c2.253 5.786-2.509-5.376 0 0 0.512 1.075 0.922 2.099 1.434 3.174 1.178 2.611 2.509 5.12 3.84 7.885 2.611 5.12 5.376 10.24 8.448 15.36s5.53 8.806 8.55 13.056c1.075 1.434 3.277 6.195 5.12 6.963-2.099-0.922-3.021-3.686-0.922-1.178 1.331 1.587 2.509 3.174 3.84 4.762 7.34 8.707 14.956 16.566 23.080 23.873l0.216 0.191c2.099 1.997 4.352 3.84 6.605 5.683 1.075 0.768 7.373 5.53 4.096 3.277s3.021 2.253 4.198 3.021c2.765 1.997 5.683 3.942 8.55 5.786 8.121 5.356 17.57 10.663 27.391 15.312l1.434 0.611c0.922 0.41 3.84 2.355 4.762 2.099-0.256 0-6.042-2.355-1.434-0.666l8.141 3.174c5.53 1.997 11.213 3.84 16.845 5.376s10.24 2.611 15.36 3.84c2.918 0.666 5.939 1.178 8.806 1.587l4.454 0.666c2.509 0.41-6.042-0.666 0 0 7.956 0.967 17.168 1.519 26.509 1.519 3.282 0 6.547-0.068 9.796-0.203l-0.465 0.015c5.786-0.256 11.571-0.666 17.357-1.331 1.843-0.256 6.042-1.331-0.666 0 0.97-0.207 2.176-0.388 3.402-0.502l0.131-0.010c3.533-0.512 7.117-1.178 10.547-1.997 12.978-2.732 24.086-5.996 34.826-10.012l-1.649 0.54c2.509-0.922 5.12-1.843 7.373-2.918 5.53-2.099-4.096 1.997-0.666 0.256l3.942-1.843c5.12-2.355 10.24-5.12 15.36-7.885s9.472-5.53 14.080-8.55l6.451-4.352 3.533-2.509 2.099-1.587c2.253-1.69 1.843-1.331-1.178 0.922 4.582-2.824 8.487-6.224 11.765-10.163l0.062-0.077c4.352-3.84 8.448-7.782 12.39-11.981s7.782-8.448 11.469-12.902c1.331-1.587 3.686-3.43 4.352-5.376l-1.997 2.611c0.666-0.922 1.434-1.843 2.099-2.765l3.021-4.198c5.824-8.248 11.587-17.73 16.706-27.599l0.651-1.38c1.178-2.355 2.355-4.762 3.43-7.117 0.666-1.331 1.178-2.611 1.843-3.942 1.69-3.43-2.355 6.195-0.256 0.666s4.198-10.906 6.042-16.435c3.213-9.587 6.096-21.244 8.099-33.201l0.195-1.411c0.124-1.357 0.305-2.564 0.549-3.747l-0.037 0.214c-1.331 6.298-0.41 3.277-0.256 1.587 0.256-3.021 0.666-6.042 0.922-9.062-0.512-5.376-0.41-11.571-0.41-17.766 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.016 55.639-17.655 107.154-47.639 149.271l0.535-0.791c-30.633 42.818-72.688 75.684-121.727 94.417l-1.819 0.61c-25.812 9.428-55.613 14.88-86.687 14.88-79.664 0-150.958-35.837-198.641-92.268l-0.317-0.385c-33.195-40.027-54.856-90.698-59.282-146.227l-0.059-0.922c-0.433-5.602-0.68-12.132-0.68-18.719 0-103.143 60.526-192.149 147.998-233.439l1.572-0.667c32.246-15.066 70.014-23.858 109.835-23.858 18.149 0 35.871 1.826 52.993 5.305l-1.701-0.289c104.225 22.401 184.213 105.092 202.324 209.035l0.224 1.551c2.089 12.587 3.42 27.273 3.683 42.22l0.004 0.276c0 14.506-11.76 26.266-26.266 26.266s-26.266-11.76-26.266-26.266v0zM1096.192 628.916c0-4.352 0-8.55-0.512-12.902 0-2.099-0.41-4.198-0.512-6.298-0.666-6.605 0.768 4.352-0.256-1.997-1.562-9.603-3.663-18.018-6.379-26.152l0.338 1.166c-1.331-3.942-2.611-7.782-4.198-11.571s2.253 4.608-0.41-0.922c-1.075-2.099-1.997-4.198-3.021-6.298-4.205-8.282-8.491-15.304-13.25-21.964l0.347 0.511c-0.922-1.331-2.611-4.762-4.096-5.53 0 0 3.533 4.096 1.434 1.997l-1.587-1.997c-3.036-3.725-6.049-7.063-9.22-10.244l0.004 0.004q-4.147-4.352-8.704-8.294l-3.942-3.43-2.611-2.253c-3.686-3.174 3.277 2.253 0.512 0.41-6.015-4.52-12.856-9.008-19.976-13.062l-0.965-0.506c-3.533-1.997-7.117-3.84-10.803-5.53l-2.355-1.075c-3.174-1.69 4.762 1.843 1.434 0.666-2.253-0.768-4.352-1.69-6.605-2.509-6.837-2.608-15.092-4.978-23.586-6.686l-1.041-0.175c-2.099-0.41-4.096-0.768-6.195-1.075-6.195-1.075 3.84 0.256-1.075 0s-9.062-0.922-13.67-1.075c-1.558-0.044-3.392-0.069-5.231-0.069-7.518 0-14.939 0.415-22.241 1.225l0.899-0.081c-5.12 0.512 5.12-0.768-1.075 0l-6.195 1.075c-4.352 0.922-8.704 1.997-12.902 3.174-4.841 1.318-8.743 2.629-12.552 4.126l0.827-0.286c-1.997 0.666-3.84 1.434-5.683 2.253-3.533 1.331 0.666-0.922 1.434-0.666-1.207 0.337-2.263 0.827-3.216 1.459l0.042-0.026c-8.643 4.103-15.84 8.145-22.742 12.605l0.777-0.47c-3.43 2.253-6.605 4.608-9.882 6.963s3.84-3.277 1.331-0.922l-1.997 1.587c-1.69 1.434-3.533 2.918-5.12 4.454-6.187 5.565-11.83 11.418-17.035 17.65l-0.22 0.27c-0.768 0.922-1.434 1.843-2.253 2.611-1.997 2.253 1.587-1.997 1.434-1.997-1.331 0.768-2.611 3.533-3.533 5.12-2.509 3.533-5.12 7.117-7.117 10.803s-4.096 6.963-5.939 10.547c-0.922 1.843-1.843 3.686-2.611 5.376s-0.922 2.099-1.434 3.174c-1.587 3.021 2.355-6.195 0.256-0.666-2.644 6.357-5.222 14.174-7.259 22.206l-0.267 1.243c-0.922 4.096-1.843 8.141-2.509 12.237-0.301 1.053-0.486 2.266-0.512 3.518v0.015s0.768-6.861 0.256-1.587c-0.256 2.355-0.512 5.12-0.666 7.219-0.346 3.979-0.543 8.61-0.543 13.286s0.197 9.307 0.584 13.884l-0.041-0.598c0 2.099 0.41 4.198 0.666 6.298 0.512 5.12-0.922-5.683 0 1.075 0.666 4.352 1.587 8.806 2.611 13.158 2.491 9.67 5.188 17.736 8.366 25.556l-0.481-1.339c1.075 2.765-0.922-2.355-0.922-2.253 0.401 1.216 0.886 2.266 1.474 3.247l-0.040-0.073c0.768 1.843 1.69 3.686 2.611 5.53 1.997 3.84 4.096 7.629 6.298 11.315s4.352 6.861 6.605 10.24l3.533 5.12-1.434-1.997c0 0.41 2.355 2.918 2.765 3.277 5.425 6.502 11.067 12.355 17.1 17.783l0.155 0.137c1.434 1.331 3.021 2.611 4.608 3.942l1.997 1.587c3.533 3.021-1.075-0.666-1.331-0.922 3.015 2.97 6.493 5.483 10.312 7.418l0.235 0.108c6.264 4.224 13.469 8.273 21 11.737l0.965 0.398c0.908 0.546 1.958 1.032 3.061 1.401l0.113 0.033s-5.12-1.997-2.253-0.922c1.997 0.666 3.84 1.434 5.683 2.253 4.096 1.587 8.294 2.918 12.493 4.096s8.038 2.099 12.134 2.918l6.195 1.178c1.335 0.112 2.542 0.293 3.722 0.546l-0.19-0.034c-1.331-0.41-5.12-0.666-1.587-0.256 6.61 0.729 14.275 1.145 22.037 1.145 1.919 0 3.832-0.025 5.739-0.076l-0.281 0.006c3.942 0 7.885-0.512 11.827-0.922 6.861-0.768-3.84 0.666 1.075 0 2.355-0.41 4.762-0.768 7.117-1.331 9.846-1.915 18.427-4.41 26.673-7.582l-1.073 0.363c1.587-0.666 3.277-1.331 5.12-1.843 4.762-1.843-1.331 0.666-1.434 0.666 1.222-0.416 2.27-0.901 3.258-1.479l-0.083 0.045c3.942-1.843 7.782-3.84 11.571-5.939s6.963-4.096 10.24-6.195 8.806-4.608 10.547-7.526c0 0-4.198 3.43-1.997 1.434 0.768-0.768 1.843-1.434 2.611-2.253l4.608-3.942c3.174-2.918 6.298-5.786 9.216-8.96s5.376-5.939 8.038-8.96l1.587-1.997c1.843-2.099 1.843-0.512-0.922 1.331 1.583-1.596 2.944-3.415 4.033-5.404l0.063-0.125c4.324-6.106 8.606-13.125 12.416-20.429l0.486-1.024c0.922-1.843 1.843-3.686 2.611-5.53 0.41-0.768 0.666-1.587 1.075-2.355 1.587-3.174-1.843 5.12-0.666 1.434s3.174-8.141 4.454-12.39c2.293-6.867 4.391-15.278 5.885-23.897l0.156-1.089c1.075-6.195-0.256 3.84 0-1.075 0.256-2.099 0.41-4.198 0.666-6.298 0.256-4.352 0.41-8.96 0.41-13.568 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.131 110.181-89.481 199.45-199.68 199.45-61.111 0-115.81-27.452-152.438-70.698l-0.241-0.292c-25.653-30.951-42.449-70.083-46.030-112.97l-0.050-0.745c-0.361-4.494-0.567-9.729-0.567-15.013 0-79.514 46.608-148.143 113.994-180.056l1.21-0.515c24.987-11.7 54.257-18.528 85.123-18.528 14.324 0 28.304 1.47 41.798 4.269l-1.327-0.23c79.952 17.531 141.248 81.047 155.268 160.847l0.175 1.201c1.733 9.925 2.789 21.43 2.917 33.157l0.001 0.123c-0.087 14.499-11.817 26.23-26.309 26.317h-0.008c-14.528-0.371-26.164-12.237-26.164-26.821 0-0.075 0-0.15 0.001-0.225v0.011zM794.932 112.206v-86.477c0-4.096 0-8.038 0-12.134 0-6.042 1.587 5.683 0 0-0.256-1.178-0.512-2.355-0.768-3.43-0.472-2.012-1.017-3.721-1.676-5.372l0.089 0.252s2.918 5.376 0 0.768c-0.768-1.178-1.331-2.509-2.099-3.84-0.256-0.512-0.666-0.922-0.922-1.434-1.587-2.355-1.331-1.997 1.075 1.178 0.41-1.178-6.298-6.605-7.117-7.373-4.198-3.942 5.12 2.765 0 0-1.119-0.594-2.074-1.205-2.974-1.884l0.056 0.040c-1.327-0.903-2.847-1.697-4.458-2.305l-0.15-0.050c1.075 0.41 2.099 0.922 3.021 1.331l-3.277-1.178c-0.894-0.311-2.044-0.629-3.218-0.883l-0.213-0.039-1.69-0.41c-2.918-0.512-2.355-0.41 1.69 0-1.171-0.198-2.519-0.31-3.894-0.31-0.575 0-1.146 0.020-1.712 0.059l0.076-0.004h-1.997c-37.274 0-74.496 0-111.77 0h-573.44c-0.277-0.032-0.597-0.050-0.922-0.050s-0.645 0.018-0.96 0.054l0.039-0.004c-2.918 0.256-2.355 0 1.587-0.256-1.619 0.175-3.094 0.499-4.505 0.965l0.153-0.044c-1.434 0.41-2.765 0.922-4.198 1.178-5.683 1.434 5.12-2.918 0 0-1.331 0.666-2.509 1.331-3.84 2.099s-1.434 0.922-2.253 1.331c-2.355 1.587-1.997 1.331 1.178-1.075-1.075-0.256-5.376 5.12-6.195 5.786-0.419 0.407-0.805 0.841-1.157 1.303l-0.021 0.028c-1.843 2.253-1.434 1.69 0.922-1.331-1.033 1.266-1.954 2.694-2.706 4.22l-0.059 0.132c-0.512 1.075-1.075 2.099-1.587 3.021-2.918 5.12 1.434-5.53 0 0-0.41 1.69-1.075 3.277-1.434 5.12l-0.41 1.69c-0.512 2.918-0.41 2.355 0-1.69-0.283 2.391-0.444 5.16-0.444 7.968 0 1.827 0.068 3.637 0.203 5.43l-0.014-0.239v87.040c0 5.53 0 11.059 0.512 16.589 0.256 3.686 0.512 7.219 0.922 10.906l0.41 3.533c0.41 2.918 0.256 2.355-0.256-1.587 0 1.178 0.41 2.355 0.512 3.533 2.237 14.632 5.306 27.498 9.307 39.946l-0.5-1.802c1.843 5.939 3.84 11.725 6.042 17.51l1.587 4.096c2.253 5.786-2.509-5.376 0 0l4.352 9.472c6.272 12.82 12.625 23.635 19.684 33.929l-0.586-0.905c1.587 2.355 3.277 4.762 5.12 7.117 0.82 1.615 1.829 2.999 3.022 4.199l-0.001-0.001-1.997-2.611c0.666 0.922 1.434 1.843 2.099 2.765 3.942 5.12 8.038 9.728 12.39 14.336 8.57 9.216 17.596 17.691 27.166 25.524l0.482 0.383c1.187 1.216 2.533 2.268 4.006 3.126l0.090 0.048c-5.683-2.611-1.69-1.331 0 0s4.608 3.43 6.963 5.12c5.376 3.84 11.059 7.373 16.845 10.65s10.65 5.939 16.077 8.704c2.611 1.331 5.12 2.509 7.885 3.686 1.37 0.864 2.951 1.58 4.63 2.067l0.132 0.033c-3.533-1.434-4.096-1.69-1.434-0.666 1.075 0.41 2.099 0.922 3.277 1.331 10.191 4.167 22.585 8.105 35.338 11.114l1.782 0.354c5.786 1.331 11.725 2.509 17.613 3.43 1.591 0.421 3.434 0.697 5.33 0.767l0.046 0.001c-6.963 0.256-1.843-0.256 0 0 3.686 0.41 7.219 0.768 10.906 0.922 6.605 0.41 13.158 0.666 19.61 0.666h263.373c6.042 0 12.134-0.256 18.278-0.666 3.686-0.256 7.526-0.512 11.213-1.075 1.075 0 8.448-1.178 1.843 0l6.605-1.075c17.973-3.063 33.889-7.49 49.101-13.337l-1.741 0.588 5.12-1.997c0.922-0.41 7.526-3.277 1.69-0.666 3.277-1.434 6.605-2.918 9.728-4.454 8.997-4.274 16.378-8.35 23.5-12.804l-0.972 0.567q9.062-5.53 17.766-11.827c1.69-1.178 3.533-2.509 5.12-3.84-4.608 3.942-1.075 0.768 0 0 3.277-2.611 6.605-5.376 9.728-8.141 10.841-9.548 20.629-19.709 29.536-30.618l0.365-0.461 3.021-3.84c2.509-3.174-3.686 5.12 0 0 2.099-2.918 4.198-5.786 6.298-8.806 4.198-6.195 8.294-12.646 11.981-19.2s6.605-12.237 9.472-18.432c0.666-1.434 1.331-3.021 2.099-4.454 2.918-6.195-1.997 5.12 0.41-1.075 1.434-3.686 2.918-7.373 4.198-11.213 4.183-11.377 7.958-25.128 10.639-39.266l0.267-1.694c0.41-1.997 0.666-4.096 1.075-6.042s1.69-8.038 0.256-1.178c0.515-2.939 0.899-6.463 1.068-10.044l0.007-0.196c0.756-6.213 1.188-13.406 1.188-20.699 0-0.679-0.004-1.357-0.011-2.034l0.001 0.103c0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.419 69.482-24.768 133.198-65.211 183.404l0.443-0.568c-41.124 51.011-98.456 87.488-164.091 101.647l-1.899 0.343c-23.234 4.177-49.978 6.565-77.28 6.565-5.503 0-10.983-0.097-16.439-0.289l0.791 0.022h-208.845c-3.562 0.117-7.75 0.184-11.954 0.184-28.736 0-56.743-3.126-83.698-9.056l2.57 0.474c-111.736-28.841-196.487-119.231-216.671-232.004l-0.263-1.775c-3.043-24.716-4.78-53.327-4.78-82.344 0-10.114 0.211-20.18 0.629-30.191l-0.047 1.431c0-12.646-0.768-25.6 0.256-38.195 2.845-35.882 28.424-65.070 62.21-73.305l0.561-0.116c9.006-1.426 19.391-2.241 29.967-2.241 3.489 0 6.957 0.089 10.402 0.264l-0.484-0.020h662.374c0.078 0 0.169 0 0.261 0 23.41 0 44.526 9.819 59.455 25.564l0.034 0.037c12.139 13.235 20.074 30.502 21.588 49.578l0.019 0.291c0.41 4.454 0.256 8.96 0.256 13.568v87.040c0.016 0.346 0.026 0.751 0.026 1.158 0 14.478-11.737 26.214-26.214 26.214s-26.214-11.737-26.214-26.214c0-0.407 0.009-0.813 0.028-1.215l-0.002 0.057zM1219.38 181.428v-81.92c0-2.355 0-4.608 0-6.963v-2.253c-0.41 0.41 1.434 5.12 0.41 2.611-0.252-0.693-0.483-1.536-0.648-2.401l-0.017-0.108c-0.922-5.12 0 1.843 0.768 1.434s-1.075-2.099-1.178-2.253c-2.611-5.12 0.41 0.768 0.666 0.512-1.092-1.285-2.248-2.44-3.49-3.497l-0.043-0.036c-1.075 1.075 5.12 2.918 1.178 1.178-0.884-0.389-1.624-0.783-2.331-1.223l0.078 0.045c-2.355-1.69 2.253 1.434 2.355 0.922s-2.918-0.768-3.277-0.922c-4.608-1.434 5.12 0 0 0h-316.928c-24.73 0-49.766 0.922-74.65 0h-1.178l26.317-26.317c0.277 7.798 0.435 16.961 0.435 26.16 0 18.539-0.641 36.928-1.903 55.146l0.136-2.458c-5.189 53.982-24.391 102.655-53.884 143.389l0.585-0.849c-18.101 24.387-38.789 45.416-62.025 63.295l-0.746 0.551c1.69-13.824 3.533-27.494 5.12-41.318l4.762 4.096c0.768 0.666 6.298 5.12 1.178 1.075 2.765 2.099 5.53 4.096 8.448 6.042 6.033 4.064 13.104 8.215 20.425 11.946l1.181 0.546c1.843 0.922 3.84 1.69 5.683 2.611 6.298 3.021-5.12-1.843 1.434 0.666 3.277 1.178 6.605 2.509 9.882 3.533 6.781 2.406 15.085 4.639 23.602 6.271l1.127 0.18c1.877 0.522 4.078 0.904 6.339 1.069l0.112 0.007c-6.605 0 0.41 0 1.587 0 3.686 0.41 7.219 0.666 10.906 0.768s6.298 0.256 9.626 0.256h217.293q5.53 0 11.059-0.41c0.669 0.048 1.45 0.075 2.237 0.075 3.083 0 6.069-0.42 8.902-1.206l-0.234 0.055-3.43 0.41 3.533-0.512 5.12-0.922q4.352-0.768 8.704-1.997c8.231-1.971 15.068-4.096 21.718-6.605l-1.238 0.41c1.69-0.666 3.277-1.331 5.12-1.843 5.53-2.099-4.096 1.997-0.666 0.256s5.786-2.611 8.704-4.096c7.164-3.576 13.063-6.981 18.749-10.684l-0.727 0.444c2.918-1.843 5.786-3.84 8.55-5.939l1.434-1.075c2.253-1.69 1.843-1.331-1.178 0.922 1.587-0.256 4.096-3.277 5.376-4.352 5.53-4.729 10.545-9.597 15.238-14.763l0.122-0.137c2.509-2.765 5.12-5.53 7.373-8.397 0.666-0.922 3.021-2.918 3.277-4.096-2.099 2.918-2.611 3.43-1.434 1.997 0.512-0.666 1.075-1.331 1.587-2.099 4.033-5.427 8.048-11.616 11.674-18.054l0.461-0.89c1.997-3.533 3.84-7.117 5.683-10.803 0.443-0.829 0.925-1.874 1.353-2.947l0.080-0.228c0.512-1.075 0.922-2.099 1.434-3.174-1.434 3.533-1.69 4.096-0.666 1.434 2.332-5.623 4.796-12.845 6.866-20.231l0.354-1.477c0.922-3.43 1.69-6.963 2.509-10.24 0.41-1.69 0.666-3.533 1.075-5.12s0.768-9.882 0.41-1.997c0.666-7.885 1.69-15.667 1.69-23.706 0-14.534 11.782-26.317 26.317-26.317s26.317 11.782 26.317 26.317v0c-0.13 64.693-28.752 122.675-73.982 162.084l-0.258 0.22c-38.145 32.565-88.033 52.379-142.548 52.379-0.285 0-0.571-0.001-0.856-0.002h-198.049c-1.612 0.028-3.513 0.044-5.419 0.044-15.167 0-30.096-1.021-44.721-2.998l1.705 0.189c-42.555-6.818-79.939-25.247-109.832-51.899l0.213 0.187c-4.669-4.568-7.563-10.933-7.563-17.974 0-1.464 0.125-2.898 0.365-4.294l-0.021 0.149c1.29-8.101 5.909-14.924 12.385-19.134l0.108-0.066c-5.12 3.942 1.075-0.922 2.355-1.997l6.707-5.683c4.454-3.84 8.704-7.885 12.902-12.134s7.782-8.038 11.315-12.134l5.12-5.939c0.768-1.075 1.69-1.997 2.509-3.021s3.84-5.12 1.587-1.997 1.331-1.843 1.434-2.099c0.768-1.075 1.587-2.099 2.253-3.174 1.587-2.099 3.021-4.352 4.454-6.451 3.277-5.12 6.451-10.24 9.37-15.002s5.12-9.216 7.526-13.926c1.178-2.355 2.355-4.762 3.43-7.117l1.587-3.533c2.509-5.376-1.587 4.096 0.41-1.075 3.617-8.553 7.306-19.285 10.34-30.287l0.463-1.969c1.434-5.53 2.765-11.213 3.84-16.845l1.587-9.062c0.303-1.174 0.539-2.571 0.659-4l0.006-0.096-0.41 2.918c0-1.075 0.256-2.099 0.41-3.021 1.123-10.937 1.764-23.633 1.764-36.479 0-2.638-0.027-5.269-0.081-7.894l0.006 0.392v-37.888c0.227-14.442 11.875-26.090 26.295-26.317h379.771c1.963-0.16 4.248-0.251 6.556-0.251 10.202 0 19.987 1.78 29.064 5.047l-0.598-0.188c21.052 9.203 35.555 29.728 35.84 53.673v0.036c0 6.451 0 13.005 0 19.61v69.376c-0.143 14.476-11.84 26.174-26.303 26.317h-0.014c-14.395-0.543-25.927-12.075-26.469-26.42l-0.002-0.051z" />
+<glyph unicode="&#xe979;" glyph-name="day-book" horiz-adv-x="739" d="M662.595-64h-586.189c-42.415 0-76.8 34.385-76.8 76.8v0 868.966c0 42.415 34.385 76.8 76.8 76.8v0h586.189c42.415 0 76.8-34.385 76.8-76.8v0-869.222c-0.146-42.305-34.474-76.544-76.8-76.544 0 0 0 0 0 0v0zM76.407 907.315c-14.138 0-25.6-11.462-25.6-25.6v0-869.222c0-14.138 11.462-25.6 25.6-25.6v0h586.189c14.138 0 25.6 11.462 25.6 25.6v0 869.274c0 14.138-11.462 25.6-25.6 25.6v0zM424.259 372.019h-281.139c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.19c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM577.603 269.773h-434.483c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.534c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM577.603 167.526h-434.483c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.534c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM322.013 602.163c-7.158 0.001-13.629 2.94-18.274 7.676l-0.004 0.004-71.168 72.858-71.168-72.858c-4.645-4.708-11.096-7.624-18.227-7.624-14.101 0-25.539 11.401-25.6 25.487v306.694c0 14.138 11.462 25.6 25.6 25.6v0h178.944c14.138 0 25.6-11.462 25.6-25.6v0-306.739c-0.058-14.094-11.497-25.498-25.6-25.498-0.036 0-0.072 0-0.108 0h0.006zM232.567 744.858c7.158-0.001 13.629-2.94 18.274-7.676l0.004-0.004 45.619-46.746v218.368h-127.744v-218.419l45.619 46.694c4.649 4.74 11.12 7.679 18.278 7.68v0z" />
+<glyph unicode="&#xe97a;" glyph-name="E-way-bill" horiz-adv-x="739" d="M398.438 348.211h-280.781c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h280.883c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM551.629 194.867h-433.971c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h434.074c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM283.546-64v0c-7.037 0.016-13.405 2.869-18.023 7.476l-62.309 62.309-58.061-58.061c-4.631-4.623-11.024-7.482-18.086-7.482-5.675 0-10.918 1.846-15.163 4.971l0.071-0.050-101.632 74.957c-6.246 4.72-10.24 12.134-10.24 20.48v0 842.803c0 0 0 0 0 0.001 0 42.307 34.21 76.625 76.476 76.799h585.54c42.283-0.175 76.493-34.492 76.493-76.799 0 0 0 0 0-0.001v0-842.752c-0.023-8.544-4.228-16.101-10.676-20.735l-0.076-0.052-106.598-75.418c-4.102-2.918-9.214-4.665-14.734-4.665-7.035 0-13.408 2.838-18.035 7.432l-63.844 63.844-63.846-63.846c-4.614-4.525-10.941-7.318-17.92-7.318s-13.306 2.793-17.924 7.322l-59.644 59.593-63.334-63.334c-4.63-4.619-11.021-7.475-18.079-7.475-0.016 0-0.032 0-0.048 0h0.002zM203.213 67.328c7.037-0.016 13.405-2.869 18.023-7.476l62.309-62.309 63.334 63.386c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l59.593-59.593 63.846 63.846c4.614 4.525 10.941 7.318 17.92 7.318s13.306-2.793 17.924-7.322l66.556-66.556 78.285 55.398v829.44c0 14.138-11.462 25.6-25.6 25.6v0h-584.704c-14.138 0-25.6-11.462-25.6-25.6v0-829.85l73.626-54.272 60.57 60.57c4.597 4.437 10.863 7.17 17.768 7.17 0.125 0 0.25-0.001 0.375-0.003h-0.019zM246.221 819.251c0.046 0 0.1 0.001 0.154 0.001 10.519 0 19.046-8.527 19.046-19.046 0-0.036 0-0.072 0-0.109v0.006-5.12c19.979-2.831 38.005-9.042 54.249-18.070l-0.796 0.406c7.908-4.273 13.191-12.502 13.191-21.965 0-13.743-11.141-24.883-24.883-24.883-0.029 0-0.059 0-0.088 0h0.005c-0.065-0.001-0.143-0.001-0.22-0.001-4.69 0-9.095 1.215-12.92 3.347l0.135-0.069c-8.802 4.946-19.001 9.205-29.712 12.248l-1.008 0.245v-56.013c56.013-15.36 79.974-37.99 79.974-79.258s-31.693-67.84-78.029-73.011v-19.507c-0.542-10.169-8.919-18.209-19.174-18.209s-18.633 8.040-19.172 18.161l-0.002 0.048v19.917c-27.25 3.617-51.802 12.672-73.39 26.055l0.788-0.455c-7.497 4.494-12.437 12.576-12.437 21.811 0 13.997 11.347 25.344 25.344 25.344 0.035 0 0.069 0 0.103 0h-0.005c5.401-0.198 10.356-1.95 14.475-4.82l-0.088 0.058c13.474-9.23 29.246-16.306 46.208-20.292l0.947-0.188v58.522c-53.043 14.387-79.258 34.662-79.258 78.541 1.627 40.45 34.813 72.626 75.514 72.626 0.668 0 1.335-0.009 1.999-0.026l-0.098 0.002v4.454c-0.001 0.076-0.002 0.166-0.002 0.256 0 10.519 8.527 19.046 19.046 19.046 0.019 0 0.037 0 0.056 0h-0.003zM228.915 699.853v49.766c-17.664-2.56-25.6-11.469-25.6-23.194s5.222-19.251 25.6-26.624zM263.578 635.341v-51.2c17.306 2.56 26.010 10.65 26.010 23.962 0.205 12.083-6.298 20.019-26.010 27.187z" />
+<glyph unicode="&#xe97b;" glyph-name="import-trial-balance" horiz-adv-x="1047" d="M116.971 490.906l-116.326-512c-0.358-1.922-0.563-4.133-0.563-6.393 0-19.559 15.361-35.531 34.678-36.509l0.087-0.004h977.306c19.404 0.982 34.765 16.953 34.765 36.513 0 2.259-0.205 4.471-0.597 6.617l0.034-0.224-116.326 512c-4.058 15.442-17.783 26.688-34.174 26.931h-162.945c-19.285 0-34.918-15.634-34.918-34.918s15.634-34.918 34.918-34.918v0h134.912l100.352-442.163h-889.395l100.352 442.163h134.912c19.285 0 34.918 15.634 34.918 34.918s-15.634 34.918-34.918 34.918v0h-162.918c-16.312-0.544-29.887-11.651-34.139-26.673l-0.063-0.259zM523.396 75.622c-9.235 0.376-17.581 3.897-24.062 9.513l0.049-0.041-197.837 186.163c-6.622 7.115-10.686 16.688-10.686 27.21 0 8.911 2.915 17.142 7.844 23.79l-0.076-0.108c6.532 6.319 15.443 10.214 25.264 10.214 10.001 0 19.058-4.038 25.631-10.574l-0.002 0.002 138.906-130.918v734.208c0 19.285 15.634 34.918 34.918 34.918s34.918-15.634 34.918-34.918v-734.157l138.906 130.918c6.773 6.084 15.777 9.805 25.649 9.805 9.682 0 18.529-3.579 25.289-9.485l-0.045 0.039c4.945-6.522 7.922-14.774 7.922-23.721 0-10.537-4.128-20.11-10.856-27.189l0.016 0.017-197.837-186.163c-6.045-5.892-14.315-9.527-23.435-9.527-0.167 0-0.334 0.001-0.501 0.004h0.025z" />
+<glyph unicode="&#xe97c;" glyph-name="invoice1" horiz-adv-x="762" d="M761.805 710.298v0c-0.469 1.956-1.084 3.662-1.86 5.276l0.068-0.156-0.717 1.178c-0.872 1.734-1.949 3.22-3.227 4.507l0.001-0.001-232.499 232.755c-1.332 1.2-2.806 2.299-4.376 3.255l-0.13 0.073-1.178 0.614c-2.694 1.409-5.882 2.241-9.263 2.253h-435.614c-40.335-0.058-73.011-32.77-73.011-73.114 0-0.018 0-0.036 0-0.054v0.003-877.875c0.058-40.3 32.712-72.953 73.006-73.011h616.147c0.030 0 0.066 0 0.102 0 40.344 0 73.055 32.676 73.114 73.006v697.401c0 1.394-0.131 2.757-0.38 4.079l0.021-0.136zM690.125 727.45h-126.106c0 0 0 0 0 0-18.966 0-34.348 15.346-34.406 34.298v126.214zM689.152-21.35h-616.141c-16.966 0-30.72 13.754-30.72 30.72v0 877.517c0.2 16.885 13.835 30.52 30.701 30.72h414.739v-155.853c0.204-42.261 34.51-76.442 76.799-76.442 0 0 0.001 0 0.001 0h156.109v-676.301c-0.202-16.811-13.878-30.362-30.718-30.362-0.001 0-0.001 0-0.002 0v0zM147.917 280.627h458.547c11.194 0.569 20.055 9.784 20.055 21.069s-8.861 20.5-20.005 21.067l-0.051 0.002h-458.547c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002zM627.507 166.758c0 11.65-9.444 21.094-21.094 21.094v0h-458.496c-0.31 0.016-0.674 0.026-1.039 0.026-11.65 0-21.094-9.444-21.094-21.094s9.444-21.094 21.094-21.094c0.365 0 0.729 0.009 1.090 0.028l-0.051-0.002h458.547c11.65 0 21.094 9.444 21.094 21.094v0zM246.221 768.051c0.046 0 0.1 0.001 0.154 0.001 10.519 0 19.046-8.527 19.046-19.046 0-0.036 0-0.072 0-0.109v0.006-5.12c19.979-2.831 38.005-9.042 54.249-18.070l-0.796 0.406c7.908-4.273 13.191-12.502 13.191-21.965 0-13.743-11.141-24.883-24.883-24.883-0.029 0-0.059 0-0.088 0h0.005c-0.065-0.001-0.143-0.001-0.22-0.001-4.69 0-9.095 1.215-12.92 3.347l0.135-0.069c-8.802 4.946-19.001 9.205-29.712 12.248l-1.008 0.245v-56.013c56.013-15.36 79.974-37.99 79.974-79.258s-31.693-67.84-78.029-73.011v-19.507c-0.542-10.169-8.919-18.209-19.174-18.209s-18.633 8.040-19.172 18.161l-0.002 0.048v19.917c-27.25 3.617-51.802 12.672-73.39 26.055l0.788-0.455c-7.497 4.494-12.437 12.576-12.437 21.811 0 13.997 11.347 25.344 25.344 25.344 0.035 0 0.069 0 0.103 0h-0.005c5.401-0.198 10.356-1.95 14.475-4.82l-0.088 0.058c13.474-9.23 29.246-16.306 46.208-20.292l0.947-0.188v58.522c-53.043 14.387-79.258 34.662-79.258 78.541 1.627 40.45 34.813 72.626 75.514 72.626 0.668 0 1.335-0.009 1.999-0.026l-0.098 0.002v4.454c-0.001 0.076-0.002 0.166-0.002 0.256 0 10.519 8.527 19.046 19.046 19.046 0.019 0 0.037 0 0.056 0h-0.003zM228.915 648.653v49.766c-17.664-2.56-25.6-11.469-25.6-23.194s5.222-19.251 25.6-26.624zM263.578 584.141v-51.2c17.306 2.56 26.010 10.65 26.010 23.962 0.205 12.083-6.298 20.019-26.010 27.187z" />
+<glyph unicode="&#xe97d;" glyph-name="journal-voucher" horiz-adv-x="741" d="M663.859-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.8 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM575.078 244.787h-431.514c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h370.79l-31.488 32.256c-4.517 4.617-7.304 10.943-7.304 17.92 0 14.157 11.477 25.634 25.634 25.634 7.18 0 13.671-2.952 18.325-7.709l73.886-75.729c4.525-4.614 7.318-10.941 7.318-17.92 0-14.138-11.462-25.6-25.6-25.6-0.017 0-0.033 0-0.050 0h0.003zM217.446 66.662c-0.014 0-0.032 0-0.049 0-6.955 0-13.263 2.774-17.877 7.276l0.005-0.005-77.568 75.725c-4.739 4.65-7.676 11.121-7.676 18.278 0 14.137 11.459 25.598 25.596 25.6h438.835c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0h-376.013l32.563-31.795c4.739-4.65 7.676-11.121 7.676-18.278 0-14.137-11.459-25.598-25.596-25.6v0zM425.165 731.136h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.765 628.736h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.765 526.336h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
+<glyph unicode="&#xe97e;" glyph-name="header-setting" horiz-adv-x="1025" d="M909.708 411.308v73.237l97.519 72.847c10.658 8.614 17.417 21.686 17.417 36.337 0 10.316-3.351 19.849-9.023 27.57l0.091-0.13-98.982 169.586c-7.896 15.131-23.471 25.283-41.417 25.283-6.898 0-13.446-1.5-19.335-4.192l0.291 0.119-111.269-43.64c-19.287 14.68-41.238 27.569-64.666 37.688l-2.037 0.783-17.944 114.878c-4.975 22.060-24.403 38.29-47.622 38.29-0.4 0-0.799-0.005-1.196-0.014l0.059 0.001h-198.647c-0.673 0.034-1.46 0.054-2.253 0.054-23.553 0-43.060-17.323-46.474-39.924l-0.032-0.26-17.944-113.659c-25.349-11.889-46.983-24.582-67.319-38.987l1.347 0.906-109.953 43.006c-6.093 3.122-13.293 4.952-20.92 4.952-17.536 0-32.813-9.673-40.786-23.975l-0.121-0.237-99.616-171.049c-4.057-7.369-6.444-16.151-6.444-25.49 0-15.895 6.914-30.176 17.9-39.997l0.052-0.046 94.642-70.701v-73.139l-97.519-73.139c-10.668-8.605-17.435-21.677-17.435-36.328 0-10.321 3.358-19.858 9.041-27.578l-0.090 0.129 98.787-169.537c7.836-15.196 23.421-25.406 41.391-25.406 6.91 0 13.467 1.51 19.36 4.218l-0.289-0.119 111.221 43.884c19.288-14.667 41.239-27.555 64.66-37.685l2.043-0.787 18.139-114.926c5.268-22.016 24.779-38.13 48.053-38.13 0.043 0 0.085 0 0.128 0h199.127c0.685-0.036 1.488-0.056 2.295-0.056 23.544 0 43.041 17.328 46.433 39.927l0.032 0.258 17.846 113.707c25.377 11.894 47.027 24.57 67.389 38.949l-1.369-0.917 109.855-43.006c6.061-3.088 13.218-4.897 20.797-4.897 17.603 0 32.928 9.758 40.859 24.16l0.122 0.241 99.616 171.049c4.057 7.369 6.444 16.151 6.444 25.49 0 15.895-6.914 30.176-17.9 39.997l-0.052 0.046zM874.113 129.38l-136.966 53.636-10.581-8.094c-22.989-17.415-49.135-32.778-77.007-44.923l-2.471-0.959-12.434-5.266-21.064-136.527c-1.17-3.657-2.194-5.754-1.707-2.779l-199.475-1.121-22.283 141.208-13.409 4.876c-29.713 11.155-55.359 26.259-77.858 45.010l0.428-0.346-11.068 9.167-137.6-54.562-101.030 172.999 114.195 85.329v121.899l-111.659 82.891c-0.759 0.773-1.227 1.834-1.227 3.005 0 0.568 0.111 1.111 0.311 1.608l-0.010-0.029 99.275 170.171 136.966-53.636 10.873 8.094c22.975 17.385 49.105 32.731 76.953 44.872l2.476 0.962 12.385 5.315 21.015 136.186c1.463 4.096 2.097 5.217 1.804 2.828l199.622 1.073 22.137-140.866 13.36-4.876c29.724-11.19 55.381-26.29 77.917-45.018l-0.438 0.354 11.020-9.167 137.6 54.708 101.079-173.145-114.292-85.281s-1.512-116.048 0-117.316l112.44-92.302zM375.498 586.94c-34.769-35.923-56.198-84.942-56.198-138.965s21.429-103.042 56.25-139.019l-0.052 0.054 0.829-0.829c36.623-34.025 85.867-54.904 139.987-54.904 0.206 0 0.413 0 0.619 0.001h-0.032c0.047 0 0.103 0 0.158 0 54.891 0 104.826 21.217 142.052 55.897l-0.125-0.115c34.777 35.925 56.212 84.949 56.212 138.979 0 54.375-21.708 103.68-56.931 139.72l0.037-0.038c-36.953 34.101-86.525 55.012-140.981 55.012-54.86 0-104.763-21.223-141.947-55.905l0.123 0.113zM625 343.923c-28.228-26.077-66.109-42.070-107.725-42.070-41.439 0-79.174 15.857-107.469 41.834l0.116-0.105c-26.010 27.028-42.030 63.831-42.030 104.376 0 40.396 15.903 77.078 41.79 104.126l-0.053-0.055c28.223 26.087 66.105 42.087 107.724 42.087 41.187 0 78.714-15.669 106.946-41.372l-0.128 0.114c26.355-27.096 42.607-64.137 42.607-104.974 0-40.343-15.861-76.981-41.687-104.019l0.055 0.058z" />
+<glyph unicode="&#xe97f;" glyph-name="uniE97A" horiz-adv-x="908" d="M907.878 132.155c-1.77 13.214-8.861 24.494-19.010 31.788l-0.139 0.095-224.497 159.539-7.088-8.448-18.088 15.177c19.314 33.452 30.709 73.578 30.709 116.366 0 130.244-105.583 235.827-235.827 235.827s-235.827-105.583-235.827-235.827c0-130.244 105.583-235.827 235.827-235.827 57.253 0 109.741 20.402 150.589 54.333l-0.387-0.312 18.088-15.177-7.088-8.448 196.096-193.375c8.363-8.27 19.867-13.378 32.564-13.378 14.199 0 26.905 6.388 35.402 16.447l0.057 0.069 38.181 45.502c6.726 7.994 10.812 18.403 10.812 29.766 0 2.074-0.136 4.117-0.4 6.119l0.025-0.235zM298.598 285.959c-45.859 38.791-74.779 96.372-74.779 160.709 0 116.024 94.056 210.081 210.081 210.081s210.081-94.056 210.081-210.081c0-51.569-18.581-98.798-49.413-135.358l0.259 0.315c-38.867-45.9-96.534-74.843-160.96-74.843-51.631 0-98.921 18.588-135.542 49.438l0.318-0.261zM603.173 282.485c3.92 4.037 7.753 8.185 11.432 12.559s7.088 8.88 10.386 13.436l15.579-13.071-2.245-2.684-19.566-23.311zM877.663 113.086l-38.181-45.502c-3.798-4.49-9.436-7.322-15.735-7.322-5.634 0-10.739 2.265-14.453 5.934l-179.147 176.66 38.554 45.941 205.093-145.744c5.273-3.775 8.669-9.881 8.669-16.78 0-5.043-1.814-9.661-4.825-13.24l0.026 0.031z" />
+<glyph unicode="&#xe980;" glyph-name="download-circle" d="M148.48 88.849c-91.692 88.069-148.66 211.696-148.66 348.629 0 4.636 0.065 9.257 0.195 13.862l-0.015-0.678c-0.015 1.468-0.024 3.203-0.024 4.94 0 139.492 56.775 265.724 148.478 356.848l0.026 0.026c88.762 91.164 212.678 147.717 349.804 147.717 4.823 0 9.63-0.070 14.42-0.209l-0.704 0.016c1.551 0.017 3.383 0.027 5.217 0.027 139.806 0 266.43-56.441 358.328-147.781l-0.026 0.025c91.692-88.058 148.661-211.677 148.661-348.601 0-4.646-0.066-9.277-0.196-13.892l0.015 0.679c-2.067-141.618-60.394-269.221-153.572-361.786l-0.028-0.028c-89.923-94.275-216.512-152.895-356.792-152.895-2.365 0-4.727 0.017-7.085 0.050l0.357-0.004c-2.874-0.063-6.262-0.098-9.658-0.098-137.818 0-261.888 58.864-348.44 152.821l-0.301 0.331zM225.28 735.881c-75.706-71.752-122.829-173.011-122.88-285.277v-0.010c-0.039-2.021-0.061-4.404-0.061-6.793 0-110.18 47.277-209.318 122.653-278.233l0.289-0.26c67.305-78.201 166.408-127.415 277.005-127.415 1.616 0 3.229 0.011 4.84 0.031l-0.244-0.002c1.137-0.012 2.48-0.019 3.825-0.019 111.425 0 211.89 46.924 282.713 122.090l0.182 0.195c75.732 71.735 122.864 173.005 122.88 285.283v0.003c0.284 5.442 0.446 11.815 0.446 18.226 0 107.31-45.381 204.020-117.998 271.987l-0.208 0.193c-72.33 75.408-173.92 122.266-286.454 122.266-0.093 0-0.187 0-0.28 0h0.015c-1.12 0.012-2.442 0.018-3.767 0.018-111.443 0-211.927-46.923-282.772-122.090l-0.181-0.194zM307.2 380.894h153.6v324.198h102.4v-324.198h153.6l-204.8-185.276z" />
+<glyph unicode="&#xe981;" glyph-name="company-HO" horiz-adv-x="988" d="M532.056 929.416v-948.907h146.091v869.581l-108.544 109.909zM790.855 573.201v-592.691h94.617l1.365 544.016zM232.706-19.49h-230.741l-1.365-44.51h986.453v44.51h-754.346zM102.181-19.49h130.799v665.054l-130.799-90.453z" />
+<glyph unicode="&#xe982;" glyph-name="warehouse-icon" horiz-adv-x="1061" d="M1044.48-30.822h-88.269v628.873l27.648-22.391c2.816-2.208 6.409-3.541 10.314-3.541 5.246 0 9.93 2.405 13.009 6.173l0.024 0.030c2.282 2.81 3.663 6.431 3.663 10.374 0 5.169-2.374 9.784-6.091 12.813l-0.030 0.024-423.253 340.787c-13.92 11.116-31.775 17.838-51.2 17.838s-37.28-6.722-51.366-17.966l0.166 0.128-425.37-343.45c-3.771-3.066-6.16-7.704-6.16-12.901 0-3.973 1.397-7.62 3.726-10.477l-0.024 0.030c3.097-3.728 7.718-6.097 12.894-6.144h0.008c0.016 0 0.036 0 0.055 0 3.941 0 7.564 1.363 10.423 3.644l-0.034-0.026 29.013 23.552v-627.234h-87.040c-9.162 0-16.589-7.427-16.589-16.589s7.427-16.589 16.589-16.589v0c-28.058 0 411.102 0 1027.686 0 9.162 0 16.589 7.427 16.589 16.589s-7.427 16.589-16.589 16.589v0zM250.88 522.138h559.787v-552.96h-559.787zM393.421 165.444l-8.26-4.779v55.433h35.157v-55.842l-10.581 5.325c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.029-0.068-5.845-0.922-8.27-2.364l0.078 0.043zM513.843 199.236v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.962c-9.162 0-16.589 7.427-16.589 16.589v180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.45h43.759c0 0 0.001 0 0.001 0 9.199 0 16.657-7.458 16.657-16.657 0-0.072 0-0.144-0.001-0.216v0.011zM648.738 165.444l-8.26-4.779v55.433h35.157v-55.842l-10.581 5.325c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.029-0.068-5.845-0.922-8.27-2.364l0.078 0.043zM769.024 199.236v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.894c-9.162 0-16.589 7.427-16.589 16.589v0 180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.45h43.759c9.171-0.038 16.59-7.481 16.59-16.657 0-0.072 0-0.144-0.001-0.216v0.011zM521.079 412.092l-8.26-4.779v55.228h35.157v-55.842l-10.65 5.53c-2.343 1.322-5.133 2.124-8.106 2.184h-0.018c-3.006-0.081-5.796-0.933-8.202-2.364l0.078 0.043zM641.502 445.884v-180.361c0-9.162-7.427-16.589-16.589-16.589v0h-188.962c-9.162 0-16.589 7.427-16.589 16.589v0 180.361c0.039 9.146 7.443 16.55 16.585 16.589h43.763v-84.036c0.067-9.111 7.468-16.471 16.588-16.471 3.040 0 5.889 0.818 8.34 2.246l-0.079-0.042 25.19 14.609 26.692-14.746c2.345-1.4 5.172-2.227 8.192-2.227s5.847 0.828 8.266 2.268l-0.074-0.041c4.952 2.913 8.23 8.204 8.26 14.263v84.177h43.759c0 0 0 0 0 0 9.175 0 16.618-7.419 16.657-16.585v-0.004z" />
+<glyph unicode="&#xe983;" glyph-name="estimate" horiz-adv-x="784" d="M606.925-64h-534.118c-40.186 0.058-72.748 32.62-72.806 72.801v792.070c0.058 40.186 32.62 72.748 72.801 72.806h534.124c40.198-0.029 72.777-32.608 72.806-72.804v-792.067c-0.029-40.198-32.608-72.777-72.804-72.806h-0.003zM72.806 821.146c-11.2-0.144-20.224-9.258-20.224-20.478 0-0.001 0-0.001 0-0.002v0-792.064c0.142-11.112 9.112-20.082 20.21-20.224h534.132c0 0 0.001 0 0.002 0 11.221 0 20.334 9.024 20.478 20.21v792.078c0 11.311-9.169 20.48-20.48 20.48v0zM711.475 22.323h-39.117c-14.52 0-26.291 11.771-26.291 26.291s11.771 26.291 26.291 26.291v0h39.117c11.112 0.142 20.082 9.112 20.224 20.21v792.078c-0.142 11.112-9.112 20.082-20.21 20.224h-534.184c-14.131 0-20.48-30.72-20.48-46.541 0-14.506-11.76-26.266-26.266-26.266s-26.266 11.76-26.266 26.266v0c0 47.718 22.784 99.123 72.806 99.123h534.17c40.186-0.058 72.748-32.62 72.806-72.801v-792.121c-0.087-40.093-32.521-72.581-72.585-72.755h-0.017zM199.936 696.013c0.015 0 0.033 0 0.051 0 6.702 0 12.134-5.433 12.134-12.134 0-0.018 0-0.036 0-0.054v0.003-3.277c12.708-1.799 24.174-5.76 34.498-11.521l-0.501 0.257c5.131-2.672 8.574-7.95 8.574-14.032 0-8.709-7.060-15.77-15.77-15.77-0.116 0-0.232 0.001-0.348 0.004h0.017c-3.005 0.001-5.828 0.779-8.279 2.144l0.087-0.044c-5.576 3.159-12.033 5.881-18.818 7.83l-0.638 0.157v-35.84c35.84-9.626 50.893-24.166 50.893-50.432s-20.173-43.162-49.715-46.438v-12.442c0-6.744-5.467-12.211-12.211-12.211s-12.211 5.467-12.211 12.211v0 12.646c-17.309 2.361-32.887 8.169-46.573 16.723l0.493-0.287c-4.766 2.861-7.907 8.001-7.907 13.875 0 8.897 7.204 16.111 16.097 16.128h0.002c3.439-0.124 6.596-1.236 9.222-3.058l-0.057 0.037c8.571-5.912 18.602-10.455 29.396-13.036l0.607-0.123v37.325c-33.792 9.165-50.432 22.067-50.432 49.971 1.092 25.686 22.181 46.095 48.036 46.095 0.428 0 0.856-0.006 1.281-0.017l-0.063 0.001v2.816c-0.003 0.107-0.005 0.232-0.005 0.358 0 6.702 5.433 12.134 12.134 12.134 0.002 0 0.004 0 0.006 0v0zM188.928 620.032v31.693c-11.264-1.638-16.179-7.27-16.179-14.797s3.379-12.237 16.128-16.896zM210.944 579.072v-32.614c11.008 1.638 16.64 6.81 16.64 15.36s-3.994 12.698-16.64 17.152zM296.96 314.368c-0.056 0-0.121-0.001-0.187-0.001-11.701 0-21.308 8.961-22.335 20.394l-0.006 0.086c0.148 4.885 1.055 9.511 2.607 13.829l-0.098-0.312c11.008 28.979 25.6 48.998 56.013 48.998s57.037-19.507 75.008-19.507c0.43-0.027 0.932-0.043 1.439-0.043 9.835 0 18.29 5.913 22.002 14.378l0.060 0.154c3.916 6.939 11.24 11.547 19.64 11.547 11.738 0 21.375-8.998 22.389-20.473l0.006-0.085c-0.148-4.885-1.055-9.511-2.607-13.829l0.098 0.312c-11.008-29.030-25.6-48.998-56.013-48.998s-57.037 19.456-75.008 19.456c-0.435 0.028-0.944 0.044-1.456 0.044-9.845 0-18.309-5.912-22.036-14.379l-0.061-0.154c-3.901-6.849-11.145-11.398-19.453-11.418h-0.003zM437.094 200.909h-131.635c-14.534 0-26.317 11.782-26.317 26.317s11.782 26.317 26.317 26.317v0h131.635c14.534 0 26.317-11.782 26.317-26.317s-11.782-26.317-26.317-26.317v0z" />
+<glyph unicode="&#xe984;" glyph-name="gstr" horiz-adv-x="740" d="M122.163 114.995v0.41c-0.001 0.172-0.002 0.376-0.002 0.58 0 39.927 32.367 72.294 72.294 72.294 0.541 0 1.080-0.006 1.619-0.018l-0.080 0.001c1.135 0.059 2.463 0.093 3.8 0.093 16.576 0 31.944-5.169 44.582-13.982l-0.254 0.168c3.906-2.806 6.427-7.327 6.451-12.438v-0.004c-0.028-8.462-6.894-15.312-15.36-15.312-3.566 0-6.848 1.215-9.455 3.254l0.034-0.025c-8.077 6.025-18.255 9.647-29.278 9.647-0.507 0-1.012-0.008-1.515-0.023l0.074 0.002c-22.564-0.998-40.479-19.533-40.479-42.252 0-0.572 0.011-1.141 0.034-1.707l-0.003 0.081v-0.41c-0.046-0.736-0.072-1.595-0.072-2.461 0-23.3 18.889-42.189 42.189-42.189 0.187 0 0.374 0.001 0.561 0.004h-0.028c0.457-0.015 0.995-0.024 1.534-0.024 10.319 0 19.898 3.167 27.819 8.581l-0.17-0.109v20.122h-20.941c-0.046-0.001-0.1-0.001-0.154-0.001-7.334 0-13.283 5.931-13.312 13.259v0.003c0 0.015 0 0.033 0 0.051 0 7.437 6.029 13.466 13.466 13.466 0 0 0 0 0 0h35.43c8.483 0 15.36-6.877 15.36-15.36v0-34.202c0.027-0.398 0.042-0.862 0.042-1.33 0-7.911-4.376-14.8-10.84-18.378l-0.108-0.055c-14.011-8.813-31.044-14.052-49.298-14.080h-0.007c-1.048-0.056-2.275-0.087-3.509-0.087-38.909 0-70.451 31.542-70.451 70.451 0 0.697 0.010 1.391 0.030 2.083l-0.002-0.102zM283.238 59.853c-3.559 2.67-5.837 6.88-5.837 11.622 0 0.018 0 0.036 0 0.054v-0.003c0 0.016 0 0.035 0 0.054 0 7.861 6.373 14.234 14.234 14.234 0.090 0 0.18-0.001 0.27-0.003h-0.013c0.037 0 0.080 0.001 0.124 0.001 3.279 0 6.312-1.056 8.777-2.846l-0.043 0.030c9.782-7.725 22.24-12.457 35.797-12.646h0.043c12.698 0 20.48 5.12 20.48 13.312v0.41c0 7.885-4.864 11.878-28.365 17.92-28.365 7.27-46.694 15.104-46.694 43.059v0.41c0.706 23.766 20.141 42.764 44.014 42.764 1.865 0 3.703-0.116 5.507-0.341l-0.215 0.022c0.357 0.006 0.779 0.009 1.201 0.009 16.122 0 31.156-4.657 43.831-12.7l-0.334 0.198c4.099-2.571 6.785-7.065 6.785-12.186 0-7.918-6.418-14.336-14.336-14.336-0.045 0-0.091 0-0.136 0.001h0.007c-0.020 0-0.044 0-0.068 0-2.875 0-5.558 0.82-7.828 2.238l0.062-0.036c-8.367 5.528-18.531 8.996-29.472 9.468l-0.122 0.004c-11.878 0-18.125-5.478-18.125-12.288v-0.41c0-9.267 6.042-12.288 30.413-18.534 28.57-7.424 44.646-17.715 44.646-42.24v-0.41c0-27.955-21.35-43.674-51.712-43.674-0.049 0-0.108 0-0.167 0-19.774 0-38.074 6.312-52.995 17.031l0.272-0.186zM444.57 157.235h-29.798c-7.889 0-14.285 6.396-14.285 14.285s6.396 14.285 14.285 14.285h90.522c7.889 0 14.285-6.396 14.285-14.285s-6.396-14.285-14.285-14.285h-30.003v-97.997c0-8.554-6.934-15.488-15.488-15.488s-15.488 6.934-15.488 15.488v0zM663.808-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM425.062 372.787h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 270.387h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM181.862 526.438c-5.705 0.036-10.954 1.955-15.166 5.165l0.062-0.045c-6.418 4.709-10.538 12.223-10.538 20.7 0 5.696 1.86 10.957 5.006 15.21l-0.049-0.070 145.050 198.4c4.713 6.401 12.219 10.508 20.685 10.508 14.145 0 25.612-11.467 25.612-25.612 0-5.68-1.849-10.927-4.977-15.175l0.050 0.071-145.254-198.656c-4.674-6.344-12.093-10.432-20.47-10.496h-0.010zM223.488 724.838c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213zM377.088 571.187c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213z" />
+<glyph unicode="&#xe985;" glyph-name="import-from-tally" horiz-adv-x="1122" d="M1084.727 129.149h-1047.454c-0.014 0-0.032 0-0.049 0-19.929 0-36.084 16.155-36.084 36.084 0 0.017 0 0.034 0 0.051v-0.003 216.698c0.734 19.376 16.619 34.805 36.108 34.805s35.374-15.429 36.106-34.739l0.002-0.067v-180.419h975.238v180.419c0 19.955 16.177 36.133 36.133 36.133s36.133-16.177 36.133-36.133v0-216.698c0-0.014 0-0.032 0-0.049 0-19.929-16.155-36.084-36.084-36.084-0.017 0-0.034 0-0.051 0h0.003zM569.362 369.35v0c-19.992 0-36.084 7.948-36.035 27.892l1.463 342.114c0 19.895 16.238 27.307 36.133 27.307v0c1.055 0.121 2.277 0.191 3.515 0.191 17.772 0 32.215-14.255 32.519-31.955v-0.029l-1.463-340.163c-0.098-19.895-16.238-25.356-36.133-25.356zM568.972 282.456v0c-0.019 0-0.041 0-0.064 0-9.958 0-18.971 4.045-25.486 10.58l-161.695 161.695c-5.907 6.412-9.528 15.008-9.528 24.449 0 19.955 16.177 36.133 36.133 36.133 9.442 0 18.038-3.622 24.475-9.551l-0.025 0.023 136.192-136.192 139.947 139.947c6.412 5.907 15.008 9.528 24.449 9.528 19.955 0 36.133-16.177 36.133-36.133 0-9.442-3.622-18.038-9.551-24.475l0.023 0.025-165.498-165.498c-6.526-6.508-15.533-10.533-25.479-10.533-0.008 0-0.017 0-0.025 0h0.001z" />
+<glyph unicode="&#xe986;" glyph-name="new-old-invoices" horiz-adv-x="740" d="M442.982 52.736h-312.32c-14.138 0-25.6 11.462-25.6 25.6v0 370.381c0 14.138 11.462 25.6 25.6 25.6v0h312.32c14.138 0 25.6-11.462 25.6-25.6v0-370.381c0-14.138-11.462-25.6-25.6-25.6v0zM156.262 103.936h261.12v319.181h-261.12zM611.174 178.893h-88.166c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h62.566v319.283h-211.712v-24.013c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 49.613c0 14.138 11.462 25.6 25.6 25.6v0h262.912c14.138 0 25.6-11.462 25.6-25.6v0-370.381c0-14.138-11.462-25.6-25.6-25.6v0zM297.062 321.536h-76.8c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h76.8c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM348.262 244.736h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM348.262 167.936h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM663.706-64h-587.059c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.646 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM207.821 870.246c0.030 0 0.066 0 0.102 0 8.285 0 15.002-6.716 15.002-15.002 0-0.018 0-0.036 0-0.054v0.003-4.096c15.732-2.237 29.924-7.133 42.713-14.246l-0.627 0.32c6.26-3.346 10.447-9.837 10.447-17.307 0-10.802-8.757-19.558-19.558-19.558-0.073 0-0.146 0-0.219 0.001h0.011c-0.061-0.001-0.133-0.001-0.205-0.001-3.68 0-7.137 0.949-10.142 2.616l0.107-0.055c-6.895 3.886-14.882 7.237-23.271 9.636l-0.793 0.194v-44.134c44.083-11.878 62.976-29.901 62.976-62.413s-24.934-53.402-61.44-57.446v-15.36c0-8.342-6.762-15.104-15.104-15.104s-15.104 6.762-15.104 15.104v15.667c-21.471 2.958-40.785 10.193-57.745 20.835l0.606-0.355c-5.925 3.536-9.831 9.914-9.831 17.203 0 11.028 8.94 19.968 19.968 19.968 0.036 0 0.072 0 0.108 0h-0.006c4.247-0.155 8.144-1.531 11.385-3.784l-0.070 0.046c10.602-7.323 23.014-12.945 36.372-16.131l0.748-0.151v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.29 31.837 27.412 57.158 59.448 57.158 0.52 0 1.039-0.007 1.556-0.020l-0.076 0.002v3.533c-0.003 0.107-0.004 0.232-0.004 0.358 0 8.285 6.716 15.002 15.002 15.002 0.002 0 0.003 0 0.005 0v0zM194.202 776.243v39.168c-13.926-2.048-20.019-9.011-20.019-18.278s3.994-15.104 19.968-20.736zM221.491 725.453v-40.294c13.67 1.997 20.48 8.397 20.48 18.842 0 9.574-4.813 15.974-20.48 21.453z" />
+<glyph unicode="&#xe987;" glyph-name="onboarding" horiz-adv-x="1082" d="M846.541 65.894c-7.999 0.013-15.237 3.258-20.48 8.499l-40.192 40.141c-4.443 5.073-7.153 11.762-7.153 19.083 0 16.033 12.997 29.030 29.030 29.030 7.321 0 14.010-2.71 19.116-7.182l-0.034 0.029 19.661-19.61 85.606 85.606c5.073 4.443 11.762 7.153 19.083 7.153 16.033 0 29.030-12.997 29.030-29.030 0-7.321-2.71-14.010-7.182-19.116l0.029 0.034-106.138-106.138c-5.216-5.222-12.415-8.464-20.371-8.499h-0.007zM875.11-64c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM875.11 291.789c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM206.848-64c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM206.848 291.789c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM555.469 546.099c-114.279 0.022-206.912 92.668-206.912 206.95 0 114.296 92.655 206.95 206.95 206.95 57.151 0 108.891-23.166 146.342-60.621v0c37.49-37.45 60.68-89.207 60.68-146.381 0-114.267-92.632-206.899-206.899-206.899-0.057 0-0.114 0-0.171 0h0.009zM555.469 901.888c-0.008 0-0.018 0-0.027 0-82.229 0-148.89-66.66-148.89-148.89s66.66-148.89 148.89-148.89c82.229 0 148.89 66.66 148.89 148.89 0 41.108-16.66 78.325-43.595 105.268v0c-26.797 26.946-63.897 43.623-104.891 43.623-0.132 0-0.264 0-0.396-0.001h0.020zM271.514 291.789c-0.008 0-0.017 0-0.026 0-5.287 0-10.24 1.426-14.497 3.914l0.136-0.074c-8.807 5.097-14.637 14.473-14.637 25.211 0 5.305 1.423 10.278 3.908 14.557l-0.074-0.139 168.96 296.346c4.983 9.278 14.62 15.48 25.705 15.48 16.061 0 29.082-13.020 29.082-29.082 0-5.633-1.602-10.893-4.375-15.347l0.071 0.123-168.96-296.294c-5.076-8.838-14.461-14.695-25.214-14.695-0.028 0-0.055 0-0.083 0h0.004zM845.517 295.68c-0.008 0-0.018 0-0.027 0-10.741 0-20.119 5.833-25.14 14.504l-0.075 0.14-168.96 296.346c-2.4 4.133-3.816 9.095-3.816 14.387 0 16.034 12.998 29.032 29.032 29.032 10.741 0 20.12-5.833 25.141-14.505l0.075-0.14 168.96-296.294c2.418-4.145 3.845-9.125 3.845-14.438 0-16.033-12.997-29.030-29.030-29.030-0.002 0-0.004 0-0.005 0v0zM255.283 142.899c0-26.722-21.662-48.384-48.384-48.384s-48.384 21.662-48.384 48.384c0 26.722 21.662 48.384 48.384 48.384s48.384-21.662 48.384-48.384zM603.904 752.998c0-26.722-21.662-48.384-48.384-48.384s-48.384 21.662-48.384 48.384c0 26.722 21.662 48.384 48.384 48.384s48.384-21.662 48.384-48.384z" />
+<glyph unicode="&#xe988;" glyph-name="profit-loss" horiz-adv-x="1112" d="M544.614 173.005c-158.599 0.083-287.137 128.672-287.137 287.283 0 158.662 128.621 287.283 287.283 287.283s287.283-128.621 287.283-287.283c0-79.367-32.185-151.218-84.215-203.211l-0.001-0.001c-51.895-51.941-123.612-84.071-202.834-84.071-0.133 0-0.266 0-0.4 0h0.021zM544.614 680.397c-0.017 0-0.037 0-0.057 0-121.591 0-220.16-98.569-220.16-220.16s98.569-220.16 220.16-220.16c121.591 0 220.16 98.569 220.16 220.16 0 60.781-24.631 115.81-64.455 155.649l0.001-0.001c-39.623 39.88-94.499 64.564-155.14 64.564-0.178 0-0.357 0-0.535-0.001h0.028zM538.368 626.125c0.030 0 0.067 0 0.103 0 10.887 0 19.712-8.825 19.712-19.712 0-0.036 0-0.072 0-0.108v0.006-5.12c20.69-2.938 39.354-9.383 56.168-18.749l-0.82 0.42c8.221-4.371 13.723-12.882 13.723-22.678 0-0.091 0-0.182-0.001-0.273v0.014c0-0.001 0-0.002 0-0.003 0-14.138-11.462-25.6-25.6-25.6-0.144 0-0.288 0.001-0.431 0.004h0.022c-4.885 0.012-9.47 1.282-13.453 3.503l0.141-0.072c-9.086 5.145-19.609 9.562-30.667 12.704l-1.026 0.249v-58.010c58.010-15.667 82.79-39.322 82.79-81.92s-32.768-70.246-80.896-75.571v-20.48c0.016-0.301 0.026-0.654 0.026-1.008 0-10.971-8.894-19.866-19.866-19.866s-19.866 8.894-19.866 19.866c0 0.355 0.009 0.707 0.028 1.057l-0.002-0.049v20.48c-28.228 3.818-53.64 13.266-75.968 27.195l0.806-0.469c-7.822 4.633-12.984 13.029-12.984 22.631 0 14.478 11.737 26.214 26.214 26.214 0.029 0 0.057 0 0.086 0h-0.004c5.613-0.262 10.741-2.141 14.984-5.177l-0.084 0.057c13.952-9.612 30.287-16.986 47.862-21.154l0.982-0.196v60.672c-54.938 14.899-81.92 35.84-81.92 81.306 1.684 41.904 36.062 75.236 78.225 75.236 0.669 0 1.336-0.008 2.001-0.025l-0.098 0.002v4.557c-0.002 0.107-0.003 0.233-0.003 0.359 0 10.887 8.825 19.712 19.712 19.712 0.037 0 0.074 0 0.111 0h-0.006zM520.448 502.477v51.507c-18.33-2.714-26.317-11.827-26.317-24.064s5.274-19.814 26.266-27.443zM556.288 435.917v-53.043c17.971 2.662 27.085 11.059 27.085 24.781 0 12.39-6.502 20.838-27.136 28.058zM134.195 11.315v0c-1.078-0.137-2.325-0.216-3.59-0.216-16.33 0-29.608 13.068-29.945 29.317l-0.001 0.032 0.87 212.070c0 18.534 15.36 28.058 33.638 28.058v0c0.736 0.062 1.593 0.097 2.459 0.097 17.072 0 30.93-13.766 31.077-30.803v-0.014l-0.87-211.302c-0.051-18.483-15.053-27.238-33.638-27.238zM133.939-64c-0.004 0-0.009 0-0.014 0-9.297 0-17.711 3.777-23.793 9.881l-100.251 100.251c-6.093 6.093-9.862 14.51-9.862 23.808 0 18.595 15.074 33.67 33.67 33.67 9.298 0 17.715-3.769 23.808-9.862v0l76.493-76.493 78.797 78.848c6.166 6.593 14.917 10.702 24.629 10.702 18.606 0 33.69-15.083 33.69-33.69 0-9.711-4.109-18.463-10.683-24.611l-0.019-0.018-102.4-102.4c-6.094-6.226-14.583-10.087-23.975-10.087-0.031 0-0.063 0-0.094 0h0.005zM976.589 617.165v0c-0.938-0.103-2.025-0.161-3.127-0.161-16.637 0-30.154 13.359-30.409 29.936v0.024l0.87 211.763c0 18.534 15.36 27.75 33.638 27.75v0c0.846 0.083 1.828 0.13 2.822 0.13 16.76 0 30.385-13.421 30.714-30.102v-0.031l-0.87-211.661c-0.051-18.586-15.053-27.648-33.638-27.648zM875.11 790.016c-0.013 0-0.029 0-0.044 0-18.578 0-33.638 15.060-33.638 33.638 0 9.3 3.774 17.719 9.874 23.808v0l102.4 102.656c6.095 6.088 14.512 9.853 23.808 9.853s17.713-3.765 23.808-9.854v0l100.25-100.25c6.093-6.093 9.862-14.51 9.862-23.808 0-18.595-15.074-33.67-33.67-33.67-9.298 0-17.715 3.769-23.808 9.862v0l-76.493 76.442-78.848-78.848c-6.019-6.023-14.316-9.768-23.489-9.83h-0.012z" />
+<glyph unicode="&#xe989;" glyph-name="proforma" horiz-adv-x="848" d="M605.85 372.736c0.031 0 0.067 0 0.103 0 8.285 0 15.002-6.716 15.002-15.002 0-0.036 0-0.072 0-0.108v0.006-4.045c15.731-2.211 29.926-7.11 42.704-14.243l-0.618 0.317c6.26-3.346 10.447-9.837 10.447-17.306 0-10.802-8.757-19.558-19.558-19.558-0.055 0-0.109 0-0.164 0.001h0.008c-0.018 0-0.039 0-0.061 0-3.734 0-7.242 0.968-10.287 2.666l0.107-0.055c-6.909 3.903-14.913 7.271-23.32 9.686l-0.795 0.195v-44.134c44.134-11.93 62.976-29.901 62.976-62.413s-24.986-53.402-61.44-57.498v-15.36c-1.367-7.198-7.608-12.567-15.104-12.567s-13.737 5.369-15.089 12.471l-0.015 0.096v15.667c-21.489 2.948-40.822 10.185-57.797 20.835l0.606-0.355c-6.003 3.506-9.973 9.918-9.973 17.257 0 11 8.917 19.917 19.917 19.917 0.104 0 0.208-0.001 0.311-0.002h-0.016c4.254-0.153 8.154-1.549 11.381-3.833l-0.066 0.044c10.619-7.315 23.047-12.937 36.418-16.13l0.753-0.152v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.262 31.86 27.396 57.21 59.451 57.21 0.538 0 1.073-0.007 1.608-0.021l-0.079 0.002v3.482c0 8.285 6.716 15.002 15.002 15.002v0zM592.179 278.682v39.219c-13.926-2.048-20.019-9.011-20.019-18.278s4.096-15.002 20.070-20.838zM619.469 227.891v-40.346c13.67 2.048 20.48 8.397 20.48 18.842 0.154 9.728-4.762 16.128-20.429 21.606zM714.24 756.838h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM714.24 654.438h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM714.24 552.038h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM381.44 167.987h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM381.44 270.387h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM771.789-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 427.213c0 14.138 11.462 25.6 25.6 25.6s25.6-11.462 25.6-25.6v0-427.315c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0h-587.11c-14.138 0-25.6-11.462-25.6-25.6v0-30.72c0-14.138-11.462-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v0 30.72c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c-0.058-42.371-34.42-76.698-76.8-76.698 0 0 0 0 0 0v0zM147.456 482.714c-0.035 0-0.075 0-0.116 0-10.722 0-20.425 4.365-27.427 11.416l-108.546 108.546c-7.032 7.048-11.381 16.776-11.381 27.52s4.349 20.472 11.382 27.521l160.921 160.921c4.622 4.637 11.011 7.51 18.070 7.526h130.819c0.003 0 0.006 0 0.009 0 14.138 0 25.6-11.462 25.6-25.6 0-0.234-0.003-0.467-0.009-0.7l0.001 0.034-3.43-127.437c-0.187-6.813-3.007-12.934-7.476-17.408v0l-160.922-160.922c-7.005-7.052-16.707-11.418-27.429-11.418-0.023 0-0.046 0-0.069 0h0.004zM56.166 630.17l91.29-91.29 145.101 145.101 2.458 90.982h-94.003zM277.658 727.296c0-14.534-11.782-26.317-26.317-26.317s-26.317 11.782-26.317 26.317c0 14.534 11.782 26.317 26.317 26.317s26.317-11.782 26.317-26.317z" />
+<glyph unicode="&#xe98a;" glyph-name="purchase-management" horiz-adv-x="939" d="M429.619 381.594v0c-0.94-0.12-2.027-0.188-3.13-0.188-14.217 0-25.781 11.363-26.105 25.502l-0.001 0.030 0.768 243.354c0 16.179 13.158 24.474 29.338 24.474v0c0.645 0.055 1.395 0.086 2.152 0.086 14.845 0 26.9-11.942 27.083-26.744v-0.017l-0.768-242.688c0-16.179-13.21-23.808-29.338-23.808zM429.312 316.058c-8.010 0.054-15.245 3.332-20.478 8.6l-87.349 87.349c-5.674 5.362-9.206 12.939-9.206 21.341 0 16.203 13.135 29.338 29.338 29.338 8.402 0 15.979-3.532 21.328-9.192l0.013-0.014 66.56-66.56 68.659 68.659c5.241 4.952 12.331 7.997 20.131 7.997 16.203 0 29.338-13.135 29.338-29.338 0-7.801-3.044-14.89-8.010-20.145l0.013 0.014-89.395-89.344c-5.288-5.374-12.64-8.704-20.77-8.704-0.060 0-0.12 0-0.18 0.001h0.009zM910.285 726.272c12.303 2.218 21.521 12.828 21.555 25.596v32.158c-0.013 12.78-9.241 23.401-21.398 25.577l-0.158 0.023-23.347 3.942c-2.594 8.348-5.582 15.486-9.149 22.27l0.343-0.715 13.67 19.354c3.032 4.21 4.85 9.472 4.85 15.158 0 7.143-2.868 13.616-7.515 18.33l-22.474 22.474c-4.914 4.316-11.385 6.965-18.473 7.014h-0.010c-5.626-0.041-10.824-1.837-15.083-4.868l0.081 0.055-19.354-13.67c-6.156 3.162-13.586 6.296-21.258 8.907l-1.219 0.36-3.994 22.886c-2.010 12.229-12.457 21.458-25.078 21.555h-32.164c-12.78-0.013-23.401-9.241-25.577-21.398l-0.023-0.158-3.942-23.757c-8.307-2.766-15.297-5.744-21.996-9.206l0.851 0.4-18.944 13.67c-4.179 2.973-9.376 4.768-14.991 4.813h-0.011c-7.181-0.027-13.693-2.871-18.492-7.484l0.009 0.008-22.886-22.886c-4.653-4.705-7.528-11.178-7.528-18.322 0-5.69 1.823-10.954 4.918-15.24l-0.053 0.077 14.080-19.814c-3.243-6.081-6.232-13.219-8.561-20.648l-0.245-0.907-22.886-3.942c-12.444-1.438-22.016-11.914-22.016-24.626 0-0.018 0-0.037 0-0.055v0.003-32.154c0.013-12.78 9.241-23.401 21.398-25.577l0.158-0.023 23.757-3.942c2.765-8.306 5.744-15.296 9.206-21.996l-0.4 0.85-13.67-18.944c-3.032-4.21-4.85-9.472-4.85-15.158 0-7.143 2.868-13.616 7.515-18.33l22.474-22.474c4.7-4.622 11.151-7.476 18.269-7.476 0.075 0 0.15 0 0.225 0.001h-0.011c5.625 0.045 10.822 1.84 15.083 4.868l-0.082-0.055 19.814 14.080c5.774-3.085 12.555-5.933 19.612-8.161l0.868-0.236 3.942-23.347c2.199-12.314 12.82-21.542 25.599-21.555h32.155c12.78 0.013 23.401 9.241 25.577 21.398l0.023 0.158 3.994 23.347c8.367 2.623 15.503 5.61 22.298 9.16l-0.742-0.353 19.354-13.67c4.178-2.975 9.376-4.772 14.992-4.813h0.010c7.184 0.010 13.701 2.858 18.491 7.483l-0.008-0.007 22.477 22.477c4.649 4.697 7.522 11.161 7.522 18.295 0 5.681-1.821 10.937-4.912 15.215l0.052-0.076-13.67 19.405c3.216 6.065 6.204 13.201 8.552 20.622l0.255 0.933zM873.728 747.878c-5.402-0.963-9.662-4.966-10.987-10.145l-0.021-0.095c-2.942-11.645-7.317-21.879-13.026-31.208l0.277 0.488c-1.222-2.034-1.944-4.488-1.944-7.111 0-2.926 0.899-5.642 2.436-7.887l-0.031 0.048 18.074-25.6-20.48-20.48-25.088 18.074c-2.168 1.595-4.892 2.552-7.838 2.552-2.659 0-5.137-0.78-7.215-2.123l0.052 0.032c-8.842-5.346-19.066-9.712-29.903-12.566l-0.817-0.183c-5.274-1.346-9.277-5.606-10.228-10.925l-0.012-0.083-5.12-30.72h-29.491l-5.12 30.72c-0.95 5.408-4.959 9.674-10.145 10.988l-0.095 0.020c-11.562 3.086-21.673 7.287-31.053 12.623l0.64-0.335c-1.881 1.307-4.213 2.089-6.727 2.089-2.788 0-5.351-0.96-7.377-2.568l0.025 0.019-25.6-18.074-20.48 20.48 18.074 25.139c1.591 2.161 2.546 4.875 2.546 7.813 0 2.65-0.777 5.119-2.116 7.19l0.031-0.052c-5.343 8.832-9.846 19.029-12.982 29.807l-0.228 0.913c-1.346 5.274-5.606 9.277-10.925 10.228l-0.083 0.012-30.72 5.12v29.491l30.413 5.12c5.414 0.937 9.686 4.952 10.988 10.146l0.020 0.094c2.98 11.648 7.37 21.879 13.080 31.213l-0.28-0.493c1.193 1.951 1.9 4.313 1.9 6.839 0 3.069-1.042 5.894-2.792 8.141l0.022-0.030-18.074 25.6 20.48 20.48 25.088-18.074c2.168-1.595 4.892-2.552 7.838-2.552 2.659 0 5.137 0.78 7.215 2.123l-0.052-0.032c8.833 5.345 19.029 9.847 29.808 12.982l0.912 0.227c5.288 1.322 9.303 5.594 10.228 10.926l0.012 0.082 5.12 30.72h29.491l5.12-30.413c0.95-5.408 4.959-9.674 10.145-10.988l0.095-0.020c12.011-2.987 22.575-7.525 32.165-13.483l-0.473 0.274c2.043-1.215 4.504-1.932 7.133-1.932 2.934 0 5.659 0.894 7.918 2.425l-0.050-0.032 25.6 18.074 20.48-20.48-18.074-25.139c-1.597-2.158-2.557-4.872-2.557-7.811 0-2.652 0.782-5.122 2.127-7.191l-0.031 0.051c5.343-8.842 9.71-19.065 12.566-29.902l0.183-0.818c1.334-5.281 5.6-9.29 10.925-10.228l0.083-0.012 30.72-5.12v-29.491zM746.854 849.613c-45.243 0-81.92-36.677-81.92-81.92s36.677-81.92 81.92-81.92c45.243 0 81.92 36.677 81.92 81.92v0c0 45.225-36.648 81.891-81.866 81.92h-0.003zM746.854 713.062c-30.121 0.029-54.528 24.454-54.528 54.579 0 30.143 24.436 54.579 54.579 54.579 30.125 0 54.55-24.407 54.579-54.525v-0.003c0-0.015 0-0.033 0-0.051 0-30.143-24.436-54.579-54.579-54.579 0 0 0 0 0 0v0zM763.187 576.256h-32.154c-16.347 0.055-29.922 11.851-32.737 27.393l-0.031 0.204-3.226 19.046c-5.528 1.887-10.012 3.739-14.364 5.822l0.796-0.343-16.23-11.571c-5.392-3.759-12.081-6.006-19.295-6.006-9.152 0-17.459 3.616-23.571 9.498l0.011-0.010-22.477 22.477c-5.952 6.033-9.627 14.325-9.627 23.475 0 7.334 2.362 14.117 6.366 19.63l-0.067-0.096 11.008 15.36c-2.202 4.608-4.045 9.318-5.734 13.926l-19.507 3.277c-15.789 2.802-27.635 16.392-27.699 32.761v32.161c0 0.065-0.001 0.143-0.001 0.22 0 16.463 12.471 30.012 28.482 31.717l0.14 0.012 18.022 3.123c2.051 5.881 4.057 10.65 6.308 15.278l-0.368-0.839-11.622 16.282c-3.9 5.382-6.239 12.118-6.239 19.4 0 9.177 3.714 17.486 9.721 23.506l22.886 22.937c6.083 5.897 14.389 9.532 23.544 9.532 7.225 0 13.922-2.264 19.419-6.122l-0.108 0.072 15.36-11.11c4.352 2.048 8.858 3.891 13.978 5.734l3.226 19.507c2.802 15.789 16.392 27.635 32.761 27.699h32.161c0.002 0 0.003 0 0.005 0 16.352 0 29.903-11.997 32.33-27.669l0.023-0.183 3.226-18.432c5.12-1.894 10.24-3.994 15.36-6.298l15.872 11.162c5.461 3.791 12.23 6.057 19.528 6.057 8.764 0 16.764-3.267 22.851-8.649l-0.037 0.032 22.938-22.938c5.96-6.042 9.641-14.346 9.641-23.51 0-7.317-2.347-14.087-6.33-19.596l0.067 0.098-11.059-15.667c1.939-3.844 3.962-8.612 5.704-13.514l0.286-0.924 18.944-3.226c15.8-2.782 27.657-16.384 27.699-32.763v-32.159c-0.055-16.347-11.851-29.922-27.393-32.737l-0.204-0.031h-0.307l-18.278-2.458c-2.050-5.812-4.055-10.529-6.303-15.104l0.364 0.819 11.162-15.821c3.901-5.382 6.239-12.118 6.239-19.4 0-9.151-3.694-17.44-9.671-23.456l-22.475-22.475c-6.072-5.914-14.376-9.561-23.533-9.561-7.233 0-13.935 2.276-19.428 6.151l0.106-0.071-15.872 11.213c-3.809-1.92-8.56-3.943-13.44-5.694l-0.948-0.297-3.277-18.944c-2.701-15.927-16.395-27.904-32.886-27.904-0.012 0-0.025 0-0.037 0h0.002zM680.294 645.478l3.994-2.099c5.505-2.926 11.953-5.588 18.672-7.629l0.784-0.205 4.301-1.331 4.762-27.75c1.63-8.772 9.21-15.33 18.326-15.36h32.157c9.128 0.009 16.719 6.578 18.312 15.246l0.017 0.114 4.71 27.802 4.403 1.28c7.927 2.448 14.709 5.28 21.153 8.668l-0.673-0.323 3.891 1.946 22.938-16.179c3.045-2.168 6.84-3.466 10.938-3.466 5.221 0 9.949 2.106 13.383 5.515l22.271 22.271c3.328 3.357 5.384 7.979 5.384 13.082 0 4.131-1.348 7.947-3.627 11.033l-16.143 22.887 1.946 3.942c3.097 5.789 5.93 12.573 8.121 19.639l0.224 0.841 1.331 4.557 27.494 3.686c8.761 1.649 15.309 9.217 15.36 18.324v32.16c-0.030 9.12-6.588 16.699-15.244 18.312l-0.116 0.018-27.75 4.71-1.331 4.352c-2.438 7.921-5.271 14.703-8.665 21.145l0.319-0.665-1.946 3.942 16.179 22.938c2.17 3.030 3.47 6.811 3.47 10.896 0 5.177-2.088 9.866-5.468 13.272l-22.322 22.322c-3.466 2.974-8.005 4.784-12.968 4.784-4.158 0-8.020-1.271-11.217-3.446l0.069 0.045-22.938-16.179-3.891 1.946c-5.876 3.009-12.984 6.004-20.321 8.507l-1.183 0.351-4.147 1.382-4.71 27.238c-1.466 8.693-8.885 15.249-17.857 15.36h-32.166c-9.12-0.030-16.699-6.588-18.312-15.244l-0.018-0.116-4.608-27.955-4.096-1.434c-7.903-2.617-14.556-5.441-20.932-8.725l0.81 0.379-3.994-2.15-22.63 16.384c-3.028 2.111-6.785 3.372-10.837 3.372-5.213 0-9.938-2.088-13.384-5.474l-22.679-22.679c-3.336-3.366-5.397-8.001-5.397-13.117 0-4.114 1.333-7.917 3.591-11l16.603-23.346-1.946-3.942c-3.082-5.781-5.915-12.564-8.116-19.626l-0.23-0.854-1.28-4.352-27.392-4.71c-8.926-0.934-15.836-8.376-15.923-17.45v-32.163c0.009-9.128 6.578-16.719 15.246-18.312l0.114-0.017 27.955-4.71 1.434-4.045c2.684-7.946 5.523-14.595 8.798-20.983l-0.401 0.862 2.15-4.045-16.333-22.63c-2.166-3.022-3.464-6.795-3.464-10.871 0-5.168 2.086-9.848 5.462-13.245l22.322-22.322c3.413-3.265 8.051-5.275 13.157-5.275 4.083 0 7.866 1.285 10.967 3.472l-0.060-0.040zM767.642 602.214h-41.882l-6.349 36.915c-0.451 2.495-2.285 4.466-4.665 5.11l-0.045 0.010c-12.22 3.246-22.911 7.693-32.818 13.355l0.665-0.35c-0.864 0.687-1.971 1.103-3.174 1.103s-2.311-0.415-3.185-1.111l0.010 0.008-30.72-21.606-29.44 29.491 21.709 30.157c0.66 0.944 1.055 2.115 1.055 3.379s-0.395 2.436-1.068 3.398l0.013-0.019c-5.729 9.424-10.531 20.304-13.845 31.814l-0.235 0.954c-0.524 2.589-2.531 4.596-5.078 5.113l-0.042 0.007-36.915 6.349v41.83l36.454 6.349c2.495 0.451 4.466 2.285 5.11 4.665l0.010 0.045c3.082 12.417 7.743 23.339 13.856 33.271l-0.288-0.503c0.54 0.892 0.86 1.969 0.86 3.121 0 1.348-0.438 2.594-1.179 3.603l0.012-0.017-21.914 30.72 29.44 29.44 30.208-21.709c0.936-0.656 2.099-1.048 3.354-1.048s2.417 0.392 3.373 1.061l-0.019-0.013c9.439 5.734 20.337 10.537 31.866 13.846l0.953 0.234c2.582 0.537 4.583 2.538 5.113 5.077l0.007 0.043 6.298 36.915h41.882l6.349-36.454c0.426-2.506 2.272-4.49 4.666-5.11l0.044-0.010c12.769-3.182 23.999-8.019 34.187-14.369l-0.498 0.289c0.992-0.612 2.195-0.974 3.482-0.974s2.489 0.363 3.511 0.991l-0.029-0.017 30.72 21.606 29.44-29.491-21.658-30.157c-0.66-0.944-1.055-2.115-1.055-3.379s0.395-2.436 1.068-3.398l-0.013 0.019c5.745-9.505 10.429-20.498 13.477-32.152l0.194-0.872c0.654-2.425 2.625-4.26 5.081-4.704l0.039-0.006 36.966-6.349v-41.882l-37.837-6.298c-2.489-0.463-4.455-2.292-5.109-4.665l-0.011-0.046c-3.093-12.399-7.752-23.302-13.857-33.221l0.289 0.504c-0.622-0.998-0.99-2.21-0.99-3.507s0.368-2.509 1.007-3.536l-0.017 0.029 21.555-30.72-29.491-29.44-30.157 21.709c-0.936 0.656-2.099 1.048-3.354 1.048s-2.417-0.392-3.373-1.061l0.019 0.013c-9.505-5.757-20.496-10.457-32.148-13.526l-0.876-0.196c-2.425-0.654-4.26-2.625-4.704-5.081l-0.006-0.039zM738.15 616.858h17.101l4.25 24.781c1.405 8.201 7.408 14.701 15.213 16.811l0.147 0.034c10.977 2.876 20.602 6.978 29.438 12.264l-0.51-0.283c3.094 1.976 6.866 3.149 10.912 3.149 4.497 0 8.655-1.449 12.034-3.906l-0.059 0.041 20.122-14.49 11.93 11.93-14.49 20.48c-2.326 3.385-3.715 7.571-3.715 12.082 0 3.897 1.037 7.552 2.849 10.704l-0.055-0.104c5.157 8.354 9.304 18.026 11.927 28.307l0.156 0.723c2.067 8.1 8.636 14.239 16.822 15.649l0.125 0.018 25.6 4.301v17.101l-24.73 4.25c-8.234 1.361-14.768 7.381-16.863 15.214l-0.033 0.146c-2.867 10.976-6.97 20.602-12.262 29.434l0.281-0.506c-1.976 3.094-3.149 6.866-3.149 10.912 0 4.497 1.449 8.655 3.906 12.034l-0.041-0.059 14.438 20.122-11.878 11.93-20.48-14.49c-3.39-2.336-7.585-3.731-12.106-3.731-3.908 0-7.573 1.043-10.731 2.865l0.104-0.055c-8.599 5.413-18.567 9.723-29.187 12.392l-0.714 0.152c-8.12 2.062-14.271 8.66-15.65 16.875l-0.017 0.123-4.198 24.218h-17.203l-4.198-24.73c-1.387-8.222-7.394-14.744-15.213-16.862l-0.147-0.034c-10.989-3.153-20.574-7.376-29.426-12.696l0.549 0.306c-3.094-1.976-6.866-3.149-10.912-3.149-4.497 0-8.655 1.449-12.034 3.906l0.059-0.041-20.122 14.49-11.878-11.93 14.49-20.48c2.591-3.394 4.151-7.696 4.151-12.362 0-3.824-1.048-7.403-2.872-10.465l0.052 0.094c-5.158-8.354-9.305-18.026-11.927-28.307l-0.156-0.723c-2.055-8.107-8.63-14.252-16.823-15.65l-0.124-0.018-24.269-4.198v-17.203l24.678-4.198c8.234-1.361 14.768-7.381 16.863-15.214l0.033-0.146c3.145-11.007 7.369-20.61 12.696-29.476l-0.305 0.548c1.976-3.094 3.149-6.866 3.149-10.912 0-4.497-1.449-8.655-3.906-12.034l0.041 0.059-14.49-20.122 11.878-11.93 20.48 14.49c3.182 2.43 7.216 3.893 11.591 3.893 4.224 0 8.129-1.364 11.299-3.675l-0.055 0.038c7.937-4.445 17.128-8.208 26.794-10.812l0.854-0.196c7.966-2.152 13.973-8.674 15.343-16.772l0.017-0.124zM746.957 678.298c-49.287 0-89.242 39.955-89.242 89.242s39.955 89.242 89.242 89.242c49.287 0 89.242-39.955 89.242-89.242v0c-0.146-49.215-40.061-89.059-89.29-89.088h-0.003zM746.957 842.138c-41.2 0-74.598-33.399-74.598-74.598s33.399-74.598 74.598-74.598c41.2 0 74.598 33.399 74.598 74.598v0c0 0.015 0 0.033 0 0.051 0 41.238-33.415 74.672-74.647 74.701h-0.003zM746.957 705.587c-0.015 0-0.033 0-0.051 0-34.215 0-61.952 27.737-61.952 61.952s27.737 61.952 61.952 61.952c34.215 0 61.952-27.737 61.952-61.952 0-0.018 0-0.036 0-0.054v0.003c-0.145-34.115-27.82-61.718-61.949-61.747h-0.003zM746.957 814.797c-26.1 0-47.258-21.158-47.258-47.258s21.158-47.258 47.258-47.258c26.082 0 47.228 21.129 47.258 47.204v0.003c0 0.076 0.001 0.166 0.001 0.256 0 26.138-21.175 47.331-47.307 47.36h-0.003zM350.771-4.045c0-33.141-26.866-60.006-60.006-60.006s-60.006 26.866-60.006 60.006c0 33.141 26.866 60.006 60.006 60.006s60.006-26.866 60.006-60.006zM673.28-4.045c0-33.141-26.866-60.006-60.006-60.006s-60.006 26.866-60.006 60.006c0 33.141 26.866 60.006 60.006 60.006s60.006-26.866 60.006-60.006zM645.12 117.709h-415.181c-0.010 0-0.021 0-0.032 0-12.573 0-23.296 7.923-27.447 19.049l-0.066 0.202-100.403 273.92h-72.55c-0.366-0.016-0.794-0.026-1.225-0.026-16.203 0-29.338 13.135-29.338 29.338s13.135 29.338 29.338 29.338c0.431 0 0.86-0.009 1.286-0.028l-0.061 0.002h92.979c0.010 0 0.021 0 0.032 0 12.573 0 23.296-7.923 27.447-19.049l0.066-0.202 100.454-273.92h375.654l121.446 274.074c4.674 10.359 14.912 17.439 26.803 17.439 16.192 0 29.317-13.126 29.317-29.317 0-4.3-0.926-8.384-2.589-12.063l0.075 0.185-129.178-291.482c-4.66-10.369-14.898-17.459-26.792-17.459-0.013 0-0.026 0-0.039 0h0.002z" />
+<glyph unicode="&#xe98b;" glyph-name="purchase-record" horiz-adv-x="1342" d="M588.698 138.854c0-24.573-19.92-44.493-44.493-44.493s-44.493 19.92-44.493 44.493c0 24.573 19.92 44.493 44.493 44.493s44.493-19.92 44.493-44.493zM827.904 138.854c0-24.573-19.92-44.493-44.493-44.493s-44.493 19.92-44.493 44.493c0 24.573 19.92 44.493 44.493 44.493s44.493-19.92 44.493-44.493zM777.933 218.624h-247.603c-34.279 0.020-63.55 21.44-75.18 51.622l-0.187 0.551-60.109 159.693h-41.728c-0.401-0.016-0.872-0.026-1.345-0.026-19.511 0-35.328 15.817-35.328 35.328s15.817 35.328 35.328 35.328c0.473 0 0.944-0.009 1.412-0.028l-0.067 0.002h34.867c0.008 0 0.018 0 0.028 0 34.25 0 63.506-21.379 75.152-51.52l0.187-0.55 49.101-130.458c6.625-17.252 23.052-29.277 42.29-29.286h200.449c18.095 0.103 33.668 10.796 40.843 26.192l0.117 0.279 75.776 166.298c5.703 12.306 17.949 20.688 32.154 20.688 19.513 0 35.331-15.818 35.331-35.331 0-5.309-1.171-10.344-3.268-14.861l0.091 0.218-85.248-186.982c-12.969-27.98-40.776-47.060-73.050-47.155h-0.013zM1261.261-64h-1180.723c-44.48 0-80.538 36.058-80.538 80.538v0 862.925c0 44.48 36.058 80.538 80.538 80.538v0h356.147c0.005 0 0.011 0 0.017 0 25.975 0 49.076-12.304 63.792-31.402l0.139-0.188 97.28-127.232c8.341-10.798 21.283-17.691 35.836-17.715h627.358c44.48 0 80.538-36.058 80.538-80.538v0-686.336c0-0.015 0-0.033 0-0.051 0-44.426-35.97-80.45-80.376-80.537h-0.008zM115.866 6.605h1110.067c24.969 0 45.21 20.241 45.21 45.21v0 615.782c0 24.969-20.241 45.21-45.21 45.21v0h-609.28c-25.976 0.019-49.075 12.318-63.81 31.403l-0.139 0.187-97.28 127.283c-8.341 10.798-21.283 17.691-35.836 17.715h-303.415c-24.969 0-45.21-20.241-45.21-45.21v0-792.269c0-0.031 0-0.067 0-0.103 0-24.861 20.066-45.034 44.886-45.208h0.017zM1129.933 712.858c-0.015 0-0.033 0-0.051 0-19.483 0-35.277 15.794-35.277 35.277 0 0.018 0 0.036 0 0.054v-0.003 25.6c0 24.969-20.241 45.21-45.21 45.21v0h-519.731c-18.924 0.743-33.983 16.264-33.983 35.302s15.059 34.559 33.916 35.3l0.067 0.002h555.008c44.48 0 80.538-36.058 80.538-80.538v0-60.723c0-0.061 0.001-0.133 0.001-0.205 0-19.483-15.794-35.277-35.277-35.277 0 0 0 0-0.001 0v0z" />
+<glyph unicode="&#xe98c;" glyph-name="search-app" horiz-adv-x="754" d="M727.603 596.224h-207.872c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h207.872c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 440.32h-77.978c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h77.978c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 284.416h-77.978c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h77.978c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM648.55-64.051c-0.025 0-0.056 0-0.086 0-6.309 0-12.018 2.564-16.144 6.707l-197.223 197.275c-3.633 4.048-5.855 9.428-5.855 15.327 0 12.696 10.292 22.989 22.989 22.989 5.899 0 11.278-2.222 15.348-5.874l-0.021 0.019 197.274-197.274c4.145-4.158 6.708-9.895 6.708-16.23 0-12.679-10.264-22.96-22.936-22.989h-0.003zM727.552 752.128h-701.44c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h701.44c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM727.552 908.032h-701.44c-13.86 0.634-24.856 12.025-24.856 25.984s10.996 25.35 24.799 25.982l0.057 0.002h701.44c13.86-0.634 24.856-12.025 24.856-25.984s-10.996-25.35-24.799-25.982l-0.057-0.002zM268.8 83.763c-148.461 0.028-268.802 120.386-268.802 268.851 0 148.482 120.369 268.851 268.851 268.851 74.242 0 141.455-30.092 190.107-78.745v0c48.695-48.652 78.816-115.887 78.816-190.157 0-148.454-120.346-268.8-268.8-268.8-0.061 0-0.122 0-0.183 0h0.009zM268.8 569.395c-119.566-0.21-216.411-97.186-216.411-216.78 0-119.725 97.056-216.781 216.781-216.781s216.781 97.056 216.781 216.781c0 59.89-24.287 114.108-63.549 153.342l-0.001 0.001c-39.154 39.193-93.266 63.438-153.040 63.438-0.197 0-0.394 0-0.59-0.001h0.031z" />
+<glyph unicode="&#xe98d;" glyph-name="settings-taxes" horiz-adv-x="864" d="M304.23 351.59c-0.019 0-0.042 0-0.064 0-168.022 0-304.23 136.209-304.23 304.23s136.209 304.23 304.23 304.23c168.022 0 304.23-136.209 304.23-304.23 0-84.020-34.060-160.086-89.126-215.142v0c-54.726-55.031-130.492-89.089-214.213-89.089-0.291 0-0.582 0-0.872 0.001h0.045zM304.23 906.957c-138.626-0.096-250.968-112.496-250.968-251.136 0-138.699 112.437-251.136 251.136-251.136s251.136 112.437 251.136 251.136c0 69.391-28.143 132.209-73.638 177.662l-0.002 0.002c-45.353 45.393-108.029 73.472-177.263 73.472-0.141 0-0.282 0-0.423 0h0.022zM637.594-64c-124.734 0.107-225.809 101.248-225.809 225.997 0 124.815 101.182 225.997 225.997 225.997s225.997-101.182 225.997-225.997c0-62.454-25.333-118.991-66.285-159.895l-0.002-0.002c-40.779-40.837-97.146-66.1-159.414-66.1-0.17 0-0.34 0-0.51 0.001h0.026zM637.594 335.36c-0.019 0-0.043 0-0.066 0-95.661 0-173.21-77.549-173.21-173.21s77.549-173.21 173.21-173.21c95.661 0 173.21 77.549 173.21 173.21 0 47.827-19.384 91.126-50.725 122.47v0c-31.159 31.251-74.254 50.586-121.865 50.586-0.195 0-0.389 0-0.584-0.001h0.030zM632.627 292.403c0.076 0.001 0.166 0.002 0.256 0.002 8.483 0 15.36-6.877 15.36-15.36 0-0.001 0-0.001 0-0.002v0-4.198c16.266-2.295 30.944-7.355 44.164-14.716l-0.644 0.329c6.471-3.521 10.793-10.266 10.803-18.021v-0.002c0-0.032 0-0.070 0-0.108 0-11.056-8.963-20.019-20.019-20.019-0.162 0-0.324 0.002-0.485 0.006h0.024c-3.852 0.010-7.468 1.014-10.607 2.77l0.111-0.057c-7.148 4.061-15.425 7.551-24.124 10.042l-0.81 0.198v-45.619c45.619-12.288 65.126-30.72 65.126-64.512s-25.6-55.245-63.642-59.443v-15.923c0-8.624-6.992-15.616-15.616-15.616s-15.616 6.992-15.616 15.616v0 15.974c-22.21 3.007-42.204 10.446-59.769 21.412l0.633-0.369c-6.356 3.559-10.581 10.251-10.581 17.929 0 11.311 9.169 20.48 20.48 20.48 0.21 0 0.419-0.003 0.627-0.009l-0.031 0.001c4.403-0.161 8.442-1.593 11.796-3.938l-0.071 0.047c10.969-7.557 23.81-13.357 37.627-16.639l0.773-0.155v47.718c-43.213 11.725-64.563 28.211-64.563 63.949 1.263 32.936 28.268 59.158 61.398 59.158 0.573 0 1.144-0.008 1.713-0.023l-0.084 0.002v3.584c-0.001 0.047-0.001 0.103-0.001 0.159 0 8.483 6.877 15.36 15.36 15.36 0.144 0 0.288-0.002 0.432-0.006h-0.021zM618.496 195.123v40.55c-14.387-2.099-20.48-9.318-20.48-18.944s3.994-15.565 20.48-21.606zM646.707 142.592v-41.728c14.131 2.099 21.299 8.704 21.299 19.507-0.102 9.933-5.222 16.538-21.248 22.221zM210.483 522.035c-0.004 0-0.009 0-0.014 0-14.619 0-26.47 11.851-26.47 26.47 0 5.895 1.927 11.34 5.185 15.739l-0.051-0.072 181.914 248.832c4.875 6.607 12.63 10.846 21.376 10.846 14.629 0 26.488-11.859 26.488-26.488 0-5.883-1.918-11.318-5.163-15.714l0.051 0.073-181.914-248.832c-4.871-6.612-12.627-10.854-21.373-10.854-0.010 0-0.020 0-0.030 0h0.002zM262.656 765.286c0-29.917-24.253-54.17-54.17-54.17s-54.17 24.253-54.17 54.17c0 29.917 24.253 54.17 54.17 54.17s54.17-24.253 54.17-54.17zM455.27 572.621c0-29.917-24.253-54.17-54.17-54.17s-54.17 24.253-54.17 54.17c0 29.917 24.253 54.17 54.17 54.17s54.17-24.253 54.17-54.17z" />
+<glyph unicode="&#xe98e;" glyph-name="subscription1" horiz-adv-x="740" d="M575.027 500.582h-409.6c-15.722 0-28.467 12.745-28.467 28.467v0 269.363c0 15.722 12.745 28.467 28.467 28.467v0h409.6c15.722 0 28.467-12.745 28.467-28.467v0-269.363c0-15.722-12.745-28.467-28.467-28.467v0zM193.894 557.568h352.666v212.378h-352.666zM663.603-64h-586.906c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h586.906c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.493 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM341.197 595.302c-0.014 0-0.030 0-0.046 0-7.058 0-13.449 2.856-18.080 7.476l0.001-0.001-35.43 35.379c-4.446 4.599-7.186 10.872-7.186 17.785 0 14.138 11.462 25.6 25.6 25.6 6.913 0 13.186-2.74 17.792-7.193l17.299-17.299 75.418 75.418c4.599 4.446 10.872 7.186 17.785 7.186 14.138 0 25.6-11.462 25.6-25.6 0-6.913-2.74-13.186-7.193-17.792l-93.535-93.535c-4.624-4.587-10.992-7.423-18.022-7.424v0zM362.035 39.987v0c-0.738-0.084-1.594-0.131-2.461-0.131-12.647 0-22.925 10.145-23.139 22.742v0.020l0.666 314.675c0 14.131 11.52 21.146 25.6 21.146v0c0.692 0.073 1.495 0.115 2.307 0.115 12.726 0 23.069-10.205 23.292-22.878v-0.021l-0.666-314.573c0-14.182-11.469-21.094-25.6-21.094zM284.877 325.069c-0.014 0-0.030 0-0.046 0-14.138 0-25.6 11.462-25.6 25.6 0 7.081 2.875 13.49 7.521 18.124h0.001l78.080 78.080c4.632 4.631 11.031 7.495 18.099 7.495s13.467-2.864 18.099-7.495l76.288-76.288c4.822-4.662 7.815-11.188 7.815-18.414 0-14.138-11.462-25.6-25.6-25.6-7.226 0-13.752 2.994-18.407 7.808l-58.17 58.17-59.955-59.955c-4.634-4.648-11.043-7.525-18.125-7.526v0z" />
+<glyph unicode="&#xe98f;" glyph-name="aging-report" horiz-adv-x="740" d="M435.046 731.136h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM588.646 628.736h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM588.646 526.336h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM663.654-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.059c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.397-34.355-76.771-76.746-76.8h-0.003zM76.595 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM234.496 61.44c-14.126 0.017-25.571 11.472-25.571 25.6 0 3.103 0.552 6.078 1.564 8.83l-0.057-0.178c11.162 31.13 71.68 186.47 158.72 186.47 38.042 0 88.576 91.085 110.797 152.627 3.762 9.754 13.061 16.548 23.946 16.548 14.138 0 25.6-11.462 25.6-25.6 0-2.955-0.501-5.792-1.421-8.433l0.055 0.18c-11.162-31.13-71.68-186.522-158.72-186.522-38.042 0-88.627-91.085-110.797-152.627-3.668-9.938-13.059-16.896-24.075-16.896-0.014 0-0.028 0-0.043 0h0.002zM504.166 61.491c-0.006 0-0.014 0-0.022 0-11.035 0-20.439 6.982-24.036 16.77l-0.057 0.178c-22.17 61.44-72.755 152.627-110.797 152.627-87.501 0-147.763 155.392-158.72 186.522-1.183 2.842-1.87 6.143-1.87 9.605 0 14.138 11.462 25.6 25.6 25.6 11.369 0 21.008-7.412 24.347-17.667l0.051-0.181c22.17-61.44 72.755-152.627 110.797-152.627 87.501 0 147.763-155.341 158.72-186.47 0.954-2.575 1.507-5.549 1.507-8.653 0-14.128-11.445-25.583-25.569-25.6h-0.002zM537.446 423.936h-358.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h358.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM537.446 39.936h-358.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h358.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0z" />
+<glyph unicode="&#xe990;" glyph-name="unlink" d="M608.188 148.173c4.393-4.356 7.114-10.394 7.114-17.067s-2.72-12.711-7.112-17.065l-89.295-89.363c-55.034-55.034-131.062-89.072-215.040-89.072-167.957 0-304.112 136.156-304.112 304.112 0 83.978 34.039 160.006 89.072 215.040l89.429 89.361c4.356 4.393 10.394 7.114 17.067 7.114s12.711-2.72 17.065-7.112l79.191-79.191c4.393-4.356 7.114-10.394 7.114-17.067s-2.72-12.711-7.112-17.065l-0.002-0.002-89.498-89.156c-26.058-26.058-42.175-62.057-42.175-101.82 0-79.526 64.469-143.995 143.995-143.995 39.763 0 75.762 16.117 101.82 42.175l89.361 89.361c4.356 4.393 10.394 7.114 17.067 7.114s12.711-2.72 17.065-7.112l0.002-0.002zM495.070 668.57c4.356-4.393 10.394-7.114 17.067-7.114s12.711 2.72 17.065 7.112l0.002 0.002 89.156 89.361c26.058 26.058 62.057 42.175 101.82 42.175 79.526 0 143.995-64.469 143.995-143.995 0-39.763-16.117-75.762-42.175-101.82l-89.361-89.361c-4.393-4.356-7.114-10.394-7.114-17.067s2.72-12.711 7.112-17.065l79.191-79.191c4.356-4.393 10.394-7.114 17.067-7.114s12.711 2.72 17.065 7.112l0.002 0.002 89.361 89.498c55.034 55.034 89.072 131.062 89.072 215.040 0 167.957-136.156 304.112-304.112 304.112-83.978 0-160.006-34.039-215.040-89.072l-89.361-89.429c-4.393-4.356-7.114-10.394-7.114-17.067s2.72-12.711 7.112-17.065l79.191-79.191zM964.745-50.005l45.261 45.261c8.731 8.661 14.135 20.664 14.135 33.929s-5.405 25.267-14.132 33.925l-882.828 882.828c-8.661 8.731-20.664 14.135-33.929 14.135s-25.267-5.405-33.925-14.132l-45.264-45.264c-8.731-8.661-14.135-20.664-14.135-33.929s5.405-25.267 14.132-33.925l882.759-882.759c8.661-8.731 20.664-14.135 33.929-14.135s25.267 5.405 33.925 14.132l0.003 0.003z" />
+<glyph unicode="&#xe991;" glyph-name="notification" horiz-adv-x="826" d="M818.278 124.979c-39.9 59.077-63.693 131.888-63.693 210.255 0 0.044 0 0.089 0 0.133v-0.007 158.208c0.001 0.327 0.002 0.713 0.002 1.099 0 139.365-80.222 259.994-197.007 318.227l-2.060 0.93v3.994c0 78.539-63.669 142.208-142.208 142.208s-142.208-63.669-142.208-142.208v0-2.509c-118.449-55.255-199.066-173.338-199.066-310.249 0-0.026 0-0.052 0-0.077v0.004-169.626c0-0.068 0-0.148 0-0.228 0-78.367-23.793-151.178-64.549-211.602l0.856 1.347c-5.172-7.481-8.27-16.739-8.294-26.72v-0.006c0.143-26.727 21.842-48.337 48.588-48.337 0.234 0 0.468 0.002 0.702 0.005h225.245c13.581-65.5 70.807-114.025 139.366-114.025s125.785 48.525 139.206 113.103l0.16 0.922h225.28c26.505 0.247 47.897 21.791 47.897 48.331 0 9.958-3.011 19.212-8.173 26.902l0.11-0.174zM413.286 903.219c41.065-0.046 75.343-29.052 83.511-67.692l0.099-0.558c-22.993 6.491-49.531 10.59-76.903 11.356l-0.46 0.010c-1.758 0.032-3.832 0.051-5.91 0.051-29.703 0-58.529-3.753-86.030-10.811l2.392 0.521c8.566 38.648 42.545 67.123 83.175 67.123 0.027 0 0.054 0 0.080 0h-0.004zM413.286-6.861c-36.598 0.36-67.65 23.713-79.428 56.289l-0.188 0.594h160.41c-12.030-33.477-43.501-56.986-80.463-56.986-0.116 0-0.232 0-0.348 0.001h0.018zM552.653 106.906h-488.243c40.501 65.075 64.511 144.063 64.512 228.659v0 169.37c0 157.079 127.337 284.416 284.416 284.416v0h5.478c50.645-0.964 97.646-15.74 137.636-40.7l-1.137 0.661c86.079-53.444 142.543-147.458 142.543-254.659 0-0.381-0.001-0.762-0.002-1.143v0.059-158.208c0.037-84.607 24.082-163.591 65.691-230.518l-1.076 1.858z" />
+<glyph unicode="&#xe992;" glyph-name="branch-alice" d="M384 960l-147.183-147.183 339.217-339.217v-537.6h-128v486.4l-300.783 300.783-147.251-147.183v384h384zM640 960h384v-384l-147.183 147.183-185.617-185.617-89.566 89.566 185.617 185.617z" />
+<glyph unicode="&#xe993;" glyph-name="trial-balance" horiz-adv-x="740" d="M663.757-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.059c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM604.262 628.736h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM604.262 526.336h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM604.262 423.936h-230.4c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h230.4c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM271.462 526.336h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM271.462 423.936h-128c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h128c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM207.821 870.246c0.107 0.003 0.232 0.004 0.359 0.004 8.285 0 15.002-6.716 15.002-15.002 0-0.020 0-0.039 0-0.058v0.003-4.096c15.732-2.237 29.924-7.133 42.713-14.246l-0.627 0.32c6.26-3.346 10.447-9.837 10.447-17.307 0-10.802-8.757-19.558-19.558-19.558-0.073 0-0.146 0-0.219 0.001h0.011c-0.061-0.001-0.133-0.001-0.205-0.001-3.68 0-7.137 0.949-10.142 2.616l0.107-0.055c-6.894 3.885-14.882 7.236-23.271 9.636l-0.793 0.194v-44.134c44.083-11.878 62.976-29.901 62.976-62.413s-24.986-53.402-61.44-57.446v-15.36c0-8.342-6.762-15.104-15.104-15.104s-15.104 6.762-15.104 15.104v15.667c-21.471 2.958-40.785 10.193-57.745 20.835l0.606-0.355c-5.925 3.536-9.831 9.914-9.831 17.203 0 11.028 8.94 19.968 19.968 19.968 0.036 0 0.072 0 0.108 0h-0.006c4.247-0.155 8.144-1.531 11.385-3.784l-0.070 0.046c10.601-7.324 23.014-12.947 36.372-16.131l0.748-0.15v46.080c-41.779 11.315-62.413 27.29-62.413 61.85 1.29 31.837 27.412 57.158 59.448 57.158 0.52 0 1.039-0.007 1.556-0.020l-0.076 0.002v3.533c-0.003 0.107-0.004 0.232-0.004 0.358 0 8.285 6.716 15.002 15.002 15.002 0.002 0 0.003 0 0.005 0v0zM194.202 776.243v39.168c-13.926-2.048-20.019-9.011-20.019-18.278s3.994-15.104 19.968-20.736zM221.491 725.453v-40.294c13.619 1.997 20.48 8.397 20.48 18.842 0 9.574-4.813 15.974-20.48 21.453zM124.774 177.613l36.557 44.851-34.406 41.933c-2.577 2.948-4.224 6.766-4.452 10.962l-0.002 0.046c-0.003 0.108-0.005 0.235-0.005 0.362 0 7.918 6.418 14.336 14.336 14.336 0.11 0 0.219-0.001 0.328-0.004h-0.016c0.136 0.004 0.297 0.007 0.458 0.007 5.561 0 10.445-2.897 13.226-7.265l0.038-0.063 29.594-39.475 29.389 38.656c3.026 4.914 8.376 8.141 14.479 8.141 0.004 0 0.007 0 0.011 0h-0.001c7.472-0.029 13.518-6.092 13.518-13.568 0-0.054 0-0.108-0.001-0.162v0.008c-0.090-4.396-1.763-8.385-4.47-11.436l0.016 0.018-34.406-42.138 36.352-44.646c2.583-2.944 4.232-6.764 4.453-10.963l0.002-0.045c0.003-0.108 0.005-0.235 0.005-0.363 0-7.918-6.418-14.336-14.336-14.336-0.128 0-0.255 0.002-0.382 0.005h0.019c-0.177-0.007-0.385-0.012-0.595-0.012-5.535 0-10.385 2.927-13.089 7.318l-0.038 0.066-31.693 41.574-31.334-40.96c-3.041-4.903-8.387-8.123-14.487-8.141h-0.003c-7.478 0.058-13.517 6.133-13.517 13.619 0 0.036 0 0.072 0 0.108v-0.006c0.046 4.452 1.727 8.503 4.47 11.589l-0.016-0.018zM319.642 246.835c0.029 7.351 5.965 13.305 13.306 13.363h71.174c7.366 0 13.338-5.971 13.338-13.338s-5.971-13.338-13.338-13.338h-71.27c-7.308 0.058-13.21 5.996-13.21 13.312 0 0 0 0 0 0v0zM319.642 196.557c0.029 7.351 5.965 13.305 13.306 13.363h71.174c7.366 0 13.338-5.971 13.338-13.338s-5.971-13.338-13.338-13.338h-71.27c-7.308 0.058-13.21 5.996-13.21 13.312 0 0 0 0 0 0v0zM501.811 177.613l36.557 44.851-34.406 41.933c-2.587 2.942-4.237 6.764-4.453 10.964l-0.002 0.044c-0.003 0.108-0.005 0.235-0.005 0.363 0 7.918 6.418 14.336 14.336 14.336 0.128 0 0.255-0.002 0.382-0.005h-0.019c0.145 0.005 0.315 0.008 0.486 0.008 5.553 0 10.429-2.899 13.198-7.265l0.038-0.064 29.542-39.424 29.389 38.656c3.043 4.886 8.386 8.090 14.477 8.090 0.004 0 0.009 0 0.013 0h-0.001c7.478-0.058 13.517-6.133 13.517-13.619 0-0.036 0-0.072 0-0.108v0.006c-0.090-4.396-1.763-8.385-4.47-11.436l0.016 0.018-34.406-42.138 36.352-44.646c2.587-2.942 4.237-6.764 4.453-10.964l0.002-0.044c0.003-0.108 0.005-0.235 0.005-0.363 0-7.918-6.418-14.336-14.336-14.336-0.128 0-0.255 0.002-0.382 0.005h0.019c-0.145-0.005-0.315-0.008-0.486-0.008-5.553 0-10.429 2.899-13.198 7.265l-0.038 0.064-31.693 41.574-31.334-40.96c-3.031-4.885-8.366-8.090-14.448-8.090-0.015 0-0.029 0-0.044 0h0.002c-7.472 0.029-13.518 6.092-13.518 13.568 0 0.054 0 0.108 0.001 0.162v-0.008c0.031 4.455 1.715 8.51 4.469 11.588l-0.015-0.017z" />
+<glyph unicode="&#xe994;" glyph-name="user1" horiz-adv-x="915" d="M457.37 906.189c99.365 0 179.917-80.551 179.917-179.917s-80.551-179.917-179.917-179.917c-99.365 0-179.917 80.551-179.917 179.917v0c0.029 99.354 80.563 179.888 179.914 179.917h0.003zM457.37 960c-129.084 0-233.728-104.644-233.728-233.728s104.644-233.728 233.728-233.728c129.084 0 233.728 104.644 233.728 233.728v0c0 129.084-104.644 233.728-233.728 233.728v0zM834.048-64h-753.357c-44.565 0-80.691 36.127-80.691 80.691v0 149.094c0 155.523 126.077 281.6 281.6 281.6v0h351.949c155.523 0 281.6-126.077 281.6-281.6v0-149.094c0 0 0-0.001 0-0.001 0-44.565-36.127-80.691-80.691-80.691-0.144 0-0.288 0-0.432 0.001h0.022zM281.6 393.37c-125.632-0.146-227.438-101.951-227.584-227.57v-149.108c0-14.845 12.035-26.88 26.88-26.88v0h753.152c14.845 0 26.88 12.035 26.88 26.88v0 149.094c-0.146 125.632-101.951 227.438-227.57 227.584h-0.014z" />
+<glyph unicode="&#xe995;" glyph-name="vat" horiz-adv-x="740" d="M663.808-64h-587.11c-42.415 0-76.8 34.385-76.8 76.8v0 870.4c0 42.415 34.385 76.8 76.8 76.8v0h587.11c42.415 0 76.8-34.385 76.8-76.8v0-870.4c0-42.415-34.385-76.8-76.8-76.8v0zM76.698 908.8c-14.138 0-25.6-11.462-25.6-25.6v0-870.4c0-14.138 11.462-25.6 25.6-25.6v0h587.11c14.138 0 25.6 11.462 25.6 25.6v0 870.4c0 14.138-11.462 25.6-25.6 25.6v0zM425.062 372.787h-281.6c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h281.6c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM578.662 270.387h-435.2c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6v0h435.2c14.138 0 25.6-11.462 25.6-25.6s-11.462-25.6-25.6-25.6v0zM165.99 54.989l-45.67 109.261c-1.044 2.188-1.694 4.744-1.791 7.441l-0.001 0.034c0 8.483 6.877 15.36 15.36 15.36v0c0.136 0.004 0.296 0.006 0.457 0.006 7.040 0 13.026-4.51 15.227-10.799l0.034-0.113 35.226-91.136 35.84 92.16c2.49 5.853 8.192 9.882 14.835 9.882 0.022 0 0.045 0 0.067 0h-0.003c0.122 0.004 0.266 0.006 0.41 0.006 8.241 0 14.924-6.668 14.95-14.902v-0.002c-0.11-2.49-0.702-4.815-1.685-6.922l0.047 0.112-46.080-110.234c-2.521-7.211-9.266-12.291-17.197-12.291-0.11 0-0.22 0.001-0.33 0.003h-2.031c-0.155-0.005-0.336-0.007-0.519-0.007-7.876 0-14.581 5.009-17.105 12.015l-0.040 0.127zM252.518 64.87l49.101 110.848c2.853 7.251 9.795 12.289 17.913 12.289 0.074 0 0.149 0 0.223-0.001h1.781c0.055 0.001 0.119 0.001 0.183 0.001 8.072 0 14.964-5.048 17.693-12.159l0.044-0.13 49.101-110.848c0.939-1.817 1.533-3.951 1.637-6.213l0.001-0.034c0.001-0.061 0.001-0.133 0.001-0.205 0-8.115-6.579-14.694-14.694-14.694 0 0-0.001 0-0.001 0v0c-6.869 0.007-12.71 4.406-14.865 10.539l-0.034 0.11-9.472 22.17h-61.952l-9.882-23.142c-2.322-5.718-7.834-9.677-14.27-9.677-0.005 0-0.010 0-0.016 0h0.001c0 0-0.001 0-0.001 0-7.889 0-14.285 6.396-14.285 14.285 0 0.072 0.001 0.144 0.002 0.216v-0.011c0.137 2.451 0.784 4.722 1.836 6.749l-0.044-0.093zM339.558 103.885l-19.558 46.49-19.507-46.49zM432.077 157.235h-29.798c-7.889 0-14.285 6.396-14.285 14.285s6.396 14.285 14.285 14.285h90.624c7.889 0 14.285-6.396 14.285-14.285s-6.396-14.285-14.285-14.285h-29.798v-97.997c0-8.568-6.946-15.514-15.514-15.514s-15.514 6.946-15.514 15.514v0zM181.862 526.438c-5.705 0.036-10.954 1.955-15.166 5.165l0.062-0.045c-6.418 4.709-10.538 12.223-10.538 20.7 0 5.696 1.86 10.957 5.006 15.21l-0.049-0.070 145.050 198.4c4.713 6.401 12.219 10.508 20.685 10.508 14.145 0 25.612-11.467 25.612-25.612 0-5.68-1.849-10.927-4.977-15.175l0.050 0.071-145.254-198.656c-4.674-6.344-12.093-10.432-20.47-10.496h-0.010zM223.488 724.838c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213zM377.088 571.187c0-23.866-19.347-43.213-43.213-43.213s-43.213 19.347-43.213 43.213c0 23.866 19.347 43.213 43.213 43.213s43.213-19.347 43.213-43.213z" />
+<glyph unicode="&#xe996;" glyph-name="copy-file" d="M919.552 744.96l-179.2 179.2c-6.144 6.144-15.36 10.24-24.576 10.24h-409.6c-19.456 0-34.816-15.36-34.816-34.816v-141.312h-142.336c-19.456 0-34.816-15.36-34.816-34.816v-726.016c0-19.456 15.36-34.816 34.816-34.816h588.8c19.456 0 34.816 15.36 34.816 34.816v140.288h141.312c19.456 0 34.816 15.36 34.816 34.816v546.816c1.024 10.24-2.048 18.432-9.216 25.6zM854.016 711.168h-147.456v146.432l147.456-146.432zM683.008 32.256h-518.144v655.36h105.472v-514.048c0-19.456 15.36-34.816 34.816-34.816h377.856v-106.496zM340.992 208.384v655.36h294.912v-188.416c0-19.456 15.36-34.816 34.816-34.816h188.416v-432.128h-518.144z" />
+<glyph unicode="&#xe997;" glyph-name="user-black" d="M511.875 927.875c-141.006 0-255.812-114.806-255.812-255.812s114.807-256.062 255.812-256.062c141.006 0 256.062 115.056 256.062 256.062s-115.057 255.812-256.062 255.812zM736.125 432.938c-0.26 0.008-0.567 0.012-0.874 0.012-7.766 0-14.886-2.766-20.428-7.367l0.053 0.043c-55.556-45.905-126.298-73.5-203-73.5-76.676 0-147.316 27.568-202.813 73.438-5.488 4.552-12.603 7.314-20.363 7.314-4.808 0-9.368-1.060-13.459-2.959l0.198 0.082c-29.588-13.464-58.144-29.734-84.75-49.5-92.963-69.063-158.684-180.911-158.687-316.5-0.002-52.679 43.423-96 96.062-96h767.937c52.639 0 96.002 43.359 96 96-0.004 135.589-65.725 247.437-158.687 316.5-26.609 19.768-55.166 36.075-84.813 49.562-3.628 1.697-7.863 2.743-12.328 2.874l-0.047 0.001z" />
+<glyph unicode="&#xe998;" d="M505.545 739.119c-20.685 0-37.454-16.769-37.454-37.454v0-209.757h-209.757c-20.685 0-37.454-16.769-37.454-37.454s16.769-37.454 37.454-37.454h209.749v-209.749c0-20.685 16.769-37.454 37.454-37.454s37.454 16.769 37.454 37.454v0 209.749h209.757c20.685 0 37.454 16.769 37.454 37.454s-16.769 37.454-37.454 37.454h-209.749v209.757c0 20.685-16.769 37.454-37.454 37.454v0z" />
+<glyph unicode="&#xe999;" glyph-name="upload-icon" horiz-adv-x="1427" d="M626.555-58.839v350.654h-133.156l220.275 264.764 219.294-263.473h-130.978v-351.986zM894.24 71.602v87.738q45.232 0 90.226 0 26.786 0 53.593-0.062c40.896-0.103 81.793-0.206 122.669 0.537 91.093 1.662 167.89 74.237 173.123 162.223 0.253 3.587 0.398 7.773 0.398 11.992 0 90.766-66.81 165.927-153.936 178.989l-0.995 0.123c-9.703 1.404-24.856 10.023-26.249 17.413-25.991 137.791-191.476 208.508-313.030 122.452-1.497-1.032-3.953-0.754-5.987-1.032-71.161 182.413-226.654 235.996-356.775 209.54-166.3-33.764-253.657-159.085-250.963-343.584-31.854-23.421-65.030-40.896-88.946-66.846-49.195-53.242-58.609-118.127-29.8-184.085 28.438-65.123 79.367-105.369 153.057-106.762 89.989-1.703 180.039-0.403 272.123-0.403v-88.285h-29.305q-36.52 0-73.050-0.072c-54.346-0.103-108.692-0.206-163.028 0.248-0.118 0-0.258 0-0.397 0-128.928 0-235.912 93.952-256.223 217.126l-0.205 1.508c-1.531 5.641-3.362 10.491-5.593 15.113l0.225-0.517v62.965c11.685 49.051 26.363 96.874 60.808 135.592 10.776 14.34 23.346 26.575 37.548 36.664l0.52 0.351c27.87 15.845 35.199 39.224 38.987 68.663 20.562 159.364 137.44 293.8 286.213 331.517 167.116 42.321 329.917-13.987 428.442-150.487 6.754-12.158 19.521-20.249 34.177-20.249 4.173 0 8.192 0.656 11.961 1.87l-0.276-0.077c130.493 25.217 252.645-36.922 312.565-156.68 5.658-11.725 14.747-21.044 25.954-26.839l0.326-0.153c96.677-39.524 158.012-107.216 174.796-212.182 1.383-5.512 3.072-10.266 5.151-14.803l-0.217 0.528v-56.679c-18.188-42.785-30.306-89.71-55.895-127.51-48.112-71.058-120.511-104.832-206.639-105.668q-51.466-0.495-103.056-0.434c-53.737 0.021-107.691 0.258-162.306 0.258z" />
 <glyph unicode="&#xf2332;" glyph-name="folderminus" horiz-adv-x="1284" d="M1249.457-46.643h-1214.915c-10.414 0-17.356 6.942-17.356 17.356v954.576c0 10.414 6.942 17.356 17.356 17.356h347.119c6.942 0 12.149-3.471 15.62-10.414l81.573-163.146h770.603c10.414 0 17.356-6.942 17.356-17.356v-781.017c0-10.414-6.942-17.356-17.356-17.356zM51.898-11.931h1180.203v746.305h-763.661c-6.942 0-12.149 3.471-15.62 10.414l-81.573 163.146h-319.349v-919.864zM815.559 343.865h-347.119c-10.414 0-17.356 6.942-17.356 17.356s6.942 17.356 17.356 17.356h347.119c10.414 0 17.356-6.942 17.356-17.356s-8.678-17.356-17.356-17.356z" />
 <glyph unicode="&#xf2333;" glyph-name="folderplus" horiz-adv-x="1284" d="M1249.458-46.643h-1214.915c-10.414 0-17.356 6.942-17.356 17.356v954.576c0 10.414 6.942 17.356 17.356 17.356h347.119c6.942 0 12.149-3.471 15.62-10.414l81.573-163.146h770.603c10.414 0 17.356-6.942 17.356-17.356v-781.017c0-10.414-6.942-17.356-17.356-17.356zM51.899-11.931h1180.203v746.305h-763.661c-6.942 0-12.149 3.471-15.62 10.414l-81.573 163.146h-319.349v-919.864zM815.56 343.865h-347.119c-10.414 0-17.356 6.942-17.356 17.356s6.942 17.356 17.356 17.356h347.119c10.414 0 17.356-6.942 17.356-17.356s-8.678-17.356-17.356-17.356zM642 170.306c-10.414 0-17.356 6.942-17.356 17.356v347.119c0 10.414 6.942 17.356 17.356 17.356s17.356-6.942 17.356-17.356v-347.119c0-8.678-6.942-17.356-17.356-17.356z" />
 <glyph unicode="&#xf2334;" glyph-name="folder" horiz-adv-x="1292" d="M1263.931-55.172h-1235.862c-10.593 0-17.655 7.062-17.655 17.655v971.034c0 10.593 7.062 17.655 17.655 17.655h353.103c7.062 0 12.359-3.531 15.89-10.593l82.979-165.959h783.89c10.593 0 17.655-7.062 17.655-17.655v-794.483c0-10.593-7.062-17.655-17.655-17.655zM45.724-19.862h1200.552v759.172h-776.828c-7.062 0-12.359 3.531-15.89 10.593l-82.979 165.959h-324.855v-935.724z" />
diff --git a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.ttf b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.ttf
index 377133f4290..ae26d469e46 100755
Binary files a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.ttf and b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.ttf differ
diff --git a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.woff b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.woff
index 509c37e23a3..40099df1af0 100755
Binary files a/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.woff and b/apps/web-giddh/src/assets/fonts/icomoon/fonts/icomoon.woff differ
diff --git a/apps/web-giddh/src/assets/fonts/icomoon/icomoon.css b/apps/web-giddh/src/assets/fonts/icomoon/icomoon.css
index 40fe7999a1a..d0c4994d5d9 100755
--- a/apps/web-giddh/src/assets/fonts/icomoon/icomoon.css
+++ b/apps/web-giddh/src/assets/fonts/icomoon/icomoon.css
@@ -1,533 +1,549 @@
 @font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?ai868m');
-  src:  url('fonts/icomoon.eot?ai868m#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?ai868m') format('truetype'),
-    url('fonts/icomoon.woff?ai868m') format('woff'),
-    url('fonts/icomoon.svg?ai868m#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
+    font-family: "icomoon";
+    src: url("fonts/icomoon.eot?ai868m");
+    src: url("fonts/icomoon.eot?ai868m#iefix") format("embedded-opentype"),
+        url("fonts/icomoon.ttf?ai868m") format("truetype"),
+        url("fonts/icomoon.woff?ai868m") format("woff"),
+        url("fonts/icomoon.svg?ai868m#icomoon") format("svg");
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: never;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  stroke-width: thin;
-  -webkit-text-stroke-width: thin;
+[class^="icon-"],
+[class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: "icomoon" !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    stroke-width: thin;
+    -webkit-text-stroke-width: thin;
 
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-user-black:before {
-  content: "\e995";
+.icon-upload-icon:before {
+    content: "\e999";
 }
-.icon-copy-file:before {
-  content: "\e994";
+.icon-item-product:before {
+    content: "\e900";
 }
-.icon-windows:before {
-  content: "\e900";
+.icon-add-image-thumb .path1:before {
+    content: "\e901";
+    color: rgb(255, 255, 255);
 }
-.icon-mac:before {
-  content: "\e901";
-}
-.icon-android:before {
-  content: "\e902";
+.icon-add-image-thumb .path2:before {
+    content: "\e998";
+    margin-left: -1em;
+    color: rgb(234, 234, 234);
 }
 .icon-log:before {
-  content: "\e001";
+    content: "\e001";
 }
 .icon-recurring:before {
-  content: "\e002";
+    content: "\e002";
 }
 .icon-dashboard:before {
-  content: "\e004";
+    content: "\e004";
 }
 .icon-purchase:before {
-  content: "\e005";
+    content: "\e005";
 }
 .icon-invoice:before {
-  content: "\e006";
+    content: "\e006";
 }
 .icon-report:before {
-  content: "\e007";
+    content: "\e007";
 }
 .icon-sales:before {
-  content: "\e008";
+    content: "\e008";
 }
 .icon-search1:before {
-  content: "\e009";
+    content: "\e009";
 }
 .icon-setting:before {
-  content: "\e010";
+    content: "\e010";
 }
 .icon-tbpl:before {
-  content: "\e011";
+    content: "\e011";
 }
 .icon-tax:before {
-  content: "\e012";
+    content: "\e012";
 }
 .icon-manufacturing:before {
-  content: "\e013";
+    content: "\e013";
 }
 .icon-permission:before {
-  content: "\e014";
+    content: "\e014";
 }
 .icon-daybook:before {
-  content: "\e015";
+    content: "\e015";
 }
 .icon-journal:before {
-  content: "\e016";
+    content: "\e016";
 }
-.icon-branch-icon:before {
-  content: "\e903";
+.icon-windows:before {
+    content: "\e902";
 }
-.icon-info:before {
-  content: "\e904";
+.icon-mac:before {
+    content: "\e903";
 }
-.icon-refresh:before {
-  content: "\e90c";
+.icon-android:before {
+    content: "\e904";
 }
-.icon-history-icon:before {
-  content: "\e90d";
+.icon-branch-icon:before {
+    content: "\e905";
 }
-.icon-advance-filter:before {
-  content: "\e90e";
+.icon-info:before {
+    content: "\e906";
 }
 .icon-copy-small:before {
-  content: "\e905";
+    content: "\e907";
 }
 .icon-envelope:before {
-  content: "\e906";
+    content: "\e908";
 }
 .icon-tick:before {
-  content: "\e907";
+    content: "\e909";
 }
 .icon-branch:before {
-  content: "\e908";
+    content: "\e90a";
 }
 .icon-company-profile:before {
-  content: "\e909";
+    content: "\e90b";
 }
 .icon-discount:before {
-  content: "\e90a";
+    content: "\e90c";
 }
 .icon-financial-year:before {
-  content: "\e90b";
+    content: "\e90d";
+}
+.icon-refresh:before {
+    content: "\e90e";
+}
+.icon-history-icon:before {
+    content: "\e90f";
+}
+.icon-advance-filter:before {
+    content: "\e910";
 }
 .icon-integration:before {
-  content: "\e90f";
+    content: "\e911";
 }
 .icon-invoice-managment:before {
-  content: "\e910";
+    content: "\e912";
 }
 .icon-linked-accounts:before {
-  content: "\e911";
+    content: "\e913";
 }
 .icon-manage-user:before {
-  content: "\e912";
+    content: "\e914";
 }
 .icon-subscription:before {
-  content: "\e913";
+    content: "\e915";
 }
 .icon-tags:before {
-  content: "\e914";
+    content: "\e916";
 }
 .icon-taxes:before {
-  content: "\e915";
+    content: "\e917";
 }
 .icon-trigger:before {
-  content: "\e916";
+    content: "\e918";
 }
 .icon-user:before {
-  content: "\e917";
+    content: "\e919";
 }
 .icon-warehouse:before {
-  content: "\e918";
-}
-.icon-help-support-icon:before {
-  content: "\e920";
-}
-.icon-back-arrow:before {
-  content: "\e921";
-}
-.icon-home-icon:before {
-  content: "\e922";
+    content: "\e91a";
 }
 .icon-generate-invoice:before {
-  content: "\e919";
+    content: "\e91b";
 }
 .icon-no-selected:before {
-  content: "\e91a";
+    content: "\e91c";
 }
 .icon-edit-pencil:before {
-  content: "\e91b";
+    content: "\e91d";
 }
 .icon-collapse:before {
-  content: "\e91c";
+    content: "\e91e";
 }
 .icon-info1:before {
-  content: "\e91d";
+    content: "\e91f";
 }
 .icon-expandIcon:before {
-  content: "\e91e";
+    content: "\e920";
 }
 .icon-advance-search:before {
-  content: "\e91f";
+    content: "\e921";
+}
+.icon-help-support-icon:before {
+    content: "\e922";
+}
+.icon-back-arrow:before {
+    content: "\e923";
+}
+.icon-home-icon:before {
+    content: "\e924";
 }
 .icon-copy:before {
-  content: "\e923";
+    content: "\e925";
 }
 .icon-edit:before {
-  content: "\e924";
+    content: "\e926";
 }
 .icon-expand:before {
-  content: "\e925";
+    content: "\e927";
 }
 .icon-eye:before {
-  content: "\e926";
+    content: "\e928";
 }
 .icon-favorite-selected:before {
-  content: "\e927";
+    content: "\e929";
 }
 .icon-filter:before {
-  content: "\e928";
+    content: "\e92a";
 }
 .icon-sort-asc:before {
-  content: "\e929";
+    content: "\e92b";
 }
 .icon-sort-dsc:before {
-  content: "\e92a";
+    content: "\e92c";
 }
 .icon-collapse-icon:before {
-  content: "\e92b";
+    content: "\e92d";
 }
 .icon-info-icon:before {
-  content: "\e92c";
-}
-.icon-traingle-info:before {
-  content: "\e934";
-}
-.icon-cash:before {
-  content: "\e935";
-}
-.icon-atm-card:before {
-  content: "\e936";
+    content: "\e92e";
 }
 .icon-folder-group:before {
-  content: "\e92d";
+    content: "\e92f";
 }
 .icon-file-path:before {
-  content: "\e92e";
+    content: "\e930";
 }
 .icon-arrow-down-2:before {
-  content: "\e92f";
+    content: "\e931";
 }
 .icon-image:before {
-  content: "\e930";
+    content: "\e932";
 }
 .icon-Revert:before {
-  content: "\e931";
+    content: "\e933";
 }
 .icon-payment:before {
-  content: "\e932";
+    content: "\e934";
 }
 .icon-edit-ico:before {
-  content: "\e933";
+    content: "\e935";
+}
+.icon-traingle-info:before {
+    content: "\e936";
+}
+.icon-cash:before {
+    content: "\e937";
+}
+.icon-atm-card:before {
+    content: "\e938";
 }
 .icon-copy-icon:before {
-  content: "\e937";
+    content: "\e939";
 }
 .icon-divide-ico:before {
-  content: "\e938";
+    content: "\e93a";
 }
 .icon-estimate1:before {
-  content: "\e939";
+    content: "\e93b";
 }
 .icon-invoice-icon:before {
-  content: "\e93a";
+    content: "\e93c";
 }
 .icon-sales-order:before {
-  content: "\e93b";
+    content: "\e93d";
 }
 .icon-card:before {
-  content: "\e93c";
+    content: "\e93e";
 }
 .icon-chat2:before {
-  content: "\e93d";
+    content: "\e93f";
 }
 .icon-ecomm:before {
-  content: "\e93e";
+    content: "\e940";
 }
 .icon-mail:before {
-  content: "\e93f";
-}
-.icon-group:before {
-  content: "\e947";
-}
-.icon-bar:before {
-  content: "\e948";
-}
-.icon-Search:before {
-  content: "\e949";
+    content: "\e941";
 }
 .icon-add:before {
-  content: "\e940";
+    content: "\e942";
 }
 .icon-cross:before {
-  content: "\e941";
+    content: "\e943";
 }
 .icon-inventory:before {
-  content: "\e942";
+    content: "\e944";
 }
 .icon-caret-down:before {
-  content: "\e943";
+    content: "\e945";
 }
 .icon-edit1:before {
-  content: "\e944";
+    content: "\e946";
 }
 .icon-arrow-down:before {
-  content: "\e945";
+    content: "\e947";
 }
 .icon-child:before {
-  content: "\e946";
+    content: "\e948";
+}
+.icon-group:before {
+    content: "\e949";
+}
+.icon-bar:before {
+    content: "\e94a";
+}
+.icon-Search:before {
+    content: "\e94b";
 }
 .icon-download:before {
-  content: "\e94a";
+    content: "\e94c";
 }
 .icon-share:before {
-  content: "\e94b";
+    content: "\e94d";
 }
 .icon-magic_link:before {
-  content: "\e94c";
+    content: "\e94e";
 }
 .icon-dropdown:before {
-  content: "\e94d";
+    content: "\e94f";
 }
 .icon-plus:before {
-  content: "\e94e";
+    content: "\e950";
 }
 .icon-search:before {
-  content: "\e94f";
+    content: "\e951";
 }
 .icon-building:before {
-  content: "\e950";
+    content: "\e952";
 }
 .icon-options:before {
-  content: "\e951";
-}
-.icon-minus:before {
-  content: "\e959";
-}
-.icon-trash:before {
-  content: "\e95a";
-}
-.icon-checkbox-icon:before {
-  content: "\e95b";
+    content: "\e953";
 }
 .icon-checkboxfill-icon:before {
-  content: "\e952";
+    content: "\e954";
 }
 .icon-dots-three-vertical:before {
-  content: "\e953";
+    content: "\e955";
 }
 .icon-calender:before {
-  content: "\e954";
+    content: "\e956";
 }
 .icon-car:before {
-  content: "\e955";
+    content: "\e957";
 }
 .icon-download1:before {
-  content: "\e956";
+    content: "\e958";
 }
 .icon-edit11:before {
-  content: "\e957";
+    content: "\e959";
 }
 .icon-plane:before {
-  content: "\e958";
+    content: "\e95a";
+}
+.icon-minus:before {
+    content: "\e95b";
+}
+.icon-trash:before {
+    content: "\e95c";
+}
+.icon-checkbox-icon:before {
+    content: "\e95d";
 }
 .icon-read:before {
-  content: "\e95c";
+    content: "\e95e";
 }
 .icon-search2:before {
-  content: "\e95d";
+    content: "\e95f";
 }
 .icon-ship:before {
-  content: "\e95e";
+    content: "\e960";
 }
 .icon-train:before {
-  content: "\e95f";
+    content: "\e961";
 }
 .icon-file:before {
-  content: "\e960";
+    content: "\e962";
 }
 .icon-link:before {
-  content: "\e961";
+    content: "\e963";
 }
 .icon-pass:before {
-  content: "\e962";
+    content: "\e964";
 }
 .icon-vol:before {
-  content: "\e963";
+    content: "\e965";
 }
 .icon-support:before {
-  content: "\e964";
+    content: "\e966";
 }
 .icon-summary:before {
-  content: "\e965";
-}
-.icon-hand_icon:before {
-  content: "\e96c";
-}
-.icon-users:before {
-  content: "\e96d";
-}
-.icon-folder1:before {
-  content: "\e96e";
+    content: "\e967";
 }
 .icon-switch-icon:before {
-  content: "\e966";
+    content: "\e968";
 }
 .icon-rupees:before {
-  content: "\e967";
+    content: "\e969";
 }
 .icon-export-icon:before {
-  content: "\e968";
+    content: "\e96a";
 }
 .icon-edit-pencil1:before {
-  content: "\e969";
+    content: "\e96b";
 }
 .icon-customise-columns:before {
-  content: "\e96a";
+    content: "\e96c";
 }
 .icon-account:before {
-  content: "\e96b";
+    content: "\e96d";
+}
+.icon-hand_icon:before {
+    content: "\e96e";
+}
+.icon-users:before {
+    content: "\e96f";
+}
+.icon-folder1:before {
+    content: "\e970";
 }
 .icon-group-folder:before {
-  content: "\e96f";
+    content: "\e971";
 }
 .icon-menu:before {
-  content: "\e970";
+    content: "\e972";
 }
 .icon-balance-sheet:before {
-  content: "\e971";
+    content: "\e973";
 }
 .icon-cash-invoice:before {
-  content: "\e972";
+    content: "\e974";
 }
 .icon-company-import:before {
-  content: "\e973";
+    content: "\e975";
 }
 .icon-credit-debit-note:before {
-  content: "\e974";
+    content: "\e976";
 }
 .icon-credit-note:before {
-  content: "\e975";
+    content: "\e977";
 }
 .icon-customer:before {
-  content: "\e976";
+    content: "\e978";
 }
 .icon-day-book:before {
-  content: "\e977";
+    content: "\e979";
 }
 .icon-E-way-bill:before {
-  content: "\e978";
-}
-.icon-estimate:before {
-  content: "\e981";
-}
-.icon-gstr:before {
-  content: "\e982";
-}
-.icon-import-from-tally:before {
-  content: "\e983";
+    content: "\e97a";
 }
 .icon-import-trial-balance:before {
-  content: "\e979";
+    content: "\e97b";
 }
 .icon-invoice1:before {
-  content: "\e97a";
+    content: "\e97c";
 }
 .icon-journal-voucher:before {
-  content: "\e97b";
+    content: "\e97d";
 }
 .icon-header-setting:before {
-  content: "\e97c";
+    content: "\e97e";
 }
 .icon-uniE97A:before {
-  content: "\e97d";
+    content: "\e97f";
 }
 .icon-download-circle:before {
-  content: "\e97e";
+    content: "\e980";
 }
 .icon-company-HO:before {
-  content: "\e97f";
+    content: "\e981";
 }
 .icon-warehouse-icon:before {
-  content: "\e980";
+    content: "\e982";
+}
+.icon-estimate:before {
+    content: "\e983";
+}
+.icon-gstr:before {
+    content: "\e984";
+}
+.icon-import-from-tally:before {
+    content: "\e985";
 }
 .icon-new-old-invoices:before {
-  content: "\e984";
+    content: "\e986";
 }
 .icon-onboarding:before {
-  content: "\e985";
+    content: "\e987";
 }
 .icon-profit-loss:before {
-  content: "\e986";
+    content: "\e988";
 }
 .icon-proforma:before {
-  content: "\e987";
+    content: "\e989";
 }
 .icon-purchase-management:before {
-  content: "\e988";
+    content: "\e98a";
 }
 .icon-purchase-record:before {
-  content: "\e989";
+    content: "\e98b";
 }
 .icon-search-app:before {
-  content: "\e98a";
+    content: "\e98c";
 }
 .icon-settings-taxes:before {
-  content: "\e98b";
+    content: "\e98d";
 }
 .icon-subscription1:before {
-  content: "\e98c";
-}
-.icon-trial-balance:before {
-  content: "\e991";
-}
-.icon-user1:before {
-  content: "\e992";
-}
-.icon-vat:before {
-  content: "\e993";
+    content: "\e98e";
 }
 .icon-aging-report:before {
-  content: "\e98d";
+    content: "\e98f";
 }
 .icon-unlink:before {
-  content: "\e98e";
+    content: "\e990";
 }
 .icon-notification:before {
-  content: "\e98f";
+    content: "\e991";
 }
 .icon-branch-alice:before {
-  content: "\e990";
+    content: "\e992";
+}
+.icon-trial-balance:before {
+    content: "\e993";
+}
+.icon-user1:before {
+    content: "\e994";
+}
+.icon-vat:before {
+    content: "\e995";
+}
+.icon-copy-file:before {
+    content: "\e996";
+}
+.icon-user-black:before {
+    content: "\e997";
 }
 .icon-folderminus:before {
-  content: "\f2332";
+    content: "\f2332";
 }
 .icon-folderplus:before {
-  content: "\f2333";
+    content: "\f2333";
 }
 .icon-folder:before {
-  content: "\f2334";
+    content: "\f2334";
 }
diff --git a/apps/web-giddh/src/assets/magic-link-assets/magic.css b/apps/web-giddh/src/assets/magic-link-assets/magic.css
index fb698c12682..5058a3ab90a 100644
--- a/apps/web-giddh/src/assets/magic-link-assets/magic.css
+++ b/apps/web-giddh/src/assets/magic-link-assets/magic.css
@@ -159,7 +159,7 @@ body {
     padding-right: 0;
 }
 
-.pdR0 {
+.pr-0 {
     padding-right: 0 !important;
 }
 
@@ -187,57 +187,57 @@ body {
     padding: 10px;
 }
 
-.pd15 {
+.pd-15 {
     padding: 15px;
 }
 
-.pd2 {
+.pd-2 {
     padding: 20px;
 }
 
-.pd3 {
+.pd-3 {
     padding: 30px;
 }
 
-.pd4 {
+.pd-4 {
     padding: 40px;
 }
 
-.pdT {
+.pd-t05 {
     padding-top: 5px;
 }
 
-.pdB {
+.pd-b05 {
     padding-bottom: 5px;
 }
 
-.pdL {
+.pd-l05 {
     padding-left: 5px;
 }
 
-.pdL0 {
+.pl-0 {
     padding-left: 0;
 }
 
-.pdR {
+.pd-r05 {
     padding-right: 5px;
 }
 
-.pdR0 {
+.pr-0 {
     padding-right: 0;
 }
 
 .pd-t1 {
-    padding-top: 10px;
+    padding-top: 10px !important;
 }
 
-.pdT2,
-.pdT3 {
+.pd-t2,
+.pd-t3 {
     padding-top: 20px;
 }
 
 .pd-b1 {
-    padding-bottom: 10px;
+    padding-bottom: 10px !important;
 }
 
 .pd-l1 {
@@ -252,55 +252,59 @@ body {
     padding-right: 10px;
 }
 
-.pdB2 {
+.pd-b2 {
     padding-bottom: 20px;
 }
 
-.pdL2 {
+.pd-l2 {
     padding-left: 20px;
 }
 
-.pdR2 {
+.pd-r2 {
     padding-right: 20px;
 }
 
-.pdB3 {
+.pd-b3 {
     padding-bottom: 30px;
 }
 
-.pdL3 {
+.pd-l3 {
     padding-left: 30px;
 }
 
-.pdR3 {
+.pd-r3 {
     padding-right: 30px !important;
 }
 
-.pdT4 {
+.pd-t4 {
     padding-top: 30px;
 }
 
-.pdT5 {
+.pd-t5 {
     padding-top: 30px;
 }
 
-.pdB4 {
+.pd-b4 {
     padding-bottom: 40px;
 }
 
-.pdL4 {
+.pd-l4 {
     padding-left: 40px;
 }
 
-.pdR4 {
+.pd-r4 {
     padding-right: 40px;
 }
 
-.pd0 {
+.pd-t15{
+    padding-top: 15px;
+}
+
+.p-0 {
     padding: 0;
 }
 
-.mr0 {
+.m-0 {
     margin: 0;
 }
 
@@ -308,39 +312,39 @@ body {
     margin: 5px;
 }
 
-.mr1 {
-    margin: 10px;
+.m-10 {
+    margin: 10px !important;
 }
 
-.mr15 {
+.mr-r15 {
     margin: 15px;
 }
 
-.mr2 {
+.m-20 {
     margin: 20px;
 }
 
-.mr3 {
+.m-30 {
     margin: 30px;
 }
 
-.mr4 {
+.m-40 {
     margin: 40px;
 }
 
-.mr-t {
+.mr-t05 {
     margin-top: 5px;
 }
 
-.mrB {
+.mr-b05 {
     margin-bottom: 5px !important;
 }
 
-.mrL {
+.mr-l05 {
     margin-left: 5px;
 }
 
-.mrR {
+.mr-r05 {
     margin-right: 5px;
 }
 
@@ -364,7 +368,7 @@ body {
     margin-left: 15px;
 }
 
-.mrR1 {
+.mr-r1 {
     margin-right: 10px;
 }
 
@@ -376,27 +380,27 @@ body {
     margin-bottom: 20px;
 }
 
-.mrL2 {
+.mr-l2 {
     margin-left: 20px;
 }
 
-.mrR2 {
+.mr-r2 {
     margin-right: 20px;
 }
 
-.mrT3 {
+.mr-t3 {
     margin-top: 30px;
 }
 
-.mrB3 {
+.mr-b3 {
     margin-bottom: 30px;
 }
 
-.mrL3 {
+.mr-l3 {
     margin-left: 30px;
 }
 
-.mrR3 {
+.mr-r3 {
     margin-right: 30px;
 }
 
@@ -404,44 +408,52 @@ body {
     margin-top: 40px;
 }
 
-.mrT5 {
+.mr-t5 {
     margin-top: 50px;
 }
 
-.mrB4 {
+.mr-b4 {
     margin-bottom: 40px;
 }
 
-.mrL4 {
+.mr-l4 {
     margin-left: 40px;
 }
 
-.mrR4 {
+.mr-r4 {
     margin-right: 40px;
 }
 
+.mr-0{
+    margin-right: 0 !important;
+} 
+
+.ml-0{
+    margin-left: 0 !important;
+}
+
 .bdr {
-    border: 1px solid #ccc;
+    border: 1px solid #d9d9d9;
 }
 
-.bdrN {
+.border-none {
     border: none;
 }
 
-.bdrT {
-    border-top: 1px solid #ccc;
+.bd-rt {
+    border-top: 1px solid #d9d9d9;
 }
 
-.bdrB {
-    border-bottom: 1px solid #ccc;
+.bd-rb {
+    border-bottom: 1px solid #d9d9d9;
 }
 
-.bdrL {
-    border-left: 1px solid #ccc !important;
+.bd-rl {
+    border-left: 1px solid #d9d9d9 !important;
 }
 
-.bdrR {
-    border-right: 1px solid #ccc !important;
+.bd-rr {
+    border-right: 1px solid #d9d9d9 !important;
 }
 
 .bdrR0 {
@@ -460,7 +472,7 @@ body {
     position: fixed;
 }
 
-.witClr {
+.white-color {
     color: #fff;
 }
 
@@ -468,68 +480,68 @@ body {
     color: #777;
 }
 
-.greyBg {
+.grey-bg {
     background: #f5f5f5;
     /*min-width:320px;*/
 }
 
-.witBg {
+.white-bg {
     background: #fff;
 }
 
-.transBg {
+.transparent-bg {
     background: 0 0;
 }
 
-.oh {
+.overflow-hidden {
     overflow: hidden;
 }
 
-.oyAuto {
+.overflow-y-auto {
     overflow-y: auto;
 }
 
-.oxAuto {
+.overflow-x-auto {
     overflow-x: auto;
 }
 
-.rn {
+.resize-none {
     resize: none;
 }
 
-.ln {
+.list-style-none {
     list-style: none;
 }
 
-.txtUpc {
+.text-uppercase {
     text-transform: uppercase;
 }
 
-.txt-lwc {
+.text-lowercase {
     text-transform: lowercase;
 }
 
-.txtCpc {
+.text-capitalize {
     text-transform: capitalize;
 }
 
-.td-undr {
+.text-underline {
     text-decoration: underline;
 }
 
-.alR {
+.text-right {
     text-align: right;
 }
 
-.alL {
+.text-left {
     text-align: left;
 }
 
-.alC {
+.text-center {
     text-align: center;
 }
 
-.ellp {
+.text-ellipsis {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -547,11 +559,19 @@ body {
     font-size: 16px;
 }
 
-.scrItem {
+.scroll-item {
     overflow: auto;
     position: relative;
 }
 
+.w-100{
+    width:100% !important;
+}
+
+.position-relative{
+    position: relative !important;
+}
+
 .oyHid {
     overflow-y: hidden;
 }
@@ -609,7 +629,7 @@ body {
     font-weight: regular;
 }
 
-.account_name {
+.account-name {
     font-weight: 300;
     font-size: 14px;
 }
@@ -627,40 +647,92 @@ body {
     color: #000;
 }
 
-.bg-f9 {
+.light-gray-bg {
     background: #f9f9f9;
 }
 
-.bg-gr {
-    background: #ccc;
+.gray-bg {
+    background: #d9d9d9;
 }
 
-.bg-wh {
+.white-bg {
     background: #fff;
 }
 
-.bg-yl {
-    background: #f9f9f9;
-}
-
 .wid-50 {
     width: 50%;
 }
 
-.bg-bl {
+.blue-bg {
     background: #1a237e;
 }
 
-.fs-18 {
+.font-12{
+    font-size: 12px;
+}
+
+.font-16{
+    font-size: 16px;
+}
+
+.font-18 {
     font-size: 18px;
 }
 
+.d-block {
+    display: block !important;
+}
+
+.float-right{
+    float:right;
+}
+
+.float-left{
+    float:left;
+}
+
+.text-color{
+    color:#262626;
+}
+
+.head-block{
+    height:77px;
+}
+
+.head-block .vertical-center{
+    font-size:26px;
+}
+
+.ledger-account-name{
+    font-size:25px;
+    color:#6d6e70;
+}
+
+.currency-width{
+    width: 150px !important;
+}
+
+.ledger-footer-1{
+    width: 50%;
+    bottom: 0;
+    left: 0;
+}
+
+.attachment-medium{
+    max-width: 100%; 
+    height: auto !important;
+}
+
+.ledger-footer-1:nth-child(2){
+    right:0 !important;
+}
+
 .download-invoice-ledger {
     position: absolute;
 }
 
 /*#transaction_table table th[class*="col-"]:last-child {
-    border-right: 1px solid #ddd !important;
+    border-right: 1px solid #d9d9d9 !important;
 }*/
 
 #transaction_table table td[class*="col-"],
@@ -668,10 +740,10 @@ table th[class*="col-"] {
     padding: 10px;
 }
 
-.compoundEntry td,
-.compoundEntry td .form-control {
+.compound-entry td,
+.compound-entry td .form-control {
     background: #fddfa4 !important;
-    border-left: 1px solid #ccc;
+    border-left: 1px solid #d9d9d9;
 }
 
 .nav.nav-tabs {
@@ -698,7 +770,7 @@ table th[class*="col-"] {
  border:none;
 }
 
-.pd350 {
+.pt-350 {
     padding-bottom: 350px;
 }
 .table-bordered > thead > tr > td,
@@ -758,8 +830,8 @@ table th[class*="col-"] {
 
 /*footer style start*/
 
-#contact p.mrT3,
-.mrT3 {
+#contact p.mr-t3,
+.mr-t3 {
     margin-top: 30px;
 }
 
@@ -773,7 +845,7 @@ table th[class*="col-"] {
     /* font-family: 'Arvo', serif; */
 }
 
-.headerline {
+.header-line {
     font-size: 30px;
     /* font-family: 'Arvo', serif; */
     color: white;
@@ -875,7 +947,7 @@ h4 {
 }
 
 #web_footer {
-    /* font-family: 'Arvo', serif; */
+    display: none;
 }
 
 .green {
@@ -920,10 +992,10 @@ h4 {
     color: #d8d5d5;
 }
 
-.magicTable .download-invoice-ledger {
+.magic-table .download-invoice-ledger {
     padding: 0 5px;
 }
-.magicTable .pdR25imp {
+.magic-table .pr-25 {
     padding-right: 25px !important;
 }
 /*footer style end*/
@@ -1005,7 +1077,7 @@ body {
     color: #555;
     text-align: center;
     background-color: #eee;
-    border: 1px solid #ccc;
+    border: 1px solid #d9d9d9;
     border-radius: 4px;
 }
 
@@ -1076,7 +1148,7 @@ footer p {
     display: flex;
     flex-wrap: wrap;
 }
-.pre-ul,
+.list-style-ul,
 .btmfooter-social {
     margin: 0;
     padding: 0;
@@ -1098,7 +1170,7 @@ footer p {
 footer ul li,
 ul,
 li,
-.pre-ul {
+.list-style-ul {
     list-style: none;
 }
 #custom_html-2 ul,
@@ -1190,7 +1262,7 @@ footer .menu-item a {
     #contact p {
         line-height: 28px;
     }
-    :host ::ng-deep .headerline {
+    :host ::ng-deep .header-line {
         font-size: 18px;
     }
     #contact .form-control {
@@ -1244,7 +1316,7 @@ footer .menu-item a {
         position: absolute;
         width: 0;
         border-left: 1px solid #d9d9d9;
-        top: 42px;
+        top: 37px;
         bottom: 0;
         z-index: 9;
         margin: 0 auto;
@@ -1282,7 +1354,7 @@ footer .menu-item a {
     #contact p {
         font-size: 16 !important;
     }
-    /* .headerline {
+    /* .header-line {
         font-size: 22px !important;
     } */
 }
@@ -1331,7 +1403,7 @@ footer .menu-item a {
 }
 
 tbody td {
-    border-left: 1px solid #ddd;
+    border-left: 1px solid #d9d9d9;
 }
 thead tr:first-child th {
     border-left: 0 !important;
diff --git a/apps/web-giddh/src/meta/magic.html b/apps/web-giddh/src/meta/magic.html
index c25fd3cc7e3..21e82c7ddc6 100644
--- a/apps/web-giddh/src/meta/magic.html
+++ b/apps/web-giddh/src/meta/magic.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
-
 <head>
+    <title>Giddh ~ Accounting at its Rough! Bookkeeping and Accounting Software</title>
 </head>
 
 <body>
@@ -10,14 +10,14 @@
         <div class="cube2"></div>
     </div>
     <div id="app">
-        <section class="bg-f9" id="magicLink">
-            <section class="bg-bl">
-                <div class="container-fluid text-white text-center gTbl" style="height:77px">
-                    <div class="vcenter" style="font-size:26px">{{ledgerData.companyName}}</div>
+        <section class="light-gray-bg" id="magicLink">
+            <section class="blue-bg">
+                <div class="container-fluid text-white text-center head-block">
+                    <div class="vertical-center">{{ledgerData.companyName}}</div>
                 </div>
             </section>
             <section class="pd-b1">
-                <div id="web-bg" class="container mrT3">
+                <div id="web-bg" class="container mr-t3">
                     <div class="row">
                         <div class="col-sm-12 col-md-3">
                             <div class="row">
@@ -28,8 +28,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div id="web-cont" class="col-md-6 text-center" v-if="!isResponsive"
-                            style="font-size:25px;color:#6d6e70">
+                        <div id="web-cont" class="col-md-6 text-center ledger-account-name" v-if="!isResponsive">
                             {{ledgerData.account.name}} A/c
                         </div>
                         <div class="col-md-3 col-sm-12">
@@ -46,35 +45,31 @@
                     </div>
                 </div>
             </section>
-            <section class="pdT4">
+            <section class="pd-t4">
                 <!-- v-if="!isResponsive" -->
                 <div id="mob-cont" class="container">
-                    <div class="row bg-wh" style="padding-bottom:10px;padding-top:10px">
+                    <div class="row white-bg pd-b1 pd-t1">
                         <div class="col-4">
-                            <div style="font-size:12px;color:#262626">Opening</div>
+                            <div class="font-12 text-color">Opening</div>
                             <div v-if="legderBalanceData && legderBalanceData.forwardedBalance">
                                 <!-- | number:'1.2-2' -->
-                                <span class="fs-18"
-                                    style="color:#262626">{{legderBalanceData.forwardedBalance.amount | currency }}</span>
-                                <span
-                                    style="font-size:16px;color:#262626">{{legderBalanceData.forwardedBalance.type === 'DEBIT' ? 'Dr' : 'Cr' }}</span>
+                                <span class="font-18 text-color">{{legderBalanceData.forwardedBalance.amount | currency }}</span>
+                                <span class="font-16 text-color">{{legderBalanceData.forwardedBalance.type === 'DEBIT' ? 'Dr' : 'Cr' }}</span>
                             </div>
                         </div>
-                        <div class="col-4" style="font-size:11px;padding-top:15px">
+                        <div class="col-4 font-12 pd-t15">
                             <!-- <div class="text-center">
                                       <div>10,340 Dr.</div>
                                   </div> -->
                         </div>
                         <div class="col-4 text-right">
-                            <div style="font-size:12px;color:#262626">
+                            <div class="font-12 text-color">
                                 Closing
                             </div>
                             <div v-if="legderBalanceData && legderBalanceData.closingBalance">
-                                <span
-                                    style="font-size:16px;color:#262626">{{ legderBalanceData.closingBalance.type === 'DEBIT' ? 'Dr' : 'Cr' }}</span>
+                                <span class="font-16 text-color">{{ legderBalanceData.closingBalance.type === 'DEBIT' ? 'Dr' : 'Cr' }}</span>
                                 <!-- | number:'1.2-2' -->
-                                <span class="fs-18"
-                                    style="color:#262626">{{legderBalanceData.closingBalance.amount | currency }}</span>
+                                <span class="font-18 text-color">{{legderBalanceData.closingBalance.amount | currency }}</span>
                             </div>
                         </div>
                     </div>
@@ -83,7 +78,7 @@
                     <div class="row">
                         <div class="col-12">
                         <!-- Nav tabs -->
-                        <ul class="nav nav-tabs device-small bg-gr" role="tablist">
+                        <ul class="nav nav-tabs device-small gray-bg" role="tablist">
                             <li class="nav-item wid-50" role="presentation">
                                 <a class="nav-link" v-bind:class="{'active': selectedTab === 'debit' || !selectedTab }"
                                     v-on:click="selectedTab='debit'" href="javascript:void(0);" aria-controls="debit"
@@ -97,32 +92,32 @@
                         </ul>
                         <!-- Tab panes -->
                         <div class="tab-content ledger-book row" id="transaction_table">
-                            <div role="tabpanel" class="tab-pane col-lg-6 col-md-12 col-12"
-                                v-bind:class="{'active': selectedTab === 'debit' || !selectedTab, 'pd350':!isResponsive}"
+                            <div role="tabpanel" class="tab-pane col-md-6 col-12"
+                                v-bind:class="{'active': selectedTab === 'debit' || !selectedTab, 'pt-350':!isResponsive}"
                                 id="debit" v-if="!selectedTab || selectedTab == 'debit'">
                                 <div class="row">
                                     <div class="col-12 pl-0 pr-0">
-                                    <table class="table table-bordered bg-wh">
+                                    <table class="table table-bordered white-bg">
                                         <thead>
-                                            <tr class="bg-f9">
+                                            <tr class="light-gray-bg">
                                                 <th colspan="3">
-                                                    <span class="account_name">{{ledgerData.account.name}} is </span>
+                                                    <span class="account-name">{{ledgerData.account.name}} is </span>
                                                     <span class="rec">receiving</span>
                                                     <span class="dr-cr-category pull-right text-gray">Dr</span>
                                                 </th>
                                             </tr>
-                                            <tr class="bg-yl row mr-0 ml-0 bdrL">
+                                            <tr class="light-gray-bg row mr-0 ml-0 bd-rl">
                                                 <th class="col-3">Date</th>
-                                                <th class="col-6 bdrL">Particular</th>
-                                                <th class="text-right col-3 bdrL">Amount</th>
+                                                <th class="col-6 bd-rl">Particular</th>
+                                                <th class="text-right col-3 bd-rl">Amount</th>
                                             </tr>
                                         </thead>
-                                        <tbody class="bdrL">
-                                            <tr class="ledger-row bdrB row mr-0 ml-0"
+                                        <tbody class="bd-rl">
+                                            <tr class="ledger-row bd-rb row mr-0 ml-0"
                                                 v-if="legderBalanceData.forwardedBalance.amount > 0 && legderBalanceData.forwardedBalance.type === 'DEBIT'">
                                                 <td class="col-3"></td>
-                                                <td class="col-6 bdrL">To Balance B/F</td>
-                                                <td class="col-3 text-right bdrL">
+                                                <td class="col-6 bd-rl">To Balance B/F</td>
+                                                <td class="col-3 text-right bd-rl">
                                                     <!-- | number: '1.2-2'  -->
                                                     <span v-if="legderBalanceData.forwardedBalance.type === 'DEBIT'"
                                                         class="">{{ legderBalanceData.forwardedBalance.amount | currency }}</span>
@@ -130,7 +125,7 @@
                                                         class="">0</span>
                                                 </td>
                                             </tr>
-                                            <tr class="ledger-row bdrB"
+                                            <tr class="ledger-row bd-rb"
                                                 v-if="(legderBalanceData.forwardedBalance.type !== 'DEBIT') || (legderBalanceData.forwardedBalance.amount == 0)">
                                                 <td colspan="3" class="">&nbsp;</td>
                                             </tr>
@@ -139,19 +134,19 @@
                                             <tr v-for="ledger in ledgerData.ledgersTransactions.debitTransactions"
                                                 v-tooltip="'Total: '+ledger.amount+' '+ledger.type"
                                                 v-on:click="checkCompEntry(ledger)"
-                                                v-bind:class="{compoundEntry: ledger.isCompoundEntry}">
-                                                <td colspan="100%" style="padding:0;border:0">
-                                                    <table style="width:100%">
+                                                v-bind:class="{'compound-entry': ledger.isCompoundEntry}">
+                                                <td colspan="100%" class="p-0 border-none">
+                                                    <table class="w-100">
                                                         <tbody>
                                                             <!-- ng-if="txn.type == 'DEBIT'" -->
                                                             <!-- | filter: searchText -->
                                                             <template v-for="txn in filterBy(ledger, searchText)">
-                                                                <tr class="text-left magicTable bdrB row mr-0 ml-0">
+                                                                <tr class="text-left magic-table bd-rb row mr-0 ml-0">
                                                                     <td class="col-3">{{ledger.entryDate}}</td>
-                                                                    <td class="col-6 bdrL">To {{txn.particular.name}}
+                                                                    <td class="col-6 bd-rl">To {{txn.particular.name}}
                                                                     </td>
-                                                                    <td class="col-3 bdrL pos-rel"
-                                                                        v-bind:class="{'pdR25imp': ledger.voucherGenerated || ledger.attachedFileUniqueName}"
+                                                                    <td class="col-3 bd-rl position-relative"
+                                                                        v-bind:class="{'pr-25': ledger.voucherGenerated || ledger.attachedFileUniqueName}"
                                                                         align="right">
                                                                         {{txn.amount}}
                                                                         <template
@@ -204,11 +199,9 @@
                                                 </td>
                                             </tr>
                                             <tr v-if="isResponsive" class="row mr-0 ml-0">
-                                                <td colspan="12" class="col-12 text-right h32"
-                                                    style="padding-right:10px !important;">
+                                                <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                     <!-- | number: '1.2-2'  -->
-                                                    <span class=""
-                                                        style="width: 150px;display: block;float: right;">{{ reckoningDebitTotal | currency }}</span>
+                                                    <span class="currency-width d-block float-right">{{ reckoningDebitTotal | currency }}</span>
                                                 </td>
                                             </tr>
                                         </tbody>
@@ -216,32 +209,32 @@
                                 </div>
                                 </div>
                             </div>
-                            <div role="tabpanel" class="tab-pane col-lg-6 col-md-12 col-md-12"
-                                v-bind:class="{'active': selectedTab === 'credit', 'pd350':!isResponsive}" id="credit"
+                            <div role="tabpanel" class="tab-pane col-md-6 col-12"
+                                v-bind:class="{'active': selectedTab === 'credit', 'pt-350':!isResponsive}" id="credit"
                                 v-if="!selectedTab || selectedTab == 'credit'">
                                 <div class="row">
                                 <div class="col-12 pl-0 pr-0">
-                                    <table class="table table-bordered bg-wh">
+                                    <table class="table table-bordered white-bg">
                                         <thead>
-                                            <tr class="bg-f9" style="border:none !important">
+                                            <tr class="light-gray-bg border-none">
                                                 <th colspan="3">
-                                                    <span class="account_name">{{ledgerData.account.name}} is </span>
+                                                    <span class="account-name">{{ledgerData.account.name}} is </span>
                                                     <span class="rec">giving</span>
                                                     <span class="dr-cr-category pull-right text-gray">Cr</span>
                                                 </th>
                                             </tr>
-                                            <tr class="bg-yl row mr-0 ml-0">
+                                            <tr class="light-gray-bg row mr-0 ml-0">
                                                 <th class="col-3">Date</th>
-                                                <th class="col-6 bdrL">Particular</th>
-                                                <th class="text-right col-3 bdrL bdrR">Amount</th>
+                                                <th class="col-6 bd-rl">Particular</th>
+                                                <th class="text-right col-3 bd-rl bd-rr">Amount</th>
                                             </tr>
                                         </thead>
                                         <tbody>
-                                            <tr class="ledger-row row mr-0 ml-0 bdrB"
+                                            <tr class="ledger-row row mr-0 ml-0 bd-rb"
                                             v-if="legderBalanceData.forwardedBalance && legderBalanceData.forwardedBalance.amount > 0 && legderBalanceData.forwardedBalance.type === 'CREDIT'">
                                                 <td class="col-3"></td>
-                                                <td class="col-6 bdrL">By Balance B/F</td>
-                                                <td class="col-3 text-right bdrL bdrR">
+                                                <td class="col-6 bd-rl">By Balance B/F</td>
+                                                <td class="col-3 text-right bd-rl bd-rr">
                                                     <span v-if="legderBalanceData.forwardedBalance.type === 'CREDIT'">
                                                         <!-- | number: '1.2-2' -->
                                                         {{ legderBalanceData.forwardedBalance.amount | currency }}</span>
@@ -249,29 +242,29 @@
                                                         v-if="legderBalanceData.forwardedBalance.type === 'DEBIT'">0</span>
                                                 </td>
                                             </tr>
-                                            <tr class="ledger-row bdrB"
+                                            <tr class="ledger-row bd-rb"
                                                 v-if="legderBalanceData.forwardedBalance.type !== 'CREDIT' || (legderBalanceData.forwardedBalance.amount == 0)">
-                                                <td class="bdrR" colspan="3">&nbsp;</td>
+                                                <td class="bd-rr" colspan="3">&nbsp;</td>
                                             </tr>
                                             <!-- ng-if="ledger.hasCredit" -->
-                                            <!-- ng-class="{compoundEntry: ledger.isCompoundEntry}"
+                                            <!-- ng-class="{compound-entry: ledger.isCompoundEntry}"
                                      ng-click="checkCompEntry(ledger)" -->
                                             <!-- uib-tooltip="Total : {{ledger.total.amount}} {{ledger.total.type}}" tooltip-placement="top" -->
                                             <tr v-for="ledger in ledgerData.ledgersTransactions.creditTransactions"
                                                 v-tooltip="'Total: '+ledger.amount+' '+ledger.type"
                                                 v-on:click="checkCompEntry(ledger)"
-                                                v-bind:class="{compoundEntry: ledger.isCompoundEntry}">
-                                                <td colspan="100%" style="padding:0; border:0">
-                                                    <table style="width:100%;">
+                                                v-bind:class="{'compound-entry': ledger.isCompoundEntry}">
+                                                <td colspan="100%" class="p-0 border-none">
+                                                    <table class="w-100">
                                                         <tbody>
                                                             <!-- | filter: searchText -->
                                                             <template v-for="txn in filterBy(ledger, searchText)">
-                                                                <tr class="text-left magicTable bdrB row mr-0 ml-0">
+                                                                <tr class="text-left magic-table bd-rb row mr-0 ml-0">
                                                                     <td class="col-3">{{ledger.entryDate}}</td>
-                                                                    <td class="col-6 bdrL">By {{txn.particular.name}}
+                                                                    <td class="col-6 bd-rl">By {{txn.particular.name}}
                                                                     </td>
-                                                                    <td class="col-3 bdrL pos-rel bdrR"
-                                                                        v-bind:class="{'pdR25imp': ledger.voucherGenerated || ledger.attachedFileUniqueName}"
+                                                                    <td class="col-3 bd-rl position-relative bd-rr"
+                                                                        v-bind:class="{'pr-25': ledger.voucherGenerated || ledger.attachedFileUniqueName}"
                                                                         align="right">
                                                                         {{txn.amount}}
                                                                         <template
@@ -323,17 +316,15 @@
                                                         By Balance C/F: {{legderBalanceData.forwardedBalance ? legderBalanceData.forwardedBalance.type === 'CREDIT' ? 'Cr' : 'Dr' : ''}}
                                                         <!-- | number: '1.2-2' -->
                                                         <span
-                                                            class="primary_clr">{{legderBalanceData.closingBalance.amount | currency }}
+                                                            class="primary-color">{{legderBalanceData.closingBalance.amount | currency }}
                                                         </span>
                                                     </span>
                                                 </td>
                                             </tr>
                                             <tr v-if="isResponsive" class="row mr-0 ml-0">
-                                                <td colspan="12" class="col-12 text-right h32"
-                                                    style="padding-right:10px !important;">
+                                                <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                     <!-- | number: '1.2-2'  -->
-                                                    <span class=""
-                                                        style="width: 150px;display: block;float: right;">{{reckoningCreditTotal | currency }}</span>
+                                                    <span class="currency-width d-block float-right">{{reckoningCreditTotal | currency }}</span>
                                                 </td>
                                             </tr>
                                         </tbody>
@@ -346,8 +337,7 @@
                                 <table class="ledger-footer-1 float-left">
                                     <tbody>
                                         <tr class="total-col row mr-0 ml-0">
-                                            <td colspan="12" class="col-12 text-right h32"
-                                                style="padding-right:10px !important">
+                                            <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                 <!-- [tooltip]="'(-) Asset ( ohh no!)'" -->
                                                 <!-- [placement]="'top'" -->
                                                 <span
@@ -360,11 +350,9 @@
                                             </td>
                                         </tr>
                                         <tr class="total-col row mr-0 ml-0">
-                                            <td colspan="12" class="col-12 text-right h32"
-                                                style="padding-right:10px !important;">
+                                            <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                 <!-- | number: '1.2-2'  -->
-                                                <span class="bdrT"
-                                                    style="width: 150px;display: block;float: right;padding: 10px 0;">{{ reckoningDebitTotal | currency }}</span>
+                                                <span class="bd-rt currency-width d-block float-right pd-t1 pd-b1">{{ reckoningDebitTotal | currency }}</span>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -372,25 +360,22 @@
                                 <table class="ledger-footer-1 float-right">
                                     <tbody>
                                         <tr class="total-col row mr-0 ml-0">
-                                            <td colspan="12" class="col-12 text-right h32"
-                                                style="padding-right:10px !important">
+                                            <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                 <!-- tooltip="" [placement]="'top'" -->
                                                 <span
                                                     v-if="legderBalanceData.closingBalance && legderBalanceData.closingBalance.type === 'DEBIT'">
                                                     By Balance C/F:
                                                     <!-- | number: '1.2-2' -->
                                                     <span
-                                                        class="primary_clr">{{legderBalanceData.closingBalance.amount | currency }}
+                                                        class="primary-color">{{legderBalanceData.closingBalance.amount | currency }}
                                                     </span>
                                                 </span>
                                             </td>
                                         </tr>
                                         <tr class="total-col row mr-0 ml-0">
-                                            <td colspan="12" class="col-12 text-right h32"
-                                                style="padding-right:10px !important;">
+                                            <td colspan="12" class="col-12 text-right h32 pd-r1">
                                                 <!-- | number: '1.2-2'  -->
-                                                <span class="bdrT"
-                                                    style="width: 150px;display: block;float: right;padding: 10px 0;">{{reckoningCreditTotal | currency }}</span>
+                                                <span class="bd-rt currency-width d-block float-right pd-t1 pd-b1">{{reckoningCreditTotal | currency }}</span>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -408,12 +393,12 @@
                 <div class="container">
                     <div class="row">
                     <div class="col-3">
-                        <!--<span class="primary_clr mr-b1" style="font-size: 12px">{{cDate.startDate | date:'dd-MMM-yyyy'}} - {{cDate.endDate | date:'dd-MMM-yyyy'}}</span>-->
+                        <!--<span class="primary-color mr-b1" style="font-size: 12px">{{cDate.startDate | date:'dd-MMM-yyyy'}} - {{cDate.endDate | date:'dd-MMM-yyyy'}}</span>-->
                         <h1>Total Transactions
-                            <span class="primary_clr">{{ledgerData.ledgersTransactions.totalItems}}</span>
+                            <span class="primary-color">{{ledgerData.ledgersTransactions.totalItems}}</span>
                         </h1>
-                        <span class="mr-t1 mrR2">Dr {{ledgerData.ledgersTransactions.debitTransactionsCount}}</span>
-                        <span class="mr-t1 mrR2">Cr {{ledgerData.ledgersTransactions.creditTransactionsCount}}</span>
+                        <span class="mr-t1 mr-r2">Dr {{ledgerData.ledgersTransactions.debitTransactionsCount}}</span>
+                        <span class="mr-t1 mr-r2">Cr {{ledgerData.ledgersTransactions.creditTransactionsCount}}</span>
                     </div>
                     <div class="col-3">
                         <h1>Opening Balance</h1>
@@ -423,22 +408,22 @@ <h3 v0if="legderBalanceData.forwardedBalance">
                             {{ legderBalanceData.forwardedBalance.type === 'DEBIT' ? 'Dr' : 'Cr' }}</h3>
                     </div>
                     <div class="col-3">
-                        <h1 class="primary_clr">Net Total
+                        <h1 class="primary-color">Net Total
                             <span v-if="legderBalanceData.creditTotal > legderBalanceData.debitTotal">Credit</span>
                             <span v-if="legderBalanceData.creditTotal < legderBalanceData.debitTotal">Debit</span>
                         </h1>
-                        <h3 class=" primary_clr" v-if="legderBalanceData.creditTotal > legderBalanceData.debitTotal">
+                        <h3 class=" primary-color" v-if="legderBalanceData.creditTotal > legderBalanceData.debitTotal">
                             <!-- | number:'1.2-2' -->
                             {{legderBalanceData.creditTotal - legderBalanceData.debitTotal | currency }}
                         </h3>
-                        <h3 class=" primary_clr" v-if="legderBalanceData.creditTotal < legderBalanceData.debitTotal">
+                        <h3 class=" primary-color" v-if="legderBalanceData.creditTotal < legderBalanceData.debitTotal">
                             <!-- | number:'1.2-2' -->
                             {{legderBalanceData.debitTotal - legderBalanceData.creditTotal | currency}}
                         </h3>
                         <!-- | number:'1.2-2' -->
-                        <h1 class="mr-t">Dr Total {{legderBalanceData.debitTotal | currency}}</h1>
+                        <h1 class="mr-t05">Dr Total {{legderBalanceData.debitTotal | currency}}</h1>
                         <!-- | number:'1.2-2' -->
-                        <h1 class="mr-t">Cr Total {{legderBalanceData.creditTotal | currency}}</h1>
+                        <h1 class="mr-t05">Cr Total {{legderBalanceData.creditTotal | currency}}</h1>
                     </div>
                     <div class="col-3">
                         <h1>Closing Balance</h1>
@@ -481,19 +466,19 @@ <h4 class="arvo">We would love to extend our support via
                                         <div class="flex-grow-0">
                                             <div class="clearfix">
                                                 <p class="mb-2">Desktop Apps</p>
-                                                <ul class="inner-logos pre-ul">
-                                                    <li id="media_image-4" class="widget widget_media_image">
+                                                <ul class="inner-logos list-style-ul">
+                                                    <li id="media_image-4" class="widget widget-media-image">
                                                         <a
                                                             href="https://s3-ap-south-1.amazonaws.com/giddh-app-builds/giddh%20Setup%206.6.8.exe"><img
                                                                 width="1" height="1" src="assets/images/window-icon.svg"
                                                                 class="image wp-image-155  attachment-medium size-medium"
-                                                                alt="" style="max-width: 100%; height: auto;"></a>
+                                                                alt=""></a>
                                                     </li>
                                                 </ul>
                                             </div>
 
                                             <div class="">
-                                                <ul class="pre-ul menu-item" id="menu-primary-menu">
+                                                <ul class="list-style-ul menu-item" id="menu-primary-menu">
                                                     <li><a target="_blank"
                                                             href="https://giddh.com/make-the-switch/">Make The
                                                             Switch</a></li>
@@ -507,7 +492,7 @@ <h4 class="arvo">We would love to extend our support via
                                             </div>
 
                                             <div class="mt-5" id="custom_html-2">
-                                                <ul class="pre-ul">
+                                                <ul class="list-style-ul">
                                                     <li>Sales :<a href="mailTo:shubhendra@giddh.com">
                                                             shubhendra@giddh.com</a></li>
                                                     <li>Support: <a href="mailTo:support@giddh.com">
@@ -521,26 +506,26 @@ <h4 class="arvo">We would love to extend our support via
                                         <div class="flex-grow-1">
                                             <div class="clearfix">
                                                 <p class="mb-2">Mobile Apps</p>
-                                                <ul class="inner-logos pre-ul">
-                                                    <li id="media_image-6" class="widget widget_media_image">
+                                                <ul class="inner-logos list-style-ul">
+                                                    <li id="media_image-6" class="widget widget-media-image">
                                                         <a href="https://play.google.com/store/apps/details?id=com.app.Giddh"
                                                             target="_blank"><img width="1" height="1"
                                                                 src="https://giddh.com/wp-content/uploads/2019/10/androide_icon.svg"
                                                                 class="image wp-image-156  attachment-medium size-medium"
-                                                                alt="" style="max-width: 100%; height: auto;"></a>
+                                                                alt=""></a>
                                                     </li>
-                                                    <li id="media_image-7" class="widget widget_media_image">
+                                                    <li id="media_image-7" class="widget widget-media-image">
                                                         <a href="https://itunes.apple.com/in/app/giddh-tb/id999743672?mt=8"
                                                             target="_blank"><img width="1" height="1"
                                                                 src="https://giddh.com/wp-content/uploads/2019/10/ios_icon.svg"
                                                                 class="image wp-image-157  attachment-medium size-medium"
-                                                                alt="" style="max-width: 100%; height: auto;"></a>
+                                                                alt=""></a>
                                                     </li>
                                                 </ul>
                                             </div>
 
                                             <div class="">
-                                                <ul class="pre-ul menu-item" id="menu-primary-menu">
+                                                <ul class="list-style-ul menu-item" id="menu-primary-menu">
                                                     <li><a target="_blank"
                                                             href="https://giddh.com/privacy-policy/">Privacy Policy</a>
                                                     </li>
@@ -561,7 +546,7 @@ <h4 class="arvo">We would love to extend our support via
                                 </div>
                                 <div class="col-sm-12 col-md-6">
                                     <div class="contact_form" v-show="!formSubmitted">
-                                        <h4 class="headerline mr-b2">Contact Us</h4>
+                                        <h4 class="header-line mr-b2">Contact Us</h4>
                                         <p class="mb-5">For complete accounting solution for your business</p>
                                         <form novalidate name="contactForm" action="#">
                                             <div class="row">
@@ -606,7 +591,7 @@ <h4 class="headerline mr-b2">Contact Us</h4>
 
                                         </form>
                                     </div>
-                                    <h4 class="headerline" v-if="formSubmitted">{{responseMsg}}</h4>
+                                    <h4 class="header-line" v-if="formSubmitted">{{responseMsg}}</h4>
 
                                 </div>
                             </div>
@@ -624,7 +609,7 @@ <h4 class="headerline" v-if="formSubmitted">{{responseMsg}}</h4>
 
                 <div class="col-md-5 pull-right col-sm-6 col-xs-12">
                   <div v-show="!formSubmitted">
-                    <h4 class="headerline mr-b2">Tell us!</h4>
+                    <h4 class="header-line mr-b2">Tell us!</h4>
                     <form novalidate name="contactForm" action="#">
                       <div class="row">
                         <div class="col-sm-6">
@@ -664,7 +649,7 @@ <h4 class="headerline mr-b2">Tell us!</h4>
 
                     </form>
                   </div>
-                  <h4 class="headerline" v-if="formSubmitted">{{responseMsg}}</h4>
+                  <h4 class="header-line" v-if="formSubmitted">{{responseMsg}}</h4>
                 </div>
 
                 <div class="col-md-5 col-sm-6 col-xs-12">
@@ -672,7 +657,7 @@ <h4 class="headerline" v-if="formSubmitted">{{responseMsg}}</h4>
                 </div>
 
                 <div class="col-md-5 col-sm-6 col-xs-12" v-bind:class="{'mr-t4': isSmall}">
-                  <h4 class="headerline">Contact Us</h4>
+                  <h4 class="header-line">Contact Us</h4>
 
                   <div class="social">
                   </div>
@@ -680,7 +665,7 @@ <h4 class="headerline">Contact Us</h4>
                     <p>405-406, Capt. C. S. Naidu Arcade,</p>
                     <p>Near Greater Kailash Hospital, 10/2 Old Palasia,</p>
                     <p>Indore, Madhya Pradesh 452018</p>
-                    <p class="mrT3">Sales :
+                    <p class="mr-t3">Sales :
                       <a class="white" href="mailto:shubhendra@giddh.com">shubhendra@giddh.com</a>
                       <br /> Support :
                       <a class="white" href="mailto:support@giddh.com">support@giddh.com</a>
diff --git a/apps/web-giddh/webpack.partial.js b/apps/web-giddh/webpack.partial.js
index 3cff7a64d82..d54ecd2c1c4 100644
--- a/apps/web-giddh/webpack.partial.js
+++ b/apps/web-giddh/webpack.partial.js
@@ -10,7 +10,7 @@ module.exports = {
             'errlyticsNeeded': JSON.stringify(false),
             'errlyticsKey': JSON.stringify(''),
             'AppUrl': JSON.stringify('http://localhost:3000/'),
-            'ApiUrl': JSON.stringify('https://apirelease.giddh.com/'),
+            'ApiUrl': JSON.stringify('https://api.giddh.com/'),
             'APP_FOLDER': JSON.stringify(''),
             'PRODUCTION_ENV': JSON.stringify(false),
             'STAGING_ENV': JSON.stringify(false),
@@ -22,7 +22,7 @@ module.exports = {
             'process.env.errlyticsNeeded': JSON.stringify(false),
             'process.env.errlyticsKey': JSON.stringify(''),
             'process.env.AppUrl': JSON.stringify('http://localhost:3000/'),
-            'process.env.ApiUrl': JSON.stringify('https://apirelease.giddh.com/'),
+            'process.env.ApiUrl': JSON.stringify('https://api.giddh.com/'),
             'process.env.APP_FOLDER': JSON.stringify('')
         }),
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
diff --git a/cypress/integration/Giddh/06_TrailBalanace.js b/cypress/integration/Giddh/06_TrailBalanace.js
index f7dd3544aa5..a3cf4678bf6 100644
--- a/cypress/integration/Giddh/06_TrailBalanace.js
+++ b/cypress/integration/Giddh/06_TrailBalanace.js
@@ -40,7 +40,7 @@ describe('This is TrialBalance Search Test', () => {
             if (response.status === 201){
                 cy.globalSearch('.active.nav-item > .nav-link > span', 'trial balance', 'Trial Balance')
             }
-            cy.searchOnTrialBalance('uitest', '199.99')
+            cy.searchOnTrialBalance('uitest', '199')
         })
     });
 
@@ -52,7 +52,7 @@ describe('This is TrialBalance Search Test', () => {
             }
             cy.wait(2000)
             cy.navigateToTrialBalanceOptions('Profit & Loss');
-            cy.searchOnPLAndBS('.profitLoss > .clearfix > .col-4 > strong', 'Sales', '169')
+            cy.searchOnPLAndBS('.profit-loss > .clearfix > .col-4 > strong', 'Sales', '169')
         })
     });
 
diff --git a/package.json b/package.json
index d40f02f2454..30e65dafbf9 100644
--- a/package.json
+++ b/package.json
@@ -158,7 +158,7 @@
     "codelyzer": "~6.0.0",
     "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
-    "cypress": "^6.2.0",
+    "cypress": "6.2.0",
     "cypress-intellij-reporter": "0.0.4",
     "cypress-xpath": "^1.6.0",
     "dotenv": "8.2.0",