diff --git a/ng6-seed/src/app/dashboard/dashboard.component.html b/ng6-seed/src/app/dashboard/dashboard.component.html
index 62f96b1e0..0bf804fb2 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.html
+++ b/ng6-seed/src/app/dashboard/dashboard.component.html
@@ -1,109 +1,101 @@
-  <div class="pad-wrap">   
-       
-        <!-- doughnut -->
-            <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
-                    <mat-card>                     
-                         <mat-card-title>
-                            <div fxFlex.gt-sm="25" fxFlex="100">
-                                     {{dashboardTitle}}          
-                                            
-                            </div>
-                            <div fxFlex.gt-sm="25" fxFlex="100">
-                                    <ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" (change)="onChange($event,'One')" [options]="options" #dateRangePicker></ngx-mat-drp>
-                                    
-                            </div>
-                             <div fxFlex.gt-sm="25" fxFlex="100">
-                                <mat-form-field class="example-full-width">
-                                    <mat-select placeholder="City" [formControl]="myControl" multiple>
-                                                <mat-select-trigger style="color:#fff;">
-                                                  {{myControl.value ? myControl.value[0].name : ''}}
-                                                  <span *ngIf="myControl.value?.length > 1" >
-                                                    (+{{myControl.value.length - 1}} {{myControl.value?.length === 2 ? 'other' : 'others'}})
-                                                  </span>
-                                                </mat-select-trigger>
-                                                <mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
-                                    </mat-select>
-                                    
-                                </mat-form-field>
-
-                              </div>
-                              <div fxFlex.gt-sm="25" fxFlex="100">
+<div class="pad-wrap">   
+        <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
+        <mat-card style="min-height: 110%;">                     
+                <mat-card-title>
+                <div fxFlex.gt-sm="25" fxFlex="100">
+                        {{dashboardTitle}}          
                                 
