<div class="topDiv">
  <div class="row"
    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'Push Data Report' | translate}}</h4>
    </div>
  </div>

  <div class="row rowStyle">
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
            <!-- <div id="toast">
              <div id="desc">{{data_descip}}</div>
            </div> -->
          <div class="row" style="padding: 8px;margin-bottom: 8px;">
           

          <div style="width: 100%;height:84vh;">
            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
              <thead style="background-color:#e0e0e0;color: #444444;">
                <tr>
                  <th style="text-align:left;width:100px">{{'Vehicle Name'|translate}} </th>
                  <th style="text-align:left;width:100px">{{'IMEI' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Pushing Date' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Device Date' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Integartion Id' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Last Location' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'GMT' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'GPS Date' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Response' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Raw' | translate}}</th>
                  <!-- <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Remark' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Update Status' | translate}}</th> -->

                </tr>
              </thead>
            </table>


          </div>

        <table id="headerTable" style="border: 1px solid black;width: 100%;
                    border-collapse: collapse;position: absolute;top: -62px;">
          <tr style="height:30px;border-top:1px solid black;">
            <td>
              <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
              date:"medium"}}
            </td>
            <!-- <td>
                    <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
                  </td> -->
          </tr>
        
        </table>