<div class="topDiv" style="background: #efecec;">
  <div class="row" style="height:70px" no-padding>
    <div class="col-sm-12 col-md-12">
        <app-all-menus></app-all-menus>
    </div>
  </div>
  <div *ngIf="showButton" class="pull-left mt-sm text-dark" style="background: linen;width: 24px;border-radius: 50%;
    height: 23px; position: absolute;z-index: 1;width: 24px;top: 103px;"  (click)="scrollLeft()">
    <i style="margin-left: 4px;" class="fa fa-chevron-circle-left" aria-hidden="true"></i>
  </div>
  
  <div #widgetsContent class="custom-slider-main ">
    <div class="col-sm-4 col-lg-2 " style="padding-right: 0;padding-left: 0;"
      *ngFor="let deviceSummary of DeviceSummaryArr">
      <div class="row" style="margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);"
        (click)="devicebystatus(deviceSummary.status)">
        <div class="col-sm-4 col-md-4 "
          [ngClass]="{ 'selectedRunning_1' :(deviceSummary.status == 'RUNNING'), 'selectedStopped_1' :(deviceSummary.status == 'STOPPED'),'selectedOur_1' :(deviceSummary.status == 'OUT OF REACH'),'selectAll_1' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling_1' :(deviceSummary.status == 'IDLE'),'expireStatus_1' :  (deviceSummary.status == 'EXPIRED'),'selectedNoGPS_1' :  (deviceSummary.status == 'NO DATA')}">
          <img src={{deviceSummary.icon}} alt="Total Vehicle" height="42" width="42">
        </div>
        <div class="col-sm-8 col-md-8 "
          [ngClass]="{ 'selectedRunning' :(deviceSummary.status == 'RUNNING'), 'selectedStopped' :(deviceSummary.status == 'STOPPED'),'selectedOur' :(deviceSummary.status == 'OUT OF REACH'),'selectAll' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling' :(deviceSummary.status == 'IDLE'),'expireStatus' :  (deviceSummary.status == 'EXPIRED'),'selectedNoGPS' :  (deviceSummary.status == 'NO DATA')}">
          <span style="font-weight : 500">{{deviceSummary.status |
            translate}}</span><br><span>{{deviceSummary.total}}</span>
        </div>
      </div>
    </div>

  </div>
  
  <div *ngIf="!showButton" class="pull-right mt-sm text-dark" style="background: linen; position: absolute;z-index: 1; width: 24px;
    height: 23px;right: 0px;top: 105px;border-radius: 50%;" (click)="scrollRight()">
