 <div class="side-bar right-bar">
    <div class="contacts">
      <div class="col col-md-12">
        <ul class="tabs">
          <li class="tab col-md-3"><a href="#test" class="active">Chat</a></li>
          <li class="tab col-md-3"><a href="#test2">Settings</a></li>
          <li class="tab col-md-3"><a href="#test3">Bookings</a></li>
        </ul>
      </div>
      <div class="content-holder">
        <div id="test" class="col-md-12 no_padding">         
          <div class="panel-body no_padding">
            <div class="panel-group piluku-accordion piluku-accordion-two" id="accordionOne" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingModalOne">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionOne" href="#collapseModalOne" aria-expanded="true" aria-controls="collapseOne">
                      Online <i class="chevron ti-angle-down"></i>
                    </a>
                  </h4>
                </div>
                <div id="collapseModalOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body no_padding">
                    <ul class="list-group contacts-list">
                      
                      <li class="list-group-item">
                        <a href="#">
                          <div class="avatar">
                            <img src="" alt="">
                          </div>
                          <span class="name">Richie Rich</span>
                          <i class="ion ion-record online"></i>
                        </a>
                      </li>

                    </ul> 
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingModalTwo">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordionOne" href="#collapseModalTwo" aria-expanded="false" aria-controls="collapseTwo">
                      offline
                    </a>
                  </h4>
                </div>
                <div id="collapseModalTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
                  
                  <div class="panel-body no_padding">
                    <ul class="list-group contacts-list">
                      <li class="list-group-item">
                        <a href="#">
                          <div class="avatar">
                            <img src="" alt="">
                          </div>
                          <span class="name">Richards carlson</span>
                          <i class="ion ion-record offline"></i>
                        </a>
                      </li>
                      
                    </ul> 
                  </div>
                  
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingModalThree">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordionOne" href="#collapseModalThree" aria-expanded="false" aria-controls="collapseThree">
                      Away
                    </a>
                  </h4>
                </div>
                <div id="collapseModalThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">                  
                  <div class="panel-body no_padding">
                    <ul class="list-group contacts-list">
                      
                      <li class="list-group-item">
                        <a href="#">
                          <div class="avatar">
                            <img src="" alt="">
                          </div>
                          <span class="name">Richie Rich</span>
                          <i class="ion ion-record away"></i>
                        </a>
                      </li>
                    </ul> 
                  </div>
                </div>
              </div>
            </div>  
          </div> 
        </div>
        <div id="test2" class="col-md-12 no_padding">
        <br>                    
          <div class="form-group">
            <div class="toggle-switch">
              <label class="col-sm-8 control-label">Reminders</label>
              <div class="col-sm-4">
                <input type="checkbox" class="mark-complete" id="toggle-switch" name="" value="" checked="">
                <div class="toggle">
                  <label for="toggle-switch"><i></i>
                  </label>
                </div>
              </div>
            </div>
            <div class="toggle-switch">
              <label class="col-sm-8 control-label">theme options</label>
              <div class="col-sm-4">
                <input type="checkbox" class="mark-complete" id="toggle-switch1" name="" value="" checked="">
                <div class="toggle">
                  <label for="toggle-switch1"><i></i>
                  </label>
                </div>
              </div>
            </div>
            <div class="toggle-switch">
              <label class="col-sm-8 control-label">dark / light theme</label>
              <div class="col-sm-4">
                <input type="checkbox" class="mark-complete" id="toggle-switch2" name="" value="" checked="">
                <div class="toggle">
                  <label for="toggle-switch2"><i></i>
                  </label>
                </div>
              </div>
            </div>
            <div class="toggle-switch">
              <label class="col-sm-8 control-label">Email Updates</label>
              <div class="col-sm-4">
                <input type="checkbox" class="mark-complete" id="toggle-switch3" name="" value="" checked="">
                <div class="toggle">
                  <label for="toggle-switch3"><i></i>
                  </label>
                </div>
              </div>
            </div>
            <div class="toggle-switch">
              <label class="col-sm-8 control-label">Notifications</label>
              <div class="col-sm-4">
                <input type="checkbox" class="mark-complete" id="toggle-switch4" name="" value="" checked="">
                <div class="toggle">
                  <label for="toggle-switch4"><i></i>
                  </label>
                </div>
              </div>
            </div>              

            <div class="form-group check-radio">
              <label class="col-sm-9 control-label">Loader animation</label>
              <div class="col-sm-3">
                <ul class="list-inline checkboxes-radio">
                  <li class="ms-hover">
                    <input type="checkbox" class="mark-complete" id="c1">
                    <label for="c1"><span></span></label>
                  </li>                                                                               
                </ul>
              </div>
            </div>
            <div class="form-group check-radio">
              <label class="col-sm-9 control-label">delay load</label>
              <div class="col-sm-3">
                <ul class="list-inline checkboxes-radio">
                  <li class="ms-hover">
                    <input type="checkbox" class="mark-complete" id="c2">
                    <label for="c2"><span></span></label>
                  </li>                                                                               
                </ul>
              </div>
            </div>
            <div class="form-group check-radio">
              <label class="col-sm-9 control-label">Graphs animations</label>
              <div class="col-sm-3">
                <ul class="list-inline checkboxes-radio">
                  <li class="ms-hover">
                    <input type="checkbox" class="mark-complete" id="c3" checked="">
                    <label for="c3"><span></span></label>
                  </li>                                                                               
                </ul>
              </div>
            </div>
          </div>            
        </div>
        <div id="test3" class="col-md-12 no_padding">
          <div class="heading no_border_bottom">
            Todays
            <div class="left"><a href="#"><i class="ion-android-refresh"></i></a></div>
            <div class="right"><a href="#"><i class="ion-gear-a"></i></a></div>           
          </div>
          <div class="list-group message-list">
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">henry richards</h4>
              <p class="list-group-item-text">has pushed all the code to github and saved some fixes too..</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">mary </h4>
              <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto accusamus officiis vero magnam amet, quas corru</p>
            </a>              
          </div>  
          <div class="heading no_border_bottom">
            june 15 1990
            <div class="left"><a href="#"><i class="ion-android-refresh"></i></a></div>
            <div class="right"><a href="#"><i class="ion-gear-a"></i></a></div>           
          </div>
          <div class="list-group message-list">
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">henry richards</h4>
              <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto accusamus officiis vero magnam amet, quas corru</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">mary </h4>
              <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto accusamus officiis vero magnam amet, quas corru</p>
            </a>              
          </div>  
        </div>
      </div>
      <!-- content_holder -->
    </div>
  </div>
  <!-- /Right-bar -->
</div>
<!-- wrapper -->

<script src='<?php echo URL('admin/assets/js/jquery-ui-1.10.3.custom.min.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/bootstrap.min.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/jquery.nicescroll.min.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/wow.min.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/jquery.loadmask.min.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/jquery.accordion.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/materialize.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/bic_calendar.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/core.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/select2.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/jquery.multi-select.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/bootstrap-filestyle.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/bootstrap-datepicker.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/bootstrap-colorpicker.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/jquery.maskedinput.js'); ?>'></script>
<script src='<?php echo URL('admin/assets/js/form-elements.js'); ?>'></script>

<script src='<?php echo URL('admin/assets/js/sweet-alert/sweetalert.min.js'); ?>'></script>

<script type="text/javascript" src="<?php echo URL('admin/assets/js/tinymce/tinymce.min.js'); ?>"></script>

<script src="<?php echo URL('admin/assets/js/jquery.countTo.js'); ?>"></script>
</body>
</html>