<div class="content-wrapper" ng-if="!myAccess.unfilledDiaryReport">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 offset-sm-1 offset-md-2 offset-lg-3 mt-5">
        <div class="alert alert-warning alert-dismissible">
          <h5><i class="icon fas fa-ban"></i> Warning!</h5>
          Unauthorised Access.
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .customTooltip {
    padding: 0 20px;
  }
  .form-control.is-valid,
  .was-validated .form-control:valid {
    padding-right: 0px !important;
    background-position: right calc(0.5em + 0.15rem) !important;
    background-size: calc(0.1em + 0.375rem) calc(0.1em + 0.375rem) !important;
  }
  #blackout {
    width: 100%;
    height: 100%; /* make sure you have set parents to a height of 100% too*/
    position: absolute;
    background: #0202027a;
    left: 0;
    top: 0;
    z-index: 10; /*just to make sure its on top*/
  }
</style>
<div id="blackout" style="display: none"></div>
<div class="content-wrapper" ng-if="myAccess.unfilledDiaryReport">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-3">
          <h1 class="text-olive ng-binding">
            <go-back class="ng-isolate-scope"
              ><span class="pointer" title="Back"
                ><i class="fas fa-chevron-left"></i></span
            ></go-back>
            <i class="fas fa-book"></i> My Diary Unfilled Monthly Report
          </h1>
        </div>
        <div class="col-sm-2 offset-2">
          <button
            ng-click="goTo($event,'MyDiaryUnfilledReportWeekly')"
            type="button"
            class="btn btn-warning"
          >
            <span class="d-none d-lg-inline-block"
              >Go To Weekly Unfilled Report</span
            >
          </button>
        </div>
        <div class="col-sm-5">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item">
              <a ng-href="/dashboard" href="/dashboard">Home</a>
            </li>
            <li class="breadcrumb-item active">My Diary</li>
            <li class="breadcrumb-item">
              <button
                class="dropdown-item"
                ng-click="goToSelf('heroesUploadFile',{employeeid:hero.employeeid})"
              >
                <i class="fas fa-upload"></i> Upload File
              </button>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row">
            <div class="col-sm-2">
              <select
                ng-model="filter.timezn"
                class="form-control ng-pristine ng-valid ng-empty ng-touched"
              >
                <!-- <option value="utc">UTC</option> -->
                <option value="Asia/Kolkata">India</option>
                <option value="America/Phoenix">USA</option>
                <option value="Australia/Melbourne">AUS</option>
              </select>
            </div>
            <div class="col-sm-2">
              <input
                type="month"
                class="form-control ng-pristine ng-valid ng-empty ng-touched"
                ng-model="filter.monthyear"
              />
            </div>
            <!-- <div class="col-sm-2"><input data-toggle="tooltip" title="From Date" type=text max-date="{{filter.toDate}}" date-picker placeholder='From Date (DD-MM-YYYY)' dateformat='dd-mm-yy' maxlength="10" ng-required='true' class='form-control' ng-model='filter.fromDate'/></div> -->
            <!-- <div class="col-sm-2"><input data-toggle="tooltip" title="To Date" type=text min-date="{{filter.fromDate}}" date-picker placeholder='To Date (DD-MM-YYYY)' dateformat='dd-mm-yy' maxlength="10" ng-required='true' class='form-control' min ng-model='filter.toDate'/></div> -->
            <div class="col-sm-2">
              <select
                data-toggle="tooltip"
                ng-change="projectByRevenue(filter.rc_name)"
                title="Select Revenue Center"
                id="rc_name"
                class="form-control custom-select"
                ng-model="filter.rc_name"
              >
                <option value="">Select Revenue Center</option>
                <option
                  ng-repeat="rc in revenueCenters"
                  value="{{rc.revenuecenterid}}"
                >
                  {{rc.rc_name}}
                </option>
              </select>
            </div>

            <div class="col-sm-4">
              <select
                id="project"
                data-toggle="tooltip"
                title="Select Project"
                class="form-control custom-select"
                ng-model="filter.proj_id"
                ng-options="p.id as p.name for p in project"
              ></select>
            </div>
            <div class="col-sm-2">
              <button class="btn btn-success" ng-click="dateChanged()">
                <i class="fa fa-filter"></i> Filter
              </button>
              <button
                ng-if="filter.proj_id!=0 && reportViewModel!='3' && showBtn == true && myDiary.default.length > 0"
                class="btn btn-success float-right"
                ng-disabled="isLocked==true"
                ng-click="locknNotify()"
              >
                <i class="fa fa-save"></i> Lock and Notify
              </button>
              <button
                ng-if="isLocked==true && isAdmin=='1'"
                class="btn btn-success float-right"
                ng-disabled="isLocked==false"
                ng-click="unlockMonthlyBilling()"
              >
                <i class="fa fa-save"></i> Unlock Monthly Billing
              </button>

              <!-- <button ng-if="filter.proj_id!=0 && reportViewModel=='3'" class="btn btn-success float-right" ng-if="showBtn" ng-click="PreBilledSaveWeekly()"><i class="fa fa-save"></i> Save</button> -->
            </div>
            <p ng-if="isLocked==true">Data has been locked for this month.</p>
          </div>
          <img
            class="loading-gif"
            ng-show="showLoader"
            ng-src="{{baseurl}}/app/uploads/loading.gif"
          />
        </div>
        <div class="col-md-12">
          <div class="card card-primary card-outline">
            <div class="card-header border-transparent mb-1">
              <h3 class="card-title">Report</h3>
              <div class="card-tools">
                <div class="btn-group">
                  <select
                    data-toggle="tooltip"
                    ng-change="reportView(reportViewModel)"
                    title="Select ReportView"
                    class="form-control custom-select"
                    ng-model="reportViewModel"
                  >
                    <option value="1">Extended</option>
                    <option value="2">Compact</option>
                    <option value="3">Weekly Compact</option>
                  </select>
                  <button
                    type="button"
                    title="Fullscreen Toggle"
                    class="btn btn-dark toggle-fullscreen"
                  >
                    <i class="fas fa-expand"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-widget="collapse"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive" ng-if="reportViewModel!='3'">
                <span ng-repeat="(key,val) in tblheader"
                  >{{key?key:'Date'}} test</span
                >
                <!-- For Extended & Compact -->
                <table
                  class="myDiaryDataTableView table table-bordered table-striped table-sm"
                  id="myDiaryDataTableView"
                >
                  <thead>
                    <tr>
                      <th class="fixedHeader">#</th>
                      <th class="fixedHeader">Hero</th>
                      <th class="fixedHeader">Emp Id</th>
                      <th class="fixedHeader">Location - Timezone</th>
                      <!--<th class="fixedHeader">Designation</th>-->
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="d in myDiary.default">
                      <td class="fixedHeader">{{$index+1}}</td>
                      <td class="fixedHeader">
                        <span>{{d.emp_first_name +' '+d.emp_last_name}}</span>
                      </td>
                      <td class="fixedHeader"><span>{{d.emp_code}}</span></td>
                      <td class="fixedHeader">
                        <span style="float:left;">{{d.country_name}}</span>
			<select ng-model="d.workingtz" class="form-control" style="width: 80px;margin-left: 30px;">
                          <option value="Asia/Kolkata">India</option>
                          <option value="America/Phoenix">USA</option>
                          <option value="Australia/Melbourne">AUS</option>
                        </select>
                      </td>
                       <!--<td class="fixedHeader">
                        <span>{{d.desg_name}}</span>
                      </td>-->

                      <!-- If lastdat is not saturday -->
                      <td
                        ng-repeat-start="fil in d.logged_hours"
                        style="text-align: end"
                        ng-if="fil.currentDay!=0"
                        class="{{ fil.dayType.includes('24') ? 'bg-warning' : '' }} {{fil.currentDay == 0 || fil.currentDay == 6 ? 'weekend' : ''}}"
                      >
                        <strong
                          ng-if="!fil.lastWeekData && !fil.lastDayOfMonth && fil.currentDay!=6"
                          >{{ fil.logtype == '' ? '0' : (
                          fil.dayType.includes('16') ||
                          fil.dayType.includes('17') ||
                          fil.dayType.includes('22') ||
                          fil.dayType.includes('23') ) ? 'L/H' : fil.hours }} {{
                          fil.dayType.includes('24') ? '(HF)' : '' }}</strong
                        >
                        <strong
                          ng-if="fil.lastWeekData && fil.lastDayOfMonth && fil.currentDay!=6"
                          >{{ fil.logtype == '' ? '0' : (
                          fil.dayType.includes('16') ||
                          fil.dayType.includes('17') ||
                          fil.dayType.includes('22') ||
                          fil.dayType.includes('23') ) ? 'L/H' : fil.hours }} {{
                          fil.dayType.includes('24') ? '(HF)' : '' }}</strong
                        >
                        <strong
                          ng-if="!fil.lastWeekData && !fil.lastDayOfMonth && fil.currentDay==6"
                          >0</strong
                        >
                        <strong ng-if="fil.lastWeekData && !fil.lastDayOfMonth"
                          >{{ fil.lastWeekData.hours }}</strong
                        >
                        <strong ng-if="!fil.lastWeekData && fil.lastDayOfMonth"
                          >{{ fil.lastWeekData.hours }}</strong
                        >
                      </td>

                      <td
                        ng-repeat-end
                        class="managerFilled {{fil.currentDay == 0 || fil.currentDay == 6 ? 'weekend' : ''}}"
                        ng-if="fil.currentDay!=0"
                      >
                        <span
                          ng-if="!fil.lastWeekData"
                          ng-model="fil.prebilled"
                          class="d-none"
                          >{{ fil.logtype == '' ? '-' : (
                          fil.dayType.includes('16') ||
                          fil.dayType.includes('17') ||
                          fil.dayType.includes('22') ||
                          fil.dayType.includes('23') ) ? '0' : fil.prebilled !=
                          null ? fil.prebilled : fil.hours }}</span
                        >

                        <input
                          ng-if="fil.lastWeekData && fil.lastDayOfMonth && fil.currentDay!=6"
                          type="number"
                          ng-disabled="fil.dayType.includes('16') || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') || fil.dates.search('Sun') != -1 || fil.dates.search('Sat') != -1 || isLocked == true"
                          id="prebilled{{d.employeeid}}{{$index}}"
                          ng-change="OnChangePrebilled(d.employeeid,$index,filter.proj_id,fil.inserton,fil.prebilled,'{{fil.prebilled}}',fil.logtype,d.workingtz)"
                          ng-model="fil.prebilled"
                          name="prebilled"
                          class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.logtype == '' ? '' : ( fil.dayType.includes('16')  || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') ) ? '' : fil.prebilled && fil.prebilled != 0 ? 'is-valid' : '' }}"
                          ng-value="{{ fil.logtype == '' ? 0 : ( fil.dayType.includes('16')  || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') ) ? 0 : fil.prebilled && fil.prebilled!=0 ? fil.prebilled : fil.hours }}"
                        />
                        <input
                          ng-if="!fil.lastWeekData && !fil.lastDayOfMonth && fil.currentDay!=6"
                          type="number"
                          ng-disabled="fil.dayType.includes('16') || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') || fil.dates.search('Sun') != -1 || fil.dates.search('Sat') != -1 || isLocked == true"
                          id="prebilled{{d.employeeid}}{{$index}}"
                          ng-change="OnChangePrebilled(d.employeeid,$index,filter.proj_id,fil.inserton,fil.prebilled,'{{fil.prebilled}}',fil.logtype,d.workingtz)"
                          ng-model="fil.prebilled"
                          name="prebilled"
                          class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.logtype == '' ? '' : ( fil.dayType.includes('16')  || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') ) ? '' : fil.prebilled && fil.prebilled != 0 ? 'is-valid' : '' }}"
                          ng-value="{{ fil.logtype == '' ? 0 : ( fil.dayType.includes('16')  || fil.dayType.includes('17') || fil.dayType.includes('22') || fil.dayType.includes('23') ) ? 0 : fil.prebilled && fil.prebilled!=0 ? fil.prebilled : fil.hours }}"
                        />

                        <strong
                          ng-if="fil.lastWeekData && fil.lastDayOfMonth && fil.currentDay==6"
                          >{{ fil.lastWeekData.preHours }}</strong
                        >
                        <strong
                          ng-if="fil.lastWeekData && !fil.lastDayOfMonth && fil.currentDay==6"
                          >{{ fil.lastWeekData.preHours }}</strong
                        >
                      </td>

                      <!-- If lastdat is saturday -->
                      <td
                        ng-repeat-start="fil in d.logged_hours"
                        style="text-align: end"
                        ng-if="fil.currentDay!=6 && fil.lastDayOfMonth && fil.currentDay!=0"
                        class="{{ fil.dayType.includes('24') != -1 ? 'bg-warning' : '' }} {{fil.currentDay == 0 || fil.currentDay == 6 || fil.lastDayOfMonth ? 'weekend' : ''}}"
                      >
                        <strong ng-if="!fil.lastWeekData"
                          >{{ fil.logtype == '' ? '-' : (
                          fil.daytype.includes('16') ||
                          fil.daytype.includes('17') ||
                          fil.daytype.includes('22') ||
                          fil.daytype.includes('23') ) ? 'L/H' : fil.hours }} {{
                          fil.daytype.includes('24') ? '(HF)' : '' }}</strong
                        >
                        <strong ng-if="fil.lastWeekData"
                          >{{ fil.lastWeekData.hours }}</strong
                        >
                      </td>

                      <td
                        ng-repeat-end
                        class="managerFilled {{fil.currentDay != 6 && fil.lastDayOfMonth && fil.currentDay!=0? 'weekend' : ''}}"
                        ng-if="fil.currentDay!=6 && fil.lastDayOfMonth && fil.currentDay!=0"
                      >
                        <span
                          ng-if="!fil.lastWeekData"
                          ng-model="fil.prebilled"
                          class="d-none"
                          >{{ fil.logtype == '' ? '-' : (
                          fil.dayType.includes('16') ||
                          fil.daytype.includes('17') ||
                          fil.daytype.includes('22') ||
                          fil.daytype.includes('23') ) ? '0' : fil.prebilled !=
                          null ? fil.prebilled : fil.hours }}</span
                        >
                        <!-- <input ng-if="!fil.lastWeekData" type="text" ng-disabled="fil.daytype.includes('16') != -1 || fil.daytype.includes('17') != -1 || fil.dates.search('Sun') != -1 || fil.dates.search('Sat') != -1" id="prebilled{{d.employeeid}}{{$index}}" ng-change="OnChangePrebilled(d.employeeid,$index,filter.proj_id,fil.inserton,fil.prebilled,'{{fil.prebilled}}',fil.logtype,d.workingtz)" ng-model="fil.prebilled" name="prebilled" class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.logtype == '' ? '' : ( fil.daytype.includes('16') != -1 || fil.daytype.includes('17') != -1) ? '' : fil.prebilled && fil.prebilled != 0 ? 'is-valid' : '' }}" ng-value="{{ fil.logtype == '' ? 0 : ( fil.daytype.includes('16') != -1 || fil.daytype.includes('17') != -1) ? 0 : fil.prebilled && fil.prebilled!=0 ? fil.prebilled : fil.hours }}"> -->
                        <strong ng-if="fil.lastWeekData"
                          >{{ fil.lastWeekData.preHours }}</strong
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div class="table table-responsive" ng-if="reportViewModel=='3'">
                <span ng-repeat="(key,val) in tblheader2"
                  >{{key?key:'Date'}} test</span
                >
                <!-- For Extended & Compact -->
                <table
                  class="myDiaryDataTableView2 table table-bordered table-striped table-sm"
                  id="myDiaryDataTableView2"
                >
                  <thead>
                    <tr>
                      <th class="fixedHeader">#</th>
                      <th class="fixedHeader">Hero</th>
                      <th class="fixedHeader">Emp Id</th>
                      <th class="fixedHeader">Location - Timezone</th>
                       <!--<th class="fixedHeader">Designation</th>-->
                      <!-- <th class="fixedHeader">Revenue Centre</th> -->
                      <!-- <th class="fixedHeader">Email ID</th> -->
                      <!-- <th ng-repeat-start="numWeek in numOfWeeksArr">
                                            <span>{{ numWeek.week }}-({{numWeek.days}})</span>
                                        </th>
                                        <th ng-repeat-end>
                                            <span>{{ numWeek.week }}-({{numWeek.days}})</span>
                                        </th> -->
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="d in myDiary.default">
                      <td class="fixedHeader">{{$index+1}}</td>
                      <td class="fixedHeader">
                        <span>{{d.emp_first_name +' '+d.emp_last_name}}</span>
                      </td>
                      <td class="fixedHeader"><span>{{d.emp_code}}</span></td>
                      <td class="fixedHeader">
                        <span style="float:left;">{{d.country_name}}</span>
			<select ng-model="d.workingtz" class="form-control"  style="width: 80px;margin-left: 30px;">
                          <option value="Asia/Kolkata">India</option>
                          <option value="America/Phoenix">USA</option>
                          <option value="Australia/Melbourne">AUS</option>
                        </select>
                      </td>
                      <!-- <td class="fixedHeader">
                        <span>{{d.desg_name}}</span>
                      </td>-->

                      <!-- <td class="fixedHeader"><span>{{d.rc_name}}</span></td> -->
                      <!-- <td class="fixedHeader"><span>{{d.emp_email}}</span></td> -->
                      <!-- For weekly -->
                      <td
                        ng-repeat-start="fil in d.weeklyHours"
                        style="text-align: end"
                      >
                        <strong>{{ fil.hours }}</strong>
                      </td>
                      <td
                        ng-repeat-end
                        class="managerFilled"
                        ng-if="filter.proj_id!=0"
                      >
                        <span ng-model="fil.preHours" class="d-none"
                          >{{ fil.preHours != null ? fil.preHours : fil.hours
                          }}</span
                        >
                        <!-- <input type="text" disabled="true" id="prebilled{{d.employeeid}}{{$index}}"  ng-model="fil.preHours" name="preHours" class="form-control text-bold {{filter.proj_id==0 ? 'd-none' : ''}} {{ fil.preHours != null ? 'is-valid' : '' }}" value="{{ fil.preHours != null ? fil.preHours : fil.hours }}"> -->
                        <strong
                          >{{ fil.preHours != null ? fil.preHours : fil.hours
                          }}</strong
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div
            class="card card-primary card-outline"
            ng-if="consolidatedData.length>0"
          >
            <div class="card-header border-transparent mb-1">
              <h3 class="card-title">
                Consolidate Data |
                <strong>Billing Type : {{billingType}}</strong>
              </h3>
              <div class="card-tools">
                <div class="btn-group">
                  <button
                    type="button"
                    class="btn btn-success ng-scope"
                    ng-click="changeConsolidatedData()"
                  >
                    <i class="fa fa-refresh"></i> Render
                  </button>
                  <button
                    type="button"
                    title="Fullscreen Toggle"
                    class="btn btn-dark toggle-fullscreen"
                  >
                    <i class="fas fa-expand"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-widget="collapse"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive">
                <table
                  class="myDiaryDataTableView table table-bordered table-striped table-sm"
                >
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Hero</th>