<i style="margin-left: 4px;" class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  </div>
  
  <!-- <div class="menu-wrappers">
      <div class="row" style="margin-left: 1px;margin-right: 1px;margin-bottom: 10px;">
            <div class="col-sm-4 col-lg-2 " style="padding-right: 0;padding-left: 0;"  *ngFor="let deviceSummary of DeviceSummaryArr">
                <div class="row" style="margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);" (click)="devicebystatus(deviceSummary.status)">
                  <div class="col-sm-4 col-md-4 " [ngClass]="{ 'selectedRunning_1' :(deviceSummary.status == 'RUNNING'), 'selectedStopped_1' :(deviceSummary.status == 'STOPPED'),'selectedOur_1' :(deviceSummary.status == 'OUT OF REACH'),'selectAll_1' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling_1' :(deviceSummary.status == 'IDLE'),'selectedNoGPS_1' :  (deviceSummary.status == 'NO DATA')}" >
                      <img src={{deviceSummary.icon}} alt="Total Vehicle" height="42" width="42">
                  </div>
                  <div class="col-sm-8 col-md-8 " [ngClass]="{ 'selectedRunning' :(deviceSummary.status == 'RUNNING'), 'selectedStopped' :(deviceSummary.status == 'STOPPED'),'selectedOur' :(deviceSummary.status == 'OUT OF REACH'),'selectAll' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling' :(deviceSummary.status == 'IDLE'),'selectedNoGPS' :  (deviceSummary.status == 'NO DATA')}" >
                      <span style="font-weight : 500">{{deviceSummary.status | translate}}</span><br><span>{{deviceSummary.total}}</span>
                    </div>
                </div>        
              </div>      
      </div>
      </div> -->

  <div class="row" *ngIf="((superAdmin === true)||(custtype === true))" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;height: auto;">
   
  <div class="col-lg-4  col-sm-4" style="padding:0">
    <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
   <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
     <div class="col-12" style="text-align: center;padding-right: 0;">
       <p style="font-weight: 600;color:#9a9a9a;margin-bottom: 0;">{{'ADDED VEHICLES' | translate}}</p>
     </div>
   </div>
   <div class="row" style="text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
     <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalCount" >
       <div style="cursor: pointer;" (click)="getAddedVehList(count.key)" title="{{'Get Added Vehicle List' | translate}}">
        <p style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
        <p style="font-size: 20px;color: #777777;">{{count.key |translate}}</p>
       </div>
     </div>
   </div>
    </div>
  </div>
  <div class="col-lg-4  col-sm-4" style="padding:0;">
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);"> 
      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
        <div class="col-12" style="text-align: center;padding-right: 0;">
          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">{{'GOING TO EXPIRE VEHICLES' | translate}}</p>
        </div>
      </div>
      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalExpiredCount" >
          <div style="cursor: pointer;" (click)="getExpiredVehList(count.key)" title="{{'Get Expired Vehicle List'|translate}}">
            <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
            <p style="font-size: 20px;color: #777777;">{{count.key | translate}}</p>
          </div>
        
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4  col-sm-4" style="padding:0;">
    <!-- <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
        <div class="col-12" style="text-align: center;padding-right: 0;">
          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">BILLING DETAIL</p>
        </div>
      </div>
      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
        <div class="col-sm-12 col-lg-6 col-md-6" *ngFor="let count of billingDetailArr" >
          <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'pendingStyle' :(count.key == 'Pending'), 'paidStyle' :(count.key == 'Paid')}">{{count.value}}</p>
          <p style="font-size: 20px;color: #777777;">{{count.key}}</p>
        </div>
      </div>
    </div> -->
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);"> 
      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
        <div class="col-12" style="text-align: center;padding-right: 0;">
          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">{{'RENEWED VEHICLES'|translate}}</p>
        </div>
      </div>
      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalRenewedCount" >
          <div style="cursor: pointer;" (click)="renewedVehList(count.key)" title="{{'Get Renewed Vehicle List'|translate}}">
            <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
            <p style="font-size: 20px;color: #777777;">{{count.key | translate}}</p>
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>
  
  
  
   <div class="row" *ngIf="((superAdmin === false)&&(custtype === false))" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;">
  <div class="col-lg-3  col-sm-3" *ngIf="fuelShow === true" style="padding:0">
      <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
      <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
        <div class="col-12" style="padding: 0;">
          <div >
            <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">{{'FUEL PRICE' | translate}}</p>
            <md-select  style="color: white; padding: 0%; position: absolute; top: 0; right: 0;" [(ngModel)]="currState" (change)="getFuelprice(currState)"  ngDefaultControl>
              <md-option *ngFor="let ustate of Indianstate" [value]="ustate">
                {{ustate}}
              </md-option>
            </md-select>
          </div>   
        </div>
      </div>
      <div class="row" style="text-align: center;;height: 180px;max-height: 180px;padding-top: 7%;margin: 0;">
        <div class="col-sm-12 col-lg-6 col-md-6" *ngFor="let count of fuelCount" >
          <div style="cursor: pointer;">
            <p style="font-size: 20px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.fuel == 'Petrol'), 'weekStyle' :(count.fuel == 'Diesel')}">
              <i *ngIf="langSymbol ===true" style="font-size: 20px;" class="fas fa-rupee-sign"></i> 
              {{count.price}}/{{count.unit}}</p>
            <p style="font-size: 25px;color: #777777;">{{count.fuel |translate}}</p>
              <span>
              <span *ngIf="langSymbol === false">{{valueSymbol}}</span>
            </span>
          </div>
        </div>
      </div>
       </div>
  </div>
  <div class="col-lg-3  col-sm-3" *ngIf="fuelShow === false" style="padding:0"> 
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
        <canvas id="deviceBarChart" style="display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label="bar graph" role="img"></canvas>
    </div>
  </div>
  <div class="col-lg-3  col-sm-3" style= "padding:0;">
    <div style="margin-left: 5px;
    margin-right: 5px;
    background: white;
    box-shadow: 3px 1px 5px 0px rgb(178 176 174);
    height: 230px;
     "> 
    <!-- padding-top: 17px;
    padding-bottom: 17px; -->
  <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
    <div class="col-12" style="padding: 0;">
      <div>
        <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">{{'Alerts' |
          translate}}</p>
       
      </div>
    </div>
  </div>
    <div class="row" >
      <div class="col-lg-4" style="padding: 12px;text-align: center;" *ngFor="let noti of notificationArray">
        <span style="font-size: 20px;font-weight: 700;color: #cb0000">{{noti.count}}</span><br>
        <lable style="font-size: 18px;font-weight: 400;color:blueviolet">{{noti.name}}</lable>
      </div>
      </div>
    </div>
      <!-- <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
          <canvas id="utilisationChart" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
      </div>  -->

  </div>  
  <div class="col-lg-3  col-sm-3" style= "padding:0;">
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
        <canvas id="deviceExpense" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
    </div> 
