 </div>
          <!-- bottom footer -->
          <div class="content-footer">
            <nav class="footer-right">
              <ul class="nav">
                <li>
                  <a href="javascript:;">Feedback</a>
                </li>
              </ul>
            </nav>
            <nav class="footer-left">
              <ul class="nav">
                <li>
                  <a href="javascript:;">
                    <span>Copyright</span>
                    &copy; <?= date('Y').' '.SISTEM_COMPANY ?>
                  </a>
                </li>
                <li class="hidden-md-down">
                  <a href="javascript:;">Privacy</a>
                </li>
                <li class="hidden-md-down">
                  <a href="javascript:;">Terms</a>
                </li>
                <li class="hidden-md-down">
                  <a href="javascript:;">help</a>
                </li>
              </ul>
            </nav>
          </div>
          <!-- /bottom footer -->
        </div>
        <!-- /main area -->
      </div>
      <!-- /content panel -->

      <!--Chat panel-->
      <div class="modal fade sidebar-modal chat-panel" tabindex="-1" role="dialog" aria-labelledby="chat-panel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="chat-header">
              <a class="pull-right" href="javascript:;" data-dismiss="modal">
                <i class="material-icons">close</i>
              </a>
              <div class="chat-header-title">People</div>
            </div>
            <div class="modal-body flex scroll-y">
              <div class="chat-group">
                <div class="chat-group-header">Favourites</div>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-online"></span>
                  <span>Catherine Moreno</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-online"></span>
                  <span>Denise Peterson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-away"></span>
                  <span>Charles Wilson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-away"></span>
                  <span>Melissa Welch</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-no-disturb"></span>
                  <span>Vincent Peterson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Pamela Wood</span>
                </a>
              </div>
              <div class="chat-group">
                <div class="chat-group-header">Online</div>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-online"></span>
                  <span>Tammy Carpenter</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-away"></span>
                  <span>Emma Sullivan</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-no-disturb"></span>
                  <span>Andrea Brewer</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-online"></span>
                  <span>Betty Simmons</span>
                </a>
              </div>
              <div class="chat-group">
                <div class="chat-group-header">Other</div>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Denise Peterson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Jose Rivera</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Diana Robertson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>William Fields</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Emily Stanley</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Jack Hunt</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Sharon Rice</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Mary Holland</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Diane Hughes</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Steven Smith</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Emily Henderson</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Wayne Kelly</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Jane Garcia</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Jose Jimenez</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Rachel Burton</span>
                </a>
                <a href="javascript:;" data-toggle="modal" data-target=".chat-message">
                  <span class="status-offline"></span>
                  <span>Samantha Ruiz</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade chat-message" tabindex="-1" role="dialog" aria-labelledby="chat-message" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="chat-header">
              <div class="pull-right dropdown">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="material-icons">more_vert</i>
                </a>
                <div class="dropdown-menu" role="menu">
                  <a class="dropdown-item" href="javascript:;">Profile</a>
                  <a class="dropdown-item" href="javascript:;">Clear messages</a>
                  <a class="dropdown-item" href="javascript:;">Delete conversation</a>
                  <a class="dropdown-item" href="javascript:;" data-dismiss="modal">Close chat</a>
                </div>
              </div>
              <div class="chat-conversation-title">
                <img src="images/face1.jpg" class="avatar avatar-xs img-circle m-r-1 pull-left" alt="">
                <div class="overflow-hidden">
                  <span><strong>Charles Wilson</strong></span>
                  <small>Last seen today at 03:11</small>
                </div>
              </div>
            </div>
            <div class="modal-body flex scroll-y">
              <p class="text-xs-center text-muted small text-uppercase bold m-b-1">Yesterday</p>
              <div class="chat-conversation-user them">
                <div class="chat-conversation-message">
                  <p>Hey.</p>
                </div>
              </div>
              <div class="chat-conversation-user them">
                <div class="chat-conversation-message">
                  <p>How are the wife and kids, Taylor?</p>
                </div>
              </div>
              <div class="chat-conversation-user me">
                <div class="chat-conversation-message">
                  <p>Pretty good, Samuel.</p>
                </div>
              </div>
              <p class="text-xs-center text-muted small text-uppercase bold m-b-1">Today</p>
              <div class="chat-conversation-user them">
                <div class="chat-conversation-message">
                  <p>Curabitur blandit tempus porttitor.</p>
                </div>
              </div>
              <div class="chat-conversation-user me">
                <div class="chat-conversation-message">
                  <p>Goodnight!</p>
                </div>
              </div>
              <div class="chat-conversation-user them">
                <div class="chat-conversation-message">
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                </div>
              </div>
            </div>
            <div class="chat-conversation-footer">
                <button class="chat-left">
                  <i class="material-icons">face</i>
                </button>
                <div class="chat-input" contenteditable=""></div>
                <button class="chat-right">
                  <i class="material-icons">photo</i>
                </button>
              </div>
          </div>
        </div>
      </div>
      <!--/Chat panel-->

    </div>  </footer>