Widgets header small text goes here...

<!-- begin widget-map -->
<div class="widget-map widget-map-rounded">
  <!-- begin widget-input-container -->
  <div class="widget-input-container">
    <div class="widget-input-icon"><a href="#" class="text-inverse"><i class="fa fa-ellipsis-v"></i></a></div>
    <div class="widget-input-box">
      <input type="text" class="form-control" placeholder="Search here">
    </div>
    <div class="widget-input-icon"><a href="#" class=""><i class="fa fa-microphone"></i></a></div>
    <div class="widget-input-divider"></div>
    <div class="widget-input-icon"><a href="#"><i class="fa fa-location-arrow"></i></a></div>
  </div>
  <!-- end widget-input-container -->
  <!-- begin widget-map-body -->
  <div class="widget-map-body">
    <iframe src="-- googlemap embed url here --" width="100%" height="230" frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  <!-- end widget-map-body -->
  <!-- begin widget-map-list -->
  <div class="widget-map-list">
    <div class="widget-list widget-list-rounded m-b-30">
      <!-- begin widget-list-item -->
      <div class="widget-list-item">
        <div class="widget-list-media text-center">
          <a href="#"><i class="fab fa-twitter fa-3x"></i></a>
        </div>
        <div class="widget-list-content">
          <h4 class="widget-list-title">Twitter Headquater</h4>
          <p class="widget-list-desc">Corporate Office</p>
        </div>
        <div class="widget-list-action">
          <a href="#" data-toggle="dropdown" class="text-muted pull-right"><i class="fa fa-angle-right fa-2x"></i></a>
        </div>
      </div>
      <!-- end widget-list-item -->
    </div>
  </div>
  <!-- end widget-map-list -->
</div>
<!-- begin widget-map -->

<!-- begin widget-todolist -->
<div class="widget-todolist widget-todolist-rounded">
  <!-- begin widget-todolist-header -->
  <div class="widget-todolist-header">
    <div class="widget-todolist-header-left">
      <h4 class="widget-todolist-header-title">Todolist</h4>
    </div>
    <div class="widget-todolist-header-right">
      <div class="widget-todolist-header-total">
        <span class="text-inverse">0</span>
        <small>Done</small>
      </div>
    </div>
  </div>
  <!-- end widget-todolist-header -->
  
  <!-- begin widget-todolist-body -->
  <div class="widget-todolist-body">
    <!-- begin widget-todolist-item -->
    <div class="widget-todolist-item">
      <div class="widget-todolist-input">
        <div class="checkbox checkbox-css pt-0">
          <input type="checkbox" id="widget_todolist_1" />
          <label for="widget_todolist_1" class="p-l-15"> </label>
        </div>
      </div>
      <div class="widget-todolist-content">
        <h4 class="widget-todolist-title">Borrow Tony's travel guide</h4>
        <p class="widget-todolist-desc">Vacation in Rome</p>
      </div>
      <div class="widget-todolist-icon">
        <a href="#"><i class="fa fa-question-circle"></i></a>
      </div>
    </div>
    <!-- end widget-todolist-item -->
    ...
    <!-- begin widget-todolist-item -->
    <div class="widget-todolist-item">
      <div class="widget-todolist-input">
        <i class="fa fa-plus text-muted"></i>
      </div>
      <div class="widget-todolist-content">
        <input type="text" class="form-control" placeholder="Write your task here..." />
      </div>
    </div>
    <!-- end widget-todolist-item -->
  </div>
  <!-- end widget-todolist-body -->
</div>
<!-- end widget-todolist -->

