edit user profile changed to new version for admin support roles.

angular.json

                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumError": "30kb"
                 }
               ]
             }

package-lock.json

 {
   "name": "broker",
-  "version": "2.0.8",
+  "version": "2.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

 {
   "name": "broker",
-  "version": "2.0.8",
+  "version": "2.0.20",
   "scripts": {
     "ng": "ng",
     "versionIncrease": "npm --no-git-tag-version version patch",

src/app/app-routing.module.ts

 import {LoansAllComponent} from './loans-all/loans-all.component';
 import {RewardsAllComponent} from './rewards-all/rewards-all.component';
 import {PayOutDetailsComponent} from './pay-out-details/pay-out-details.component';
+import {ContactEditComponent} from './contact-edit/contact-edit.component';
+import {ContactModel} from './models/contact.model';
 
 
 const routes: Routes = [
   {path : 'list-income', component: ListIncomeComponent, canActivate: [AuthGuard] },
   {path : 'payout-details/:id', component: PayOutDetailsComponent, canActivate: [AuthGuard] },
   {path : 'reward-paid/:id', component: RewardPaidComponent, canActivate: [AuthGuard] },
+  {path:  'contact', component: ContactEditComponent, canActivate: [AuthGuard] },
+  {path : 'contact/:id', component: ContactEditComponent, canActivate: [AuthGuard] },
   {path : 'e403', component: E403Component },
 ];
 

src/app/app.module.ts

 import { NumberRangeFilterComponent } from './grid-filter/number-range-filter/number-range-filter.component';
 import { StringFilterComponent } from './grid-filter/string-filter/string-filter.component';
 import { DateFilterComponent } from './grid-filter/date-filter/date-filter.component';
+import { ContactEditComponent } from './contact-edit/contact-edit.component';
 
 
 
     NumberRangeFilterComponent,
     StringFilterComponent,
     DateFilterComponent,
+    ContactEditComponent,
   ],
     imports: [
         BrowserModule,

src/app/client-loan-list/client-loan-list.component.html

     </div>
   </div>
 </section>
-<section *ngIf="recentLoan.Id !== '' && Loans.length >=1" class="u-clearfix u-grey-10 u-section-3" id="carousel_f06f">
+<section *ngIf="recentLoan && recentLoan.Id !== '' && Loans.length >=1" class="u-clearfix u-grey-10 u-section-3" id="carousel_f06f">
   <div class="u-clearfix u-sheet u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-sheet-1">
     <h2 class="u-text u-text-1">Most Recent Loan Target<br>
     </h2>

src/app/contact-edit/contact-edit.component.html

+
+<app-message-box #messagebox (onClose)="onDialogClose($event)"></app-message-box>
+<section class="u-align-center-lg u-align-center-md u-align-center-xl u-align-left-sm u-align-left-xs u-clearfix">
+  <div class="u-clearfix u-sheet u-sheet-1">
+  <h1 class="u-text u-text-1">{{People.Display}}</h1>
+    <hr>
+</div>
+</section>
+
+<section *ngIf="ss.isAdmin()" class="u-align-center u-clearfix u-section-5" id="sec-453e">
+  <div class="u-clearfix u-sheet u-sheet-1">
+    <h4 class="u-text u-text-1">Roles and Features</h4>
+    <div class="u-expanded-width u-list u-list-1">
+      <div class="u-repeater u-repeater-1">
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-1">
+            <span class="u-icon u-icon-circle u-text-palette-1-base u-icon-1">
+              <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice"  viewBox="0 0 24 24" style="">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-54c8"></use>
+              </svg>
+              <svg class="u-svg-content" viewBox="0 0 24 24"  id="svg-54c8">
+                <g><path d="m21.5 21h-19c-1.378 0-2.5-1.122-2.5-2.5v-13c0-1.378 1.122-2.5 2.5-2.5h19c1.378 0 2.5 1.122 2.5 2.5v13c0 1.378-1.122 2.5-2.5 2.5zm-19-17c-.827 0-1.5.673-1.5 1.5v13c0 .827.673 1.5 1.5 1.5h19c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5z"></path></g>
+                <g><path d="m7.5 12c-1.378 0-2.5-1.122-2.5-2.5s1.122-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.122 2.5-2.5 2.5zm0-4c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5z"></path></g>
+                <g><path d="m11.5 17c-.276 0-.5-.224-.5-.5v-1c0-.827-.673-1.5-1.5-1.5h-4c-.827 0-1.5.673-1.5 1.5v1c0 .276-.224.5-.5.5s-.5-.224-.5-.5v-1c0-1.378 1.122-2.5 2.5-2.5h4c1.378 0 2.5 1.122 2.5 2.5v1c0 .276-.224.5-.5.5z"></path></g>
+                <g><path d="m20.5 9h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"></path></g>
+                <g><path d="m20.5 13h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"></path></g>
+                <g><path d="m20.5 17h-6c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h6c.276 0 .5.224.5.5s-.224.5-.5.5z"></path></g>
+              </svg>
+          </span>
+            <h3 class="u-align-center u-text u-text-2">People</h3>
+            <kendo-switch name="Enabled" [(ngModel)]="People.Enabled" (valueChange)="onEnableDisable()"></kendo-switch>
+            <p class="u-align-center u-text u-text-3">Anyone has a name, disable = stops login</p>
+          </div>
+        </div>
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-2">
+            <span class="u-icon u-icon-circle u-text-palette-1-base u-icon-2">
+              <svg class="u-svg-link"  preserveAspectRatio="xMidYMin slice" viewBox="0 0 64 64" style="">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-547d"></use>
+              </svg>
+              <svg class="u-svg-content"  viewBox="0 0 64 64" id="svg-547d">
+                <path  d="m40.87 58.14-3.86-19.32c-.31.12-.65.18-1.01.18-.83 0-1.58-.34-2.12-.88s-.88-1.29-.88-2.12v-1h-5-5v1l-4.87 22.14c-.48 1.58.42 3.26 2.01 3.73.28.09.57.13.86.13 1.31 0 2.5-.88 2.87-2.14l5.95-20.83c.91.79 1.55 1.86 1.79 3.07l3.52 17.76c.37 1.26 1.56 2.14 2.87 2.14.29 0 .58-.04.86-.13 1.59-.47 2.49-2.15 2.01-3.73z" fill="#838f9b"></path>
+                <g fill="#5cd6b3">
+                  <path d="m33 29v6h-5-5-6-12l-3-2v-2l3-2h17.98z"></path>
+                  <path d="m17 35v8h-4v-4h-4v4h-4v-8z"></path>
+                  <path d="m52 22c5.52 0 10 4.48 10 10s-4.48 10-10 10c-4.48 0-8.27-2.94-9.54-7h-3.46v-6h3.46c1.27-4.06 5.06-7 9.54-7zm6 10c0-1.66-1.34-3-3-3s-3 1.34-3 3 1.34 3 3 3 3-1.34 3-3z"></path>
+                </g>
+                <path d="m24.87 18.85c-1.17 1.39-1.88 3.18-1.88 5.14v.62c-6.17-2.53-9.99-8.2-9.99-13.61 0-1.65 1.35-3 3-3s3 1.35 3 3c0 2.98 2.32 6.19 5.87 7.85z" fill="#fcd770"></path>
+                <path d="m33.88 38.12c-.54-.54-.88-1.29-.88-2.12v-1-6h-10.02l.01-4.39v-.62c0-1.96.71-3.75 1.88-5.14 1.47-1.74 3.67-2.85 6.12-2.85 2.21 0 4.22.9 5.67 2.34 1.44 1.45 2.34 3.46 2.34 5.67v4.99 6 1c0 1.3-.83 2.41-1.99 2.82-.31.12-.65.18-1.01.18-.83 0-1.58-.34-2.12-.88z"            fill="#fcd770"></path>
+                <circle cx="30" cy="9" fill="#f0d0b4" r="7"></circle>
+                <path   d="m55 28c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"></path>
+                <path   d="m52 21c-4.581 0-8.611 2.784-10.249 7h-1.751v-3.994c0-3.76-2.318-6.986-5.599-8.332 2.166-1.433 3.599-3.888 3.599-6.674 0-4.411-3.589-8-8-8s-8 3.589-8 8c0 3.166 1.854 5.901 4.529 7.196-.679.39-1.305.86-1.858 1.407-2.774-1.529-4.671-4.155-4.671-6.603 0-2.206-1.794-4-4-4s-4 1.794-4 4c0 5.884 3.99 11.529 9.985 14.256l-.004 2.744h-17.284l-3.697 2.465v3.07l3 2v8.465h6v-4h2v4h6v-8h3.976l-4.808 21.853c-.632 2.112.571 4.346 2.681 4.978.374.112.761.169 1.151.169 1.752 0 3.328-1.172 3.836-2.864l5.41-18.964c.176.351.308.728.385 1.124l3.536 17.854c.505 1.678 2.081 2.85 3.833 2.85.39 0 .777-.057 1.15-.169 2.11-.632 3.313-2.866 2.704-4.888l-3.714-18.575c1.114-.711 1.86-1.951 1.86-3.368h1.751c1.638 4.216 5.668 7 10.249 7 6.065 0 11-4.935 11-11s-4.935-11-11-11zm-28-12c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6zm-10 2c0-1.103.897-2 2-2s2 .897 2 2c0 3.11 2.129 6.283 5.395 8.194-.726 1.142-1.209 2.453-1.357 3.864-4.793-2.509-8.038-7.286-8.038-12.058zm9.987 12.995c.006-3.857 3.149-6.995 7.006-6.995 3.863 0 7.007 3.143 7.007 7.006v11.994c0 1.103-.897 2-2 2s-2-.897-2-2v-10.859c0-1.676-.832-3.231-2.227-4.16l-1.219-.812-1.109 1.664 1.219.812c.837.557 1.336 1.49 1.336 2.496v2.859h-8.019zm-20.987 7.54 2.303-1.535h26.697v4h-26.697l-2.303-1.535zm13 10.465h-2v-4h-6v4h-2v-6h10zm23.916 16.426c.315 1.056-.285 2.173-1.341 2.489-1.033.31-2.188-.336-2.468-1.248l-3.513-17.76c-.448-2.266-2.087-4.126-4.278-4.857l-.633 1.897c.35.117.678.279.982.474l-5.749 20.152c-.308 1.026-1.455 1.652-2.492 1.341-1.055-.316-1.655-1.433-1.321-2.561l4.874-22.14.004-.213h8.019c0 2.206 1.794 4 4 4 .076 0 .147-.018.222-.023zm12.084-17.426c-3.952 0-7.403-2.532-8.587-6.3l-.22-.7h-3.193v-4h3.193l.22-.7c1.184-3.768 4.635-6.3 8.587-6.3 4.963 0 9 4.038 9 9s-4.037 9-9 9z"></path>
+              </svg>
+            </span>
+            <h3 class="u-align-center u-text u-text-4">User</h3>
+            <kendo-switch [(ngModel)]="featureUser" (valueChange)="onEnableFeatureUser()" [disabled]="!People.Enabled"></kendo-switch>
+            <p class="u-align-center u-text u-text-5">people + login to check their loan/rewards</p>
+          </div>
+        </div>
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-3">
+            <span class="u-icon u-icon-circle u-icon-3">
+              <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 480 480" style="">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-f767"></use>
+              </svg>
+              <svg class="u-svg-content" viewBox="0 0 480 480" x="0px" y="0px"  id="svg-f767" style="enable-background:new 0 0 480 480;">
+                <g>
+                  <g><path d="M212.001,32c-13.255,0-24,10.745-24,24c0.014,13.249,10.751,23.986,24,24c13.255,0,24-10.745,24-24S225.256,32,212.001,32    z M212.001,64c-4.418,0-8-3.582-8-8c0.006-4.416,3.584-7.994,8-8c4.418,0,8,3.582,8,8S216.419,64,212.001,64z"></path></g>
+                </g>
+                <g>
+                  <g><path d="M340.001,128h-256c-4.418,0-8,3.582-8,8v176c0,4.418,3.582,8,8,8h256c4.418,0,8-3.582,8-8V136    C348.001,131.582,344.419,128,340.001,128z M252.001,304h-80v-40.781c0.013-12.818,10.401-23.206,23.219-23.219h33.563    c12.818,0.013,23.206,10.401,23.219,23.219V304z M188.001,200c0-13.255,10.745-24,24-24s24,10.745,24,24    c-0.014,13.249-10.751,23.986-24,24C198.746,224,188.001,213.255,188.001,200z M332.001,304h-64v-40.781    c-0.052-16.579-10.541-31.329-26.184-36.821c14.727-16.467,13.316-41.755-3.151-56.482c-16.467-14.727-41.755-13.316-56.482,3.151    c-13.579,15.184-13.579,38.147,0,53.331c-15.643,5.493-26.131,20.242-26.183,36.821V304h-64V144h240V304z"></path></g>
+               </g>
+                <g>
+                  <g><rect x="76.001" y="336" width="120" height="16"></rect></g>
+                </g>
+                <g>
+                  <g><rect x="212.001" y="336" width="48" height="16"></rect></g>
+                </g>
+                <g>
+                  <g><rect x="76.001" y="384" width="192" height="16"></rect></g>
+                </g>
+                <g>
+                  <g><rect x="276.001" y="336" width="32" height="16"></rect></g>
+                </g>
+                <g>
+                  <g><path d="M449.657,330.344l-24-24c-3.121-3.124-8.183-3.126-11.307-0.005c-0.211,0.211-0.409,0.433-0.595,0.665l-17.754,22.191V56    c0-4.418-3.582-8-8-8H268.95l6.926-38.586c0.781-4.349-2.112-8.508-6.462-9.288C268.948,0.042,268.475,0,268.001,0h-112    C151.582,0,148,3.582,148,8.001c0,0.474,0.042,0.947,0.126,1.413L155.052,48H36.001c-4.418,0-8,3.582-8,8v416c0,4.418,3.582,8,8,8    h352c4.418,0,8-3.582,8-8v-66.889l54.105-63.943C452.794,337.992,452.598,333.286,449.657,330.344z M258.438,16l-14.359,80    h-64.156l-14.359-80H258.438z M380.001,464h-336V64h113.922l7.433,41.414c0.684,3.813,4.002,6.587,7.875,6.586h77.539    c3.874,0.001,7.191-2.773,7.875-6.586L266.078,64h113.922v285.195l-24.664,30.829l-17.68-17.68    c-3.122-3.124-8.186-3.125-11.309-0.003c-0.001,0.001-0.002,0.002-0.003,0.003l-24,24c-3.124,3.122-3.125,8.186-0.003,11.309    c0.001,0.001,0.002,0.002,0.003,0.003l48,48c1.5,1.501,3.535,2.344,5.656,2.344l0.332-0.008c2.234-0.093,4.328-1.117,5.773-2.824    l17.895-21.148V464z M355.509,428.195L319.313,392l12.688-12.688l18.344,18.344c1.615,1.599,3.828,2.445,6.098,2.332    c2.273-0.126,4.384-1.214,5.805-2.992l58.418-73.02l12.473,12.477L355.509,428.195z"></path></g>
+                </g>
+                <g>
+                  <g><rect x="76.001" y="432" width="72" height="16"></rect></g>
+                </g>
+                <g>
+                  <g><rect x="164.001" y="432" width="128" height="16"></rect></g>
+                </g>
+              </svg>
+          </span>
+            <h3 class="u-align-center u-text u-text-6">Broker</h3>
+            <kendo-switch [(ngModel)]="featureBroker" (valueChange)="onEnableFeatureBroker()" [disabled]="!People.Enabled || !featureUser"></kendo-switch>
+            <p class="u-align-center u-text u-text-7">user + has loans to manage</p>
+          </div>
+        </div>
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-4">
+            <span class="u-icon u-icon-circle u-text-palette-1-base u-icon-4">
+              <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 128 128" style="">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-4fee"></use>
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 128 128" id="svg-4fee">
+                <path d="m119.4 104.8-17.8-30.8c1.6-1.3 2.5-3.4 2.4-5.6l-1.3-10.7 7.4-7.6c2.3-2.3 2.4-6.1 0.2-8.8l-7.4-7.9 1.5-10.8c0.3-3.2-2-6.4-5.2-7l-10.7-2.1-5.2-9.4c-1.1-2.2-3.3-3.5-5.8-3.5-0.8 0-1.5 0.1-2.3 0.4l-10.4 4.4-9.6-4.6c-0.9-0.5-1.9-0.7-3-0.7-0.6 0-1.3 0.1-1.9 0.3-1.6 0.5-2.9 1.5-3.8 3l-5.3 9.4-10.7 1.9c-3.4 0.6-5.7 3.7-5.4 7.1l1.3 10.7-7.4 7.6c-2.3 2.3-2.4 6.1-0.2 8.8l7.4 7.9-1.5 10.8c-0.3 2.3 0.8 4.6 2.7 5.9l-17.9 31.3c-0.7 1.1-0.7 2.6-0.1 3.9v0.1l0.1 0.1c0.8 1.2 2 1.9 3.4 1.9h19.2l8.7 14.9c0.8 1.2 2 1.9 3.4 1.9s2.8-0.8 3.5-2l16.6-27.9 16.8 28.3c0.8 1.2 2 1.9 3.4 1.9s2.8-0.8 3.5-2l8.7-15.3h19.2c1.4 0 2.7-0.8 3.4-1.9 0.9-1.1 0.9-2.7 0.1-3.9zm-34.9 11.3-17.9-30.5 7.4 3.6c0.9 0.4 1.8 0.6 2.9 0.6 2.4 0 4.6-1.2 5.7-3.2l5.3-9.4 5.8-1 15.4 26.6h-14.7c-1.4 0-2.8 0.8-3.5 2l-6.4 11.3zm-40-0.3-6.5-11c-0.8-1.2-2-1.9-3.4-1.9h-14.8l15.5-27 5.4 0.9 5.2 9.3c1.1 2.2 3.3 3.5 5.8 3.5 0.8 0 1.5-0.1 2.3-0.4l0.5-0.1 3.9-1.8 1.4 2.4-15.3 26.1zm-11.9-78.1c1.4-1.4 2.1-3.4 1.8-5.3l-1.2-10 10.2-1.8c1.9-0.3 3.6-1.6 4.6-3.2l4.9-8.8 9 4.3c0.9 0.5 1.9 0.7 2.9 0.7s2-0.2 2.9-0.7l9.2-4.1 4.9 9.1c1.1 1.7 2.7 2.9 4.5 3.1l10 1.9-1.4 10c-0.3 1.9 0.3 4 1.7 5.3l6.9 7.3-7 7.1c-1.5 1.4-2.1 3.4-1.8 5.3l1.2 9.9-9.9 1.6c-2 0.3-3.7 1.6-4.6 3.2l-4.9 8.8-9-4.3c-0.9-0.5-1.9-0.7-2.9-0.7s-2 0.2-2.9 0.7l-9.2 4.2-4.9-9c-1.1-1.7-2.8-2.9-4.6-3.1l-10.1-1.8 1.4-10c0.3-1.9-0.3-4-1.7-5.3l-6.8-7.4 6.8-7z"></path>
+                <path d="m64.5 71c14.7 0 26.6-11.7 26.6-26.2 0-14.4-11.9-26.2-26.6-26.2s-26.6 11.7-26.6 26.2 11.9 26.2 26.6 26.2zm0-44.4c10.2 0 18.6 8.2 18.6 18.3s-8.3 18.3-18.6 18.3c-10.2 0-18.6-8.2-18.6-18.3s8.4-18.3 18.6-18.3z"></path>
+              </svg>
+            </span>
+            <h3 class="u-align-center u-text u-text-8">Admin</h3>
+            <kendo-switch [(ngModel)]="roleAdmin" (valueChange)="onEnableRoleAdmin()"></kendo-switch>
+            <p class="u-align-center u-text u-text-9">Manage everything</p>
+          </div>
+        </div>
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-5">
+            <span class="u-icon u-icon-circle u-text-palette-1-base u-icon-5">
+              <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 128 128" style="">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-7adb"></use>
+              </svg>
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 128 128" id="svg-7adb">
+                <path d="m117.4 76c1.5 0 2.7 1.2 2.7 2.7v38.7c0 1.5-1.2 2.7-2.7 2.7h-38.7c-1.5 0-2.7-1.2-2.7-2.7v-38.7c0-1.5 1.2-2.7 2.7-2.7h38.7m0-7.9h-38.7c-5.8 0-10.6 4.8-10.6 10.6v38.7c0 5.8 4.8 10.6 10.6 10.6h38.7c5.8 0 10.6-4.8 10.6-10.6v-38.7c0-5.8-4.8-10.6-10.6-10.6z"></path>
+                <path d="m49.3 7.9c1.5 0 2.7 1.2 2.7 2.7v38.7c0 1.5-1.2 2.7-2.7 2.7h-38.7c-1.5 0-2.7-1.2-2.7-2.7v-38.7c0-1.5 1.2-2.7 2.7-2.7h38.7m0-7.9h-38.7c-5.8 0-10.6 4.8-10.6 10.6v38.7c0 5.8 4.8 10.6 10.6 10.6h38.7c5.8 0 10.6-4.8 10.6-10.6v-38.7c0-5.8-4.8-10.6-10.6-10.6z"></path>
+                <path d="m90 7.9c0.7 0 1.4 0.3 1.9 0.8l27.4 27.4c1 1 1 2.7 0 3.8l-27.4 27.3c-0.5 0.5-1.2 0.8-1.9 0.8s-1.4-0.3-1.9-0.8l-27.3-27.3c-1-1-1-2.7 0-3.8l27.3-27.4c0.6-0.5 1.3-0.8 1.9-0.8m0-7.9c-2.8 0-5.5 1.1-7.5 3.1l-27.3 27.4c-2 2-3.1 4.7-3.1 7.5s1.1 5.5 3.1 7.5l27.4 27.4c2 2 4.7 3.1 7.5 3.1s5.5-1.1 7.5-3.1l27.4-27.4c2-2 3.1-4.7 3.1-7.5s-1.1-5.5-3.1-7.5l-27.5-27.4c-2-2-4.6-3.1-7.5-3.1z"></path>
+                <path d="m49.3 76c1.5 0 2.7 1.2 2.7 2.7v38.7c0 1.5-1.2 2.7-2.7 2.7h-38.7c-1.5 0-2.7-1.2-2.7-2.7v-38.7c0-1.5 1.2-2.7 2.7-2.7h38.7m0-7.9h-38.7c-5.8 0-10.6 4.8-10.6 10.6v38.7c0 5.8 4.8 10.6 10.6 10.6h38.7c5.8 0 10.6-4.8 10.6-10.6v-38.7c0-5.8-4.8-10.6-10.6-10.6z"></path>
+              </svg>
+            </span>
+            <h3 class="u-align-center u-text u-text-10">Manager</h3>
+            <kendo-switch [(ngModel)]="roleManager" (valueChange)="onEnableRoleManager()"></kendo-switch>
+            <p class="u-align-center u-text u-text-11">See reports, manage other users</p>
+          </div>
+        </div>
+        <div class="u-align-center u-border-2 u-border-palette-3-light-2 u-container-style u-list-item u-repeater-item">
+          <div class="u-container-layout u-similar-container u-container-layout-6">
+            <span class="u-icon u-icon-circle u-text-palette-1-base u-icon-6">
+              <svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 128 128" style="">
+                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-0309"></use>
+              </svg>
+               <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 128 128" id="svg-0309">
+                 <path d="m102.7 39.2c0.8 0 1.5 0.3 2.1 0.9l7.8 7.8c4.8 4.8 7.7 11.5 7.4 18.3-0.6 12.6-11 22.6-23.7 22.6h-29c-0.1 0-0.1-0.1-0.1-0.2 1.1-3 4.1-5.2 7.5-5.2h10.5c0.9 0 1.8-0.4 2.3-1.1 0.8-1.1 0.7-2.6-0.3-3.5l-24.9-24.8c-0.6-0.6-0.9-1.3-0.9-2.1s0.3-1.5 0.9-2.1 1.3-0.8 2.1-0.8 1.5 0.3 2.1 0.8l16.9 16.9c0.5 0.5 1.2 0.8 1.9 0.8s1.4-0.3 1.9-0.8 0.8-1.2 0.8-1.9-0.3-1.4-0.8-1.9l-6.7-6.7c-0.6-0.6-0.9-1.3-0.9-2.1s0.3-1.5 0.9-2.1 1.3-0.8 2.1-0.8 1.5 0.3 2.1 0.8l4 4c0.5 0.5 1.2 0.8 1.9 0.8s1.4-0.3 1.9-0.8 0.8-1.2 0.8-1.9-0.3-1.4-0.8-1.9l-2.7-2.7c-0.5-0.5-0.8-1.2-0.8-2s0.3-1.5 0.9-2.1 1.3-0.9 2.1-0.9 1.5 0.3 2.1 0.9l2.7 2.7c0.5 0.5 1.2 0.8 1.9 0.8s1.4-0.3 1.9-0.8 0.8-1.2 0.8-1.9-0.2-1.3-0.7-1.8c-0.8-0.9-1.2-2.1-0.8-3.3 0.5-1.3 1.6-1.9 2.8-1.9m0-8c-2.9 0-5.7 1.1-7.8 3.2-0.7 0.7-1.2 1.4-1.7 2.1 0 0-0.1 0.1-0.1 0-0.4 0-0.8-0.1-1.1-0.1-2.9 0-5.7 1.1-7.8 3.2-1 1-1.8 2.2-2.3 3.4 0 0 0 0.1-0.1 0.1-2.6 0.2-5.1 1.3-6.9 3.2l-0.2 0.2-2.5-2.5c-2-2-4.9-3.2-7.8-3.2s-5.7 1.1-7.8 3.2-3.2 4.9-3.2 7.8c0 3 1.2 5.7 3.2 7.8l15.8 15.8c0.1 0.1 0 0.2-0.1 0.2-5.8 0.8-10.8 4.8-12.8 10.5-1.9 5.2 2 10.7 7.5 10.7h29.1c8.5 0 16.4-3.3 22.4-9.3 6.1-6.1 9.4-14.3 9.3-23-0.1-8.4-3.8-16.4-9.8-22.4l-7.8-7.8c-1.8-2-4.6-3.1-7.5-3.1z"></path>
+                 <path d="m82.1 118c0 1.1-0.9 2-2 2h-70.2c-1.1 0-2-0.9-2-2v-108c0-1.1 0.9-2 2-2h70.1c1.1 0 2 0.9 2 2v16.9c0 2.2 1.8 4 4 4s4-1.8 4-4v-16.9c0-5.5-4.5-10-9.9-10h-70.2c-5.4 0-9.9 4.5-9.9 10v108c0 5.5 4.5 10 9.9 10h70.1c5.5 0 9.9-4.5 9.9-10v-10.6c0-2.2-1.8-4-4-4s-4 1.8-4 4v10.6z"></path>
+               </svg>
+            </span>
+            <h3 class="u-align-center u-text u-text-12">Accountant</h3>
+            <kendo-switch [(ngModel)]="roleAccountant" (valueChange)="onEnableRoleAccountant()"></kendo-switch>
+            <p class="u-align-center u-text u-text-13">Approve reward and invoice</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="u-align-center-lg u-align-center-md u-align-center-xl u-align-left-sm u-align-left-xs u-clearfix u-white u-section-1" id="carousel_6d9a">
+  <div class="u-clearfix u-sheet u-sheet-1">
+    <div class="u-clearfix u-expanded-width u-gutter-20 u-layout-wrap u-white u-layout-wrap-1">
+      <div class="u-layout">
+        <div class="u-layout-row">
+          <div class="u-align-left u-container-style u-layout-cell u-shape-rectangle u-size-30 u-layout-cell-1">
+            <div class="u-container-layout u-valign-top-md u-valign-top-sm u-valign-top-xs u-container-layout-1 avatar-info">
+              <div *ngIf="People.Id !=='1' " class="dropzone-wrapper k-cursor-pointer ">
+                <div class="fileselect-wrapper">
+                  <div class="row justify-content-center" (click)="startSelectAvatar()">
+                    <div #peoplePhoto class="people-photo" [ngStyle]="{'background-image' : avatarUrl }"></div>
+                  </div>
+
+                  <kendo-fileselect
+                    #fileSelect
+                    zoneId="myZone"
+                    name="selectAvatar"
+                    [restrictions]="myRestrictions"
+                    [showFileList]="false"
+                    (select)="onSelectAvatar($event)"
+                  >
+                  </kendo-fileselect>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="u-container-style u-layout-cell u-size-30 u-layout-cell-2">
+            <div *ngIf="People.Id ==='' " class="newlabel">NEW</div>
+            <div class="u-container-layout u-container-layout-2 common-info">
+              <kendo-formfield>
+                <kendo-label [for]="First" text="First Name "></kendo-label>
+                <kendo-textbox kendoTextBox #First name="First" [(ngModel)]="People.First"
+                ></kendo-textbox>
+                <kendo-formerror>First name is required</kendo-formerror>
+              </kendo-formfield>
+              <div class="vertical-spacer"></div>
+
+              <kendo-formfield>
+                <kendo-label [for]="Middle" text="Middle Name "></kendo-label>
+                <kendo-textbox kendoTextBox #Middle name="Last" [(ngModel)]="People.Middle"
+                ></kendo-textbox>
+                <kendo-formerror>Last Name is required</kendo-formerror>
+              </kendo-formfield>
+
+              <kendo-formfield>
+                <kendo-label [for]="Last" text="Last Name "></kendo-label>
+                <kendo-textbox kendoTextBox #Last name="Last" [(ngModel)]="People.Last"
+                ></kendo-textbox>
+                <kendo-formerror>Last Name is required</kendo-formerror>
+              </kendo-formfield>
+
+              <kendo-formfield>
+                <kendo-label [for]="Title" text="Title "></kendo-label>
+                <kendo-textbox kendoTextBox #Title name="Last" [(ngModel)]="People.Title"
+                               placeholder="Mr/Mrs/Miss/Ms/Dr/Prof"
+                ></kendo-textbox>
+                <kendo-formerror>Title is needed</kendo-formerror>
+              </kendo-formfield>
+
+
+              <kendo-formfield>
+                <kendo-label [for]="Display" text="Display As"></kendo-label>
+                <kendo-textbox #Display name="Display" [(ngModel)]="People.Display"
+                               required [minlength]="3" [maxlength]="120"
+                ></kendo-textbox>
+                <kendo-formerror>Display name cannot empty</kendo-formerror>
+              </kendo-formfield>
+
+              <kendo-formfield *ngIf="People.Enabled && featureUser">
+                <kendo-label [for]="Login" text="Login Id (unique email) "></kendo-label>
+                <kendo-textbox #Login name="Login" [(ngModel)]="People.Login"
+                               email [minlength]="3" [maxlength]="120"
+                ></kendo-textbox>
+                <kendo-formerror>Login should be email format</kendo-formerror>
+              </kendo-formfield>
+
+              <div *ngIf="People.Enabled && featureUser && People.Id !== ''" class="change-password">
+                <app-change-password *ngIf="featureUser" #changePassword  [PeopleId]="People.Id" ></app-change-password>
+              </div>
+
+
+
+              <kendo-formfield class="enable-people">
+                Enable&nbsp;<kendo-switch name="Enabled" [(ngModel)]="People.Enabled" (valueChange)="onEnableDisable()"
+              ></kendo-switch>
+
+              </kendo-formfield>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="u-clearfix u-grey-5 u-section-2" id="carousel_c41f">
+  <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
+    <div class="u-list u-list-1">
+      <div class="u-repeater u-repeater-1">
+        <div class="u-container-style u-grey-75 u-list-item u-repeater-item u-list-item-1">
+          <div class="u-container-layout u-similar-container u-container-layout-1"><span
+            class="u-icon u-icon-circle u-text-white u-icon-1"><svg class="u-svg-link"
+                                                                    preserveAspectRatio="xMidYMin slice"
+                                                                    viewBox="0 0 513.64 513.64" style=""><use
+            xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-d5b6"></use></svg><svg
+            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+            xml:space="preserve" class="u-svg-content" viewBox="0 0 513.64 513.64" x="0px" y="0px" id="svg-d5b6"
+            style="enable-background:new 0 0 513.64 513.64;"><g><g><path d="M499.66,376.96l-71.68-71.68c-25.6-25.6-69.12-15.359-79.36,17.92c-7.68,23.041-33.28,35.841-56.32,30.72    c-51.2-12.8-120.32-79.36-133.12-133.12c-7.68-23.041,7.68-48.641,30.72-56.32c33.28-10.24,43.52-53.76,17.92-79.36l-71.68-71.68    c-20.48-17.92-51.2-17.92-69.12,0l-48.64,48.64c-48.64,51.2,5.12,186.88,125.44,307.2c120.32,120.32,256,176.641,307.2,125.44    l48.64-48.64C517.581,425.6,517.581,394.88,499.66,376.96z"></path>
+</g>
+</g></svg></span>
+            <h5 class="u-text u-text-1">Phone(s)</h5>
+            <kendo-textarea
+              [(ngModel)]="People.defaultContact.Phone"
+              [placeholder]="'1 (234) 567-891,\n1 (234) 987-654'"
+              [rows]="3"
+              [cols]="40"
+              [maxlength]="128"
+              resizable="none"
+            ></kendo-textarea>
+          </div>
+        </div>
+        <div class="u-container-style u-grey-75 u-list-item u-repeater-item u-list-item-2">
+          <div class="u-container-layout u-similar-container u-container-layout-2"><span
+            class="u-icon u-icon-circle u-icon-2"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice"
+                                                       viewBox="0 0 512 512" style=""><use
+            xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-2020"></use></svg><svg class="u-svg-content"
+                                                                                               viewBox="0 0 512 512"
+                                                                                               x="0px" y="0px"
+                                                                                               id="svg-2020"
+                                                                                               style="enable-background:new 0 0 512 512;"><g><g><path
+            d="M405.333,213.874V106.667c0-23.531-19.135-42.667-42.667-42.667h-320C19.135,64,0,83.135,0,106.667V320    c0,23.531,19.135,42.667,42.667,42.667h239.215C295.858,411.84,341.073,448,394.667,448c20.625,0,40.906-5.427,58.677-15.708    c5.094-2.948,6.844-9.469,3.885-14.573c-2.948-5.104-9.479-6.865-14.573-3.885c-14.521,8.396-31.115,12.833-47.99,12.833    c-52.938,0-96-43.063-96-96s43.063-96,96-96s96,43.063,96,96v10.667c0,11.76-9.573,21.333-21.333,21.333    c-11.76,0-21.333-9.573-21.333-21.333v-42.667c0-5.896-4.771-10.667-10.667-10.667c-2.869,0-5.447,1.161-7.362,3    c-9.428-8.401-21.714-13.667-35.305-13.667c-29.406,0-53.333,23.927-53.333,53.333S365.26,384,394.667,384    c15.896,0,30.03-7.131,39.81-18.202c7.727,10.977,20.44,18.202,34.857,18.202C492.865,384,512,364.865,512,341.333v-10.667    C512,269.569,465.044,219.288,405.333,213.874z M42.667,85.333h320c0.444,0,0.816,0.227,1.254,0.254L211.438,210.75    c-5.427,3.417-13.292,2.708-16.823,0.542L41.426,85.585C41.859,85.559,42.227,85.333,42.667,85.333z M384,213.874    c-59.711,5.414-106.667,55.695-106.667,116.793c0,3.6,0.221,7.148,0.54,10.667H42.667c-11.76,0-21.333-9.573-21.333-21.333    V106.667c0-3.021,0.667-5.874,1.805-8.48l158.883,130.293c6.208,4.052,13.344,6.188,20.646,6.188    c7.021,0,13.885-1.979,19.927-5.729c0.604-0.323,1.177-0.708,1.719-1.156l157.88-129.598c1.139,2.608,1.807,5.461,1.807,8.483    V213.874z M394.667,362.667c-17.646,0-32-14.354-32-32c0-17.646,14.354-32,32-32s32,14.354,32,32    C426.667,348.313,412.313,362.667,394.667,362.667z"></path>
+</g>
+</g></svg></span>
+            <h5 class="u-text u-text-3">Email (other)</h5>
+            <kendo-textarea
+              [(ngModel)]="People.defaultContact.Email"
+              [placeholder]="'my.friend@email.com\nother.user.login@email.com'"
+              [rows]="3"
+              [cols]="40"
+              [maxlength]="128"
+              resizable="none"
+            ></kendo-textarea>
+          </div>
+        </div>
+        <div class="u-container-style u-grey-75 u-list-item u-repeater-item u-list-item-3">
+          <div class="u-container-layout u-similar-container u-container-layout-3"><span
+            class="u-icon u-icon-circle u-icon-3"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice"
+                                                       viewBox="0 0 512 512" style=""><use
+            xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-67e2"></use></svg><svg class="u-svg-content"
+                                                                                               viewBox="0 0 512 512"
+                                                                                               id="svg-67e2"><g><path
+            d="m407.579 87.677c-31.073-53.624-86.265-86.385-147.64-87.637-2.62-.054-5.257-.054-7.878 0-61.374 1.252-116.566 34.013-147.64 87.637-31.762 54.812-32.631 120.652-2.325 176.123l126.963 232.387c.057.103.114.206.173.308 5.586 9.709 15.593 15.505 26.77 15.505 11.176 0 21.183-5.797 26.768-15.505.059-.102.116-.205.173-.308l126.963-232.387c30.304-55.471 29.435-121.311-2.327-176.123zm-151.579 144.323c-39.701 0-72-32.299-72-72s32.299-72 72-72 72 32.299 72 72-32.298 72-72 72z"></path>
+</g></svg></span>
+            <h5 class="u-text u-text-5">Visit</h5>
+            <kendo-textarea
+              [(ngModel)]="People.defaultContact.Address"
+              [placeholder]="'121 Rock Sreet, \nSydney, NSW, \nAustralia 2000'"
+              [rows]="3"
+              [cols]="40"
+              [maxlength]="1024"
+              resizable="none"
+            ></kendo-textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="u-align-center u-clearfix u-section-3" id="carousel_54d7">
+  <div class="u-clearfix u-sheet u-sheet-1">
+    <div class="u-clearfix u-gutter-8 u-layout-wrap u-layout-wrap-1">
+      <div class="u-gutter-0 u-layout">
+        <div class="u-layout-row">
+          <div class="u-align-center u-container-style u-layout-cell u-left-cell u-size-60 u-white u-layout-cell-1">
+            <div class="u-border-2 u-border-grey-15 u-container-layout u-container-layout-1">
+              <h2 class="u-text u-text-grey-70 u-text-1">Description</h2>
+              <kendo-editor #Description name="description" style="height: 200px;" [(ngModel)]="People.defaultContact.Description"></kendo-editor>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section *ngIf="featureBroker" class="u-clearfix u-section-4" id="carousel_b903">
+  <img class="u-expanded-width u-image u-image-default u-image-1" alt="" data-image-width="1125"
+       data-image-height="1500" src="../../assets/img/page/geogrey.jpeg">
+  <div class="u-container-style u-grey-5 u-group u-group-1">
+    <div class="u-container-layout u-valign-top u-container-layout-1">
+      <h6 class="u-custom-font u-text u-text-font u-text-1">Broker Specific</h6>
+      <div class="broker-details">
+        <kendo-formfield>
+          <kendo-label [for]="License" text="License"></kendo-label>
+          <kendo-textbox #License  name="License" [(ngModel)]="People.Broker.License" required [minlength]="3" [maxlength]="120"
+          > </kendo-textbox>
+          <kendo-formerror>license is required, key in unknown if have one</kendo-formerror>
+        </kendo-formfield>
+        <div class="vertical-spacer"></div>
+
+        <kendo-formfield>
+          <kendo-label [for]="BSB" text="BSB"></kendo-label>
+          <kendo-textbox #BSB  name="BSB" [(ngModel)]="People.Broker.BSB" required [minlength]="3" [maxlength]="7"
+          > </kendo-textbox>
+          <kendo-formerror>BSB required for accepting payment</kendo-formerror>
+        </kendo-formfield>
+        <div class="vertical-spacer"></div>
+
+        <kendo-formfield>
+          <kendo-label [for]="ACC" text="ACC"></kendo-label>
+          <kendo-textbox #ACC  name="ACC" [(ngModel)]="People.Broker.ACC" required [minlength]="3" [maxlength]="11"
+          > </kendo-textbox>
+          <kendo-formerror>ACC is required for accepting payment</kendo-formerror>
+        </kendo-formfield>
+        <div class="vertical-spacer"></div>
+
+        <kendo-formfield>
+          <kendo-label [for]="Organization" text="Organization"></kendo-label>
+          <kendo-textbox #Organization  name="Organization" [(ngModel)]="People.Broker.Organization" required
+                         [disabled]="!ss.isAdmin()" [minlength]="3" [maxlength]="25"
+          >
+          </kendo-textbox>
+          <kendo-formerror>Organization is required, (only changed by admin)</kendo-formerror>
+        </kendo-formfield>
+      </div>
+    </div>
+  </div>
+</section>
+
+<kendo-floatingactionbutton
+  icon="save"
+  [dialItems]="actionItems"
+  [align]="{ horizontal: 'end', vertical: 'bottom' }"
+  (open)="onDialOpen()"
+  (close)="onDialClose()"
+  (dialItemClick) = "onFloatButtonAction($event)"
+>
+</kendo-floatingactionbutton>

src/app/contact-edit/contact-edit.component.scss

+section {
+  display:block;
+}
+
+.u-clearfix:after,.u-clearfix:before {
+  content:'';
+  display:table;
+}
+.u-clearfix:after {
+  clear:both;
+}
+.u-backlink {
+  position:relative;
+  text-align:center;
+  padding:1em;
+}
+.u-backlink a,.u-backlink p {
+  display:inline-block;
+}
+.u-backlink span {
+  font-size:0.8rem;
+}
+.u-backlink .u-link {
+  text-decoration:underline;
+}
+.u-backlink span,.u-backlink .u-link:hover {
+  text-decoration:none;
+}
+.u-image {
+  object-fit:cover;
+  display:block;
+  vertical-align:middle;
+  background-size:cover;
+  background-position:50% 50%;
+  background-repeat:no-repeat;
+}
+img.u-image {
+  overflow:hidden;
+}
+.u-sheet {
+  position:relative;
+  width:1140px;
+  margin:0 auto;
+}
+.u-container-layout {
+  position:relative;
+  flex:1;
+  max-width:100%;
+}
+.u-container-layout > * {
+  position:relative;
+}
+.u-expanded-width {
+  width:100% !important;
+  margin-left:0 !important;
+  margin-right:0 !important;
+}
+.u-valign-middle,.u-valign-top {
+  display:flex;
+  flex-direction:column;
+}
+.u-valign-middle > *,.u-valign-top > * {
+  flex-shrink:0;
+}
+.u-valign-middle {
+  justify-content:center;
+}
+.u-valign-top {
+  justify-content:flex-start;
+}
+.u-layout-row > .u-size-60 {
+  flex:0 0 100%;
+  max-width:100%;
+}
+.u-layout-row > .u-size-30 {
+  flex:0 0 50%;
+  max-width:50%;
+}
+.u-gutter-20 .u-layout {
+  margin:-10px;
+}
+.u-gutter-20 .u-layout .u-layout-cell {
+  border:10px solid transparent;
+}
+.u-gutter-8 .u-layout {
+  margin:-4px;
+}
+.u-gutter-8 .u-layout .u-layout-cell {
+  border:4px solid transparent;
+}
+.u-layout-row {
+  display:flex;
+}
+.u-layout-row {
+  flex:1 1 100%;
+}
+.u-layout-row > * {
+  max-height:100%;
+  min-height:-webkit-fit-content;
+  min-height:fit-content;
+}
+.u-layout-row {
+  flex-direction:row;
+  flex-wrap:wrap;
+  min-height:100%;
+  max-width:100%;
+}
+.u-layout-cell {
+  position:relative;
+  display:flex;
+  background-clip:padding-box;
+  background-origin:padding-box;
+}
+.u-sheet:not(.u-image):not(.u-video) {
+  pointer-events:none;
+}
+.u-sheet:not(.u-image):not(.u-video) > * {
+  pointer-events:auto;
+  pointer-events:initial;
+}
+
+.u-group .u-container-layout > * {
+  position:relative;
+}
+.u-group {
+  display:flex;
+}
+[class*="u-border-"]:not(.u-shape-svg) {
+  stroke:none;
+}
+.u-icon {
+  display:block;
+  line-height:0;
+  border-width:0px;
+}
+.u-svg-link {
+  width:100%;
+  height:100%;
+  fill:currentColor;
+}
+.u-svg-content {
+  width:0;
+  height:0;
+}
+.u-icon-circle {
+  border-radius:50%;
+}
+
+.u-body {
+  font-size:1rem;
+  line-height:1.6;
+}
+.u-body h1,.u-body h2,.u-body h3,.u-body h5,.u-body h6 {
+  padding:0;
+}
+
+.u-align-left {
+  text-align:left;
+}
+.u-align-center {
+  text-align:center;
+}
+.u-repeater-item:not([class*="u-align-"]),.u-container-style:not([class*="u-align-"]) {
+  text-align:left;
+}
+.u-text {
+  word-wrap:break-word;
+  position:relative;
+}
+.u-layout-cell {
+  background-color:transparent !important;
+  opacity:1;
+}
+.u-layout-cell:before {
+  content:'';
+  display:block;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  right:0;
+}
+.u-repeater {
+  display:grid;
+  grid-template-columns:repeat(3, 33.33333333%);
+}
+.u-repeater-item {
+  display:flex;
+  position:relative;
+}
+.u-list:not(.u-repeater) {
+  display:flex;
+  flex-direction:column;
+}
+.u-list:not(.u-repeater) .u-repeater {
+  flex:1;
+}
+[class*="u-border-"] {
+  border-style:solid;
+}
+.u-border-2 {
+  border-width:2px;
+}
+.u-body {
+  font-family:'Open Sans',sans-serif;
+}
+h1,h2,h3,h5,h6 {
+  font-family:Oswald,sans-serif;
+}
+.u-image {
+  color:#111111;
+}
+.u-body {
+  color:#111111;
+  background-color:#ffffff;
+}
+.u-custom-font.u-text-font {
+  font-family:'Open Sans',sans-serif !important;
+}
+.u-white,.u-container-style.u-white:before {
+  color:#111111;
+  background-color:#ffffff;
+}
+.u-grey-5,.u-container-style.u-grey-5:before {
+  color: #878787;
+  background-color:#f2f2f2;
+}
+.u-grey-75,.u-container-style.u-grey-75:before {
+  color:#ffffff;
+  background-color:#e0e0e0;
+}
+.u-grey-80 {
+  color:#ffffff;
+  background-color:#333333;
+}
+.u-border-palette-3-light-2 {
+  border-color:#f9e79b;
+  stroke:#f9e79b;
+}
+.u-border-grey-15 {
+  border-color:#d9d9d9;
+  stroke:#d9d9d9;
+}
+.u-text-palette-1-base {
+  color:#478ac9 !important;
+}
+.u-text-palette-1-base svg {
+  fill:#478ac9;
+}
+.u-text-white {
+  color:#ffffff !important;
+}
+.u-text-white svg {
+  fill:#ffffff;
+}
+.u-text-grey-70 {
+  color:#4d4d4d !important;
+}
+
+.u-section-1 {
+  background-image:none;
+}
+.u-section-1 .u-sheet-1 {
+  min-height:500px;
+}
+.u-section-1 .u-text-1 {
+  width:525px;
+  margin:20px auto 0;
+}
+.u-section-1 .u-layout-wrap-1 {
+  background-image:none;
+  margin:22px 0 6px;
+}
+.u-section-1 .u-layout-cell-1 {
+  min-height:420px;
+}
+.u-section-1 .u-container-layout-1 {
+  padding:30px;
+}
+.u-section-1 .u-layout-cell-2 {
+  min-height:420px;
+}
+.u-section-1 .u-container-layout-2 {
+  box-shadow:0 -2px 8px 0 rgba(128,128,128,1);
+  padding:30px 30px 50px 30px;
+}
+.u-section-2 {
+  background-image:none;
+}
+.u-section-2 .u-sheet-1 {
+  min-height:206px;
+}
+.u-section-2 .u-list-1 {
+  width:961px;
+  grid-auto-rows:100%;
+  margin:15px auto;
+}
+.u-section-2 .u-repeater-1 {
+  grid-auto-columns:33.3333%;
+  grid-template-columns:repeat(3, 33.3333%);
+  grid-auto-rows:100%;
+  min-height:176px;
+  grid-gap:0px;
+}
+.u-section-2 .u-list-item-1 {
+  background-image:none;
+}
+.u-section-2 .u-container-layout-1 {
+  padding:44px 30px 23px;
+}
+.u-section-2 .u-icon-1 {
+  height:22px;
+  width:22px;
+  margin:1px auto 0 0;
+}
+.u-section-2 .u-text-1 {
+  font-weight:700;
+  text-transform:uppercase;
+  font-size:1.25rem;
+  margin:-23px 0 0 40px;
+}
+.u-section-2 .u-text-2 {
+  margin:21px 0 0;
+}
+.u-section-2 .u-list-item-2 {
+  background-image:none;
+}
+.u-section-2 .u-container-layout-2 {
+  padding:44px 30px 23px;
+}
+.u-section-2 .u-icon-2 {
+  height:22px;
+  width:22px;
+  color:rgb(255, 255, 255) !important;
+  margin:1px auto 0 0;
+}
+.u-section-2 .u-text-3 {
+  font-weight:700;
+  text-transform:uppercase;
+  font-size:1.25rem;
+  margin:-23px 0 0 40px;
+}
+.u-section-2 .u-text-4 {
+  margin:21px 0 0;
+}
+.u-section-2 .u-list-item-3 {
+  background-image:none;
+}
+.u-section-2 .u-container-layout-3 {
+  padding:44px 30px 23px;
+}
+.u-section-2 .u-icon-3 {
+  height:22px;
+  width:22px;
+  color:rgb(255, 255, 255) !important;
+  margin:1px auto 0 0;
+}
+.u-section-2 .u-text-5 {
+  font-weight:700;
+  text-transform:uppercase;
+  font-size:1.25rem;
+  margin:-23px 0 0 40px;
+}
+.u-section-2 .u-text-6 {
+  margin:21px 0 0;
+}
+.u-section-3 .u-sheet-1 {
+  min-height:155px;
+}
+.u-section-3 .u-layout-wrap-1 {
+  width:1056px;
+  margin:0 auto;
+}
+.u-section-3 .u-layout-cell-1 {
+  min-height:206px;
+  background-image:none;
+}
+.u-section-3 .u-container-layout-1 {
+  padding:0 1px 0 0;
+}
+.u-section-3 .u-text-1 {
+  text-transform:none;
+  font-size:2.25rem;
+  margin:-2px 0 0;
+}
+.u-section-4 {
+  min-height:530px;
+}
+.u-section-4 .u-image-1 {
+  height:224px;
+  margin-top:0;
+  margin-bottom:0;
+}
+.u-section-4 .u-group-1 {
+  width:1006px;
+  min-height:448px;
+  height:auto;
+  margin:-149px auto 7px;
+}
+.u-section-4 .u-container-layout-1 {
+  padding:9px 15px 20px;
+}
+.u-section-4 .u-text-1 {
+  font-weight:700;
+  text-transform:uppercase;
+  letter-spacing:4px;
+  margin:0 690px 0 0;
+}
+.u-section-5 .u-sheet-1 {
+  /* min-height:586px; */
+}
+.u-section-5 .u-text-1 {
+  width:505px;
+  margin:19px auto 0;
+}
+.u-section-5 .u-list-1 {
+  grid-template-rows:auto auto;
+  grid-auto-rows:100%;
+  margin-top:0;
+  margin-bottom:10px;
+}
+.u-section-5 .u-repeater-1 {
+  grid-auto-columns:calc(33.3333% - 6.66667px);
+  grid-template-columns:calc(33.3333% - 6.66667px) calc(33.3333% - 6.66667px) calc(33.3333% - 6.66667px);
+  grid-auto-rows:calc(50% - 5px);
+  grid-gap:10px 10px;
+  min-height:418px;
+}
+.u-section-5 .u-container-layout-1 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-1 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  color:rgb(71, 138, 201) !important;
+  margin:0 auto;
+}
+.u-section-5 .u-text-2 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-3 {
+  margin:19px 0 0;
+}
+.u-section-5 .u-container-layout-2 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-2 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  color:rgb(71, 138, 201) !important;
+  margin:0 auto;
+}
+.u-section-5 .u-text-4 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-5 {
+  margin:19px 0 0;
+}
+.u-section-5 .u-container-layout-3 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-3 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  color:rgb(71, 138, 201) !important;
+  margin:0 auto;
+}
+.u-section-5 .u-text-6 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-7 {
+  margin:19px 0 0;
+}
+.u-section-5 .u-container-layout-4 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-4 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  margin:0 auto;
+}
+.u-section-5 .u-text-8 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-9 {
+  margin:19px 0 0;
+}
+.u-section-5 .u-container-layout-5 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-5 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  margin:0 auto;
+}
+.u-section-5 .u-text-10 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-11 {
+  margin:19px 0 0;
+}
+.u-section-5 .u-container-layout-6 {
+  padding:30px 30px 0;
+}
+.u-section-5 .u-icon-6 {
+  height:54px;
+  width:54px;
+  background-image:none;
+  margin:0 auto;
+}
+.u-section-5 .u-text-12 {
+  margin:19px 20px 0;
+}
+.u-section-5 .u-text-13 {
+  margin:19px 0 0;
+}
+
+div.avatar-info{
+  .people-photo {
+    margin-top:50px;
+    display:inline-block;
+    width:256px;
+    height:256px;
+    border-radius:50%;
+    background-size:256px 256px;
+    background-position:center center;
+    vertical-align:middle;
+    line-height:132px;
+    margin-left:5px;
+    margin-bottom:10px;
+    background-repeat:no-repeat;
+    box-shadow:1px 1px 10px #000000;
+  }
+  .dropzoneInvisible{
+    opacity:0.1;
+  }
+
+}
+
+div.u-container-style.u-layout-cell.u-size-30.u-layout-cell-2 {
+  div.newlabel {
+    position:absolute;
+    background:red;
+    width:100px;
+    padding:5px;
+    text-align:center;
+    color:white;
+    font-weight:bold;
+    transform:rotateZ(
+        45deg
+    );
+    right:-20px;
+    top:10px;
+    border-radius:100%;
+  }
+
+  kendo-textbox{
+    width:100%;
+  }
+
+  kendo-label {
+    font-weight:700;
+  }
+
+  kendo-formfield{
+    margin-bottom: 20px;
+  }
+  kendo-formfield.enable-people {
+    position: absolute;
+    top: -35px;
+    padding: 0px 0px 0px 10px;
+    margin-top: 20px;
+    background: darkgrey;
+    color: white;
+    border-radius: 100px;
+  }
+}
+
+div.broker-details{
+  min-height: 100px;
+  background: white;
+  opacity: 0.8;
+  padding: 30px;
+  kendo-textbox{
+    width:100%;
+  }
+}
+
+div.change-password{
+  padding-top: 10px;
+}

