equation-admin-template
Version:
Booststrap 4 admin template made by equation
8,317 lines • 622 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>Tables and Events | Equation - Multipurpose Bootstrap Dashboard Template </title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/css/loader.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
<link href="plugins/dropzone/dropzone.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/charts/chartist/chartist.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="assets/css/modules/modules-table-and-event.css">
<!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
</head>
<body>
<div id="eq-loader">
<div class="eq-loader-div">
<div class="eq-loading dual-loader mx-auto mb-5"></div>
</div>
</div>
<!-- BEGIN NAVBAR -->
<header class="desktop-nav header navbar fixed-top">
<div class="nav-logo mr-sm-5 ml-sm-4">
<a href="javascript:void(0);" class="nav-link sidebarCollapse d-inline-block mr-sm-5" data-placement="bottom">
<i class="flaticon-menu-line-3"></i>
</a>
<a href="index.html" class=""> <img src="assets/img/1.png" class="img-fluid" alt="logo"></a>
</div>
<ul class="navbar-nav flex-row mr-auto">
<li class="nav-item ml-4 d-lg-none d-sm-block d-none">
<form class="form-inline search-full form-inline search animated-search" role="search">
<i class="flaticon-search-1 d-lg-none d-block"></i>
<input type="text" class="form-control search-form-control ml-lg-auto" placeholder="Search...">
</form>
</li>
<li class="nav-item d-lg-block d-none">
<form class="form-inline form-inline search animated-search" role="search">
<i class="flaticon-search-1 d-lg-none d-block"></i>
<input type="text" class="form-control search-form-control" placeholder="Search here...">
</form>
</li>
</ul>
<ul class="navbar-nav flex-row ml-lg-auto">
<li class="nav-item dropdown language-dropdown ml-4 mr-4 pr-3 pl-3 align-self-center d-lg-inline-block d-none">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="flagDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="">EN</span>
</a>
<div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="flagDropdown">
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/fr.svg" class="flag-width" alt=""> FR</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/jp.svg" class="flag-width" alt=""> JP</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ru.svg" class="flag-width" alt=""> RU</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ca.svg" class="flag-width" alt=""> EN</a>
</div>
</li>
<li class="nav-item dropdown message-dropdown ml-lg-4 mr-lg-4 d-sm-block d-none align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="message-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon flaticon-mail-25"></span><span class="badge badge-primary">13</span>
</a>
<div class="dropdown-menu position-absolute p-0 eq-animated eq-fadeInUp" aria-labelledby="message-dropdown">
<div class="">
<a class="dropdown-item">
<div class="">
<div class="media notification-new">
<div class="usr-img align-self-center mr-3">
<img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-user-name mr-3 mb-0">Kara Young</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media notification-new">
<div class="notification-icon align-self-center mr-3">
<i class="flaticon-mailbox"></i>
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-title mr-3 mb-0">1 new email</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Anderson.Daisy@mail.com</p>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="usr-img align-self-center mr-3">
<img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-user-name mr-3 mb-0">Oscar Garner</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown notification-dropdown ml-3 mr-lg-4 align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon flaticon-bell-4"></span><span class="badge badge-success">15</span>
</a>
<div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="notification-dropdown">
<div class="notification-scroll">
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Alan Green</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Irene Collins</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Sonia Shaw</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Xavier</span>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown user-profile-dropdown pl-4 pr-lg-0 pr-2 ml-lg-2 mr-lg-4 align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle user">
<div class="user-profile d-lg-block d-none">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<i class="flaticon-user-7 d-lg-none d-block"></i>
</a>
</li>
</ul>
</header>
<!-- END NAVBAR -->
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
<div class="overlay"></div>
<div class="ps-overlay"></div>
<div class="search-overlay"></div>
<!-- BEGIN MODERN -->
<div class="modernSidebar-nav header navbar">
<div class="">
<nav id="modernSidebar">
<ul class="menu-categories pl-0 m-0" id="topAccordion">
<li class="menu">
<a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<i class="flaticon-computer-6"></i>
<span>Dashboard</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="dashboard" data-parent="#topAccordion">
<ul class="submenu-scroll">
<li>
<ul class="list-unstyled sub-submenu" id="dashboards">
<li>
<a href="index.html"> <div><i class="flaticon-computer-4"></i> Default</div> </a>
</li>
<li>
<a href="ecommerce_dashboard.html"> <div><i class="flaticon-cart-2"></i> Ecommerce</div> </a>
</li>
<li>
<a href="accounting_dashboard.html"> <div><i class="flaticon-chart-line"></i> Accounting</div> </a>
</li>
<li>
<a href="analytics_dashboard.html"> <div><i class="flaticon-computer-2"></i> Analytics</div> </a>
</li>
<li>
<a href="car_dashboard.html"> <div><i class="flaticon-car"></i> Car</div> </a>
</li>
<li>
<a href="classic_dashboard.html"> <div><i class="flaticon-computer-8"></i> Classic</div> </a>
</li>
<li>
<a href="stock_market_dashboard.html"> <div><i class="flaticon-up-chart"></i> Stock Market</div> </a>
</li>
<li>
<a href="cryptocurrency_dashboard.html"> <div><i class="flaticon-bitcoin-circle"></i> Cryptocurrency</div> </a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="menu">
<a href="#uiAndComponents" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-3d-cube"></i>
<span>Components</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="uiAndComponents" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#ui-features" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">UI KIT</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ui-features">
<li>
<a href="ui_helper_classes.html"> Helper Classes </a>
</li>
<li>
<a href="ui_color_library.html"> Color Library </a>
</li>
<li>
<a href="ui_grid.html"> Grid System </a>
</li>
<li>
<a href="ui_typography.html"> Typography </a>
</li>
<li>
<a href="ui_shadows.html"> Shadow </a>
</li>
<li>
<a href="ui_miscellaneous.html"> Miscellaneous </a>
</li>
<li>
<a href="ui_pagination.html">Pagination</a>
</li>
<li>
<a href="ui_alert.html"> Alerts </a>
</li>
<li>
<a href="ui_tooltips_and_popovers.html"> Tooltips And Popovers </a>
</li>
<li>
<a href="ui_loader.html"> Loaders </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-buttons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Buttons <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-buttons" data-parent="#ui-features">
<li>
<a href="ui_buttons.html"> Bootstrap </a>
</li>
<li>
<a href="ui_creative.html"> Creative </a>
</li>
<li>
<a href="ui_switches.html"> Switches </a>
</li>
<li>
<a href="ui_social_button.html"> Social </a>
</li>
</ul>
</li>
<li>
<a href="ui_sweetalert.html"> Sweet Alerts </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-font-icons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Font Icons <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-font-icons" data-parent="#ui-features">
<li>
<a href="ui_flaticon_icon.html"> Flaticon </a>
</li>
<li>
<a href="ui_linea_icon.html"> Linea </a>
</li>
<li>
<a href="ui_themify_icon.html"> Themify </a>
</li>
<li>
<a href="ui_pixeden_icon.html"> Pixeden </a>
</li>
<li>
<a href="ui_fontawesome_icon.html"> Fontawesome </a>
</li>
<li>
<a href="ui_metro_icon.html"> Metro </a>
</li>
<li>
<a href="ui_weather_icon.html"> Weather </a>
</li>
</ul>
</li>
<li>
<a href="ui_tabs.html"> Tabs </a>
</li>
<li>
<a href="ui_accordion.html"> Accordions </a>
</li>
<li>
<a href="ui_modal.html"> Modals </a>
</li>
<li>
<a href="ui_sliders.html"> Range Sliders </a>
</li>
<li>
<a href="ui_timeline.html"> Timeline </a>
</li>
<li>
<a href="ui_tree.html"> Tree View </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-progress" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Progress Bar <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-progress" data-parent="#ui-features">
<li>
<a href="ui_bootstrap_progress_bar.html"> Bootstrap </a>
</li>
<li>
<a href="ui_material_progress_bar.html"> Custom </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-notification" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Notifications <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-notification" data-parent="#ui-features">
<li>
<a href="ui_toastr.html"> Toastr </a>
</li>
<li>
<a href="ui_notification.html"> Creative </a>
</li>
<li>
<a href="ui_snackbar.html"> Snackbar </a>
</li>
</ul>
</li>
<li>
<a href="ui_session_timeout.html"> Session Timeout </a>
</li>
<li>
<a href="ui_media_object.html"> Media Object </a>
</li>
<li>
<a href="ui_list_group.html"> List Group </a>
</li>
<li>
<a href="ui_nestable_list.html"> Nested List </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#components" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">COMPONENTS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="components">
<li>
<a href="component_portlet.html"> Portlets </a>
</li>
<li>
<a href="component_keypad.html"> Keypad </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-carousel" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Carousel <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-carousel" data-parent="#components">
<li>
<a href="component_bootstrap_carousel.html">Bootstrap</a>
</li>
<li>
<a href="component_carousel.html">Metro</a>
</li>
<li>
<a href="component_sliders.html">Swiper</a>
</li>
</ul>
</li>
<li>
<a href="component_rating.html"> Rating </a>
</li>
<li>
<a href="component_blockui.html"> Block UI </a>
</li>
<li>
<a href="component_popup.html"> Popup </a>
</li>
<li>
<a href="component_scroll_bars_basic.html"> Scrollbar </a>
</li>
<li>
<a href="component_todo_list.html"> Todo List </a>
</li>
<li>
<a href="component_scrollspy.html"> Scrollspy </a>
</li>
<li>
<a href="component_countdown.html"> Countdown </a>
</li>
<li>
<a href="component_counter.html"> Counter </a>
</li>
<li>
<a href="component_datetime_picker.html"> Date & Time Picker </a>
</li>
<li>
<a href="component_lightbox.html"> LightBox </a>
</li>
<li>
<a href="component_color_picker.html"> Color Picker </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-media" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Media <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-media" data-parent="#components">
<li>
<a href="component_video_player.html"> Video Player </a>
</li>
<li>
<a href="component_audio_player.html"> Audio Player </a>
</li>
</ul>
</li>
<li>
<a href="component_clipboard.html"> Clipboard </a>
</li>
<li>
<a href="component_typeahead.html"> Typeahead </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-search" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Search <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-search" data-parent="#components">
<li>
<a href="component_search_multiple.html"> Multiple </a>
</li>
<li>
<a href="component_search_web.html"> Web </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-animation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Animations <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-animation" data-parent="#components">
<li>
<a href="component_animation_buttons.html"> Buttons </a>
</li>
<li>
<a href="component_animation_css.html"> CSS </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-img-crop" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Image Cropping <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-img-crop" data-parent="#components">
<li>
<a href="component_image_cropping_basic.html"> Basic </a>
</li>
<li>
<a href="component_image_cropping_advanced.html"> Advanced </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#element" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ELEMENTS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="element">
<li>
<a href="element_steps.html"> Steps </a>
</li>
<li>
<a href="element_ribbon.html"> Ribbons </a>
</li>
<li>
<a href="element_testimonial.html"> Testimonials </a>
</li>
<li>
<a href="element_team.html"> Team </a>
</li>
<li>
<a href="element_contacts.html"> Contacts </a>
</li>
<li>
<a href="element_blog.html"> Blog Elements </a>
</li>
<li>
<a href="element_pricing_table.html"> Pricing Tables </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#tables-forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-table"></i>
<span>Tables & Forms</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="tables-forms" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#tables" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">TABLES</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="tables">
<li>
<a href="table_basic.html"> Basic </a>
</li>
<li>
<a href="table_tablesaw.html"> Tablesaw</a>
</li>
<li>
<a href="table_sticky_table_header.html"> Sticky Headers</a>
</li>
<li class="sub-sub-submenu-list">
<a href="#tables-editable" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Editable <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-editable" data-parent="#tables">
<li>
<a href="table_jq_spreadsheet.html"> Spreadsheet </a>
</li>
<li>
<a href="table_jquery_tabledit.html"> TableEdit </a>
</li>
<li>
<a href="table_editablegrid.html"> Editable Grid </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#tables-data-tables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> DataTables <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-data-tables" data-parent="#tables">
<li>
<a href="table_dt_zero_configuration.html"> Basic </a>
</li>
<li>
<a href="table_dt_ordering_sorting.html"> Order Sorting </a>
</li>
<li>
<a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
</li>
<li>
<a href="table_dt_multiple_tables.html"> Multiple Tables</a>
</li>
<li>
<a href="table_dt_alternative_pagination.html"> Alternative Pagination</a>
</li>
<li>
<a href="table_dt_miscellaneous.html"> Miscellaneous </a>
</li>
<li>
<a href="table_dt_custom.html"> Custom </a>
</li>
<li>
<a href="table_dt_scrollable.html"> Scrollable </a>
</li>
<li>
<a href="table_dt_range_search.html"> Range Search </a>
</li>
<li>
<a href="table_dt_html5.html"> HTML5 Export </a>
</li>
<li>
<a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#forms" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">FORMS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="forms" style="">
<li class="sub-sub-submenu-list">
<a href="#forms-bootstrap" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Bootstrap <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-bootstrap" data-parent="#forms">
<li>
<a href="form_bootstrap_basic.html"> Basic </a>
</li>
<li>
<a href="form_bootstrap_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-input-group" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Input Group <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-input-group" data-parent="#forms">
<li>
<a href="form_input_group_basic.html"> Basic </a>
</li>
<li>
<a href="form_input_group_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li>
<a href="form_bootstrap_material.html"> Material </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-layout" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Layouts <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-layout" data-parent="#forms">
<li>
<a href="form_layouts.html"> Basic </a>
</li>
<li>
<a href="form_layouts_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-validation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Validation <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-validation" data-parent="#forms">
<li>
<a href="form_validation.html"> Bootstrap </a>
</li>
<li>
<a href="form_jqvalidation.html"> jQuery </a>
</li>
<li>
<a href="form_validation_material.html"> Custom </a>
</li>
</ul>
</li>
<li>
<a href="form_input_mask.html"> Input Mask </a>
</li>
<li>
<a href="form_bootstrap_select.html"> Bootstrap Select </a>
</li>
<li>
<a href="form_select2.html"> Select2 </a>
</li>
<li>
<a href="form_bootstrap_touchspin.html"> TouchSpin </a>
</li>
<li>
<a href="form_multiselect.html"> Multi Select </a>
</li>
<li>
<a href="form_maxlength.html"> Maxlength </a>
</li>
<li>
<a href="form_repeater.html"> Repeater </a>
</li>
<li>
<a href="form_checkbox_radio.html"> Checkbox and Radio </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-wizard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Wizards <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-wizard" data-parent="#forms">
<li>
<a href="form_bs_wizard.html"> Bootstrap </a>
</li>
<li>
<a href="form_wizard.html"> jQuery Steps </a>
</li>
</ul>
</li>
<li>
<a href="form_fileupload.html"> File Upload </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-copy"></i>
<span>Pages</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="pages" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#ecommerce" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ECOMMERCE</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ecommerce">
<li>
<a href="ecommerce_orders.html"> Orders </a>
</li>
<li>
<a href="ecommerce_product.html"> Products </a>
</li>
<li>
<a href="ecommerce_product_catalog.html"> Product Catalog </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#product-details" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" data-parent="#ecommerce"> Product Details <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="product-details">
<li>
<a href="ecommerce_product_details_1.html"> Product Details 1 </a>
</li>
<li>
<a href="ecommerce_product_details_2.html"> Product Details 2 </a>
</li>
</ul>
</li>
<li>
<a href="ecommerce_addedit_product.html"> Add/Edit Products </a>
</li>
<li>
<a href="ecommerce_addedit_categories.html"> Add/Edit Categories </a>
</li>
<li>
<a href="ecommerce_view_cart.html"> View Cart </a>
</li>
<li>
<a href="ecommerce_view_payments.html"> View Payments </a>
</li>
<li>
<a href="ecommerce_view_customers.html"> View Customers </a>
</li>
<li>
<a href="ecommerce_checkout.html"> Checkout </a>
</li>
<li>
<a href="ecommerce_invoices.html"> Invoice </a>
</li>
<li>
<a href="ecommerce_shipments.html"> Shipments </a>
</li>
<li>
<a href="ecommerce_products_cart.html"> Products in Cart </a>
</li>
<li>
<a href="ecommerce_coupons.html"> Coupons </a>
</li>
<li>
<a href="ecommerce_low_stock.html"> Low Stock </a>
</li>
<li>
<a href="ecommerce_best_sellers.html"> Best Sellers </a>
</li>
<li>
<a href="ecommerce_refunds.html"> Refunds </a>
</li>
<li>
<a href="ecommerce_search_terms.html"> Search Terms </a>
</li>
<li>
<a href="ecommerce_newsletters.html"> Newsletters </a>
</li>
<li>
<a href="ecommerce_wizards.html"> Payment Wizard </a>
</li>
<li>
<a href="ecommerce_reviews.html"> Reviews </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#page" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">PAGES</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="page">
<li>
<a href="pages_blank_page.html"> Blank Page</a>
</li>
<li>
<a href="pages_helpdesk.html"> Helpdesk </a>
</li>
<li>
<a href="pages_contact_us.html"> Contact Form </a>
</li>
<li>
<a href="pages_faq.html"> FAQ </a>
</li>
<li>
<a href="pages_blog.html"> Blog </a>
</li>
<li>
<a href="pages_privacy.html"> Privacy Policy </a>
</li>
<li>
<a href="pages_cookie_consent.html"> Cookie Consent </a>
</li>
<li>
<a href="pages_landing_page.html" target="_blank"> Landing Page </a>
</li>
<li>
<a href="pages_coming_soon.html"> Coming Soon </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="pages-error" data-parent="#pages">
<li>
<a href="pages_error404.html"> 404 1 </a>
</li>
<li>
<a href="pages_error404-2.html"> 404 2 </a>
</li>
<li>
<a href="pages_error500.html"> 500 1 </a>
</li>
<li>
<a href="pages_error500-2.html"> 500 2 </a>
</li>
<li>
<a href="pages_error503.html"> 503 1 </a>
</li>
<li>
<a href="pages_error503-2.html"> 503 2 </a>
</li>
<li>
<a href="pages_maintenence.html"> Maintanence </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#users" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">USERS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="users">
<li>
<a href="user_profile.html"> Profile </a>
</li>
<li>
<a href="user_account_setting.html"> Account Settings </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-login" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Login <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-login" data-parent="#users">
<li>
<a href="user_login_1.html"> Login 1 </a>
</li>
<li>
<a href="user_login_2.html"> Login 2 </a>
</li>
<li>
<a href="user_login_3.html"> Login 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-register" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Register <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-register" data-parent="#users">
<li>
<a href="user_register_1.html"> Register 1 </a>
</li>
<li>
<a href="user_register_2.html"> Register 2 </a>
</li>
<li>
<a href="user_register_3.html"> Register 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-passRecovery" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Password Recovery <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-passRecovery" data-parent="#users">
<li>
<a href="user_pass_recovery_1.html"> Password Recovery 1 </a>
</li>
<li>
<a href="user_pass_recovery_2.html"> Password Recovery 2 </a>
</li>
<li>
<a href="user_pass_recovery_3.html"> Password Recovery 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-lockscreen" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Lockscreen <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-lockscreen" data-parent="#users">
<li>
<a href="user_lockscreen_1.html"> Lockscreen 1 </a>
</li>
<li>
<a href="user_lockscreen_2.html"> Lockscreen 2 </a>
</li>
<li>
<a href="user_lockscreen_3.html"> Lockscreen 3 </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-mail-19"></i>
<span>Apps</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="app" data-parent="#topAccordion">
<ul class="submenu-scroll">
<li>
<ul class="list-unstyled mt-4">
<li>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="apps">
<li>
<a href="apps_chat.html"> Chat </a>
</li>
<li>
<a href="apps_mailbox.html"> Mailbox </a>
</li>
<li>
<a href="apps_mailbox_with_chat.html"> Mailbox With Chat </a>
</li>
<li>
<a href="apps_newsletter.html"> Newsletter </a>
</li>
<li>
<a href="apps_scheduler.html"> Scheduler </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#apps-calendars" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Calendar <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="apps-calendars" data-parent="#apps-calendars">
<li>
<a href="apps_basic_calendar.html"> Basic </a>
</li>
<li>
<a href="apps_full_calendar.html"> Full Calendar </a>
</li>
<li>
<a href="apps_drag_n_drop_calendar.html"> Drag n Drop </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="menu">
<a href="#more" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<div class="">
<i class="flaticon-plus"></i>
<span class="">More</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="more" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#modules" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MODULES</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="modules">
<li>
<a href="modules_widgets.html"> Widgets </a>
</li>
<li class="active">
<a href="modules_table_and_event.html"> Tables & Events </a>
</li>
<li>
<a href="modules_charts_and_maps.html"> Charts & Maps </a>
</li>
<li>
<a href="modules_weather_and_calendar.html"> Weather & Calendar </a>
</li>
<li>
<a href="modules_cards.html"> Cards </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#dragndrop" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">DRAG AND DROP</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="dragndrop">
<li>
<a href="dragndrop_gridstack.html"> Grid Stack</a>
</li>
<li>
<a href="dragndrop_dragula.html"> Dragula</a>
</li>
<li class="sub-sub-submenu-list">
<a href="#dragndrop-jqueryui" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jQuery UI <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="dragndrop-jqueryui" data-parent="#dragndrop">
<li>
<a href="dragndrop_ui_product_cart.html"> Shopping Cart </a>
</li>
<li>
<a href="dragndrop_scrumboard.html"> Scrum Task Board</a>
</li>
<li>
<a href="dragndrop_scroll_bars.html"> Scrollbar</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#charts" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">CHARTS</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="charts">
<li class="sub-sub-submenu-list">
<a href="#chart-amcharts" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> amCharts <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-amcharts" data-parent="#charts">
<li>
<a href="am_column_and_barchart.html"> Column & Bar </a>
</li>
<li>
<a href="am_line_and_areachart.html"> Line & Area </a>
</li>
<li>
<a href="am_pie_and_donutchart.html"> Pie & Donut </a>
</li>
<li>
<a href="am_gauge_and_otherchart.html"> Gauges & Other </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#chart-c3chart" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> C3 <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-c3chart" data-parent="#charts">
<li>
<a href="charts_c3_chart.html"> Simple</a>
</li>
<li>
<a href="charts_c3_api.html"> Api </a>
</li>
</ul>
</li>
<li>
<a href="charts_cssplot.html"> CSS Plot </a>
</li>
<li>
<a href="charts_morris.html"> Morris </a>
</li>
<li>
<a href="charts_jQuery_sparklines.html"> jQuery Sparklines </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#chart-chartist" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Chartist <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-chartist" data-parent="#charts">
<li>
<a href="charts_chartist_bar.html"> Bar </a>
</li>
<li>
<a href="charts_chartist_line.html"> Line & Area </a>
</li>
<li>
<a href="charts_chartist_pie.html"> Pie </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#maps" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MAPS</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="maps">
<li class="sub-sub-submenu-list">
<a href="#map-jqMapael" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jquery Mapael <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-jqMapael" data-parent="#maps">
<li>
<a href="map_jquerymapael_basic.html"> Basic </a>
</li>
<li>
<a href="map_jquerymapael_advanced.html"> Advanced </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#map-vMaps" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Vector Maps <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-vMaps" data-parent="#maps">
<li>
<a href="map_amvector.html"> amVector</a>
</li>
<li>
<a href="map_jvector.html"> jVector</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
<!-- END MODERN -->
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="container">
<div class="page-header">
<div class="page-title">
<h3>Tables and Events</h3>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header br-4">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>New Products</h4>
</div>
</div>
</div>
<div class="widget-content-area br-4">
<div class="table-responsive new-products">
<table class="table">
<thead>
<tr>
<th class="form-check-column text-center">
<label for="checkAll" class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" id="checkAll" class="new-control-input">
<span class="new-control-indicator mt-2" ></span><span class="invisible">s</span>
</label>
</th>
<th>Product</th>
<th>Type</th>
<th>SKU</th>
<th class="text-center">Quantity</th>
<th>Image</th>
<th class="text-center">Price</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Camera</td>
<td><span class="badge badge-info badge-pill">Simple</span></td>
<td>#0001</td>
<td class="text-center">1</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #3862f5;">
</td>
<td class="text-center">$848.95</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Mobile</td>
<td><span class="badge badge-info badge-pill">Simple</span></td>
<td>#0002</td>
<td class="text-center">1</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #07e0c4;">
</td>
<td class="text-center">$529.95</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Windows 10</td>
<td><span class="badge badge-success badge-pill">Digital</span></td>
<td>#0003</td>
<td class="text-center">3</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #00b1f4;">
</td>
<td class="text-center">$1584.00</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Watch</td>
<td><span class="badge badge-info badge-pill">Simple</span></td>
<td>#0004</td>
<td class="text-center">5</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #f8538d;">
</td>
<td class="text-center">$595.99</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Drone</td>
<td><span class="badge badge-info badge-pill">Simple</span></td>
<td>#0005</td>
<td class="text-center">1</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #ffbb44;">
</td>
<td class="text-center">$58.00</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input chkbox">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Sunglasses</td>
<td><span class="badge badge-secondary badge-pill">Bundled</span></td>
<td>#0006</td>
<td class="text-center">6</td>
<td>
<img src="assets/img/90x90.jpg" class="img-fluid" alt="img-1" style="border-color: #25d5e4;">
</td>
<td class="text-center">$123.00</td>
<td class="text-center">
<div class="toolbar">
<div class="toolbar-toggle">...</div>
<ul class="toolbar-dropdown animated fadeInUp table-controls list-inline">
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="View"><i class="flaticon-view-3"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Edit"><i class="flaticon-edit-5"></i></a>
</li>
<li class="list-inline-item"><a href="javascript:void(0);" class="bs-tooltip" data-original-title="Remove"><i class="flaticon-delete-6"></i></a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination-section">
<ul class="pagination pagination-style-1 pagination-rounded justify-content-end mt-3 mb-3">
<li><a href="javascript:void(0);">«</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">4</a></li>
<li><a href="javascript:void(0);">5</a></li>
<li><a href="javascript:void(0);">»</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content-area raised-tickets p-0 br-4 h-100">
<div class=" table-header">
<div class="row">
<div class="col-6 pr-0">
<p class="mb-0">Tickets</p>
</div>
<div class="col-6 pl-0 text-right">
<p class="mb-0">Status</p>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Shaun Park</h6>
<p class="meta-info">
<i class="flaticon-stopwatch-1 mr-1"></i>
<span class="meta-date">9 Jan 2019 | Tue - </span>
<span class="meta-time">9:00 am</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-danger-2 mb-2 t-inprogress bs-tooltip" data-placement="top" title="" data-original-title="Pending"></i>
<i class="flaticon-checked-1 mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Nia Hillyer</h6>
<p class="meta-info">
<i class="flaticon-stopwatch-1 mr-1"></i>
<span class="meta-date">5 Jan 2019 | Mon - </span>
<span class="meta-time">2:00 pm</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-danger-2 mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Pending"></i>
<i class="flaticon-checked-1 mb-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Mary McDonald</h6>
<p class="meta-info">
<i class="flaticon-stopwatch-1 mr-1"></i>
<span class="meta-date">3 Jan 2019 | Mon - </span>
<span class="meta-time">10:00 am</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-danger-2 mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Pending"></i>
<i class="flaticon-checked-1 mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 t-not-solved bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Andy King</h6>
<p class="meta-info">
<i class="flaticon-stopwatch-1 mr-1"></i>
<span class="meta-date">29 Dec 2018 | Fri - </span>
<span class="meta-time">03:00 pm</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-danger-2 mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Pending"></i>
<i class="flaticon-checked-1 mb-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content-area task-container br-4 p-0 h-100">
<div class="task-list">
<div class="task-header">
<div class="row">
<div class="col-md-5 col-sm-5 mb-4 mb-sm-0">
<h6 class="mt-3 mb-0">Today's Task</h6>
</div>
<div class="col-md-7 col-sm-7 text-sm-right">
<button class="btn btn-gradient-warning btn-rounded">Create Task</button>
</div>
</div>
</div>
<div class="task-body">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="task-item">
<h6 class="task-title mb-3">Metting Scheduled with</h6>
<ul class="list-inline">
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
</ul>
</div>
</td>
<td class="action text-right">
<i class="flaticon-edit-fill bs-tooltip" data-placement="top" title="" data-original-title="Edit"></i>
<i class="flaticon-delete-can-fill-2 ml-2 bs-tooltip" data-placement="top" title="" data-original-title="Delete"></i>
<br>
<p class="meta-info">
<span class="meta-time">03:20 PM Wed,</span>
<span class="meta-date">16 Jan 2019</span>
</p>
</td>
</tr>
<tr>
<td>
<div class="task-item">
<h6 class="task-title mb-3">Give purchase report to</h6>
<ul class="list-inline">
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-1" alt="admin-profile">
</li>
<li class="list-inline-item">
<div class="txt-profile txt-profile-success mb-1">G</div>
</li>
</ul>
</div>
</td>
<td class="action text-right">
<i class="flaticon-edit-fill bs-tooltip" data-placement="top" title="" data-original-title="Edit"></i>
<i class="flaticon-delete-can-fill-2 ml-2 bs-tooltip" data-placement="top" title="" data-original-title="Delete"></i>
<br>
<p class="meta-info">
<span class="meta-time">11:00 AM Wed,</span>
<span class="meta-date">16 Jan 2019</span>
</p>
</td>
</tr>
<tr>
<td>
<div class="task-item">
<h6 class="task-title mb-3">Receive Shipment</h6>
<ul class="list-inline">
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
<li class="list-inline-item">
<img src="assets/img/90x90.jpg" class="rounded-circle mb-2" alt="admin-profile">
</li>
</ul>
</div>
</td>
<td class="action text-right">
<i class="flaticon-edit-fill bs-tooltip" data-placement="top" title="" data-original-title="Edit"></i>
<i class="flaticon-delete-can-fill-2 ml-2 bs-tooltip" data-placement="top" title="" data-original-title="Delete"></i>
<br>
<p class="meta-info">
<span class="meta-time">09:00 AM Wed,</span>
<span class="meta-date">16 Jan 2019</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center action-button">
<button class="btn btn-light-success mb-4 mt-3 box-shadow-none">View All Tasks</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="widget-content-area msg-messages p-0 br-4">
<div class="msg-container">
<div class="msg-header">
<div class="media">
<i class="flaticon-mail-fill icon mr-4"></i>
<div class="media-body">
<h6 class="">Message</h6>
<p class="mb-0">3 Unread Message</p>
</div>
<div class="float-right">
<i class="flaticon-refresh-1 js-refresh mr-1"></i>
<div class="dropdown custom-dropdown d-inline-block">
<a class="dropdown-toggle pl-0" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="flaticon-dots"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="javascript:void(0);"><i class=""></i> Account</a>
<a class="dropdown-item" href="javascript:void(0);">Profile</a>
<a class="dropdown-item" href="javascript:void(0);">Settings</a>
</div>
</div>
</div>
</div>
</div>
<div class="msg-body reload-widget-area">
<div class="mCustomScrollbar message-scroll" data-mcs-theme="minimal-dark">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Andy King</h6>
<p class="message">Hey, where have you been?</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">5 min</p></td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Shaun Park</h6>
<p class="message">What up man? Good Morning</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">7 min</p></td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Nia Hillyer</h6>
<p class="message">Hey, why are you not eating anything?</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">11 min</p></td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Mary McDonald</h6>
<p class="message">I never said that for sure</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">20 min</p></td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Lisa Doe</h6>
<p class="message">That's not what I heard from Sammy</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">25 min</p></td>
</tr>
<tr>
<td>
<div class="media">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4" alt="admin-profile">
<div class="media-body">
<h6 class="usr-name">Alma Clarke</h6>
<p class="message">Good Morning Friends</p>
</div>
</div>
</td>
<td class="text-right"><p class="meta-time">33 min</p></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-center show-all-msg p-4">
<a href="#">All messages</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="statbox widget box box-shadow latest-invoice br-4">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Latest Invoice</h4>
</div>
</div>
</div>
<div class="widget-content-area">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="form-check-column text-center">
<label for="invoiceAll" class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" id="invoiceAll" class="new-control-input">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</th>
<th>Product</th>
<th>Invoice no.</th>
<th>Date</th>
<th class="text-center">Amount</th>
<th class="text-center">Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Camera</td>
<td>#0001</td>
<td>16 Jan</td>
<td class="align-center">$15,202</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-secondary">In Progress</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Iphone</td>
<td>#0002</td>
<td>16 Jan</td>
<td class="align-center">$650</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-success">Approved</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Headphone</td>
<td>#0003</td>
<td>16 Jan</td>
<td class="align-center">$25</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-warning">Pending</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Speakers</td>
<td>#0004</td>
<td>16 Jan</td>
<td class="align-center">$100</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-secondary">In Progress</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Watch</td>
<td>#0005</td>
<td>16 Jan</td>
<td class="align-center">$85</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-success">Approved</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input invoicechk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Sunglasses</td>
<td>#0006</td>
<td>16 Jan</td>
<td class="align-center">$19</td>
<td class="text-center">
<span class="badge badge-pills outline-badge-danger">Cancelled</span>
</td>
<td>
<i class="flaticon-view-1 bs-tooltip" data-placement="top" data-original-title="View"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-12 layout-spacing">
<div class="widget-content widget-content-area product-sales-list-content br-4 p-0">
<div class="product-sales-list">
<div class="product-sales-header">
<div class="row">
<div class="col-md-5 col-sm-5 col-6 mb-4 mb-sm-0">
<h5 class="mb-0">Product Sales</h5>
</div>
<div class="col-md-7 col-sm-7 col-6 text-sm-right">
<ul class="nav justify-content-end product-sales nav-pills" id="productSales" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="product-sales-monthly-tab" data-toggle="pill" href="#product-sales-monthly" role="tab" aria-controls="product-sales-monthly" aria-selected="true">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="product-sales-yearly-tab" data-toggle="pill" href="#product-sales-yearly" role="tab" aria-controls="product-sales-yearly" aria-selected="false">Yearly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="product-sales-body">
<div class="tab-content" id="productSalesContent">
<div class="tab-pane fade show active" id="product-sales-monthly" role="tabpanel" aria-labelledby="product-sales-monthly-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-1 data-marker"></div>
</div>
<div class="pro-name pro-name-1">Apple</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps1"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="14%">4976.5 $</p>
<p class="montly-inc-1">+265</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-2 data-marker"></div>
</div>
<div class="pro-name pro-name-2">HP-Laptop</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps2"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="9%">3081.2 $</p>
<p class="montly-inc-2">+127</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-3 data-marker"></div>
</div>
<div class="pro-name pro-name-3">Samsung Monitor</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps3"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="2%">7376.5 $</p>
<p class="montly-inc-3">+80</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="product-sales-yearly" role="tabpanel" aria-labelledby="product-sales-yearly-tab">
<div class="table-responsive">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-1 data-marker"></div>
</div>
<div class="pro-name pro-name-1">Apple</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps4"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="11%">61,712 $</p>
<p class="montly-inc-1">+2080</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-2 data-marker"></div>
</div>
<div class="pro-name pro-name-2">HP-Laptop</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps5"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="11%">37,070 $</p>
<p class="montly-inc-2">+1615</p>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="align-self-center">
<div class="d-m-pro-name-3 data-marker"></div>
</div>
<div class="pro-name pro-name-3">Samsung Monitor</div>
</div>
</td>
<td class="action text-right">
<div class="d-flex justify-content-between">
<div class="pchart">
<span id="ps6"><canvas width="100" height="30" style="display: inline-block; width: 100px; height: 30px; vertical-align: top;"></canvas></span>
</div>
<div class="pcontent">
<p class="p-l-tooltip montly-price mb-0" data-placement="top" title="" data-original-title="3.5%">91,102 $</p>
<p class="montly-inc-3">+1556</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-12 layout-spacing">
<div class="widget-content widget-content-area vendor-expenses-list-content br-4 p-0">
<div class="vendor-expenses-list">
<div class="vendor-expenses-header">
<div class="row">
<div class="col-md-5 col-sm-5 col-6">
<h5 class="mb-0">Vendor Expenses</h5>
</div>
<div class="col-md-7 col-sm-7 col-6 text-sm-right">
<ul class="nav justify-content-end vendor-expenses nav-pills" id="vendorExpenses" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="vendor-expenses-monthly-tab" data-toggle="pill" href="#vendor-expenses-monthly" role="tab" aria-controls="vendor-expenses-monthly" aria-selected="true">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="vendor-expenses-yearly-tab" data-toggle="pill" href="#vendor-expenses-yearly" role="tab" aria-controls="vendor-expenses-yearly" aria-selected="false">Yearly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vendor-expenses-body">
<div class="tab-content" id="vendorExpensesContent">
<div class="tab-pane fade show active" id="vendor-expenses-monthly" role="tabpanel" aria-labelledby="vendor-expenses-monthly-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="pro-name mb-2">Apple</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-primary" role="progressbar" style="width: 45.3%" aria-valuenow="45.3" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>25.3%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 2,275</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">HP-Laptop</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-primary" role="progressbar" style="width: 24.6%" aria-valuenow="24.6" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>14.6%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 937</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Samsung Monitor</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-primary" role="progressbar" style="width: 30.85%" aria-valuenow="30.85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>19.85%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 2,384</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="vendor-expenses-yearly" role="tabpanel" aria-labelledby="vendor-expenses-yearly-tab">
<table class="table">
<thead>
<tr>
<th>Product</th>
<th class="text-right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="pro-name mb-2">Apple</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 35.3%" aria-valuenow="24.3" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>24.8%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 27,900</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">HP-Laptop</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 13.4%" aria-valuenow="13.4" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>13.4%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 11,277</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Samsung Monitor</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-75">
<div class="progress-bar bg-info" role="progressbar" style="width: 18.7%" aria-valuenow="18.7" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span>18.7%</span>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0">$ 28,508</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0 h-100">
<div class="latest-activities">
<div class="latest-activities-header">
<div class="row">
<div class="col-lg-12 col-12">
<h5 class="">Latest Activity</h5>
</div>
</div>
</div>
<div class="latest-activities-body">
<div class="l-a-stats">
<span class="badge badge-primary badge-pill mr-3">Today</span>
<span class="latest-activities-stats">Remaining 4 of 12</span>
</div>
<div class="l-a-list">
<div class="l-a-scroll">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex mb-3">
<div class=" align-self-center">
<div class="d-m-latest-activities data-marker"></div>
</div>
<p class="latest-activities-txt mb-0">New user registered.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
<tr>
<td>
<div class="d-flex mb-3">
<div class=" align-self-center">
<div class="d-m-latest-activities data-marker"></div>
</div>
<p class="latest-activities-txt mb-0">
Metting Scheduled at 4:50pm.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
<tr>
<td>
<div class="d-flex mb-3">
<div class=" align-self-center">
<div class="d-m-latest-activities data-marker"></div>
</div>
<p class="latest-activities-txt mb-0">James Tylor added new post.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
<tr>
<td>
<div class="d-flex mb-3">
<div class="align-self-center">
<div class="d-m-latest-activities data-marker"></div>
</div>
<p class="latest-activities-txt mb-0">You have one new friend request.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
<tr>
<td>
<div class="d-flex mb-3">
<div class=" align-self-center">
<div class="d-m-latest-activities data-marker align-self-center"></div>
</div>
<p class="latest-activities-txt mb-0">Oscar like your post.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
<tr>
<td>
<div class="d-flex mb-3">
<div class=" align-self-center">
<div class="d-m-latest-activities data-marker"></div>
</div>
<p class="latest-activities-txt mb-0">20 files Download.</p>
</div>
<div class="usr-img">
<ul class="list-inline badge-collapsed-img mb-0 mb-0">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg">
</li>
</ul>
<p class="more-usr mb-3">+8</p>
</div>
</td>
<td class="text-right"><i class="flaticon-close-fill remove-latest-activities mt-2"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="l-a-load-more text-center pt-2 pb-3">
<button class="btn btn-primary btn-rounded">More +</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4 h-100">
<div class="top-rented-cars-container">
<div class="top-rented-cars-header mb-3">
<h6 class="mb-0">Top Rented Cars</h6>
</div>
<div class="top-rented-cars-body">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="media">
<span class="mr-4 t-r-cars-short-name bg-light-primary">FM</span>
<div class="media-body">
<h6 class="mb-0">Ford Mustang</h6>
<div class="t-r-rating">
<span>4.5</span>
<div class="t-r-rating-star text-right d-inline ml-1">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="t-r-usr">
<i class="flaticon-user-7 mr-2"></i>
<span>15000 Users</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-4 t-r-cars-short-name bg-light-success">BS</span>
<div class="media-body">
<h6 class="mb-0">BMW 3 Series</h6>
<div class="t-r-rating">
<span>4.2</span>
<div class="t-r-rating-star text-right d-inline ml-1">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="t-r-usr">
<i class="flaticon-user-7 mr-2"></i>
<span>11575 Users</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-4 t-r-cars-short-name bg-light-warning">MB</span>
<div class="media-body">
<h6 class="mb-0">Mercedes Benz e-class</h6>
<div class="t-r-rating">
<span>3.8</span>
<div class="t-r-rating-star text-right d-inline ml-1">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="t-r-usr">
<i class="flaticon-user-7 mr-2"></i>
<span>9678 Users</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-4 t-r-cars-short-name bg-light-danger">BC</span>
<div class="media-body">
<h6 class="mb-0">Bently Continental GT</h6>
<div class="t-r-rating">
<span>4.1</span>
<div class="t-r-rating-star text-right d-inline ml-1">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="t-r-usr">
<i class="flaticon-user-7 mr-2"></i>
<span>11314 Users</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-4 t-r-cars-short-name bg-light-dark">JW</span>
<div class="media-body">
<h6 class="mb-0">Jeep Wrangler</h6>
<div class="t-r-rating">
<span>5.0</span>
<div class="t-r-rating-star text-right d-inline ml-1">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
</div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="t-r-usr">
<i class="flaticon-user-7 mr-2"></i>
<span>2580 Users</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-9 col-lg-8 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="customer-bal-summary">
<div class="c-b-s-header">
<div class="row">
<div class="col-md-6 col-6">
<h6 class="">Customer Balance Summary</h6>
</div>
<div class="col-md-6 col-6 text-sm-right">
<ul class="nav justify-content-end c-b-s-tab nav-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="c-b-s-monthly-tab" data-toggle="pill" href="#c-b-s-monthly" role="tab" aria-controls="c-b-s-monthly" aria-selected="true">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="c-b-s-yearly-tab" data-toggle="pill" href="#c-b-s-yearly" role="tab" aria-controls="c-b-s-yearly" aria-selected="false">Yearly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="c-b-s-body">
<div class="tab-content">
<div class="tab-pane active" id="c-b-s-monthly" role="tabpanel" aria-labelledby="c-b-s-monthly-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="" scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
<th class="text-center" scope="col">Status</th>
<th class="text-right" scope="col">Receipt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="customer-name">Andy King</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 1,275</td>
<td class="text-center"><span class="badge badge-pills outline-badge-dark">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Alma Clarke</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 2,344</td>
<td class="text-center"><span class="badge badge-pills outline-badge-new">Pending</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Shaun Park</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 1,057</td>
<td class="text-center"><span class="badge badge-pills outline-badge-dark">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Alan Green</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 3,361</td>
<td class="text-center"><span class="badge badge-pills outline-badge-dark">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Kristen Beck</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 2,895</td>
<td class="text-center"><span class="badge badge-pills outline-badge-dark">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Nia Hillyer</td>
<td class="c-b-s-date">10 Jan 2019</td>
<td class="customer-price">$ 1,713</td>
<td class="text-center"><span class="badge badge-pills outline-badge-new">Pending</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="c-b-s-bottom">
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
<p class="mb-0 mt-1 pagination-stats text-sm-left text-center mb-sm-0 mb-4">Showing 1 to 10 of 24 entries</p>
</div>
<div class="col-md-6 col-sm-6 col-12">
<ul class="pagination pagination-style-5 pagination-rounded justify-content-sm-end justify-content-center pagination-sm mb-0 mt-0">
<li><a href="javascript:void(0);">Previous</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="c-b-s-yearly" role="tabpanel" aria-labelledby="c-b-s-yearly-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="" scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
<th class="text-center" scope="col">Status</th>
<th class="text-right" scope="col">Receipt</th>
</tr>
</thead>
<tbody>
<tr>
<td class="customer-name">Andy King</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 24,146</td>
<td class="text-center"><span class="badge badge-pills badge-success">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Alma Clarke</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 46,275</td>
<td class="text-center"><span class="badge badge-pills badge-warning">Pending</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Shaun Park</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 15,275</td>
<td class="text-center"><span class="badge badge-pills badge-success">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Alan Green</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 39,881</td>
<td class="text-center"><span class="badge badge-pills badge-success">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Kristen Beck</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 29,133</td>
<td class="text-center"><span class="badge badge-pills badge-success">Paid</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
<tr>
<td class="customer-name">Nia Hillyer</td>
<td class="c-b-s-date">Jan 2018 - 19</td>
<td class="customer-price">$ 25,794</td>
<td class="text-center"><span class="badge badge-pills badge-warning">Pending</span></td>
<td class="text-right"><i class="flaticon-download-1 mr-3"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="c-b-s-bottom">
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
<p class="mb-0 mt-1 pagination-stats text-sm-left text-center mb-sm-0 mb-4">Showing 1 to 10 of 24 entries</p>
</div>
<div class="col-md-6 col-sm-6 col-12">
<ul class="pagination pagination-style-5 pagination-rounded justify-content-sm-end justify-content-center pagination-sm mb-0 mt-0">
<li><a href="javascript:void(0);">Previous</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4 file-uploader">
<form class="dropzone-file-area dropzone dropzone-file-area--secondary d-flex align-self-center h-100 justify-content-center" action="plugins/dropzone/upload.php" id="dropzone-file-area-one">
<div class="d-flex align-self-center">
<div class="dropzone-file-area__msg dz-message needsclick">
<h3 class="dropzone-file-area__msg-title">Drop files here.</h3>
<i class="icon flaticon-cloud-upload mb-5 d-block mt-3 mb-3"></i>
<div class="d-block text-center">
<button type="button" class="btn btn-outline-default">Upload</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="todo-list">
<div class="todo-list-header">
<div class="row">
<div class="col-md-5 col-sm-6 col-10 mb-4 mb-sm-0">
<h5 class="mb-0">To-do list <span class="badge badge-danger badge-pill ml-4">Today</span></h5>
</div>
<div class="col-md-7 col-sm-6 col-2 text-right">
<i class="flaticon-down-arrow-2 mt-1 js-collapse"></i>
</div>
</div>
</div>
<div class="todo-list-body panel-collapse">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Send Mail to HR and Admin</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input" checked>
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Meeting with Shaun Park at 4:50pm</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Download Server Logs</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Team Meet at 5:30pm</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Mailbox Cleanup</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span><span class="todo-text ml-4 mt-1">Backup and Restore Files EOD</span>
<span class="flaticon-close-fill remove-task mt-1 ml-3"></span>
</label>
</div>
</td>
<td><i class="flaticon-edit-5 float-right task-edit"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="todo-list-bottom text-center">
<span class="mr-sm-4 d-sm-inline d-block mb-sm-0 mb-3">Add new todo list</span>
<button class="btn btn-outline-primary">Add</button>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="widget-content widget-content-area event-widget br-4 text-center">
<div id="event-card-1" class="card">
<div class="card-title mb-5">
<span class="badge badge-default badge-pill">Event</span>
</div>
<div class="card-event-icon mt-5 mb-5">
<i class="flaticon-calendar"></i>
</div>
<div class="card-event-list mt-3">
<p>No event or tasks!</p>
</div>
<div class="card-bottom-section">
<button class="btn btn-secondary btn-rounded">Add new event</button>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="widget-content widget-content-area underline-content p-0 h-100 br-4">
<div class="best-mechanics-container">
<div class="best-mechanics-header">
<h6 class="mb-sm-0 mb-3">Best Mechanics</h6>
<ul class="nav justify-content-end nav-tabs mb-3" id="iconTab2" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="underline-home-tab" data-toggle="tab" href="#underline-home" role="tab" aria-controls="underline-home" aria-selected="false">Week</a>
</li>
<li class="nav-item">
<a class="nav-link" id="underline-profile-tab" data-toggle="tab" href="#underline-profile" role="tab" aria-controls="underline-profile" aria-selected="false">Month</a>
</li>
</ul>
</div>
<div class="best-mechanics-body">
<div class="tab-content" id="iconTab2Content">
<div class="tab-pane fade active show" id="underline-home" role="tabpanel" aria-labelledby="underline-home-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Car Services</th>
<th class="text-center">Incentive</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Shaun Park</h6>
</div>
</div>
</td>
<td class="text-center">
<span>30</span>
</td>
<td class="text-center">
<span>$950.00 <span class="caret caret-earn-dec"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Alan Green</h6>
</div>
</div>
</td>
<td class="text-center">
<span>25</span>
</td>
<td class="text-center">
<span>$890.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Alma Clarke</h6>
</div>
</div>
</td>
<td class="text-center">
<span>19</span>
</td>
<td class="text-center">
<span>$810.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Andy King</h6>
</div>
</div>
</td>
<td class="text-center">
<span>50</span>
</td>
<td class="text-center">
<span>$700.00 <span class="caret caret-earn-dec"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Justin Cross</h6>
</div>
</div>
</td>
<td class="text-center">
<span>12</span>
</td>
<td class="text-center">
<span>$650.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Linda Nelson</h6>
</div>
</div>
</td>
<td class="text-center">
<span>11</span>
</td>
<td class="text-center">
<span>$595.00 <span class="caret caret-earn-dec"></span></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="underline-profile" role="tabpanel" aria-labelledby="underline-profile-tab">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Car Services</th>
<th class="text-center">Incentive</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Shaun Park</h6>
</div>
</div>
</td>
<td class="text-center">
<span>125</span>
</td>
<td class="text-center">
<span>$4023.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Alan Green</h6>
</div>
</div>
</td>
<td class="text-center">
<span>114</span>
</td>
<td class="text-center">
<span>$3290.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Alma Clarke</h6>
</div>
</div>
</td>
<td class="text-center">
<span>105</span>
</td>
<td class="text-center">
<span>$3000.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Andy King</h6>
</div>
</div>
</td>
<td class="text-center">
<span>91</span>
</td>
<td class="text-center">
<span>$2500.00 <span class="caret caret-earn-dec"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Justin Cross</h6>
</div>
</div>
</td>
<td class="text-center">
<span>56</span>
</td>
<td class="text-center">
<span>$1450.00 <span class="caret caret-earn-dec"></span></span>
</td>
</tr>
<tr>
<td>
<div class="media">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
<div class="media-body mt-1">
<h6 class="mt-2 mb-0">Linda Nelson</h6>
</div>
</div>
</td>
<td class="text-center">
<span>50</span>
</td>
<td class="text-center">
<span>$1240.00 <span class="caret caret-earn-inc"></span></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="todo-list p-0">
<div class="todo-list-header">
<div class="row">
<div class="col-md-5 col-sm-6 col-6 mb-4 mb-sm-0">
<h6 class="mb-0">Task</h6>
</div>
<div class="col-md-7 col-sm-6 col-6 text-right">
<div class="time d-flex float-right time-style">
<div id="hour"></div>
<div id="minut"></div>
<div id="date"></div>
</div>
</div>
</div>
</div>
<div class="todo-list-body">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="todo-text mt-1">New User Registered</span>
<span class="meta-time d-block">5 min ago</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input" checked="">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="todo-text mt-1">Meeting with Shaun Park at 4:50pm</span>
<span class="meta-time d-block">5 min ago</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-img mr-3 bg-success d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
</span>
<span class="media-body">
<span class="todo-text mt-1">Download Complete</span>
<span class="meta-time d-block">5 min ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="todo-text mt-1">Meeting with Shaun Park at 4:50pm</span>
<span class="meta-time d-block">5 min ago</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-img mr-3 bg-primary d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
</span>
<span class="media-body">
<span class="todo-text mt-1">Mailbox 90% full</span>
<span class="meta-time d-block">5 min ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-flex justify-content-center ml-4">
<span class="">
<span class="d-m-todo-item data-marker"></span>
</span>
<span class="todo-item ml-3">
<span class="todo-text mt-1">File received by Angie <i class="flaticon-file"></i></span>
<span class="meta-time d-block">10 mins ago</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-delete float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-12 layout-spacing">
<div class="statbox widget box box-shadow driver-list br-4">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Driver List</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area p-0">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="form-check-column text-center">
<label for="driverListAll" class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" id="driverListAll" class="new-control-input">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</th>
<th>Driver</th>
<th class="text-center">Phone</th>
<th class="text-center">Status</th>
<th class="text-center">Total Drives</th>
<th class="text-center">Rating</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input driverListchk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>
<div class="d-inline-block">
<span class="">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
</span>
<div class=" mt-1 d-inline-block">
<h6 class="mt-2 mb-0">Shaun Park</h6>
</div>
</div>
</td>
<td class="text-center">1234567890</td>
<td class="text-center"><div class="d-l-available t-dot " data-toggle="tooltip" data-placement="top" title="" data-original-title="Available"></div></td>
<td class="align-center">67</td>
<td class="text-center">
<span>(4.4)</span>
<div class="t-d-rating">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</td>
<td>
<i class="flaticon-edit bs-tooltip" data-original-title="Edit"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input driverListchk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>
<div class="d-inline-block">
<span class="">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
</span>
<div class=" mt-1 d-inline-block">
<h6 class="mt-2 mb-0">Alma Clarker</h6>
</div>
</div>
</td>
<td class="text-center">1234567890</td>
<td class="text-center"><div class="t-dot d-l-not-available" data-toggle="tooltip" data-placement="top" title="" data-original-title="Not Available"></div></td>
<td class="align-center">59</td>
<td class="text-center">
<span>(3.5)</span>
<div class="t-d-rating">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
</div>
</td>
<td>
<i class="flaticon-edit bs-tooltip" data-original-title="Edit"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input driverListchk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>
<div class="d-inline-block">
<span class="">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
</span>
<div class=" mt-1 d-inline-block">
<h6 class="mt-2 mb-0">Andy King</h6>
</div>
</div>
</td>
<td class="text-center">1234567890</td>
<td class="text-center"><div class="d-l-available t-dot " data-toggle="tooltip" data-placement="top" title="" data-original-title="Available"></div></td>
<td class="align-center">83</td>
<td class="text-center">
<span>(4.5)</span>
<div class="t-d-rating">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</td>
<td>
<i class="flaticon-edit bs-tooltip" data-original-title="Edit"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input driverListchk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>
<div class="d-inline-block">
<span class="">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
</span>
<div class=" mt-1 d-inline-block">
<h6 class="mt-2 mb-0">Linda Nelson</h6>
</div>
</div>
</td>
<td class="text-center">1234567890</td>
<td class="text-center"><div class="d-l-available t-dot " data-toggle="tooltip" data-placement="top" title="" data-original-title="Available"></div></td>
<td class="align-center">62</td>
<td class="text-center">
<span>(4.1)</span>
<div class="t-d-rating">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</td>
<td>
<i class="flaticon-edit bs-tooltip" data-original-title="Edit"></i>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox checkbox-primary pb-2">
<input type="checkbox" class="new-control-input driverListchk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>
<div class="d-inline-block">
<span class="">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid rounded-circle mr-3">
</span>
<div class=" mt-1 d-inline-block">
<h6 class="mt-2 mb-0">Justin Cross</h6>
</div>
</div>
</td>
<td class="text-center">1234567890</td>
<td class="text-center"><div class="d-l-available t-dot" data-toggle="tooltip" data-placement="top" title="" data-original-title="Available"></div></td>
<td class="align-center">61</td>
<td class="text-center">
<span>(4.3)</span>
<div class="t-d-rating">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
</td>
<td>
<i class="flaticon-edit bs-tooltip" data-original-title="Edit"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4 h-100">
<div class="booked-cars-list">
<div class="booked-cars-list-header">
<div class="row">
<div class="col-md-12 col-sm-12 col-12 mb-4 mb-sm-0">
<h6 class="mb-0">Booked Cars</h6>
</div>
</div>
</div>
<div class="booked-cars-list-body">
<div class="text-center">
<p class="mb-0">This Month Booked Cars</p>
<span class="badge badge-primary badge-pill">70 +</span>
</div>
<div class="table-responsive mt-sm-3 mt-5 booked-car-scroll">
<table class="table mb-0">
<thead>
<tr>
<th class="form-check-column text-center">
<label for="bookedCarsAll" class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" id="bookedCarsAll" class="new-control-input">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</th>
<th>Model</th>
<th>Date</th>
<th class="text-center">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Range Rover</td>
<td>2 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">10:30 am</span> </td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>BMW M4</td>
<td>2 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">03:00 pm</span> </td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Audi R8</td>
<td>4 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">11:00 am</span> </td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Mercedes SLR</td>
<td>5 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">09:30 am</span> </td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Honda Accord</td>
<td>5 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">12:30 pm</span> </td>
</tr>
<tr>
<td class="form-check-column text-center">
<label class="new-control new-checkbox new-checkbox-rounded checkbox-primary pb-2">
<input type="checkbox" class="new-control-input bookedCarschk">
<span class="new-control-indicator mt-2"></span><span class="invisible">s</span>
</label>
</td>
<td>Aston Martin DB 11</td>
<td>7 Jan 2019</td>
<td class="b-c-l-meta-time text-center"><i class="flaticon-clock-2"></i> <span class="meta-time">11:00 am</span> </td>
</tr>
</tbody>
</table>
</div>
<div class="c-f-load-more text-center mt-2 mb-2">
<button class="btn btn-primary btn-rounded">More +</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4 h-100">
<div class="available-cars-list">
<div class="available-cars-list-header">
<div class="row">
<div class="col-md-12 col-sm-12 col-12 mb-4 mb-sm-0">
<div class="">
<h6 class="mb-0 d-inline">Available Cars</h6>
<span class="badge badge-success badge-pill d-inline float-right">50 +</span>
</div>
</div>
</div>
</div>
<div class="available-cars-list-body">
<p class="a-c-l-text">30% Off on first ride</p>
<div class="table-responsive mt-sm-3 mt-5 available-car-scroll">
<table class="table">
<thead>
<tr>
<th>Model</th>
<th class="text-center">Review</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="media">
<span class="mr-2">A</span>
<div class="media-body">
<p class="">Audi A4</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(4.7)</td>
<td class="text-right"><span class="badge outline-badge-dark badge-pill">In Service</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">F</span>
<div class="media-body">
<p class="">Ford Focus</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(4.4)</td>
<td class="text-right"><span class="badge outline-badge-success badge-pill">Available</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">H</span>
<div class="media-body">
<p class="">Honda Civic</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(4.9)</td>
<td class="text-right"><span class="badge outline-badge-success badge-pill">Available</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">M</span>
<div class="media-body">
<p class="">Mini Clubman</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(3.8)</td>
<td class="text-right"><span class="badge outline-badge-success badge-pill">Available</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">T</span>
<div class="media-body">
<p class="">Toyota Camry</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(5.0)</td>
<td class="text-right"><span class="badge outline-badge-success badge-pill">Available</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">K</span>
<div class="media-body">
<p class="">Kia Stinger</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(4.5)</td>
<td class="text-right"><span class="badge outline-badge-dark badge-pill">In Service</span> </td>
</tr>
<tr>
<td>
<div class="media">
<span class="mr-2">B</span>
<div class="media-body">
<p class="">BMW M5</p>
</div>
</div>
</td>
<td class="a-c-l-rating text-center">(4.2)</td>
<td class="text-right"><span class="badge outline-badge-success badge-pill">Available</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="customer-feedback-list">
<div class="customer-feedback-list-header">
<div class="row">
<div class="col-md-12 col-sm-12 col-12 mb-4 mb-sm-0">
<h6 class="mb-0">Customer Feedback</h6>
</div>
</div>
</div>
<div class="customer-feedback-list-body">
<div class="l-a-scroll">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-sm-flex d-block text-sm-left text-center">
<div class="f-header">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
</div>
<div class="f-body">
<h6>Roxanne</h6>
<p class="meta-des mb-0"><span class="meta-day">15 Jan 2019</span> - <span class="meta-day-ago">2 Days ago</span> <span class="meta-usr-rated">(4.0)</span></p>
<div class="c-f-rating mb-3">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
</div>
<p class="usr-feed">Very Good Services, i am happy here...</p>
</div>
</div>
</td>
<td class="align-center"><span class="badge outline-badge-success badge-pill">Good</span> </td>
</tr>
<tr>
<td>
<div class="d-sm-flex d-block text-sm-left text-center">
<div class="f-header">
<img alt="admin-profile" src="assets/img//90x90.jpg" class="mr-sm-3 mb-2">
</div>
<div class="f-body">
<h6>Andy King</h6>
<p class="meta-des mb-0"><span class="meta-day">15 Jan 2019</span> - <span class="meta-day-ago">2 Days ago</span> <span class="meta-usr-rated">(5.0)</span></p>
<div class="c-f-rating mb-3">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
</div>
<p class="usr-feed">Excellent Customer Care Services.</p>
</div>
</div>
</td>
<td class="align-center"><span class="badge outline-badge-success badge-pill">Good</span> </td>
</tr>
<tr>
<td>
<div class="d-sm-flex d-block text-sm-left text-center">
<div class="f-header">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
</div>
<div class="f-body">
<h6>Justin Cross</h6>
<p class="meta-des mb-0"><span class="meta-day">15 Jan 2019</span> - <span class="meta-day-ago">2 Days ago</span> <span class="meta-usr-rated">(3.0)</span></p>
<div class="c-f-rating mb-3">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
</div>
<p class="usr-feed">Good Delivery</p>
</div>
</div>
</td>
<td class="align-center"><span class="badge outline-badge-warning badge-pill">Average</span> </td>
</tr>
<tr>
<td>
<div class="d-sm-flex d-block text-sm-left text-center">
<div class="f-header">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
</div>
<div class="f-body">
<h6>Linda Nelson</h6>
<p class="meta-des mb-0"><span class="meta-day">15 Jan 2019</span> - <span class="meta-day-ago">2 Days ago</span> <span class="meta-usr-rated">(1.8)</span></p>
<div class="c-f-rating mb-3">
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
</div>
<p class="usr-feed">Bad Service...</p>
</div>
</div>
</td>
<td class="align-center"><span class="badge outline-badge-danger badge-pill">Bad</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="c-f-load-more text-center">
<button class="btn btn-primary btn-rounded">More +</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="active-task">
<div class="active-task-header">
<div class="row">
<div class="col-md-12 col-sm-12 col-12">
<h6 class="mb-0">Active Tasks (6/10) <span>Today</span></h6>
</div>
</div>
</div>
<div class="active-task-body">
<div class="table-responsive a-t-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-dark">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<div class="task-item ml-3">
<div class="d-flex">
<div class="f-head bg-light-secondary mr-3">
<span class="">JT</span>
</div>
<div class="f-body">
<span class="task-cat mt-1">Email</span>
<div class="task-title">Send Shaun's project documents</div>
<div class="meta-info">
<p class="meta-usr-name d-inline mr-3">Jimmy Turner</p>
<p class="meta-time d-inline">2 min ago</p>
</div>
</div>
</div>
</div>
</label>
</div>
</td>
<td class="text-right">
<i class="flaticon-edit-5 task-edit"></i>
<i class="flaticon-circle-cross task-cancel"></i>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-dark">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<div class="task-item ml-3">
<div class="d-flex">
<div class="usr-img mr-3">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</div>
<div class="f-body">
<span class="task-cat mt-1">Documents</span>
<div class="task-title">Weekly report attached</div>
<div class="meta-info">
<p class="meta-usr-name d-inline mr-3">Lila Perry</p>
<p class="meta-time d-inline">6 min ago</p>
</div>
</div>
</div>
</div>
</label>
</div>
</td>
<td class="text-right">
<i class="flaticon-edit-5 task-edit"></i>
<i class="flaticon-circle-cross task-cancel"></i>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-dark">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<div class="task-item ml-3">
<div class="d-flex">
<div class="usr-img mr-3">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</div>
<div class="f-body">
<span class="task-cat mt-1">Schedule</span>
<div class="task-title">Schedule a meeting with Alma</div>
<div class="meta-info">
<p class="meta-usr-name d-inline mr-3">Linda Nelson</p>
<p class="meta-time d-inline">8 min ago</p>
</div>
</div>
</div>
</div>
</label>
</div>
</td>
<td class="text-right">
<i class="flaticon-edit-5 task-edit"></i>
<i class="flaticon-circle-cross task-cancel"></i>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-dark">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<div class="task-item ml-3">
<div class="d-flex">
<div class="f-head bg-light-warning mr-3">
<span class="">MW</span>
</div>
<div class="f-body">
<span class="task-cat mt-1">Work</span>
<div class="task-title">John send Lisa project details</div>
<div class="meta-info">
<p class="meta-usr-name d-inline mr-3">Marlene Wood</p>
<p class="meta-time d-inline">15 min ago</p>
</div>
</div>
</div>
</div>
</label>
</div>
</td>
<td class="text-right">
<i class="flaticon-edit-5 task-edit"></i>
<i class="flaticon-circle-cross task-cancel"></i>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-dark">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<div class="task-item ml-3">
<div class="d-flex">
<div class="usr-img mr-3">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</div>
<div class="f-body">
<span class="task-cat mt-1">Maintenance</span>
<div class="task-title">Server reboot required</div>
<div class="meta-info">
<p class="meta-usr-name d-inline mr-3">Sonia Shaw</p>
<p class="meta-time d-inline">15 min ago</p>
</div>
</div>
</div>
</div>
</label>
</div>
</td>
<td class="text-right">
<i class="flaticon-edit-5 task-edit"></i>
<i class="flaticon-circle-cross task-cancel"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="active-task-bottom text-center py-3 mb-2">
<button class="btn btn-secondary btn-rounded">View More</button>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 layout-spacing" id="cancel-row">
<div class="widget-content widget-content-area br-4 p-0 h-100">
<div class="customer-feedback-list">
<div class="customer-feedback-list-header">
<div class="row">
<div class="col-md-8 col-sm-8 col-9">
<h6 class="mb-0">Customer Feedback</h6>
</div>
<div class="col-md-4 col-sm-4 col-3 text-right">
<i class="flaticon-close-fill js-cancel"></i>
</div>
</div>
</div>
<div class="customer-feedback-list-body">
<div class="table-responsive c-f-l-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Donna Rogers</h6>
<p class="usr-feed">Amazing UI Kit...!</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(4.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">12 min ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">3</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Sonia Shaw</h6>
<p class="usr-feed">I like it a lot. Great a job!</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(4.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">31 min ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">7</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Alexander Gray</h6>
<p class="usr-feed">Looks really clean. Great work!</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(5.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<span class="meta-time">1 Day ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">21</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Kelly Young</h6>
<p class="usr-feed">Smooth work, Thank you!</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(4.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">1 week ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">14</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Alma Clarke</h6>
<p class="usr-feed">Very Good Services, I am happy</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(4.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">2 Weeks ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">32</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Oscar Garner</h6>
<p class="usr-feed">Thanks for your fast delivery</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(5.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<span class="meta-time">3 Weeks ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">5</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Shaun Park</h6>
<p class="usr-feed">Need more work.</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(3.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">3 Weeks ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">54</p>
</td>
</tr>
<tr>
<td>
<div class="media text-sm-left text-center d-sm-flex d-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="mr-sm-3 mb-2">
<div class="media-body">
<h6>Linda Nelson</h6>
<p class="usr-feed">Like it, will order again</p>
<div class="c-f-rating mb-3">
<span class="meta-usr-rated">(4.0)</span>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-fill"></i>
<i class="flaticon-star-outline"></i>
<span class="meta-time">1 Month ago</span>
</div>
</div>
</div>
</td>
<td class="text-right">
<i class="flaticon-like-3"></i>
<p class="c-f-meta-like">2</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="tasks">
<div class="tasks-header">
<div class="row">
<div class="col-md-7">
<h6 class="mb-0">Notifications</h6>
</div>
</div>
</div>
<div class="tasks-body">
<div class="table-responsive task-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">12:30</span>
<span class="task-txt">New agent profile added</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">11:00</span>
<span class="task-txt"><span class="task-marked-text">PDF</span> file Download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-danger badge-pill">Fix</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">3:30</span>
<span class="task-txt"><span class="task-marked-text">255</span> new shares traded</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">3:30</span>
<span class="task-txt">You have one <span class="task-marked-text">booking request</span></span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">2:00</span>
<span class="task-txt"><span class="task-marked-text">Booking</span> from download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">11:00</span>
<span class="task-txt"><span class="task-marked-text">PDF</span> file Download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-danger badge-pill">Fix</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">12:30</span>
<span class="task-txt">New agent profile added</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">11:00</span>
<span class="task-txt"><span class="task-marked-text">PDF</span> file Download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-danger badge-pill">Fix</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">3:30</span>
<span class="task-txt"><span class="task-marked-text">255</span> new shares traded</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">3:30</span>
<span class="task-txt">You have one <span class="task-marked-text">booking request</span></span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">2:00</span>
<span class="task-txt"><span class="task-marked-text">Booking</span> from download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-success badge-pill">Success</span>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="">
<div class="d-m-todo ml-2 data-marker mt-1"></div>
</div>
<div class="task-item">
<span class="task-meta-time">11:00</span>
<span class="task-txt"><span class="task-marked-text">PDF</span> file Download</span>
</div>
</div>
</td>
<td class="text-center">
<span class="badge badge-danger badge-pill">Fix</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="task-load-more text-center">
<button class="btn btn-secondary btn-rounded">Load More</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="commodity-prices">
<div class="commodity-prices-title mb-4">
<h6 class="mb-0">Commodity Prices</h6>
</div>
<div class="commodity-prices-body">
<div class="table-responsive commodity-prices-scroll">
<table class="table">
<thead>
<tr>
<th>Commodity</th>
<th>Last</th>
<th>Change</th>
<th>%Change</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="mb-1">Natural Gas</h6>
<p>June 2018 contract $ / million BTUs</p>
</td>
<td class="text-center">
<span>3.36</span>
<div class="progress mt-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-inc">+0.011</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-percentage-inc">+0.33%</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span>3.94</span>
<div class="progress mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<h6 class="mb-1">Platinum</h6>
<p>July 2018 contract $ / troy ounce</p>
</td>
<td class="text-center">
<span>935.30</span>
<div class="progress mt-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-inc">+6.60</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-percentage-inc">+0.71%</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span>1,200</span>
<div class="progress mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<h6 class="mb-1">Wheat</h6>
<p>July 2018 contract ¢ / bushel</p>
</td>
<td class="text-center">
<span>4.23</span>
<div class="progress mt-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-dec">-0.005</span>
<div class="progress mt-2">
<div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-percentage-dec">-0.12%</span>
<div class="progress mt-2">
<div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span>386.75</span>
<div class="progress mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<h6 class="mb-1">Cotton</h6>
<p>March 2018 contract ¢ / pound</p>
</td>
<td class="text-center">
<span>74.14</span>
<div class="progress mt-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-neu">+0.00</span>
<div class="progress mt-2">
<div class="progress-bar bg-dark" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-percentage-neu">+0.00%</span>
<div class="progress mt-2">
<div class="progress-bar bg-dark" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span>80.07</span>
<div class="progress mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>
<h6 class="mb-1">Coal</h6>
<p>April 2018 contract ¢ / pound</p>
</td>
<td class="text-center">
<span>74.14</span>
<div class="progress mt-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-inc">+0.00</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span class="c-p-price-percentage-inc">+0.00%</span>
<div class="progress mt-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<span>80.07</span>
<div class="progress mt-2">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="recent-activity">
<div class="recent-activity-title">
<h6 class="mb-0">Recent Activity</h6>
</div>
<div class="recent-activity-body">
<div class="table-responsive recent-activity-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">
<span class="usr-name">James Tylor</span> added new post <span class="a-f-commented-on">Sales group</span>
</p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">22 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1"><span class="usr-name">Mary McDonald</span> added new post <span class="a-f-commented-on">Shaun Park </span>post</p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">30 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">
<span class="usr-name">Andy King</span> placed order for new <span class="a-f-commented-on">Printer</span></p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">35 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 t-not-solved bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1"><strong>Your results are available to download.</strong> </p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">39 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">
<span class="usr-name">Performance evaluation</span> completed by <span class="a-f-commented-on">HR</span></p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">42 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 t-not-solved bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1"><strong>New Stock file format not working.</strong> </p>
<p class="meta-info">
<i class="flaticon-time mr-1"></i>
<span class="a-f-meta-time">50 minutes ago</span>
</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-checked-1 mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Success"></i>
<i class="flaticon-cancel-circle mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Close"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="top-exchange-rate">
<div class="top-exchange-rate-title">
<h6>Top Exchange Rates</h6>
</div>
<div class="top-exchange-rate-body">
<div class="table-responsive top-exchange-rate-scroll">
<table class="table">
<tbody>
<tr class="">
<td></td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="1">
<br> EUR
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="2">
<br> GBP
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="3">
<br> JPY
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="4">
<br> CAD
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="5">
<br> AUD
</span>
</td>
</tr>
<tr>
<td class="align-center">
<span class="t-e-r-country-currency">USD - US Dollor</span>
<br>
<span class="flag-size">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="6">
</span>
<br>
<span class="t-e-r-country-name"> 1 USD Inverse:</span>
</td>
<td class="align-center">0.90688 1.10268</td>
<td class="align-center">0.77341 1.29297</td>
<td class="align-center">113.506 0.00881</td>
<td class="align-center">1.36214 0.73414</td>
<td class="align-center">1.34684 0.74248</td>
</tr>
<tr class="">
<td></td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="1">
<br> USD
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="2">
<br> GBP
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="3">
<br> JPY
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="4">
<br> CAD
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="5">
<br> AUD
</span>
</td>
</tr>
<tr>
<td class="align-center">
<span class="t-e-r-country-currency">EUR - Euro</span>
<br>
<span class="flag-size">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="6">
</span>
<br>
<span class="t-e-r-country-name"> 1 EUR Inverse:</span>
</td>
<td class="align-center">1.51679 1.43266</td>
<td class="align-center">1.36357 1.46556</td>
<td class="align-center">0.01516 0.61507</td>
<td class="align-center">1.73213 0.56214</td>
<td class="align-center">1.34676 1.34542</td>
</tr>
<tr class="">
<td></td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="1">
<br> EUR
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="2">
<br> USD
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="3">
<br> JPY
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="4">
<br> CAD
</span>
</td>
<td class="align-center">
<span class="t-e-r-country-name">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="5">
<br> AUD
</span>
</td>
</tr>
<tr>
<td class="align-center">
<span class="t-e-r-country-currency">GBP - British Pound</span>
<br>
<span class="flag-size">
<img src="assets/img/80x40.jpg" class="img-fluid mCS_img_loaded" alt="6">
</span>
<br>
<span class="t-e-r-country-name"> 1 EUR Inverse:</span>
</td>
<td class="align-center">1.60686 1.13265</td>
<td class="align-center">0.57371 1.16296</td>
<td class="align-center">103.516 0.11508</td>
<td class="align-center">1.53215 0.93212</td>
<td class="align-center">0.84673 1.54841</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0 pb-1">
<div class="latest-transactions">
<div class="latest-transactions-title">
<h6>Latest Transactions</h6>
</div>
<div class="latest-transactions-body">
<div class="table-responsive l-t-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">James Taylor</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-success align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$2,123.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">10 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">Keith Foster</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-success align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$3,523.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">12 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">Alan Green</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-warning align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$1,500.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">12 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">Irene Collins</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-success align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$4,600.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">14 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">Kelly Young</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-danger align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$3,100.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">15 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img alt="admin-profile" class="mr-3" src="assets/img/90x90.jpg">
</div>
<div class="f-body">
<h6 class="mb-0 mt-3">Dale Butler</h6>
</div>
</div>
</td>
<td>
<div class="d-flex">
<div class="dot dot-success align-self-center"></div>
<span class="l-t-confirmed">Confirmed</span>
</div>
</td>
<td>
<p class="l-t-price mb-0">$5,098.00</p>
<span class="">Amount</span>
</td>
<td>
<p class="l-t-meta-date mb-0">16 Jan 2019</p>
<span>Date</span>
</td>
<td>
<button class="btn btn-outline-info btn-rounded">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="most-active-shares">
<div class="most-active-shares-title">
<h6 class="mb-0">Most Active Shares</h6>
</div>
<div class="most-active-shares-body">
<div class="table-responsive most-active-shares-scroll">
<table class="table">
<thead>
<tr>
<th class="text-center">Symbol</th>
<th class="text-center">Company</th>
<th class="text-center">Chart</th>
<th>Last Sales</th>
<th>Net Change</th>
<th class="text-center">Share Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">AAPL</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">Apple Inc</p>
</td>
<td>
<span id="m-a-s-chart-1">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$155.70</div>
</td>
<td>
<div>0.4 <i class="flaticon-down-arrow-3"></i> 0.26%</div>
</td>
<td class="text-center">
<p>23,700,801</p>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">NVDA</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">NVIDIA Corp</p>
</td>
<td>
<span id="m-a-s-chart-2">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$134.31</div>
</td>
<td>
<div>6.42 <i class="flaticon-up-arrow-3"></i> 5.02%</div>
</td>
<td class="text-center">
<p>26,290,914</p>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">CSCO</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">Cisco Systems</p>
</td>
<td>
<span id="m-a-s-chart-3">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$34.23</div>
</td>
<td>
<div>0.78 <i class="flaticon-up-arrow-3"></i> 0.78%</div>
</td>
<td class="text-center">
<p>29,243,942</p>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">MSFT</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">Microsoft Corp</p>
</td>
<td>
<span id="m-a-s-chart-4">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$68.43</div>
</td>
<td>
<div>0.05 <i class="flaticon-up-arrow-3"></i> 0.07%</div>
</td>
<td class="text-center">
<p>28,523,827</p>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">APA</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">Apache Corp</p>
</td>
<td>
<span id="m-a-s-chart-5">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$45.78</div>
</td>
<td>
<div>1.10 <i class="flaticon-up-arrow-3"></i> 2.46%</div>
</td>
<td class="text-center">
<p>2,373,553</p>
</td>
</tr>
<tr>
<td class="text-center">
<span class="badge badge-primary badge-pill">TWTR</span>
</td>
<td class="text-center">
<p class="m-a-s-company-name">Twitter Inc</p>
</td>
<td>
<span id="m-a-s-chart-6">3,6,5,2,4,5,8,3,4,7,6,2</span>
</td>
<td>
<div>$43.8</div>
</td>
<td>
<div>2.42 <i class="flaticon-down-arrow-3"></i> 1.09%</div>
</td>
<td class="text-center">
<p>29,311,097</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="unique-visits">
<div class="unique-visits-title d-flex justify-content-between">
<h6 class="align-self-center mb-0">Unique Visitors</h6>
<p class=" mb-0">22,311</p>
</div>
<div class="unique-visits-body">
<div class="table-responsive mt-4">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img alt="country-flags" src="assets/img/88x60.jpg" class="rounded-circle mr-3">
</div>
<div class="f-body">
<h6 class="">United States</h6>
<p class=""><i class="flaticon-arrow-up"></i> 13.22%</p>
</div>
</div>
</td>
<td class="text-right">
<p>14.54%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img alt="country-flags" src="assets/img/88x60.jpg" class="rounded-circle mr-3">
</div>
<div class="f-body">
<h6 class="">China</h6>
<p class=""><i class="flaticon-arrow-up"></i> 11.77%</p>
</div>
</div>
</td>
<td class="text-right">
<p>14.40%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img alt="country-flags" src="assets/img/88x60.jpg" class="rounded-circle mr-3">
</div>
<div class="f-body">
<h6 class="">India</h6>
<p class=""><i class="flaticon-arrow-up"></i> 9.43%</p>
</div>
</div>
</td>
<td class="text-right">
<p>8.65%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img alt="country-flags" src="assets/img/88x60.jpg" class="rounded-circle mr-3">
</div>
<div class="f-body">
<h6 class="">Sweden</h6>
<p class=""><i class="flaticon-arrow-up"></i> 8.92%</p>
</div>
</div>
</td>
<td class="text-right">
<p>5.03%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img alt="country-flags" src="assets/img/88x60.jpg" class="rounded-circle mr-3">
</div>
<div class="f-body">
<h6 class="">France</h6>
<p class=""><i class="flaticon-arrow-up"></i> 8.56%</p>
</div>
</div>
</td>
<td class="text-right">
<p>3.83%</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="u-v-loadmore text-center">
<button class="btn btn-outline-primary btn-block">See 51+ more countries</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="best-performers">
<div class="best-performers-header">
<div class="row">
<div class="col-md-7 col-sm-7 col-7">
<h6 class="mb-0 mt-2">Best Performers</h6>
</div>
<div class="col-md-5 col-sm-5 col-5">
<ul class="nav best-performers-tab nav-pills justify-content-end" id="bestPerformers" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="best-performers-weekly-tab" data-toggle="pill" href="#best-performers-weekly" role="tab" aria-controls="best-performers-weekly" aria-selected="true">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="best-performers-monthly-tab" data-toggle="pill" href="#best-performers-monthly" role="tab" aria-controls="best-performers-monthly" aria-selected="false">Monthly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="best-performers-body">
<div class="tab-content" id="bestPerformersContent">
<div class="tab-pane fade show active" id="best-performers-weekly" role="tabpanel" aria-labelledby="best-performers-weekly-tab">
<div class="table-responsive best-performers-scroll">
<table class="table">
<tbody>
<tr>
<td>
<p class="mb-0">MRK:US</p>
<span>Merck & Co Inc</span>
</td>
<td>
+0.65
</td>
<td>
+1.01%
</td>
<td>
<span class="b-p-weekly-chart-1">7/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">BA:US</p>
<span>Boeing Co Inc</span>
</td>
<td>
+1.58
</td>
<td>
+0.97%
</td>
<td>
<span class="b-p-weekly-chart-2">8/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">UTX:US</p>
<span>United Corp</span>
</td>
<td>
+1.03
</td>
<td>
+0.94%
</td>
<td>
<span class="b-p-weekly-chart-3">3/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">AAPL:US</p>
<span>Apple Inc</span>
</td>
<td>
+1.21
</td>
<td>
+0.94%
</td>
<td>
<span class="b-p-weekly-chart-4">2/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">NIKE:US</p>
<span>Nike Inc</span>
</td>
<td>
+0.44
</td>
<td>
+0.84%
</td>
<td>
<span class="b-p-weekly-chart-5">4/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="best-performers-monthly" role="tabpanel" aria-labelledby="best-performers-monthly-tab">
<div class="table-responsive best-performers-scroll">
<table class="table">
<tbody>
<tr>
<td>
<p class="mb-0">MRK:US</p>
<span>Merck & Co Inc</span>
</td>
<td>
+1.65
</td>
<td>
+2.01%
</td>
<td>
<span class="b-p-weekly-chart-6">6/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">BA:US</p>
<span>Boeing Co Inc</span>
</td>
<td>
+2.58
</td>
<td>
+1.57%
</td>
<td>
<span class="b-p-weekly-chart-7">7/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">UTX:US</p>
<span>United Corp</span>
</td>
<td>
+2.13
</td>
<td>
+1.97%
</td>
<td>
<span class="b-p-weekly-chart-8">5/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">AAPL:US</p>
<span>Apple Inc</span>
</td>
<td>
+2.11
</td>
<td>
+2.12%
</td>
<td>
<span class="b-p-weekly-chart-9">7/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">NIKE:US</p>
<span>Nike Inc</span>
</td>
<td>
+1.04
</td>
<td>
+2.00%
</td>
<td>
<span class="b-p-weekly-chart-10">6/10</span>
</td>
<td>
<i class="flaticon-delete"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="worst-performers">
<div class="worst-performers-header">
<div class="row">
<div class="col-md-7 col-sm-7 col-7">
<h6 class="mb-0 mt-2">Worst Performers</h6>
</div>
<div class="col-md-5 col-sm-5 col-5">
<ul class="nav worst-performers-tab nav-pills justify-content-end" id="worstPerformers" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="worst-performers-weekly-tab" data-toggle="pill" href="#worst-performers-weekly" role="tab" aria-controls="worst-performers-weekly" aria-selected="true">Weekly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="worst-performers-monthly-tab" data-toggle="pill" href="#worst-performers-monthly" role="tab" aria-controls="worst-performers-monthly" aria-selected="false">Monthly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="worst-performers-body">
<div class="tab-content" id="worstPerformersContent">
<div class="tab-pane fade show active" id="worst-performers-weekly" role="tabpanel" aria-labelledby="worst-performers-weekly-tab">
<div class="table-responsive worst-performers-scroll1">
<table class="table">
<tbody>
<tr>
<td>
<p class="mb-0">GOGO</p>
<span>Gogo Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 45%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-0.55
</td>
<td>
-1.13%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">FISV</p>
<span>Fiserv Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 73%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.49
</td>
<td>
-1.08%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">NCNA</p>
<span>NuCana plc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 84%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.36
</td>
<td>
-0.84%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">FANH</p>
<span>Fanhua Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 40%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-0.25
</td>
<td>
-0.68%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">INSG</p>
<span>Inseego Corp</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 49%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-0.73
</td>
<td>
-0.66%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane fade" id="worst-performers-monthly" role="tabpanel" aria-labelledby="worst-performers-monthly-tab">
<div class="table-responsive worst-performers-scroll2">
<table class="table">
<tbody>
<tr>
<td>
<p class="mb-0">GOGO</p>
<span>Gogo Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 66%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.60
</td>
<td>
-2.14%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">FISV</p>
<span>Fiserv Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 79%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.00
</td>
<td>
-0.088%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">NCNA</p>
<span>NuCana plc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 67%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-2.99
</td>
<td>
-1.94%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">FANH</p>
<span>Fanhua Inc</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 32%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.55
</td>
<td>
-1.98%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
<tr>
<td>
<p class="mb-0">INSG</p>
<span>Inseego Corp</span>
</td>
<td>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 66%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
-1.73
</td>
<td>
-1.76%
</td>
<td>
<i class="flaticon-close-fill"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-12 layout-spacing">
<div class="widget-content-area top-coins-trends br-4">
<div class="row">
<div class="col-12">
<h3 class="title-heading mb-3">Top Coins Trends</h3>
<p class="text mb-4">Showing ratio between buy and sell of different coins.</p>
</div>
<div class="col-12">
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Coins</th>
<th scope="col" class="text-center">Buy</th>
<th scope="col" class="text-right">Sell</th>
</tr>
</thead>
<tbody>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Bitcoin</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-up"></span></td>
<td class="text-right">70%<span class="caret caret-up"></span></td>
</tr>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Ethereum</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-down"></span></td>
<td class="text-right">80%<span class="caret caret-up"></span></td>
</tr>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Ripple</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-up"></span></td>
<td class="text-right">60%<span class="caret caret-down"></span></td>
</tr>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Eos</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-up"></span></td>
<td class="text-right">65%<span class="caret caret-down"></span></td>
</tr>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Bitcoincash</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-down"></span></td>
<td class="text-right">70%<span class="caret caret-up"></span></td>
</tr>
<tr>
<td class="coin-name">
<div class="d-flex">
<div class=" align-self-center d-m-top-coins-trend mr-1 data-marker"></div>
<span>Tron</span>
</div>
</td>
<td class="text-center">60%<span class="caret caret-up"></span></td>
<td class="text-right">60%<span class="caret caret-down"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content-area investors br-4">
<div class="row">
<div class="col-12">
<h3 class="title-heading mb-3">Investors</h3>
<p class="text mb-4">Showing best investors</p>
</div>
<div class="col-12">
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col" class="text-right">Attachments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="investor-1">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>James Taylor</span>
</div>
</td>
<td class="text-right"><span class="caret caret-up"></span>$74.5 m</td>
</tr>
<tr>
<td class="investor-2">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>Keith Foster</span>
</div>
</td>
<td class="text-right"><span class="caret caret-up"></span>$73.3 m</td>
</tr>
<tr>
<td class="investor-3">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>Neil Lawrence</span>
</div>
</td>
<td class="text-right"><span class="caret caret-down"></span>$65.2 m</td>
</tr>
<tr>
<td class="investor-4">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>Sean Freeman</span>
</div>
</td>
<td class="text-right"><span class="caret caret-down"></span>$62.4 m</td>
</tr>
<tr>
<td class="investor-5">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>Jesse Cory</span>
</div>
</td>
<td class="text-right"><span class="caret caret-up"></span>$72.6 m</td>
</tr>
<tr>
<td class="investor-6">
<div class="d-flex">
<div class=" align-self-center d-m-investor mr-1 data-marker"></div>
<span>Thomas Granger</span>
</div>
</td>
<td class="text-right"><span class="caret caret-down"></span>$61.4 m</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="statbox widget box box-shadow layout-spacing">
<div class="widget-content all-coins">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-12">
<div class="widget-content-area br-4">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<h3 class="title-heading">All coins</h3>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 text-right">
<select class="custom-select mt-1 mb-1">
<option value="1">USD (US Dollar)</option>
<option value="2">Daily</option>
<option value="3">Weekly</option>
<option value="4">Yearly</option>
</select>
<select class="custom-select mt-1 mb-1">
<option value="1">All Currencies</option>
<option value="2">Daily</option>
<option value="3">Weekly</option>
<option value="4">Yearly</option>
</select>
<select class="custom-select mt-1 mb-1">
<option value="1">Hide Real Currencies</option>
<option value="2">Daily</option>
<option value="3">Weekly</option>
<option value="4">Yearly</option>
</select>
</div>
<div class="col-12">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive all-coins-scroll">
<table class="table table-hover">
<thead>
<tr>
<th>Currency</th>
<th class="text-center">Name</th>
<th>Price</th>
<th>Market Cap</th>
<th>24h Volume</th>
<th>Trend 1h</th>
<th>Trend 24h</th>
<th>Trend 7d</th>
<th>Trend 30d</th>
<th class="align-center">30d in USD</th>
</tr>
</thead>
<tbody>
<tr>
<td>BTC</td>
<td class="text-center">
Bitcoin
</td>
<td>11,018.91</td>
<td>185,534,992,948</td>
<td>9,375,030,000</td>
<td class="up-rate">2.21 %</td>
<td class="up-rate">4.88 %</td>
<td class="up-rate">1.21 %</td>
<td class="text-center down-rate">
-18.89 %
</td>
<td class="align-center">
<span id="btc"></span>
</td>
</tr>
<tr>
<td>ETH</td>
<td class="text-center">
Ethereum
</td>
<td>1,001.37</td>
<td>97,315,162,768</td>
<td>3,464,220,000</td>
<td class="up-rate">2.09 %</td>
<td class="up-rate">4.18 %</td>
<td class="up-rate">3.22 %</td>
<td class="text-center up-rate">
40.07 %
</td>
<td class="align-center">
<span id="eth"></span>
</td>
</tr>
<tr>
<td>XRP</td>
<td class="text-center">
Ripple
</td>
<td>1.36</td>
<td>53,081,148,262</td>
<td>2,688,260,000</td>
<td class="up-rate">2.95 %</td>
<td class="up-rate">8.85 %</td>
<td class="up-rate">21.90 %</td>
<td class="text-center up-rate">
39.27 %
</td>
<td class="align-center">
<span id="xrp"></span>
</td>
</tr>
<tr>
<td>BCH</td>
<td class="text-center">
Bitcoincash
</td>
<td>1,636.02</td>
<td>27,798,474,586</td>
<td>576,267,000</td>
<td class="up-rate">2.42 %</td>
<td class="up-rate">4.50 %</td>
<td class="down-rate">-5.07 %</td>
<td class="text-center down-rate">
-18.89 %
</td>
<td class="align-center">
<span id="bch"></span>
</td>
</tr>
<tr>
<td>ADA</td>
<td class="text-center">
Cardano
</td>
<td>0.564829</td>
<td>14,656,235,923</td>
<td>313,047,000</td>
<td class="up-rate">1.98 %</td>
<td class="up-rate">3.32 %</td>
<td class="up-rate">1.60 %</td>
<td class="text-center up-rate">
41.30 %
</td>
<td class="align-center">
<span id="ada"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content-area todo-list h-100 br-4">
<div class="row">
<div class="col-12 todo-title br-4">
<h3 class="title-heading">Recent Task</h3>
</div>
<div class="col-12 pl-0 pr-0">
<div class="table-responsive to-do-scroll">
<table class="table table-hover table-checkable">
<tbody>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-2" checked>
<label class="custom-control-label" for="todo-2"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-3" checked>
<label class="custom-control-label" for="todo-3"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-4">
<label class="custom-control-label" for="todo-4"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-5" checked>
<label class="custom-control-label" for="todo-5"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-6">
<label class="custom-control-label" for="todo-6"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-7">
<label class="custom-control-label" for="todo-7"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-8">
<label class="custom-control-label" for="todo-8"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
<tr>
<td class="form-check-column text-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="todo-9">
<label class="custom-control-label" for="todo-9"></label>
</div>
</td>
<td>
<div class="d-flex">
<div class="mr-3">
<span class="usr-image">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="">
</span>
</div>
<div class="">
<div class="usr-info">
<p class="usr-email">Bit213454axz3@an1</p>
<p class="usr-deal-number">Deal Number</p>
</div>
</div>
</div>
</td>
<td class="align-right">
<p class="usr-btc">0.000345678 BTC</p>
<p class="usr-deal">22.12.2017, 23:33</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content-area p-0 br-4 h-100">
<div class="underline-content buySell br-4 h-100">
<ul class="nav nav-tabs pb-3 br-4 justify-content-center" id="iconTab1" role="tablist">
<li class="nav-item">
<a class="nav-link active buy" id="underline-buy-home-tab" data-toggle="tab" href="#underline-buy-home" role="tab" aria-controls="underline-buy-home" aria-selected="true">Buy</a>
</li>
<li class="nav-item">
<a class="nav-link sell" id="underline-sell-profile-tab" data-toggle="tab" href="#underline-sell-profile" role="tab" aria-controls="underline-sell-profile" aria-selected="false">Sell</a>
</li>
</ul>
<div class="tab-content" id="iconTab1Content">
<div class="tab-pane fade show active" id="underline-buy-home" role="tabpanel" aria-labelledby="underline-buy-home-tab">
<form>
<div class="form-row mb-5">
<div class="col">
<label for="inputState1">Exchange</label>
<select id="inputState1" class="form-control">
<option selected>Binance</option>
<option>BitBay</option>
<option>BitFinex</option>
<option>Kraken</option>
</select>
</div>
<div class="col">
<label for="quantity1">Quantity</label>
<input id="quantity1" type="text" class="form-control" value="6.86984">
</div>
</div>
<div class="form-row mb-5">
<div class="col">
<label for="assets1">Assets</label>
<select id="assets1" class="form-control">
<option selected>Bitcoin</option>
<option>Ethereum</option>
<option>Ripple</option>
<option>Litecoin</option>
<option>Cardano</option>
</select>
</div>
<div class="col">
<label for="currency1">Currency</label>
<select id="currency1" class="form-control">
<option selected>USD</option>
<option>EUR</option>
<option>GBP</option>
<option>AUD</option>
<option>JPY</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="buget1">Budget</label>
<input id="buget1" type="text" class="form-control" value="45.99">
</div>
<div class="col">
<label class="invisible">submit</label>
<input type="submit" class="btn btn-outline-primary btn-block" value="Buy">
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="underline-sell-profile" role="tabpanel" aria-labelledby="underline-sell-profile-tab">
<form>
<div class="form-row mb-5">
<div class="col">
<label for="inputState2">Exchange</label>
<select id="inputState2" class="form-control">
<option selected>Binance</option>
<option>BitBay</option>
<option>BitFinex</option>
<option>Kraken</option>
</select>
</div>
<div class="col">
<label for="quantity2">Quantity</label>
<input id="quantity2" type="text" class="form-control" value="0.36146">
</div>
</div>
<div class="form-row mb-5">
<div class="col">
<label for="assets2">Assets</label>
<select id="assets2" class="form-control">
<option selected>Bitcoin</option>
<option>Ethereum</option>
<option>Ripple</option>
<option>Litecoin</option>
<option>Cardano</option>
</select>
</div>
<div class="col">
<label for="currency2">Currency</label>
<select id="currency2" class="form-control">
<option selected>USD</option>
<option>EUR</option>
<option>GBP</option>
<option>AUD</option>
<option>JPY</option>
</select>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="buget2">Budget</label>
<input id="buget2" type="text" class="form-control" value="76.99">
</div>
<div class="col">
<label class="invisible">submit</label>
<input type="submit" class="btn btn-outline-primary btn-block" value="Sell">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content widget-content-area br-4">
<div class="task">
<div class="row">
<div class="col-md-12 card-top-section">
<div class="d-sm-flex d-block text-center justify-content-between">
<div class="">
<span class="badge badge-default badge-pill">Task Manager</span>
</div>
<div class="meta-date mt-2 d-flex justify-content-center justify-content-sm-start">
<i class="flaticon-calendar mr-2"></i>
<div class="d-flex">
<div id="month"></div>
<div id="day"></div>
<div id="year"></div>
</div>
</div>
</div>
</div>
<div class="col-md-12 card-mid-section">
<div class="d-flex mt-5 mb-3">
<div class="mr-4">
<i class="flaticon-single-circle-tick mt-1"></i>
</div>
<div class="">
<input type="text" class="form-control" placeholder="Input Title">
<div class="form-group mt-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description...."></textarea>
</div>
</div>
</div>
</div>
<div class="col-md-12 card-bottom-section text-center mb-2">
<button class="btn btn-gradient-primary btn-rounded">Add Task</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0 traffic-sources">
<div class="traffic-sources">
<div class="traffic-sources-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h6>Traffic Sources</h6>
</div>
</div>
</div>
<div class="traffic-sources-body">
<div class="table-responsive traffic-sources-scroll mt-4">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Organic</span>
</div>
</td>
<td>
<div id="t-s-organic-chart"></div>
</td>
<td class="text-right">
1700
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Direct</span>
</div>
</td>
<td>
<div id="t-s-direct-chart"></div>
</td>
<td class="text-right">
1560
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Social</span>
</div>
</td>
<td>
<div id="t-s-social-chart"></div>
</td>
<td class="text-right">
1390
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Referral</span>
</div>
</td>
<td>
<div id="t-s-referral-chart"></div>
</td>
<td class="text-right">
1990
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Mail</span>
</div>
</td>
<td>
<div id="t-s-mail-chart"></div>
</td>
<td class="text-right">
1500
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Other</span>
</div>
</td>
<td>
<div id="t-s-other-chart"></div>
</td>
<td class="text-right">
875
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="recent-activity">
<div class="recent-activity-header">
<h6 class="mb-0">Notifications</h6>
</div>
<div class="recent-activity-body">
<div class="table-responsive mt-3">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">
<span class="usr-name">Lara Young</span> Invited to join official meeting.
</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Shaun Park</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 2 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Assigned a new project</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Kristen</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 5 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Invited you to like page.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Thomas Granger</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 35 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="admin-profile">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Completed project.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Angie Lamb</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 30 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-12 text-center pb-4">
<button class="btn btn-primary btn-rounded mt-1">View More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="recent-sales">
<div class="recent-sales-header">
<div class="row">
<div class="col-md-6 col-6">
<h6 class="mb-0">Recent Sales</h6>
</div>
<div class="col-md-6 col-6 text-right">
<i class="flaticon-circle-cross"></i>
</div>
</div>
</div>
<div class="recent-sales-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Order Id</th>
<th>Date</th>
<th class="text-center">Performance</th>
<th class="text-center">Unit</th>
<th class="">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Camera</td>
<td>#0100</td>
<td>23 June</td>
<td class="align-center"><div id="m-a-s-chart-c"></div></td>
<td class="text-center">
<span>1</span>
<br/>
<span>$25.80</span>
</td>
<td>
$51.60
</td>
</tr>
<tr>
<td>Iphone</td>
<td>#0200</td>
<td>22 June</td>
<td class="align-center"><div id="m-a-s-chart-ip"></div> </td>
<td class="text-center">
<span>2</span>
<br/>
<span>$90.50</span>
</td>
<td>
$90.50
</td>
</tr>
<tr>
<td>Headphone</td>
<td>#0300</td>
<td>20 June</td>
<td class="align-center"><div id="m-a-s-chart-h"></div> </td>
<td class="text-center">
<span>3</span>
<br/>
<span>$50.00</span>
</td>
<td>
$150.00
</td>
</tr>
<tr>
<td>Speakers</td>
<td>#0400</td>
<td>18 June</td>
<td class="align-center"><div id="m-a-s-chart-s"></div> </td>
<td class="text-center">
<span>4</span>
<br/>
<span>$43.60</span>
</td>
<td>
$43.60
</td>
</tr>
<tr>
<td>Watch</td>
<td>#0500</td>
<td>15 June</td>
<td class="align-center"><div id="m-a-s-chart-w"></div> </td>
<td class="text-center">
<span>5</span>
<br/>
<span>$49.60</span>
</td>
<td>
$49.60
</td>
</tr>
<tr>
<td>Sunglasses</td>
<td>#0600</td>
<td>12 June</td>
<td class="align-center"><div id="m-a-s-chart-wa"></div> </td>
<td class="text-center">
<span>6</span>
<br/>
<span>$60.35</span>
</td>
<td>
$120.75
</td>
</tr>
</tbody>
</table>
</div>
<div class="r-s-bottom-section text-center">
<a href="javascript:void(0);">View all</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0 pb-xl-0 pb-3">
<div class="chat">
<div class="chat-header">
<div class="row">
<div class="col-md-4">
<h6 class="mb-0">Chat</h6>
</div>
<div class="col-md-8">
<div class="chat-usr-img text-center d-flex justify-content-end">
<div class="mr-3">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0 bs-tooltip">
</div>
<ul class="list-inline badge-collapsed-img mb-0 text-right">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0 bs-tooltip">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="bs-tooltip">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="bs-tooltip">
</li>
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="">+5</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-system">
<div class="chat_window">
<div class="chat-scroll">
<ul class="chat-messages pl-0"></ul>
</div>
<div class="chat-bottom-section clearfix">
<div class="input-group message_input_wrapper w-75 mx-auto">
<input type="text" class="message_input form-control br-left-30" placeholder="Type Here : )" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append mr-2">
<span class="input-group-text br-0"><i class="flaticon-smile-fill"></i></span>
<span class="input-group-text br-right-30 br-0"><i class="flaticon-send-fill"></i></span>
</div>
</div>
</div>
</div>
<div class="message_template d-none">
<div class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="text"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content-area br-4">
<div class="timeline-widget">
<div class="col-md-12">
<p class="heading-title timeline-title"><span>Timeline</span></p>
<section class="cd-horizontal-timeline">
<div class="timeline timeline1">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="16/01/2018" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2018">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2018">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2018">20 May</a></li>
<li><a href="#0" data-date="09/07/2018">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2018">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2018" style="width: 140px;">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2018">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2018">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2019">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2019">3 Mar</a></li>
</ol>
<span class="filling-line" aria-hidden="true"></span>
</div>
</div>
<ul class="cd-timeline-navigation">
<li><a href="#0" class="prev inactive">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul>
</div>
<div class="events-content">
<ol>
<li class="selected" data-date="16/01/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-1"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Horizontal Timeline</h2>
<em class="mb-5">16 January 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="28/02/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-2"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">28 February 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="20/04/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-3"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="20/05/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-4"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="09/07/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-5"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="30/08/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-6"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="15/09/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-7"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="01/11/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-8"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="10/12/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-9"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="19/01/2019">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-10"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2019</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="03/03/2019">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="img-11"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2019</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-7 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="todo-list-advance">
<div class="todo-list-header">
<div class="row">
<div class="col-md-5 col-sm-6 col-10 mb-4 mb-sm-0">
<h5 class="mb-0">To-do list</h5>
</div>
<div class="col-md-7 col-sm-6 col-2 text-right">
<i class="flaticon-close-fill mt-1 remove-todo-close js-collapse"></i>
<i class="flaticon-plus-1 add-task"></i>
</div>
</div>
</div>
<div class="todo-list-body panel-collapse" style="">
<div class="table-responsive mt-4">
<table class="table">
<tbody>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Create new users Profile</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task"></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
</span>
</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input" checked="">
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Meeting with James at 4:50pm</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task mt-1 "></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
</span>
</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Meet Lisa to discuss project details</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task mt-1 "></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
</span>
</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input" checked>
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Conference call with Marketing Manager</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task mt-1 "></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
</span>
</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input" checked>
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Team meet at Starbucks</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task mt-1 "></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
</span>
</span>
</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-success w-100">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator"></span>
<span class="d-sm-flex d-block todo-item w-100 justify-content-between">
<span class="align-self-center">
<span class="todo-text ml-4 mt-1">Collect documents from Sara</span>
<i class="flaticon-edit-5 task-edit ml-3"></i>
<span class="ml-1 flaticon-close-fill remove-task mt-1 "></span>
</span>
<span class="d-inline-block">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid ml-sm-0 ml-4">
</span>
</span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="todo-list-bottom text-center">
<button class="btn btn-default"><i class="flaticon-arrow-left"></i></button>
<span class="ml-3">View all</span>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 col-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="usr-list">
<div class="usr-list-title">
<h6 class="mb-0">User List</h6>
</div>
<div class="usr-list-body">
<div class="table-responsive mt-4">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Andy King</h6>
<p>Developer</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Sonia Shaw</h6>
<p>UX Designer</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Jesse Cory</h6>
<p>Team Leader</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 t-not-solved bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Angie Lamb</h6>
<p>Developer</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Amy Diaz</h6>
<p>Writer</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Sean Freeman</h6>
<p>Editor</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-header">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-3" alt="admin-profile">
</div>
<div class="f-body align-self-center">
<h6>Marlene Wood</h6>
<p>Trainer</p>
</div>
</div>
</td>
<td class="action text-right">
<i class="flaticon-fill-tick mb-2 mr-2 t-solved bs-tooltip" data-placement="top" title="" data-original-title="Accept"></i>
<i class="flaticon-close-fill mb-2 mr-1 bs-tooltip" data-placement="top" title="" data-original-title="Remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="u-l-add-new text-center">
<button class="btn btn-primary">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="news-feeds">
<div class="news-feeds-header">
<div class="row">
<div class="col-md-7 col-sm-7 col-7 mb-4 mb-sm-0">
<h6 class="mb-0">News Feeds</h6>
</div>
<div class="col-md-5 col-sm-5 col-5 text-right">
<div class="">View all</div>
</div>
</div>
</div>
<div class="news-feeds-body">
<div class="table-responsive mt-3">
<table class="table">
<tbody>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger mb-0">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator mt-2"></span>
<span class="d-flex justify-content-center ml-2">
<span class="news-feeds-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-icon mr-4">
<i class="bg-light-primary flaticon-heart-1"></i>
</span>
<span class="media-body">
<span class="news-feeds-text"><span class="user-name">Alan Green</span> accepted your invitation</span>
<span class="meta-time d-block mb-0">5 min ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-cancel-circle float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger mb-0">
<input type="checkbox" class="new-control-input" checked="">
<span class="new-control-indicator mt-2"></span>
<span class="d-flex justify-content-center ml-2">
<span class="news-feeds-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-icon mr-4">
<i class="bg-light-success flaticon-chat-line-1"></i>
</span>
<span class="media-body">
<span class="news-feeds-text"><span class="user-name">Justin</span> send you a <span class="action">Message</span></span>
<span class="meta-time d-block mb-0">14 min ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-cancel-circle float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger mb-0">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator mt-2"></span>
<span class="d-flex justify-content-center ml-2">
<span class="news-feeds-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-icon mr-4">
<i class="bg-light-info flaticon-calendar"></i>
</span>
<span class="media-body">
<span class="news-feeds-text"><span class="user-name">Amy Diaz</span> accepted your <span class="action">Schedule</span></span>
<span class="meta-time d-block mb-0">5 min ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-cancel-circle float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger mb-0">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator mt-2"></span>
<span class="d-flex justify-content-center ml-2">
<span class="news-feeds-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-icon mr-4">
<i class="bg-light-warning flaticon-like-3"></i>
</span>
<span class="media-body">
<span class="news-feeds-text"><span class="user-name">Kelly Young</span> send you a <span class="action">Request</span></span>
<span class="meta-time d-block mb-0">1 hour ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-cancel-circle float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
<tr>
<td>
<div class="n-chk">
<label class="new-control new-checkbox checkbox-danger mb-0">
<input type="checkbox" class="new-control-input">
<span class="new-control-indicator mt-2"></span>
<span class="d-flex justify-content-center ml-2">
<span class="news-feeds-item ml-3">
<span class="media d-sm-flex d-block">
<span class="usr-icon mr-4">
<i class="bg-light-secondary flaticon-view"></i>
</span>
<span class="media-body">
<span class="news-feeds-text"><span class="user-name">Oscar Garner </span>view your profile</span>
<span class="meta-time d-block mb-0">1 day ago</span>
</span>
</span>
</span>
</span>
</label>
</div>
</td>
<td><i class="flaticon-cancel-circle float-right task-delete bs-tooltip" data-original-title="Delete"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-12 layout-spacing">
<div class="widget-content widget-content-area p-0 br-4">
<div class="browser-statistics">
<div class="browser-statistics-header">
<div class="row">
<div class="col-md-12 col-sm-12 col-12 mb-4 mb-sm-0">
<h6 class="mb-0">Browser Statistics</h6>
</div>
</div>
</div>
<div class="browser-statistics-body">
<div class="table-responsive mt-2">
<table class="table">
<tbody>
<tr>
<td>
<div class="pro-name mb-2">Chrome</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-primary" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">725</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Mozilla</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-dark" role="progressbar" style="width: 62%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">220</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Safari</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-info" role="progressbar" style="width: 57%" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">35</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Internet Explorer</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-success" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">375</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Edge</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-primary" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">25</p>
</td>
</tr>
<tr>
<td>
<div class="pro-name mb-2">Opera</div>
<div class="d-flex justify-content-between">
<div class="progress progress-md w-100">
<div class="progress-bar bg-light-secondary" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
<td class="action text-right">
<p class="v-amount mb-0 mt-4 mr-4">450</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0">
<div class="chat">
<div class="chat-header">
<div class="row">
<div class="col-md-7">
<h6 class="mb-0">Chat</h6>
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-usr-img text-center">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="img-fluid">
</div>
<div class="chat-system">
<div class="chat_window">
<div class="chat-scroll">
<ul class="chat-messages pl-0"></ul>
</div>
<div class="chat-bottom-section clearfix">
<div class="input-group message_input_wrapper">
<input type="text" class="message_input form-control" placeholder="Type Here : )" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text br-0"><i class="flaticon-send-fill-1"></i></span>
</div>
</div>
</div>
</div>
<div class="message_template d-none">
<div class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="text"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CONTENT PART -->
</div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN FOOTER -->
<footer class="footer-section theme-footer">
<div class="footer-section-1 sidebar-theme">
</div>
<div class="footer-section-2 container-fluid">
<div class="row">
<div id="toggle-grid" class="col-xl-7 col-md-6 col-sm-6 col-12 text-sm-left text-center">
<ul class="list-inline links ml-sm-5">
<li class="list-inline-item">
<a target="_blank" href="https://themeforest.net/item/equation-responsive-admin-dashboard-template/23191987">Buy</a>
</li>
</ul>
</div>
<div class="col-xl-5 col-md-6 col-sm-6 col-12">
<ul class="list-inline mb-0 d-flex justify-content-sm-end justify-content-center mr-sm-3 ml-sm-0 mx-3">
<li class="list-inline-item mr-3">
<p class="bottom-footer">© 2019 <a target="_blank" href="https://designreset.com/equation">Equation Admin Theme</a></p>
</li>
<li class="list-inline-item align-self-center">
<div class="scrollTop"><i class="flaticon-up-arrow-fill-1"></i></div>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- BEGIN PROFILE SIDEBAR -->
<aside class="profile-sidebar text-center">
<div class="profile-content profile-content-scroll">
<div class="usr-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<p class="user-name mt-4 mb-4">Vincent Carpenter</p>
<div class="">
<div class="accordion" id="user-stats">
<div class="card">
<div class="card-header pb-4 mb-4" id="status">
<h6 class="mb-0" data-toggle="collapse" data-target="#user-status" aria-expanded="true" aria-controls="user-status"><i class="flaticon-view-3 mr-2"></i> Status <i class="flaticon-down-arrow ml-2"></i> </h6>
</div>
<div id="user-status" class="collapse show" aria-labelledby="status" data-parent="#user-stats">
<div class="card-body text-left">
<ul class="list-unstyled pb-4">
<li class="status-online"><a href="javascript:void(0);">Online</a></li>
<li class="status-away"><a href="javascript:void(0);">Away</a></li>
<li class="status-no-disturb"><a href="javascript:void(0);">Not Disturb</a></li>
<li class="status-invisible"><a href="javascript:void(0);">Invisible</a></li>
<li class="status-offline"><a href="javascript:void(0);">Offline</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="user-links text-left">
<ul class="list-unstyled">
<li><a href="apps_mailbox.html"><i class="flaticon-mail-22"></i> Inbox</a></li>
<li><a href="user_profile.html"><i class="flaticon-user-11"></i> My Profile</a></li>
<li><a href="user_login_1.html"><i class="flaticon-power-off"></i> Logout</a></li>
</ul>
</div>
</div>
</aside>
<!-- BEGIN PROFILE SIDEBAR -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="assets/js/loader.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="plugins/blockui/jquery.blockUI.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY SCRIPTS -->
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
<script src="plugins/charts/sparklines/jquery.sparkline.min.js"></script>
<script src="plugins/dropzone/dropzone.min.js"></script>
<script src="assets/js/modules/modules-table-and-event.js"></script>
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
</body>
</html>