<!-- begin widget-chat -->
<div class="widget-chat widget-chat-rounded">
  <!-- begin widget-chat-header -->
  <div class="widget-chat-header">
    <div class="widget-chat-header-icon">
      <i class="fab fa-earlybirds width-30 height-30 f-s-20 bg-yellow text-inverse text-center rounded-corner" style="line-height: 30px"></i>
    </div>
    <div class="widget-chat-header-content">
      <h4 class="widget-chat-header-title">Company Discussion Group</h4>
      <p class="widget-chat-header-desc">55 members, 4 online</p>
    </div>
  </div>
  <!-- end widget-chat-header -->
  
  <!-- begin widget-chat-body -->
  <div class="widget-chat-body" data-scrollbar="true" data-height="235px">
    <div class="text-center text-muted m-10 f-w-600">Today</div>
    <div class="widget-chat-item with-media left">
      <div class="widget-chat-media">
        <img alt="" src="../assets/img/user/user-1.jpg" />
      </div>
      <div class="widget-chat-info">
        <div class="widget-chat-info-container">
          <div class="widget-chat-name text-indigo">Hudson Mendes</div>
          <div class="widget-chat-message">Should we plan for a company trip this year?</div>
          <div class="widget-chat-time">6:00PM</div>
        </div>
      </div>
    </div>
    <div class="widget-chat-item right">
      ...
    </div>
  </div>
  <!-- end widget-chat-body -->
  
  <!-- begin widget-input -->
  <div class="widget-input widget-input-rounded">
    <form action="" method="POST" name="">
      <div class="widget-input-container">
        <div class="widget-input-icon"><a href="#" class="text-grey"><i class="fa fa-camera"></i></a></div>
        <div class="widget-input-box">
          <input type="text" class="form-control" placeholder="Write a message..." />
        </div>
        <div class="widget-input-icon"><a href="#" class="text-grey"><i class="fa fa-smile"></i></a></div>
        <div class="widget-input-divider"></div>
        <div class="widget-input-icon"><a href="#" class="text-grey"><i class="fa fa-microphone"></i></a></div>
      </div>
    </form>
  </div>
  <!-- end widget-input -->
</div>
<!-- end widget-chat -->

<!-- begin widget-list -->
<div class="widget-list widget-list-rounded m-b-30">
  <!-- begin widget-list-item -->
  <div class="widget-list-item">
    <div class="widget-list-media">
      <img src="../assets/img/user/user-1.jpg" class="rounded" />
    </div>
    <div class="widget-list-content">
      <h4 class="widget-list-title">Christopher Struth</h4>
      <p class="widget-list-desc">Bank Transfer</p>
    </div>
    <div class="widget-list-action">
      <a href="#" data-toggle="dropdown" class="text-muted pull-right">
        <i class="fa fa-ellipsis-h f-s-14"></i>
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
        ...
      </ul>
    </div>
  </div>
  <!-- end widget-list-item -->
</div>
<!-- end widget-list -->

<!-- begin widget-list -->
<div class="widget-list widget-list-rounded">
  <!-- begin widget-list-item -->
  <a href="#" class="widget-list-item">
    <div class="widget-list-media icon">
      <i class="fa fa-link bg-yellow text-inverse"></i>
    </div>
    <div class="widget-list-content">
      <h4 class="widget-list-title">Personal Hotspot</h4>
    </div>
    <div class="widget-list-action text-nowrap text-grey-darker text-right">
      Off
      <i class="fa fa-angle-right text-muted t-plus-1 fa-lg m-l-5"></i>
    </div>
  </a>
  <!-- end widget-list-item -->
  ...
</div>
<!-- end widget-list -->

<!-- begin widget-icon -->
<div class="widget-icon rounded bg-success text-white">
  <i class="fab fa-android"></i>
</div>
<!-- end widget-icon -->

<!-- begin user widget-icon -->
<div class="widget-icon rounded bg-grey text-white user">
  <i class="fa fa-user"></i>
</div>
<!-- end user widget-icon -->

<!-- begin widget-icon-sizes -->
<div class="widget-icon widget-icon-xl"></div>
<div class="widget-icon widget-icon-lg"></div>
<div class="widget-icon"></div>
<div class="widget-icon widget-icon-sm"></div>
<div class="widget-icon widget-icon-xs"></div>
<!-- end widget-icon-sizes -->

<!-- begin widget-img -->
<div class="widget-img rounded bg-inverse" style="background-image: url(../assets/img/gallery/gallery-11-thumb.jpg)">
</div>
<!-- end widget-img -->

<!-- begin widget-img-sizes -->
<div class="widget-img widget-img-xl"></div>
<div class="widget-img widget-img-lg"></div>
<div class="widget-img"></div>
<div class="widget-img widget-img-sm"></div>
<div class="widget-img widget-img-xs"></div>
<!-- end widget-img-sizes -->

<!-- begin widget-card -->
<a href="#" class="widget-card widget-card-rounded">
  <div class="widget-card-cover" style="background-image: url(../assets/img/gallery/gallery-portrait-11-thumb.jpg)"></div>
  <div class="widget-card-content">
    <b class="text-white">Download and get free trial.</b>
  </div>
  <div class="widget-card-content bottom">
    <i class="fab fa-pushed fa-5x text-indigo"></i>
    <h4 class="text-white m-t-10"><b>Apple Draw<br /> Photo Booth</b></h4>
    <h5 class="f-s-12 text-white-transparent-7 m-b-2"><b>EASILY DRAW ON PHOTOS</b></h5>
  </div>
</a>
<!-- end widget-card -->