src/app/contact-edit/contact-edit.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactEditComponent } from './contact-edit.component';
+
+describe('ContactEditComponent', () => {
+  let component: ContactEditComponent;
+  let fixture: ComponentFixture<ContactEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactEditComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/contact-edit/contact-edit.component.ts

+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
+import {MessageBoxComponent} from '../message-box/message-box.component';
+import {SessionService} from '../service/session.service';
+import {AppConfig} from '../app.config';
+import {PeopleService} from '../service/people.service';
+import {NotificationService, Type} from '@progress/kendo-angular-notification';
+import {UserExModel, UserRoles} from '../models/user-ex.model';
+import {ActivatedRoute, Router} from '@angular/router';
+import {DialItem, DialItemClickEvent} from '@progress/kendo-angular-buttons';
+
+@Component({
+  selector: 'app-contact-edit',
+  templateUrl: './contact-edit.component.html',
+  styleUrls: ['./contact-edit.component.scss']
+})
+export class ContactEditComponent implements OnInit {
+  @Input() public People = new UserExModel({Id:'', Display: 'Add New People'});
+  public avatarUrl = 'url(https://via.placeholder.com/128)' ;
+  public myRestrictions: FileRestrictions = {
+    allowedExtensions: ['.jpg', '.png', '.jpeg'],
+    maxFileSize: 2194304
+  };
+
+  public featureUser = false;
+  public featureBroker= false;
+  public roleAdmin = false;
+  public roleManager = false;
+  public roleAccountant= false;
+
+  public dialOpen = false;
+  public actionItems: Array<DialItem> = [
+    { icon: "save", label: "Save" },
+    { icon: "table", label: "List all people" },
+    { icon: "delete", label:  "Delete" },
+  ];
+  private timer: any;
+
+  @ViewChild('messagebox', {static: true}) msgBox: MessageBoxComponent;
+  @ViewChild('fileSelect', {static: true}) fs: FileSelectComponent;
+  constructor(public ss: SessionService, private config: AppConfig,
+              private actRoute: ActivatedRoute, private router: Router,
+              private ps: PeopleService, private  notificationService: NotificationService) { }
+
+  ngOnInit(): void {
+    // stand along editing
+    let path = this.actRoute.snapshot.routeConfig.path
+    if (path === 'contact' && this.ss.canEditOtherUser() ){
+      this.createNew();
+    }else if ( path === 'contact/:id' ){
+      this.editById();
+    }else{ // embedded editing
+      this.embedEditing();
+    }
+    this.avatarUrl = 'url(' + this.config.getUrl('avatar/' + this.People.Id) + ')';
+  }
+
+  onDialogClose(status: string): void {
+    console.log(status);
+  }
+
+  private embedEditing(): void {
+    if ( this.People.Id === '') {
+      console.log(this.ss);
+      if ( this.ss.canEditOtherUser() ){
+        this.People.Display = "Add New People"
+      }else{
+        this.router.navigate(['/profile'])
+      }
+    }else{// People Id is not null
+      if ( this.People.Id === this.ss.loggedIn.UserEx.Id ) { //edit oneself
+        this.People = this.ss.loggedIn.UserEx;
+      }else {
+        if ( this.ss.canEditOtherUser()){
+          this.loadUserEx(this.People.Id);
+        }
+      }
+    }
+  }
+
+  private editById (): void {
+    const id = this.actRoute.snapshot.params.id;
+    if ( id === '' ){
+      this.createNew();
+    }else{
+      this.loadUserEx(id);
+    }
+  }
+
+  private createNew() {
+    this.People = new UserExModel();
+    this.People.Display = "Add New People"
+  }
+
+  private loadUserEx(id: string) {
+    if (!id  || id === '' ) return ;
+    this.ps.getUserEx(id).subscribe( resp => {
+      this.People = new UserExModel(resp);
+      this.avatarUrl = 'url(' + this.config.getUrl('avatar/' + this.People.Id) + ')';
+      this.People.defaultContact = this.People.Contacts[0];
+      switch ( this.People.Role ){
+        case "admin":
+          this.roleAdmin = true;
+          this.roleManager = false;
+          this.roleAccountant = false;
+          break
+        case "manager":
+          this.roleAdmin = false;
+          this.roleManager = true;
+          this.roleAccountant = false;
+          break
+        case "accountant":
+          this.roleAdmin = false;
+          this.roleManager = true;
+          this.roleAccountant = false;
+          break;
+        case "User":
+          this.featureUser = true;
+          this.featureBroker = false;
+          break;
+        case "Broker":
+          this.featureUser = true;
+          this.featureBroker = true;
+          break;
+        case "People":
+          this.featureUser = false;
+          this.featureBroker = false;
+          break;
+      }
+      console.log(this, resp);
+    });
+  }
+
+  public onSelectAvatar(ev: SelectEvent): void {
+    if (ev.files) {
+      ev.files.every((file: FileInfo) => {
+        if (file.rawFile && !file.validationErrors) {
+          const reader  = new FileReader();
+
+          reader.onloadend = () => {
+            const str = reader.result as string;
+            this.People.Avatar = str;
+            if (this.People.Id !== ''){
+              this.ps.updateAvatar(str, this.People.Id).subscribe(resp => {
+                this.avatarUrl = 'url(' + str + ' )';
+              }, err => {
+                this.msgBox.Show('Failed to Update Avatar: ' + err.toString());
+              });
+            }else{ // we are new user, we update ui only
+              this.avatarUrl = 'url(' + str + ' )';
+            }
+            // this.fs.clearFiles();
+          };
+          reader.readAsDataURL(file.rawFile);
+        }else{
+          this.msgBox.Show('Only jpg, and png are supported (max 2MB)');
+          setTimeout(() => { this.fs.clearFiles(); }, 10);
+        }
+        return false; // we only take first file
+      });
+    }
+  }
+
+  public startSelectAvatar(): void {
+    const element: NodeListOf<HTMLElement> = document.getElementsByName('selectAvatar');
+    element.forEach( v => {
+      if ( v.tagName.toLowerCase() === 'input') {
+        v.click();
+      }
+    });
+  }
+
+  public onEnableDisable() : void{
+    if ( this.People.Id === '' ) { return; }
+    this.ps.enableUser(this.People.Enabled, this.People.Id).subscribe(resp => {
+      if ( resp ) {
+        this.notifyEnabled(this.People.Display + " Enabled", { style: 'success', icon: true });
+      }else{
+        this.notifyEnabled(this.People.Display + " Disabled", { style: 'warning', icon: true });
+      }
+    });
+  }
+
+  public notifyEnabled( msg: string, lookAndFeel?: Type): void {
+    if (lookAndFeel === undefined ){
+      lookAndFeel = { style: 'success', icon: true };
+    }
+    this.notificationService.show({
+      content: msg,
+      cssClass: 'button-notification',
+      animation: { type: 'slide', duration: 400 },
+      position: { horizontal: 'right', vertical: 'top' },
+      type: lookAndFeel,
+      closable: false,
+      hideAfter: 5000,
+    });
+  }
+
+  public onEnableFeatureUser(): void{
+    if ( this.People.Login === '' && this.People.Enabled) {
+      this.People.Login = Date.now() + "@sfmarkets.com.au";
+      if ( this.People.Role === UserRoles.People ) {
+        this.People.Role = UserRoles.User; // upgrade to user
+      }
+    }else{
+      if ( this.People.Role === UserRoles.User) { // downgrade to people
+        this.People.Role = UserRoles.People;
+      }
+    }
+  }
+
+  public onEnableFeatureBroker(): void {
+    if (this.featureBroker){
+      this.People.Broker.Id = this.People.Id;
+      this.People.Broker.First = this.People.First;
+      this.People.Broker.Last = this.People.Last;
+      this.People.Broker.Middle = this.People.Middle;
+      this.People.Broker.Title = this.People.Title;
+      this.People.Broker.Nick = this.People.Nick;
+      this.People.Broker.Display = this.People.Display;
+      if ( this.People.Role === UserRoles.User ) {
+        this.People.Role = UserRoles.Broker; // upgrade to Broker
+      }
+    }else{
+      this.People.Broker.Id = "";
+      if ( this.People.Role === UserRoles.Broker ){
+        this.People.Role = UserRoles.User;  // downgrade to User
+      }
+    }
+  }
+  public onEnableRoleAdmin(): void {
+    if (this.roleAdmin) {this.roleAccountant = false; this.roleManager = false;}
+    this.People.Role = UserRoles.Admin;
+  }
+  public onEnableRoleManager(): void {
+    if (this.roleManager) {this.roleAdmin = false; this.roleAccountant = false;}
+    this.People.Role = UserRoles.Manager;
+  }
+  public onEnableRoleAccountant(): void{
+    if (this.roleAccountant) {this.roleAdmin = false; this.roleManager = false;}
+    this.People.Role = UserRoles.Accountant;
+  }
+  public onFloatButtonAction(dice: DialItemClickEvent): void{
+    switch( dice.index.toString() ) {
+      case '0':
+        this.doSave();
+        break;
+      case '1':
+        this.router.navigate(['/list-all-people']);
+        break;
+      case '2':
+        this.doDelete();
+        break;
+    }
+    // this.notifyEnabled(dice.item.label);
+  }
+  public onDialOpen(): void {
+    this.dialOpen = true;
+    this.actionItems[2].disabled = true;
+    if (this.People.Id === '') { return ; }
+    let count = 3;
+    let self = this;
+    this.timer = setInterval(() => {
+      count --;
+      this.actionItems[2].label = 'wait .. ' + count;
+      if ( count < 0 ) {
+        this.actionItems[2].label = 'delete: ' + this.People.Display;
+        this.actionItems[2].disabled = false;
+        clearInterval(self.timer);
+      }
+    }, 1000)
+  }
+
+  public onDialClose(): void {
+    this.dialOpen = false;
+    clearInterval(this.timer);
+  }
+
+  private doDelete(): void {
+    if (this.People.Id === '') {
+      this.createNew();
+      return
+    }else{
+      this.ps.deletePeople(this.People.Id).subscribe(
+        resp => {
+          if ( resp === this.People.Id ) { // successfully deleted
+            this.msgBox.Show('User and all of his/her related loans payment has been deleted !!');
+            this.createNew();
+            this.router.navigate(['/list-all-people']).then(
+              v =>  this.notifyEnabled( "User " + this.People.Display + " deleted")
+            );
+          }
+        }, err => {
+          this.msgBox.Show('"Error Delete People');
+        }
+      );
+    }
+  }
+
+  private doSave(): void {
+    this.ps.saveUserEx(this.People).subscribe(
+      resp => { console.log (resp); },
+      err => { this.msgBox.Show('Err saving user, please try again later'); },
+      () => {}
+    );
+  }
+}

src/app/list-all-loans/list-all-loans.component.html

   </kendo-grid-column>
 
   <kendo-grid-column-group title="People" [columnMenu]="false" [headerClass]="'colGroupPeople'">
-      <kendo-grid-column field="Client" width="220" title="Client(s)" [class]="'topAlign'" [headerClass]="'colClient'">
+      <kendo-grid-column field="Client" width="260" title="Client(s)" [class]="'topAlign'" [headerClass]="'colClient'">
         <ng-template kendoGridCellTemplate let-dataItem>
             <div *ngFor="let p of dataItem.Client, let idx=index ">
-              <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ClientIds[idx])}"></div>
-              <div class="customer-name"> {{ p }}</div>
+              <div *ngIf="dataItem.ClientIds.length >0" class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ClientIds[idx])}"></div>
+              <div *ngIf="dataItem.ClientIds.length >0" class="customer-name"> {{ p }}</div>
             </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
       <kendo-grid-column field="Broker" width="220" title="Broker (s)" [class]="'topAlign'" [headerClass]="'colBroker'">
         <ng-template kendoGridCellTemplate let-dataItem>
           <div *ngFor="let p of dataItem.Broker, let idx=index ">