-                                <mat-form-field class="example-full-width">
-                                        <mat-select placeholder="Lender" [formControl]="myControl2" multiple>
-                                                <mat-select-trigger style="color:#fff;">
-                                                      {{myControl2.value ? myControl2.value[0].short_name : ''}}
-                                                      <span *ngIf="myControl2.value?.length > 1" >
-                                                        (+{{myControl2.value.length - 1}} {{myControl2.value?.length === 2 ? 'other' : 'others'}})
-                                                      </span>
-                                                    </mat-select-trigger>
-                                                    <!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> -->
-                                                    <mat-option *ngFor="let ld of lenderData"  (onSelectionChange)="onChange($event,3)" [value]="ld">{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
-                                         </mat-select>
-                                
-                                </mat-form-field>
-                               </div>
-                               
-                        </mat-card-title>
-                       <!-- <pre> Full - {{doughnutChartDataForFullPD}} Smart -{{doughnutChartDataForSmartPD}} TELE -{{doughnutChartDataForTelePD}} </pre> -->
-                                        <mat-card-content>
-                                                <div fxLayout="row">
-                                                        <div fxFlex.gt-sm="30" fxFlex="100">
-                                                                <canvas baseChart class="chart" id="FullCanvas" name="FullCanvas"
-                                                                height="280px" width="280px"
-                                                                [data]="doughnutChartDataForFullPD"
-                                                                [labels]="doughnutChartLabels"
-                                                                [options]="doughnutOptions"
-                                                                [colors]="doughnutChartColors"
-                                                                [legend]="false"
-                                                                [chartType]="doughnutChartType"></canvas>
-                                                                <div  *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
-                                                        </div>
-                                                        <div fxFlex.gt-sm="5" fxFlex="100">
-                                                        </div>
-                                                        <div fxFlex.gt-sm="30" fxFlex="100">
-                                                                <canvas baseChart class="chart" id="SmartCanvas" name="SmartCanvas"
-                                                                height="280px" width="280px"
-                                                                [data]="doughnutChartDataForSmartPD"
-                                                                [labels]="doughnutChartLabels"
-                                                                [options]="doughnutOptions"
-                                                                [colors]="doughnutChartColors"
-                                                                [legend]="false"
-                                                                [chartType]="doughnutChartType"></canvas>
-                                                                <div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
-                                                        </div>
-                                                        <div fxFlex.gt-sm="5" fxFlex="100">
-                                                        </div>
-                                                        <div fxFlex.gt-sm="30" fxFlex="100">
-                                                                <canvas baseChart class="chart" id="TeleCanvas" name="TeleCanvas"
-                                                                height="280px" width="280px"
-                                                                [data]="doughnutChartDataForTelePD"
-                                                                [labels]="doughnutChartLabels"
-                                                                [options]="doughnutOptions"
-                                                                [colors]="doughnutChartColors"
-                                                                [legend]="false"
-                                                                [chartType]="doughnutChartType"></canvas>
-                                                                <div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
-                                                        </div>
-                                                </div>
+                </div>
+                <div fxFlex.gt-sm="25" fxFlex="100">
+                        <ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" (change)="onChange($event,'One')" [options]="options" #dateRangePicker></ngx-mat-drp>
+                        
+                </div>
+                <div fxFlex.gt-sm="25" fxFlex="100">
+                <mat-form-field class="example-full-width">
+                        <mat-select placeholder="City" [formControl]="myControl" multiple>
+                                <mat-select-trigger style="color:#fff;">
+                                        {{myControl.value ? myControl.value[0].name : ''}}
+                                        <span *ngIf="myControl.value?.length > 1" >
+                                        (+{{myControl.value.length - 1}} {{myControl.value?.length === 2 ? 'other' : 'others'}})
+                                        </span>
+                                </mat-select-trigger>
+                                <mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
+                        </mat-select>
+                        
+                </mat-form-field>
 
-                                          <div fxLayout="row">
-                                            <div fxFlex.gt-sm="100" fxFlex="100" >
-                                                <br><br><br><br><br><br>
-                                                    
-                                                 <ul class="lengend-list">
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#f44336"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Triggered</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#ffa500"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Allocated</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#ffeb3b"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Scheduled</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#3f51b5"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; InProgress</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#00ff00"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Completed</li>
-                                                        <li class="lengend-element"><span class="oval" style="background-color:#4caf50"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; QC Completed</li>
-                                                </ul>
-                                            </div> 
-                                        </div>
-                                        </mat-card-content>
-                    </mat-card>
-            </div>
-            
+                </div>
+                <div fxFlex.gt-sm="25" fxFlex="100">
+                
+                <mat-form-field class="example-full-width">
+                        <mat-select placeholder="Lender" [formControl]="myControl2" multiple>
+                                <mat-select-trigger style="color:#fff;">
+                                        {{myControl2.value ? myControl2.value[0].short_name : ''}}
+                                        <span *ngIf="myControl2.value?.length > 1" >
+                                        (+{{myControl2.value.length - 1}} {{myControl2.value?.length === 2 ? 'other' : 'others'}})
+                                        </span>
+                                        </mat-select-trigger>
+                                        <!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> -->
+                                        <mat-option *ngFor="let ld of lenderData"  (onSelectionChange)="onChange($event,3)" [value]="ld">{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
+                                </mat-select>
+                
+                </mat-form-field>
+                </div>
+                
+                </mat-card-title>
+        <!-- <pre> Full - {{doughnutChartDataForFullPD}} Smart -{{doughnutChartDataForSmartPD}} TELE -{{doughnutChartDataForTelePD}} </pre> -->
+                <mat-card-content>
+                        <div fxLayout="row" style="min-height:280px;">
+                                <div fxFlex.gt-sm="30" fxFlex="100">
+                                        <canvas baseChart class="chart" id="FullCanvas" name="FullCanvas"
+                                        height="280px" width="280px"
+                                        [data]="doughnutChartDataForFullPD"
+                                        [labels]="doughnutChartLabels"
+                                        [options]="doughnutOptions"
+                                        [colors]="doughnutChartColors"
+                                        [legend]="false"
+                                        [chartType]="doughnutChartType"></canvas>
+                                        <div  *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
+                                </div>
+                                 
+                                <div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
+                                        <canvas baseChart class="chart" id="SmartCanvas" name="SmartCanvas"
+                                        height="280px" width="280px"
+                                        [data]="doughnutChartDataForSmartPD"
+                                        [labels]="doughnutChartLabels"
+                                        [options]="doughnutOptions"
+                                        [colors]="doughnutChartColors"
+                                        [legend]="false"
+                                        [chartType]="doughnutChartType"></canvas>
+                                        <div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
+                                </div> 
+                                <div fxFlexOffset.gt-sm="5" fxFlex.gt-sm="30" fxFlex="100">
+                                        <canvas baseChart class="chart" id="TeleCanvas" name="TeleCanvas"
+                                        height="280px" width="280px"
+                                        [data]="doughnutChartDataForTelePD"
+                                        [labels]="doughnutChartLabels"
+                                        [options]="doughnutOptions"
+                                        [colors]="doughnutChartColors"
+                                        [legend]="false"
+                                        [chartType]="doughnutChartType"></canvas>
+                                        <div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
+                                </div>
+                        </div>
+                        <div fxLayout="row">
+                                <div fxFlex.gt-sm="100" fxFlex="100">
+                                <ul class="lengend-list">
+                                <li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Draft</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#f44336"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Triggered</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#ffa500"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Allocated</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#ffeb3b"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Scheduled</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#3f51b5"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; InProgress</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#00ff00"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; Completed</li>
+                                <li class="lengend-element"><span class="oval" style="background-color:#4caf50"> &nbsp;&nbsp;&nbsp;&nbsp; </span>&nbsp; QC Completed</li>
+                                </ul> 
+                                </div>
+                        </div>
+                </mat-card-content>
+        </mat-card>
+        </div>
+        
 </div> 
\ No newline at end of file
diff --git a/ng6-seed/src/app/dashboard/dashboard.component.scss b/ng6-seed/src/app/dashboard/dashboard.component.scss
index 69e8f2f0f..35631b005 100644
--- a/ng6-seed/src/app/dashboard/dashboard.component.scss
+++ b/ng6-seed/src/app/dashboard/dashboard.component.scss
@@ -5,34 +5,17 @@ $p: 12px;
 mat-card-title{
     background-color:#E00201 !important;
     color:#fff;
-    //padding-bottom: 1rem;
-    //margin-bottom: 0px;
 }
 .mat-input-wrapper {
     background: #fff;
 }
-// .example-form {
-//   min-width: 150px;
-//   max-width: 500px;
-//   width: 95%;
-// }
+
 li
 {
-   display:block;
-   float:left;
+   display:inline;
+   //float:left;
 }
-
-//::ng-deep {
-  //  .mat-form-field-appearance-outline .mat-form-field-outline  {
-    //   color: white;
-    //}
-    //mat-form-field {
-      // .mat-hint, input, ::placeholder, .mat-form-field-label {
-       //   color: white;
-       //}
-    //}
- //}
-
+ 
 .example-full-width {
   width: 95%;
 }
@@ -49,23 +32,21 @@ li
 
 .lengend-list {
     list-style-type: none;
-    margin: 0;
-    padding: 0;
+    //margin: 0;
+   // padding: 0;
     overflow: hidden;
     text-align:justify;
 }
 
 .lengend-element {
-    font-size: 1rem;
+    //font-size: 1rem;
     padding-right: 3%;
 }
 
 .donut-inner{
     margin-top: -171px;
     margin-left: 120px;
-    //margin-bottom: 154px;
-    //margin-top: -221px;
-    //margin-left: 145px;
+    
 }
 
 .donut-inner h5 {
@@ -77,545 +58,10 @@ li
 	font-size:1rems;
 }
 
-// .profile {
-//     position: relative;
-//     width: 100%;
-//     height: 100%;
-//     background: rgba(white, .25);
-//     border-radius: 2px;
-//     overflow: hidden;
-//     box-shadow: 0 0 20px rgba(darken($red, 40%), .2);
-//     &.pre-enter {
-//         transform-origin: center center;
-//         transform: scaleY(0);
-//         .avatar {
-//             transform-origin: center top;
-//             transform: scaleY(0);
-//         }
-//         h1,
-//         h2,
-//         a.follow,
-//         a.link {
-//             opacity: 0;
-//             transform: translateY(300px);
-//         }
-//     }
-//     &.on-enter {
-//         animation: scaleYIn 1000ms ease-out forwards;
-//         .avatar {
-//             animation: scaleYIn-small 750ms ease-out forwards 1000ms;
-//         }
-//         h1,
-//         h2,
-//         a.follow,
-//         a.link {
-//             opacity: 1;
-//             animation: slideInUp 1000ms ease-out forwards;
-//         }
-//         h1 {
-//             animation-delay: 1050ms;
-//         }
-//         h2 {
-//             animation-delay: 1100ms;
-//         }
-//         a.follow {
-//             animation-delay: 1250ms;
-//         }
-//         li {
-//             &:nth-child(1) {
-//                 a.link {
-//                     animation-delay: 1300ms;
-//                 }
-//             }
-//             &:nth-child(2) {
-//                 a.link {
-//                     animation-delay: 1350ms;
-//                 }
-//             }
-//             &:nth-child(3) {
-//                 a.link {
-//                     animation-delay: 1400ms;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .background {
-//     position: absolute;
-//     top: 0;
-//     left: 0;
-//     width: 100%;
-//     height: 100%;
-//     background: white;
-//     border-radius: 2px;
-// }
-
-// .avatar,
-// .info {
-//     width: 100%;
-//     height: 50%;
-// }
-
-// .avatar {
-//     background: url('../../assets/images/1.jpg') no-repeat center center / cover;
-//     clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
-// }
-
-// .prof-list {
-//     li {
-//         display: inline-block;
-//         list-style: none;
-//     }
-// }
-
-// .info {
-//     display: flex;
-//     flex-flow: row wrap;
-//     align-items: center;
-//     align-content: center;
-//     justify-content: center;
-//     position: relative;
-//     text-align: center;
-//     h1 {
-//         padding: $p $p 0;
-//         width: 100%;
-//         font-size: 24px;
-//         font-weight: 800;
-//         letter-spacing: 2px;
-//         text-transform: uppercase;
-//     }
-//     h2,
-//     a.follow {
-//         display: block;
-       
-//         border-radius: 2px;
-//         padding: $p/2;
-//         color: white;
-//         font-size: 12px;
-//         font-weight: 500;
-//         letter-spacing: 1px;
-//         text-transform: uppercase;
-//     }
-//     h2 {
-//         background: $red;
-//         background: linear-gradient(135deg, rgba(#f5825f, 1) 0%, rgba(#f5005f, 1) 100%);
-//         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5825f', endColorstr='#f5005f', GradientType=1);
-//     }
-//     a.follow {
-//         margin-left: $p;
-//         background: $blue;
-//         background: linear-gradient(135deg, rgba(#05c8e0, 1) 0%, rgba(#057fe0, 1) 100%);
-//         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05c8e0', endColorstr='#057fe0', GradientType=1);
-//         &:hover,
-//         &:focus {
-//             background: #05c8e0;
-//             background: linear-gradient(135deg, rgba(lighten(#05c8e0, 10%), 1) 0%, rgba(lighten(#057fe0, 10%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#05c8e0, 10%)', endColorstr='lighten(#057fe0, 10%)', GradientType=1);
-//         }
-//         &:active {
-//             background: #057fe0;
-//             background: linear-gradient(135deg, rgba(darken(#05c8e0, 5%), 1) 0%, rgba(darken(#057fe0, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#05c8e0, 5%)', endColorstr='darken(#057fe0, 5%)', GradientType=1);
-//         }
-//     }
-//     ul {
-//         display: flex;
-//         justify-content: center;
-//         padding: $p/2;
-//         width: 100%;
-//         li {
-//             padding: $p/2;
-//         }
-//     }
-//     a.link {
-//         display: block;
-//         border-radius: 100%;
-//         background: $blue;
-//         width: 30px;
-//         height: 30px;
-//         line-height: 30px;
-//         display: block;
-//     }
-// }
-
-// a.link {
-//     &.portfolio {
-//         background: #f5c8bf;
-//         background: linear-gradient(135deg, rgba(#f5c8bf, 1) 0%, rgba(#f58dbf, 1) 100%);
-//         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c8bf', endColorstr='#f58dbf', GradientType=1);
-//         box-shadow: inset 0 0 10px rgba(#f58dbf, .5);
-//         &:hover,
-//         &:focus {
-//             background: lighten(#f5c8bf, 5%);
-//             background: linear-gradient(135deg, rgba(lighten(#f5c8bf, 5%), 1) 0%, rgba(lighten(#f58dbf, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#f5c8bf, 5%)', endColorstr='lighten(#f58dbf, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(lighten(#f58dbf, 5%), .5);
-//         }
-//         &:active {
-//             background: darken(#f5c8bf, 5%);
-//             background: linear-gradient(135deg, rgba(darken(#f5c8bf, 5%), 1) 0%, rgba(darken(#f58dbf, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#f5c8bf, 5%)', endColorstr='darken(#f58dbf, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(darken(#f58dbf, 5%), .5);
-//         }
-//     }
-//     &.codepen {
-//         background: #fcd000;
-//         background: linear-gradient(135deg, rgba(#fcd000, 1) 0%, rgba(#fc9a00, 1) 100%);
-//         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd000', endColorstr='#fc9a00', GradientType=1);
-//         box-shadow: inset 0 0 10px rgba(#fc9a00, .5);
-//         &:hover,
-//         &:focus {
-//             background: lighten(#fcd000, 5%);
-//             background: linear-gradient(135deg, rgba(lighten(#fcd000, 5%), 1) 0%, rgba(lighten(#fc9a00, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#fcd000, 5%)', endColorstr='lighten(#fc9a00, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(lighten(#fc9a00, 5%), .5);
-//         }
-//         &:active {
-//             background: darken(#fcd000, 5%);
-//             background: linear-gradient(135deg, rgba(darken(#fcd000, 5%), 1) 0%, rgba(darken(#fc9a00, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#fcd000, 5%)', endColorstr='darken(#fc9a00, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(darken(#fc9a00, 5%), .5);
-//         }
-//     }
-//     &.github {
-//         background: #41adc4;
-//         background: linear-gradient(135deg, rgba(#41adc4, 1) 0%, rgba(#4183c4, 1) 100%);
-//         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41adc4', endColorstr='#4183c4', GradientType=1);
-//         box-shadow: inset 0 0 10px rgba(#4183c4, .5);
-//         &:hover,
-//         &:focus {
-//             background: lighten(#41adc4, 5%);
-//             background: linear-gradient(135deg, rgba(lighten(#41adc4, 5%), 1) 0%, rgba(lighten(#4183c4, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(#41adc4, 5%)', endColorstr='lighten(#4183c4, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(lighten(#4183c4, 5%), .5);
-//         }
-//         &:active {
-//             background: darken(#41adc4, 5%);
-//             background: linear-gradient(135deg, rgba(darken(#41adc4, 5%), 1) 0%, rgba(darken(#4183c4, 5%), 1) 100%);
-//             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken(#41adc4, 5%)', endColorstr='darken(#4183c4, 5%)', GradientType=1);
-//             box-shadow: inset 0 0 10px rgba(darken(#4183c4, 5%), .5);
-//         }
-//     }
-// }
-
-// @media only screen and (min-width: 470px) {
-//     .profile {
-//         display: flex;
-//         &.pre-enter {
-//             transform: scaleX(0);
-//             .avatar {
-//                 transform-origin: left center;
-//                 transform: scaleX(0);
-//             }
-//             h1,
-//             h2,
-//             a.follow,
-//             a.link {
-//                 transform: translateX(300px);
-//             }
-//         }
-//         &.on-enter {
-//             animation-name: scaleXIn;
-//             .avatar {
-//                 animation-name: scaleXIn-small;
-//             }
-//             h1,
-//             h2,
-//             a.follow,
-//             a.link {
-//                 animation-name: slideInLeft;
-//             }
-//         }
-//     }
-//     .background {
-//         mix-blend-mode: overlay;
-//     }
-//     .avatar,
-//     .info {
-//         width: 50%;
-//         height: 100%;
-//     }
-//     .avatar {
-//         clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-//     }
-// }
-
-// @media only screen and (min-width: 470px) and (min-height: 600px) {
-//     .profile {
-//         max-height: 400px;
-//     }
-// }
-
-
-// /* https://goo.gl/jIUq3E */
-
-// @keyframes scaleXIn {
-//     0% {
-//         transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     4.7% {
-//         transform: matrix3d(0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     9.41% {
-//         transform: matrix3d(0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     14.11% {
-//         transform: matrix3d(1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     18.72% {
-//         transform: matrix3d(1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     24.32% {
-//         transform: matrix3d(1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     29.93% {
-//         transform: matrix3d(1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     35.54% {
-//         transform: matrix3d(0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     41.04% {
-//         transform: matrix3d(0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     52.15% {
-//         transform: matrix3d(0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     63.26% {
-//         transform: matrix3d(1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     85.49% {
-//         transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-
-// /* https://goo.gl/auuhcg */
-
-// @keyframes scaleYIn {
-//     0% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     4.7% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     9.41% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     14.11% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     18.72% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     24.32% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     29.93% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     35.54% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     41.04% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     52.15% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     63.26% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     85.49% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-
-// /* https://goo.gl/dNBqrt */
-
-// @keyframes scaleXIn-small {
-//     0% {
-//         transform: matrix3d(0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     6.31% {
-//         transform: matrix3d(0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     12.51% {
-//         transform: matrix3d(0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     18.82% {
-//         transform: matrix3d(0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     25.03% {
-//         transform: matrix3d(0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     37.54% {
-//         transform: matrix3d(0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     50.05% {
-//         transform: matrix3d(0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     75.08% {
-//         transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-
-// /* https://goo.gl/jZL0uj */
-
-// @keyframes scaleYIn-small {
-//     0% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     6.31% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.384, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     12.51% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.621, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     18.82% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     25.03% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.862, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     37.54% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.952, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     50.05% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     75.08% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-
-// /* https://goo.gl/Ne0Mkr */
-
-// @keyframes slideInLeft {
-//     0% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 300, 0, 0, 1);
-//     }
-//     6.31% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.858, 0, 0, 1);
-//     }
-//     12.51% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 113.68, 0, 0, 1);
-//     }
-//     18.82% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 68.663, 0, 0, 1);
-//     }
-//     25.03% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 41.37, 0, 0, 1);
-//     }
-//     37.54% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.382, 0, 0, 1);
-//     }
-//     50.05% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.724, 0, 0, 1);
-//     }
-//     75.08% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.381, 0, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-
-// /* https://goo.gl/MSqtd5 */
-
-// @keyframes slideInUp {
-//     0% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1);
-//     }
-//     6.31% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 184.858, 0, 1);
-//     }
-//     12.51% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 113.68, 0, 1);
-//     }
-//     18.82% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 68.663, 0, 1);
-//     }
-//     25.03% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 41.37, 0, 1);
-//     }
-//     37.54% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 14.382, 0, 1);
-//     }
-//     50.05% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.724, 0, 1);
-//     }
-//     75.08% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.381, 0, 1);
-//     }
-//     100% {
-//         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-//     }
-// }
-
-// //wheather
-// .card-wheather {
-//     height: 220px;
-//     color: #fff;
-// }
-
-
-
-// .city {
-  
-//     font-size: 26px;
-// }
-
-// .date {
-//     font-size: 20px;
-//     line-height: 40px;
-// }
-
-// .sun {
-//     height: 70px;
-// }
-
-// .grad-blue {
-//     background: linear-gradient(58deg, #f44336, #673ab7);
-//     color: #fff;
-// }
-
-// .grad-green {
-//     background: linear-gradient(58deg, #009688, #673ab7);
-//     color: #fff;
-// }
-
-// .grad-red {
-//     background: linear-gradient(58deg, #f44336, #673ab7);
-//     color: #fff;
-// }
-// .card-wheather{
-//     padding: 2rem;
-// }
-// .temp {
-//     font-size: 50px;
-//     display: inline-block;
-// }
+ 
 mat-card-content{
 min-height: 400px;
 }
 .chart{
-    
-    padding: 0.8rem;
+     padding: 0.8rem;
 }
\ No newline at end of file
diff --git a/ng6-seed/src/app/layouts/admin/admin-layout.component.html b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
index 93218012f..3b54dc446 100644
--- a/ng6-seed/src/app/layouts/admin/admin-layout.component.html
+++ b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
@@ -312,7 +312,7 @@
      <div class="body-container">
         <router-outlet></router-outlet>
      </div>
-     <mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
+     <mat-sidenav #end position="end"  mode="over" opened="false">
         <div style="text-align: center;">Not Yet Scheduled</div>
         <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
             <mat-tab>