File: /mnt/data/smarthr-co-in/demo/tailwind/template/src/icon-ionic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="description" content="Smarthr - Bootstrap Admin Template">
<meta name="keywords" content="admin, estimates, bootstrap, business, html5, responsive, Projects">
<meta name="author" content="Dreams technologies - Bootstrap Admin Template">
<meta name="robots" content="noindex, nofollow">
<title>Smarthr Admin Template</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<!-- Theme Script js -->
<script src="assets/js/theme-script.js"></script>
<!-- Feather CSS -->
<link rel="stylesheet" href="assets/plugins/icons/feather/feather.css">
<!-- Tabler Icon CSS -->
<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Datetimepicker CSS -->
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">
<!-- Datatable CSS -->
<link rel="stylesheet" href="assets/css/dataTables.tailwindcss.css">
<!-- Select2 CSS -->
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<!-- Summernote CSS -->
<link rel="stylesheet" href="assets/plugins/summernote/summernote-lite.min.css">
<!-- Daterangepikcer CSS -->
<link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css">
<!-- Bootstrap Tagsinput CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Dragula CSS -->
<link rel="stylesheet" href="assets/plugins/dragula/css/dragula.min.css">
<!-- Ionic CSS -->
<link rel="stylesheet" href="assets/plugins/icons/ionic/ionicons.css">
<!-- Flowbite CSS -->
<link rel="stylesheet" href="assets/css/flowbite.min.css">
<!-- Color Picker Css -->
<link rel="stylesheet" href="assets/plugins/flatpickr/flatpickr.min.css">
<link rel="stylesheet" href="assets/plugins/@simonwep/pickr/themes/nano.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="../dist/style.css">
</head>
<body>
<div id="global-loader" style="display: none;">
<div class="page-loader"></div>
</div>
<!-- Main Wrapper -->
<div class="main-wrapper">
<!-- Header -->
<div class="header fixed top-0 left-0 right-0 bg-white h-[50px] border-b border-gray-200 lg:left-vertical-w">
<div class="main-header h-[50px]">
<div class="header-left hidden relative float-left text-center h-[50px] z-[1] media-max-md:flex">
<a href="index.html" class="logo">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<a id="mobile_btn" class="mobile_btn" href="#sidebar">
<span class="bar-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<div class="header-user px-[15px] py-4">
<div class="nav user-menu nav-list flex items-center justify-center h-full px-6 'media-max-md:hidden">
<div class="me-auto flex items-center" id="header-search">
<a id="toggle_btn" href="javascript:void(0);" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 text-lg leading-normal rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent me-1">
<i class="ti ti-arrow-bar-to-left"></i>
</a>
<!-- Search -->
<div class="flex w-[259px] relative me-1">
<span class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none text-gray-400"><i class="ti ti-search"></i></span>
<input type="text" class="block flex-1 border border-borderColor bg-white rounded-[5px] py-1.5 pl-7 pr-12 text-gray-900 placeholder:text-gray-400 focus:ring-0 focus:border-borderColor h-[30px] text-xs" placeholder="Search in HRMS">
<span class="absolute inset-y-1/2 end-0 flex items-center me-2.5 pointer-events-none "><kbd class="bg-dark-transparent text-[10px] font-medium text-gray-500 px-[3px] py-0.5 rounded">CTRL + / </kbd></span>
</div>
<!-- /Search -->
<div>
<button data-dropdown-toggle="crm-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] me-1 hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900" type="button">
<i class="ti ti-layout-grid"></i>
</button>
<div id="crm-dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-[5px] shadow w-55 dark:bg-gray-700">
<div class="border-b border px-[20px] py-4">
<h4>CRM</h4>
</div>
<div class="border-b border p-[20px] pb-1">
<div class="grid grid-cols-1 gap-x-6 sm:grid-cols-2 *:border *:border-borderColor *:bg-white *:p-2 *:rounded-md *:font-medium">
<a href="contacts.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-user-shield text-default me-2 group-hover:text-primary"></i>Contacts
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="companies-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-building text-default me-2 group-hover:text-primary"></i>Companies
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="deals-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-heart-handshake text-default me-2 group-hover:text-primary"></i>Deals
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="leads-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-user-check text-default me-2 group-hover:text-primary"></i>Leads
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="pipeline.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-timeline-event-text text-default me-2 group-hover:text-primary"></i>Pipeline
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="activity.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-activity text-default me-2 group-hover:text-primary"></i>Activities
</span>
<i class="ti ti-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<a href="profile-settings.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-settings-cog"></i>
</a>
</div>
<!-- Horizontal Single -->
<div class="sidebar sidebar-horizontal hidden" id="horizontal-single">
<div class="sidebar-menu">
<div class="main-menu">
<ul class="nav-menu">
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3">
<span>Main</span>
</li>
<li class="submenu">
<a href="#" class="active">
<i class="ti ti-smart-home"></i><span>Dashboard</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="index.html" class="active">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Super Admin</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-grid-add"></i><span>Applications</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-board-split"></i><span>Layouts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="layout-horizontal.html">
<span>Horizontal</span>
</a>
</li>
<li>
<a href="layout-detached.html">
<span>Detached</span>
</a>
</li>
<li>
<a href="layout-modern.html">
<span>Modern</span>
</a>
</li>
<li>
<a href="layout-two-column.html">
<span>Two Column </span>
</a>
</li>
<li>
<a href="layout-hovered.html">
<span>Hovered</span>
</a>
</li>
<li>
<a href="layout-box.html">
<span>Boxed</span>
</a>
</li>
<li>
<a href="layout-horizontal-single.html">
<span>Horizontal Single</span>
</a>
</li>
<li>
<a href="layout-horizontal-overlay.html">
<span>Horizontal Overlay</span>
</a>
</li>
<li>
<a href="layout-horizontal-box.html">
<span>Horizontal Box</span>
</a>
</li>
<li>
<a href="layout-horizontal-sidemenu.html">
<span>Menu Aside</span>
</a>
</li>
<li>
<a href="layout-vertical-transparent.html">
<span>Transparent</span>
</a>
</li>
<li>
<a href="layout-without-header.html">
<span>Without Header</span>
</a>
</li>
<li>
<a href="layout-rtl.html">
<span>RTL</span>
</a>
</li>
<li>
<a href="layout-dark.html">
<span>Dark</span>
</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="clients-grid.html"><span>Clients</span>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="submenu">
<a href="call.html">Crm<span class="menu-arrow"></span></a>
<ul>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">Leaves<span class="menu-arrow"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Administration</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Settings</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">General Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Website Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">System Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Financial Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-page-break"></i><span>Pages</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
<li class="submenu">
<a href="#"><span>Content</span> <span class="menu-arrow"></span></a>
<ul>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>Authentication</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>UI Interface</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-hierarchy-2"></i>
<span>Base UI</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-accordion.html">Accordion</a>
</li>
<li>
<a href="ui-avatar.html">Avatar</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-borders.html">Border</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-buttons-group.html">Button Group</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-cards.html">Card</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-colors.html">Colors</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-images.html">Images</a>
</li>
<li>
<a href="ui-lightbox.html">Lightbox</a>
</li>
<li>
<a href="ui-media.html">Media</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-offcanvas.html">Offcanvas</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-spinner.html">Spinner</a>
</li>
<li>
<a href="ui-sweetalerts.html">Sweet Alerts</a>
</li>
<li>
<a href="ui-nav-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
<li>
<a href="ui-video.html">Video</a>
</li>
<li>
<a href="ui-sortable.html">Sortable</a>
</li>
<li>
<a href="ui-swiperjs.html">Swiperjs</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-hierarchy-3"></i>
<span>Advanced UI</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="ui-clipboard.html">Clipboard</a>
</li>
<li>
<a href="ui-drag-drop.html">Drag & Drop</a>
</li>
<li>
<a href="ui-rangeslider.html">Range Slider</a>
</li>
<li>
<a href="ui-rating.html">Rating</a>
</li>
<li>
<a href="ui-text-editor.html">Text Editor</a>
</li>
<li>
<a href="ui-counter.html">Counter</a>
</li>
<li>
<a href="ui-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="ui-stickynote.html">Sticky Note</a>
</li>
<li>
<a href="ui-timeline.html">Timeline</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-input-search"></i>
<span>Forms</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-basic-inputs.html">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html">Form Select</a>
</li>
<li>
<a href="form-mask.html">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-horizontal.html">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html">Form Validation</a>
</li>
<li>
<a href="form-select2.html">Select2</a>
</li>
<li>
<a href="form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html">Form Pickers</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Tables</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="tables-basic.html">Basic Tables </a>
</li>
<li>
<a href="data-tables.html">Data Table </a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-chart-line"></i>
<span>Charts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="chart-apex.html">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html">Chart C3</a>
</li>
<li>
<a href="chart-js.html">Chart Js</a>
</li>
<li>
<a href="chart-morris.html">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-icons"></i>
<span>Icons</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="icon-fontawesome.html">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Horizontal Single -->
<div class="flex items-center">
<div class="me-1">
<a href="#" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent btnFullscreen">
<i class="ti ti-maximize"></i>
</a>
</div>
<div class="me-1">
<button data-dropdown-toggle="app-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900" type="button">
<i class="ti ti-layout-grid-remove"></i>
</button>
<div id="app-dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-[5px] shadow w-[200px]">
<div class="border-b border px-[20px] py-4">
<h4>Applications</h4>
</div>
<div class="border-b border p-[20px]">
<a href="calendar.html" class="flex items-center text-gray-900 hover:text-primary pb-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-calendar text-gray-900"></i></span>Calendar
</a>
<a href="todo.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-subtask text-gray-900"></i></span>To Do
</a>
<a href="notes.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-notes text-gray-900"></i></span>Notes
</a>
<a href="file-manager.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-folder text-gray-900"></i></span>File Manager
</a>
<a href="kanban-view.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-layout-kanban text-gray-900"></i></span>Kanban
</a>
<a href="invoices.html" class="flex items-center text-gray-900 hover:text-primary py-2 pb-0">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-file-invoice text-gray-900"></i></span>Invoices
</a>
</div>
</div>
</div>
<div class="me-1">
<a href="chat.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-brand-hipchat"></i>
<span class="right-1 top-0.5 absolute w-[10px] h-[10px] text-[6px] flex items-center justify-center bg-info text-white rounded-full">5</span>
</a>
</div>
<div class="me-1">
<a href="email.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-mail"></i>
</a>
</div>
<div class="me-1 notification_item">
<button data-dropdown-toggle="noti-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900 relative" type="button">
<i class="ti ti-bell"></i>
<span class="right-[5px] top-[5px] absolute w-[6px] h-[6px] text-[6px] flex items-center justify-center bg-danger text-white rounded-full notification-status-dot"></span>
</button>
<div id="noti-dropdown" class="z-10 hidden bg-white rounded-[5px] shadow p-6 w-55 dark:bg-gray-700">
<div class="flex items-center justify-between border-b border-borderColor p-0 pb-4 mb-4">
<h4 class="notification-title">Notifications (2)</h4>
<div class="flex items-center">
<a href="#" class="text-primary text-nowrap text-[15px] me-3 lh-1">Mark all as read</a>
<button id="doubleDropdownButton" data-dropdown-toggle="doubleDropdown" data-dropdown-placement="right-start" type="button" class="flex items-center w-full text-gray-900 hover:text-primary"><i class="ti ti-calendar-due me-1"></i>Today</button>
<div id="doubleDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
<ul class="p-2 text-sm text-gray-900" aria-labelledby="doubleDropdownButton">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900">This Week</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900">Last Week</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-gray-900 noti-content scroll-smooth h-[270px] overflow-y-auto">
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-27.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1"><span class="text-title font-semibold">Shawn</span> performance in Math is below the threshold.</p>
<span>Just Now</span>
</div>
</div>
</a>
</div>
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html" class="pb-0">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-23.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1"><span class="text-title font-semibold">Sylvia</span> added appointment on 02:00 PM</p>
<span>10 mins ago</span>
<div
class="flex justify-start items-center mt-1">
<span class="btn bg-light border border-light text-gray-900 text-center py-1 px-2 hover:bg-light-900 hover:text-gray-900 text-xs leading-normal me-2">Deny</span>
<span class="btn bg-primary border border-primary text-white text-center py-1 px-2 hover:bg-primary-900 hover:text-white text-xs leading-normal">Approve</span>
</div>
</div>
</div>
</a>
</div>
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-25.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1">New student record <span class="text-title font-semibold"> George</span> is created by <span class="text-title font-semibold">Teressa</span></p>
<span>2 hrs ago</span>
</div>
</div>
</a>
</div>
<div class="border-0 mb-4 pb-0">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-01.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1">A new teacher record for <span class="text-title font-semibold">Elisa</span> </p>
<span>09:45 AM</span>
</div>
</div>
</a>
</div>
</div>
<div class="flex p-0 gap-2">
<a href="#" class="btn bg-light border border-light text-gray-900 text-center hover:bg-light-900 hover:text-gray-900 w-full">Cancel</a>
<a href="activity.html" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white w-full">View All</a>
</div>
</div>
</div>
<div class="me-1">
<button data-dropdown-toggle="profile-dropdown" class="flex items-center justify-center" type="button">
<span class="relative">
<img src="assets/img/profiles/avatar-12.jpg" alt="Img" class="size-6 rounded-full">
<span class="right-0 bottom-0 absolute w-2 h-2 bg-success border-2 border-white rounded-full"></span>
</span>
</button>
<div id="profile-dropdown" class="z-10 hidden bg-white divide-y divide-borderColor rounded-[5px] shadow w-55">
<div class="px-[20px] py-4">
<div class="flex items-center">
<span class="size-[45px] me-2">
<img src="assets/img/profiles/avatar-12.jpg" alt="img" class="rounded-full border-2 border-gray-100">
</span>
<div>
<h5 class="mb-0">Kevin Larry</h5>
<p class="text-xs leading-normal text-gray-900 font-medium mb-0">[email protected]</p>
</div>
</div>
</div>
<ul class="p-[20px]">
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="profile.html">
<i class="ti ti-user-circle me-1"></i>My Profile
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="bussiness-settings.html">
<i class="ti ti-settings me-1"></i>Settings
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="security-settings.html">
<i class="ti ti-status-change me-1"></i>Status
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="profile-settings.html">
<i class="ti ti-circle-arrow-up me-1"></i>My Account
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="knowledgebase.html">
<i class="ti ti-question-mark me-1"></i>Knowledge Base
</a>
</li>
</ul>
<div class="px-[20px] py-4">
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="login.html">
<i class="ti ti-login me-2"></i>Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<!--div class="dropdown mobile-user-menu">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="profile.html">My Profile</a>
<a class="dropdown-item" href="profile-settings.html">Settings</a>
<a class="dropdown-item" href="login.html">Logout</a>
</div>
</div-->
<!-- /Mobile Menu -->
</div>
</div>
<!-- /Header -->
<!-- Sidebar -->
<div class="sidebar fixed top-0 left-0 bottom-0 w-sidebar bg-white border-r border-borderColor" id="sidebar">
<!-- Logo -->
<div class="sidebar-logo fixed h-[50px] w-sidebar pt-4 px-4">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="logo-small hidden">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo hidden">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<!-- /Logo -->
<div class="modern-profile hidden p-3 pb-0 ">
<div class="text-center rounded bg-light p-3 mb-4 user-profile flex items-center justify-center flex-col">
<div class="relative inline-flex items-center justify-center size-[45px] online mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="rounded-full">
<div class="absolute inline-flex items-center justify-center w-3 h-3 text-xs font-bold text-white bg-success border-2 border-white rounded-full top-8 end-0 dark:border-gray-900"></div>
</div>
<h6 class="text-xs leading-normal font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="sidebar-nav mb-3">
<ul class="nav nav-tabs nav-tabs-solid nav-tabs-rounded nav-justified bg-light p-3 rounded-[65px] flex justify-center items-center gap-3" role="tablist">
<li class="nav-item py-2 px-3 bg-primary rounded-[65px]"><a class="nav-link active border-0 text-white" href="#">Menu</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="chat.html">Chats</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="email.html">Inbox</a></li>
</ul>
</div>
</div>
<div class="sidebar-header p-3 pb-0 pt-2 hidden">
<div class="text-center rounded bg-light p-2 mb-4 sidebar-profile flex items-center">
<div class="size-8 onlin">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="rounded-full">
</div>
<div class="text-start sidebar-profile-info ms-2">
<h6 class="text-xs leading-normal font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
</div>
<div class="flex w-[220px] relative me-1 mb-4">
<span class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none text-gray-400"><i class="ti ti-search"></i></span>
<input type="text" class="block flex-1 border border-borderColor bg-white rounded-[5px] py-1.5 pl-7 pr-12 text-gray-900 placeholder:text-gray-400 focus:ring-0 focus:border-borderColor h-[30px] text-xs" placeholder="Search in HRMS">
<span class="absolute inset-y-1/2 end-0 flex items-center me-2.5 pointer-events-none "><kbd class="bg-dark-transparent text-[10px] font-medium text-gray-500 px-[3px] py-0.5 rounded">CTRL + / </kbd></span>
</div>
<div class="flex items-center justify-between menu-item mb-3">
<div class="me-3">
<a href="calendar.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="me-3 notification-item">
<a href="chat.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-brand-hipchat"></i>
<span class="text-[6px] w-[10px] h-[10px] flex items-center justify-center text-white rounded-full absolute right-[5px] text top-[2px] z-[1] bg-info">5</span>
</a>
</div>
<div class="me-3 notification-item">
<a href="activity.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-bell"></i>
<div class="notification-status-dot w-[6px] h-[6px] rounded-full absolute right-[5px] top-[5px] z-[1] bg-danger"></div>
</a>
</div>
<div class="me-0">
<a href="email.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-message"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>MAIN MENU</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-smart-home text-gray-500 group-hover:text-gray-900 group-active:text-gray-900"></i>
<span class="ms-2">Dashboard</span>
<span class="ms-2 text-[10px] bg-danger rounded font-medium text-white px-1 py-0.5 inline-flex items-center">Hot</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="index.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-grid-add"></i><span class="ms-2">Applications</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="chat.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calls<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="voice-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Voice Call</a></li>
<li><a href="video-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Video Call</a></li>
<li><a href="outgoing-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Outgoing Call</a></li>
<li><a href="incoming-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Incoming Call</a></li>
<li><a href="call-history.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calendar</a></li>
<li><a href="email.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Email</a></li>
<li><a href="todo.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">To Do</a></li>
<li><a href="notes.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Notes</a></li>
<li><a href="social-feed.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Social Feed</a></li>
<li><a href="file-manager.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">File Manager</a></li>
<li><a href="kanban-view.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Kanban</a></li>
<li><a href="invoices.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoices</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">Super Admin</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Dashboard</a></li>
<li><a href="companies.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Companies</a></li>
<li><a href="subscription.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Subscriptions</a></li>
<li><a href="packages.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Packages</a></li>
<li><a href="domain.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Domain</a></li>
<li><a href="purchase-transaction.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Purchase Transaction</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>LAYOUT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="layout-horizontal.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar"></i><span class="ms-2">Horizontal</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-detached.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-details"></i><span class="ms-2">Detached</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-modern.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board-split"></i><span class="ms-2">Modern</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-two-column.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-columns-2"></i><span class="ms-2">Two Column </span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-hovered.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-column-insert-left"></i><span class="ms-2">Hovered</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-box.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-align-middle"></i><span class="ms-2">Boxed</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-single.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar-inactive"></i><span class="ms-2">Horizontal Single</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-overlay.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-collage"></i><span class="ms-2">Horizontal Overlay</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-box.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board"></i><span class="ms-2">Horizontal Box</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-sidemenu.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table"></i><span class="ms-2">Menu Aside</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-vertical-transparent.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout"></i><span class="ms-2">Transparent</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-without-header.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-sidebar"></i><span class="ms-2">Without Header</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-rtl.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-text-direction-rtl"></i><span class="ms-2">RTL</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-dark.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-moon"></i><span class="ms-2">Dark</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>PROJECTS</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="clients-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-users-group"></i><span class="ms-2">Clients</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-box"></i><span class="ms-2">Projects</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="projects-grid.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Projects</a></li>
<li><a href="tasks.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tasks</a></li>
<li><a href="task-board.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Task Board</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>CRM</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="contacts-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-shield"></i><span class="ms-2">Contacts</span>
</a>
</li>
<li class="mb-[5px]">
<a href="companies-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-building"></i><span class="ms-2">Companies</span>
</a>
</li>
<li class="mb-[5px]">
<a href="deals-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-heart-handshake"></i><span class="ms-2">Deals</span>
</a>
</li>
<li class="mb-[5px]">
<a href="leads-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-check"></i><span class="ms-2">Leads</span>
</a>
</li>
<li class="mb-[5px]">
<a href="pipeline.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-timeline-event-text"></i><span class="ms-2">Pipeline</span>
</a>
</li>
<li class="mb-[5px]">
<a href="analytics.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-graph"></i><span class="ms-2">Analytics</span>
</a>
</li>
<li class="mb-[5px]">
<a href="activity.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-activity"></i><span class="ms-2">Activities</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>HRM</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-users"></i><span class="ms-2">Employees</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="employees.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Lists</a></li>
<li><a href="employees-grid.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Grid</a></li>
<li><a href="employee-details.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Details</a></li>
<li><a href="departments.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Departments</a></li>
<li><a href="designations.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Designations</a></li>
<li><a href="policy.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Policies</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-ticket"></i><span class="ms-2">Tickets</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="tickets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tickets</a></li>
<li><a href="ticket-details.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Ticket Details</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="holidays.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-calendar-event"></i><span class="ms-2">Holidays</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-time"></i><span class="ms-2">Attendance</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaves<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="leaves.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave (Employee)</a></li>
<li><a href="leave-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance (Employee)</a></li>
<li><a href="timesheets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Timesheets</a></li>
<li><a href="schedule-timing.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Shift & Schedule</a></li>
<li><a href="overtime.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Overtime</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-school"></i><span class="ms-2">Performance</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="performance-indicator.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Indicator</a></li>
<li><a href="performance-review.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Review</a></li>
<li><a href="performance-appraisal.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Appraisal</a></li>
<li><a href="goal-tracking.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Goal List</a></li>
<li><a href="goal-type.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Goal Type</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-edit"></i><span class="ms-2">Training</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="training.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Training List</a></li>
<li><a href="trainers.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Trainers</a></li>
<li><a href="training-type.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Training Type</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="promotion.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-speakerphone"></i><span class="ms-2">Promotion</span>
</a>
</li>
<li class="mb-[5px]">
<a href="resignation.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-external-link"></i><span class="ms-2">Resignation</span>
</a>
</li>
<li class="mb-[5px]">
<a href="termination.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-circle-x"></i><span class="ms-2">Termination</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>RECRUITMENT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="job-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-timeline"></i><span class="ms-2">Jobs</span>
</a>
</li>
<li class="mb-[5px]">
<a href="candidates-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-shield"></i><span class="ms-2">Candidates</span>
</a>
</li>
<li class="mb-[5px]">
<a href="refferals.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-ux-circle"></i><span class="ms-2">Referrals</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>FINANCE & ACCOUNTS</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-shopping-cart-dollar"></i><span class="ms-2">Sales</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="estimates.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Estimates</a></li>
<li><a href="invoices.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoices</a></li>
<li><a href="payments.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payments</a></li>
<li><a href="expenses.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Expenses</a></li>
<li><a href="provident-fund.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Provident Fund</a></li>
<li><a href="taxes.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Taxes</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-dollar"></i><span class="ms-2">Accounting</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="categories.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Categories</a></li>
<li><a href="budgets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budgets</a></li>
<li><a href="budget-expenses.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budget Expenses</a></li>
<li><a href="budget-revenues.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-cash"></i><span class="ms-2">Payroll</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="employee-salary.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Salary</a></li>
<li><a href="payslip.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payslip</a></li>
<li><a href="payroll.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payroll Items</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>ADMINISTRATION</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-cash"></i><span class="ms-2">Assets</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="assets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Assets</a></li>
<li><a href="asset-categories.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Asset Categories</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-headset"></i><span class="ms-2">Help & Supports</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="knowledgebase.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Knowledge Base</a></li>
<li><a href="activity.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Activities</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">User Management</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="users.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Users</a></li>
<li><a href="roles-permissions.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">Reports</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="expenses-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Expense Report</a></li>
<li><a href="invoice-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoice Report</a></li>
<li><a href="payment-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payment Report</a></li>
<li><a href="project-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Project Report</a></li>
<li><a href="task-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Task Report</a></li>
<li><a href="user-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">User Report</a></li>
<li><a href="employee-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Report</a></li>
<li><a href="payslip-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payslip Report</a></li>
<li><a href="attendance-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance Report</a></li>
<li><a href="leave-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave Report</a></li>
<li><a href="daily-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Daily Report</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-settings"></i><span class="ms-2">Settings</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">General Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="profile-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Profile</a></li>
<li><a href="security-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Security</a></li>
<li><a href="notification-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Notifications</a></li>
<li><a href="connected-apps.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Connected Apps</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Website Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="bussiness-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Business Settings</a></li>
<li><a href="seo-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">SEO Settings</a></li>
<li><a href="localization-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Localization</a></li>
<li><a href="prefixes.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Prefixes</a></li>
<li><a href="preferences.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Preferences</a></li>
<li><a href="performance-appraisal.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Appearance</a></li>
<li><a href="language.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Language</a></li>
<li><a href="authentication-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Authentication</a></li>
<li><a href="ai-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">AI Settings</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">App Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="salary-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Salary Settings</a></li>
<li><a href="approval-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Approval Settings</a></li>
<li><a href="invoice-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoice Settings</a></li>
<li><a href="leave-type.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave Type</a></li>
<li><a href="custom-fields.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Custom Fields</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">System Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="email-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Email Settings</a></li>
<li><a href="email-template.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Email Templates</a></li>
<li><a href="sms-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">SMS Settings</a></li>
<li><a href="sms-template.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">SMS Templates</a></li>
<li><a href="otp-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">OTP</a></li>
<li><a href="gdpr.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Financial Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="payment-gateways.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payment Gateways</a></li>
<li><a href="tax-rates.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tax Rate</a></li>
<li><a href="currencies.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Currencies</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Other Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="custom-css.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Custom CSS</a></li>
<li><a href="custom-js.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Custom JS</a></li>
<li><a href="cronjob.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cronjob</a></li>
<li><a href="storage-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Storage</a></li>
<li><a href="ban-ip-address.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Ban IP Address</a></li>
<li><a href="backup.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Backup</a></li>
<li><a href="clear-cache.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Clear Cache</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>CONTENT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="pages.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-box-multiple"></i><span class="ms-2">Pages</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-brand-blogger"></i><span class="ms-2">Blogs</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="blogs.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">All Blogs</a></li>
<li><a href="blog-categories.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Categories</a></li>
<li><a href="blog-comments.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Comments</a></li>
<li><a href="blog-tags.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Blog Tags</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-map-pin-check"></i><span class="ms-2">Locations</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="countries.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Countries</a></li>
<li><a href="states.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">States</a></li>
<li><a href="cities.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cities</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="testimonials.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-message-2"></i><span class="ms-2">Testimonials</span>
</a>
</li>
<li class="mb-[5px]">
<a href="faq.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-question-mark"></i><span class="ms-2">FAQ’S</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>PAGES</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="starter.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-sidebar"></i><span class="ms-2">Starter</span>
</a>
</li>
<li class="mb-[5px]">
<a href="profile.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-circle"></i><span class="ms-2">Profile</span>
</a>
</li>
<li class="mb-[5px]">
<a href="gallery.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-photo"></i><span class="ms-2">Gallery</span>
</a>
</li>
<li class="mb-[5px]">
<a href="search-result.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-list-search"></i><span class="ms-2">Search Results</span>
</a>
</li>
<li class="mb-[5px]">
<a href="timeline.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-timeline"></i><span class="ms-2">Timeline</span>
</a>
</li>
<li class="mb-[5px]">
<a href="pricing.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-dollar"></i><span class="ms-2">Pricing</span>
</a>
</li>
<li class="mb-[5px]">
<a href="coming-soon.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-progress-bolt"></i><span class="ms-2">Coming Soon</span>
</a>
</li>
<li class="mb-[5px]">
<a href="under-maintenance.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-alert-octagon"></i><span class="ms-2">Under Maintenance</span>
</a>
</li>
<li class="mb-[5px]">
<a href="under-construction.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-barrier-block"></i><span class="ms-2">Under Construction</span>
</a>
</li>
<li class="mb-[5px]">
<a href="api-keys.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-api"></i><span class="ms-2">API Keys</span>
</a>
</li>
<li class="mb-[5px]">
<a href="privacy-policy.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-description"></i><span class="ms-2">Privacy Policy</span>
</a>
</li>
<li class="mb-[5px]">
<a href="terms-condition.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-check"></i><span class="ms-2">Terms & Conditions</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>AUTHENTICATION</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-login"></i><span class="ms-2">Login</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="login.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="login-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="login-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-forms"></i><span class="ms-2">Register</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul>
<li><a href="register.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="register-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="register-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-help-triangle"></i><span class="ms-2">Forgot Password</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="forgot-password.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="forgot-password-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="forgot-password-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-restore"></i><span class="ms-2">Reset Password</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="reset-password.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="reset-password-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="reset-password-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-mail-exclamation"></i><span class="ms-2">Email Verification</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="email-verification.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="email-verification-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="email-verification-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-password"></i><span class="ms-2">2 Step Verification</span><span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="two-step-verification.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Cover</a></li>
<li><a href="two-step-verification-2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Illustration</a></li>
<li><a href="two-step-verification-3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="lock-screen.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-lock-square"></i><span class="ms-2">Lock Screen</span>
</a>
</li>
<li class="mb-[5px]">
<a href="error-404.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-error-404"></i><span class="ms-2">404 Error</span>
</a>
</li>
<li class="mb-[5px]">
<a href="error-500.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-server"></i><span class="ms-2">500 Error</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>UI INTERFACE</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-hierarchy-2"></i>
<span class="ms-2">Base UI</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="ui-alerts.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Alerts</a>
</li>
<li>
<a href="ui-accordion.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Accordion</a>
</li>
<li>
<a href="ui-avatar.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Avatar</a>
</li>
<li>
<a href="ui-badges.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Badges</a>
</li>
<li>
<a href="ui-borders.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Border</a>
</li>
<li>
<a href="ui-buttons.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Buttons</a>
</li>
<li>
<a href="ui-buttons-group.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Button Group</a>
</li>
<li>
<a href="ui-breadcrumb.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Breadcrumb</a>
</li>
<li>
<a href="ui-cards.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Card</a>
</li>
<li>
<a href="ui-carousel.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Carousel</a>
</li>
<li>
<a href="ui-colors.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Colors</a>
</li>
<li>
<a href="ui-dropdowns.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Dropdowns</a>
</li>
<li>
<a href="ui-grid.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Grid</a>
</li>
<li>
<a href="ui-images.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Images</a>
</li>
<li>
<a href="ui-lightbox.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Lightbox</a>
</li>
<li>
<a href="ui-media.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Media</a>
</li>
<li>
<a href="ui-modals.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Modals</a>
</li>
<li>
<a href="ui-offcanvas.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Offcanvas</a>
</li>
<li>
<a href="ui-pagination.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Pagination</a>
</li>
<li>
<a href="ui-popovers.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Popovers</a>
</li>
<li>
<a href="ui-progress.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Progress</a>
</li>
<li>
<a href="ui-spinner.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Spinner</a>
</li>
<li>
<a href="ui-sweetalerts.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Sweet Alerts</a>
</li>
<li>
<a href="ui-nav-tabs.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tooltips</a>
</li>
<li>
<a href="ui-typography.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Typography</a>
</li>
<li>
<a href="ui-video.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Video</a>
</li>
<li>
<a href="ui-sortable.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Sortable</a>
</li>
<li>
<a href="ui-swiperjs.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Swiperjs</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-hierarchy-3"></i>
<span class="ms-2">Advanced UI</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="ui-clipboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Clipboard</a>
</li>
<li>
<a href="ui-drag-drop.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Drag & Drop</a>
</li>
<li>
<a href="ui-rangeslider.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Range Slider</a>
</li>
<li>
<a href="ui-rating.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Rating</a>
</li>
<li>
<a href="ui-text-editor.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Text Editor</a>
</li>
<li>
<a href="ui-counter.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Counter</a>
</li>
<li>
<a href="ui-scrollbar.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Scrollbar</a>
</li>
<li>
<a href="ui-stickynote.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Sticky Note</a>
</li>
<li>
<a href="ui-timeline.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Timeline</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-input-search"></i>
<span class="ms-2">Forms</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Elements <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-basic-inputs.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Select</a>
</li>
<li>
<a href="form-mask.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-horizontal.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Validation</a>
</li>
<li>
<a href="form-select2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Select2</a>
</li>
<li>
<a href="form-wizard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Picker</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table-plus"></i>
<span class="ms-2">Tables</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="tables-basic.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic Tables </a>
</li>
<li>
<a href="data-tables.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Data Table </a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-chart-line"></i>
<span class="ms-2">Charts</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="chart-apex.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chart C3</a>
</li>
<li>
<a href="chart-js.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chart Js</a>
</li>
<li>
<a href="chart-morris.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative active subdrop flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-icons"></i>
<span class="ms-2">Icons</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="icon-fontawesome.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html" class="relative active flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table-plus"></i>
<span class="ms-2">Maps</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="maps-vector.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Vector</a>
</li>
<li>
<a href="maps-leaflet.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>Extras</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-text"></i>
<span class="ms-2">Documentation</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-exchange"></i>
<span class="ms-2">Changelog</span>
<span class="bg-pink text-white text-[10px] py-0.5 px-1.5 ms-1 rounded leading-4">v4.0.8</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-menu-2"></i>
<span class="ms-2">Multi Level</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-10 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-10 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Sidebar -->
<!-- Horizontal Menu -->
<div class="sidebar sidebar-horizontal hidden" id="horizontal-menu">
<div class="sidebar-menu">
<div class="main-menu">
<ul class="nav-menu">
<li class="menu-title">
<span>Main</span>
</li>
<li class="submenu">
<a href="#" class="active subdrop">
<i class="ti ti-smart-home"></i><span>Dashboard</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="index.html" class="active">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Super Admin</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-grid-add"></i><span>Applications</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-board-split"></i><span>Layouts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="layout-horizontal.html">
<span>Horizontal</span>
</a>
</li>
<li>
<a href="layout-detached.html">
<span>Detached</span>
</a>
</li>
<li>
<a href="layout-modern.html">
<span>Modern</span>
</a>
</li>
<li>
<a href="layout-two-column.html">
<span>Two Column </span>
</a>
</li>
<li>
<a href="layout-hovered.html">
<span>Hovered</span>
</a>
</li>
<li>
<a href="layout-box.html">
<span>Boxed</span>
</a>
</li>
<li>
<a href="layout-horizontal-single.html">
<span>Horizontal Single</span>
</a>
</li>
<li>
<a href="layout-horizontal-overlay.html">
<span>Horizontal Overlay</span>
</a>
</li>
<li>
<a href="layout-horizontal-box.html">
<span>Horizontal Box</span>
</a>
</li>
<li>
<a href="layout-horizontal-sidemenu.html">
<span>Menu Aside</span>
</a>
</li>
<li>
<a href="layout-vertical-transparent.html">
<span>Transparent</span>
</a>
</li>
<li>
<a href="layout-without-header.html">
<span>Without Header</span>
</a>
</li>
<li>
<a href="layout-rtl.html">
<span>RTL</span>
</a>
</li>
<li>
<a href="layout-dark.html">
<span>Dark</span>
</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="clients-grid.html"><span>Clients</span>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="submenu">
<a href="call.html">Crm<span class="menu-arrow"></span></a>
<ul>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">Leaves<span class="menu-arrow"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Administration</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Settings</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">General Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Website Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">System Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Financial Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-page-break"></i><span>Pages</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
<li class="submenu">
<a href="#"><span>Content</span> <span class="menu-arrow"></span></a>
<ul>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>Authentication</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>UI Interface</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-hierarchy-2"></i>
<span>Base UI</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-accordion.html">Accordion</a>
</li>
<li>
<a href="ui-avatar.html">Avatar</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-borders.html">Border</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-buttons-group.html">Button Group</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-cards.html">Card</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-colors.html">Colors</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-images.html">Images</a>
</li>
<li>
<a href="ui-lightbox.html">Lightbox</a>
</li>
<li>
<a href="ui-media.html">Media</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-offcanvas.html">Offcanvas</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-spinner.html">Spinner</a>
</li>
<li>
<a href="ui-sweetalerts.html">Sweet Alerts</a>
</li>
<li>
<a href="ui-nav-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
<li>
<a href="ui-video.html">Video</a>
</li>
<li>
<a href="ui-sortable.html">Sortable</a>
</li>
<li>
<a href="ui-swiperjs.html">Swiperjs</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-hierarchy-3"></i>
<span>Advanced UI</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="ui-clipboard.html">Clipboard</a>
</li>
<li>
<a href="ui-drag-drop.html">Drag & Drop</a>
</li>
<li>
<a href="ui-rangeslider.html">Range Slider</a>
</li>
<li>
<a href="ui-rating.html">Rating</a>
</li>
<li>
<a href="ui-text-editor.html">Text Editor</a>
</li>
<li>
<a href="ui-counter.html">Counter</a>
</li>
<li>
<a href="ui-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="ui-stickynote.html">Sticky Note</a>
</li>
<li>
<a href="ui-timeline.html">Timeline</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-input-search"></i>
<span>Forms</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-basic-inputs.html">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html">Form Select</a>
</li>
<li>
<a href="form-mask.html">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span>
</a>
<ul>
<li>
<a href="form-horizontal.html">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html">Form Validation</a>
</li>
<li>
<a href="form-select2.html">Select2</a>
</li>
<li>
<a href="form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html">Form Pickers</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Tables</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="tables-basic.html">Basic Tables </a>
</li>
<li>
<a href="data-tables.html">Data Table </a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-chart-line"></i>
<span>Charts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="chart-apex.html">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html">Chart C3</a>
</li>
<li>
<a href="chart-js.html">Chart Js</a>
</li>
<li>
<a href="chart-morris.html">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-icons"></i>
<span>Icons</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="icon-fontawesome.html">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="xl:flex items-center d-none">
<a href="#" class="me-3 avatar avatar-sm">
<img src="assets/img/profiles/avatar-07.jpg" alt="profile" class="rounded-full">
</a>
<a href="#" class="btn btn-icon btn-sm rounded-full mode-toggle">
<i class="ti ti-sun"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /Horizontal Menu -->
<!-- Two Col Sidebar -->
<div class="two-col-sidebar" id="two-col-sidebar">
<div class="sidebar sidebar-twocol">
<div class="twocol-mini">
<a href="index.html" class="logo-small">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<div class="sidebar-left slimscroll">
<div class="nav flex flex-col items-center nav-pills" id="sidebar-tabs" data-tabs-toggle="#two-col-tabs" data-tabs-active-classes="bg-light text-default" role="tablist" >
<a href="#" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#dashboard" aria-selected="false">
<i class="ti ti-smart-home"></i>
</a>
<a href="#" class="nav-link" title="Apps" role="tab" data-tabs-target="#application" aria-selected="false">
<i class="ti ti-layout-grid-add"></i>
</a>
<a href="#" class="nav-link" title="Super Admin" role="tab" data-tabs-target="#super-admin" aria-selected="false">
<i class="ti ti-user-star"></i>
</a>
<a href="#" class="nav-link" title="Layout" role="tab" data-tabs-target="#layout" aria-selected="false">
<i class="ti ti-layout-board-split"></i>
</a>
<a href="#" class="nav-link" title="Projects" role="tab" data-tabs-target="#projects" aria-selected="false">
<i class="ti ti-users-group"></i>
</a>
<a href="#" class="nav-link" title="Crm" role="tab" data-tabs-target="#crm" aria-selected="false">
<i class="ti ti-user-shield"></i>
</a>
<a href="#" class="nav-link" title="Hrm" role="tab" data-tabs-target="#hrm" aria-selected="false">
<i class="ti ti-user"></i>
</a>
<a href="#" class="nav-link" title="Finance" role="tab" data-tabs-target="#finance" aria-selected="false">
<i class="ti ti-shopping-cart-dollar"></i>
</a>
<a href="#" class="nav-link" title="Administration" role="tab" data-tabs-target="#administration" aria-selected="false">
<i class="ti ti-cash"></i>
</a>
<a href="#" class="nav-link" title="Content" role="tab" data-tabs-target="#content" aria-selected="false">
<i class="ti ti-license"></i>
</a>
<a href="#" class="nav-link" title="Pages" role="tab" data-tabs-target="#pages" aria-selected="false">
<i class="ti ti-page-break"></i>
</a>
<a href="#" class="nav-link" title="Authentication" role="tab" data-tabs-target="#authentication" aria-selected="false">
<i class="ti ti-lock-check"></i>
</a>
<a href="#" class="nav-link " title="UI Elements" role="tab" data-tabs-target="#ui-elements" aria-selected="false">
<i class="ti ti-ux-circle"></i>
</a>
<a href="#" class="nav-link" title="Extras" role="tab" data-tabs-target="#extras" aria-selected="false">
<i class="ti ti-vector-triangle"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-right">
<div class="sidebar-logo mb-4">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<div class="sidebar-scroll">
<h6 class="mb-3">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="tab-content" id="two-col-tabs">
<div class="hidden" id="dashboard">
<ul>
<li class="menu-title"><span>MAIN MENU</span></li>
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</div>
<div class="hidden" id="application">
<ul>
<li class="menu-title"><span>APPLICATION</span></li>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</div>
<div class="hidden" id="super-admin">
<ul>
<li class="menu-title"><span>SUPER ADMIN</span></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</div>
<div class="hidden" id="layout">
<ul>
<li class="menu-title"><span>LAYOUT</span></li>
<li><a href="layout-horizontal.html"><span>Horizontal</span></a></li>
<li><a href="layout-detached.html"><span>Detached</span></a></li>
<li><a href="layout-modern.html"><span>Modern</span></a></li>
<li><a href="layout-two-column.html"><span>Two Column </span></a></li>
<li><a href="layout-hovered.html"><span>Hovered</span></a></li>
<li><a href="layout-box.html"><span>Boxed</span></a></li>
<li><a href="layout-horizontal-single.html"><span>Horizontal Single</span></a></li>
<li><a href="layout-horizontal-overlay.html"><span>Horizontal Overlay</span></a></li>
<li><a href="layout-horizontal-box.html"><span>Horizontal Box</span></a></li>
<li><a href="layout-horizontal-sidemenu.html"><span>Menu Aside</span></a></li>
<li><a href="layout-vertical-transparent.html"><span>Transparent</span></a></li>
<li><a href="layout-without-header.html"><span>Without Header</span></a></li>
<li><a href="layout-rtl.html"><span>RTL</span></a></li>
<li><a href="layout-dark.html"><span>Dark</span></a></li>
</ul>
</div>
<div class="hidden" id="projects">
<ul>
<li class="menu-title"><span>PROJECTS</span></li>
<li><a href="clients-grid.html">Clients</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="crm">
<ul>
<li class="menu-title"><span>CRM</span></li>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</div>
<div class="hidden" id="hrm">
<ul>
<li class="menu-title"><span>HRM</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Leaves<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</div>
<div class="hidden" id="finance">
<ul>
<li class="menu-title"><span>FINANCE & ACCOUNTS</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="administration">
<ul>
<li class="menu-title"><span>ADMINISTRATION</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
General Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Website Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
System Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Financial Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="content">
<ul>
<li class="menu-title"><span>CONTENT</span></li>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">
Blogs
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Blog Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Locations
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</div>
<div class="hidden" id="pages">
<ul>
<li class="menu-title"><span>PAGES</span></li>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
</ul>
</div>
<div class="hidden" id="authentication">
<ul>
<li class="menu-title"><span>AUTHENTICATION</span></li>
<li class="submenu">
<a href="javascript:void(0);">
Login<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Register<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Forgot Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Reset Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Email Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
2 Step Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</div>
<div class="hidden" id="ui-elements">
<ul>
<li class="menu-title"><span>UI INTERFACE</span></li>
<li class="submenu">
<a href="javascript:void(0);">Base UI<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-avatar.html">Avatar</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-borders.html">Border</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-buttons-group.html">Button Group</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-cards.html">Card</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-colors.html">Colors</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-offcanvas.html">Offcanvas</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popovers.html">Popovers</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="ui-nav-tabs.html">Tabs</a></li>
<li><a href="ui-tooltips.html">Tooltips</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-sortable.html">Sortable</a></li>
<li><a href="ui-swiperjs.html">Swiperjs</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Advanced UI <span class="menu-arrow"></span> </a>
<ul>
<li><a href="ui-clipboard.html">Clipboard</a></li>
<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-text-editor.html">Text Editor</a></li>
<li><a href="ui-counter.html">Counter</a></li>
<li><a href="ui-scrollbar.html">Scrollbar</a></li>
<li><a href="ui-stickynote.html">Sticky Note</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Forms <span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables <span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="extras">
<ul>
<li class="menu-title"><span>EXTRAS</span></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Two Col Sidebar -->
<!-- Stacked Sidebar -->
<div class="stacked-sidebar" id="stacked-sidebar">
<div class="sidebar sidebar-stacked flex">
<div class="stacked-mini">
<a href="index.html" class="logo-small flex items-center justify-center mb-5">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<div class="sidebar-left slimscroll">
<div class="flex items-center flex-col">
<div class="mb-1 notification-item">
<a href="#" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-bell"></i>
<span class="notification-status-dot"></span>
</a>
</div>
<div class="mb-1">
<a href="#" class="btn border after:btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent btnFullscreen">
<i class="ti ti-maximize"></i>
</a>
</div>
<div class="mb-1">
<a href="calendar.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="mb-1">
<a href="chat.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-brand-hipchat"></i>
<span class=" bg-info rounded-full flex items-center justify-center header-badge">5</span>
</a>
</div>
<div class="mb-1">
<a href="email.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-mail"></i>
</a>
</div>
</div>
</div>
</div>
<div class="sidebar-right flex justify-between flex-col bg-white pt-[16px] border-r h-screen w-[180px]">
<div class="sidebar-scroll px-[16px] pt-0">
<h6 class="mb-3 text-center">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="stack-menu relative">
<div class="nav flex-column items-center nav-pills" role="tablist" id="default-stack-styled-tab" data-tabs-toggle="#menu-stacked-bar" data-tabs-active-classes="bg-light text-default">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-6">
<a href="#menu-dashboard" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#menu-dashboard" aria-selected="false">
<span><i class="ti ti-smart-home"></i></span>
<p>Dashboard</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-application" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-application" aria-selected="false">
<span><i class="ti ti-layout-grid-add"></i></span>
<p>Applications</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-superadmin" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-superadmin" aria-selected="false">
<span><i class="ti ti-user-star"></i></span>
<p>Super Admin</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-layout" class="nav-link" title="Layout" role="tab" data-tabs-target="#menu-layout" aria-selected="false">
<span><i class="ti ti-layout-board-split"></i></span>
<p>Layouts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-project" class="nav-link" title="Projects" role="tab" data-tabs-target="#menu-project" aria-selected="false">
<span><i class="ti ti-folder"></i></span>
<p>Projects</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-crm" class="nav-link" title="CRM" role="tab" data-tabs-target="#menu-crm" aria-selected="false">
<span><i class="ti ti-user-shield"></i></span>
<p>Crm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-hrm" class="nav-link" title="HRM" role="tab" data-tabs-target="#menu-hrm" aria-selected="false">
<span><i class="ti ti-users"></i></span>
<p>Hrm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-finance" class="nav-link" title="Finance & Accounts" role="tab" data-tabs-target="#menu-finance" aria-selected="false">
<span><i class="ti ti-shopping-cart-dollar"></i></span>
<p>Finance & Accounts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-administration" class="nav-link" title="Administration" role="tab" data-tabs-target="#menu-administration" aria-selected="false">
<span><i class="ti ti-cash"></i></span>
<p>Administration</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-content" class="nav-link" title="Content" role="tab" data-tabs-target="#menu-content" aria-selected="false">
<span><i class="ti ti-license"></i></span>
<p>Contents</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-pages" class="nav-link" title="Pages" role="tab" data-tabs-target="#menu-pages" aria-selected="false">
<span><i class="ti ti-page-break"></i></span>
<p>Pages</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-authentication" class="nav-link" title="Authentication" role="tab" data-tabs-target="#menu-authentication" aria-selected="false">
<span><i class="ti ti-lock-check"></i></span>
<p>Authentication</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-ui-elements" class="nav-link" title="UI Elements" role="tab" data-tabs-target="#menu-ui-elements" aria-selected="false">
<span><i class="ti ti-ux-circle"></i></span>
<p>Basic UI</p>
</a>
</div>
</div>
</div>
<div class="tab-content" id="menu-stacked-bar">
<div class="hidden" id="menu-dashboard">
<ul class="stack-submenu">
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</div>
<div class="hidden" id="menu-superadmin">
<ul class="stack-submenu">
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</div>
<div class="hidden" id="menu-application">
<ul class="stack-submenu">
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="social-feed.html">Social Feed</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</div>
<div class="hidden" id="menu-layout">
<ul class="stack-submenu">
<li><a href="layout-horizontal.html">Horizontal</a></li>
<li><a href="layout-detached.html">Detached</a></li>
<li><a href="layout-modern.html">Modern</a></li>
<li><a href="layout-two-column.html">Two Column</a></li>
<li><a href="layout-hovered.html">Hovered</a></li>
<li><a href="layout-stacked.html">Stacked</a></li>
<li><a href="layout-box.html">Boxed</a></li>
<li><a href="layout-horizontal-single.html">Horizontal Single</a></li>
<li><a href="layout-horizontal-overlay.html">Horizontal Overlay</a></li>
<li><a href="layout-horizontal-box.html">Horizontal Box</a></li>
<li><a href="layout-horizontal-sidemenu.html">Menu Aside</a></li>
<li><a href="layout-vertical-transparent.html">Transparent</a></li>
<li><a href="layout-without-header.html">Without Header</a></li>
<li><a href="layout-rtl.html">RTL</a></li>
<li><a href="layout-dark.html">Dark</a></li>
</ul>
</div>
<div class="hidden" id="menu-project">
<ul class="stack-submenu">
<li><a href="clients-grid.html"><span>Clients</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-crm">
<ul class="stack-submenu">
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</div>
<div class="hidden" id="menu-hrm">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Leaves<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</div>
<div class="hidden" id="menu-finance">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-administration">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
General Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Website Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
System Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Financial Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-content">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</div>
<div class="hidden" id="menu-pages">
<ul class="stack-submenu">
<li><a href="starter.html">Starter</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="profile-settings.html">Profile Settings</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="under-maintenance.html">Under Maintenance</a></li>
<li><a href="under-construction.html">Under Construction</a></li>
<li><a href="api-keys.html">API Keys</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="terms-condition.html">Terms & Conditions</a></li>
</ul>
</div>
<div class="hidden" id="menu-authentication">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</div>
<div class="hidden" id="menu-ui-elements">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);">Base UI<span class="menu-arrow"></span></a>
<ul>
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-avatar.html">Avatar</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-borders.html">Border</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-buttons-group.html">Button Group</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-cards.html">Card</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-colors.html">Colors</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-offcanvas.html">Offcanvas</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popovers.html">Popovers</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="ui-nav-tabs.html">Tabs</a></li>
<li><a href="ui-tooltips.html">Tooltips</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-sortable.html">Sortable</a></li>
<li><a href="ui-swiperjs.html">Swiperjs</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Advanced UI<span class="menu-arrow"></span></a>
<ul>
<li><a href="ui-clipboard.html">Clipboard</a></li>
<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-text-editor.html">Text Editor</a></li>
<li><a href="ui-counter.html">Counter</a></li>
<li><a href="ui-scrollbar.html">Scrollbar</a></li>
<li><a href="ui-stickynote.html">Sticky Note</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Forms<span class="menu-arrow"></span> </a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a> </li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables<span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-3">
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal mb-3">Documentation</a>
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal">Change Log<span class="badge bg-pink text-[10px] font-medium px-[5px] leading-4 rounded text-white fs-10 ms-2">v4.0.8</span></a>
</div>
</div>
</div>
</div>
<!-- /Stacked Sidebar -->
<!-- Page Wrapper -->
<div class="page-wrapper cardhead relative pt-[50px] ml-[252px]">
<div class="content p-6">
<!-- Page Header -->
<div class="page-header mb-5">
<div class="grid">
<div class="col-12">
<h3 class="page-title">Ionic Icon</h3>
</div>
</div>
</div>
<!-- /Page Header -->
<div class="grid">
<!-- Chart -->
<div class="col-12">
<div class="card border-borderColor rounded-[5px] shadow-sm bg-white mb-6">
<div class="card-header py-4 px-5 border-b border-borderColor">
<div class="card-title">Ionic Icon</div>
</div>
<div class="card-body p-5">
<div class="icons-items">
<ul class="icons-list flex flex-wrap">
<li>
<i class="ion-ionic" data-tooltip-target="ion-ionic" data-tooltip-placement="top"></i>
<div id="ion-ionic" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ionic
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-up-a" data-tooltip-target="ion-arrow-up-a" data-tooltip-placement="top"></i>
<div id="ion-arrow-up-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-up-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-right-a" data-tooltip-target="ion-arrow-right-a" data-tooltip-placement="top"></i>
<div id="ion-arrow-right-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-right-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-down-a" data-tooltip-target="ion-arrow-down-a" data-tooltip-placement="top"></i>
<div id="ion-arrow-down-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-down-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-left-a" data-tooltip-target="ion-arrow-left-a" data-tooltip-placement="top"></i>
<div id="ion-arrow-left-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-left-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-up-b" data-tooltip-target="ion-arrow-up-b" data-tooltip-placement="top"></i>
<div id="ion-arrow-up-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-up-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-right-b" data-tooltip-target="ion-arrow-right-b" data-tooltip-placement="top"></i>
<div id="ion-arrow-right-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-right-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-down-b" data-tooltip-target="ion-arrow-down-b" data-tooltip-placement="top"></i>
<div id="ion-arrow-down-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-down-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-left-b" data-tooltip-target="ion-arrow-left-b" data-tooltip-placement="top"></i>
<div id="ion-arrow-left-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-left-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-up-c" data-tooltip-target="ion-arrow-up-c" data-tooltip-placement="top"></i>
<div id="ion-arrow-up-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-up-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-right-c" data-tooltip-target="ion-arrow-right-c" data-tooltip-placement="top"></i>
<div id="ion-arrow-right-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-right-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-down-c" data-tooltip-target="ion-arrow-down-c" data-tooltip-placement="top"></i>
<div id="ion-arrow-down-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-down-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-left-c" data-tooltip-target="ion-arrow-left-c" data-tooltip-placement="top"></i>
<div id="ion-arrow-left-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-left-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-return-right" data-tooltip-target="ion-arrow-return-right" data-tooltip-placement="top"></i>
<div id="ion-arrow-return-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-return-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-return-left" data-tooltip-target="ion-arrow-return-left" data-tooltip-placement="top"></i>
<div id="ion-arrow-return-left" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-return-left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-swap" data-tooltip-target="ion-arrow-swap" data-tooltip-placement="top"></i>
<div id="ion-arrow-swap" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-swap
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-shrink" data-tooltip-target="ion-arrow-shrink" data-tooltip-placement="top"></i>
<div id="ion-arrow-shrink" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-shrink
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-expand" data-tooltip-target="ion-arrow-expand" data-tooltip-placement="top"></i>
<div id="ion-arrow-expand" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-expand
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-move" data-tooltip-target="ion-arrow-move" data-tooltip-placement="top"></i>
<div id="ion-arrow-move" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-move
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-resize" data-tooltip-target="ion-arrow-resize" data-tooltip-placement="top"></i>
<div id="ion-arrow-resize" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-resize
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chevron-up" data-tooltip-target="ion-chevron-up" data-tooltip-placement="top"></i>
<div id="ion-chevron-up" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chevron-up
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chevron-right" data-tooltip-target="ion-chevron-right" data-tooltip-placement="top"></i>
<div id="ion-chevron-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chevron-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chevron-down" data-tooltip-target="ion-chevron-down" data-tooltip-placement="top"></i>
<div id="ion-chevron-down" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chevron-down
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chevron-left" data-tooltip-target="ion-chevron-left" data-tooltip-placement="top"></i>
<div id="ion-chevron-left" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chevron-left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-navicon-round" data-tooltip-target="ion-navicon-round" data-tooltip-placement="top"></i>
<div id="ion-navicon-round" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-navicon-round
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-navicon" data-tooltip-target="ion-navicon" data-tooltip-placement="top"></i>
<div id="ion-navicon" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-navicon
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-drag" data-tooltip-target="ion-drag" data-tooltip-placement="top"></i>
<div id="ion-drag" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-drag
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-log-in" data-tooltip-target="ion-log-in" data-tooltip-placement="top"></i>
<div id="ion-log-in" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-log-in
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-log-out" data-tooltip-target="ion-log-out" data-tooltip-placement="top"></i>
<div id="ion-log-out" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-log-out
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-checkmark-round" data-tooltip-target="ion-checkmark-round" data-tooltip-placement="top"></i>
<div id="ion-checkmark-round" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-checkmark-round
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-checkmark" data-tooltip-target="ion-checkmark" data-tooltip-placement="top"></i>
<div id="ion-checkmark" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-checkmark
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-checkmark-circled" data-tooltip-target="ion-checkmark-circled" data-tooltip-placement="top"></i>
<div id="ion-checkmark-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-checkmark-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-close-round" data-tooltip-target="ion-close-round" data-tooltip-placement="top"></i>
<div id="ion-close-round" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-close-round
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-close" data-tooltip-target="ion-close" data-tooltip-placement="top"></i>
<div id="ion-close" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-close
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-close-circled" data-tooltip-target="ion-close-circled" data-tooltip-placement="top"></i>
<div id="ion-close-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-close-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-plus-round" data-tooltip-target="ion-plus-round" data-tooltip-placement="top"></i>
<div id="ion-plus-round" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-plus-round
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-plus" data-tooltip-target="ion-plus" data-tooltip-placement="top"></i>
<div id="ion-plus" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-plus
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-plus-circled" data-tooltip-target="ion-plus-circled" data-tooltip-placement="top"></i>
<div id="ion-plus-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-plus-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-minus-round" data-tooltip-target="ion-minus-round" data-tooltip-placement="top"></i>
<div id="ion-minus-round" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-minus-round
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-minus" data-tooltip-target="ion-minus" data-tooltip-placement="top"></i>
<div id="ion-minus" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-minus
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-minus-circled" data-tooltip-target="ion-minus-circled" data-tooltip-placement="top"></i>
<div id="ion-minus-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-minus-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-information" data-tooltip-target="ion-information" data-tooltip-placement="top"></i>
<div id="ion-information" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-information
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-information-circled" data-tooltip-target="ion-information-circled" data-tooltip-placement="top"></i>
<div id="ion-information-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-information-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-help" data-tooltip-target="ion-help" data-tooltip-placement="top"></i>
<div id="ion-help" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-help
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-help-circled" data-tooltip-target="ion-help-circled" data-tooltip-placement="top"></i>
<div id="ion-help-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-help-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-help-buoy" data-tooltip-target="ion-help-buoy" data-tooltip-placement="top"></i>
<div id="ion-help-buoy" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-help-buoy
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-asterisk" data-tooltip-target="ion-asterisk" data-tooltip-placement="top"></i>
<div id="ion-asterisk" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-asterisk
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-alert" data-tooltip-target="ion-alert" data-tooltip-placement="top"></i>
<div id="ion-alert" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-alert
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-alert-circled" data-tooltip-target="ion-alert-circled" data-tooltip-placement="top"></i>
<div id="ion-alert-circled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-alert-circled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-refresh" data-tooltip-target="ion-refresh" data-tooltip-placement="top"></i>
<div id="ion-refresh" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-refresh
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-loop" data-tooltip-target="ion-loop" data-tooltip-placement="top"></i>
<div id="ion-loop" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-loop
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-shuffle" data-tooltip-target="ion-shuffle" data-tooltip-placement="top"></i>
<div id="ion-shuffle" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-shuffle
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-home" data-tooltip-target="ion-home" data-tooltip-placement="top"></i>
<div id="ion-home" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-home
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-search" data-tooltip-target="ion-search" data-tooltip-placement="top"></i>
<div id="ion-search" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-search
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-flag" data-tooltip-target="ion-flag" data-tooltip-placement="top"></i>
<div id="ion-flag" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-flag
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-star" data-tooltip-target="ion-star" data-tooltip-placement="top"></i>
<div id="ion-star" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-star
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-heart" data-tooltip-target="ion-heart" data-tooltip-placement="top"></i>
<div id="ion-heart" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-heart
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-heart-broken" data-tooltip-target="ion-heart-broken" data-tooltip-placement="top"></i>
<div id="ion-heart-broken" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-heart-broken
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-gear-a" data-tooltip-target="ion-gear-a" data-tooltip-placement="top"></i>
<div id="ion-gear-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-gear-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-gear-b" data-tooltip-target="ion-gear-b" data-tooltip-placement="top"></i>
<div id="ion-gear-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-gear-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-toggle-filled" data-tooltip-target="ion-toggle-filled" data-tooltip-placement="top"></i>
<div id="ion-toggle-filled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-toggle-filled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-toggle" data-tooltip-target="ion-toggle" data-tooltip-placement="top"></i>
<div id="ion-toggle" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-toggle
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-settings" data-tooltip-target="ion-settings" data-tooltip-placement="top"></i>
<div id="ion-settings" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-settings
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-wrench" data-tooltip-target="ion-wrench" data-tooltip-placement="top"></i>
<div id="ion-wrench" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-wrench
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-folder" data-tooltip-target="ion-folder" data-tooltip-placement="top"></i>
<div id="ion-folder" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-folder
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-hammer" data-tooltip-target="ion-hammer" data-tooltip-placement="top"></i>
<div id="ion-hammer" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-hammer
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-edit" data-tooltip-target="ion-edit" data-tooltip-placement="top"></i>
<div id="ion-edit" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-edit
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-trash-a" data-tooltip-target="ion-trash-a" data-tooltip-placement="top"></i>
<div id="ion-trash-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-trash-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-trash-b" data-tooltip-target="ion-trash-b" data-tooltip-placement="top"></i>
<div id="ion-trash-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-trash-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-document" data-tooltip-target="ion-document" data-tooltip-placement="top"></i>
<div id="ion-document" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-document
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-document-text" data-tooltip-target="ion-document-text" data-tooltip-placement="top"></i>
<div id="ion-document-text" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-document-text
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-clipboard" data-tooltip-target="ion-clipboard" data-tooltip-placement="top"></i>
<div id="ion-clipboard" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-clipboard
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-scissors" data-tooltip-target="ion-scissors" data-tooltip-placement="top"></i>
<div id="ion-scissors" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-scissors
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-funnel" data-tooltip-target="ion-funnel" data-tooltip-placement="top"></i>
<div id="ion-funnel" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-funnel
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-bookmark" data-tooltip-target="ion-bookmark" data-tooltip-placement="top"></i>
<div id="ion-bookmark" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-bookmark
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-email" data-tooltip-target="ion-email" data-tooltip-placement="top"></i>
<div id="ion-email" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-email
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-folder" data-tooltip-target="ion-folder" data-tooltip-placement="top"></i>
<div id="ion-folder" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-folder
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-filing" data-tooltip-target="ion-filing" data-tooltip-placement="top"></i>
<div id="ion-filing" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-filing
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-archive" data-tooltip-target="ion-archive" data-tooltip-placement="top"></i>
<div id="ion-archive" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-archive
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-reply" data-tooltip-target="ion-reply" data-tooltip-placement="top"></i>
<div id="ion-reply" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-reply
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-reply-all" data-tooltip-target="ion-reply-all" data-tooltip-placement="top"></i>
<div id="ion-reply-all" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-reply-all
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-forward" data-tooltip-target="ion-forward" data-tooltip-placement="top"></i>
<div id="ion-forward" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-forward
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-share" data-tooltip-target="ion-share" data-tooltip-placement="top"></i>
<div id="ion-share" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-share
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-paper-airplane" data-tooltip-target="ion-paper-airplane" data-tooltip-placement="top"></i>
<div id="ion-paper-airplane" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-paper-airplane
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-link" data-tooltip-target="ion-link" data-tooltip-placement="top"></i>
<div id="ion-link" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-link
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-paperclip" data-tooltip-target="ion-paperclip" data-tooltip-placement="top"></i>
<div id="ion-paperclip" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-paperclip
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-compose" data-tooltip-target="ion-compose" data-tooltip-placement="top"></i>
<div id="ion-compose" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-compose
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-briefcase" data-tooltip-target="ion-briefcase" data-tooltip-placement="top"></i>
<div id="ion-briefcase" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-briefcase
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-medkit" data-tooltip-target="ion-medkit" data-tooltip-placement="top"></i>
<div id="ion-medkit" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-medkit
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-at" data-tooltip-target="ion-at" data-tooltip-placement="top"></i>
<div id="ion-at" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-at
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pound" data-tooltip-target="ion-pound" data-tooltip-placement="top"></i>
<div id="ion-pound" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pound
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-quote" data-tooltip-target="ion-quote" data-tooltip-placement="top"></i>
<div id="ion-quote" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-quote
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-cloud" data-tooltip-target="ion-cloud" data-tooltip-placement="top"></i>
<div id="ion-cloud" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-cloud
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-upload" data-tooltip-target="ion-upload" data-tooltip-placement="top"></i>
<div id="ion-upload" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-upload
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-more" data-tooltip-target="ion-more" data-tooltip-placement="top"></i>
<div id="ion-more" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-more
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-grid" data-tooltip-target="ion-grid" data-tooltip-placement="top"></i>
<div id="ion-grid" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-grid
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-calendar" data-tooltip-target="ion-calendar" data-tooltip-placement="top"></i>
<div id="ion-calendar" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-calendar
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-clock" data-tooltip-target="ion-clock" data-tooltip-placement="top"></i>
<div id="ion-clock" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-clock
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-compass" data-tooltip-target="ion-compass" data-tooltip-placement="top"></i>
<div id="ion-compass" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-compass
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pinpoint" data-tooltip-target="ion-pinpoint" data-tooltip-placement="top"></i>
<div id="ion-pinpoint" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pinpoint
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pin" data-tooltip-target="ion-pin" data-tooltip-placement="top"></i>
<div id="ion-pin" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pin
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-navigate" data-tooltip-target="ion-navigate" data-tooltip-placement="top"></i>
<div id="ion-navigate" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-navigate
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-location" data-tooltip-target="ion-location" data-tooltip-placement="top"></i>
<div id="ion-location" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-location
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-map" data-tooltip-target="ion-map" data-tooltip-placement="top"></i>
<div id="ion-map" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-map
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-model-s" data-tooltip-target="ion-model-s" data-tooltip-placement="top"></i>
<div id="ion-model-s" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-model-s
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-locked" data-tooltip-target="ion-locked" data-tooltip-placement="top"></i>
<div id="ion-locked" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-locked
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-unlocked" data-tooltip-target="ion-unlocked" data-tooltip-placement="top"></i>
<div id="ion-unlocked" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-unlocked
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-key" data-tooltip-target="ion-key" data-tooltip-placement="top"></i>
<div id="ion-key" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-key
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-graph-up-right" data-tooltip-target="ion-arrow-graph-up-right" data-tooltip-placement="top"></i>
<div id="ion-arrow-graph-up-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-graph-up-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-graph-down-right" data-tooltip-target="ion-arrow-graph-down-right" data-tooltip-placement="top"></i>
<div id="ion-arrow-graph-down-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-graph-down-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-arrow-graph-down-left" data-tooltip-target="ion-arrow-graph-down-left" data-tooltip-placement="top"></i>
<div id="ion-arrow-graph-down-left" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-arrow-graph-down-left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-stats-bars" data-tooltip-target="ion-stats-bars" data-tooltip-placement="top"></i>
<div id="ion-stats-bars" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-stats-bars
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-connection-bars" data-tooltip-target="ion-connection-bars" data-tooltip-placement="top"></i>
<div id="ion-connection-bars" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-connection-bars
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pie-graph" data-tooltip-target="ion-pie-graph" data-tooltip-placement="top"></i>
<div id="ion-pie-graph" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pie-graph
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatbubble" data-tooltip-target="ion-chatbubble" data-tooltip-placement="top"></i>
<div id="" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatbubble-working" data-tooltip-target="ion-chatbubble-working" data-tooltip-placement="top"></i>
<div id="ion-chatbubble-working" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chatbubble-working
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatbubbles" data-tooltip-target="ion-chatbubbles" data-tooltip-placement="top"></i>
<div id="ion-chatbubbles" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chatbubbles
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatbox" data-tooltip-target="ion-chatbox" data-tooltip-placement="top"></i>
<div id="ion-chatbox" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chatbox
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatbox-working" data-tooltip-target="ion-chatbox-working" data-tooltip-placement="top"></i>
<div id="ion-chatbox-working" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chatbox-working
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-chatboxes" data-tooltip-target="ion-chatboxes" data-tooltip-placement="top"></i>
<div id="ion-chatboxes" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-chatboxes
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-person" data-tooltip-target="ion-person" data-tooltip-placement="top"></i>
<div id="ion-person" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-person
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-person-add" data-tooltip-target="ion-person-add" data-tooltip-placement="top"></i>
<div id="ion-person-add" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-person-add
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-person-stalker" data-tooltip-target="ion-person-stalker" data-tooltip-placement="top"></i>
<div id="ion-person-stalker" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-person-stalker
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-woman" data-tooltip-target="ion-woman" data-tooltip-placement="top"></i>
<div id="ion-woman" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-woman
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-man" data-tooltip-target="ion-man" data-tooltip-placement="top"></i>
<div id="ion-man" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-man
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-female" data-tooltip-target="ion-female" data-tooltip-placement="top"></i>
<div id="ion-female" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-female
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-male" data-tooltip-target="ion-male" data-tooltip-placement="top"></i>
<div id="ion-male" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-male
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-fork" data-tooltip-target="ion-fork" data-tooltip-placement="top"></i>
<div id="ion-fork" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-fork
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-knife" data-tooltip-target="ion-knife" data-tooltip-placement="top"></i>
<div id="ion-knife" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-knife
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-spoon" data-tooltip-target="ion-spoon" data-tooltip-placement="top"></i>
<div id="ion-spoon" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-spoon
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-beer" data-tooltip-target="ion-beer" data-tooltip-placement="top"></i>
<div id="ion-beer" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-beer
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-wineglass" data-tooltip-target="ion-wineglass" data-tooltip-placement="top"></i>
<div id="ion-wineglass" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-wineglass
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-coffee" data-tooltip-target="ion-coffee" data-tooltip-placement="top"></i>
<div id="ion-coffee" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-coffee
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-icecream" data-tooltip-target="ion-icecream" data-tooltip-placement="top"></i>
<div id="ion-icecream" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-icecream
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pizza" data-tooltip-target="ion-pizza" data-tooltip-placement="top"></i>
<div id="ion-pizza" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pizza
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-power" data-tooltip-target="ion-power" data-tooltip-placement="top"></i>
<div id="ion-power" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-power
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-mouse" data-tooltip-target="ion-mouse" data-tooltip-placement="top"></i>
<div id="ion-mouse" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-mouse
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-battery-full" data-tooltip-target="ion-battery-full" data-tooltip-placement="top"></i>
<div id="ion-battery-full" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-battery-full
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-battery-half" data-tooltip-target="ion-battery-half" data-tooltip-placement="top"></i>
<div id="ion-battery-half" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-battery-half
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-battery-low" data-tooltip-target="ion-battery-low" data-tooltip-placement="top"></i>
<div id="ion-battery-low" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-battery-low
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-battery-empty" data-tooltip-target="ion-battery-empty" data-tooltip-placement="top"></i>
<div id="ion-battery-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-battery-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-battery-charging" data-tooltip-target="ion-battery-charging" data-tooltip-placement="top"></i>
<div id="ion-battery-charging" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-battery-charging
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-bluetooth" data-tooltip-target="ion-bluetooth" data-tooltip-placement="top"></i>
<div id="ion-bluetooth" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-bluetooth
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-calculator" data-tooltip-target="ion-calculator" data-tooltip-placement="top"></i>
<div id="ion-calculator" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-calculator
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-camera" data-tooltip-target="ion-camera" data-tooltip-placement="top"></i>
<div id="ion-camera" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-camera
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-eye" data-tooltip-target="ion-eye" data-tooltip-placement="top"></i>
<div id="ion-eye" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-eye
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-eye-disabled" data-tooltip-target="ion-eye-disabled" data-tooltip-placement="top"></i>
<div id="ion-eye-disabled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-eye-disabled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-flash" data-tooltip-target="ion-flash" data-tooltip-placement="top"></i>
<div id="ion-flash" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-flash
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-flash-off" data-tooltip-target="ion-flash-off" data-tooltip-placement="top"></i>
<div id="ion-flash-off" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-flash-off
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-qr-scanner" data-tooltip-target="ion-qr-scanner" data-tooltip-placement="top"></i>
<div id="ion-qr-scanner" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-qr-scanner
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-image" data-tooltip-target="ion-image" data-tooltip-placement="top"></i>
<div id="ion-image" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-image
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-images" data-tooltip-target="ion-images" data-tooltip-placement="top"></i>
<div id="ion-images" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-images
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-contrast" data-tooltip-target="ion-contrast" data-tooltip-placement="top"></i>
<div id="ion-contrast" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-contrast
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-wand" data-tooltip-target="ion-wand" data-tooltip-placement="top"></i>
<div id="ion-wand" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-wand
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-aperture" data-tooltip-target="ion-aperture" data-tooltip-placement="top"></i>
<div id="ion-aperture" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-aperture
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-monitor" data-tooltip-target="ion-monitor" data-tooltip-placement="top"></i>
<div id="ion-monitor" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-monitor
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-laptop" data-tooltip-target="ion-laptop" data-tooltip-placement="top"></i>
<div id="ion-laptop" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-laptop
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ipad" data-tooltip-target="ion-ipad" data-tooltip-placement="top"></i>
<div id="ion-ipad" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ipad
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-iphone" data-tooltip-target="ion-iphone" data-tooltip-placement="top"></i>
<div id="ion-iphone" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-iphone
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ipod" data-tooltip-target="ion-ipod" data-tooltip-placement="top"></i>
<div id="ion-ipod" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ipod
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-printer" data-tooltip-target="ion-printer" data-tooltip-placement="top"></i>
<div id="ion-printer" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-printer
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-usb" data-tooltip-target="ion-usb" data-tooltip-placement="top"></i>
<div id="ion-usb" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-usb
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-outlet" data-tooltip-target="ion-outlet" data-tooltip-placement="top"></i>
<div id="ion-outlet" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-outlet
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-bug" data-tooltip-target="ion-bug" data-tooltip-placement="top"></i>
<div id="ion-bug" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-bug
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-code" data-tooltip-target="ion-code" data-tooltip-placement="top"></i>
<div id="ion-code" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-code
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-code-working" data-tooltip-target="ion-code-working" data-tooltip-placement="top"></i>
<div id="ion-code-working" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-code-working
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-code-download" data-tooltip-target="ion-code-download" data-tooltip-placement="top"></i>
<div id="ion-code-download" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-code-download
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-fork-repo" data-tooltip-target="ion-fork-repo" data-tooltip-placement="top"></i>
<div id="ion-fork-repo" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-fork-repo
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-network" data-tooltip-target="ion-network" data-tooltip-placement="top"></i>
<div id="ion-network" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-network
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pull-request" data-tooltip-target="ion-pull-request" data-tooltip-placement="top"></i>
<div id="ion-pull-request" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pull-request
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-merge" data-tooltip-target="ion-merge" data-tooltip-placement="top"></i>
<div id="ion-merge" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-merge
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-game-controller-a" data-tooltip-target="ion-game-controller-a" data-tooltip-placement="top"></i>
<div id="ion-game-controller-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-game-controller-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-game-controller-b" data-tooltip-target="ion-game-controller-b" data-tooltip-placement="top"></i>
<div id="ion-game-controller-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-game-controller-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-xbox" data-tooltip-target="ion-xbox" data-tooltip-placement="top"></i>
<div id="ion-xbox" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-xbox
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-playstation" data-tooltip-target="ion-playstation" data-tooltip-placement="top"></i>
<div id="ion-playstation" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-playstation
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-steam" data-tooltip-target="ion-steam" data-tooltip-placement="top"></i>
<div id="ion-steam" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-steam
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-closed-captioning" data-tooltip-target="ion-closed-captioning" data-tooltip-placement="top"></i>
<div id="ion-closed-captioning" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-closed-captioning
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-videocamera" data-tooltip-target="ion-videocamera" data-tooltip-placement="top"></i>
<div id="ion-videocamera" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-videocamera
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-film-marker" data-tooltip-target="ion-film-marker" data-tooltip-placement="top"></i>
<div id="ion-film-marker" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-film-marker
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-disc" data-tooltip-target="ion-disc" data-tooltip-placement="top"></i>
<div id="ion-disc" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-disc
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-headphone" data-tooltip-target="ion-headphone" data-tooltip-placement="top"></i>
<div id="ion-headphone" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-headphone
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-music-note" data-tooltip-target="ion-music-note" data-tooltip-placement="top"></i>
<div id="ion-music-note" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-music-note
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-radio-waves" data-tooltip-target="ion-radio-waves" data-tooltip-placement="top"></i>
<div id="ion-radio-waves" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-radio-waves
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-speakerphone" data-tooltip-target="ion-speakerphone" data-tooltip-placement="top"></i>
<div id="ion-speakerphone" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-speakerphone
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-mic-a" data-tooltip-target="ion-mic-a" data-tooltip-placement="top"></i>
<div id="ion-mic-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-mic-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-mic-b" data-tooltip-target="ion-mic-b" data-tooltip-placement="top"></i>
<div id="ion-mic-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-mic-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-mic-c" data-tooltip-target="ion-mic-c" data-tooltip-placement="top"></i>
<div id="ion-mic-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-mic-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-volume-high" data-tooltip-target="ion-volume-high" data-tooltip-placement="top"></i>
<div id="ion-volume-high" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-volume-high
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-volume-medium" data-tooltip-target="ion-volume-medium" data-tooltip-placement="top"></i>
<div id="ion-volume-medium" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-volume-medium
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-volume-low" data-tooltip-target="ion-volume-low" data-tooltip-placement="top"></i>
<div id="ion-volume-low" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-volume-low
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-volume-mute" data-tooltip-target="ion-volume-mute" data-tooltip-placement="top"></i>
<div id="ion-volume-mute" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-volume-mute
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-levels" data-tooltip-target="ion-levels" data-tooltip-placement="top"></i>
<div id="ion-levels" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-levels
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-play" data-tooltip-target="ion-play" data-tooltip-placement="top"></i>
<div id="ion-play" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-play
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pause" data-tooltip-target="ion-pause" data-tooltip-placement="top"></i>
<div id="ion-pause" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pause
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-stop" data-tooltip-target="ion-stop" data-tooltip-placement="top"></i>
<div id="ion-stop" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-stop
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-record" data-tooltip-target="ion-record" data-tooltip-placement="top"></i>
<div id="ion-record" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-record
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-skip-forward" data-tooltip-target="ion-skip-forward" data-tooltip-placement="top"></i>
<div id="ion-skip-forward" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-skip-forward
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-skip-backward" data-tooltip-target="ion-skip-backward" data-tooltip-placement="top"></i>
<div id="ion-skip-backward" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-skip-backward
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-eject" data-tooltip-target="ion-eject" data-tooltip-placement="top"></i>
<div id="ion-eject" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-eject
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-bag" data-tooltip-target="ion-bag" data-tooltip-placement="top"></i>
<div id="ion-bag" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-card" data-tooltip-target="ion-card" data-tooltip-placement="top"></i>
<div id="ion-card" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-card
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-cash" data-tooltip-target="ion-cash" data-tooltip-placement="top"></i>
<div id="ion-cash" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-cash
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pricetag" data-tooltip-target="ion-pricetag" data-tooltip-placement="top"></i>
<div id="ion-pricetag" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pricetag
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-pricetags" data-tooltip-target="ion-pricetags" data-tooltip-placement="top"></i>
<div id="ion-pricetags" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-pricetags
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-thumbsup" data-tooltip-target="ion-thumbsup" data-tooltip-placement="top"></i>
<div id="ion-thumbsup" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-thumbsup
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-thumbsdown" data-tooltip-target="ion-thumbsdown" data-tooltip-placement="top"></i>
<div id="ion-thumbsdown" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-thumbsdown
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-happy" data-tooltip-target="ion-happy" data-tooltip-placement="top"></i>
<div id="ion-happy" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-happy
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-sad" data-tooltip-target="ion-sad" data-tooltip-placement="top"></i>
<div id="ion-sad" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-sad
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-trophy" data-tooltip-target="ion-trophy" data-tooltip-placement="top"></i>
<div id="ion-trophy" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-trophy
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-podium" data-tooltip-target="ion-podium" data-tooltip-placement="top"></i>
<div id="ion-podium" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-podium
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ribbon-a" data-tooltip-target="ion-ribbon-a" data-tooltip-placement="top"></i>
<div id="ion-ribbon-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ribbon-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ribbon-b" data-tooltip-target="ion-ribbon-b" data-tooltip-placement="top"></i>
<div id="ion-ribbon-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ribbon-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-university" data-tooltip-target="ion-university" data-tooltip-placement="top"></i>
<div id="ion-university" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-university
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-magnet" data-tooltip-target="ion-magnet" data-tooltip-placement="top"></i>
<div id="ion-magnet" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-magnet
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-beaker" data-tooltip-target="ion-beaker" data-tooltip-placement="top"></i>
<div id="ion-beaker" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-beaker
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-flask" data-tooltip-target="ion-flask" data-tooltip-placement="top"></i>
<div id="ion-flask" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-flask
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-egg" data-tooltip-target="ion-egg" data-tooltip-placement="top"></i>
<div id="ion-egg" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-egg
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-earth" data-tooltip-target="ion-earth" data-tooltip-placement="top"></i>
<div id="ion-earth" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-earth
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-planet" data-tooltip-target="ion-planet" data-tooltip-placement="top"></i>
<div id="ion-planet" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-planet
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-lightbulb" data-tooltip-target="ion-lightbulb" data-tooltip-placement="top"></i>
<div id="ion-lightbulb" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-lightbulb
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-cube" data-tooltip-target="ion-cube" data-tooltip-placement="top"></i>
<div id="ion-cube" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-cube
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-leaf" data-tooltip-target="ion-leaf" data-tooltip-placement="top"></i>
<div id="ion-leaf" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-leaf
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-waterdrop" data-tooltip-target="ion-waterdrop" data-tooltip-placement="top"></i>
<div id="ion-waterdrop" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-waterdrop
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-flame" data-tooltip-target="ion-flame" data-tooltip-placement="top"></i>
<div id="ion-flame" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-flame
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-fireball" data-tooltip-target="ion-fireball" data-tooltip-placement="top"></i>
<div id="ion-fireball" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-fireball
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-bonfire" data-tooltip-target="ion-bonfire" data-tooltip-placement="top"></i>
<div id="ion-bonfire" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-bonfire
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-umbrella" data-tooltip-target="ion-umbrella" data-tooltip-placement="top"></i>
<div id="ion-umbrella" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-umbrella
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-nuclear" data-tooltip-target="ion-nuclear" data-tooltip-placement="top"></i>
<div id="ion-nuclear" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-nuclear
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-no-smoking" data-tooltip-target="ion-no-smoking" data-tooltip-placement="top"></i>
<div id="ion-no-smoking" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-no-smoking
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-thermometer" data-tooltip-target="ion-thermometer" data-tooltip-placement="top"></i>
<div id="ion-thermometer" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-thermometer
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-speedometer" data-tooltip-target="ion-speedometer" data-tooltip-placement="top"></i>
<div id="ion-speedometer" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-speedometer
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-plane" data-tooltip-target="ion-plane" data-tooltip-placement="top"></i>
<div id="ion-plane" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-plane
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-jet" data-tooltip-target="ion-jet" data-tooltip-placement="top"></i>
<div id="ion-jet" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-jet
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-load-a" data-tooltip-target="ion-load-a" data-tooltip-placement="top"></i>
<div id="ion-load-a" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-load-a
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-load-b" data-tooltip-target="ion-load-b" data-tooltip-placement="top"></i>
<div id="ion-load-b" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-load-b
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-load-c" data-tooltip-target="ion-load-c" data-tooltip-placement="top"></i>
<div id="ion-load-c" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-load-c
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-load-d" data-tooltip-target="ion-load-d" data-tooltip-placement="top"></i>
<div id="ion-load-d" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-load-d
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-ionic-outline" data-tooltip-target="ion-ios7-ionic-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-ionic-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-ionic-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-back" data-tooltip-target="ion-ios7-arrow-back" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-back" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-back
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-forward" data-tooltip-target="ion-ios7-arrow-forward" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-forward" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-forward
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-up" data-tooltip-target="ion-ios7-arrow-up" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-up" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-up
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-right" data-tooltip-target="ion-ios7-arrow-right" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-down" data-tooltip-target="ion-ios7-arrow-down" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-down" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-down
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-left" data-tooltip-target="ion-ios7-arrow-left" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-left" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-thin-up" data-tooltip-target="ion-ios7-arrow-thin-up" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-thin-up" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-thin-up
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-thin-right" data-tooltip-target="ion-ios7-arrow-thin-right" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-thin-right" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-thin-right
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-thin-down" data-tooltip-target="ion-ios7-arrow-thin-down" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-thin-down" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-thin-down
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-arrow-thin-left" data-tooltip-target="ion-ios7-arrow-thin-left" data-tooltip-placement="top"></i>
<div id="ion-ios7-arrow-thin-left" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-arrow-thin-left
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-circle-filled" data-tooltip-target="ion-ios7-circle-filled" data-tooltip-placement="top"></i>
<div id="ion-ios7-circle-filled" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-circle-filled
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-circle-outline" data-tooltip-target="ion-ios7-circle-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-circle-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-circle-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-checkmark-empty" data-tooltip-target="ion-ios7-checkmark-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-checkmark-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-checkmark-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-checkmark-outline" data-tooltip-target="ion-ios7-checkmark-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-checkmark-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-checkmark-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-checkmark" data-tooltip-target="ion-ios7-checkmark" data-tooltip-placement="top"></i>
<div id="ion-ios7-checkmark" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-checkmark
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-plus-empty" data-tooltip-target="ion-ios7-plus-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-plus-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-plus-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-plus-outline" data-tooltip-target="ion-ios7-plus-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-plus-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-plus-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-plus" data-tooltip-target="ion-ios7-plus" data-tooltip-placement="top"></i>
<div id="ion-ios7-plus" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-plus
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-close-empty" data-tooltip-target="ion-ios7-close-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-close-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-close-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-close-outline" data-tooltip-target="ion-ios7-close-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-close-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-close-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-close" data-tooltip-target="ion-ios7-close" data-tooltip-placement="top"></i>
<div id="ion-ios7-close" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-close
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-minus-empty" data-tooltip-target="ion-ios7-minus-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-minus-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-minus-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-minus-outline" data-tooltip-target="ion-ios7-minus-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-minus-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-minus-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-minus" data-tooltip-target="ion-ios7-minus" data-tooltip-placement="top"></i>
<div id="ion-ios7-minus" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-minus
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-information-empty" data-tooltip-target="ion-ios7-information-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-information-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-information-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-information-outline" data-tooltip-target="ion-ios7-information-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-information-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-information-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-information" data-tooltip-target="ion-ios7-information" data-tooltip-placement="top"></i>
<div id="ion-ios7-information" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-information
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-help-empty" data-tooltip-target="ion-ios7-help-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-help-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-help-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-help-outline" data-tooltip-target="ion-ios7-help-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-help-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-help-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-help" data-tooltip-target="ion-ios7-help" data-tooltip-placement="top"></i>
<div id="ion-ios7-help" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-help
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-search" data-tooltip-target="ion-ios7-search" data-tooltip-placement="top"></i>
<div id="ion-ios7-search" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-search
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-search-strong" data-tooltip-target="ion-ios7-search-strong" data-tooltip-placement="top"></i>
<div id="ion-ios7-search-strong" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-search-strong
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-star" data-tooltip-target="ion-ios7-star" data-tooltip-placement="top"></i>
<div id="ion-ios7-star" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-star
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-star-half" data-tooltip-target="ion-ios7-star-half" data-tooltip-placement="top"></i>
<div id="ion-ios7-star-half" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-star-half
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-star-outline" data-tooltip-target="ion-ios7-star-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-star-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-star-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-heart" data-tooltip-target="ion-ios7-heart" data-tooltip-placement="top"></i>
<div id="ion-ios7-heart" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-heart
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-heart-outline" data-tooltip-target="ion-ios7-heart-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-heart-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-heart-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-more" data-tooltip-target="ion-ios7-more" data-tooltip-placement="top"></i>
<div id="ion-ios7-more" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-more
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-more-outline" data-tooltip-target="ion-ios7-more-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-more-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-more-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-home" data-tooltip-target="ion-ios7-home" data-tooltip-placement="top"></i>
<div id="ion-ios7-home" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-home
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-home-outline" data-tooltip-target="ion-ios7-home-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-home-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-home-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud" data-tooltip-target="ion-ios7-cloud" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud-outline" data-tooltip-target="ion-ios7-cloud-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud-upload" data-tooltip-target="ion-ios7-cloud-upload" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud-upload" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud-upload
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud-upload-outline" data-tooltip-target="ion-ios7-cloud-upload-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud-upload-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud-upload-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud-download" data-tooltip-target="ion-ios7-cloud-download" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud-download" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud-download
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-cloud-download-outline" data-tooltip-target="ion-ios7-cloud-download-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-cloud-download-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-cloud-download-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-upload" data-tooltip-target="ion-ios7-upload" data-tooltip-placement="top"></i>
<div id="ion-ios7-upload" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-upload
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-upload-outline" data-tooltip-target="ion-ios7-upload-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-upload-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-upload-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-download" data-tooltip-target="ion-ios7-download" data-tooltip-placement="top"></i>
<div id="ion-ios7-download" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-download
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-refresh" data-tooltip-target="ion-ios7-refresh" data-tooltip-placement="top"></i>
<div id="ion-ios7-refresh" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-refresh
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-refresh-outline" data-tooltip-target="ion-ios7-refresh-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-refresh-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-refresh-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-refresh-empty" data-tooltip-target="ion-ios7-refresh-empty" data-tooltip-placement="top"></i>
<div id="ion-ios7-refresh-empty" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-refresh-empty
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-reload" data-tooltip-target="ion-ios7-reload" data-tooltip-placement="top"></i>
<div id="ion-ios7-reload" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-reload
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-loop-strong" data-tooltip-target="ion-ios7-loop-strong" data-tooltip-placement="top"></i>
<div id="ion-ios7-loop-strong" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-loop-strong
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-loop" data-tooltip-target="ion-ios7-loop" data-tooltip-placement="top"></i>
<div id="ion-ios7-loop" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-loop
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-bookmarks" data-tooltip-target="ion-ios7-bookmarks" data-tooltip-placement="top"></i>
<div id="ion-ios7-bookmarks" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-bookmarks
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
<li>
<i class="ion-ios7-bookmarks-outline" data-tooltip-target="ion-ios7-bookmarks-outline" data-tooltip-placement="top"></i>
<div id="ion-ios7-bookmarks-outline" role="tooltip" class="absolute z-10 invisible inline-block px-2 py-1 text-sm text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
ion-ios7-bookmarks-outline
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Chart -->
</div>
</div>
<div class="footer flex items-center justify-between border-top bg-white p-3">
<p class="mb-0">2014 - 2025 © SmartHR.</p>
<p>Designed & Developed By <a href="javascript:void(0);" class="text-primary">Dreams</a></p>
</div>
</div>
<!-- /page wrapper -->
</div>
<!-- /Main Wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>
<!-- Slimscroll JS -->
<script src="assets/js/jquery.slimscroll.min.js"></script>
<!-- Color Picker JS -->
<script src="assets/plugins/@simonwep/pickr/pickr.es5.min.js"></script>
<!-- Daterangepikcer JS -->
<script src="assets/js/moment.min.js"></script>
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flowbite JS -->
<script src="assets/js/flowbite.min.js"></script>
<!-- Custom JS -->
<script src="assets/js/theme-colorpicker.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>