-            <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.BrokerIds[idx])}"></div>
-            <div class="customer-name"> {{ p }}</div>
+            <div *ngIf="dataItem.BrokerIds.length >0" class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.BrokerIds[idx])}"></div>
+            <div *ngIf="dataItem.BrokerIds.length >0" class="customer-name"> {{ p }}</div>
           </div>
         </ng-template>
         <ng-template kendoGridFilterCellTemplate let-filter let-column="column">

src/app/list-all-loans/list-all-loans.component.ts

   public view: LoanSummaryService;
   public sort: Array<SortDescriptor> = [{dir: 'desc', field: 'Settlement'}];
   public filter: CompositeFilterDescriptor;
-  public pageSize = 10;
+  public pageSize = 20;
   public skip = 0;
   @Output() LoanSelected: EventEmitter<LoanModel[]|LoanModel> = new EventEmitter<LoanModel[]|LoanModel>();
   @Output() Cancelled: EventEmitter<LoanModel[]|LoanModel> = new EventEmitter<LoanModel[]|LoanModel>();

src/app/loan-edit-people/loan-edit-people.component.html

         <kendo-multiselect name="brokers" [data]="AllBrokers" [textField]="'Display'"
                            [valueField]="'Id'" [(ngModel)]="this.Loan.Broker" [virtual]="virtual"
                            (close)="rebuildPeopleMap($event)"