<th>Billing As</th>
                      <th class="{{billingType=='Daily'?'bg-warning':''}}">
                        Total Days
                      </th>
                      <!-- <th>Total Days / Hr.</th> -->
                      <th class="{{billingType=='Hourly'?'bg-warning':''}}">
                        Total Month Hours
                      </th>
                      <th>Rate</th>
                      <th>
                        Total {{billingType=='Daily'?'( Total Days x Rate)':''}}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="row in consolidatedData">
                      <td>{{$index+1}}</td>
 			
                      <td><span>{{row.empName}}</span></td>
<td>{{row.profilename}}</td>
                      <!-- <td class="{{billingType=='Daily'?'bg-warning':''}}">
                        <span>{{row.totalDays}}</span>
                      </td> -->
                      <td class="{{billingType=='Daily'?'bg-warning':''}}">
                        <span
                          >{{ row.totalMonthHours!=0 ? row.totalMonthHours / 8 :
                          0 }}</span
                        >
                      </td>
                      <td class="{{billingType=='Hourly'?'bg-warning':''}}">
                        <span>{{row.totalMonthHours}}</span>
                      </td>
                      <td><span>{{row.billing_rate}}</span></td>
                      <td><span>{{row.total}}</span></td>
                    </tr>
                    <tr>
                      <td>Total</td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
