<!-- main -->
<div class="col">
  <div class="bg-light lter b-b wrapper-md">
   <h1 class="font-thin h4"> <a ui-sref="app.page.reports"> Reports</a></h1>
 </div>
</div>
<div class="wrapper-md">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 ">
      <!-- <h4 class="m-t-xs">Filters</h4> -->
      <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <form class="bs-example form-horizontal">
          <div class="form-group">
            <label class="col-lg-1 col-md-2 col-sm-3 col-xs-4 control-label">From Date:</label>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-7">
              <input type="text" class="form-control" placeholder="From Date" >
            </div>
            <div class="marginbetween"></div>
            <label class="col-lg-1 col-md-2 col-sm-3 col-xs-4  control-label">To Date:</label>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-7">
              <input type="text" class="form-control" placeholder="To Date" >
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
             <button type="submit" class="btn btn-sm btn-danger btn-rounded">Go</button>
           </div> 
         </div>
       </form>
     </div>
   </div>
 </div>
</div>
<!-- </div>
  <div class="wrapper-md"> -->
    <div class="row">
      <div class="col-md-12">
        <h4 class="m-t-xs">Filters</h4> 
        <div class="row">
         <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Organization</option>
              <option value="foo">All</option>
              <option value="bar">A</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
            </select>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <select class="form-control m-t" required >
              <option value="">Branch</option>
              <option value="foo">All</option>
              <option value="bar">A</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
            </select>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Industry</option>
              <option value="foo">All</option>
              <option value="bar">A</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
            </select>
          </div>
          <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Query</option>
              <option value="foo">Ticket</option>
              <option value="bar">Page</option>
              <option value="bar">Content</option>
              <option value="bar">Question</option>
              <option value="bar">Recommendation</option>
            </select>
          </div>
        </div>
       <!--  <div class="col-md-2">
           <a href style="font-size:14px;" class="btn m-t w-xs btn-sm btn-success btn-rounded">Submit</a>
         </div> -->
       </div>
       <div class="row">
         <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12">
          <div class="col-md-4 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Food</option>
              <option value="foo">All</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
              <option value="bar">D</option>
            </select>
          </div>

          <div class="col-md-4 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Service</option>
              <option value="foo">All</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
              <option value="bar">D</option>
            </select>
          </div>

          <div class="col-md-4 col-sm-4 col-xs-6">
            <select class="form-control m-t"  required >
              <option value="">Premises</option>
              <option value="foo">All</option>
              <option value="bar">B</option>
              <option value="bar">C</option>
              <option value="bar">D</option>
            </select>
          </div>
        </div>
        <div class="col-lg-6 col-md-4 col-sm-12 col-xs-12">
          <div class="col-lg-3 col-md-6 col-sm-3 col-xs-6">
           <a href style="font-size:14px;" class="btn m-t w-xs btn-sm btn-success btn-rounded">Submit</a>
         </div>
         <div class="col-lg-3 col-md-6 col-sm-3 col-xs-6">
           <a href style="font-size:14px;" class="btn m-t w-xs btn-sm btn-primary btn-rounded">Export</a>
         </div>
       </div>

     </div>
   </div>
 </div>
</div>
<div class="wrapper-md">
  <div class="panel panel-default">
    <div class="panel-heading font-bold">   
      Results
    </div>
    <div class="table-responsive">
      <table ui-jq="dataTable" ui-options="{
      sAjaxSource: 'vendor/jquery/datatables/datatable.json',
      aoColumns: [
      { mData: 'engine' },
      { mData: 'browser' },
      { mData: 'platform' },
      { mData: 'version' },
      { mData: 'grade' }
      ]
    }" class="table table-striped m-b-none">
    <thead>
      <tr>
        <th  style="width:20%">Rendering engine</th>
        <th  style="width:25%">Browser</th>
        <th  style="width:25%">Platform(s)</th>
        <th  style="width:15%">Engine version</th>
        <th  style="width:15%">CSS grade</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>
</div>
</div>