-                           required="true"
         >
           <ng-template kendoMultiSelectItemTemplate let-dataItem>
             <img class="contact-image"  [src]="getContactImageUrl(dataItem.Id)" />

src/app/loan-edit-people/loan-edit-people.component.ts

   public AllPeople: PeopleModel[];
   public AllBrokers: BrokerModel[];
   public role: any = {}; // string to string map
-  public roles = ['Admin', 'Referral', 'Observer', 'Verifier', 'Ex-Broker', 'Ex-Client', 'Banned', 'Unknown'];
+  public roles = ['Admin', 'Introducer', 'Referral', 'Observer', 'Verifier', 'Ex-Broker', 'Ex-Client', 'Banned', 'Unknown'];
 
   constructor(private ps: PeopleService, private auth: AuthService, private dcs: ClonerService) { }
 
       return;
     }
 
-    if ( this.Loan.Broker.length === 0) {
-      this.showError('Please Select at least 1 Broker');
-      return;
-    }
+    // if ( this.Loan.Broker.length === 0) {
+    //   this.showError('Please Select at least 1 Broker');
+    //   return;
+    // }
 
     this.ps.syncPeople(this.Loan.cloneForJson()).subscribe( resp => {});
     this.NotifyNext.emit(true);

src/app/loan-edit/basicinfo/basicinfo.component.ts

     {text: '4 - Approved :   Approved by lender', value: 'Approved' },
     {text: '5 - Settled :   Settlement date finalized.', value: 'Settled'},
     {text: '6 - Finished :   Fully paid, terminated, or switched)', value: 'Finished'},
