<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>MERMS-[All Health Center Agege]</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta content="comprehensive health management system" name="description" />
    <meta content="Fluxtra LLC" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- app favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.ico">
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <!-- plugin stylesheets -->
    <link rel="stylesheet" type="text/css" href="/assets/css/vendors.css" />
    <!-- app style -->
    <link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- begin app -->
    <div class="app">
        <!-- begin app-wrap -->
        <div class="app-wrap">
            <!-- begin pre-loader -->
            <div class="loader">
                <div class="h-100 d-flex justify-content-center">
                    <div class="align-self-center">
                        <img src="assets/img/loader/loader.svg" alt="loader">
                    </div>
                </div>
            </div>
            <!-- end pre-loader -->
            <!-- begin app-header -->
            <header class="app-header top-bar">
                <!-- begin navbar -->
                <nav class="navbar navbar-expand-md">

                    <!-- begin navbar-header -->
                    <div class="navbar-header d-flex align-items-center">
                        <a href="javascript:void:(0)" class="mobile-toggle"><i class="ti ti-align-right"></i></a>
                        <a class="navbar-brand" href="index.html">
                            <img src="assets/img/logo-light.png" class="img-fluid logo-desktop" alt="logo" />
                            <img src="assets/img/logo-icon.png" class="img-fluid logo-mobile" alt="logo" />
                        </a>
                    </div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="ti ti-align-left"></i>
                    </button>
                    <!-- end navbar-header -->
                    <!-- begin navigation -->
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <div class="navigation d-flex">
                            <ul class="navbar-nav nav-left">
                                <li class="nav-item">
                                    <a href="javascript:void(0)" class="nav-link sidebar-toggle">
                                        <i class="ti ti-align-right"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  " href="javascript:void(0)" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mega Menu
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                    <div class="dropdown-menu mega-menu animated fadeIn" aria-labelledby="navbarDropdown">
                                        <div class="row no-gutters">
                                            <div class="col-sm-2 p-20">
                                                <h4>UI Kit</h4>
                                                <ul>
                                                    <li class="nav-link">
                                                        <a href="ui-alerts.html">Alerts</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-button.html">Buttons</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-cards.html">Cards</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-carousel.html">Carousel</a>
                                                    </li>

                                                    <li class="nav-link">
                                                        <a href="ui-dropdowns.html">Dropdowns</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-list-group.html">List Group</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-modals.html">Modals</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-progressbars.html">Progress Bars</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="ui-tabs.html">Tabs</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-2 p-20">
                                                <h4>Pages</h4>
                                                <ul>
                                                    <li class="nav-link">
                                                        <a href="page-account-settings.html">Account Settings</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-clients.html">Clients</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-contacts.html">Contacts</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-gallery.html">Gallery</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-pricing.html">Pricing</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-task-list.html">Task List</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-404.html">404</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-500.html">500</a>
                                                    </li>
                                                    <li class="nav-link">
                                                        <a href="page-coming-soon.html">Coming Soon</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-4 p-20">
                                                <h4>Contact Us</h4>
                                                <div>
                                                    <form>
                                                        <div class="form-group">
                                                            <input type="text" class="form-control" id="Password1" placeholder="Enter Name">
                                                        </div>
                                                        <div class="form-group">
                                                            <input type="email" class="form-control" id="Email1" placeholder="Enter Email">
                                                        </div>
                                                        <div class="form-group">
                                                            <textarea class="form-control" placeholder="Message" id="Textarea1" rows="3"></textarea>
                                                        </div>
                                                        <button type="submit" class="btn btn-primary text-uppercase">Submit</button>
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="chart-wrap">
                                                    <div class="p-20">
                                                        <h4 class="mb-1">Page Views</h4>
                                                        <p>Daily page visitors</p>
                                                        <h2 class="text-primary font-xxl mt-2">80+</h2>
                                                    </div>
                                                    <div class="apexchart-wrapper">
                                                        <div id="pageview"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a href="javascript:void(0)" class="nav-link " id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Drop Down
                                        <i class="fa fa-angle-down"></i>
                                    </a>
                                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item nav-link" href="javascript:void(0)">Action</a>
                                        <a class="dropdown-item nav-link" href="javascript:void(0)">Another action</a>
                                        <a class="dropdown-item nav-link" href="javascript:void(0)">Something else here</a>
                                    </div>
                                </li>
                                <li class="nav-item full-screen d-none d-lg-block" id="btnFullscreen">
                                    <a href="javascript:void(0)" class="nav-link expand">
                                        <i class="icon-size-fullscreen"></i>
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav nav-right ml-auto">
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="ti ti-email"></i>
                                    </a>
                                    <div class="dropdown-menu extended animated fadeIn" aria-labelledby="navbarDropdown">
                                        <ul>
                                            <li class="dropdown-header bg-gradient p-4 text-white text-left">Messages
                                                <label class="label label-info label-round">6</label>
                                                <a href="#" class="float-right btn btn-square btn-inverse-light btn-xs m-0">
                                                    <span class="font-13"> Mark all as read</span></a>
                                            </li>
                                            <li class="dropdown-body">
                                                <ul class="scrollbar scroll_dark max-h-240">
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/03.jpg" alt="user3">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Brianing Leyon</p>
                                                                    <small>You will sail along until you...</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/01.jpg" alt="user">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Jimmyimg Leyon</p>
                                                                    <small>Okay</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/02.jpg" alt="user2">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Brainjon Leyon</p>
                                                                    <small>So, make the decision...</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/04.jpg" alt="user4">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Smithmin Leyon</p>
                                                                    <small>Thanks</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/05.jpg" alt="user5">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Jennyns Leyon</p>
                                                                    <small>How are you</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <img class="img-fluid" src="assets/img/avtar/06.jpg" alt="user6">
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Demian Leyon</p>
                                                                    <small>I like your themes</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown-footer">
                                                <a class="font-13" href="javascript:void(0)"> View All messages </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fe fe-bell"></i>
                                        <span class="notify">
                                                    <span class="blink"></span>
                                        <span class="dot"></span>
                                        </span>
                                    </a>
                                    <div class="dropdown-menu extended animated fadeIn" aria-labelledby="navbarDropdown">
                                        <ul>
                                            <li class="dropdown-header bg-gradient p-4 text-white text-left">Notifications
                                                <a href="#" class="float-right btn btn-square btn-inverse-light btn-xs m-0">
                                                    <span class="font-13"> Clear all</span></a>
                                            </li>
                                            <li class="dropdown-body min-h-240 nicescroll">
                                                <ul class="scrollbar scroll_dark max-h-240">
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <div class="bg-type bg-type-md">
                                                                        <span>HY</span>
                                                                    </div>
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">New registered user</p>
                                                                    <small>Just now</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <div class="bg-type bg-type-md bg-success">
                                                                        <span>GM</span>
                                                                    </div>
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">New invoice received</p>
                                                                    <small>22 min</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <div class="bg-type bg-type-md bg-danger">
                                                                        <span>FR</span>
                                                                    </div>
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Server error report</p>
                                                                    <small>7 min</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <div class="bg-type bg-type-md bg-info">
                                                                        <span>HT</span>
                                                                    </div>
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Database report</p>
                                                                    <small>1 day</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)">
                                                            <div class="notification d-flex flex-row align-items-center">
                                                                <div class="notify-icon bg-img align-self-center">
                                                                    <div class="bg-type bg-type-md">
                                                                        <span>DE</span>
                                                                    </div>
                                                                </div>
                                                                <div class="notify-message">
                                                                    <p class="font-weight-bold">Order confirmation</p>
                                                                    <small>2 day</small>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="dropdown-footer">
                                                <a class="font-13" href="javascript:void(0)"> View All Notifications
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link search" href="javascript:void(0)">
                                        <i class="ti ti-search"></i>
                                    </a>
                                    <div class="search-wrapper">
                                        <div class="close-btn">
                                            <i class="ti ti-close"></i>
                                        </div>
                                        <div class="search-content">
                                            <form>
                                                <div class="form-group">
                                                    <i class="ti ti-search magnifier"></i>
                                                    <input type="text" class="form-control autocomplete" placeholder="Search Here" id="autocomplete-ajax" autofocus="autofocus">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </li>
                                <li class="nav-item dropdown user-profile">
                                    <a href="javascript:void(0)" class="nav-link dropdown-toggle " id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img src="assets/img/avtar/02.jpg" alt="avtar-img">
                                        <span class="bg-success user-status"></span>
                                    </a>
                                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdown">
                                        <div class="bg-gradient px-4 py-3">
                                            <div class="d-flex align-items-center justify-content-between">
                                                <div class="mr-1">
                                                    <h4 class="text-white mb-0">Alice Williams</h4>
                                                    <small class="text-white">Henry@example.com</small>
                                                </div>
                                                <a href="#" class="text-white font-20 tooltip-wrapper" data-toggle="tooltip" data-placement="top" title="" data-original-title="Logout"> <i
                                                                class="zmdi zmdi-power"></i></a>
                                            </div>
                                        </div>
                                        <div class="p-4">
                                            <a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
                                                <i class="fa fa-user pr-2 text-success"></i> Profile</a>
                                            <a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
                                                <i class="fa fa-envelope pr-2 text-primary"></i> Inbox
                                                <span class="badge badge-primary ml-auto">6</span>
                                            </a>
                                            <a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
                                                <i class=" ti ti-settings pr-2 text-info"></i> Settings
                                            </a>
                                            <a class="dropdown-item d-flex nav-link" href="javascript:void(0)">
                                                <i class="fa fa-compass pr-2 text-warning"></i> Need help?</a>
                                            <div class="row mt-2">
                                                <div class="col">
                                                    <a class="bg-light p-3 text-center d-block" href="#">
                                                        <i class="fe fe-mail font-20 text-primary"></i>
                                                        <span class="d-block font-13 mt-2">My messages</span>
                                                    </a>
                                                </div>
                                                <div class="col">
                                                    <a class="bg-light p-3 text-center d-block" href="#">
                                                        <i class="fe fe-plus font-20 text-primary"></i>
                                                        <span class="d-block font-13 mt-2">Compose new</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- end navigation -->
                </nav>
                <!-- end navbar -->
            </header>
            <!-- end app-header -->
            <!-- begin app-container -->
            <div class="app-container">
                <!-- begin app-nabar -->
                <aside class="app-navbar">
                    <!-- begin sidebar-nav -->
                    <div class="sidebar-nav scrollbar scroll_dark">
                        <ul class="metismenu " id="sidebarNav">
                            <li class="nav-static-title">Personal</li>
                            <li class="active">
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false">
                                    <i class="nav-icon ti ti-rocket"></i>
                                    <span class="nav-title">Dashboards</span>
                                    <span class="nav-label label label-danger">9</span>
                                </a>
                                <ul aria-expanded="false">
                                    <li> <a href='/dash/'>Practice</a> </li>
                                    <li class="active"> <a href='/practice/calndar'>Calendar</a> </li>
                                    <li> <a href='/practice/patients'>Patients</a> </li>
                                </ul>
                            </li>
                            <li><a href="app-chat.html" aria-expanded="false"><i class="nav-icon ti ti-comment"></i><span class="nav-title">Chat</span></a> </li>
                            <li><a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-calendar"></i><span class="nav-title">Calendar</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href='calendar-full.html'>Full Calendar</a> </li>
                                    <li> <a href='calendar-list.html'>Calendar List</a> </li>
                                </ul>
                            </li>
                            <li><a href="mail-inbox.html" aria-expanded="false"><i class="nav-icon ti ti-email"></i><span class="nav-title">Mail</span></a> </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-bag"></i> <span class="nav-title">UI Kit</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="ui-alerts.html">Alerts</a> </li>
                                    <li> <a href="ui-accordions.html">Accordions</a> </li>
                                    <li> <a class="has-arrow" href="javascript: void(0);">Buttons</a>
                                        <ul aria-expanded="false">
                                            <li> <a href="ui-button.html">Default Buttons</a> </li>
                                            <li> <a href="ui-button-icon.html">Icon Buttons</a> </li>
                                            <li> <a href="ui-button-block.html">Block Buttons</a> </li>
                                            <li> <a href="ui-button-social.html">Social Buttons</a> </li>
                                            <li> <a href="ui-button-groups.html">Group Buttons</a> </li>
                                        </ul>
                                    </li>
                                    <li> <a href="ui-badges.html">Badges</a> </li>
                                    <li> <a href="ui-cards.html">Cards</a> </li>
                                    <li> <a href="ui-carousel.html">Carousel</a> </li>
                                    <li> <a href="ui-dropdowns.html">Dropdowns</a> </li>

                                    <li> <a href="ui-grid.html">Grid</a> </li>
                                    <li> <a href="ui-list-group.html">List Group</a> </li>
                                    <li> <a href="ui-lightbox.html">Light Box</a> </li>
                                    <li> <a href="ui-modals.html">Modals</a> </li>
                                    <li> <a href="ui-media.html">Media</a> </li>
                                    <li> <a href="ui-nestable-list.html">Nestable List</a> </li>
                                    <li> <a href="ui-pagination.html">Pagination</a> </li>
                                    <li> <a href="ui-progressbars.html">Progress Bars</a> </li>

                                    <li> <a href="ui-sweet-alert.html">Sweet Alert</a> </li>
                                    <li> <a href="ui-tabs.html">Tabs</a> </li>
                                    <li> <a href="ui-nav.html">Nav</a> </li>
                                    <li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li>
                                    <li> <a href="ui-typography.html">Typography</a> </li>
                                    <li> <a href="ui-toastr.html">Toastr</a> </li>
                                    <li> <a href="ui-video.html">Video</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-info"></i><span class="nav-title">Icons</span> </a>
                                <ul aria-expanded="false">
                                    <li> <a href="icons-cryptocurrency.html">Cryptocurrency Icons</a> </li>
                                    <li> <a href="icons-drip.html">Drip Icons</a> </li>
                                    <li> <a href="icons-dash.html">Dash Icons</a> </li>
                                    <li> <a href="icons-feather.html">Feather Icons</a> </li>
                                    <li> <a href="icons-fontawesome.html">Font Awesome</a> </li>
                                    <li> <a href="icons-ion.html">Ion Icons</a> </li>
                                    <li> <a href="icons-weather.html">Weather Icons</a> </li>
                                    <li> <a href="icons-material.html">Material Icons</a> </li>
                                    <li> <a href="icons-themify.html">Themify Icons</a> </li>
                                </ul>
                            </li>
                            <li class="nav-static-title">Widgets, Tables & Layouts</li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-settings"></i> <span class="nav-title">Widgets</span> <span class="nav-label label label-success">New</span> </a>
                                <ul aria-expanded="false">
                                    <li> <a href="widget-chart.html">Chart Widget</a> </li>

                                    <li> <a href="widget-list.html">List Widget</a> </li>

                                    <li> <a href="widget-social.html">Social Widget</a> </li>

                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout-tab-window"></i><span class="nav-title">Tables</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="tables-basic.html">Basic Table</a> </li>
                                    <li> <a href="tables-color.html">Color Table </a> </li>
                                    <li> <a href="tables-datatable.html">Data Table</a> </li>
                                    <li> <a href="tables-editable.html">Editable Table</a> </li>
                                    <li> <a href="tables-export.html">Export Table</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layout"></i> <span class="nav-title">Layouts</span></a>
                                <ul aria-expanded="false">
                                    <li><a href="layout-mini.html">Sidebar Mini</a></li>

                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-pie-chart"></i><span class="nav-title">Charts</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="chart-apex.html">Apex Chart</a> </li>
                                    <li> <a href="chart-flot.html">Flot Chart</a> </li>
                                    <li> <a href="chart-morris.html">Morris Chart</a> </li>
                                    <li> <a href="chart-chartist.html">Chartist Charts</a> </li>
                                    <li> <a href="chart-chartjs.html">Chartjs Chart</a> </li>
                                    <li> <a href="chart-c3.html">C3 Chart</a> </li>
                                    <li> <a href="chart-sparkline.html">Sparkline Chart</a> </li>
                                    <li> <a href="chart-knob.html">Knob Chart</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"> <i class="nav-icon ti ti-pencil-alt"></i> <span class="nav-title">Forms</span> </a>
                                <ul aria-expanded="false">
                                    <li> <a href="form-autonumeric.html">Autonumeric</a> </li>
                                    <li> <a href="form-editors.html">Editors</a> </li>
                                    <li> <a href="form-elements.html">Elements</a> </li>
                                    <li> <a href="form-file-upload.html">Drop Zone</a> </li>
                                    <li> <a href="form-input-groups.html">Input Groups</a> </li>
                                    <li> <a href="form-inputmask.html">Input Masks</a> </li>
                                    <li> <a href="form-layouts.html">Forms Layouts</a> </li>
                                    <li> <a href="form-listbox.html">Listbox</a> </li>
                                    <li> <a href="form-pickers.html">Pickers</a> </li>
                                    <li> <a href="form-range-slider.html">Range Slider</a> </li>
                                    <li> <a href="form-selects.html">Selects</a> </li>
                                    <li> <a href="form-switchers.html">Switchers</a> </li>
                                    <li> <a href="form-validation.html">Validation</a> </li>
                                </ul>
                            </li>
                            <li class="nav-static-title">Extra Components</li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-map-alt"></i><span class="nav-title">Maps</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="maps-google.html">Google Maps</a> </li>
                                    <li> <a href="maps-vector.html">Vector Maps</a> </li>
                                    <li> <a href="maps-mapael.html">Mapael Maps</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-layers"></i><span class="nav-title">Pages</span><span class="nav-label label label-primary">12</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="page-account-settings.html">Account Settings</a> </li>
                                    <li> <a href="page-clients.html">Clients</a> </li>
                                    <li> <a href="page-contacts.html">Contacts</a> </li>
                                    <li> <a href="page-employees.html">Employees</a> </li>
                                    <li> <a href="page-faq.html">FAQ</a> </li>
                                    <li> <a href="page-file-manager.html">File Manager</a> </li>
                                    <li> <a href="page-gallery.html">Gallery</a> </li>

                                    <li> <a href="page-pricing.html">Pricing</a> </li>
                                    <li> <a href="page-task-list.html">Task List</a> </li>
                                    <li> <a href="page-404.html">404</a> </li>
                                    <li> <a href="page-500.html">500</a> </li>
                                    <li> <a href="page-coming-soon.html">Coming Soon</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-key"></i><span class="nav-title">Auth</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="auth-login.html">Login</a> </li>
                                    <li> <a href="auth-register.html">Register</a> </li>
                                    <li> <a href="auth-lockscreen.html">Lock Screen</a> </li>
                                </ul>
                            </li>
                            <li>
                                <a class="has-arrow" href="javascript:void(0)" aria-expanded="false"><i class="nav-icon ti ti-list"></i><span class="nav-title">Multi Level</span></a>
                                <ul aria-expanded="false">
                                    <li> <a href="javascript: void(0);">Level 1.1</a> </li>
                                    <li class="scoop-hasmenu">
                                        <a class="has-arrow" href="javascript: void(0);">Level 1.2</a>
                                        <ul aria-expanded="false">
                                            <li> <a href="javascript: void(0);">Level 2.1</a> </li>
                                            <li> <a href="javascript: void(0);">Level 2.2</a> </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="sidebar-banner p-4 bg-gradient text-center m-3 d-block rounded">
                                <h5 class="text-white mb-1">Mentor admin</h5>
                                <p class="font-13 text-white line-20">Multipurpose Bootstrap 4 Admin Template</p>
                                <a class="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0" href="#"> Buy now</a>
                            </li>
                        </ul>
                    </div>
                    <!-- end sidebar-nav -->
                </aside>
                <!-- end app-navbar -->
                <!-- begin app-main -->
                <div class="app-main" id="main">
                    <!-- begin container-fluid -->
                    <div class="container-fluid">
                        <!-- begin row -->
                        <div class="row">
                            <div class="col-md-12 m-b-30">
                                <!-- begin page title -->
                                <div class="d-block d-sm-flex flex-nowrap align-items-center">
                                    <div class="page-title mb-2 mb-sm-0">
                                        <h1>Ecommerce</h1>
                                    </div>
                                    <div class="ml-auto d-flex align-items-center">
                                        <nav>
                                            <ol class="breadcrumb p-0 m-b-0">
                                                <li class="breadcrumb-item">
                                                    <a href="index.html"><i class="ti ti-home"></i></a>
                                                </li>
                                                <li class="breadcrumb-item">
                                                    Dashboard
                                                </li>
                                                <li class="breadcrumb-item active text-primary" aria-current="page">Ecommerce</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <!-- end page title -->
                            </div>
                        </div>
                        <!-- end row -->
                        <!-- begin row -->
                        <div class="row">
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statistics ecommerce-contant overflow-h">
                                    <div class="card-body p-0">
                                        <div class="d-flex m-b-0 ecommerce-contant-text h-100">
                                            <div class="w-100">
                                                <div class="row p-3">
                                                    <div class="col">
                                                        <h3 class="mb-0">$65,456</h3>
                                                        <small class="d-block">Last 6 months</small>
                                                    </div>
                                                    <div class="col text-right">
                                                        <h5 class="text-muted mb-0">Revenue</h5>
                                                        <strong class="text-danger m-t-5"><i class="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
                                                    </div>
                                                </div>
                                                <div class="apexchart-wrapper">
                                                    <div id="ecommercedemo3" class="chart-fit"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statistics ecommerce-contant overflow-h">
                                    <div class="card-body p-0">
                                        <div class="d-flex ecommerce-contant-text m-b-0 h-100">
                                            <div class="w-100">
                                                <div class="row p-3">
                                                    <div class="col">
                                                        <h3 class="mb-0">52%</h3>
                                                        <small class="d-block">Past 12 hours</small>
                                                    </div>
                                                    <div class="col text-right">
                                                        <h5 class="text-muted mb-0">Conversion Rate</h5>
                                                        <strong class="text-primary m-t-5"><i class="zmdi zmdi-long-arrow-up font-weight-bold"></i> 5.35%</strong>
                                                    </div>
                                                </div>
                                                <div class="apexchart-wrapper">
                                                    <div id="ecommercedemo1" class="chart-fit"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statistics ecommerce-contant overflow-h">
                                    <div class="card-body p-0">
                                        <div class="d-flex m-b-0 ecommerce-contant-text h-100">
                                            <div class="w-100">
                                                <div class="w-100">
                                                    <div class="row p-3">
                                                        <div class="col">
                                                            <h3 class="mb-0">605</h3>
                                                            <small class="d-block">Last 90 days</small>
                                                        </div>
                                                        <div class="col text-right">
                                                            <h5 class="text-muted mb-0">Transactions</h5>
                                                            <strong class="text-orange m-t-5"><i class="zmdi zmdi-long-arrow-up font-weight-bold"></i> 4.65%</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="apexchart-wrapper">
                                                    <div id="ecommercedemo2" class="chart-fit"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xxl-3">
                                <div class="card card-statistics ecommerce-contant overflow-h">
                                    <div class="card-body p-0">
                                        <div class="d-flex m-b-0 ecommerce-contant-text h-100">
                                            <div class="w-100">
                                                <div class="row p-3">
                                                    <div class="col">
                                                        <h3 class="mb-0">5,687</h3>
                                                        <small class="d-block">Last 3 months</small>
                                                    </div>
                                                    <div class="col text-right">
                                                        <h5 class="text-muted mb-0">Purchases</h5>
                                                        <strong class="text-success m-t-5"><i class="zmdi zmdi-long-arrow-up font-weight-bold"></i> 9.89%</strong>
                                                    </div>
                                                </div>
                                                <div class="apexchart-wrapper">
                                                    <div id="ecommercedemo4" class="chart-fit"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xxl-8 m-b-30">
                                <div class="card card-statistics h-100 mb-0">
                                    <div class="card-header d-flex align-items-center justify-content-between">
                                        <div class="card-heading">
                                            <h4 class="card-title">Top selling products</h4>
                                        </div>
                                        <div class="dropdown">
                                            <a class="btn btn-xs" href="#!">Export <i class="zmdi zmdi-download pl-1"></i> </a>
                                        </div>
                                    </div>
                                    <div class="card-body scrollbar scroll_dark pt-0" style="max-height: 350px;">
                                        <div class="datatable-wrapper table-responsive">
                                            <table id="datatable" class="table table-borderless table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Name</th>
                                                        <th>Price</th>
                                                        <th>In stock</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Cold Shoulder Bling Dress</td>
                                                        <td>$65.342</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>PlayStation 4 Pro 1TB Console</td>
                                                        <td>$47.655</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 36%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Extra Fine Wool Jumpers</td>
                                                        <td>$56.479</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-danger-inverse">Canceled</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Long Sleeve Bow Top</td>
                                                        <td>$04.786</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>Shine Stripe Long Sleeve Ruffle</td>
                                                        <td>$23.456</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>6</td>
                                                        <td>Long Sleeve Micro Thermal Shirt</td>
                                                        <td>$65.598</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-info-inverse">info</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>7</td>
                                                        <td>Standard Fit Bomber Sweater</td>
                                                        <td>$87.659</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-warning-inverse">Warning</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>8</td>
                                                        <td>Standard Fit Crew T-Shirt</td>
                                                        <td>$32.466</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>9</td>
                                                        <td>Standard Fit Short Sleeve V-Neck</td>
                                                        <td>$03.544</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>10</td>
                                                        <td>Sanus Classic Small Full Motion Wall</td>
                                                        <td>$14.489</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>11</td>
                                                        <td>Jena Gaines</td>
                                                        <td>$78.654</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>12</td>
                                                        <td>Quinn Flynn</td>
                                                        <td>$23.486</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 96%;" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>13</td>
                                                        <td>Charde Marshall</td>
                                                        <td>$65.453</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 74%;" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>14</td>
                                                        <td>Haley Kennedy</td>
                                                        <td>$78.645</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 62%;" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>15</td>
                                                        <td>Tatyana Fitzpatrick</td>
                                                        <td>$65.342</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>16</td>
                                                        <td>Michael Silva</td>
                                                        <td>$07.456</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>17</td>
                                                        <td>Paul Byrd</td>
                                                        <td>$36.478</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 36%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>18</td>
                                                        <td>Gloria Little</td>
                                                        <td>$84.798</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>19</td>
                                                        <td>Bradley Greer</td>
                                                        <td>$12.356</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>20</td>
                                                        <td>Dai Rios</td>
                                                        <td>$45.655</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>21</td>
                                                        <td>Jenette Caldwell</td>
                                                        <td>$47.586</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>22</td>
                                                        <td>Yuri Berry</td>
                                                        <td>$36.756</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 63%;" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>23</td>
                                                        <td>Caesar Vance</td>
                                                        <td>$78.659</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 96%;" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>24</td>
                                                        <td>Doris Wilder</td>
                                                        <td>$56.484</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>25</td>
                                                        <td>Angelica Ramos</td>
                                                        <td>$36.796</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 98%;" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>26</td>
                                                        <td>Gavin Joyce</td>
                                                        <td>$25.365</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 87%;" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>27</td>
                                                        <td>Jennifer Chang</td>
                                                        <td>$78.489</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>28</td>
                                                        <td>Brenden Wagner</td>
                                                        <td>$35.987</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>29</td>
                                                        <td>Fiona Green</td>
                                                        <td>$78.464</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>30</td>
                                                        <td>Shou Itou</td>
                                                        <td>$61.444</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>31</td>
                                                        <td>Michelle House</td>
                                                        <td>$85.488</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>32</td>
                                                        <td>Suki Burks</td>
                                                        <td>$89.463</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 66%;" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>33</td>
                                                        <td>Prescott Bartlett</td>
                                                        <td>$23.464</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 62%;" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>34</td>
                                                        <td>Gavin Cortez</td>
                                                        <td>$12.254</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>35</td>
                                                        <td>Martena Mccray</td>
                                                        <td>$24.478</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 36%;" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>36</td>
                                                        <td>Unity Butler</td>
                                                        <td>$36.478</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>37</td>
                                                        <td>Howard Hatfield</td>
                                                        <td>$48.654</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 96%;" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>38</td>
                                                        <td>Hope Fuentes</td>
                                                        <td>$78.654</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 47%;" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td>39</td>
                                                        <td>Vivian Harrell</td>
                                                        <td>$26.154</td>
                                                        <td>
                                                            <div class="progress my-3" style="height: 3px;">
                                                                <div class="progress-bar" role="progressbar" style="width: 56%;" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </td>
                                                        <td><span class="badge badge-success-inverse">Active</span></td>
                                                        <td> <a class="mr-3" href="javascript:void(0);"><i class="fe fe-edit"></i></a><a href="javascript:void(0);"><i class="fe fe-trash-2"></i></a></td>
                                                    </tr>
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Name</th>
                                                        <th>Price</th>
                                                        <th>In stock</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-4 m-b-30">
                                <div class="card card-statistics h-100 mb-0">
                                    <div class="card-header d-flex justify-content-between">
                                        <div class="card-heading">
                                            <h4 class="card-title">Lifetime sales</h4>
                                        </div>
                                        <div class="dropdown">
                                            <a class="p-2" href="#!" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fe fe-circle"></i>
                                            </a>
                                            <div class="dropdown-menu custom-dropdown dropdown-menu-right p-4">
                                                <h6 class="mb-1">Action</h6>
                                                <a class="dropdown-item" href="#!"><i class="fa-fw fa fa-file-o pr-2"></i>View reports</a>
                                                <a class="dropdown-item" href="#!"><i class="fa-fw fa fa-edit pr-2"></i>Edit reports</a>
                                                <a class="dropdown-item" href="#!"><i class="fa-fw fa fa-bar-chart-o pr-2"></i>Statistics</a>
                                                <h6 class="mb-1 mt-3">Export</h6>
                                                <a class="dropdown-item" href="#!"><i class="fa-fw fa fa-file-pdf-o pr-2"></i>Export to PDF</a>
                                                <a class="dropdown-item" href="#!"><i class="fa-fw fa fa-file-excel-o pr-2"></i>Export to CSV</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <h5>We only started collecting data from February 2019 </h5>
                                        <p>Questions about the Net Earnings number? <a class="btn btn-square btn-inverse-success btn-xs ml-1" href="#">Click here</a> </p>
                                        <div class="row mt-4">
                                            <div class="col-lg-8">
                                                <div class="morris-wrapper">
                                                    <div id="morrisecommerce1" style="height: 260px;"></div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 mt-4">
                                                <div class="mb-3">
                                                    <h3 class="mb-0">680</h3>
                                                    <p class="mb-0 text-info">Total sales</p>
                                                </div>
                                                <div class="mb-3">
                                                    <h3 class="mb-0">800</h3>
                                                    <p class="mb-0 text-primary">Open campaign</p>
                                                </div>
                                                <div class="mb-3">
                                                    <h3 class="mb-0">500</h3>
                                                    <p class="mb-0">Daily sales</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xxl-6 m-b-30">
                                <div class="card card-statistics h-100 mb-0">
                                    <div class="card-header">
                                        <h4 class="card-title">Yearly Sales Report</h4>
                                    </div>
                                    <div class="card-body pb-0">
                                        <div class="row m-b-20">
                                            <div class="col-xxs-6 col-xl-4 col-xxl-4 mb-2 mb-xxl-0">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-container img-icon m-r-20 bg-light-gray rounded">
                                                        <i class="fa fa-cart-plus text-primary"></i>
                                                    </div>
                                                    <div class="report-details">
                                                        <p>Annual Sales</p>
                                                        <h3>15,236</h3>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xxs-6 col-md-4 col-xxl-4 mb-2 mb-xxl-0">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-container img-icon m-r-20 bg-light-gray rounded">
                                                        <i class="fa fa-dollar text-primary"></i>
                                                    </div>
                                                    <div class="report-details">
                                                        <p>Annual Revenue</p>
                                                        <h3>$40,516</h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="apexchart-wrapper">
                                            <div id="ecommerce5" class="chart-fit"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-6 m-b-30">
                                <div class="card card-statistics h-100 mb-0">
                                    <div class="card-header d-sm-flex justify-content-between align-items-center py-3">
                                        <div class="card-heading mb-3 mb-sm-0">
                                            <h4 class="card-title">Invoices Status</h4>
                                        </div>
                                        <div class="dropdown">
                                            <input type="text" class="form-control form-control-sm" placeholder="Search Invoice" />
                                        </div>
                                    </div>
                                    <div class="card-body scrollbar scroll_dark" style="max-height: 420px;">
                                        <div class="d-xxs-flex align-items-center">
                                            <div class="total-sales">
                                                <p>Total Sales</p>
                                                <h1>$9514</h1>
                                            </div>
                                            <div class="mb-3 mb-sm-0 ml-auto">
                                                <button class="btn btn-primary btn-xs">View All Invoices</button>
                                            </div>
                                        </div>
                                        <div class="d-none d-sm-flex progress m-t-20 m-b-0" style="height: 5px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                            <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                            <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class="row no-gutters">
                                            <div class="col-6 col-xxs-3 ">
                                                <p>Overdue</p>
                                                <h4>$1596</h4>
                                            </div>
                                            <div class="col-6 col-xxs-3 ">
                                                <p>Outstanding</p>
                                                <h4>$2586</h4>
                                            </div>
                                            <div class="col-6 col-xxs-3 ">
                                                <p>Open</p>
                                                <h4>$5678</h4>
                                            </div>
                                            <div class="col-6 col-xxs-3 ">
                                                <p>Paid</p>
                                                <h4>$2458</h4>
                                            </div>
                                        </div>
                                        <div class="table-responsive m-t-20">
                                            <table id="datatable-buttons" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>No.</th>
                                                        <th>Name</th>
                                                        <th>Date</th>
                                                        <th>Total</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="text-muted">
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Smith Drake</td>
                                                        <td>27/3/2014</td>
                                                        <td>$1,00,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-primary-inverse"> Overdue</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Martha Doe</td>
                                                        <td>28/3/2015</td>
                                                        <td>$70,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-warning-inverse
                                                                "> Outstanding</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Fenish Paul</td>
                                                        <td>24/3/2015</td>
                                                        <td>$60,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-info-inverse
                                                                "> Open</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Albom Mitch</td>
                                                        <td>29/3/2016</td>
                                                        <td>$60,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-success-inverse
                                                                "> Paid</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>5</td>
                                                        <td>Bacon Francis</td>
                                                        <td>21/3/2016</td>
                                                        <td>$50,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-primary-inverse
                                                                "> Overdue</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>6</td>
                                                        <td>Vanessa Angel</td>
                                                        <td>18/3/2016</td>
                                                        <td>$42,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-warning-inverse
                                                                "> Outstanding</label>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>7</td>
                                                        <td>Fenish Paul</td>
                                                        <td>24/3/2015</td>
                                                        <td>$60,000</td>
                                                        <td>
                                                            <label class="badge mb-0 badge-info-inverse
                                                                "> Open</label>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="row">
                                    <div class="col-xl-6 col-xxl-4">
                                        <div class="card card-statistics">
                                            <div class="card-header">
                                                <h4 class="card-title">Conversion Visualizer</h4>
                                            </div>
                                            <div class="card-body pb-2">
                                                <div class="row no-gutters">
                                                    <div class="col-sm-4 mt-3">
                                                        <ul class="list-group list-group-flush">
                                                            <li class="list-group-item px-0 pt-0 d-flex justify-content-between align-items-center">
                                                                <p class="text-muted m-b-0">
                                                                    <i class="fa fa-circle-o mr-2 text-primary"></i>
                                                                    Direct
                                                                </p>
                                                                <p class="text-primary mb-0">44</p>
                                                            </li>
                                                            <li class="list-group-item d-flex px-0 justify-content-between align-items-center">
                                                                <p class="text-muted m-b-0">
                                                                    <i class="fa fa-circle-o mr-2 text-warning"></i>
                                                                    Referral
                                                                </p>
                                                                <p class="text-warning mb-0">55</p>
                                                            </li>
                                                            <li class="list-group-item d-flex px-0 justify-content-between align-items-center">
                                                                <p class="text-muted m-b-0">
                                                                    <i class="fa fa-circle-o mr-2 text-info"></i>
                                                                    Organic Search
                                                                </p>
                                                                <p class="text-info mb-0">13</p>
                                                            </li>
                                                            <li class="list-group-item d-flex px-0 justify-content-between align-items-center">
                                                                <p class="text-muted m-b-0">
                                                                    <i class="fa fa-circle-o mr-2 text-danger"></i>
                                                                    Social Network
                                                                </p>
                                                                <p class="text-danger mb-0">53</p>
                                                            </li>
                                                            <li class="list-group-item d-flex px-0 justify-content-between align-items-center">
                                                                <p class="text-muted m-b-0">
                                                                    <i class="fa fa-circle-o mr-2 text-dark"></i>
                                                                    Other Advertising
                                                                </p>
                                                                <p class="text-dark mb-0">35</p>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="col-sm-8">
                                                        <div class="apexchart-wrapper">
                                                            <div id="ecommercedemo5"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card card-statistics bg-gradient">
                                            <div class="card-header d-flex justify-content-between border-0 pb-0">
                                                <div class="card-heading">
                                                    <h4 class="card-title text-white">Next payout</h4>
                                                </div>
                                                <div class="dropdown">
                                                    <a class="text-white tooltip-wrapper font-18" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Payout account: XXXX4955"><i class="fa fa-question-circle-o"></i></a>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <h2 class="text-white mb-0">$12,127.48</h2>
                                                <p class="text-white">Your payout will be processed on January 15, 2019</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-xxl-4 m-b-30">
                                        <div class="card card-statistics h-100 mb-0">
                                            <div class="card-header">
                                                <h4 class="card-title">Best selling product</h4>
                                            </div>
                                            <div class="card-body">
                                                <div class="blog">
                                                    <img class="img-fluid" src="assets/img/product.jpg" alt="">
                                                    <h4 class="m-b-10 m-t-20"><a href="#">Active Smartwatch</a></h4>
                                                    <p>Explicabo rem autem fugit, rerum, debitis, perferendis aut Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur.</p>
                                                </div>
                                                <div class="product-bar m-t-30">
                                                    <div class="d-flex">
                                                        <span>Ordered: <b>45</b></span>
                                                        <span class="ml-auto">Items available: <b>8</b></span>
                                                    </div>
                                                    <div class="progress my-3" style="height: 6px;">
                                                        <div class="progress-bar bg-success" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4 m-b-30">
                                        <div class="card card-statistics h-100 mb-0">
                                            <div class="card-header">
                                                <h4 class="card-title">Sales overview</h4>
                                            </div>
                                            <div class="card-body p-30">
                                                <div class="row">
                                                    <div class="col-xxs-6 h-100 p-2 border-right border-bottom border-xxs-right-0">
                                                        <div class="d-flex align-items-center justify-content-center">
                                                            <div class="p-3 text-center">
                                                                <a href="javascript:void(0);" class="btn btn-icon btn-round btn-inverse-primary"><i class="fe fe-settings"></i></a>
                                                                <h2 class="m-t-20 mb-0">$272</h2>
                                                                <p class="text-muted d-block m-b-0">Avg. Order Value</p>
                                                                <span class="text-primary"> <i class="fe fe-activity"></i> 155.5% </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xxs-6 h-100 p-2 border-bottom">
                                                        <div class="d-flex align-items-center justify-content-center">
                                                            <div class="p-3 text-center">
                                                                <a href="javascript:void(0);" class="btn btn-icon btn-round btn-inverse-success"><i class="fe fe-user-check"></i></a>
                                                                <h2 class="m-t-20 mb-0">$450</h2>
                                                                <p class="text-muted d-block m-b-0">Page Impressions</p>
                                                                <span class="text-success"> <i class="fe fe-arrow-down-left"></i> 155.5% </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xxs-6 h-100 p-2 border-right border-xxs-bottom border-xxs-right-0">
                                                        <div class="d-flex align-items-center justify-content-center">
                                                            <div class="p-3 text-center">
                                                                <a href="javascript:void(0);" class="btn btn-icon btn-round btn-inverse-danger"><i class="fe fe-bar-chart-2"></i></a>
                                                                <h2 class="m-t-20 mb-0">$135</h2>
                                                                <p class="text-muted d-block m-b-0">Quantity</p>
                                                                <span class="text-danger"> <i class="fe fe-arrow-down-right"></i> 155.5% </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-xxs-6 h-100 p-2 ">
                                                        <div class="d-flex align-items-center justify-content-center">
                                                            <div class="p-3 text-center">
                                                                <a href="javascript:void(0);" class="btn btn-icon btn-round btn-inverse-info"><i class="fe fe-crosshair"></i></a>
                                                                <h2 class="m-t-20 mb-0">$7525</h2>
                                                                <p class="text-muted d-block m-b-0">Total Products</p>
                                                                <span class="text-info"> <i class="fe fe-arrow-up"></i> 155.5% </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end row -->
                    </div>
                    <!-- end container-fluid -->
                </div>
                <!-- end app-main -->
            </div>
            <!-- end app-container -->
            <!-- begin footer -->
            <footer class="footer">
                <div class="row">
                    <div class="col-12 col-sm-6 text-center text-sm-left">
                        <p>&copy; Copyright 2019. All rights reserved.</p>
                    </div>
                    <div class="col  col-sm-6 ml-sm-auto text-center text-sm-right">
                        <p>Hand-crafted made with <i class="fa fa-heart text-danger mx-1"></i> by Potenza</p>
                    </div>
                </div>
            </footer>
            <!-- end footer -->
        </div>
        <!-- end app-wrap -->
    </div>
    <!-- end app -->

    <!-- plugins -->
    <script src="assets/js/vendors.js"></script>

    <!-- custom app -->
    <script src="assets/js/app.js"></script>
</body>

</html>
