<div class="sb-slidebar sb-right sb-style-overlay">
  <h5 class="side-title">Online Customers</h5>
  <ul class="quick-chat-list">
      <li class="online">
          <div class="media">
              <a href="#" class="pull-left media-thumb">
                  <img alt="" src="img/chat-avatar2.jpg" class="media-object">
              </a>
              <div class="media-body">
                  <strong>John Doe</strong>
                  <small>Dream Land, AU</small>
              </div>
          </div><!-- media -->
      </li>
      <li class="online">
          <div class="media">
              <a href="#" class="pull-left media-thumb">
                  <img alt="" src="img/chat-avatar.jpg" class="media-object">
              </a>
              <div class="media-body">
                  <div class="media-status">
                      <span class=" badge bg-important">3</span>
                  </div>
                  <strong>Jonathan Smith</strong>
                  <small>United States</small>
              </div>
          </div><!-- media -->
      </li>

      <li class="online">
          <div class="media">
              <a href="#" class="pull-left media-thumb">
                  <img alt="" src="img/pro-ac-1.png" class="media-object">
              </a>
              <div class="media-body">
                  <div class="media-status">
                      <span class=" badge bg-success">5</span>
                  </div>
                  <strong>Jane Doe</strong>
                  <small>ABC, USA</small>
              </div>
          </div><!-- media -->
      </li>
      <li class="online">
          <div class="media">
              <a href="#" class="pull-left media-thumb">
                  <img alt="" src="img/avatar1.jpg" class="media-object">
              </a>
              <div class="media-body">
                  <strong>Anjelina Joli</strong>
                  <small>Fockland, UK</small>
              </div>
          </div><!-- media -->
      </li>
      <li class="online">
          <div class="media">
              <a href="#" class="pull-left media-thumb">
                  <img alt="" src="img/mail-avatar.jpg" class="media-object">
              </a>
              <div class="media-body">
                  <div class="media-status">
                      <span class=" badge bg-warning">7</span>
                  </div>
                  <strong>Mr Tasi</strong>
                  <small>Dream Land, USA</small>
              </div>
          </div><!-- media -->
      </li>
  </ul>
  <h5 class="side-title"> pending Task</h5>
  <ul class="p-task tasks-bar">
      <li>
          <a href="#">
              <div class="task-info">
                  <div class="desc">Dashboard v1.3</div>
                  <div class="percent">40%</div>
              </div>
              <div class="progress progress-striped">
                  <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
                      <span class="sr-only">40% Complete (success)</span>
                  </div>
              </div>
          </a>
      </li>
      <li>
          <a href="#">
              <div class="task-info">
                  <div class="desc">Database Update</div>
                  <div class="percent">60%</div>
              </div>
              <div class="progress progress-striped">
                  <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
                      <span class="sr-only">60% Complete (warning)</span>
                  </div>
              </div>
          </a>
      </li>
      <li>
          <a href="#">
              <div class="task-info">
                  <div class="desc">Iphone Development</div>
                  <div class="percent">87%</div>
              </div>
              <div class="progress progress-striped">
                  <div style="width: 87%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
                      <span class="sr-only">87% Complete</span>
                  </div>
              </div>
          </a>
      </li>
      <li>
          <a href="#">
              <div class="task-info">
                  <div class="desc">Mobile App</div>
                  <div class="percent">33%</div>
              </div>
              <div class="progress progress-striped">
                  <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
                      <span class="sr-only">33% Complete (danger)</span>
                  </div>
              </div>
          </a>
      </li>
      <li>
          <a href="#">
              <div class="task-info">
                  <div class="desc">Dashboard v1.3</div>
                  <div class="percent">45%</div>
              </div>
              <div class="progress progress-striped active">
                  <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar">
                      <span class="sr-only">45% Complete</span>
                  </div>
              </div>

          </a>
      </li>
      <li class="external">
          <a href="#">See All Tasks</a>
      </li>
  </ul>
</div>