<td></td>
                      <td>{{sum('total',consolidatedData)}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div
            class="card card-primary card-outline"
            ng-if="consolidatedData.length>0"
          >
            <div class="card-header border-transparent mb-1">
              <h3 class="card-title"><strong>Invoice</strong></h3>
              <div class="card-tools">
                <div class="btn-group">
                  <button
                    type="button"
                    title="Fullscreen Toggle"
                    class="btn btn-dark toggle-fullscreen"
                  >
                    <i class="fas fa-expand"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-widget="collapse"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive">
                <table class="table table-bordered table-striped table-sm">
                  <tr>
                    <td>Attn.</td>
                    <td>{{invoiceData.attn}}</td>
                  </tr>

                  <tr>
                    <td>To</td>
                    <td>{{invoiceData.invoice_to}}</td>
                  </tr>
                  <tr>
                    <td>CC</td>
                    <td>{{invoiceData.invoice_cc}}</td>
                  </tr>
                  <tr>
                    <td>Company Name</td>
                    <td>{{invoiceData.company_name}}</td>
                  </tr>
                  <tr>
                    <td>Project Name</td>
                    <td>{{invoiceData.project_code}}</td>
                  </tr>
                  <tr>
                    <td>Description</td>
                    <td style="margin-bottom: 2rem; white-space: pre-wrap">
                      {{invoiceData.description}}
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<style>
  .loading-gif {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 50px 0px 0px -50px;
    width: 10%;
    z-index: 999;
  }
  .weekend {
    background-color: gray;
  }
  .fixedHeader {
    background-color: #f1f1f1;
    z-index: 9999;
  }
  th,
  td {
    white-space: nowrap;
  }
</style>
