Your IP : 3.135.184.124
<!doctype html>
<html lang="en" dir="ltr">
<head>
<!-- META DATA -->
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zanex – Bootstrap Admin & Dashboard Template">
<meta name="author" content="Spruko Technologies Private Limited">
<meta name="keywords" content="admin, dashboard, dashboard ui, admin dashboard template, admin panel dashboard, admin panel html, admin panel html template, admin panel template, admin ui templates, administrative templates, best admin dashboard, best admin templates, bootstrap 4 admin template, bootstrap admin dashboard, bootstrap admin panel, html css admin templates, html5 admin template, premium bootstrap templates, responsive admin template, template admin bootstrap 4, themeforest html">
<!-- FAVICON -->
<link rel="shortcut icon" type="image/x-icon" href="../assets/images/brand/favicon.ico" />
<!-- TITLE -->
<title>Zanex – Bootstrap Admin & Dashboard Template</title>
<!-- BOOTSTRAP CSS -->
<link id="style" href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- STYLE CSS -->
<link href="../assets/css/style.css" rel="stylesheet"/>
<link href="../assets/css/plugins.css" rel="stylesheet"/>
<!--- FONT-ICONS CSS -->
<link href="../assets/css/icons.css" rel="stylesheet"/>
</head>
<body class="app sidebar-mini ltr light-mode">
<!-- GLOBAL-LOADER -->
<div id="global-loader">
<img src="../assets/images/loader.svg" class="loader-img" alt="Loader">
</div>
<!-- /GLOBAL-LOADER -->
<!-- PAGE -->
<div class="page">
<div class="page-main">
<!-- app-Header -->
<div class="app-header header sticky">
<div class="container-fluid main-container">
<div class="d-flex align-items-center">
<a aria-label="Hide Sidebar" class="app-sidebar__toggle" data-bs-toggle="sidebar" href="javascript:void(0);"></a>
<div class="responsive-logo">
<a href="index.html" class="header-logo">
<img src="../assets/images/brand/logo-3.png" class="mobile-logo logo-1" alt="logo">
<img src="../assets/images/brand/logo.png" class="mobile-logo dark-logo-1" alt="logo">
</a>
</div>
<!-- sidebar-toggle-->
<a class="logo-horizontal " href="index.html">
<img src="../assets/images/brand/logo.png" class="header-brand-img desktop-logo" alt="logo">
<img src="../assets/images/brand/logo-3.png" class="header-brand-img light-logo1"
alt="logo">
</a>
<!-- LOGO -->
<div class="main-header-center ms-3 d-none d-lg-block">
<input class="form-control" placeholder="Search for anything..." type="search"> <button class="btn"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
<div class="d-flex order-lg-2 ms-auto header-right-icons">
<!-- SEARCH -->
<button class="navbar-toggler navresponsive-toggler d-lg-none ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-4" aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fe fe-more-vertical text-dark"></span>
</button>
<div class="navbar navbar-collapse responsive-navbar p-0">
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<div class="d-flex order-lg-2">
<div class="dropdown d-block d-lg-none">
<a href="javascript:void(0);" class="nav-link icon" data-bs-toggle="dropdown">
<i class="fe fe-search"></i>
</a>
<div class="dropdown-menu header-search dropdown-menu-start">
<div class="input-group w-100 p-2">
<input type="text" class="form-control" placeholder="Search....">
<div class="input-group-text btn btn-primary">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="dropdown d-md-flex">
<a class="nav-link icon theme-layout nav-link-bg layout-setting">
<span class="dark-layout"><i class="fe fe-moon"></i></span>
<span class="light-layout"><i class="fe fe-sun"></i></span>
</a>
</div>
<!-- Theme-Layout -->
<div class="dropdown d-md-flex">
<a class="nav-link icon full-screen-link nav-link-bg">
<i class="fe fe-minimize fullscreen-button"></i>
</a>
</div>
<!-- FULL-SCREEN -->
<div class="dropdown d-md-flex notifications">
<a class="nav-link icon" data-bs-toggle="dropdown"><i class="fe fe-bell"></i><span class=" pulse"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow ">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold">You have Notification</h6>
<div class="ms-auto">
<span class="badge bg-success rounded-pill">3</span>
</div>
</div>
</div>
<div class="notifications-menu">
<a class="dropdown-item d-flex" href="chat.html">
<div class="me-3 notifyimg bg-primary-gradient brround box-shadow-primary">
<i class="fe fe-message-square"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">New review received</h5>
<span class="notification-subtext">2 hours ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<div class="me-3 notifyimg bg-secondary-gradient brround box-shadow-primary">
<i class="fe fe-mail"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">New Mails Received</h5>
<span class="notification-subtext">1 week ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="cart.html">
<div class="me-3 notifyimg bg-success-gradient brround box-shadow-primary">
<i class="fe fe-shopping-cart"></i>
</div>
<div class="mt-1 wd-80p">
<h5 class="notification-label mb-1">New Order Received</h5>
<span class="notification-subtext">1 day ago</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="javascript:void(0);" class="dropdown-item text-center p-3 text-muted">View all Notification</a>
</div>
</div>
<!-- NOTIFICATIONS -->
<div class="dropdown d-md-flex message">
<a class="nav-link icon text-center" data-bs-toggle="dropdown">
<i class="fe fe-message-square"></i><span class=" pulse-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold">You have Messages</h6>
<div class="ms-auto">
<span class="badge bg-danger rounded-pill">4</span>
</div>
</div>
</div>
<div class="message-menu">
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/1.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Madeleine</h5>
<small class="text-muted ms-auto text-end">
3 hours ago
</small>
</div>
<span>Hey! there I' am available....</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/12.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Anthony</h5>
<small class="text-muted ms-auto text-end">
5 hour ago
</small>
</div>
<span>New product Launching...</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/4.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Olivia</h5>
<small class="text-muted ms-auto text-end">
45 mintues ago
</small>
</div>
<span>New Schedule Realease......</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/15.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Sanderson</h5>
<small class="text-muted ms-auto text-end">
2 days ago
</small>
</div>
<span>New Schedule Realease......</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="javascript:void(0);" class="dropdown-item text-center p-3 text-muted">See all Messages</a>
</div>
</div>
<!-- MESSAGE-BOX -->
<div class="dropdown d-md-flex profile-1">
<a href="javascript:void(0);" data-bs-toggle="dropdown" class="nav-link leading-none d-flex px-1">
<span>
<img src="../assets/images/users/8.jpg" alt="profile-user" class="avatar profile-user brround cover-image">
</span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading">
<div class="text-center">
<h5 class="text-dark mb-0">Elizabeth Dyer</h5>
<small class="text-muted">Administrator</small>
</div>
</div>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item" href="profile.html">
<i class="dropdown-icon fe fe-user"></i> Profile
</a>
<a class="dropdown-item" href="email.html">
<i class="dropdown-icon fe fe-mail"></i> Inbox
<span class="badge bg-secondary float-end">3</span>
</a>
<a class="dropdown-item" href="emailservices.html">
<i class="dropdown-icon fe fe-settings"></i> Settings
</a>
<a class="dropdown-item" href="faq.html">
<i class="dropdown-icon fe fe-alert-triangle"></i> Need help?
</a>
<a class="dropdown-item" href="login.html">
<i class="dropdown-icon fe fe-alert-circle"></i> Sign out
</a>
</div>
</div>
<div class="dropdown d-md-flex header-settings">
<a href="javascript:void(0);" class="nav-link icon " data-bs-toggle="sidebar-right" data-target=".sidebar-right">
<i class="fe fe-menu"></i>
</a>
</div>
<!-- SIDE-MENU -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /app-Header -->
<!--APP-SIDEBAR-->
<div class="sticky">
<div class="app-sidebar__overlay" data-bs-toggle="sidebar"></div>
<aside class="app-sidebar">
<div class="side-header">
<a class="header-brand1" href="index.html">
<img src="../assets/images/brand/logo.png" class="header-brand-img desktop-logo" alt="logo">
<img src="../assets/images/brand/logo-1.png" class="header-brand-img toggle-logo" alt="logo">
<img src="../assets/images/brand/logo-2.png" class="header-brand-img light-logo" alt="logo">
<img src="../assets/images/brand/logo-3.png" class="header-brand-img light-logo1" alt="logo">
</a>
<!-- LOGO -->
</div>
<div class="main-sidemenu">
<div class="slide-left disabled" id="slide-left"><svg xmlns="http://www.w3.org/2000/svg"
fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
<path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z" />
</svg></div>
<ul class="side-menu">
<li class="sub-category">
<h3>Main</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="index.html"><i class="side-menu__icon fe fe-home"></i><span class="side-menu__label">Dashboard</span></a>
</li>
<li class="sub-category">
<h3>Widgets</h3>
</li>
<li>
<a class="side-menu__item" href="widgets.html"><i class="side-menu__icon fe fe-grid"></i><span class="side-menu__label">Widgets</span></a>
</li>
<li class="sub-category">
<h3>Elements</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-database"></i><span class="side-menu__label">Components</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Components</a></li>
<li><a href="cards.html" class="slide-item"> Cards design</a></li>
<li><a href="calendar.html" class="slide-item"> Default calendar</a></li>
<li><a href="calendar2.html" class="slide-item"> Full calendar</a></li>
<li><a href="chat.html" class="slide-item"> Default Chat</a></li>
<li><a href="notify.html" class="slide-item"> Notifications</a></li>
<li><a href="sweetalert.html" class="slide-item"> Sweet alerts</a></li>
<li><a href="rangeslider.html" class="slide-item"> Range slider</a></li>
<li><a href="scroll.html" class="slide-item"> Content Scroll bar</a></li>
<li><a href="loaders.html" class="slide-item"> Loaders</a></li>
<li><a href="counters.html" class="slide-item"> Counters</a></li>
<li><a href="rating.html" class="slide-item"> Rating</a></li>
<li><a href="timeline.html" class="slide-item"> Timeline</a></li>
<li><a href="treeview.html" class="slide-item"> Treeview</a></li>
</ul>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-package"></i><span class="side-menu__label">Elements</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Elements</a></li>
<li><a href="alerts.html" class="slide-item"> Alerts</a></li>
<li><a href="buttons.html" class="slide-item"> Buttons</a></li>
<li><a href="colors.html" class="slide-item"> Colors</a></li>
<li><a href="avatarsquare.html" class="slide-item"> Avatar-Square</a></li>
<li><a href="avatar-round.html" class="slide-item"> Avatar-Rounded</a></li>
<li><a href="avatar-radius.html" class="slide-item"> Avatar-Radius</a></li>
<li><a href="dropdown.html" class="slide-item"> Drop downs</a></li>
<li><a href="list.html" class="slide-item"> List</a></li>
<li><a href="tags.html" class="slide-item"> Tags</a></li>
<li><a href="pagination.html" class="slide-item"> Pagination</a></li>
<li><a href="navigation.html" class="slide-item"> Navigation</a></li>
<li><a href="typography.html" class="slide-item"> Typography</a></li>
<li><a href="breadcrumbs.html" class="slide-item"> Breadcrumbs</a></li>
<li><a href="badge.html" class="slide-item"> Badges</a></li>
<li><a href="panels.html" class="slide-item"> Panels</a></li>
<li><a href="thumbnails.html" class="slide-item"> Thumbnails</a></li>
</ul>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-file"></i><span class="side-menu__label">Advanced Elements</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Advanced Elements</a></li>
<li><a href="mediaobject.html" class="slide-item"> Media Object</a></li>
<li><a href="accordion.html" class="slide-item"> Accordions</a></li>
<li><a href="tabs.html" class="slide-item"> Tabs</a></li>
<li><a href="chart.html" class="slide-item"> Charts</a></li>
<li><a href="modal.html" class="slide-item"> Modal</a></li>
<li><a href="tooltipandpopover.html" class="slide-item"> Tooltip and popover</a></li>
<li><a href="progress.html" class="slide-item"> Progress</a></li>
<li><a href="carousel.html" class="slide-item"> Carousels</a></li>
<li><a href="headers.html" class="slide-item"> Headers</a></li>
<li><a href="footers.html" class="slide-item"> Footers</a></li>
<li><a href="users-list.html" class="slide-item"> User List</a></li>
<li><a href="search.html" class="slide-item">Search</a></li>
<li><a href="crypto-currencies.html" class="slide-item"> Crypto-currencies</a></li>
</ul>
</li>
<li class="sub-category">
<h3>Charts & Tables</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-pie-chart"></i><span class="side-menu__label">Charts</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Charts</a></li>
<li><a href="chart-chartist.html" class="slide-item">Chart Js</a></li>
<li><a href="chart-flot.html" class="slide-item"> Flot Charts</a></li>
<li><a href="chart-echart.html" class="slide-item"> ECharts</a></li>
<li><a href="chart-morris.html" class="slide-item"> Morris Charts</a></li>
<li><a href="chart-nvd3.html" class="slide-item"> Nvd3 Charts</a></li>
<li><a href="charts.html" class="slide-item"> C3 Bar Charts</a></li>
<li><a href="chart-line.html" class="slide-item"> C3 Line Charts</a></li>
<li><a href="chart-donut.html" class="slide-item"> C3 Donut Charts</a></li>
<li><a href="chart-pie.html" class="slide-item"> C3 Pie charts</a></li>
</ul>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-clipboard"></i><span class="side-menu__label">Tables</span><span class="badge bg-secondary side-badge">2</span><i class="angle fa fa-angle-right hor-rightangle"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Tables</a></li>
<li><a href="tables.html" class="slide-item">Default table</a></li>
<li><a href="datatable.html" class="slide-item"> Data Tables</a></li>
</ul>
</li>
<li class="sub-category">
<h3>Pages</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-layers"></i><span class="side-menu__label">Pages</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Pages</a></li>
<li><a href="profile.html" class="slide-item"> Profile</a></li>
<li><a href="editprofile.html" class="slide-item"> Edit Profile</a></li>
<li><a href="email.html" class="slide-item"> Mail-Inbox</a></li>
<li><a href="emailservices.html" class="slide-item"> Mail-Compose</a></li>
<li><a href="gallery.html" class="slide-item"> Gallery</a></li>
<li><a href="about.html" class="slide-item"> About Company</a></li>
<li><a href="services.html" class="slide-item"> Services</a></li>
<li><a href="faq.html" class="slide-item"> FAQS</a></li>
<li><a href="terms.html" class="slide-item"> Terms</a></li>
<li><a href="invoice.html" class="slide-item"> Invoice</a></li>
<li><a href="pricing.html" class="slide-item"> Pricing Tables</a></li>
<li><a href="empty.html" class="slide-item"> Empty Page</a></li>
<li><a href="construction.html" class="slide-item"> Under Construction</a></li>
<li><a href="switcher.html" class="slide-item"> Theme Style</a></li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">Blog</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a href="blog.html" class="sub-slide-item">Blog</a></li>
<li><a href="blog-details.html" class="sub-slide-item">Blog Details</a></li>
<li><a href="blog-post.html" class="sub-slide-item">Blog Post</a></li>
</ul>
</li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">Maps</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a href="maps1.html" class="sub-slide-item">Leaflet Maps</a></li>
<li><a href="maps2.html" class="sub-slide-item">Mapel Maps</a></li>
<li><a href="maps.html" class="sub-slide-item">Vector Maps</a></li>
</ul>
</li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">E-Commerce</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a href="shop.html" class="sub-slide-item">Shop</a></li>
<li><a href="shop-description.html" class="sub-slide-item">Shopping Details</a></li>
<li><a href="cart.html" class="sub-slide-item">Shopping Cart</a></li>
<li><a href="wishlist.html" class="sub-slide-item">Wishlist</a></li>
<li><a href="checkout.html" class="sub-slide-item">Checkout</a></li>
</ul>
</li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">File Manager</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a href="file-manager.html" class="sub-slide-item">File Manager</a></li>
<li><a href="filemanager-list.html" class="sub-slide-item">File Manager List</a></li>
<li><a href="filemanager-details.html" class="sub-slide-item">File Details</a></li>
<li><a href="file-attachments.html" class="sub-slide-item">File Attachments</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-category">
<h3>Custom & Error Pages</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-settings"></i><span class="side-menu__label">Custom Pages</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Custom Pages</a></li>
<li><a href="login.html" class="slide-item"> Login</a></li>
<li><a href="register.html" class="slide-item"> Register</a></li>
<li><a href="forgot-password.html" class="slide-item"> Forgot Password</a></li>
<li><a href="lockscreen.html" class="slide-item"> Lock screen</a></li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">Error Pages</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a class="sub-slide-item" href="400.html">400</a></li>
<li><a class="sub-slide-item" href="401.html">401</a></li>
<li><a class="sub-slide-item" href="403.html">403</a></li>
<li><a class="sub-slide-item" href="404.html">404</a></li>
<li><a class="sub-slide-item" href="500.html">500</a></li>
<li><a class="sub-slide-item" href="503.html">503</a></li>
</ul>
</li>
</ul>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);">
<i class="side-menu__icon fe fe-sliders"></i>
<span class="side-menu__label">Submenus</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Submenus</a></li>
<li><a href="javascript:void(0);" class="slide-item">Level-1</a></li>
<li class="sub-slide">
<a class="sub-side-menu__item" data-bs-toggle="sub-slide" href="javascript:void(0);"><span class="sub-side-menu__label">Level-2</span><i class="sub-angle fa fa-angle-right"></i></a>
<ul class="sub-slide-menu">
<li><a class="sub-slide-item" href="javascript:void(0);">Level-2.1</a></li>
<li><a class="sub-slide-item" href="javascript:void(0);">Level-2.2</a></li>
<li class="sub-slide2">
<a class="sub-side-menu__item2" href="javascript:void(0);" data-bs-toggle="sub-slide2"><span class="sub-side-menu__label2">Level-2.3</span><i class="sub-angle2 fa fa-angle-right"></i></a>
<ul class="sub-slide-menu2">
<li><a href="javascript:void(0);" class="sub-slide-item2">Level-2.3.1</a></li>
<li><a href="javascript:void(0);" class="sub-slide-item2">Level-2.3.2</a></li>
<li><a href="javascript:void(0);" class="sub-slide-item2">Level-2.3.3</a></li>
</ul>
</li>
<li><a class="sub-slide-item" href="javascript:void(0);">Level-2.4</a></li>
<li><a class="sub-slide-item" href="javascript:void(0);">Level-2.5</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub-category">
<h3>Forms & Icons</h3>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-file-text"></i><span class="side-menu__label">Forms</span><span class="badge bg-success side-badge">5</span><i class="angle fa fa-angle-right hor-rightangle"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Forms</a></li>
<li><a href="form-elements.html" class="slide-item"> Form Elements</a></li>
<li><a href="form-advanced.html" class="slide-item"> Form Advanced</a></li>
<li><a href="wysiwyag.html" class="slide-item"> Form Editor</a></li>
<li><a href="form-wizard.html" class="slide-item"> Form Wizard</a></li>
<li><a href="form-validation.html" class="slide-item"> Form Validation</a></li>
</ul>
</li>
<li class="slide">
<a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0);"><i class="side-menu__icon fe fe-command"></i><span class="side-menu__label">Icons</span><i class="angle fa fa-angle-right"></i></a>
<ul class="slide-menu">
<li class="side-menu-label1"><a href="javascript:void(0)">Icons</a></li>
<li><a href="icons.html" class="slide-item"> Font Awesome</a></li>
<li><a href="icons2.html" class="slide-item"> Material Design Icons</a></li>
<li><a href="icons3.html" class="slide-item"> Simple Line Icons</a></li>
<li><a href="icons4.html" class="slide-item"> Feather Icons</a></li>
<li><a href="icons5.html" class="slide-item"> Ionic Icons</a></li>
<li><a href="icons6.html" class="slide-item"> Flag Icons</a></li>
<li><a href="icons7.html" class="slide-item"> pe7 Icons</a></li>
<li><a href="icons8.html" class="slide-item"> Themify Icons</a></li>
<li><a href="icons9.html" class="slide-item">Typicons Icons</a></li>
<li><a href="icons10.html" class="slide-item">Weather Icons</a></li>
<li><a href="icons11.html" class="slide-item">Bootstrap Icons</a></li>
</ul>
</li>
</ul>
<div class="slide-right" id="slide-right"><svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191"
width="24" height="24" viewBox="0 0 24 24">
<path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z" />
</svg></div>
</div>
</aside>
</div>
<!--/APP-SIDEBAR-->
<!--app-content open-->
<div class="main-content app-content mt-0">
<div class="side-app">
<!-- CONTAINER -->
<div class="main-container container-fluid">
<!-- PAGE-HEADER -->
<div class="page-header">
<div>
<h1 class="page-title">Cards</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">Components</a></li>
<li class="breadcrumb-item active" aria-current="page">Cards</li>
</ol>
</div>
<div class="ms-auto pageheader-btn">
<a href="javascript:void(0);" class="btn btn-primary btn-icon text-white me-2">
<span>
<i class="fe fe-plus"></i>
</span> Add Account
</a>
<a href="javascript:void(0);" class="btn btn-success btn-icon text-white">
<span>
<i class="fe fe-log-in"></i>
</span> Export
</a>
</div>
</div>
<!-- PAGE-HEADER END -->
<!-- ROW-1 OPEN -->
<div class="row">
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="javascript:void(0);" class="card-link">Card link</a>
<a href="javascript:void(0);" class="card-link">Another link</a>
</div>
</div>
</div><!-- COL END -->
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-header">
<div class="card-title">Card-Header</div>
</div>
<div class="card-body">
<p class="">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div><!-- COL END -->
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-body">
<p class="">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0);" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
<div class="card-title">Card-footer</div>
</div>
</div>
</div><!-- COL END -->
</div>
<!-- ROW-1 CLOSED -->
<!-- ROW-2 OPEN -->
<div class="row">
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-secondary">
<div class="card-body">
<h4 class="card-title">Secondary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-success">
<div class="card-body">
<h4 class="card-title">Success card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-danger">
<div class="card-body">
<h4 class="card-title">Danger card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-info">
<div class="card-body">
<h4 class="card-title">Info card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-warning">
<div class="card-body">
<h4 class="card-title">Warning card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Basic card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet </div>
<div class="card-footer">
This is Basic card footer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header bg-primary br-tr-4 br-tl-4">
<h3 class="card-title text-white">Basic color card-header</h3>
<div class="card-options ">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="card-footer">
This is Basic card footer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Basic color card-footer</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="card-footer bg-danger br-br-3 br-bl-3">
<div class="text-white">Basic card footer</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Panel with custom buttons</h3>
<div class="card-options">
<a href="javascript:void(0);" class="btn btn-primary btn-sm">Action 1</a>
<a href="javascript:void(0);" class="btn btn-secondary btn-sm ms-2">Action 2</a>
</div>
</div>
<div class="card-body">
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful actual teachings of the great explorer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with search form</h3>
<div class="card-options">
<form>
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
<span class="input-group-btn ms-0">
<button class="btn btn-sm btn-primary" type="submit">
<span class="fe fe-search text-white"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<div class="card-body">
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful actual teachings of the great explorer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with alert</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-alert alert alert-success mb-0">
Adding action was successful
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with alert</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-alert alert alert-danger mb-0">
Adding action failed
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">fullscreen button</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with switch</h3>
<div class="card-options">
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input" checked="">
<span class="custom-switch-indicator"></span>
</label>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card card-collapsed">
<div class="card-header">
<h3 class="card-title">Initial collapsed card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
</div>
<!-- ROW-2 CLOSED -->
<!-- ROW-3 OPEN -->
<div class="row">
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-header ">
<h3 class="card-title ">Employee card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
</div>
</div>
<div class="card-body text-center">
<span class="avatar avatar-xxl brround cover-image cover-image" data-bs-image-src="../assets/images/users/18.jpg"></span>
<h4 class="h4 mb-0 mt-3">James Thomas</h4>
<p class="card-text">Web designer</p>
</div>
<div class="card-footer text-center">
<div class="row user-social-detail">
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-header ">
<h3 class="card-title ">Employee card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
</div>
</div>
<div class="card-body text-center">
<span class="avatar avatar-xxl brround cover-image" data-bs-image-src="../assets/images/users/18.jpg"></span>
<h4 class="h4 mb-0 mt-3">Rebacca Thomas</h4>
<p class="card-text">Web designer</p>
</div>
<div class="card-footer text-center">
<div class="row user-social-detail">
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-header ">
<h3 class="card-title ">Employee card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x "></i></a>
</div>
</div>
<div class="card-body text-center">
<span class="avatar avatar-xxl brround cover-image" data-bs-image-src="../assets/images/users/8.jpg"></span>
<h4 class="h4 mb-0 mt-3"> Thomas symson</h4>
<p class="card-text">Web designer</p>
</div>
<div class="card-footer text-center">
<div class="row user-social-detail">
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="javascript:void(0);" class="social-profile me-4 rounded text-center"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div><!-- COL END -->
</div>
<!-- ROW-3 CLOSED -->
<!-- ROW-4 OPEN -->
<div class="row ">
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-body text-start">
<blockquote class="quote">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<small class="text-muted">
so awesome this title <cite title="Source Title">-magna aliqua</cite>
</small>
</blockquote>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-body text-center">
<blockquote class="quote">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<small class="text-muted">
so awesome this title <cite title="Source Title">-magna aliqua</cite>
</small>
</blockquote>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card ">
<div class="card-body text-end">
<blockquote class="quote">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<small class="text-muted">
so awesome this title <cite title="Source Title">-magna aliqua</cite>
</small>
</blockquote>
</div>
</div>
</div><!-- COL END -->
<div class=" col-xl-4 col-md-12 ">
<div class="card m-b-20">
<div class="card-header">
<h3 class="card-title">Card With List</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<div class="visitor-list">
<div class="media m-0 mt-0 border-bottom">
<img class="avatar brround avatar-md me-3" alt="avatra-img" src="../assets/images/users/18.jpg">
<div class="media-body">
<a href="" class="text-default fw-semibold">John Paige</a>
<p class="text-muted ">Uploaded new invoices for RedBus</p>
</div>
</div>
<div class="media mt-2 border-bottom">
<img class="avatar brround avatar-md me-3" alt="avatra-img" src="../assets/images/users/20.jpg">
<div class="media-body">
<a href="" class="text-default fw-semibold">Lillian Quinn</a>
<p class="text-muted">Created new work flow for the current</p>
</div>
</div>
<div class="media mt-2">
<img class="avatar brround avatar-md me-3" alt="avatra-img" src="../assets/images/users/18.jpg">
<div class="media-body">
<a href="" class="text-default fw-semibold">Irene Harris</a>
<p class="text-muted mb-0">Submitted the project schedule to the manager</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-xl-4 col-md-12">
<div class="card m-b-20">
<div class="card-header">
<h3 class="card-title">Sample card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<p>Put toy mouse in food bowl run out of litter box at full speed drool but pee in Put toy mouse Put toy mouse the shoe purr when being pet but chew foot.</p>
<p class="mb-0">Scratch the postman wake up lick paw Duis aute irure dolor in reprehenderit wake up owner meow meow lick plastic bags Scratch the postman wake up lick paw wake Duis aute irure dolor having their mate disturbing sleeping humans.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-xl-4 col-md-12">
<div class="card d-flex m-b-20">
<div class="card-header">
<h3 class="card-title">Card with Toolbar</h3>
<div class="card-options">
<a class="text-gray" href="javascript:void(0)">
<i class="mdi mdi-refresh"></i>
</a>
<a class="text-gray" href="javascript:void(0)">
<i class="mdi mdi-bookmark-outline"></i>
</a>
<a class="text-gray" href="javascript:void(0)">
<i class="mdi mdi-dots-vertical"></i>
</a>
</div>
</div>
<div class="card-body">
<p>Put toy mouse in food bowl run out of litter box at full speed drool but pee in Put toy mouse Put toy mouse the shoe purr when being pet but chew foot.</p>
<p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit Scratch the postman wake up lick paw wake up owner meow meow lick plastic bags Scratch the postman wake up lick paw wake having their mate disturbing sleeping humans.</p>
</div>
</div>
</div><!-- COL END -->
</div>
<!-- ROW-4 CLOSED -->
<!-- ROW-5 OPEN -->
<div class="row ">
<div class="col-md-12 col-xl-4">
<div class="card card-blog-overlay1">
<div class="card-body text-white">
<h3 class="card-title text-white">card-with image</h3>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="card-footer text-white z-index2 border-transparent">
This is Basic card footer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card card-blog-overlay2">
<div class="card-body text-white">
<h3 class="card-title text-white">card-with image</h3>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
<div class="card-footer text-white z-index2 border-transparent">
This is Basic card footer
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card card-blog-overlay">
<div class="card-header z-index2 border-transparent">
<h3 class="card-title text-white ">card-with image</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white"></i></a>
</div>
</div>
<div class="card-body text-white">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-6 col-xl-6">
<div class="card card-aside">
<div class="card-body d-flex flex-column">
<h4><a href="javascript:void(0);">Play Music</a></h4>
<div class="text-muted">Some quick example text to build on the card title and make up the bulk of the card's</div>
<div class="d-flex align-items-center pt-5 mt-auto text-center ">
<div class="text-muted">
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-backward"></i></a>
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-play "></i></a>
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-forward"></i></a>
</div>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-6 col-xl-6">
<div class="card card-aside bg-primary">
<div class="card-body d-flex flex-column">
<h4><a href="javascript:void(0);" class="text-white">Play Music</a></h4>
<div class="text-muted text-white">Some quick example text to build on the card title and make up the bulk of the card's </div>
<div class="d-flex align-items-center pt-5 mt-auto text-center ">
<div class="text-muted">
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-backward text-white"></i></a>
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-play text-white "></i></a>
<a href="javascript:void(0)" class="icon d-md-inline-block ms-3"><i class="fa fa-step-forward text-white"></i></a>
</div>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-primary border-primary">
<div class="card-header">
<h3 class="card-title ">primary card title</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-secondary">
<div class="card-header border-secondary">
<h3 class="card-title ">Secondary card title</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card text-white bg-success">
<div class="card-header border-success">
<h3 class="card-title ">Success card title</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up text-white"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x text-white "></i></a>
</div>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="spinner"></div>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="spinner1">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with loader</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
<div class="dimmer active">
<div class="spinner2">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>
</div>
</div>
</div>
</div><!-- COL END -->
<!-- ROW-5 CLOSED -->
<!-- ROW-6 OPEN -->
<div class="row">
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">fullscreen button</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Card with switch</h3>
<div class="card-options">
<label class="custom-switch m-0">
<input type="checkbox" value="1" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
</label>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card card-collapsed">
<div class="card-header">
<h3 class="card-title">Initial collapsed card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Built card</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-status bg-blue br-tr-7 br-tl-7"></div>
<div class="card-header">
<h3 class="card-title">Card blue</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
<div class="col-md-12 col-xl-6">
<div class="card">
<div class="card-status card-status-left bg-red br-bl-7 br-tl-7"></div>
<div class="card-header">
<h3 class="card-title">Card status on left side</h3>
<div class="card-options">
<a href="javascript:void(0);" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
<a href="javascript:void(0);" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-x"></i></a>
</div>
</div>
<div class="card-body">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div><!-- COL END -->
</div>
<!-- ROW-6 CLOSED -->
</div>
</div>
</div>
<!-- CONTAINER CLOSED -->
</div>
<!-- Sidebar-right -->
<div class="sidebar sidebar-right sidebar-animate">
<div class="panel panel-primary card mb-0 shadow-none border-0">
<div class="tab-menu-heading border-0 d-flex p-3">
<div class="card-title mb-0">Notifications</div>
<div class="card-options ms-auto">
<a href="javascript:void(0);" class="sidebar-icon text-end float-end me-1" data-bs-toggle="sidebar-right" data-target=".sidebar-right"><i class="fe fe-x text-white"></i></a>
</div>
</div>
<div class="panel-body tabs-menu-body latest-tasks p-0 border-0">
<div class="tabs-menu border-bottom">
<!-- Tabs -->
<ul class="nav panel-tabs">
<li class=""><a href="#side1" class="active" data-bs-toggle="tab"><i class="fe fe-user me-1"></i> Profile</a></li>
<li><a href="#side2" data-bs-toggle="tab"><i class="fe fe-users me-1"></i> Contacts</a></li>
<li><a href="#side3" data-bs-toggle="tab"><i class="fe fe-settings me-1"></i> Settings</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="side1">
<div class="card-body text-center">
<div class="dropdown user-pro-body">
<div class="">
<img alt="user-img" class="avatar avatar-xl brround mx-auto text-center" src="../assets/images/faces/6.jpg"><span class="avatar-status profile-status bg-green"></span>
</div>
<div class="user-info mg-t-20">
<h6 class="fw-semibold mt-2 mb-0">Mintrona Pechon</h6>
<span class="mb-0 text-muted fs-12">Premium Member</span>
</div>
</div>
</div>
<a class="dropdown-item d-flex border-bottom border-top" href="profile.html">
<div class="d-flex"><i class="fe fe-user me-3 tx-20 text-muted"></i>
<div class="pt-1">
<h6 class="mb-0">My Profile</h6>
<p class="tx-12 mb-0 text-muted">Profile Personal information</p>
</div>
</div>
</a>
<a class="dropdown-item d-flex border-bottom" href="chat.html">
<div class="d-flex"><i class="fe fe-message-square me-3 tx-20 text-muted"></i>
<div class="pt-1">
<h6 class="mb-0">My Messages</h6>
<p class="tx-12 mb-0 text-muted">Person message information</p>
</div>
</div>
</a>
<a class="dropdown-item d-flex border-bottom" href="emailservices.html">
<div class="d-flex"><i class="fe fe-mail me-3 tx-20 text-muted"></i>
<div class="pt-1">
<h6 class="mb-0">My Mails</h6>
<p class="tx-12 mb-0 text-muted">Persons mail information</p>
</div>
</div>
</a>
<a class="dropdown-item d-flex border-bottom" href="editprofile.html">
<div class="d-flex"><i class="fe fe-settings me-3 tx-20 text-muted"></i>
<div class="pt-1">
<h6 class="mb-0">Account Settings</h6>
<p class="tx-12 mb-0 text-muted">Settings Information</p>
</div>
</div>
</a>
<a class="dropdown-item d-flex border-bottom" href="login.html">
<div class="d-flex"><i class="fe fe-power me-3 tx-20 text-muted"></i>
<div class="pt-1">
<h6 class="mb-0">Sign Out</h6>
<p class="tx-12 mb-0 text-muted">Account Signout</p>
</div>
</div>
</a>
</div>
<div class="tab-pane" id="side2">
<div class="list-group list-group-flush ">
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/9.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Mozelle Belt</div>
<p class="mb-0 tx-12 text-muted">mozellebelt@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/11.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Florinda Carasco</div>
<p class="mb-0 tx-12 text-muted">florindacarasco@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/10.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Alina Bernier</div>
<p class="mb-0 tx-12 text-muted">alinaaernier@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/2.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Zula Mclaughin</div>
<p class="mb-0 tx-12 text-muted">zulamclaughin@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/13.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Isidro Heide</div>
<p class="mb-0 tx-12 text-muted">isidroheide@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/12.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Mozelle Belt</div>
<p class="mb-0 tx-12 text-muted">mozellebelt@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/4.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Florinda Carasco</div>
<p class="mb-0 tx-12 text-muted">florindacarasco@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/7.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Alina Bernier</div>
<p class="mb-0 tx-12 text-muted">alinabernier@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/2.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Zula Mclaughin</div>
<p class="mb-0 tx-12 text-muted">zulamclaughin@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/14.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Isidro Heide</div>
<p class="mb-0 tx-12 text-muted">isidroheide@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/11.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Florinda Carasco</div>
<p class="mb-0 tx-12 text-muted">florindacarasco@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/9.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Alina Bernier</div>
<p class="mb-0 tx-12 text-muted">alinabernier@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/15.jpg"><span class="avatar-status bg-success"></span></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Zula Mclaughin</div>
<p class="mb-0 tx-12 text-muted">zulamclaughin@gmail.com</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="me-2">
<span class="avatar avatar-md brround cover-image" data-bs-image-src="../assets/images/faces/4.jpg"></span>
</div>
<div class="">
<div class="fw-semibold" data-bs-toggle="modal" data-target="#chatmodel">Isidro Heide</div>
<p class="mb-0 tx-12 text-muted">isidroheide@gmail.com</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="side3">
<a class="dropdown-item bg-gray-100 pd-y-10" href="javascript:void(0);">
Account Settings
</a>
<div class="card-body">
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Updates Automatically</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Allow Location Map</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show Contacts</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show Notication</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show Tasks Statistics</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show Email Notification</span>
</label>
</div>
</div>
<a class="dropdown-item bg-gray-100 pd-y-10" href="javascript:void(0);">
General Settings
</a>
<div class="card-body">
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show User Online</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Website Notication</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Show Recent activity</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input">
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Logout Automatically</span>
</label>
</div>
<div class="form-group mg-b-10">
<label class="custom-switch ps-0">
<input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input" checked>
<span class="custom-switch-indicator"></span>
<span class="custom-switch-description mg-l-10">Allow All Notifications</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/Sidebar-right-->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-md-12 col-sm-12 text-center">
Copyright © <span id="year"></span> <a href="javascript:void(0);">Zanex</a>. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0);"> Spruko </a> All rights reserved
</div>
</div>
</div>
</footer>
<!-- FOOTER CLOSED -->
</div>
<!-- BACK-TO-TOP -->
<a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>
<!-- JQUERY JS -->
<script src="../assets/js/jquery.min.js"></script>
<!-- BOOTSTRAP JS -->
<script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- SPARKLINE JS-->
<script src="../assets/js/jquery.sparkline.min.js"></script>
<!-- CHART-CIRCLE JS-->
<script src="../assets/js/circle-progress.min.js"></script>
<!-- C3 CHART JS-->
<script src="../assets/plugins/charts-c3/d3.v5.min.js"></script>
<script src="../assets/plugins/charts-c3/c3-chart.js"></script>
<!-- INPUT MASK JS-->
<script src="../assets/plugins/input-mask/jquery.mask.min.js"></script>
<!-- SIDEBAR JS -->
<script src="../assets/plugins/sidebar/sidebar.js"></script>
<!-- SIDE-MENU JS -->
<script src="../assets/plugins/sidemenu/sidemenu.js"></script>
<!-- Sticky js -->
<script src="../assets/js/sticky.js"></script>
<!-- Perfect SCROLLBAR JS-->
<script src="../assets/plugins/p-scroll/perfect-scrollbar.js"></script>
<script src="../assets/plugins/p-scroll/pscroll.js"></script>
<script src="../assets/plugins/p-scroll/pscroll-1.js"></script>
<!-- Color Theme js -->
<script src="../assets/js/themeColors.js"></script>
<!-- swither styles js -->
<script src="../assets/js/swither-styles.js"></script>
<!-- CUSTOM JS -->
<script src="../assets/js/custom.js"></script>
</body>
</html>