resq/public/components/datatables/locked/html-table.html
2018-01-06 21:26:46 +08:00

7698 lines
226 KiB
HTML

<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
Version: 5.0.6.1
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en" >
<!-- begin::Head -->
<head>
<meta charset="utf-8" />
<title>
Metronic | HTML Table
</title>
<meta name="description" content="Datatable locked columns with HTML table">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--begin::Web font -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<!--end::Web font -->
<!--begin::Base Styles -->
<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Base Styles -->
<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
</head>
<!-- end::Head -->
<!-- end::Body -->
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default" >
<!-- begin:: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
<!-- BEGIN: Header -->
<header class="m-grid__item m-header " data-minimize-offset="200" data-minimize-mobile-offset="200" >
<div class="m-container m-container--fluid m-container--full-height">
<div class="m-stack m-stack--ver m-stack--desktop">
<!-- BEGIN: Brand -->
<div class="m-stack__item m-brand m-brand--skin-dark ">
<div class="m-stack m-stack--ver m-stack--general">
<div class="m-stack__item m-stack__item--middle m-brand__logo">
<a href="../../../index.html" class="m-brand__logo-wrapper">
<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
</a>
</div>
<div class="m-stack__item m-stack__item--middle m-brand__tools">
<!-- BEGIN: Left Aside Minimize Toggle -->
<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block
">
<span></span>
</a>
<!-- END -->
<!-- BEGIN: Responsive Aside Left Menu Toggler -->
<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
<span></span>
</a>
<!-- END -->
<!-- BEGIN: Responsive Header Menu Toggler -->
<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
<span></span>
</a>
<!-- END -->
<!-- BEGIN: Topbar Toggler -->
<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
<i class="flaticon-more"></i>
</a>
<!-- BEGIN: Topbar Toggler -->
</div>
</div>
</div>
<!-- END: Brand -->
<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
<!-- BEGIN: Horizontal Menu -->
<button class="m-aside-header-menu-mobile-close m-aside-header-menu-mobile-close--skin-dark " id="m_aside_header_menu_mobile_close_btn">
<i class="la la-close"></i>
</button>
<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark " >
<ul class="m-menu__nav m-menu__nav--submenu-arrow ">
<li class="m-menu__item m-menu__item--submenu m-menu__item--rel" data-menu-submenu-toggle="click" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-add"></i>
<span class="m-menu__link-text">
Actions
</span>
<i class="m-menu__hor-arrow la la-angle-down"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--left">
<span class="m-menu__arrow m-menu__arrow--adjust"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-file"></i>
<span class="m-menu__link-text">
Create New Post
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-diagram"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">
Generate Reports
</span>
<span class="m-menu__link-badge">
<span class="m-badge m-badge--success">
2
</span>
</span>
</span>
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" data-menu-submenu-toggle="hover" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-business"></i>
<span class="m-menu__link-text">
Manage Orders
</span>
<i class="m-menu__hor-arrow la la-angle-right"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--right">
<span class="m-menu__arrow "></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Latest Orders
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Pending Orders
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Processed Orders
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Delivery Reports
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Payments
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Customers
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" data-menu-submenu-toggle="hover" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-chat-1"></i>
<span class="m-menu__link-text">
Customer Feedbacks
</span>
<i class="m-menu__hor-arrow la la-angle-right"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--right">
<span class="m-menu__arrow "></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Customer Feedbacks
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Supplier Feedbacks
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Reviewed Feedbacks
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Resolved Feedbacks
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Feedback Reports
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-users"></i>
<span class="m-menu__link-text">
Register Member
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu m-menu__item--rel" data-menu-submenu-toggle="click" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-line-graph"></i>
<span class="m-menu__link-text">
Reports
</span>
<i class="m-menu__hor-arrow la la-angle-down"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--fixed m-menu__submenu--left" style="width:1000px">
<span class="m-menu__arrow m-menu__arrow--adjust"></span>
<div class="m-menu__subnav">
<ul class="m-menu__content">
<li class="m-menu__item">
<h3 class="m-menu__heading m-menu__toggle">
<span class="m-menu__link-text">
Finance Reports
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</h3>
<ul class="m-menu__inner">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-map"></i>
<span class="m-menu__link-text">
Annual Reports
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-user"></i>
<span class="m-menu__link-text">
HR Reports
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
IPO Reports
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-graphic-1"></i>
<span class="m-menu__link-text">
Finance Margins
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-graphic-2"></i>
<span class="m-menu__link-text">
Revenue Reports
</span>
</a>
</li>
</ul>
</li>
<li class="m-menu__item">
<h3 class="m-menu__heading m-menu__toggle">
<span class="m-menu__link-text">
Project Reports
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</h3>
<ul class="m-menu__inner">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Coca Cola CRM
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Delta Airlines Booking Site
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Malibu Accounting
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Vineseed Website Rewamp
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Zircon Mobile App
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--line">
<span></span>
</i>
<span class="m-menu__link-text">
Mercury CMS
</span>
</a>
</li>
</ul>
</li>
<li class="m-menu__item">
<h3 class="m-menu__heading m-menu__toggle">
<span class="m-menu__link-text">
HR Reports
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</h3>
<ul class="m-menu__inner">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Staff Directory
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Client Directory
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Salary Reports
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Staff Payslips
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Corporate Expenses
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Project Expenses
</span>
</a>
</li>
</ul>
</li>
<li class="m-menu__item">
<h3 class="m-menu__heading m-menu__toggle">
<span class="m-menu__link-text">
Reporting Apps
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</h3>
<ul class="m-menu__inner">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Report Adjusments
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Sources & Mediums
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Reporting Settings
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Conversions
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Report Flows
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<span class="m-menu__link-text">
Audit & Logs
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu m-menu__item--rel" data-menu-submenu-toggle="click" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-paper-plane"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">
Apps
</span>
<span class="m-menu__link-badge">
<span class="m-badge m-badge--brand m-badge--wide">
new
</span>
</span>
</span>
</span>
<i class="m-menu__hor-arrow la la-angle-down"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--left">
<span class="m-menu__arrow m-menu__arrow--adjust"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-business"></i>
<span class="m-menu__link-text">
eCommerce
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" data-menu-submenu-toggle="hover" data-redirect="true" aria-haspopup="true">
<a href="../../../crud/datatable_v1.html" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-computer"></i>
<span class="m-menu__link-text">
Audience
</span>
<i class="m-menu__hor-arrow la la-angle-right"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--right">
<span class="m-menu__arrow "></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-users"></i>
<span class="m-menu__link-text">
Active Users
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-interface-1"></i>
<span class="m-menu__link-text">
User Explorer
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-lifebuoy"></i>
<span class="m-menu__link-text">
Users Flows
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-graphic-1"></i>
<span class="m-menu__link-text">
Market Segments
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-graphic"></i>
<span class="m-menu__link-text">
User Reports
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-map"></i>
<span class="m-menu__link-text">
Marketing
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-graphic-2"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">
Campaigns
</span>
<span class="m-menu__link-badge">
<span class="m-badge m-badge--success">
3
</span>
</span>
</span>
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" data-menu-submenu-toggle="hover" data-redirect="true" aria-haspopup="true">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-infinity"></i>
<span class="m-menu__link-text">
Cloud Manager
</span>
<i class="m-menu__hor-arrow la la-angle-right"></i>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu m-menu__submenu--classic m-menu__submenu--left">
<span class="m-menu__arrow "></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-add"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">
File Upload
</span>
<span class="m-menu__link-badge">
<span class="m-badge m-badge--danger">
3
</span>
</span>
</span>
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-signs-1"></i>
<span class="m-menu__link-text">
File Attributes
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-folder"></i>
<span class="m-menu__link-text">
Folders
</span>
</a>
</li>
<li class="m-menu__item " data-redirect="true" aria-haspopup="true">
<a href="../../../header/actions.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-cogwheel-2"></i>
<span class="m-menu__link-text">
System Settings
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- END: Horizontal Menu --> <!-- BEGIN: Topbar -->
<div id="m_header_topbar" class="m-topbar m-stack m-stack--ver m-stack--general">
<div class="m-stack__item m-topbar__nav-wrapper">
<ul class="m-topbar__nav m-nav m-nav--inline">
<li class="
m-nav__item m-dropdown m-dropdown--large m-dropdown--arrow m-dropdown--align-center m-dropdown--mobile-full-width m-dropdown--skin-light m-list-search m-list-search--skin-light"
data-dropdown-toggle="click" data-dropdown-persistent="true" id="m_quicksearch" data-search-type="dropdown">
<a href="#" class="m-nav__link m-dropdown__toggle">
<span class="m-nav__link-icon">
<i class="flaticon-search-1"></i>
</span>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--center"></span>
<div class="m-dropdown__inner ">
<div class="m-dropdown__header">
<form class="m-list-search__form">
<div class="m-list-search__form-wrapper">
<span class="m-list-search__form-input-wrapper">
<input id="m_quicksearch_input" autocomplete="off" type="text" name="q" class="m-list-search__form-input" value="" placeholder="Search...">
</span>
<span class="m-list-search__form-icon-close" id="m_quicksearch_close">
<i class="la la-remove"></i>
</span>
</div>
</form>
</div>
<div class="m-dropdown__body">
<div class="m-dropdown__scrollable m-scrollable" data-scrollable="true" data-max-height="300" data-mobile-max-height="200">
<div class="m-dropdown__content"></div>
</div>
</div>
</div>
</div>
</li>
<li class="m-nav__item m-topbar__notifications m-topbar__notifications--img m-dropdown m-dropdown--large m-dropdown--header-bg-fill m-dropdown--arrow m-dropdown--align-center m-dropdown--mobile-full-width" data-dropdown-toggle="click" data-dropdown-persistent="true">
<a href="#" class="m-nav__link m-dropdown__toggle" id="m_topbar_notification_icon">
<span class="m-nav__link-badge m-badge m-badge--dot m-badge--dot-small m-badge--danger"></span>
<span class="m-nav__link-icon">
<i class="flaticon-music-2"></i>
</span>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--center"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__header m--align-center" style="background: url(../../../assets/app/media/img/misc/notification_bg.jpg); background-size: cover;">
<span class="m-dropdown__header-title">
9 New
</span>
<span class="m-dropdown__header-subtitle">
User Notifications
</span>
</div>
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="nav nav-tabs m-tabs m-tabs-line m-tabs-line--brand" role="tablist">
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link active" data-toggle="tab" href="#topbar_notifications_notifications" role="tab">
Alerts
</a>
</li>
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link" data-toggle="tab" href="#topbar_notifications_events" role="tab">
Events
</a>
</li>
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link" data-toggle="tab" href="#topbar_notifications_logs" role="tab">
Logs
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="topbar_notifications_notifications" role="tabpanel">
<div class="m-scrollable" data-scrollable="true" data-max-height="250" data-mobile-max-height="200">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items">
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge -m-list-timeline__badge--state-success"></span>
<span class="m-list-timeline__text">
12 new users registered
</span>
<span class="m-list-timeline__time">
Just now
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
System shutdown
<span class="m-badge m-badge--success m-badge--wide">
pending
</span>
</span>
<span class="m-list-timeline__time">
14 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
New invoice received
</span>
<span class="m-list-timeline__time">
20 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
DB overloaded 80%
<span class="m-badge m-badge--info m-badge--wide">
settled
</span>
</span>
<span class="m-list-timeline__time">
1 hr
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
System error -
<a href="#" class="m-link">
Check
</a>
</span>
<span class="m-list-timeline__time">
2 hrs
</span>
</div>
<div class="m-list-timeline__item m-list-timeline__item--read">
<span class="m-list-timeline__badge"></span>
<span href="" class="m-list-timeline__text">
New order received
<span class="m-badge m-badge--danger m-badge--wide">
urgent
</span>
</span>
<span class="m-list-timeline__time">
7 hrs
</span>
</div>
<div class="m-list-timeline__item m-list-timeline__item--read">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
Production server down
</span>
<span class="m-list-timeline__time">
3 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge"></span>
<span class="m-list-timeline__text">
Production server up
</span>
<span class="m-list-timeline__time">
5 hrs
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="topbar_notifications_events" role="tabpanel">
<div class="m-scrollable" m-scrollabledata-scrollable="true" data-max-height="250" data-mobile-max-height="200">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items">
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-success"></span>
<a href="" class="m-list-timeline__text">
New order received
</a>
<span class="m-list-timeline__time">
Just now
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-danger"></span>
<a href="" class="m-list-timeline__text">
New invoice received
</a>
<span class="m-list-timeline__time">
20 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-success"></span>
<a href="" class="m-list-timeline__text">
Production server up
</a>
<span class="m-list-timeline__time">
5 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-info"></span>
<a href="" class="m-list-timeline__text">
New order received
</a>
<span class="m-list-timeline__time">
7 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-info"></span>
<a href="" class="m-list-timeline__text">
System shutdown
</a>
<span class="m-list-timeline__time">
11 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state1-info"></span>
<a href="" class="m-list-timeline__text">
Production server down
</a>
<span class="m-list-timeline__time">
3 hrs
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="topbar_notifications_logs" role="tabpanel">
<div class="m-stack m-stack--ver m-stack--general" style="min-height: 180px;">
<div class="m-stack__item m-stack__item--center m-stack__item--middle">
<span class="">
All caught up!
<br>
No new logs.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="m-nav__item m-topbar__quick-actions m-topbar__quick-actions--img m-dropdown m-dropdown--large m-dropdown--header-bg-fill m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
<a href="#" class="m-nav__link m-dropdown__toggle">
<span class="m-nav__link-badge m-badge m-badge--dot m-badge--info m--hide"></span>
<span class="m-nav__link-icon">
<i class="flaticon-share"></i>
</span>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__header m--align-center" style="background: url(../../../assets/app/media/img/misc/quick_actions_bg.jpg); background-size: cover;">
<span class="m-dropdown__header-title">
Quick Actions
</span>
<span class="m-dropdown__header-subtitle">
Shortcuts
</span>
</div>
<div class="m-dropdown__body m-dropdown__body--paddingless">
<div class="m-dropdown__content">
<div class="m-scrollable" data-scrollable="false" data-max-height="380" data-mobile-max-height="200">
<div class="m-nav-grid m-nav-grid--skin-light">
<div class="m-nav-grid__row">
<a href="#" class="m-nav-grid__item">
<i class="m-nav-grid__icon flaticon-file"></i>
<span class="m-nav-grid__text">
Generate Report
</span>
</a>
<a href="#" class="m-nav-grid__item">
<i class="m-nav-grid__icon flaticon-time"></i>
<span class="m-nav-grid__text">
Add New Event
</span>
</a>
</div>
<div class="m-nav-grid__row">
<a href="#" class="m-nav-grid__item">
<i class="m-nav-grid__icon flaticon-folder"></i>
<span class="m-nav-grid__text">
Create New Task
</span>
</a>
<a href="#" class="m-nav-grid__item">
<i class="m-nav-grid__icon flaticon-clipboard"></i>
<span class="m-nav-grid__text">
Completed Tasks
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
<a href="#" class="m-nav__link m-dropdown__toggle">
<span class="m-topbar__userpic">
<img src="../../../assets/app/media/img/users/user4.jpg" class="m--img-rounded m--marginless m--img-centered" alt=""/>
</span>
<span class="m-topbar__username m--hide">
Nick
</span>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__header m--align-center" style="background: url(../../../assets/app/media/img/misc/user_profile_bg.jpg); background-size: cover;">
<div class="m-card-user m-card-user--skin-dark">
<div class="m-card-user__pic">
<img src="../../../assets/app/media/img/users/user4.jpg" class="m--img-rounded m--marginless" alt=""/>
</div>
<div class="m-card-user__details">
<span class="m-card-user__name m--font-weight-500">
Mark Andre
</span>
<a href="" class="m-card-user__email m--font-weight-300 m-link">
mark.andre@gmail.com
</a>
</div>
</div>
</div>
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav m-nav--skin-light">
<li class="m-nav__section m--hide">
<span class="m-nav__section-text">
Section
</span>
</li>
<li class="m-nav__item">
<a href="../../../header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-profile-1"></i>
<span class="m-nav__link-title">
<span class="m-nav__link-wrap">
<span class="m-nav__link-text">
My Profile
</span>
<span class="m-nav__link-badge">
<span class="m-badge m-badge--success">
2
</span>
</span>
</span>
</span>
</a>
</li>
<li class="m-nav__item">
<a href="../../../header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-share"></i>
<span class="m-nav__link-text">
Activity
</span>
</a>
</li>
<li class="m-nav__item">
<a href="../../../header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-chat-1"></i>
<span class="m-nav__link-text">
Messages
</span>
</a>
</li>
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__item">
<a href="../../../header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-info"></i>
<span class="m-nav__link-text">
FAQ
</span>
</a>
</li>
<li class="m-nav__item">
<a href="../../../header/profile.html" class="m-nav__link">
<i class="m-nav__link-icon flaticon-lifebuoy"></i>
<span class="m-nav__link-text">
Support
</span>
</a>
</li>
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__item">
<a href="../../../snippets/pages/user/login-1.html" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
Logout
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li id="m_quick_sidebar_toggle" class="m-nav__item">
<a href="#" class="m-nav__link m-dropdown__toggle">
<span class="m-nav__link-icon">
<i class="flaticon-grid-menu"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
<!-- END: Topbar -->
</div>
</div>
</div>
</header>
<!-- END: Header -->
<!-- begin::Body -->
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
<!-- BEGIN: Left Aside -->
<button class="m-aside-left-close m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
<i class="la la-close"></i>
</button>
<div id="m_aside_left" class="m-grid__item m-aside-left m-aside-left--skin-dark ">
<!-- BEGIN: Aside Menu -->
<div
id="m_ver_menu"
class="m-aside-menu m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark "
data-menu-vertical="true"
data-menu-scrollable="false" data-menu-dropdown-timeout="500"
>
<ul class="m-menu__nav m-menu__nav--dropdown-submenu-arrow ">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../index.html" class="m-menu__link ">
<i class="m-menu__link-icon flaticon-line-graph"></i>
<span class="m-menu__link-title">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text">
Dashboard
</span>
<span class="m-menu__link-badge">
<span class="m-badge m-badge--danger">
2
</span>
</span>
</span>
</span>
</a>
</li>
<li class="m-menu__section">
<h4 class="m-menu__section-text">
Components
</h4>
<i class="m-menu__section-icon flaticon-more-v3"></i>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-layers"></i>
<span class="m-menu__link-text">
Base
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Base
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/state.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
State Colors
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/typography.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Typography
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/stack.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Stack
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/tables.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Tables
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/progress.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Progress
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/modal.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Modal
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/alerts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Alerts
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/popover.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Popover
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/tooltip.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Tooltip
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/blockui.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Block UI
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/spinners.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Spinners
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/scrollable.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Scrollable
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/dropdown.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Dropdown
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Tabs
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/tabs/bootstrap.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Bootstrap Tabs
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/tabs/line.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Line Tabs
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/accordions.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Accordions
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/navs.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Navs
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/lists.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Lists
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/treeview.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Tree View
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/bootstrap-notify.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Bootstrap Notify
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/toastr.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Toastr
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/base/sweetalert2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
SweetAlert2
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-share"></i>
<span class="m-menu__link-text">
Icons
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/icons/flaticon.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Flaticon
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/icons/fontawesome.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Fontawesome
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/icons/lineawesome.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Lineawesome
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/icons/socicons.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Socicons
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-multimedia-1"></i>
<span class="m-menu__link-text">
Buttons
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Buttons
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Button Base
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/base/default.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Default Style
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/base/square.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Square Style
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/base/pill.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pill Style
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/base/air.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Air Style
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/group.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Button Group
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/dropdown.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Button Dropdown
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Button Icon
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/icon/lineawesome.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Lineawesome Icons
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/icon/fontawesome.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Fontawesome Icons
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/buttons/icon/flaticon.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Flaticon Icons
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-interface-7"></i>
<span class="m-menu__link-text">
Forms
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Forms
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Controls
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/controls/base.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Base Inputs
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/controls/checkbox-radio.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Checkbox & Radio
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/controls/switch.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Switch
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/controls/input-group.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Input Groups
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Widgets
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-datepicker.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Datepicker
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-datetimepicker.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Datetimepicker
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-timepicker.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Timepicker
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-daterangepicker.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Daterangepicker
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-touchspin.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Touchspin
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-maxlength.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Maxlength
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-switch.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Switch
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-multipleselectsplitter.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Multiple Select Splitter
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-select.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Bootstrap Select
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/select2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Select2
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/typeahead.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Typeahead
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/nouislider.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
noUiSlider
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/form-repeater.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Repeater
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/ion-range-slider.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Ion Range Slider
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/input-mask.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Input Masks
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/summernote.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Summernote WYSIWYG
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/bootstrap-markdown.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Markdown Editor
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/autosize.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Autosize
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/clipboard.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Clipboard
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/dropzone.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Dropzone
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/widgets/recaptcha.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Google reCaptcha
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Layouts
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/layouts/default-forms.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Default Forms
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/layouts/multi-column-forms.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Multi Column Forms
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/layouts/action-bars.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Action Bars
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Validation
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/validation/states.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Validation States
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/validation/form-controls.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Controls
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/validation/form-widgets.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Widgets
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Wizard
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/wizard/wizard-1.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Wizard 1
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/wizard/wizard-2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Wizard 2
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/wizard/wizard-3.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Wizard 3
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/forms/wizard/wizard-4.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Form Wizard 4
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-tabs"></i>
<span class="m-menu__link-text">
Datatables
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Datatables
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Base
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/data-local.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Local Data
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/data-json.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
JSON Data
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/data-ajax.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Ajax Data
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/html-table.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
HTML Table
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/record-selection.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Record Selection
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/local-sort.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Local Sort
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/row-details.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Row Details
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/column-rendering.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Column Rendering
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/column-width.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Column Width
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/responsive-columns.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Responsive Columns
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/base/translation.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Translation
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Scrolling
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/scrolling/vertical.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Vertical Scrolling
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/scrolling/horizontal.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Horizontal Scrolling
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/scrolling/both.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Both Scrolling
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu m-menu__item--open m-menu__item--expanded" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Locked Columns
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/locked/left.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Left Locked Columns
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/locked/right.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Right Locked Columns
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/locked/both.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Both Locked Columns
</span>
</a>
</li>
<li class="m-menu__item m-menu__item--active" aria-haspopup="true" >
<a href="../../../components/datatables/locked/html-table.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
HTML Table
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Child Datatables
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/child/data-local.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Local Data
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/child/data-ajax.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Remote Data
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
API
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/api/methods.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
API Methods
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/datatables/api/events.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Events
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-interface-1"></i>
<span class="m-menu__link-text">
Portlets
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Portlets
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/base.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Base Portlets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/advanced.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Advanced Portlets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/creative.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Creative Portlets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/tabbed.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Tabbed Portlets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/draggable.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Draggable Portlets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/portlets/tools.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Portlet Tools
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-interface-6"></i>
<span class="m-menu__link-text">
Timeline
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Timeline
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/timeline/timeline-1.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Timeline 1
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/timeline/timeline-2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Timeline 2
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-network"></i>
<span class="m-menu__link-text">
Widgets
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Widgets
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/widgets/general.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
General Widgets
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/widgets/chart.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Chart Widgets
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-calendar"></i>
<span class="m-menu__link-text">
Calendar
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Calendar
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/calendar/basic.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Basic Calendar
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/calendar/list-view.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
List Views
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/calendar/google.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Google Calendar
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/calendar/external-events.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
External Events
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/calendar/background-events.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Background Events
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-diagram"></i>
<span class="m-menu__link-text">
Charts
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Charts
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
amCharts
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/amcharts/charts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
amCharts Charts
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/amcharts/stock-charts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
amCharts Stock Charts
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/amcharts/maps.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
amCharts Maps
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/flotcharts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Flot Charts
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/google-charts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Google Charts
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/charts/morris-charts.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Morris Charts
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-placeholder-1"></i>
<span class="m-menu__link-text">
Maps
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Maps
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/maps/google-maps.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Google Maps
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/maps/jqvmap.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
JQVMap
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-signs-2"></i>
<span class="m-menu__link-text">
Utils
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Utils
</span>
</span>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/utils/session-timeout.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Session Timeout
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../components/utils/idle-timer.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Idle Timer
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__section">
<h4 class="m-menu__section-text">
Snippets
</h4>
<i class="m-menu__section-icon flaticon-more-v3"></i>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-interface-3"></i>
<span class="m-menu__link-text">
General
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
General
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pricing Tables
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../snippets/general/pricing-tables/pricing-table-1.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pricing Tables v1
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../snippets/general/pricing-tables/pricing-table-2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pricing Tables v2
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../snippets/general/pricing-tables/pricing-table-3.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pricing Tables v3
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a href="../../../snippets/general/pricing-tables/pricing-table-4.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Pricing Tables v4
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-suitcase"></i>
<span class="m-menu__link-text">
Custom Pages
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true" >
<span class="m-menu__link">
<span class="m-menu__link-text">
Custom Pages
</span>
</span>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
User Pages
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/user/login-1.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Login - 1
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/user/login-2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Login - 2
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/user/login-3.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Login - 3
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/user/login-4.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Login - 4
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/user/login-5.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Login - 5
</span>
</a>
</li>
</ul>
</div>
</li>
<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="#" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error Pages
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-1.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 1
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-2.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 2
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-3.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 3
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-4.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 4
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-5.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 5
</span>
</a>
</li>
<li class="m-menu__item " aria-haspopup="true" >
<a target="_blank" href="../../../snippets/pages/errors/error-6.html" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">
Error 6
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- END: Aside Menu -->
</div>
<!-- END: Left Aside -->
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<!-- BEGIN: Subheader -->
<div class="m-subheader ">
<div class="d-flex align-items-center">
<div class="mr-auto">
<h3 class="m-subheader__title m-subheader__title--separator">
HTML Table
</h3>
<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
<li class="m-nav__item m-nav__item--home">
<a href="#" class="m-nav__link m-nav__link--icon">
<i class="m-nav__link-icon la la-home"></i>
</a>
</li>
<li class="m-nav__separator">
-
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<span class="m-nav__link-text">
Datatables
</span>
</a>
</li>
<li class="m-nav__separator">
-
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<span class="m-nav__link-text">
Locked Columns
</span>
</a>
</li>
<li class="m-nav__separator">
-
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<span class="m-nav__link-text">
HTML Table
</span>
</a>
</li>
</ul>
</div>
<div>
<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary m-btn m-btn--outline-2x m-btn--air m-btn--icon m-btn--icon-only m-btn--pill m-dropdown__toggle">
<i class="la la-plus m--hide"></i>
<i class="la la-ellipsis-h"></i>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav">
<li class="m-nav__section m-nav__section--first m--hide">
<span class="m-nav__section-text">
Quick Actions
</span>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-share"></i>
<span class="m-nav__link-text">
Activity
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-chat-1"></i>
<span class="m-nav__link-text">
Messages
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-info"></i>
<span class="m-nav__link-text">
FAQ
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-lifebuoy"></i>
<span class="m-nav__link-text">
Support
</span>
</a>
</li>
<li class="m-nav__separator m-nav__separator--fit"></li>
<li class="m-nav__item">
<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
Submit
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Subheader -->
<div class="m-content">
<div class="m-alert m-alert--icon m-alert--air m-alert--square alert alert-dismissible m--margin-bottom-30" role="alert">
<div class="m-alert__icon">
<i class="flaticon-exclamation m--font-brand"></i>
</div>
<div class="m-alert__text">
The Metronic Datatable component supports initialization from HTML table with locked columns. It also defines the schema model of the data source. In addition to the visualization, the Datatable provides built-in support for operations over data such as sorting, filtering and paging performed in user browser(frontend).
</div>
</div>
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Datatable initilized from HTML table and locked columns
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" data-dropdown-toggle="hover" aria-expanded="true">
<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary m-btn m-btn--icon m-btn--icon-only m-btn--pill m-dropdown__toggle">
<i class="la la-ellipsis-h m--font-brand"></i>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav">
<li class="m-nav__section m-nav__section--first">
<span class="m-nav__section-text">
Quick Actions
</span>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-share"></i>
<span class="m-nav__link-text">
Create Post
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-chat-1"></i>
<span class="m-nav__link-text">
Send Messages
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-multimedia-2"></i>
<span class="m-nav__link-text">
Upload File
</span>
</a>
</li>
<li class="m-nav__section">
<span class="m-nav__section-text">
Useful Links
</span>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-info"></i>
<span class="m-nav__link-text">
FAQ
</span>
</a>
</li>
<li class="m-nav__item">
<a href="" class="m-nav__link">
<i class="m-nav__link-icon flaticon-lifebuoy"></i>
<span class="m-nav__link-text">
Support
</span>
</a>
</li>
<li class="m-nav__separator m-nav__separator--fit m--hide"></li>
<li class="m-nav__item m--hide">
<a href="#" class="btn btn-outline-danger m-btn m-btn--pill m-btn--wide btn-sm">
Submit
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<!--begin: Search Form -->
<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
<div class="row align-items-center">
<div class="col-xl-8 order-2 order-xl-1">
<div class="form-group m-form__group row align-items-center">
<div class="col-md-4">
<div class="m-input-icon m-input-icon--left">
<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
<span class="m-input-icon__icon m-input-icon__icon--left">
<span>
<i class="la la-search"></i>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-xl-4 order-1 order-xl-2 m--align-right">
<a href="#" class="btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
<span>
<i class="la la-cart-plus"></i>
<span>
New Order
</span>
</span>
</a>
<div class="m-separator m-separator--dashed d-xl-none"></div>
</div>
</div>
</div>
<!--end: Search Form -->
<!--begin: Datatable -->
<table class="m-datatable" id="html_table" width="100%">
<thead>
<tr>
<th title="Field #1">
Order ID
</th>
<th title="Field #2">
Owner
</th>
<th title="Field #3">
Contact
</th>
<th title="Field #4">
Car Make
</th>
<th title="Field #5">
Car Model
</th>
<th title="Field #6">
Color
</th>
<th title="Field #7">
Deposit Paid
</th>
<th title="Field #8">
Order Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
16590-107
</td>
<td>
Zandra Fisbburne
</td>
<td>
(916) 6137523
</td>
<td>
Pontiac
</td>
<td>
Grand Am
</td>
<td>
Puce
</td>
<td>
$75343.80
</td>
<td>
2016-09-08
</td>
</tr>
<tr>
<td>
58232-0517
</td>
<td>
Mela Ord
</td>
<td>
(331) 6613809
</td>
<td>
Lamborghini
</td>
<td>
Gallardo
</td>
<td>
Aquamarine
</td>
<td>
$46031.10
</td>
<td>
2016-08-21
</td>
</tr>
<tr>
<td>
67296-0590
</td>
<td>
Benyamin Boerderman
</td>
<td>
(248) 3715044
</td>
<td>
Lexus
</td>
<td>
LX
</td>
<td>
Green
</td>
<td>
$86721.38
</td>
<td>
2017-11-17
</td>
</tr>
<tr>
<td>
61957-1005
</td>
<td>
Melva Whiteford
</td>
<td>
(765) 5831579
</td>
<td>
Land Rover
</td>
<td>
Freelander
</td>
<td>
Fuscia
</td>
<td>
$99239.55
</td>
<td>
2016-11-20
</td>
</tr>
<tr>
<td>
60660-7787
</td>
<td>
Tara Gow
</td>
<td>
(661) 8838768
</td>
<td>
Audi
</td>
<td>
S5
</td>
<td>
Puce
</td>
<td>
$81068.37
</td>
<td>
2017-05-19
</td>
</tr>
<tr>
<td>
43353-839
</td>
<td>
Jeannie Leech
</td>
<td>
(464) 1467700
</td>
<td>
Chevrolet
</td>
<td>
Camaro
</td>
<td>
Teal
</td>
<td>
$54172.96
</td>
<td>
2017-02-28
</td>
</tr>
<tr>
<td>
49304-0018
</td>
<td>
Craggy Muzzlewhite
</td>
<td>
(849) 3931687
</td>
<td>
Ford
</td>
<td>
Freestar
</td>
<td>
Puce
</td>
<td>
$34581.44
</td>
<td>
2017-08-19
</td>
</tr>
<tr>
<td>
63304-436
</td>
<td>
Lorie Bointon
</td>
<td>
(888) 8512009
</td>
<td>
Nissan
</td>
<td>
Altima
</td>
<td>
Yellow
</td>
<td>
$43010.64
</td>
<td>
2017-07-30
</td>
</tr>
<tr>
<td>
53603-1005
</td>
<td>
Perren Illingworth
</td>
<td>
(640) 8089210
</td>
<td>
Ford
</td>
<td>
Expedition EL
</td>
<td>
Fuscia
</td>
<td>
$39020.81
</td>
<td>
2017-12-07
</td>
</tr>
<tr>
<td>
58118-3750
</td>
<td>
Gerri Haverson
</td>
<td>
(993) 2745169
</td>
<td>
Chevrolet
</td>
<td>
Astro
</td>
<td>
Purple
</td>
<td>
$99551.01
</td>
<td>
2017-02-13
</td>
</tr>
<tr>
<td>
61787-482
</td>
<td>
Seumas Parlott
</td>
<td>
(653) 6455420
</td>
<td>
Ford
</td>
<td>
Tempo
</td>
<td>
Mauv
</td>
<td>
$23592.86
</td>
<td>
2016-01-14
</td>
</tr>
<tr>
<td>
36987-1887
</td>
<td>
Dorelle Phillps
</td>
<td>
(827) 7291094
</td>
<td>
Chevrolet
</td>
<td>
Malibu
</td>
<td>
Pink
</td>
<td>
$76838.03
</td>
<td>
2017-01-12
</td>
</tr>
<tr>
<td>
16995-002
</td>
<td>
Kaylee Sargeaunt
</td>
<td>
(161) 8333672
</td>
<td>
BMW
</td>
<td>
M5
</td>
<td>
Crimson
</td>
<td>
$67140.62
</td>
<td>
2017-03-14
</td>
</tr>
<tr>
<td>
36987-1754
</td>
<td>
Annie Wase
</td>
<td>
(645) 8966205
</td>
<td>
Toyota
</td>
<td>
Venza
</td>
<td>
Mauv
</td>
<td>
$73734.86
</td>
<td>
2017-04-21
</td>
</tr>
<tr>
<td>
0591-3770
</td>
<td>
Gerhard Snooks
</td>
<td>
(550) 4667160
</td>
<td>
Cadillac
</td>
<td>
CTS
</td>
<td>
Aquamarine
</td>
<td>
$31302.87
</td>
<td>
2017-11-24
</td>
</tr>
<tr>
<td>
21130-857
</td>
<td>
Helen-elizabeth Hanrahan
</td>
<td>
(802) 8582404
</td>
<td>
Toyota
</td>
<td>
Sienna
</td>
<td>
Aquamarine
</td>
<td>
$15431.90
</td>
<td>
2016-07-27
</td>
</tr>
<tr>
<td>
0591-5716
</td>
<td>
Igor Wonter
</td>
<td>
(807) 5379676
</td>
<td>
GMC
</td>
<td>
Yukon XL 2500
</td>
<td>
Red
</td>
<td>
$75150.20
</td>
<td>
2017-03-20
</td>
</tr>
<tr>
<td>
50474-400
</td>
<td>
Tess Ekkel
</td>
<td>
(559) 6762220
</td>
<td>
Jeep
</td>
<td>
Compass
</td>
<td>
Khaki
</td>
<td>
$62661.50
</td>
<td>
2017-09-30
</td>
</tr>
<tr>
<td>
54868-0325
</td>
<td>
Raimondo Tatterton
</td>
<td>
(877) 5037536
</td>
<td>
Mitsubishi
</td>
<td>
Diamante
</td>
<td>
Aquamarine
</td>
<td>
$44990.93
</td>
<td>
2017-09-23
</td>
</tr>
<tr>
<td>
60429-582
</td>
<td>
Raina Dudenie
</td>
<td>
(934) 6575468
</td>
<td>
Hyundai
</td>
<td>
Veracruz
</td>
<td>
Orange
</td>
<td>
$10346.71
</td>
<td>
2017-07-06
</td>
</tr>
<tr>
<td>
52584-026
</td>
<td>
Randy Casserly
</td>
<td>
(500) 3178012
</td>
<td>
Pontiac
</td>
<td>
G6
</td>
<td>
Khaki
</td>
<td>
$51466.87
</td>
<td>
2017-01-09
</td>
</tr>
<tr>
<td>
68745-2010
</td>
<td>
Casey Barracks
</td>
<td>
(902) 3150101
</td>
<td>
Mazda
</td>
<td>
RX-7
</td>
<td>
Mauv
</td>
<td>
$18157.31
</td>
<td>
2016-04-08
</td>
</tr>
<tr>
<td>
63629-3377
</td>
<td>
Cally Giddings
</td>
<td>
(743) 9739630
</td>
<td>
Pontiac
</td>
<td>
Firebird
</td>
<td>
Khaki
</td>
<td>
$31753.47
</td>
<td>
2016-12-25
</td>
</tr>
<tr>
<td>
16590-215
</td>
<td>
Eloise Elcoux
</td>
<td>
(504) 8539563
</td>
<td>
Land Rover
</td>
<td>
Discovery
</td>
<td>
Purple
</td>
<td>
$38805.21
</td>
<td>
2016-10-18
</td>
</tr>
<tr>
<td>
76519-1004
</td>
<td>
Leontine Perceval
</td>
<td>
(488) 2025428
</td>
<td>
Chevrolet
</td>
<td>
APV
</td>
<td>
Purple
</td>
<td>
$44888.84
</td>
<td>
2017-01-01
</td>
</tr>
<tr>
<td>
61958-1004
</td>
<td>
Nerte Djekic
</td>
<td>
(337) 5952491
</td>
<td>
MINI
</td>
<td>
Countryman
</td>
<td>
Mauv
</td>
<td>
$33244.77
</td>
<td>
2016-12-11
</td>
</tr>
<tr>
<td>
47682-302
</td>
<td>
Murielle Elmore
</td>
<td>
(198) 5450152
</td>
<td>
Saab
</td>
<td>
900
</td>
<td>
Fuscia
</td>
<td>
$14351.38
</td>
<td>
2017-01-18
</td>
</tr>
<tr>
<td>
64141-111
</td>
<td>
Carla Gridley
</td>
<td>
(275) 4871078
</td>
<td>
Ford
</td>
<td>
Laser
</td>
<td>
Orange
</td>
<td>
$96048.82
</td>
<td>
2017-10-15
</td>
</tr>
<tr>
<td>
52731-7045
</td>
<td>
Candice Roseman
</td>
<td>
(789) 4124609
</td>
<td>
GMC
</td>
<td>
2500 Club Coupe
</td>
<td>
Pink
</td>
<td>
$81502.84
</td>
<td>
2016-01-22
</td>
</tr>
<tr>
<td>
54575-362
</td>
<td>
Sharleen Gibson
</td>
<td>
(814) 4808286
</td>
<td>
Porsche
</td>
<td>
Boxster
</td>
<td>
Mauv
</td>
<td>
$22766.12
</td>
<td>
2016-08-06
</td>
</tr>
<tr>
<td>
49260-613
</td>
<td>
Tedi Cullingford
</td>
<td>
(839) 5548407
</td>
<td>
Pontiac
</td>
<td>
Firebird
</td>
<td>
Orange
</td>
<td>
$28603.11
</td>
<td>
2016-09-27
</td>
</tr>
<tr>
<td>
0268-0885
</td>
<td>
Imogene Gennings
</td>
<td>
(376) 5838776
</td>
<td>
Honda
</td>
<td>
Element
</td>
<td>
Maroon
</td>
<td>
$80170.45
</td>
<td>
2016-10-08
</td>
</tr>
<tr>
<td>
42291-662
</td>
<td>
Saw Iban
</td>
<td>
(885) 1834755
</td>
<td>
Dodge
</td>
<td>
Dakota Club
</td>
<td>
Green
</td>
<td>
$88624.91
</td>
<td>
2017-09-16
</td>
</tr>
<tr>
<td>
11344-919
</td>
<td>
Niccolo Proudley
</td>
<td>
(374) 7137956
</td>
<td>
Chevrolet
</td>
<td>
Lumina
</td>
<td>
Green
</td>
<td>
$61079.97
</td>
<td>
2017-08-29
</td>
</tr>
<tr>
<td>
0006-0575
</td>
<td>
Quinn Gocke
</td>
<td>
(526) 5562038
</td>
<td>
Ford
</td>
<td>
E150
</td>
<td>
Purple
</td>
<td>
$27265.59
</td>
<td>
2017-11-14
</td>
</tr>
<tr>
<td>
52125-244
</td>
<td>
Tobe Urling
</td>
<td>
(818) 5041622
</td>
<td>
Mercedes-Benz
</td>
<td>
R-Class
</td>
<td>
Goldenrod
</td>
<td>
$79407.62
</td>
<td>
2016-05-07
</td>
</tr>
<tr>
<td>
68308-325
</td>
<td>
Tine Beagen
</td>
<td>
(806) 5042730
</td>
<td>
Ford
</td>
<td>
Aerostar
</td>
<td>
Aquamarine
</td>
<td>
$62500.19
</td>
<td>
2017-03-16
</td>
</tr>
<tr>
<td>
36000-282
</td>
<td>
Yardley Elgey
</td>
<td>
(310) 7532769
</td>
<td>
Lotus
</td>
<td>
Esprit
</td>
<td>
Maroon
</td>
<td>
$42287.88
</td>
<td>
2017-11-18
</td>
</tr>
<tr>
<td>
55118-225
</td>
<td>
Nanine Laister
</td>
<td>
(878) 4281779
</td>
<td>
Nissan
</td>
<td>
Quest
</td>
<td>
Mauv
</td>
<td>
$30422.47
</td>
<td>
2016-05-27
</td>
</tr>
<tr>
<td>
55154-8376
</td>
<td>
Gardy Ennever
</td>
<td>
(795) 3148895
</td>
<td>
Saab
</td>
<td>
900
</td>
<td>
Crimson
</td>
<td>
$20340.35
</td>
<td>
2016-09-26
</td>
</tr>
<tr>
<td>
59746-248
</td>
<td>
Jorrie Lehrle
</td>
<td>
(880) 7746744
</td>
<td>
GMC
</td>
<td>
Sierra 1500
</td>
<td>
Mauv
</td>
<td>
$35216.99
</td>
<td>
2017-04-19
</td>
</tr>
<tr>
<td>
64257-515
</td>
<td>
Catlin Syalvester
</td>
<td>
(473) 8824525
</td>
<td>
Mazda
</td>
<td>
MX-5
</td>
<td>
Blue
</td>
<td>
$86902.40
</td>
<td>
2017-06-26
</td>
</tr>
<tr>
<td>
52380-1101
</td>
<td>
Tybie Bonehill
</td>
<td>
(625) 7153506
</td>
<td>
Ford
</td>
<td>
Courier
</td>
<td>
Teal
</td>
<td>
$58548.57
</td>
<td>
2016-08-31
</td>
</tr>
<tr>
<td>
16590-935
</td>
<td>
Alard Caddock
</td>
<td>
(653) 9185720
</td>
<td>
Buick
</td>
<td>
Century
</td>
<td>
Puce
</td>
<td>
$58531.62
</td>
<td>
2017-10-29
</td>
</tr>
<tr>
<td>
43063-217
</td>
<td>
Sherwood Dugdale
</td>
<td>
(825) 7198840
</td>
<td>
Mazda
</td>
<td>
626
</td>
<td>
Maroon
</td>
<td>
$40018.92
</td>
<td>
2016-02-25
</td>
</tr>
<tr>
<td>
67046-672
</td>
<td>
Juditha Gallier
</td>
<td>
(632) 8511983
</td>
<td>
Hyundai
</td>
<td>
Accent
</td>
<td>
Crimson
</td>
<td>
$88732.19
</td>
<td>
2017-07-14
</td>
</tr>
<tr>
<td>
68016-823
</td>
<td>
Barton Finan
</td>
<td>
(134) 5545060
</td>
<td>
Oldsmobile
</td>
<td>
Cutlass Supreme
</td>
<td>
Purple
</td>
<td>
$56025.91
</td>
<td>
2017-04-05
</td>
</tr>
<tr>
<td>
69244-3001
</td>
<td>
Pepi MacDunlevy
</td>
<td>
(355) 3036719
</td>
<td>
Mercedes-Benz
</td>
<td>
E-Class
</td>
<td>
Maroon
</td>
<td>
$65530.48
</td>
<td>
2017-10-27
</td>
</tr>
<tr>
<td>
52533-160
</td>
<td>
Siegfried Hearthfield
</td>
<td>
(199) 4233976
</td>
<td>
Chrysler
</td>
<td>
Aspen
</td>
<td>
Puce
</td>
<td>
$55826.86
</td>
<td>
2016-02-12
</td>
</tr>
<tr>
<td>
37000-184
</td>
<td>
Emmanuel Klehn
</td>
<td>
(522) 6504441
</td>
<td>
Mercedes-Benz
</td>
<td>
SL-Class
</td>
<td>
Yellow
</td>
<td>
$99530.02
</td>
<td>
2016-10-16
</td>
</tr>
<tr>
<td>
55154-9615
</td>
<td>
Misha Wherrett
</td>
<td>
(563) 6333585
</td>
<td>
Nissan
</td>
<td>
Altima
</td>
<td>
Indigo
</td>
<td>
$46389.16
</td>
<td>
2016-09-07
</td>
</tr>
<tr>
<td>
30142-601
</td>
<td>
Grace Lipman
</td>
<td>
(216) 8991083
</td>
<td>
Suzuki
</td>
<td>
Swift
</td>
<td>
Crimson
</td>
<td>
$70355.23
</td>
<td>
2017-02-01
</td>
</tr>
<tr>
<td>
41163-078
</td>
<td>
Tania Dinning
</td>
<td>
(222) 1194615
</td>
<td>
Chevrolet
</td>
<td>
Suburban
</td>
<td>
Blue
</td>
<td>
$71922.35
</td>
<td>
2017-12-09
</td>
</tr>
<tr>
<td>
68428-044
</td>
<td>
Inigo Harnor
</td>
<td>
(292) 3092919
</td>
<td>
BMW
</td>
<td>
5 Series
</td>
<td>
Purple
</td>
<td>
$70783.75
</td>
<td>
2017-05-14
</td>
</tr>
<tr>
<td>
0093-4161
</td>
<td>
Albina Yerrell
</td>
<td>
(436) 2775370
</td>
<td>
Mitsubishi
</td>
<td>
Chariot
</td>
<td>
Mauv
</td>
<td>
$98347.91
</td>
<td>
2016-09-13
</td>
</tr>
<tr>
<td>
64942-1225
</td>
<td>
Arron Kezourec
</td>
<td>
(227) 5907590
</td>
<td>
Audi
</td>
<td>
Coupe GT
</td>
<td>
Goldenrod
</td>
<td>
$88578.67
</td>
<td>
2017-03-26
</td>
</tr>
<tr>
<td>
0406-8960
</td>
<td>
Sergeant Paddefield
</td>
<td>
(873) 3110165
</td>
<td>
Suzuki
</td>
<td>
SX4
</td>
<td>
Goldenrod
</td>
<td>
$22339.95
</td>
<td>
2016-11-25
</td>
</tr>
<tr>
<td>
53150-250
</td>
<td>
Anestassia De Fries
</td>
<td>
(243) 7619758
</td>
<td>
Volkswagen
</td>
<td>
Touareg
</td>
<td>
Indigo
</td>
<td>
$98734.53
</td>
<td>
2016-05-18
</td>
</tr>
<tr>
<td>
65862-061
</td>
<td>
Montgomery Southcoat
</td>
<td>
(435) 8829120
</td>
<td>
Ford
</td>
<td>
Bronco
</td>
<td>
Violet
</td>
<td>
$97615.88
</td>
<td>
2017-02-09
</td>
</tr>
<tr>
<td>
36987-1967
</td>
<td>
Kleon Minchenton
</td>
<td>
(831) 3893014
</td>
<td>
Dodge
</td>
<td>
Dakota
</td>
<td>
Green
</td>
<td>
$85134.59
</td>
<td>
2016-10-27
</td>
</tr>
<tr>
<td>
67544-298
</td>
<td>
Rosalyn McTeer
</td>
<td>
(845) 6966658
</td>
<td>
Volkswagen
</td>
<td>
GTI
</td>
<td>
Pink
</td>
<td>
$40741.32
</td>
<td>
2016-08-07
</td>
</tr>
<tr>
<td>
60505-0176
</td>
<td>
Sampson Mingay
</td>
<td>
(582) 5639971
</td>
<td>
Infiniti
</td>
<td>
I
</td>
<td>
Violet
</td>
<td>
$88649.99
</td>
<td>
2016-07-25
</td>
</tr>
<tr>
<td>
60319-4001
</td>
<td>
Ailene Swindells
</td>
<td>
(150) 7296562
</td>
<td>
Audi
</td>
<td>
5000S
</td>
<td>
Orange
</td>
<td>
$57310.99
</td>
<td>
2017-09-11
</td>
</tr>
<tr>
<td>
46708-035
</td>
<td>
Virgie Vella
</td>
<td>
(822) 5869741
</td>
<td>
Toyota
</td>
<td>
Tacoma
</td>
<td>
Red
</td>
<td>
$40856.55
</td>
<td>
2016-07-06
</td>
</tr>
<tr>
<td>
67718-938
</td>
<td>
Beilul Bonnett
</td>
<td>
(966) 3438432
</td>
<td>
Dodge
</td>
<td>
Dakota
</td>
<td>
Violet
</td>
<td>
$20927.13
</td>
<td>
2017-05-09
</td>
</tr>
<tr>
<td>
10889-106
</td>
<td>
Zaccaria Canto
</td>
<td>
(302) 7119085
</td>
<td>
Mercury
</td>
<td>
Topaz
</td>
<td>
Violet
</td>
<td>
$73285.39
</td>
<td>
2016-09-03
</td>
</tr>
<tr>
<td>
16590-217
</td>
<td>
Elysia Mewrcik
</td>
<td>
(958) 1047384
</td>
<td>
Ford
</td>
<td>
Tempo
</td>
<td>
Violet
</td>
<td>
$94717.43
</td>
<td>
2017-12-24
</td>
</tr>
<tr>
<td>
51346-208
</td>
<td>
Shirlene Moan
</td>
<td>
(495) 8670921
</td>
<td>
Maserati
</td>
<td>
Spyder
</td>
<td>
Orange
</td>
<td>
$92595.92
</td>
<td>
2016-02-02
</td>
</tr>
<tr>
<td>
49817-0070
</td>
<td>
Jo ann Doggrell
</td>
<td>
(663) 2181102
</td>
<td>
Lotus
</td>
<td>
Exige
</td>
<td>
Indigo
</td>
<td>
$61597.27
</td>
<td>
2016-04-21
</td>
</tr>
<tr>
<td>
31720-211
</td>
<td>
Axe Ifill
</td>
<td>
(203) 1949159
</td>
<td>
GMC
</td>
<td>
Vandura 3500
</td>
<td>
Violet
</td>
<td>
$28371.88
</td>
<td>
2017-09-21
</td>
</tr>
<tr>
<td>
59886-340
</td>
<td>
Randi Gockeler
</td>
<td>
(939) 3260442
</td>
<td>
Chevrolet
</td>
<td>
Aveo
</td>
<td>
Turquoise
</td>
<td>
$34479.82
</td>
<td>
2016-08-11
</td>
</tr>
<tr>
<td>
10812-873
</td>
<td>
Dukey Letteresse
</td>
<td>
(249) 5119236
</td>
<td>
Infiniti
</td>
<td>
G
</td>
<td>
Fuscia
</td>
<td>
$22117.39
</td>
<td>
2017-01-19
</td>
</tr>
<tr>
<td>
63323-238
</td>
<td>
Klaus Andrassy
</td>
<td>
(970) 6395503
</td>
<td>
Mitsubishi
</td>
<td>
Sigma
</td>
<td>
Violet
</td>
<td>
$16694.16
</td>
<td>
2017-09-14
</td>
</tr>
<tr>
<td>
68084-062
</td>
<td>
Hillary Hully
</td>
<td>
(203) 3759234
</td>
<td>
Honda
</td>
<td>
Civic
</td>
<td>
Khaki
</td>
<td>
$82730.20
</td>
<td>
2016-11-12
</td>
</tr>
<tr>
<td>
62011-0032
</td>
<td>
Bond Ofener
</td>
<td>
(571) 1562188
</td>
<td>
Jeep
</td>
<td>
Cherokee
</td>
<td>
Pink
</td>
<td>
$27135.34
</td>
<td>
2016-02-07
</td>
</tr>
<tr>
<td>
0006-0951
</td>
<td>
Turner Silvermann
</td>
<td>
(766) 9823362
</td>
<td>
Dodge
</td>
<td>
Ram 2500
</td>
<td>
Orange
</td>
<td>
$35100.35
</td>
<td>
2016-07-11
</td>
</tr>
<tr>
<td>
61715-098
</td>
<td>
Ines Clemenzo
</td>
<td>
(839) 6476213
</td>
<td>
Mitsubishi
</td>
<td>
Truck
</td>
<td>
Violet
</td>
<td>
$86481.08
</td>
<td>
2017-07-12
</td>
</tr>
<tr>
<td>
76472-1129
</td>
<td>
Flory Orvis
</td>
<td>
(954) 8668304
</td>
<td>
Saturn
</td>
<td>
VUE
</td>
<td>
Red
</td>
<td>
$41773.44
</td>
<td>
2016-03-27
</td>
</tr>
<tr>
<td>
0363-0236
</td>
<td>
Maggee Cicetti
</td>
<td>
(502) 8818640
</td>
<td>
Oldsmobile
</td>
<td>
Silhouette
</td>
<td>
Khaki
</td>
<td>
$38969.12
</td>
<td>
2016-12-22
</td>
</tr>
<tr>
<td>
55154-1336
</td>
<td>
Derron Rigmond
</td>
<td>
(521) 1010631
</td>
<td>
Chevrolet
</td>
<td>
Express 1500
</td>
<td>
Turquoise
</td>
<td>
$61520.54
</td>
<td>
2017-07-01
</td>
</tr>
<tr>
<td>
49288-0600
</td>
<td>
Giovanni Martinello
</td>
<td>
(213) 6361851
</td>
<td>
Oldsmobile
</td>
<td>
Aurora
</td>
<td>
Blue
</td>
<td>
$42877.19
</td>
<td>
2017-07-31
</td>
</tr>
<tr>
<td>
61957-0903
</td>
<td>
Arly Duigan
</td>
<td>
(501) 9547783
</td>
<td>
Volkswagen
</td>
<td>
Golf
</td>
<td>
Turquoise
</td>
<td>
$15494.89
</td>
<td>
2016-05-15
</td>
</tr>
<tr>
<td>
0093-7473
</td>
<td>
Mason Anker
</td>
<td>
(722) 6021152
</td>
<td>
Audi
</td>
<td>
S6
</td>
<td>
Puce
</td>
<td>
$95903.74
</td>
<td>
2016-07-31
</td>
</tr>
<tr>
<td>
60764-006
</td>
<td>
Taber Nevett
</td>
<td>
(919) 9971430
</td>
<td>
Dodge
</td>
<td>
Dakota
</td>
<td>
Puce
</td>
<td>
$42240.15
</td>
<td>
2016-08-21
</td>
</tr>
<tr>
<td>
59279-507
</td>
<td>
Abbye Branca
</td>
<td>
(988) 2061648
</td>
<td>
Audi
</td>
<td>
Q5
</td>
<td>
Khaki
</td>
<td>
$16814.44
</td>
<td>
2017-10-12
</td>
</tr>
<tr>
<td>
15478-001
</td>
<td>
Aviva Lower
</td>
<td>
(434) 1774422
</td>
<td>
Mazda
</td>
<td>
Tribute
</td>
<td>
Yellow
</td>
<td>
$84483.81
</td>
<td>
2016-02-09
</td>
</tr>
<tr>
<td>
0555-0595
</td>
<td>
Nessy Aaronsohn
</td>
<td>
(677) 5096397
</td>
<td>
Toyota
</td>
<td>
Celica
</td>
<td>
Green
</td>
<td>
$66632.25
</td>
<td>
2016-07-20
</td>
</tr>
<tr>
<td>
0067-8105
</td>
<td>
Klara Mort
</td>
<td>
(927) 9164412
</td>
<td>
Suzuki
</td>
<td>
Forenza
</td>
<td>
Indigo
</td>
<td>
$80973.60
</td>
<td>
2016-01-03
</td>
</tr>
<tr>
<td>
0013-8303
</td>
<td>
Nathan Scrase
</td>
<td>
(849) 4082617
</td>
<td>
Isuzu
</td>
<td>
Axiom
</td>
<td>
Pink
</td>
<td>
$88463.97
</td>
<td>
2016-06-27
</td>
</tr>
<tr>
<td>
63941-003
</td>
<td>
Nellie Marcinkowski
</td>
<td>
(800) 8182585
</td>
<td>
Hyundai
</td>
<td>
XG350
</td>
<td>
Orange
</td>
<td>
$39504.17
</td>
<td>
2017-12-04
</td>
</tr>
<tr>
<td>
67046-915
</td>
<td>
Heda Fretwell
</td>
<td>
(171) 6527161
</td>
<td>
Ford
</td>
<td>
Fairlane
</td>
<td>
Yellow
</td>
<td>
$50807.63
</td>
<td>
2016-06-02
</td>
</tr>
<tr>
<td>
0046-1104
</td>
<td>
Courtney Curtayne
</td>
<td>
(823) 4506262
</td>
<td>
Mercedes-Benz
</td>
<td>
E-Class
</td>
<td>
Maroon
</td>
<td>
$67363.15
</td>
<td>
2016-12-13
</td>
</tr>
<tr>
<td>
50181-0013
</td>
<td>
Doll Kirkman
</td>
<td>
(819) 5400302
</td>
<td>
GMC
</td>
<td>
Yukon XL 1500
</td>
<td>
Violet
</td>
<td>
$24037.13
</td>
<td>
2016-05-06
</td>
</tr>
<tr>
<td>
44911-0121
</td>
<td>
Meredithe Gaither
</td>
<td>
(134) 7310512
</td>
<td>
Hyundai
</td>
<td>
Elantra
</td>
<td>
Purple
</td>
<td>
$22714.10
</td>
<td>
2016-11-04
</td>
</tr>
<tr>
<td>
43063-339
</td>
<td>
Florenza Chominski
</td>
<td>
(158) 4154311
</td>
<td>
Hyundai
</td>
<td>
Elantra
</td>
<td>
Violet
</td>
<td>
$37418.20
</td>
<td>
2017-06-10
</td>
</tr>
<tr>
<td>
24653-282
</td>
<td>
Corabel Pizzey
</td>
<td>
(962) 8955912
</td>
<td>
Volvo
</td>
<td>
S40
</td>
<td>
Pink
</td>
<td>
$39343.37
</td>
<td>
2017-03-02
</td>
</tr>
<tr>
<td>
0228-2837
</td>
<td>
Cristian Frisch
</td>
<td>
(956) 1587850
</td>
<td>
Mazda
</td>
<td>
B-Series
</td>
<td>
Fuscia
</td>
<td>
$89968.73
</td>
<td>
2016-11-09
</td>
</tr>
<tr>
<td>
49035-516
</td>
<td>
Selie Tillerton
</td>
<td>
(401) 6603509
</td>
<td>
Hyundai
</td>
<td>
Sonata
</td>
<td>
Mauv
</td>
<td>
$93302.34
</td>
<td>
2016-05-30
</td>
</tr>
<tr>
<td>
57237-056
</td>
<td>
Carol MacIlriach
</td>
<td>
(906) 5303069
</td>
<td>
Mitsubishi
</td>
<td>
Mirage
</td>
<td>
Orange
</td>
<td>
$79033.14
</td>
<td>
2017-01-02
</td>
</tr>
<tr>
<td>
76214-020
</td>
<td>
Inga Suttie
</td>
<td>
(409) 7446305
</td>
<td>
Morgan
</td>
<td>
Aero 8
</td>
<td>
Pink
</td>
<td>
$40506.96
</td>
<td>
2017-06-18
</td>
</tr>
<tr>
<td>
68828-084
</td>
<td>
Erich Scandrick
</td>
<td>
(353) 2695067
</td>
<td>
Buick
</td>
<td>
Rendezvous
</td>
<td>
Turquoise
</td>
<td>
$17788.34
</td>
<td>
2017-09-13
</td>
</tr>
<tr>
<td>
48951-8142
</td>
<td>
Thaddus Phizacklea
</td>
<td>
(108) 4424643
</td>
<td>
Chevrolet
</td>
<td>
Camaro
</td>
<td>
Green
</td>
<td>
$99785.96
</td>
<td>
2017-09-12
</td>
</tr>
<tr>
<td>
55289-018
</td>
<td>
Ilario Roadnight
</td>
<td>
(434) 6769019
</td>
<td>
Dodge
</td>
<td>
Dakota
</td>
<td>
Goldenrod
</td>
<td>
$44697.63
</td>
<td>
2017-02-26
</td>
</tr>
<tr>
<td>
33261-416
</td>
<td>
Gwenette Ridhole
</td>
<td>
(407) 7656030
</td>
<td>
Chevrolet
</td>
<td>
Tahoe
</td>
<td>
Indigo
</td>
<td>
$66543.51
</td>
<td>
2017-08-09
</td>
</tr>
<tr>
<td>
0093-4146
</td>
<td>
Gretchen Coult
</td>
<td>
(844) 6417821
</td>
<td>
Hyundai
</td>
<td>
Accent
</td>
<td>
Goldenrod
</td>
<td>
$32727.98
</td>
<td>
2016-02-16
</td>
</tr>
<tr>
<td>
52380-1880
</td>
<td>
Olivero Arman
</td>
<td>
(991) 3750974
</td>
<td>
Toyota
</td>
<td>
4Runner
</td>
<td>
Maroon
</td>
<td>
$84613.29
</td>
<td>
2017-08-31
</td>
</tr>
<tr>
<td>
33992-0268
</td>
<td>
Merilee Malsher
</td>
<td>
(830) 7990701
</td>
<td>
Buick
</td>
<td>
Enclave
</td>
<td>
Teal
</td>
<td>
$19820.19
</td>
<td>
2016-08-01
</td>
</tr>
<tr>
<td>
0280-1440
</td>
<td>
Giffard Bertolin
</td>
<td>
(876) 9968818
</td>
<td>
Mazda
</td>
<td>
929
</td>
<td>
Orange
</td>
<td>
$14235.30
</td>
<td>
2016-07-25
</td>
</tr>
<tr>
<td>
69114-2001
</td>
<td>
Tobias Brombell
</td>
<td>
(948) 5326501
</td>
<td>
Mercedes-Benz
</td>
<td>
E-Class
</td>
<td>
Mauv
</td>
<td>
$23693.34
</td>
<td>
2016-10-21
</td>
</tr>
<tr>
<td>
11673-395
</td>
<td>
Elvis Bartels
</td>
<td>
(792) 2836414
</td>
<td>
Buick
</td>
<td>
Century
</td>
<td>
Fuscia
</td>
<td>
$66276.64
</td>
<td>
2016-06-06
</td>
</tr>
<tr>
<td>
0406-9926
</td>
<td>
Vania Lourens
</td>
<td>
(201) 5588530
</td>
<td>
Ford
</td>
<td>
Explorer Sport Trac
</td>
<td>
Fuscia
</td>
<td>
$44164.25
</td>
<td>
2017-07-09
</td>
</tr>
<tr>
<td>
50111-333
</td>
<td>
Kain De&#39;Ath
</td>
<td>
(621) 2342331
</td>
<td>
Lexus
</td>
<td>
LS
</td>
<td>
Goldenrod
</td>
<td>
$31826.25
</td>
<td>
2016-05-02
</td>
</tr>
<tr>
<td>
37808-422
</td>
<td>
Timmie Gatecliff
</td>
<td>
(848) 9069629
</td>
<td>
Mercedes-Benz
</td>
<td>
GLK-Class
</td>
<td>
Khaki
</td>
<td>
$61960.06
</td>
<td>
2017-11-13
</td>
</tr>
<tr>
<td>
36000-176
</td>
<td>
Carrissa Davana
</td>
<td>
(991) 5619687
</td>
<td>
Ford
</td>
<td>
F-Series Super Duty
</td>
<td>
Khaki
</td>
<td>
$99478.27
</td>
<td>
2016-10-31
</td>
</tr>
<tr>
<td>
62856-705
</td>
<td>
Ferdinande Itzhaiek
</td>
<td>
(867) 6094265
</td>
<td>
GMC
</td>
<td>
Canyon
</td>
<td>
Mauv
</td>
<td>
$24702.01
</td>
<td>
2017-05-03
</td>
</tr>
<tr>
<td>
54273-000
</td>
<td>
Misti Pick
</td>
<td>
(985) 9871608
</td>
<td>
Nissan
</td>
<td>
Pathfinder
</td>
<td>
Blue
</td>
<td>
$32344.81
</td>
<td>
2016-08-30
</td>
</tr>
<tr>
<td>
54473-228
</td>
<td>
Ddene Stebbings
</td>
<td>
(934) 5084472
</td>
<td>
BMW
</td>
<td>
M3
</td>
<td>
Mauv
</td>
<td>
$57983.36
</td>
<td>
2016-04-14
</td>
</tr>
<tr>
<td>
67296-0801
</td>
<td>
Hermine Mundford
</td>
<td>
(819) 3022082
</td>
<td>
Toyota
</td>
<td>
MR2
</td>
<td>
Khaki
</td>
<td>
$46202.99
</td>
<td>
2016-05-21
</td>
</tr>
<tr>
<td>
64471-330
</td>
<td>
Maynord Vaneev
</td>
<td>
(330) 8996328
</td>
<td>
Cadillac
</td>
<td>
Escalade ESV
</td>
<td>
Blue
</td>
<td>
$45740.26
</td>
<td>
2016-03-30
</td>
</tr>
<tr>
<td>
0378-0344
</td>
<td>
Jaimie Wrey
</td>
<td>
(209) 5215049
</td>
<td>
GMC
</td>
<td>
Sierra 1500
</td>
<td>
Khaki
</td>
<td>
$12938.74
</td>
<td>
2017-09-21
</td>
</tr>
<tr>
<td>
60846-807
</td>
<td>
Eliot Brunetti
</td>
<td>
(520) 9958820
</td>
<td>
Chevrolet
</td>
<td>
TrailBlazer
</td>
<td>
Purple
</td>
<td>
$26441.50
</td>
<td>
2016-12-03
</td>
</tr>
<tr>
<td>
49288-0752
</td>
<td>
Mandi Bielefeld
</td>
<td>
(103) 6044691
</td>
<td>
Chevrolet
</td>
<td>
Corvette
</td>
<td>
Blue
</td>
<td>
$73061.25
</td>
<td>
2017-11-27
</td>
</tr>
<tr>
<td>
62011-0248
</td>
<td>
Carol Ible
</td>
<td>
(819) 4166523
</td>
<td>
Lexus
</td>
<td>
RX
</td>
<td>
Blue
</td>
<td>
$77034.66
</td>
<td>
2017-01-31
</td>
</tr>
<tr>
<td>
65044-2101
</td>
<td>
Anastasia Hutley
</td>
<td>
(333) 2412744
</td>
<td>
Cadillac
</td>
<td>
Escalade
</td>
<td>
Crimson
</td>
<td>
$82055.16
</td>
<td>
2016-10-24
</td>
</tr>
<tr>
<td>
43547-254
</td>
<td>
Christoffer Gullam
</td>
<td>
(666) 8751957
</td>
<td>
Lotus
</td>
<td>
Elan
</td>
<td>
Maroon
</td>
<td>
$21632.15
</td>
<td>
2016-03-02
</td>
</tr>
<tr>
<td>
11673-208
</td>
<td>
Wat Wrates
</td>
<td>
(147) 5178268
</td>
<td>
Audi
</td>
<td>
V8
</td>
<td>
Khaki
</td>
<td>
$72574.55
</td>
<td>
2016-07-12
</td>
</tr>
<tr>
<td>
68084-401
</td>
<td>
Florenza Jorat
</td>
<td>
(330) 4787446
</td>
<td>
Toyota
</td>
<td>
Sequoia
</td>
<td>
Puce
</td>
<td>
$24295.37
</td>
<td>
2017-03-30
</td>
</tr>
<tr>
<td>
0615-5576
</td>
<td>
Lurleen Upjohn
</td>
<td>
(332) 9654826
</td>
<td>
Jeep
</td>
<td>
Patriot
</td>
<td>
Mauv
</td>
<td>
$55204.50
</td>
<td>
2016-08-13
</td>
</tr>
<tr>
<td>
68001-242
</td>
<td>
Norine Scedall
</td>
<td>
(426) 9356871
</td>
<td>
GMC
</td>
<td>
2500
</td>
<td>
Turquoise
</td>
<td>
$60227.86
</td>
<td>
2016-09-04
</td>
</tr>
<tr>
<td>
51346-188
</td>
<td>
Ricki Yarnton
</td>
<td>
(751) 5116297
</td>
<td>
Audi
</td>
<td>
A6
</td>
<td>
Orange
</td>
<td>
$83227.75
</td>
<td>
2016-01-06
</td>
</tr>
<tr>
<td>
54868-2093
</td>
<td>
Shirline Scrafton
</td>
<td>
(270) 9246449
</td>
<td>
Suzuki
</td>
<td>
Forenza
</td>
<td>
Fuscia
</td>
<td>
$92530.81
</td>
<td>
2016-11-14
</td>
</tr>
<tr>
<td>
49349-867
</td>
<td>
Chico Rubinowitsch
</td>
<td>
(392) 6963561
</td>
<td>
Hyundai
</td>
<td>
Accent
</td>
<td>
Violet
</td>
<td>
$75138.19
</td>
<td>
2016-02-24
</td>
</tr>
<tr>
<td>
52533-142
</td>
<td>
Fanchon Durran
</td>
<td>
(945) 3614142
</td>
<td>
Chevrolet
</td>
<td>
Express 2500
</td>
<td>
Khaki
</td>
<td>
$20926.39
</td>
<td>
2016-01-06
</td>
</tr>
<tr>
<td>
64942-1214
</td>
<td>
Ursulina Lanphier
</td>
<td>
(191) 8945727
</td>
<td>
GMC
</td>
<td>
Envoy
</td>
<td>
Indigo
</td>
<td>
$84545.27
</td>
<td>
2017-08-26
</td>
</tr>
<tr>
<td>
54868-0843
</td>
<td>
Ayn Garvin
</td>
<td>
(360) 5221311
</td>
<td>
Toyota
</td>
<td>
Prius
</td>
<td>
Maroon
</td>
<td>
$93920.58
</td>
<td>
2016-01-09
</td>
</tr>
<tr>
<td>
57520-0615
</td>
<td>
Risa Bayford
</td>
<td>
(968) 4661308
</td>
<td>
Ford
</td>
<td>
Mustang
</td>
<td>
Mauv
</td>
<td>
$60440.20
</td>
<td>
2016-02-27
</td>
</tr>
<tr>
<td>
30142-396
</td>
<td>
Batholomew Peppard
</td>
<td>
(228) 1082053
</td>
<td>
Infiniti
</td>
<td>
G
</td>
<td>
Purple
</td>
<td>
$44794.18
</td>
<td>
2016-03-08
</td>
</tr>
<tr>
<td>
0009-0176
</td>
<td>
Davita Woolsey
</td>
<td>
(355) 3639205
</td>
<td>
Dodge
</td>
<td>
Ram 2500 Club
</td>
<td>
Yellow
</td>
<td>
$64164.18
</td>
<td>
2017-01-21
</td>
</tr>
<tr>
<td>
76237-188
</td>
<td>
Lauren Thunderchief
</td>
<td>
(824) 9195850
</td>
<td>
Chrysler
</td>
<td>
LeBaron
</td>
<td>
Violet
</td>
<td>
$34031.52
</td>
<td>
2016-10-17
</td>
</tr>
<tr>
<td>
60505-3638
</td>
<td>
Virginie Barrett
</td>
<td>
(109) 3478355
</td>
<td>
Honda
</td>
<td>
Pilot
</td>
<td>
Purple
</td>
<td>
$89898.57
</td>
<td>
2017-07-14
</td>
</tr>
<tr>
<td>
76267-060
</td>
<td>
Rodge Spafford
</td>
<td>
(368) 8209458
</td>
<td>
Nissan
</td>
<td>
240SX
</td>
<td>
Khaki
</td>
<td>
$27001.99
</td>
<td>
2016-12-16
</td>
</tr>
<tr>
<td>
35000-674
</td>
<td>
Aldous Reams
</td>
<td>
(880) 7359671
</td>
<td>
Mercury
</td>
<td>
Sable
</td>
<td>
Khaki
</td>
<td>
$53892.90
</td>
<td>
2016-03-23
</td>
</tr>
<tr>
<td>
49869-002
</td>
<td>
Broderic Burnsell
</td>
<td>
(252) 6243116
</td>
<td>
Mercedes-Benz
</td>
<td>
W201
</td>
<td>
Goldenrod
</td>
<td>
$73661.98
</td>
<td>
2016-04-20
</td>
</tr>
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
</div>
</div>
<!-- end:: Body -->
<!-- begin::Footer -->
<footer class="m-grid__item m-footer ">
<div class="m-container m-container--fluid m-container--full-height m-page__container">
<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
<span class="m-footer__copyright">
2017 &copy; Metronic theme by
<a href="#" class="m-link">
Keenthemes
</a>
</span>
</div>
<div class="m-stack__item m-stack__item--right m-stack__item--middle m-stack__item--first">
<ul class="m-footer__nav m-nav m-nav--inline m--pull-right">
<li class="m-nav__item">
<a href="#" class="m-nav__link">
<span class="m-nav__link-text">
About
</span>
</a>
</li>
<li class="m-nav__item">
<a href="#" class="m-nav__link">
<span class="m-nav__link-text">
Privacy
</span>
</a>
</li>
<li class="m-nav__item">
<a href="#" class="m-nav__link">
<span class="m-nav__link-text">
T&C
</span>
</a>
</li>
<li class="m-nav__item">
<a href="#" class="m-nav__link">
<span class="m-nav__link-text">
Purchase
</span>
</a>
</li>
<li class="m-nav__item m-nav__item">
<a href="#" class="m-nav__link" data-toggle="m-tooltip" title="Support Center" data-placement="left">
<i class="m-nav__link-icon flaticon-info m--icon-font-size-lg3"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- end::Footer -->
</div>
<!-- end:: Page -->
<!-- begin::Quick Sidebar -->
<div id="m_quick_sidebar" class="m-quick-sidebar m-quick-sidebar--tabbed m-quick-sidebar--skin-light">
<div class="m-quick-sidebar__content m--hide">
<span id="m_quick_sidebar_close" class="m-quick-sidebar__close">
<i class="la la-close"></i>
</span>
<ul id="m_quick_sidebar_tabs" class="nav nav-tabs m-tabs m-tabs-line m-tabs-line--brand" role="tablist">
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link active" data-toggle="tab" href="#m_quick_sidebar_tabs_messenger" role="tab">
Messages
</a>
</li>
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_quick_sidebar_tabs_settings" role="tab">
Settings
</a>
</li>
<li class="nav-item m-tabs__item">
<a class="nav-link m-tabs__link" data-toggle="tab" href="#m_quick_sidebar_tabs_logs" role="tab">
Logs
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-scrollable" id="m_quick_sidebar_tabs_messenger" role="tabpanel">
<div class="m-messenger m-messenger--message-arrow m-messenger--skin-light">
<div class="m-messenger__messages">
<div class="m-messenger__message m-messenger__message--in">
<div class="m-messenger__message-pic">
<img src="../../../assets/app/media/img//users/user3.jpg" alt=""/>
</div>
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-username">
Megan wrote
</div>
<div class="m-messenger__message-text">
Hi Bob. What time will be the meeting ?
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--out">
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-text">
Hi Megan. It's at 2.30PM
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--in">
<div class="m-messenger__message-pic">
<img src="../../../assets/app/media/img//users/user3.jpg" alt=""/>
</div>
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-username">
Megan wrote
</div>
<div class="m-messenger__message-text">
Will the development team be joining ?
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--out">
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-text">
Yes sure. I invited them as well
</div>
</div>
</div>
</div>
<div class="m-messenger__datetime">
2:30PM
</div>
<div class="m-messenger__message m-messenger__message--in">
<div class="m-messenger__message-pic">
<img src="../../../assets/app/media/img//users/user3.jpg" alt=""/>
</div>
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-username">
Megan wrote
</div>
<div class="m-messenger__message-text">
Noted. For the Coca-Cola Mobile App project as well ?
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--out">
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-text">
Yes, sure.
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--out">
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-text">
Please also prepare the quotation for the Loop CRM project as well.
</div>
</div>
</div>
</div>
<div class="m-messenger__datetime">
3:15PM
</div>
<div class="m-messenger__message m-messenger__message--in">
<div class="m-messenger__message-no-pic m--bg-fill-danger">
<span>
M
</span>
</div>
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-username">
Megan wrote
</div>
<div class="m-messenger__message-text">
Noted. I will prepare it.
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--out">
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-text">
Thanks Megan. I will see you later.
</div>
</div>
</div>
</div>
<div class="m-messenger__message m-messenger__message--in">
<div class="m-messenger__message-pic">
<img src="../../../assets/app/media/img//users/user3.jpg" alt=""/>
</div>
<div class="m-messenger__message-body">
<div class="m-messenger__message-arrow"></div>
<div class="m-messenger__message-content">
<div class="m-messenger__message-username">
Megan wrote
</div>
<div class="m-messenger__message-text">
Sure. See you in the meeting soon.
</div>
</div>
</div>
</div>
</div>
<div class="m-messenger__seperator"></div>
<div class="m-messenger__form">
<div class="m-messenger__form-controls">
<input type="text" name="" placeholder="Type here..." class="m-messenger__form-input">
</div>
<div class="m-messenger__form-tools">
<a href="" class="m-messenger__form-attachment">
<i class="la la-paperclip"></i>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane m-scrollable" id="m_quick_sidebar_tabs_settings" role="tabpanel">
<div class="m-list-settings">
<div class="m-list-settings__group">
<div class="m-list-settings__heading">
General Settings
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Email Notifications
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" checked="checked" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Site Tracking
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
SMS Alerts
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Backup Storage
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Audit Logs
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" checked="checked" name="">
<span></span>
</label>
</span>
</span>
</div>
</div>
<div class="m-list-settings__group">
<div class="m-list-settings__heading">
System Settings
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
System Logs
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Error Reporting
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Applications Logs
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Backup Servers
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" checked="checked" name="">
<span></span>
</label>
</span>
</span>
</div>
<div class="m-list-settings__item">
<span class="m-list-settings__item-label">
Audit Logs
</span>
<span class="m-list-settings__item-control">
<span class="m-switch m-switch--outline m-switch--icon-check m-switch--brand">
<label>
<input type="checkbox" name="">
<span></span>
</label>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="tab-pane m-scrollable" id="m_quick_sidebar_tabs_logs" role="tabpanel">
<div class="m-list-timeline">
<div class="m-list-timeline__group">
<div class="m-list-timeline__heading">
System Logs
</div>
<div class="m-list-timeline__items">
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
12 new users registered
<span class="m-badge m-badge--warning m-badge--wide">
important
</span>
</a>
<span class="m-list-timeline__time">
Just now
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
System shutdown
</a>
<span class="m-list-timeline__time">
11 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-danger"></span>
<a href="" class="m-list-timeline__text">
New invoice received
</a>
<span class="m-list-timeline__time">
20 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-warning"></span>
<a href="" class="m-list-timeline__text">
Database overloaded 89%
<span class="m-badge m-badge--success m-badge--wide">
resolved
</span>
</a>
<span class="m-list-timeline__time">
1 hr
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
System error
</a>
<span class="m-list-timeline__time">
2 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
Production server down
<span class="m-badge m-badge--danger m-badge--wide">
pending
</span>
</a>
<span class="m-list-timeline__time">
3 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
Production server up
</a>
<span class="m-list-timeline__time">
5 hrs
</span>
</div>
</div>
</div>
<div class="m-list-timeline__group">
<div class="m-list-timeline__heading">
Applications Logs
</div>
<div class="m-list-timeline__items">
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
New order received
<span class="m-badge m-badge--info m-badge--wide">
urgent
</span>
</a>
<span class="m-list-timeline__time">
7 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
12 new users registered
</a>
<span class="m-list-timeline__time">
Just now
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
System shutdown
</a>
<span class="m-list-timeline__time">
11 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-danger"></span>
<a href="" class="m-list-timeline__text">
New invoices received
</a>
<span class="m-list-timeline__time">
20 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-warning"></span>
<a href="" class="m-list-timeline__text">
Database overloaded 89%
</a>
<span class="m-list-timeline__time">
1 hr
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
System error
<span class="m-badge m-badge--info m-badge--wide">
pending
</span>
</a>
<span class="m-list-timeline__time">
2 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
Production server down
</a>
<span class="m-list-timeline__time">
3 hrs
</span>
</div>
</div>
</div>
<div class="m-list-timeline__group">
<div class="m-list-timeline__heading">
Server Logs
</div>
<div class="m-list-timeline__items">
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
Production server up
</a>
<span class="m-list-timeline__time">
5 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
New order received
</a>
<span class="m-list-timeline__time">
7 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
12 new users registered
</a>
<span class="m-list-timeline__time">
Just now
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
System shutdown
</a>
<span class="m-list-timeline__time">
11 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-danger"></span>
<a href="" class="m-list-timeline__text">
New invoice received
</a>
<span class="m-list-timeline__time">
20 mins
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-warning"></span>
<a href="" class="m-list-timeline__text">
Database overloaded 89%
</a>
<span class="m-list-timeline__time">
1 hr
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
System error
</a>
<span class="m-list-timeline__time">
2 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
Production server down
</a>
<span class="m-list-timeline__time">
3 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-success"></span>
<a href="" class="m-list-timeline__text">
Production server up
</a>
<span class="m-list-timeline__time">
5 hrs
</span>
</div>
<div class="m-list-timeline__item">
<span class="m-list-timeline__badge m-list-timeline__badge--state-info"></span>
<a href="" class="m-list-timeline__text">
New order received
</a>
<span class="m-list-timeline__time">
1117 hrs
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end::Quick Sidebar -->
<!-- begin::Scroll Top -->
<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
<i class="la la-arrow-up"></i>
</div>
<!-- end::Scroll Top --> <!-- begin::Quick Nav -->
<ul class="m-nav-sticky" style="margin-top: 30px;">
<!--
<li class="m-nav-sticky__item" data-toggle="m-tooltip" title="Showcase" data-placement="left">
<a href="">
<i class="la la-eye"></i>
</a>
</li>
<li class="m-nav-sticky__item" data-toggle="m-tooltip" title="Pre-sale Chat" data-placement="left">
<a href="" >
<i class="la la-comments-o"></i>
</a>
</li>
-->
<li class="m-nav-sticky__item" data-toggle="m-tooltip" title="Purchase" data-placement="left">
<a href="https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" target="_blank">
<i class="la la-cart-arrow-down"></i>
</a>
</li>
<li class="m-nav-sticky__item" data-toggle="m-tooltip" title="Documentation" data-placement="left">
<a href="http://keenthemes.com/metronic/documentation.html" target="_blank">
<i class="la la-code-fork"></i>
</a>
</li>
<li class="m-nav-sticky__item" data-toggle="m-tooltip" title="Support" data-placement="left">
<a href="http://keenthemes.com/forums/forum/support/metronic5/" target="_blank">
<i class="la la-life-ring"></i>
</a>
</li>
</ul>
<!-- begin::Quick Nav -->
<!--begin::Base Scripts -->
<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
<!--end::Base Scripts -->
<!--begin::Page Resources -->
<script src="../../../assets/demo/default/custom/components/datatables/locked/html-table.js" type="text/javascript"></script>
<!--end::Page Resources -->
</body>
<!-- end::Body -->
</html>