<style>
     .chart-holder {
     height: 325px;
     }
     .cirque-stats {
     text-align: center;
     }
     .cirque-stats .cirque-container {   
     margin-top: 1.5em;
     margin-bottom: 1.5em;   
     margin-right: 2em;
     margin-left: 2em;
     }

     .subnavbar .mainnav > li:nth-child(6) > a{

     color: #ca5c6a;

     }

     .table {
     border-collapse: separate;
     padding: 0px;
      
     }
  

     .highcharts-button-box{
      display: none;
     }

     
     .highcharts-button-symbol{
      display: none;
     }
     

     .highcharts-map-navigation{
      background-color: #eee;
      border-color: grey;
     }

    #chart svg {
    height: 400px;
    }  

  @import 'https://code.highcharts.com/css/themes/sand-signika.css';   

  </style>

  <div class="main">

    <div style="padding: 0 3%; margin-left: 15px;">
      <div class="row">
        <div class="col-md-6">
          <div class="customInputWrap">
            <div style="margin-left: 0px;">

               <label>Date Range Filter</label>
               <form name="myForm">
  	              <input  type="text" ng-model="drf.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
  	              <input type="text" ng-model="drf.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
  	                <button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submitDate()" style="float: left; display: none;">Apply</button>
  	                <button class="btn btn-primary" ng-click="submitDate()" style="float: left;">Apply</button>
  	                <div class="clearfix"></div>

                </form>

             </div>

              <div class="clearfix"></div>

         </div>

            <div class="widget stacked">
              <div class="widget-header">
                <i class="icon-bar-chart"></i>

                <h3>${{ordersCost | number :2}}/{{ordersCount}} Fuel Sales</h3>

              </div>
              <!-- /widget-header -->
              <div class="widget-content">
                <nvd3 options="optionsmfs" data="datamfs"></nvd3>
                <!-- /bar-chart -->
              </div>
              <!-- /widget-content -->
            </div>
            <!-- /widget -->
          </div>
          <!-- /.span6 -->
          <div class="col-md-6">
            <div class="customInputWrap">
              <div style="margin-left: 0px;">
                <label>Date Range Filter</label>
                <form name="myForm1">
                  <input  type="text" ng-model="hfp.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
                  <input type="text" ng-model="hfp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
                    <button class="btn btn-primary" ng-disabled="myForm1.$invalid" ng-click="submitDateHfp()" style="float: left; display: none;">Apply</button>
                    <button class="btn btn-primary" ng-click="submitDateHfp()" style="float: left;">Apply</button>
                    <div class="clearfix"></div>
                  </form>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="widget stacked">
                <div class="widget-header">
                  <i class="icon-bar-chart"></i>
                  <h3>Historic Fuel Pricing</h3>
                </div>
                <!-- /widget-header -->

                 <div class="widget-content">
                <!--  <nvd3 options="optionshfp" data="datahfp"></nvd3> -->

                  <!-- /pie-chart -->

                  <div id="chart"><svg></svg></div>

                </div>
                <!-- /widget-content -->
              </div>
              <!-- /widget -->
            </div>
            <!-- /span6 -->
          </div>
          <div class="row"></div>
          <div class="row">
            <div class="col-md-6">
              <div class="customInputWrap">
                <div style="margin-left: 0px;">
                  <label>Date Range Filter</label>
                  <form name="myForm2">
                    <input  type="text" ng-model="cs.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
                    <input type="text" ng-model="cs.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
                      <button class="btn btn-primary" ng-disabled="myForm2.$invalid" ng-click="submitDateCs()" style="float: left; display: none;">Apply</button>
                      <button class="btn btn-primary" ng-click="submitDateCs()" style="float: left;">Apply</button>
                      <div class="clearfix"></div>
                    </form>
                  </div>
                  <div class="clearfix"></div>
                </div>

                <div class="widget stacked customersource">

                  <div class="widget-header">
                    <i class="icon-bar-chart"></i>
                    <h3>Customer Sources</h3>
                  </div>
                  <!-- /widget-header -->
                  <div class="widget-content">
                    <div style="margin-left: -15px;">
                      <nvd3 options="optionscs" class="custom-graph" data="datacs"></nvd3>

                    </div>

                    <!-- /pie-chart -->
                  </div>
                  <!-- /widget-content -->
                </div>
                <!-- /widget -->

              </div>

              <!-- /span6 -->

              <div class="col-md-6">

                 <div class="customInputWrap">

                  <div class="clearfix"></div>

                  </div> 
                  <div class="widget stacked">

                    <div class="widget-header">

                      <i class="icon-bar-chart"></i>
                      <h3>Regional PAP Pricing</h3>

                    </div>
                    <!-- /widget-header -->
                    <div class="widget-content">

                      <div ng-show="flag">
                       <center><img id="spinner" src="/img/spinner.gif"/></center>  
                      </div>

  
                      <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

                    </div>
                    <!-- /widget-content -->

                  </div>
                  <!-- /widget -->
                </div>
                <!-- /.span6 -->

              </div>

            </div>
            <!-- /container -->

            </div>

          <!-- /main -->

                <div class="customConfirmPopBackdrop" id="popup1">
                 <div class="customModalInner" style="max-width: 400px;">
                    <div class="customModelBody" style="border-radius: 5px 5px 0 0;max-height: 200px;overflow: hidden;overflow-y: auto;"">
                       <table border="1">
                          
                            <tr>

                             <th style="padding: 5px">Region</th> 

                             <th style="padding: 5px">Average PAP</th> 

                            </tr>
                            <tr ng-repeat="data in rppData">

                             <td style="padding: 5px">

                              {{data.region}}
                             </td>

                             <td style="padding: 5px">
                              {{data.averagePAP | number :4 }}
                             </td>

                          </tr>
                       </table>
                    </div>
                    <div class="customModelFooter text-right" style="border-top: 0px !important">

                       <button class="btn btn-primary" style="padding: 4px 0; width: 80px;" ng-click="cancelStatus()">Close</button>
                    </div>
                 </div>
              </div>