<!-- begin widget-card-square -->
<a href="#" class="widget-card widget-card-rounded square m-b-5">
  <div class="widget-card-cover" style="background-image: url(../assets/img/login-bg/login-bg-10.jpg)">
    <div class="vertical-box vertical-box-widget">
      <div class="vertical-box-column valign-middle text-center">
        <div class="text-white f-s-14"><b>PORTRAITS OF</b></div>
        <div class="text-white-transparent-8 f-w-600">2017</div>
      </div>
    </div>
  </div>
</a>
<div class="f-s-12 f-w-700 text-black p-t-2">Memory 2017</div>
<div class="f-s-10 f-w-600 text-black-lighter m-b-15">1,239</div>
<!-- end widget-card-square -->

<!-- begin widget-stats -->
<div class="widget widget-stats bg-gradient-teal m-b-10">
  <div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
  <div class="stats-content">
    <div class="stats-title">TODAY'S VISITS</div>
    <div class="stats-number">7,842,900</div>
    <div class="stats-progress progress">
      <div class="progress-bar" style="width: 70.1%;"></div>
    </div>
    <div class="stats-desc">Better than last week (70.1%)</div>
  </div>
</div>
<!-- end widget-stats -->

<!-- begin widget-chart -->
<div class="widget widget-rounded">
  <div class="widget-header">
    <h4 class="widget-header-title">Audience Overview</h4>
    <div class="widget-header-icon"><a href="#" class="text-muted"><i class="fa fa-fw fa-upload"></i></a></div>
    <div class="widget-header-icon"><a href="#" class="text-muted"><i class="fa fa-fw fa-cog"></i></a></div>
  </div>
  <div class="vertical-box with-grid with-border-top">
    <div class="vertical-box-column widget-chart-content">
      <div id="nv-stacked-area-chart" style="height: 108%"></div>
    </div>
    <div class="vertical-box-column p-15" style="width: 30%;">
      <div class="widget-chart-info">
        <h4 class="widget-chart-info-title">Total sales</h4>
        <p class="widget-chart-info-desc">Lorem ipsum dolor sit consectetur adipiscing elit.</p>
        <div class="widget-chart-info-progress">
          <b>Monthly Plan</b>
          <span class="pull-right">70%</span>
        </div>
        <div class="progress progress-sm">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner" style="width:70%;"></div>
        </div>
      </div>
      <hr />
      <div class="widget-chart-info">
        <h4 class="widget-chart-info-title">Task progress</h4>
        <p class="widget-chart-info-desc">Vestibulum sollicitudin in lectus a cursus.</p>
        <div class="widget-chart-info-progress">
          <b>Marketing Research</b>
          <span class="pull-right">74%</span>
        </div>
        <div class="progress progress-sm m-b-15">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-indigo" style="width: 74%"></div>
        </div>
        <div class="widget-chart-info-progress">
          <b>Mobile App Development</b>
          <span class="pull-right">25%</span>
        </div>
        <div class="progress progress-sm m-b-15">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-green" style="width: 25%"></div>
        </div>
        <div class="widget-chart-info-progress">
          <b>Website Redesign</b>
          <span class="pull-right">95%</span>
        </div>
        <div class="progress progress-sm">
          <div class="progress-bar progress-bar-striped progress-bar-animated rounded-corner bg-orange" style="width: 95%"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- end widget-chart -->

<!-- begin widget-table -->
<table class="table table-bordered widget-table widget-table-rounded">
  <thead>
    <tr>
      <th width="1%">Image</th>
      <th>Product Info</th>
      <th>Price</th>
      <th>Qty</th>
      <th>Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="widget-table-img" style="background-image: url(../assets/img/product/product-6.png);"></div>
      </td>
      <td>
        <h4 class="widget-table-title">Mavic Pro Combo</h4>
        <p class="widget-table-desc m-b-15">Portable yet powerful, the Mavic Pro is your personal drone, ready to go with you everywhere.</p>
        <div class="progress progress-sm rounded-corner m-b-5">
          <div class="progress-bar progress-bar-striped progress-bar-animated bg-orange f-s-10 f-w-600" style="width: 30%;">30%</div>
        </div>
        <div class="clearfix f-s-10">
          status: <b class="text-inverse">Shipped</b>
        </div>
      </td>
      <td class="text-nowrap">
        <b class="text-inverse">$999</b><br />
        <small class="text-inverse text-line-through">$1,202</small>
      </td>
      <td>1</td>
      <td>999.00</td>
      <td><a href="#" class="btn btn-inverse btn-sm width-80 rounded-corner">Edit</a></td>
    </tr>
  </tbody>
</table>
<!-- end widget-table -->