-    {text: '7 - Aborted :   Ended before any income has made)', value: 'Aborted'},
+    {text: '7 - Aborted :   Ended with negative reasons', value: 'Aborted'},
+    {text: '8 - Declined :   Declined by Fund provider', value: 'Declined'},
   ];
 
   ngOnInit(): void {

src/app/main-menu-items.ts

         text: 'People',
         icon: 'user',
         items: [
+            { text: 'Add ', icon: 'plus', url: './#contact' },
             { text: 'Add ', icon: 'plus', url: './#people-add' },
             { text: 'List All', fa: faIdCard , url: './#list-all-people'},
         ]

src/app/models/api-v1-login-response.ts

 import {PeopleModel} from './people.model';
 import {UserExtraModel} from './user-extra.model';
+import {UserExModel} from './user-ex.model';
 
 export class ApiV1LoginResponse {
 
   public role: string;
   public User: PeopleModel;
   public UserExtra?: UserExtraModel; // extra user information
+  public UserEx?: UserExModel ;
 
   constructor(payload: Partial<ApiV1LoginResponse>) {
     this.login = payload.login || false;
     this.role = payload.role || '';
     this.User = new PeopleModel(payload.User || {});
     this.UserExtra = new UserExtraModel(payload.UserExtra || {});
+    this.UserEx = new UserExModel( payload.UserEx || {});
   }
 
   public hasValidSession(): boolean {

src/app/models/broker.model.ts

   public ACC: string;
   public License: string;
   public Organization: string;
-  constructor( payload: Partial<BrokerModel>) {
+  constructor( payload?: Partial<BrokerModel>) {
     super(payload);
+    if (! payload ) { payload = {} ; }
     this.Login = payload.Login || '';
     this.BSB = payload.BSB || '';
     this.ACC = payload.ACC || '';

src/app/models/contact.model.ts

+export class ContactModel {
+  public PeopleId    :string;
+  public ContactType :string;
+  public Phone       :string;
+  public Email       :string;
+  public Address     :string;
+  public Description :string;
+
+  constructor(payload?: Partial<ContactModel>) {
+    if (!payload ) { payload = {}; }
+    this.PeopleId = payload.PeopleId || '';
+    this.ContactType = payload.ContactType || '';
+    this.Phone = payload.Phone || '';
+    this.Email = payload.Email || '';
+    this.Address = payload.Address || '';
+    this.Description = payload.Description || '';
+  }
+}

src/app/models/loan.model.ts

 import {RewardModel} from './reward.model';
 import {AuthService} from '../service/auth.service';
 import {LoanSingleService} from '../service/loan.single.service';
+import {MilestoneModel} from './milestone.model';
 
 export interface LoanModelCallBacks {
    getUserName(userId: string): string;
   public Id: string;
   public Amount?: number;
   public Status?: string;
+  public Milestones?: MilestoneModel[];
   public Item?: string;
   public Rating?: number;
   public Settlement?: Date;
       this.Id = payload.Id || '';
       this.Amount = payload.Amount || 0;
       this.Status = payload.Status || '';
+      this.Milestones = [];
+      if (Array.isArray(payload.Milestones)) {
+        payload.Milestones.forEach(v => {
+          this.Milestones.push(new MilestoneModel(v));
+        });
+      }
       this.Item = payload.Item || '';
       this.Rating = payload.Rating || 0;
       this.Settlement = payload.Settlement ? new Date(payload.Settlement) : new Date('1900-01-01') ;

src/app/models/milestone.model.ts

+export class MilestoneModel {
+  public LoanId            :string;
+  public MilestoneName     :string;
+  public MilestoneDate     :Date;
+  public MilestonePeopleId :string;
+  public MilestoneType     :string;
+
+  constructor(payload? : Partial<MilestoneModel>) {
+    if (!payload) payload = {};
+    this.LoanId = payload.LoanId || '';
+    this.MilestoneName = payload.MilestoneName || '';
+    if ( payload.MilestoneDate ){
+      this.MilestoneDate = new Date (payload.MilestoneDate);
+    }else{
+      this.MilestoneDate = new Date('1899-12-31');
+    }
+    this.MilestonePeopleId = payload.MilestonePeopleId || '';
+    this.MilestoneType = payload.MilestoneType;
+  }
+}

src/app/models/payout.ex.model.ts

-import {UserExModel} from './userExModel';
+import {UserExModel} from './user-ex.model';
 import {PayoutModel} from './payout.model';
 import {RewardExModel} from './reward-ex.model';
 

src/app/models/payout.model.ts

-import {UserExModel} from './userExModel';
+import {UserExModel} from './user-ex.model';
 
 export class PayoutModel {
   Id: number;

src/app/models/reward-ex.model.ts

 import {LoanModel} from './loan.model';
 import {PayOutExModel} from './payout.ex.model';
-import {UserExModel} from './userExModel';
+import {UserExModel} from './user-ex.model';
 
 export class RewardExModel {
   public Id: number;

src/app/models/user-ex.model.ts

+import {PeopleModel} from './people.model';
+import {BrokerModel} from './broker.model';
+import {ContactModel} from './contact.model';
+
+export enum UserRoles {
+  Unknown = 'Unknown',
+  People = 'People',
+  User = 'User',
+  Broker = 'Broker',
+  Beneficiary = 'Beneficiary',
+  Admin = 'admin',
+  Accountant = 'accountant',
+  Manager = 'manager',
+  Super = 'super',
+}
+
+export class UserExModel extends PeopleModel{
+  Role: UserRoles;
+  Avatar: string;  // for save new people's avatar only
+  Broker?: BrokerModel;
+  Login: string;
+  Contacts?: ContactModel[];
+  defaultContact: ContactModel;
+  constructor(payload?: Partial<UserExModel>) {
+    super(payload);
+    if ( ! payload ) { payload = {}; }
+    this.Role = payload.Role || 'People' as UserRoles;
+    this.Avatar = payload.Avatar || '';
+    this.Login = payload.Login || '';
+    this.Broker = new BrokerModel(payload.Broker);
+    this.Contacts = [];
+    this.defaultContact = new ContactModel({PeopleId: this.Id, ContactType: 'default'});
+    if (Array.isArray(payload.Contacts)) {
+      payload.Contacts.forEach( v => {
+
+        if ( v.ContactType.toLowerCase() === 'default' ){
+          this.defaultContact = new ContactModel(v);
+          this.Contacts.unshift(new ContactModel(v)); // add to head, make sure it's number 1
+        }else{
+          this.Contacts.push(new ContactModel(v));  // add to tail
+        }
+      });
+    }
+    if ( this.Contacts.length === 0 ){
+      this.Contacts.push(this.defaultContact);
+    }
+  }
+}

src/app/models/userExModel.ts

-import {PeopleModel} from './people.model';
-import {BrokerModel} from './broker.model';
-
-export enum UserRoles {
-  Unknown = 'Unknown',
-  People = 'People',
-  Broker = 'Broker',
-  Beneficiary = 'Beneficiary',
-  Admin = 'admin',
-  Accountant = 'accountant',
-  Super = 'super',
-}
-
-export class UserExModel extends PeopleModel{
-  Role: UserRoles;
-  Broker?: BrokerModel;
-  Login: string;
-  constructor(payload?: Partial<UserExModel>) {
-    super(payload);
-    if ( ! payload ) { payload = {}; }
-    this.Role = payload.Role || 'People' as UserRoles;
-    this.Login = payload.Login || '';
-    this.Broker = new BrokerModel(payload);
-  }
-}

src/app/pay-out-details/pay-out-details.component.ts

 import {PayOutService} from '../service/payout.service';
 import {PeopleSelectComponent} from '../people-select/people-select.component';
 import {AppConfig} from '../app.config';
-import {UserExModel} from '../models/userExModel';
+import {UserExModel} from '../models/user-ex.model';
 import {SessionService} from '../service/session.service';
 import {Router} from '@angular/router';
 

src/app/people-card/people-card.component.html

     </div>
     <div class="back">
       <div class="social-media-wrapper">
-        <button kendoButton (click)="onButtonClick()" look="outline" icon="edit">Edit</button>
+        <button kendoButton (click)="onEditContact()" look="outline" icon="edit">Edit</button>
         <button #enabled *ngIf="contact.Id.length > 10" kendoButton (selectedChange)="onSelectedChange($event)" look="outline" icon="tick"
                 [toggleable]="true" [selected]="contact.Enabled"
         >Enable</button>
+<!--        <button kendoButton (click)="onEditContact()" look="outline" icon="edit">Contacts</button>-->
       </div>
     </div>
   </div>

src/app/people-card/people-card.component.ts

     return '../../assets/img/bg/bg-disabled-card.jpg';
   }
 
-  public onButtonClick(): void {
-    this.router.navigate(['/profile/' + this.contact.Id]);
+  public onEditProfile(): void {
+    this.router.navigate(['/profile/' + this.contact.Id]).then();
+  }
+
+  public onEditContact(): void{
+    this.router.navigate(['/contact/' + this.contact.Id]).then();
   }
 
   public onSelectedChange(e: boolean): void {

src/app/people-select/people-select.component.ts

 import {ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {MultiColumnComboBoxComponent} from '@progress/kendo-angular-dropdowns';
 import {PeopleService} from '../service/people.service';
-import {UserExModel} from '../models/userExModel';
+import {UserExModel} from '../models/user-ex.model';
 
 @Component({
   selector: 'app-people-select',

src/app/profile/change-password/change-password.component.ts

   constructor(private ss: SessionService, private ps: PeopleService) { }
 
   ngOnInit(): void {
-    if (this.ss.isAdmin() && this.PeopleId !== '' && !this.ss.isCurrentUser(this.PeopleId)) {
-      this.isAdmin = this.ss.isAdmin();
-    }
+    this.isAdmin = this.ss.isAdmin();
+    // if (this.ss.isAdmin() && this.PeopleId !== '' && !this.ss.isCurrentUser(this.PeopleId)) {
+    //   this.isAdmin = this.ss.isAdmin();
+    // }
   }
   public hidePass(): void{
     if ( this.changePassword ) {

src/app/profile/people-profile/people-profile.component.html

       <div class="vertical-spacer"></div>
 
       <kendo-formfield>
-        Enable &nbsp; <kendo-switch name="Enabled" [(ngModel)]="People.Enabled"
+        Enable &nbsp; <kendo-switch name="Enabled" [(ngModel)]="People.Enabled" (valueChange)="onEnableDisable()"
         > </kendo-switch> &nbsp; Disable
 
       </kendo-formfield>

src/app/profile/people-profile/people-profile.component.ts

 import {PeopleModel} from '../../models/people.model';
 import {SessionService} from '../../service/session.service';
 import {AppConfig} from '../../app.config';
+import {NotificationService, Type} from '@progress/kendo-angular-notification';
 
 @Component({
   selector: 'app-people-profile',
   @ViewChild('messagebox', {static: true}) msgBox: MessageBoxComponent;
   @ViewChild('fileSelect', {static: true}) fs: FileSelectComponent;
 
-  constructor(private ss: SessionService, private config: AppConfig, private ps: PeopleService) { }
+  constructor(private ss: SessionService, private config: AppConfig,
+              private ps: PeopleService, private  notificationService: NotificationService) { }
 
   ngOnInit(): void {
     if (this.ss.isAdmin() &&  !this.ss.isCurrentUser(this.People.Id)) {
     });
 
   }
+
+  public onEnableDisable() : void{
+    this.ps.enableUser(this.People.Enabled, this.People.Id).subscribe( resp => {
+      if ( resp ) {
+        this.notifyEnabled(this.People.Display + " Enabled", { style: 'success', icon: true });
+      }else{
+        this.notifyEnabled(this.People.Display + " Disabled", { style: 'warning', icon: true });
+      }
+    });
+  }
+
+  public notifyEnabled( msg: string, lookAndFeel?: Type): void {
+    if (lookAndFeel === undefined ){
+      lookAndFeel = { style: 'success', icon: true };
+    }
+    this.notificationService.show({
+      content: msg,
+      cssClass: 'button-notification',
+      animation: { type: 'slide', duration: 400 },
+      position: { horizontal: 'right', vertical: 'top' },
+      type: lookAndFeel,
+      closable: false,
+      hideAfter: 5000,
+    });
+  }
 }

src/app/service/auth.service.ts

 import {Router} from '@angular/router';
 import {PeopleModel} from '../models/people.model';
 import {UserExtraModel} from '../models/user-extra.model';
+import {UserExModel} from '../models/user-ex.model';
 import {Observable} from 'rxjs';
 import {AppConfig} from '../app.config';
 import {SessionService} from './session.service';
                   machineId: responseData['Biukop-Mid'],
                   sessionExpire: responseData.sessionExpire,
                   role: responseData.role,
-                  User: responseData.User || new PeopleModel({}),
-                  UserExtra: responseData.UserExtra || new UserExtraModel({}),
+                  User: responseData.User? new PeopleModel(responseData.User) : new PeopleModel({}),
+                  UserExtra: responseData.UserExtra? new UserExtraModel(responseData.UserExtra) : new UserExtraModel({}),
+                  UserEx: responseData.UserEx ? new UserExModel(responseData.UserEx) : new UserExModel(),
                 });
                 this.ss.login(sfm);
                 this.ss.saveSessionInfo();

src/app/service/people.service.ts

 import {LoanModel} from '../models/loan.model';
 import {ChangePassword} from '../models/change-password.model';
 import {UserExtraModel} from '../models/user-extra.model';
-import {UserExModel} from '../models/userExModel';
+import {UserExModel} from '../models/user-ex.model';
 
 @Injectable({providedIn: 'root'})
 export class PeopleService {
     return this.http.get<{Count: number, List: UserExModel[]}>(this.auth.getUrl( 'user-ex-list/'), { params});
   }
 
+  public getUserEx(id: string): Observable<UserExModel> {
+    return this.http.get<UserExModel>(this.auth.getUrl( 'user-ex/' + id));
+  }
+
   public getBrokerList(filter: string): Observable<{Count: number, List: BrokerModel[]}> {
     const params = new HttpParams().set('filter', filter);
     return this.http.get<{Count: number, List: BrokerModel[]}>(this.auth.getUrl( 'broker-list/'), { params});
     return this.http.post<boolean>(this.auth.getUrl('user-enable/' + id), enable);
   }
 
+  public saveUserEx(uex: UserExModel): Observable<UserExModel> {
+    return this.http.post<UserExModel>(this.auth.getUrl('user-ex/'), uex);
+  }
+
 }

src/app/service/session.service.ts

-import {EventEmitter, Injectable, OnInit} from '@angular/core';
+import {EventEmitter, Injectable} from '@angular/core';
 import {AppConfig} from '../app.config';
 import {ApiV1LoginResponse} from '../models/api-v1-login-response';
 import {PeopleModel} from '../models/people.model';
 import {Router} from '@angular/router';
 import {NotificationService} from '@progress/kendo-angular-notification';
 import {debounce} from 'ts-debounce';
+import {UserExModel} from '../models/user-ex.model';
 import {UserExtraModel} from '../models/user-extra.model';
 import {WebSocketService} from '../websocket';
+import {UserRoles} from '../models/user-ex.model';
 
 @Injectable()
 export class SessionService {
     if ( resp.UserExtra !== undefined ) {
       this.loggedIn.UserExtra = new UserExtraModel(resp.UserExtra);
     }
+
+    if (resp.UserEx) {
+      this.loggedIn.UserEx = new UserExModel(resp.UserEx);
+      console.log(this.loggedIn, resp);
+    }
+
     this.loginResult.emit(this.loggedIn);
   }
 
   public set SocketId(socketId: string ) {
     this.socketId = socketId;
   }
+
+  public canEditOtherUser(): boolean {
+    return this.loggedIn.UserEx.Role === UserRoles.Admin ||
+           this.loggedIn.UserEx.Role === UserRoles.Manager;
+  }
 }

src/styles.scss

-/* You can add global styles to this file, and also import other style files */
+@charset "UTF-8";
+
+@media (min-width: 1200px) {
+  .u-sheet {
+    width: 1140px;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .u-sheet {
+    width: 940px;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-sheet {
+    width: 720px;
+  }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+  .u-sheet {
+    width: 540px;
+  }
+}
+@media (max-width: 575px) {
+  .u-sheet {
+    width: 340px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .u-valign-middle-xl {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .u-valign-middle-lg {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-valign-middle-md,.u-valign-top-md {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+  .u-valign-middle-sm,.u-valign-top-sm {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (max-width: 575px) {
+  .u-valign-top-xs {
+    display: flex;
+    flex-direction: column;
+  }
+}
+@media (min-width: 1200px) {
+  .u-valign-middle-xl {
+    justify-content: center;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .u-valign-middle-lg {
+    justify-content: center;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-valign-middle-md {
+    justify-content: center;
+  }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+  .u-valign-middle-sm {
+    justify-content: center;
+  }
+}
+.u-valign-top {
+  justify-content: flex-start;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-valign-top-md {
+    justify-content: flex-start;
+  }
+}
+@media (min-width: 576px) and (max-width: 767px) {
+  .u-valign-top-sm {
+    justify-content: flex-start;
+  }
+}
+@media (max-width: 575px) {
+  .u-valign-top-xs {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-layout-row > .u-size-30-md {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+
+@media (max-width: 767px) {
+  .u-layout-row > * {
+    min-width: 100%;
+  }
+}
+.u-layout-row {
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 100%;
+  max-width: 100%;
+}
+
+@supports (position: sticky) {
+}
+@supports (position: -webkit-sticky) {
+}
+@media (max-width: 767px) {
+  .u-layout-wrap .u-layout {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .u-layout-wrap .u-layout .u-layout-cell {
+    border-left: 0 !important;
+    border-right: 0 !important;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .u-align-left-sm {
+    text-align: left;
+  }
+}
+@media (max-width: 575px) {
+  .u-align-left-xs {
+    text-align: left;
+  }
+}
+.u-align-center {
+  text-align: center;
+}
+@media (min-width: 1200px) {
+  .u-align-center-xl {
+    text-align: center;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .u-align-center-lg {
+    text-align: center;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .u-align-center-md {
+    text-align: center;
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
+}
+
+@media (max-width: 575px) {
+  h1:not(.u-title){
+    font-size: 2.25rem;
+  }
+}
+
+@media (max-width: 1199px) {
+  .u-section-1 .u-sheet-1 {
+    min-height: 606px;
+  }
+  .u-section-1 .u-layout-cell-1 {
+    min-height: 330px;
+  }
+  .u-section-1 .u-layout-cell-2 {
+    min-height: 330px;
+  }
+}
+@media (max-width: 991px) {
+  .u-section-1 .u-sheet-1 {
+    min-height: 529px;
+  }
+  .u-section-1 .u-layout-cell-1 {
+    min-height: 508px;
+  }
+  .u-section-1 .u-container-layout-1 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .u-section-1 .u-image-1 {
+    width: 200px;
+    height: 200px;
+  }
+  .u-section-1 .u-layout-cell-2 {
+    min-height: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-1 .u-sheet-1 {
+    min-height: 945px;
+  }
+  .u-section-1 .u-text-1 {
+    margin-right: 15px;
+    margin-left: 0;
+  }
+  .u-section-1 .u-text-2 {
+    margin-right: 15px;
+    margin-left: 0;
+  }
+  .u-section-1 .u-layout-cell-1 {
+    min-height: 452px;
+  }
+  .u-section-1 .u-image-1 {
+    width: 374px;
+    height: 374px;
+    margin-bottom: -48px;
+    margin-left: 0;
+  }
+  .u-section-1 .u-container-layout-2 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-1 .u-sheet-1 {
+    min-height: 734px;
+  }
+  .u-section-1 .u-text-1 {
+    width: 340px;
+    margin-right: 0;
+  }
+  .u-section-1 .u-text-2 {
+    width: 340px;
+    margin-right: 0;
+  }
+  .u-section-1 .u-layout-cell-1 {
+    min-height: 352px;
+  }
+  .u-section-1 .u-image-1 {
+    width: 294px;
+    height: 294px;
+    margin-bottom: -2px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .u-section-2 .u-sheet-1 {
+    min-height: 260px;
+  }
+  .u-section-2 .u-text-1 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .u-section-2 .u-layout-cell-1 {
+    min-height: 50px;
+  }
+  .u-section-2 .u-layout-cell-2 {
+    min-height: 50px;
+  }
+  .u-section-2 .u-layout-cell-3 {
+    min-height: 50px;
+  }
+  .u-section-2 .u-layout-cell-4 {
+    min-height: 50px;
+  }
+}
+@media (max-width: 991px) {
+  .u-section-2 .u-sheet-1 {
+    min-height: 364px;
+  }
+  .u-section-2 .u-layout-cell-1 {
+    min-height: 100px;
+  }
+  .u-section-2 .u-layout-cell-2 {
+    min-height: 100px;
+  }
+  .u-section-2 .u-layout-cell-3 {
+    min-height: 100px;
+  }
+  .u-section-2 .u-layout-cell-4 {
+    min-height: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-2 .u-sheet-1 {
+    min-height: 558px;
+  }
+  .u-section-2 .u-container-layout-1 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-2 .u-container-layout-2 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-2 .u-container-layout-3 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-2 .u-container-layout-4 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-2 .u-sheet-1 {
+    min-height: 429px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .u-section-3 .u-sheet-1 {
+    min-height: 1093px;
+  }
+  .u-section-3 .u-list-1 {
+    width: 863px;
+    margin-left: 77px;
+  }
+  .u-section-3 .u-repeater-1 {
+    grid-auto-columns: 33.333333333333336%;
+    min-height: 232px;
+  }
+  .u-section-3 .u-text-1 {
+    width: auto;
+    margin-top: 20px;
+    margin-left: 0;
+  }
+  .u-section-3 .u-text-3 {
+    width: auto;
+    margin-top: 20px;
+    margin-left: 0;
+  }
+  .u-section-3 .u-text-5 {
+    width: auto;
+    margin-top: 20px;
+    margin-left: 0;
+  }
+}
+@media (max-width: 991px) {
+  .u-section-3 .u-sheet-1 {
+    min-height: 1088px;
+  }
+  .u-section-3 .u-list-1 {
+    width: 672px;
+    margin-left: 48px;
+  }
+  .u-section-3 .u-repeater-1 {
+    grid-auto-columns: 33.3333%;
+    min-height: 253px;
+  }
+  .u-section-3 .u-container-layout-1 {
+    padding-top: 30px;
+  }
+  .u-section-3 .u-text-1 {
+    font-size: 1rem;
+  }
+  .u-section-3 .u-text-2 {
+    margin-right: auto;
+  }
+  .u-section-3 .u-container-layout-2 {
+    padding-top: 30px;
+  }
+  .u-section-3 .u-text-3 {
+    font-size: 1rem;
+  }
+  .u-section-3 .u-text-4 {
+    margin-right: auto;
+  }
+  .u-section-3 .u-container-layout-3 {
+    padding-top: 30px;
+  }
+  .u-section-3 .u-text-5 {
+    font-size: 1rem;
+  }
+  .u-section-3 .u-text-6 {
+    margin-right: auto;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-3 .u-sheet-1 {
+    min-height: 1576px;
+  }
+  .u-section-3 .u-list-1 {
+    width: 500px;
+    margin-top: 1028px;
+    margin-left: 40px;
+  }
+  .u-section-3 .u-repeater-1 {
+    grid-auto-columns: 50%;
+    grid-template-columns: repeat(2, 50%);
+    grid-auto-rows: 50%;
+    min-height: 487px;
+  }
+  .u-section-3 .u-container-layout-1 {
+    padding-bottom: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .u-section-3 .u-text-1 {
+    margin-right: auto;
+  }
+  .u-section-3 .u-container-layout-2 {
+    padding-bottom: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .u-section-3 .u-text-3 {
+    margin-right: auto;
+  }
+  .u-section-3 .u-container-layout-3 {
+    padding-bottom: 30px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .u-section-3 .u-text-5 {
+    margin-right: auto;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-3 .u-sheet-1 {
+    min-height: 1737px;
+  }
+  .u-section-3 .u-list-1 {
+    width: 287px;
+    margin-top: 1019px;
+    margin-left: auto;
+  }
+  .u-section-3 .u-repeater-1 {
+    grid-auto-columns: 100%;
+    grid-template-columns: 100%;
+    grid-auto-rows: 33.33%;
+    min-height: 675px;
+  }
+  .u-section-3 .u-container-layout-1 {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  .u-section-3 .u-container-layout-2 {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  .u-section-3 .u-container-layout-3 {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .u-section-4 .u-sheet-1 {
+    min-height: 430px;
+  }
+  .u-section-4 .u-layout-cell-1 {
+    min-height: 330px;
+  }
+  .u-section-4 .u-layout-cell-2 {
+    min-height: 330px;
+  }
+}
+@media (max-width: 991px) {
+  .u-section-4 .u-sheet-1 {
+    min-height: 200px;
+  }
+  .u-section-4 .u-layout-cell-1 {
+    min-height: 100px;
+  }
+  .u-section-4 .u-layout-cell-2 {
+    min-height: 100px;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-4 .u-sheet-1 {
+    min-height: 300px;
+  }
+  .u-section-4 .u-container-layout-1 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-4 .u-container-layout-2 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+@media (max-width: 991px) {
+  .u-section-5 .u-group-1 {
+    width: 720px;
+  }
+  .u-section-5 .u-text-1 {
+    margin-right: 404px;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-5 .u-group-1 {
+    width: 540px;
+  }
+  .u-section-5 .u-container-layout-1 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-5 .u-text-1 {
+    margin-right: 264px;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-5 .u-group-1 {
+    width: 340px;
+  }
+  .u-section-5 .u-text-1 {
+    margin-right: 64px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .u-section-6 .u-sheet-1 {
+    min-height: 176px;
+  }
+  .u-section-6 .u-layout-wrap-1 {
+    margin-right: initial;
+    margin-left: initial;
+  }
+  .u-section-6 .u-layout-cell-1 {
+    min-height: 100px;
+  }
+  .u-section-6 .u-layout-cell-2 {
+    min-height: 100px;
+  }
+}
+@media (max-width: 991px) {
+  .u-section-6 .u-sheet-1 {
+    min-height: 164px;
+  }
+  .u-section-6 .u-layout-cell-1 {
+    min-height: 86px;
+  }
+  .u-section-6 .u-container-layout-1 {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+  .u-section-6 .u-container-layout-2 {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
+@media (max-width: 767px) {
+  .u-section-6 .u-sheet-1 {
+    min-height: 227px;
+  }
+  .u-section-6 .u-layout-cell-1 {
+    min-height: 92px;
+  }
+  .u-section-6 .u-container-layout-1 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .u-section-6 .u-container-layout-2 {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-6 .u-layout-cell-1 {
+    min-height: 58px;
+  }
+}
+
+@media (max-width: 767px) {
+  .u-section-7 .u-text-1 {
+    width: 540px;
+    margin-top: 60px;
+  }
+  .u-section-7 .u-text-2 {
+    width: 540px;
+    margin-bottom: 60px;
+  }
+}
+@media (max-width: 575px) {
+  .u-section-7 .u-text-1 {
+    width: 340px;
+  }
+  .u-section-7 .u-text-2 {
+    font-size: 3rem;
+    width: 340px;
+  }
+}
+
+
+
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKXGUdhrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKW-U9hrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 200;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs13FvsUZiYA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiYA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs18NvsUZiYA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 600;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs1y9osUZiYA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://fonts.gstatic.com/s/oswald/v36/TK3_WkUHHAIjg75cFRf3bXL8LICs1xZosUZiYA.ttf) format('truetype');
+}