</div>  
  <div class="col-lg-3  col-sm-3" style= "padding:0;;height: 230px">
    <div class="row" style="text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
      <div class="col-lg-12 col-sm-12" style="padding: 0%;">
        <div style="padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;">
          <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">Reminders</p>
          <md-select  style="position: absolute;top: 0%;right: 0%;padding-top: 3px;margin-left: 10px;color: white;" [(ngModel)]="reminderVal" (change)="getreminderevent($event)"  ngDefaultControl>
            <md-option *ngFor="let reminder of reminderType" [value]="reminder.value">
              {{reminder.viewValue}}
            </md-option>
          </md-select>
        </div>      
      </div>
    </div>  
    <div class="row" style="padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;">
      <div class="col-lg-12  col-sm-12" style="padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; ">
        <div style="height: 175px; overflow: auto">
          <ul style="padding-left: 20px;">
            <li *ngFor="let reminder of notifArr" style="font-size: 13px;margin-bottom: 2px;font-weight: 500;color: #cb0000;">{{reminder}}</li>
          </ul>        
        </div>       
      </div>
    </div> 
  </div>
</div>
 
  
      <div class="row" style="margin-left: 6px; margin-right: 6px;  margin-top: 5px;">
        <div class="col-sm-12 col-lg-12 col-md-6" style="padding: 0;">
          <div class="row" no-padding style="margin: 0;">
            <div class="col-sm-10 col-lg-10 col-md-6" style="padding:0">
              <!-- <i *ngIf="(superAdmin === true)||(isOrganisation === true)" class="fas fa-video" (click)="demoVideos()" mdTooltip="{{'Tutorial Video' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; font-size: 24px;margin-left: 12px;"></i> -->
                <!-- <div title="Demo Videos" style="display: initial;color: #5b7065;" (click)="demoVideos()"><i class="fas fa-video"></i></div> -->
                <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.3;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event,'id')" placeholder="{{'Device Search' | translate}}" />
            </div>
            <div class="col-sm-2 col-lg-2 col-md-6" style="padding-right: 0;padding-left: 0;">
                <button [disabled]="firstcall"  md-raised-button (click)="next()" style="float: right;background: #004445; color: white;font-size: 14px;width:50%;border-radius:0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174)" > {{'Next' | translate}} >>>  </button>
                <button [disabled]="lastcall" md-raised-button (click)="pre()" style="float:right;background: #2C7873; color: white;font-size: 14px;width:50%;border-radius:0px;"> <<< {{'Previous' | translate}} </button>      
            </div>    
          </div>        
        </div>
      </div>
      <div class="row" style="margin-left: 1px; margin-right: 1px;">
        <div class="col-sm-12 col-lg-12" style="padding: 0; font-size: 12px; color: black;margin-right: 10px;">
          <div style="overflow-x: auto;overflow-y: auto;margin-left: 5px; margin-right: 5px;background: white; box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);">
              <table id="myTable1" class="table table-striped table-hover" >
              <thead style="background: #426E86; color: white;">
                <tr>  
                  <th style="width: 50px;">{{'Icon' | translate}}</th>
                  <th style="width: 100px;" title="Registration number">{{'Reg. Num.' | translate}}</th>
                  <th style="width: 50px;">{{'Group' | translate}}</th>
                  <th style="width: 50px;">{{"Today's ODO" | translate}}</th>
                  <th style="width: 50px;">{{'Total ODO' | translate}}</th>
                  <th style="width: 500px; text-align: center;" title="Last location">{{'Location' | translate}}</th>
                  <th style="width: 100px;" title="Last updated on">{{'Last update' | translate}}</th>
                  <th style="width: 100px;">{{'Trip status' | translate}}</th>
                  <th style="width: 110px;">{{'Status' | translate}}</th>
                  <th *ngIf="((custtype == true)||(superAdmin == true))" style="width: 100px;">{{'User' | translate}}</th>
                  <th style="width: 50px;">{{'Satellites' | translate}}</th>  
                  <th style="width: 50px;" title="Last Speed">{{'Speed' | translate}}</th>
                  <th *ngIf="(ext_volt === true)||(ext_volt === undefined)" style="width: 50px;" title="Ext. Volt (V)">{{'Voltage' | translate}}</th>
                  <th style="width: 50px;" title="Temperature">{{'Temp' | translate}}</th>
                  <th style="width: 50px;" title="{{fuelvariable}}">Fuel</th>
                  <!-- <th *ngIf="(gps_column === true)||(gps_column === undefined)" style="width: 50px;">{{'GPS' | translate}}</th> -->
                  <th *ngIf="(ac_column === true)||(ac_column === undefined)" style="width: 50px;">{{'AC' | translate}}</th>
                  <th *ngIf="(power_column === true)||(power_column === undefined)" style="width: 50px;">{{'POWER' | translate}}</th>
                  <!-- <th *ngIf="(gsm_column === true)||(gsm_column === undefined)" style="width: 50px;" title="GSM Signal">{{'GSM' | translate}}</th> -->
                  <th *ngIf="(ignition_column === true)||(ignition_column === undefined)" style="width: 50px;" title="IGNITION">{{'IGN' | translate}}</th> 
                </tr>
              </thead>
              <tbody  style="cursor: pointer;">
                <tr *ngFor="let device of deviceData | orderBy: key : reverse | filter:myInput ;let i = index" >
              
                    <td>
                      <div *ngIf="iconCheck(device.status,device.iconType)">          
                        <img *ngIf="device.iconType === 'jcb'" width ='30px' style="margin-left: 10px;" src={{devIcon}}>
                        <img *ngIf="device.iconType != 'jcb'" width ='20px' style="margin-left: 10px;" src={{devIcon}}>
                      </div>
                    </td>
                    <td style="padding-left: 0px;padding-right: 0px;padding-top: 0px;" >
                      <i *ngIf="((device.Shared != undefined)&&(device.Shared.length != 0))" class="material-icons" style="font-size: 17px; color: #426e86; float: right; box-shadow: 1px 1px 1px; border-radius: 50px;" (click)="showSharedDevice(device)" title="shared device"> supervised_user_circle </i>
                      <div style="padding-top: 10px;">   
                        <p style="margin-bottom: 0px;">{{device.Device_Name}}</p>
                      </div>          
                    </td>
                    <!-- <td  style="cursor:pointer" >{{device.sim_number}}</td> -->
                    <td >{{device.vehicleGroup?device.vehicleGroup.name:''}}</td>
                    <td >
                      <div style="cursor: pointer;">
                        <img *ngIf="device.roadShow === true" style="width: 20px;cursor: pointer;margin-left: 4px;" src='{{roadicon}}' (click)=totalOdo(device) md-tooltip="Click to get today odo">
                        <div  *ngIf="device.roadShow === false">
                          <span >{{device.currentODO}}</span>    
                        </div>
                      </div>

                    </td>
                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.total_odo
                      ? (device.total_odo | number: '1.2-2' ): 0}}</td>
                    <td >
                      <div style="cursor: pointer;">
                        <!-- title="update Address" (click)="updateAddress(device)" -->
                        <!-- <img style="width: 20px;" src='../../assets/image/addressICON.png' (click)=getAddress(device) md-tooltip="Click to get device's last location"> -->
                        
                        <div >
                          <span md-tooltip="Device's last location" *ngIf="device.locationAddress!=null">{{device.locationAddress}}</span>
                          <span style="text-align: center;" md-tooltip="Device's last location" *ngIf="device.locationAddress==null">
                            <img style="width: 20px;" src='../../assets/image/addressICON.png' (click)=getAddress(device)
                              md-tooltip="Click to get device's last location">
                          </span>
                          <i *ngIf="(device.pen)" style="cursor: pointer;color:gray" class="fas fa-pen" title="update Address" (click)="updateAddress(device)"></i>
                          <i *ngIf="(device.pen)" class="fas fa-language" (click)="translateAddressToHindi(device)"></i> 
                        </div>
                      </div>
                    </td>
                    <td  style="width:200px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.last_ping_on|date:'medium'}}</td>
                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.currentTripStatus||'NA'}}</td>
                    <td  style="padding-left: 0px;padding-right: 0px;width:220px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">
                    <span>
                      {{device.status}}
                    </span> 
                    <span *ngIf="device.power=='0'" style="color: red;">[Power Disconnected]</span>
                    </td>
                    <td class="name" *ngIf="((custtype == true)||(superAdmin == true))" (click)="vewdevLogin(device.user._id)">{{device.user?(device.user.first_name + " "+ device.user.last_name):""}}</td>
                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.satellites?device.satellites:"NA"}}</td>
                    <td (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)" title="Last Speed">{{device.last_speed?device.last_speed:0}}</td>
                    <td *ngIf="(ext_volt === true)||(ext_volt === undefined)" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.battery?device.battery:0}}</td>
                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.temp?gettemp(device.temp):'0'}}</td>
                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)" title="{{fuelvariable}}">{{getfuel(device,i)}}</td>
                    <!-- <td *ngIf="(gps_column === true)||(gps_column === undefined)">
                      <div *ngIf="gpsStatus(device.gpsTracking) " md-tooltip={{gStatus}}>
                        <img style="width: 20px;" src={{gpsImg}}>
                      </div>
                    </td> -->
                    <td *ngIf="(ac_column === true)||(ac_column === undefined)">
                      <div *ngIf="gpsACStatus(device.ac)" md-tooltip={{aStatus}}>
                        <!-- <img style="width: 22px" src='../../assets/image/acimgGreen.png'> -->
                        <img style="width: 20px;" src={{ACImg}}>
                      </div>
                    </td>
                    <td *ngIf="(power_column === true)||(power_column === undefined)">
                      <div *ngIf="testtPower(device.power)" md-tooltip={{pStatus}}>
                        <img style="width: 20px;" src={{pwrURL}}>
                      </div>
                    </td>
                    <!-- <td *ngIf="(gsm_column === true)||(gsm_column === undefined)">
                      <div *ngIf="testSignal(device.gsmSignal,device)" md-tooltip={{gsmStatus}}>
                        <img style="width: 20px;" src={{gsmURL}}>
                      </div>
                    </td> -->
                    <td *ngIf="(ignition_column === true)||(ignition_column === undefined)">
                      <div *ngIf="test(device.last_ACC,device.last_ACC_on)" md-tooltip={{textStatus}}>
                        <img style="width: 20px;" src={{imgurl}}>
                      </div>
                    </td>

                  
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
     <div>   
