File: /mnt/data/smarthr-co-in/demo/tailwind/template/src/notes.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">
<!-- Flowbite CSS -->
<link rel="stylesheet" href="assets/css/flowbite.min.css">
<!-- Datatable CSS -->
<link rel="stylesheet" href="assets/css/dataTables.tailwindcss.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.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">
<!-- 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">
<!-- 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="#" >
<i class="ti ti-smart-home"></i><span>Dashboard</span>
<span class="menu-arrow"></span>
</a>
<ul>
<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>
</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);" class="active"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html" class="active">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>
</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 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></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">This
Week</a>
</li>
<li>
<a href="javascript:void(0);"
class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">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);" data-dropdown-toggle="mobile-dropdown"><i class="fa fa-ellipsis-v"></i></a>
<ul id="mobile-dropdown" class="hidden p-1 border rounded bg-white shadow-lg w-40 z-[1]">
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="profile.html">My Profile</a></li>
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="profile-settings.html">Settings</a></li>
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="login.html">Logout</a></li>
</ul>
</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="active subdrop 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="active 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 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">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></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></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></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></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></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></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></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></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 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 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></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></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></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 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></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="true">
<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" 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>
</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="true">
<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" 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>
</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 relative pt-[50px] ml-[252px]">
<div class="content p-6">
<!-- Breadcrumb -->
<div class="md:flex block items-center justify-between page-breadcrumb mb-4">
<div class="my-auto mb-2">
<h2 class="mb-1">Notes</h2>
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2">
<li class="inline-flex items-center">
<a href="index.html"
class="inline-flex items-center text-xs text-gray-500 hover:text-primary">
<i class="ti ti-smart-home"></i>
</a>
</li>
<li>
<span class="text-default">/</span>
</li>
<li class="text-xs text-default">Application</li>
<li>
<span class="text-default">/</span>
</li>
<li aria-current="page" class="text-xs text-gray-900">Notes</li>
</ol>
</nav>
</div>
<div class="flex my-xl-auto right-content items-center flex-wrap ">
<div class="flex my-xl-auto right-content items-center flex-wrap ">
<div class="me-2 mb-2">
<div>
<a href="javascript:void(0);" class="border rounded p-2 bg-white inline-flex items-center focus:bg-primary focus:border-primary focus:text-white text-gray-900" data-dropdown-toggle="export-dropdown">
<i class="ti ti-file-export me-1"></i>Export<i class="ti ti-chevron-down ml-1"></i>
</a>
<ul id="export-dropdown" class="hidden p-4 border rounded bg-white shadow-lg">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900"><i class="ti ti-file-type-pdf me-1"></i>Export as PDF</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"><i class="ti ti-file-type-xls me-1"></i>Export as Excel </a>
</li>
</ul>
</div>
</div>
<div class="mb-2">
<a href="#" data-modal-target="add_notes" data-modal-toggle="add_notes" class="flex items-center bg-primary text-sm font-medium py-2 rounded text-white px-3 hover:bg-primary-900 hover:text-white"><i class="ti ti-circle-plus me-2"></i>Add Notes</a>
</div>
<div class="head-icons ml-2 mb-2">
<a href="javascript:void(0);"
class="border flex items-center justify-center rounded bg-white w-9 h-9 hover:bg-primary hover:text-white hover:border-primary"
data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Collapse"
id="collapse-headers">
<i class="ti ti-chevrons-up"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /Breadcrumb -->
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-6">
<div class="xl:col-span-3 md:col-span-6 w-full theiaStickySidebar top-0 bg-white border rounded-lg p-4">
<div class="mb-4 pb-4 border-b">
<h4 class="flex items-center text-md font-semibold"><i class="ti ti-file-text mr-2"></i>Notes List</h4>
</div>
<div class="border-b pb-4">
<div class="flex flex-col space-y-2" data-tabs-toggle="#default-styled-tab-content" data-tabs-active-classes="text-white bg-dark hover:text-white bg-dark" data-tabs-inactive-classes="text-gray hover:text-white hover:bg-dark" role="tablist">
<button
class="flex items-center text-left font-medium text-white py-2 px-4 rounded-md bg-dark hover:bg-dark"
id="basic-tab" data-tabs-target="#basic" type="button" role="tab" aria-selected="false">
<i class="ti ti-inbox mr-2"></i>All Notes <span class="ml-2 text-sm text-white">1</span>
</button>
<button class="flex items-center text-left font-medium text-gray py-2 px-4 rounded-md hover:bg-dark hover:text-white"
data-tabs-target="#styled-dashboard" type="button" role="tab" aria-selected="false"
aria-controls="v-pills-messages" aria-selected="false">
<i class="ti ti-star mr-2"></i>Important
</button>
<button class="flex items-center text-left font-medium text-gray py-2 px-4 rounded-md hover:bg-dark hover:text-white"
data-tabs-target="#styled-settings" type="button" role="tab" aria-selected="false"
aria-controls="v-pills-settings" aria-selected="false">
<i class="ti ti-trash mr-2"></i>Trash
</button>
</div>
</div>
<div class="mt-3">
<div class="border-bottom px-2 mb-3 border-b pb-4">
<h5 class="mb-3 text-md">Tags</h5>
<div class="flex flex-col space-y-2">
<a href="javascript:void(0);" class="text-info flex items-center">
<span class="text-info mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Pending
</a>
<a href="javascript:void(0);" class="text-danger flex items-center">
<span class="text-danger mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Onhold
</a>
<a href="javascript:void(0);" class="text-warning flex items-center">
<span class="text-warning mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Inprogress
</a>
<a href="javascript:void(0);" class="text-success flex items-center">
<span class="text-success mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Done
</a>
</div>
</div>
<div class="px-2">
<h5 class="mb-4 text-lg">Priority</h5>
<div class="flex flex-col space-y-2">
<a href="javascript:void(0);" class="text-warning flex items-center">
<span class="text-warning mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Medium
</a>
<a href="javascript:void(0);" class="text-success flex items-center">
<span class="text-success mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>High
</a>
<a href="javascript:void(0);" class="text-danger flex items-center">
<span class="text-danger mr-2"><i class="fas fa-square rotate-45 text-xs"></i></span>Low
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-9 md:col-span-9">
<div class="bg-white rounded-lg flex items-center justify-between flex-wrap mb-4 p-4 pb-0">
<div class="flex items-center mb-4">
<div class="mr-4">
<select class="select border border-gray-300 rounded-md p-2 text-sm">
<option>Bulk Actions</option>
<option>Delete Marked</option>
<option>Unmark All</option>
<option>Mark All</option>
</select>
</div>
<a href="#" class="bg-gray-100 text-gray-800 hover:bg-gray-200 py-2 px-4 rounded-md text-sm">
Apply
</a>
</div>
<div class="form-sort flex items-center mb-4 relative">
<i class="ti ti-filter text-gray-500 absolute y-3 left-[10px] z-10"></i>
<select class="select">
<option>Recent</option>
<option>Last Modified</option>
<option>Last Modified by me</option>
</select>
</div>
</div>
<div id="default-styled-tab-content">
<div class="hidden " id="basic" role="tabpanel">
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-6">
<div class="xl:col-span-12 md:col-span-12">
<div class="flex items-center justify-between flex-wrap">
<div class="flex items-center mb-3">
<h4 class="text-md font-semibold">Important Notes</h4>
<div class="owl-nav slide-nav5 text-end nav-control ms-3"></div>
</div>
<div class="notes-close mb-3">
<a href="javascript:void(0);" class="text-red-600 text-md">
<i class="fas fa-times mr-1"></i> Close
</a>
</div>
</div>
</div>
<div class="xl:col-span-12 md:col-span-12">
<div class="notes-slider owl-carousel">
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown1">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown1" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Backup Files EOD</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>20 Jan 2024</p>
<p class="text-gray-600">Project files should be took backup before end of the day.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-05.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown2">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown2" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Download Server Logs</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>25 Jan 2024</p>
<p class="text-gray-600">Server log is a text document that contains a record of all activity.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-06.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-danger flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-warning border border-warning flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown3">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown3" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Team meet at Starbucks</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>26 Jan 2024</p>
<p class="text-gray-600">Meeting all teamets at Starbucks for identifying them all.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-07.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown4">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown4" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Create a compost pile</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>27 Jan 2024</p>
<p class="text-gray-600">Compost pile refers to fruit and vegetable scraps, used tea, coffee..</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-08.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Low</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown5">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown5" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Take a hike at a local park</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Hiking involves a long energetic walk in a natural environment.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-09.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-info border border-info flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown6">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown6" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Research a topic interested</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Research a topic interested by listen actively and attentively.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-10.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-success flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-6">
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown7">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown7" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Backup Files EOD</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>20 Jan 2024</p>
<p class="text-gray-600">Project files should be took backup before end of the day.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-05.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown8">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown8" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Download Server Logs</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>25 Jan 2024</p>
<p class="text-gray-600">Server log is a text document that contains a record of all activity.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-06.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-danger flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-warning border border-warning flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown9">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown9" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Team meet at Starbucks</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>26 Jan 2024</p>
<p class="text-gray-600">Meeting all teamets at Starbucks for identifying them all.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-07.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown10">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown10" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Create a compost pile</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>27 Jan 2024</p>
<p class="text-gray-600">Compost pile refers to fruit and vegetable scraps, used tea, coffee..</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-08.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Low</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown11">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown11" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Take a hike at a local park</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Hiking involves a long energetic walk in a natural environment.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-09.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-info border border-info flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown12">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown12" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Research a topic interested</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Research a topic interested by listen actively and attentively.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-10.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-success flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" id="styled-dashboard" role="tabpanel">
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-6">
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown13">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown13" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Backup Files EOD</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>20 Jan 2024</p>
<p class="text-gray-600">Project files should be took backup before end of the day.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-05.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown14">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown14" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Download Server Logs</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>25 Jan 2024</p>
<p class="text-gray-600">Server log is a text document that contains a record of all activity.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-06.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-danger flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-warning border border-warning flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown15">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown15" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Team meet at Starbucks</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>26 Jan 2024</p>
<p class="text-gray-600">Meeting all teamets at Starbucks for identifying them all.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-07.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown16">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown16" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Create a compost pile</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>27 Jan 2024</p>
<p class="text-gray-600">Compost pile refers to fruit and vegetable scraps, used tea, coffee..</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-08.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Low</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown17">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown17" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Take a hike at a local park</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Hiking involves a long energetic walk in a natural environment.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-09.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-info border border-info flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown18">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown18" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Research a topic interested</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Research a topic interested by listen actively and attentively.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-10.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-success flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden" id="styled-settings" role="tabpanel">
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-3">
<div class="xl:col-span-12 md:col-span-12 w-full flex items-center justify-end">
<a href="#" class="bg-danger text-white py-2 px-4 rounded-md mb-4 flex items-center font-medium">
<span class="mr-2">
<i class="ti ti-trash text-md"></i>
</span>
Restore all
</a>
</div>
</div>
<div class="grid xl:grid-cols-12 md:grid-cols-12 gap-6 mb-6">
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-success border border-success flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown19">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown19" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Create a compost pile</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>27 Jan 2024</p>
<p class="text-gray-600">Compost pile refers to fruit and vegetable scraps, used tea, coffee..</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-08.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-warning flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Social</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Low</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown20">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown20" class="hidden p-2 border rounded bg-white shadow-lg w-40 z-[1]" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-664.8px, 296px, 0px);" data-popper-placement="bottom-end">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Take a hike at a local park</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Hiking involves a long energetic walk in a natural environment.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-09.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-info flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Personal</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
<div class="xl:col-span-4 md:col-span-4 card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="p-6">
<div class="flex items-center justify-between">
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-info border border-info flex items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>Medium</span>
<div>
<a href="javascript:void(0);" class="size-1 rounded-full bg-white inline-flex items-center justify-center" data-dropdown-placement="bottom-end" data-dropdown-toggle="grid-dropdown21">
<i class="ti ti-dots-vertical"></i>
</a>
<ul id="grid-dropdown21" class="hidden p-4 border rounded bg-white shadow-lg w-40 z-[1]">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-target="edit_notes" data-modal-toggle="edit_notes"><i class="ti ti-edit me-1"></i>Edit</a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="delete_modal" data-modal-target="delete_modal"><i class="ti ti-trash me-1"></i>Delete </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" ><i class="ti ti-star me-1"></i>Not Important </a>
</li>
<li>
<a href="#" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" data-modal-toggle="view_notes" data-modal-target="view_notes"><i class="ti ti-eye me-1"></i>View </a>
</li>
</ul>
</div>
</div>
<div class="my-4">
<h5 class="truncate mb-1"><a href="javascript:void(0);">Research a topic interested</a></h5>
<p class="mb-4 flex items-center text-gray-700"><i class="ti ti-calendar mr-1"></i>28 Jan 2024</p>
<p class="text-gray-600">Research a topic interested by listen actively and attentively.</p>
</div>
<div class="flex items-center justify-between border-t pt-4">
<div class="flex items-center">
<a href="javascript:void(0);" class="avatar avatar-md mr-2">
<img src="assets/img/profiles/avatar-10.jpg" alt="Profile" class="w-8 h-8 rounded-full">
</a>
<span class="text-success flex items-center"><i class="fas fa-square rotate-45 text-[10px] mr-1"></i>Work</span>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="mr-2">
<span><i class="fas fa-star text-warning"></i></span>
</a>
<a href="javascript:void(0);">
<span><i class="ti ti-trash text-danger"></i></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end mt-4">
<span class="mr-2 text-gray-600 cursor-pointer">
<i class="fas fa-chevron-left"></i>
</span>
<ul class="flex items-center space-x-2">
<li>
<a href="javascript:void(0);" class="px-3 py-2 rounded-full bg-primary text-white">
1
</a>
</li>
<li>
<a href="javascript:void(0);" class="px-3 py-2 rounded-full text-gray-600 hover:bg-gray-100">
2
</a>
</li>
<li>
<a href="javascript:void(0);" class="px-3 py-2 rounded-full text-gray-600 hover:bg-gray-100">
3
</a>
</li>
<li>
<a href="javascript:void(0);" class="px-3 py-2 rounded-full text-gray-600 hover:bg-gray-100">
4
</a>
</li>
</ul>
<span class="ml-2 text-gray-600 cursor-pointer">
<i class="fas fa-chevron-right"></i>
</span>
</div>
</div>
</div>
</div>
<div class="footer sm:flex items-center justify-between bg-white border-t border-borderColor p-4">
<p class="text-default mb-0">2014 - 2025 © SmartHR.</p>
<p class="text-default">Designed & Developed By <a href="javascript:void(0);"
class="text-primary">Dreams</a></p>
</div>
</div>
<!-- /Page Wrapper -->
<!-- Add Notes -->
<div id="add_notes" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[1055] justify-center items-center flex-wrap w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out p-4">
<div class="relative p-4 w-full md max-w-[500px] max-h-full">
<div class="relative bg-white rounded-defaultradius">
<div class="flex items-center justify-between p-4 border-b border-borderColor">
<h4 class="font-semibold">Add Notes</h4>
<button type="button" class="end-2.5 text-white bg-gray-500 hover:bg-danger hover:text-white rounded-full text-xs leading-normal size-5 ms-auto inline-flex justify-center items-center" data-modal-hide="add_notes">
<i class="ti ti-x"></i>
<span class="sr-only">Close modal</span>
</button>
</div>
<form action="notes.html">
<div class="p-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-y-4 gap-x-6">
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Note Title </label>
<input type="text" class="bg-white border-borderColor text-gray-900 text-sm rounded-input block w-full py-2 px-2.5 h-[38px] placeholder:text-gray-400">
</div>
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Assignee </label>
<select class="select">
<option>Choose</option>
<option>Kathleen</option>
<option>Gifford</option>
</select>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Tag </label>
<input class="input-tags form-control border-0 h-100" id="inputBox" type="text" data-role="tagsinput" name="Label" value="Pending,Done">
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Priority </label>
<select class="select">
<option>Select</option>
<option>Medium</option>
<option>High</option>
<option>Low</option>
</select>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Due Date</label>
<div class="relative">
<div class="absolute inset-y-0 end-2 flex items-center pointer-events-none">
<i class="ti ti-calendar text-gray-600 text-base leading-normal"></i>
</div>
<input type="text" placeholder="dd/mm/yyyy" class="flatpickr-input flat-datepickr bg-white border-borderColor text-gray-900 text-sm rounded-input block w-full py-2 px-2.5 h-[38px] placeholder:text-gray-400">
</div>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Status </label>
<select class="select">
<option>Select</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Description <span class="text-danger"> *</span></label>
<div class="summernote"></div>
<small>Maximum 60 Characters</small>
</div>
</div>
</div>
<div class="flex items-center justify-end p-4 border-t border-borderColor">
<button data-modal-hide="add_notes" type="button" class="btn bg-light border border-light text-gray-900 text-center hover:bg-light-900 hover:text-gray-900 font-medium me-2">Cancel
</button>
<button type="submit" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white font-medium">Submit
</button>
</div>
</form>
</div>
</div>
</div>
<!-- /Add Notes -->
<!-- Edit Notes -->
<div id="edit_notes" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[1055] justify-center items-center flex-wrap w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out p-4">
<div class="relative p-4 w-full md max-w-[500px] max-h-full">
<div class="relative bg-white rounded-defaultradius">
<div class="flex items-center justify-between p-4 border-b border-borderColor">
<h4 class="font-semibold">Edit Notes</h4>
<button type="button" class="end-2.5 text-white bg-gray-500 hover:bg-danger hover:text-white rounded-full text-xs leading-normal size-5 ms-auto inline-flex justify-center items-center" data-modal-hide="edit_notes">
<i class="ti ti-x"></i>
<span class="sr-only">Close modal</span>
</button>
</div>
<form action="notes.html">
<div class="p-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-y-4 gap-x-6">
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Note Title </label>
<input type="text" class="bg-white border-borderColor text-gray-900 text-sm rounded-input block w-full py-2 px-2.5 h-[38px] placeholder:text-gray-400" value="Team meet at Starbucks">
</div>
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Assignee </label>
<select class="select">
<option>Choose</option>
<option selected>Kathleen</option>
<option>Gifford</option>
</select>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Tag </label>
<input class="input-tags form-control border-0 h-100" id="inputBox" type="text" data-role="tagsinput" name="Label" value="Pending,Done">
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Priority </label>
<select class="select">
<option>Select</option>
<option selected>Medium</option>
<option>High</option>
<option>Low</option>
</select>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Due Date</label>
<div class="relative">
<div class="absolute inset-y-0 end-2 flex items-center pointer-events-none">
<i class="ti ti-calendar text-gray-600 text-base leading-normal"></i>
</div>
<input type="text" value="25-10-2025" class="flatpickr-input flat-datepickr bg-white border-borderColor text-gray-900 text-sm rounded-input block w-full py-2 px-2.5 h-[38px] placeholder:text-gray-400">
</div>
</div>
<div class="md:col-span-6">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Status </label>
<select class="select">
<option>Select</option>
<option selected>Active</option>
<option>Inactive</option>
</select>
</div>
<div class="md:col-span-12">
<label class="block mb-1 text-sm leading-normal font-medium text-title">Description <span class="text-danger"> *</span></label>
<div class="summernote"></div>
<small>Maximum 60 Characters</small>
</div>
</div>
</div>
<div class="flex items-center justify-end p-4 border-t border-borderColor">
<button data-modal-hide="edit_notes" type="button" class="btn bg-light border border-light text-gray-900 text-center hover:bg-light-900 hover:text-gray-900 font-medium me-2">Cancel
</button>
<button type="submit" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white font-medium">Submit
</button>
</div>
</form>
</div>
</div>
</div>
<!-- /Edit Notes -->
<!-- Delete Modal -->
<div id="delete_modal" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[1055] justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative p-4 w-full max-w-sm max-h-full transition-all duration-300 ease-in-out">
<div class="relative bg-white rounded-defaultradius">
<div class="p-4 text-center">
<span class="size-[60px] rounded bg-danger-100 text-danger inline-flex items-center justify-center mb-4">
<i class="ti ti-trash-x text-4xl leading-normal"></i>
</span>
<h4 class="mb-1">Confirm Delete</h4>
<p class="mb-4">You want to delete all the marked items, this cant be undone once you delete.</p>
<div class="flex justify-center">
<a href="javascript:void(0);" class="btn bg-light border border-light text-gray-900 text-center hover:bg-light-900 hover:text-gray-900 me-4" data-modal-hide="delete_modal">Cancel</a>
<a href="notes.html" class="btn bg-danger border border-danger text-white text-center hover:bg-danger-900 hover:text-white">Yes, Delete</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Delete Modal -->
<div id="view_notes" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[1055] justify-center items-center flex-wrap w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out p-4">
<div class="relative p-4 w-full md max-w-[500px] max-h-full">
<div class="relative bg-white rounded-defaultradius">
<div class="flex items-center justify-between p-4 border-b border-borderColor">
<h4 class="font-semibold me-3">Notes</h4><p class="text-info">Personal</p>
<button type="button" class="end-2.5 text-white bg-gray-500 hover:bg-danger hover:text-white rounded-full text-xs leading-normal size-5 ms-auto inline-flex justify-center items-center" data-modal-hide="view_notes">
<i class="ti ti-x"></i>
<span class="sr-only">Close modal</span>
</button>
</div>
<form action="notes.html">
<div class="p-4">
<div class="grid grid-cols-1 md:grid-cols-12 gap-y-4 gap-x-6">
<div class="md:col-span-12">
<div>
<h4 class="mb-2">Meet Lisa to discuss project details</h4>
<p class="mb-4">Hiking is a long, vigorous walk, usually on trails or footpaths in the
countryside.
Walking for pleasure developed in Europe during the eighteenth century.
Religious pilgrimages have existed much longer but they involve walking long
distances for a spiritual purpose associated with specific religions and
also
we achieve inner peace while we hike at a local park.</p>
<span class="py-1 px-2 text-xs leading-none font-semibold rounded text-danger border border-danger items-center"><i class="ti ti-circle-filled text-[6px] me-1"></i>High</span>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-end p-4 border-t border-borderColor">
<button type="submit" data-modal-hide="view_notes" class="btn bg-danger border border-danger text-white text-center hover:bg-danger hover:text-white font-medium">Close
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /Main Wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Flowbite JS -->
<script src="assets/js/flowbite.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>
<!-- Datetimepicker JS -->
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
<!-- Daterangepikcer JS -->
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Datetimepicker JS -->
<script src="assets/js/moment.min.js"></script>
<script src="assets/plugins/flatpickr/flatpickr.min.js"></script>
<!-- Datatable JS -->
<script src="assets/js/dataTables.js"></script>
<script src="assets/js/dataTables.tailwindcss.js"></script>
<!-- Summernote JS -->
<script src="assets/plugins/summernote/summernote-lite.min.js"></script>
<!-- Owl Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- Bootstrap Tagsinput JS -->
<script src="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<!-- Select2 JS -->
<script src="assets/plugins/select2/js/select2.min.js"></script>
<!-- Sticky Sidebar JS -->
<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.js"></script>
<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js"></script>
<!-- Color Picker JS -->
<script src="assets/plugins/@simonwep/pickr/pickr.es5.min.js"></script>
<!-- Chart JS -->
<script src="assets/plugins/apexchart/apexcharts.min.js"></script>
<script src="assets/plugins/apexchart/chart-data.js"></script>
<!-- Custom JS -->
<script src="assets/js/notes.js"></script>
<script src="assets/js/theme-colorpicker.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>