</div>
<!-- "Device_Name Device_ID Shared status total_odo vehicleGroup type_of_device last_speed status_updated_at currentODO last_ACC_on gsmSignal power ac gpsTracking satellites temp last_location last_ping_on currentTripStatus last_ACC" -->




<!-- <div class="row" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;">
  <div class="col-lg-4  col-sm-4" style="padding:0">
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
        <canvas id="deviceBarChart" style="display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label="bar graph" role="img"></canvas>
    </div>
  </div>
  <div class="col-lg-3  col-sm-3" style= "padding:0;">
      <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
          <canvas id="utilisationChart" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
      </div> 
  </div>  
  <div class="col-lg-3  col-sm-3" style= "padding:0;">
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
        <canvas id="deviceExpense" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
    </div> 
</div>  
  <div class="col-lg-2  col-sm-2" style= "padding:0;;height: 230px">
    <div class="row" style="text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
      <div class="col-lg-12 col-sm-12" style="padding: 0%;">
        <div style="display:inline-flex;padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;">
          <p style="margin-bottom: 0;margin-left: 10px; margin-top: 3px;">Reminders</p>
          <md-select  style="padding-top: 0;margin-left: 10px;color: white;" [(ngModel)]="reminderVal" (change)="getreminderevent($event)"  ngDefaultControl>
            <md-option *ngFor="let reminder of reminderType" [value]="reminder.value">
              {{reminder.viewValue}}
            </md-option>
          </md-select>
        </div>      
      </div>
    </div>  
    <div class="row" style="padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;">
      <div class="col-lg-12  col-sm-12" style="padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; ">
        <div style="height: 175px; overflow: auto">
          <ul style="padding-left: 20px;">
            <li *ngFor="let reminder of notifArr" style="font-size: 11px;margin-bottom: 2px;font-weight: 500;color: #cb0000;">{{reminder}}</li>
          </ul>        
        </div>       
      </div>
    </div> 
  </div>
</div> -->







<!-- <div class="row" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;height: auto;">
  <div class="col-lg-4  col-sm-4" style="padding:0">
    <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
   <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
     <div class="col-12" style="text-align: center;padding-right: 0;">
       <p style="font-weight: 800;color:#9a9a9a;margin-bottom: 0;">ADDED VEHICLES</p>
     </div>
   </div>
   <div class="row" style="text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
     <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalCount" >
       <p style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
       <p style="font-size: 20px;font-weight: 700;color: #777777;">{{count.key}}</p>
     </div>
   </div>
    </div>
  </div>
  <div class="col-lg-4  col-sm-4" style="padding:0;">
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
   
      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
        <div class="col-12" style="text-align: center;padding-right: 0;">
          <p style="font-weight: 800;color:#9a9a9a;;margin-bottom: 0;">EXPIRED VEHICLES</p>
        </div>
      </div>
      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalExpiredCount" >
          <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
          <p style="font-size: 20px;font-weight: 700;color: #777777;">{{count.key}}</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4  col-sm-4" style= "padding:0;">  
    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
      <canvas id="utilisationChart" style="display: block; width: 650px; height: 241px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
  </div> 
</div>  
</div> -->