File: /mnt/data/smarthr-co-in/demo/tailwind/template/src/task-details.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 CSS -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!-- Select2 CSS -->
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="assets/plugins/flatpickr/flatpickr.min.css">
<link rel="stylesheet" href="assets/plugins/flatpickr/flatpickr.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="javascript:void(0);" >
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);"><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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">Documentation</a></li>
<li><a href="javascript:void(0);">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="javascript:void(0);"
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="javascript:void(0);" 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="javascript:void(0);"
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="javascript:void(0);">Menu</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="chat.html">Chats</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="email.html">Inbox</a></li>
</ul>
</div>
</div>
<div class="sidebar-header p-3 pb-0 pt-2 hidden">
<div class="text-center rounded bg-light p-2 mb-4 sidebar-profile flex items-center">
<div class="size-8 onlin">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="rounded-full">
</div>
<div class="text-start sidebar-profile-info ms-2">
<h6 class="text-xs leading-normal font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
</div>
<div class="flex w-[220px] relative me-1 mb-4">
<span class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none text-gray-400"><i class="ti ti-search"></i></span>
<input type="text" class="block flex-1 border border-borderColor bg-white rounded-[5px] py-1.5 pl-7 pr-12 text-gray-900 placeholder:text-gray-400 focus:ring-0 focus:border-borderColor h-[30px] text-xs" placeholder="Search in HRMS">
<span class="absolute inset-y-1/2 end-0 flex items-center me-2.5 pointer-events-none "><kbd class="bg-dark-transparent text-[10px] font-medium text-gray-500 px-[3px] py-0.5 rounded">CTRL + / </kbd></span>
</div>
<div class="flex items-center justify-between menu-item mb-3">
<div class="me-3">
<a href="calendar.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="me-3 notification-item">
<a href="chat.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-brand-hipchat"></i>
<span class="text-[6px] w-[10px] h-[10px] flex items-center justify-center text-white rounded-full absolute right-[5px] text top-[2px] z-[1] bg-info">5</span>
</a>
</div>
<div class="me-3 notification-item">
<a href="activity.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-bell"></i>
<div class="notification-status-dot w-[6px] h-[6px] rounded-full absolute right-[5px] top-[5px] z-[1] bg-danger"></div>
</a>
</div>
<div class="me-0">
<a href="email.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-message"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>MAIN MENU</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i
class="ti ti-smart-home text-gray-500 group-hover:text-gray-900 group-active:text-gray-900"></i>
<span class="ms-2">Dashboard</span>
<span
class="ms-2 text-[10px] bg-danger rounded font-medium text-white px-1 py-0.5 inline-flex items-center">Hot</span>
<span
class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul
class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="index.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Admin
Dashboard</a></li>
<li><a href="employee-dashboard.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee
Dashboard</a></li>
<li><a href="deals-dashboard.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Deals
Dashboard</a></li>
<li><a href="leads-dashboard.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leads
Dashboard</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-grid-add"></i><span class="ms-2">Applications</span>
<span
class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul
class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="chat.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chat</a>
</li>
<li class="submenu submenu-two">
<a href="call.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calls<span
class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="voice-call.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Voice
Call</a></li>
<li><a href="video-call.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Video
Call</a></li>
<li><a href="outgoing-call.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Outgoing
Call</a></li>
<li><a href="incoming-call.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Incoming
Call</a></li>
<li><a href="call-history.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Call
History</a></li>
</ul>
</li>
<li><a href="calendar.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calendar</a>
</li>
<li><a href="email.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Email</a>
</li>
<li><a href="todo.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">To
Do</a></li>
<li><a href="notes.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Notes</a>
</li>
<li><a href="social-feed.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Social
Feed</a></li>
<li><a href="file-manager.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">File
Manager</a></li>
<li><a href="kanban-view.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Kanban</a>
</li>
<li><a href="invoices.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoices</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">Super Admin</span>
<span
class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul
class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="dashboard.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Dashboard</a>
</li>
<li><a href="companies.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Companies</a>
</li>
<li><a href="subscription.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Subscriptions</a>
</li>
<li><a href="packages.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Packages</a>
</li>
<li><a href="domain.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Domain</a>
</li>
<li><a href="purchase-transaction.html"
class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Purchase
Transaction</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>LAYOUT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="layout-horizontal.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar"></i><span class="ms-2">Horizontal</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-detached.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-details"></i><span class="ms-2">Detached</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-modern.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board-split"></i><span class="ms-2">Modern</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-two-column.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-columns-2"></i><span class="ms-2">Two Column </span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-hovered.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-column-insert-left"></i><span class="ms-2">Hovered</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-box.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-align-middle"></i><span class="ms-2">Boxed</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-single.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar-inactive"></i><span class="ms-2">Horizontal
Single</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-overlay.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-collage"></i><span class="ms-2">Horizontal Overlay</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-box.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board"></i><span class="ms-2">Horizontal Box</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-sidemenu.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table"></i><span class="ms-2">Menu Aside</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-vertical-transparent.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout"></i><span class="ms-2">Transparent</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-without-header.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-sidebar"></i><span class="ms-2">Without Header</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-rtl.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-text-direction-rtl"></i><span class="ms-2">RTL</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-dark.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-moon"></i><span class="ms-2">Dark</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>PROJECTS</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="clients-grid.html"
class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-users-group"></i><span class="ms-2">Clients</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);"
class="relative active subdrop flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-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 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">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="javascript:void(0);" 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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);"><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="javascript:void(0);">
<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="javascript:void(0);">
<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="javascript:void(0);">Documentation</a></li>
<li><a href="javascript:void(0);">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="javascript:void(0);" class="me-3 avatar avatar-sm">
<img src="assets/img/profiles/avatar-07.jpg" alt="profile" class="rounded-full">
</a>
<a href="javascript:void(0);" 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="javascript:void(0);" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#dashboard" aria-selected="false">
<i class="ti ti-smart-home"></i>
</a>
<a href="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" class="nav-link" title="Projects" role="tab" data-tabs-target="#projects" aria-selected="false">
<i class="ti ti-users-group"></i>
</a>
<a href="javascript:void(0);" class="nav-link" title="Crm" role="tab" data-tabs-target="#crm" aria-selected="false">
<i class="ti ti-user-shield"></i>
</a>
<a href="javascript:void(0);" class="nav-link" title="Hrm" role="tab" data-tabs-target="#hrm" aria-selected="false">
<i class="ti ti-user"></i>
</a>
<a href="javascript:void(0);" 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="javascript:void(0);" class="nav-link" title="Administration" role="tab" data-tabs-target="#administration" aria-selected="false">
<i class="ti ti-cash"></i>
</a>
<a href="javascript:void(0);" class="nav-link" title="Content" role="tab" data-tabs-target="#content" aria-selected="false">
<i class="ti ti-license"></i>
</a>
<a href="javascript:void(0);" class="nav-link" title="Pages" role="tab" data-tabs-target="#pages" aria-selected="false">
<i class="ti ti-page-break"></i>
</a>
<a href="javascript:void(0);" class="nav-link" title="Authentication" role="tab" data-tabs-target="#authentication" aria-selected="false">
<i class="ti ti-lock-check"></i>
</a>
<a href="javascript:void(0);" 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="javascript:void(0);" class="nav-link" title="Extras" role="tab" data-tabs-target="#extras" aria-selected="false">
<i class="ti ti-vector-triangle"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-right">
<div class="sidebar-logo mb-4">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<div class="sidebar-scroll">
<h6 class="mb-3">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="tab-content" id="two-col-tabs">
<div class="hidden" id="dashboard">
<ul>
<li class="menu-title"><span>MAIN MENU</span></li>
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</div>
<div class="hidden" id="application">
<ul>
<li class="menu-title"><span>APPLICATION</span></li>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</div>
<div class="hidden" id="super-admin">
<ul>
<li class="menu-title"><span>SUPER ADMIN</span></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</div>
<div class="hidden" id="layout">
<ul>
<li class="menu-title"><span>LAYOUT</span></li>
<li><a href="layout-horizontal.html"><span>Horizontal</span></a></li>
<li><a href="layout-detached.html"><span>Detached</span></a></li>
<li><a href="layout-modern.html"><span>Modern</span></a></li>
<li><a href="layout-two-column.html"><span>Two Column </span></a></li>
<li><a href="layout-hovered.html"><span>Hovered</span></a></li>
<li><a href="layout-box.html"><span>Boxed</span></a></li>
<li><a href="layout-horizontal-single.html"><span>Horizontal Single</span></a></li>
<li><a href="layout-horizontal-overlay.html"><span>Horizontal Overlay</span></a></li>
<li><a href="layout-horizontal-box.html"><span>Horizontal Box</span></a></li>
<li><a href="layout-horizontal-sidemenu.html"><span>Menu Aside</span></a></li>
<li><a href="layout-vertical-transparent.html"><span>Transparent</span></a></li>
<li><a href="layout-without-header.html"><span>Without Header</span></a></li>
<li><a href="layout-rtl.html"><span>RTL</span></a></li>
<li><a href="layout-dark.html"><span>Dark</span></a></li>
</ul>
</div>
<div class="hidden" id="projects">
<ul>
<li class="menu-title"><span>PROJECTS</span></li>
<li><a href="clients-grid.html">Clients</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="crm">
<ul>
<li class="menu-title"><span>CRM</span></li>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</div>
<div class="hidden" id="hrm">
<ul>
<li class="menu-title"><span>HRM</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Leaves<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</div>
<div class="hidden" id="finance">
<ul>
<li class="menu-title"><span>FINANCE & ACCOUNTS</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="administration">
<ul>
<li class="menu-title"><span>ADMINISTRATION</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
General Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Website Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
System Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Financial Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="content">
<ul>
<li class="menu-title"><span>CONTENT</span></li>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">
Blogs
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Blog Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Locations
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</div>
<div class="hidden" id="pages">
<ul>
<li class="menu-title"><span>PAGES</span></li>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
</ul>
</div>
<div class="hidden" id="authentication">
<ul>
<li class="menu-title"><span>AUTHENTICATION</span></li>
<li class="submenu">
<a href="javascript:void(0);">
Login<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Register<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Forgot Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Reset Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Email Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
2 Step Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</div>
<div class="hidden" id="ui-elements">
<ul>
<li class="menu-title"><span>UI INTERFACE</span></li>
<li class="submenu">
<a href="javascript:void(0);">Base UI<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-avatar.html">Avatar</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-borders.html">Border</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-buttons-group.html">Button Group</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-cards.html">Card</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-colors.html">Colors</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-offcanvas.html">Offcanvas</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popovers.html">Popovers</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="ui-nav-tabs.html">Tabs</a></li>
<li><a href="ui-tooltips.html">Tooltips</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-sortable.html">Sortable</a></li>
<li><a href="ui-swiperjs.html">Swiperjs</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Advanced UI <span class="menu-arrow"></span> </a>
<ul>
<li><a href="ui-clipboard.html">Clipboard</a></li>
<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-text-editor.html">Text Editor</a></li>
<li><a href="ui-counter.html">Counter</a></li>
<li><a href="ui-scrollbar.html">Scrollbar</a></li>
<li><a href="ui-stickynote.html">Sticky Note</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Forms <span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables <span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="extras">
<ul>
<li class="menu-title"><span>EXTRAS</span></li>
<li><a href="javascript:void(0);">Documentation</a></li>
<li><a href="javascript:void(0);">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="javascript:void(0);" 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="javascript:void(0);" class="btn border after:btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent btnFullscreen">
<i class="ti ti-maximize"></i>
</a>
</div>
<div class="mb-1">
<a href="calendar.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="mb-1">
<a href="chat.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-brand-hipchat"></i>
<span class=" bg-info rounded-full flex items-center justify-center header-badge">5</span>
</a>
</div>
<div class="mb-1">
<a href="email.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-mail"></i>
</a>
</div>
</div>
</div>
</div>
<div class="sidebar-right flex justify-between flex-col bg-white pt-[16px] border-r h-screen w-[180px]">
<div class="sidebar-scroll px-[16px] pt-0">
<h6 class="mb-3 text-center">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="stack-menu relative">
<div class="nav flex-column items-center nav-pills" role="tablist" id="default-stack-styled-tab" data-tabs-toggle="#menu-stacked-bar" data-tabs-active-classes="bg-light text-default">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-6">
<a href="#menu-dashboard" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#menu-dashboard" aria-selected="false">
<span><i class="ti ti-smart-home"></i></span>
<p>Dashboard</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-application" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-application" aria-selected="false">
<span><i class="ti ti-layout-grid-add"></i></span>
<p>Applications</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-superadmin" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-superadmin" aria-selected="false">
<span><i class="ti ti-user-star"></i></span>
<p>Super Admin</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-layout" class="nav-link" title="Layout" role="tab" data-tabs-target="#menu-layout" aria-selected="false">
<span><i class="ti ti-layout-board-split"></i></span>
<p>Layouts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-project" class="nav-link" title="Projects" role="tab" data-tabs-target="#menu-project" aria-selected="false">
<span><i class="ti ti-folder"></i></span>
<p>Projects</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-crm" class="nav-link" title="CRM" role="tab" data-tabs-target="#menu-crm" aria-selected="false">
<span><i class="ti ti-user-shield"></i></span>
<p>Crm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-hrm" class="nav-link" title="HRM" role="tab" data-tabs-target="#menu-hrm" aria-selected="false">
<span><i class="ti ti-users"></i></span>
<p>Hrm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-finance" class="nav-link" title="Finance & Accounts" role="tab" data-tabs-target="#menu-finance" aria-selected="false">
<span><i class="ti ti-shopping-cart-dollar"></i></span>
<p>Finance & Accounts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-administration" class="nav-link" title="Administration" role="tab" data-tabs-target="#menu-administration" aria-selected="false">
<span><i class="ti ti-cash"></i></span>
<p>Administration</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-content" class="nav-link" title="Content" role="tab" data-tabs-target="#menu-content" aria-selected="false">
<span><i class="ti ti-license"></i></span>
<p>Contents</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-pages" class="nav-link" title="Pages" role="tab" data-tabs-target="#menu-pages" aria-selected="false">
<span><i class="ti ti-page-break"></i></span>
<p>Pages</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-authentication" class="nav-link" title="Authentication" role="tab" data-tabs-target="#menu-authentication" aria-selected="false">
<span><i class="ti ti-lock-check"></i></span>
<p>Authentication</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-ui-elements" class="nav-link" title="UI Elements" role="tab" data-tabs-target="#menu-ui-elements" aria-selected="false">
<span><i class="ti ti-ux-circle"></i></span>
<p>Basic UI</p>
</a>
</div>
</div>
</div>
<div class="tab-content" id="menu-stacked-bar">
<div class="hidden" id="menu-dashboard">
<ul class="stack-submenu">
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</div>
<div class="hidden" id="menu-superadmin">
<ul class="stack-submenu">
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</div>
<div class="hidden" id="menu-application">
<ul class="stack-submenu">
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="social-feed.html">Social Feed</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</div>
<div class="hidden" id="menu-layout">
<ul class="stack-submenu">
<li><a href="layout-horizontal.html">Horizontal</a></li>
<li><a href="layout-detached.html">Detached</a></li>
<li><a href="layout-modern.html">Modern</a></li>
<li><a href="layout-two-column.html">Two Column</a></li>
<li><a href="layout-hovered.html">Hovered</a></li>
<li><a href="layout-stacked.html">Stacked</a></li>
<li><a href="layout-box.html">Boxed</a></li>
<li><a href="layout-horizontal-single.html">Horizontal Single</a></li>
<li><a href="layout-horizontal-overlay.html">Horizontal Overlay</a></li>
<li><a href="layout-horizontal-box.html">Horizontal Box</a></li>
<li><a href="layout-horizontal-sidemenu.html">Menu Aside</a></li>
<li><a href="layout-vertical-transparent.html">Transparent</a></li>
<li><a href="layout-without-header.html">Without Header</a></li>
<li><a href="layout-rtl.html">RTL</a></li>
<li><a href="layout-dark.html">Dark</a></li>
</ul>
</div>
<div class="hidden" id="menu-project">
<ul class="stack-submenu">
<li><a href="clients-grid.html"><span>Clients</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-crm">
<ul class="stack-submenu">
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</div>
<div class="hidden" id="menu-hrm">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Leaves<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</div>
<div class="hidden" id="menu-finance">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-administration">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
General Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Website Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
System Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Financial Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="menu-content">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</div>
<div class="hidden" id="menu-pages">
<ul class="stack-submenu">
<li><a href="starter.html">Starter</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="profile-settings.html">Profile Settings</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
<li><a href="under-maintenance.html">Under Maintenance</a></li>
<li><a href="under-construction.html">Under Construction</a></li>
<li><a href="api-keys.html">API Keys</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="terms-condition.html">Terms & Conditions</a></li>
</ul>
</div>
<div class="hidden" id="menu-authentication">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</div>
<div class="hidden" id="menu-ui-elements">
<ul class="stack-submenu">
<li class="submenu">
<a href="javascript:void(0);">Base UI<span class="menu-arrow"></span></a>
<ul>
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-avatar.html">Avatar</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-borders.html">Border</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-buttons-group.html">Button Group</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-cards.html">Card</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-colors.html">Colors</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-offcanvas.html">Offcanvas</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popovers.html">Popovers</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="ui-nav-tabs.html">Tabs</a></li>
<li><a href="ui-tooltips.html">Tooltips</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-sortable.html">Sortable</a></li>
<li><a href="ui-swiperjs.html">Swiperjs</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Advanced UI<span class="menu-arrow"></span></a>
<ul>
<li><a href="ui-clipboard.html">Clipboard</a></li>
<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-text-editor.html">Text Editor</a></li>
<li><a href="ui-counter.html">Counter</a></li>
<li><a href="ui-scrollbar.html">Scrollbar</a></li>
<li><a href="ui-stickynote.html">Sticky Note</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Forms<span class="menu-arrow"></span> </a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Form Elements<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="form-basic-inputs.html">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a> </li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables<span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-3">
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal mb-3">Documentation</a>
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal">Change Log<span class="badge bg-pink text-[10px] font-medium px-[5px] leading-4 rounded text-white fs-10 ms-2">v4.0.8</span></a>
</div>
</div>
</div>
</div>
<!-- /Stacked Sidebar -->
<!-- Page Wrapper -->
<div class="page-wrapper relative pt-[50px] ml-[252px]">
<div class="content p-6">
<!-- Breadcrumb -->
<div class="row items-center mb-4">
<div class="md:flex justify-between items-center flex-wrap">
<h6 class="font-medium inline-flex items-center mb-3 mb-sm-0"><a href="tasks.html">
<i class="ti ti-arrow-left me-2"></i>Back to List</a>
</h6>
<div class="flex">
<div class="text-end">
<a href="javascript:void(0);" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#edit_task"><i class="ti ti-edit me-1"></i>Edit Task</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-header">
<i class="ti ti-chevrons-up"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /Breadcrumb -->
<div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
<div class="col-span-8">
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white mb-4">
<div class="card-body p-4 pb-1">
<div class="flex items-center justify-between flex-wrap gap-y-3 mb-4">
<div>
<h4 class="mb-1">Patient and Doctor video conferencing Module</h4>
<p>Priority : <span class="px-2 py-1 rounded bg-danger text-white text-[10px]"><i class="ti ti-point-filled me-1"></i>High</span></p>
</div>
<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle border rounded bg-white py-2 px-3 btn btn-white inline-flex items-center bg-transparent p-0 text-dark" data-dropdown-toggle="export-dropdown4">
<i class="ti ti-file-export me-1"></i> Mark All as Completed
</a>
<ul id="export-dropdown4" class="hidden p-4 border rounded bg-white shadow-lg w-40 z-[1]" class="dropdown-menu dropdown-menu-end p-3">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">All Tags</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">Internal</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">Projects</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">Meetings</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">Reminder</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary">Research</a>
</li>
</ul>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-x-4 items-center">
<div class="col-span-12">
<div class="mb-3">
<h6 class="mb-1">Description</h6>
<p>The Enhanced Patient Management System (EPMS) project aims to modernize and streamline the patient management processes within. By integrating advanced technologies and optimizing existing workflows, the project
seeks to improve patient care, enhance operational efficiency, and ensure compliance with regulatory standards.
</p>
</div>
</div>
<div class="col-span-3">
<p class="flex items-center mb-3"><i class="ti ti-users-group me-2"></i>Team</p>
</div>
<div class="col-span-9">
<div class="flex items-center mb-3">
<div class="bg-gray-100 p-1 rounded flex items-center me-2">
<a href="javascript:void(0);" class="avatar avatar-sm avatar-rounded border border-white flex-shrink-0 me-2">
<img src="assets/img/profiles/avatar-12.jpg" alt="Img">
</a>
<h6 class="fs-12"><a href="javascript:void(0);">Lewis</a></h6>
</div>
<div class="bg-gray-100 p-1 rounded flex items-center me-2">
<a href="javascript:void(0);" class="avatar avatar-sm avatar-rounded border border-white flex-shrink-0 me-2">
<img src="assets/img/users/user-19.jpg" alt="Img">
</a>
<h6 class="fs-12"><a href="javascript:void(0);">Leona</a></h6>
</div>
<div class="bg-gray-100 p-1 rounded flex items-center me-2">
<a href="javascript:void(0);" class="avatar avatar-sm avatar-rounded border border-white flex-shrink-0 me-2">
<img src="assets/img/users/user-33.jpg" alt="Img">
</a>
<h6 class="fs-12"><a href="javascript:void(0);">Pineiro</a></h6>
</div>
<div class="bg-gray-100 p-1 rounded flex items-center me-2">
<a href="javascript:void(0);" class="avatar avatar-sm avatar-rounded border border-white flex-shrink-0 me-2">
<img src="assets/img/users/user-37.jpg" alt="Img">
</a>
<h6 class="fs-12"><a href="javascript:void(0);">Moseley</a></h6>
</div>
<div>
<a href="javascript:void(0);" class="flex items-center fs-12"><i class="ti ti-circle-plus me-1"></i>Add New</a>
</div>
</div>
</div>
<div class="col-span-3">
<p class="flex items-center mb-3"><i class="ti ti-user-shield me-2"></i>Assignee</p>
</div>
<div class="col-span-9">
<div class="flex items-center mb-3">
<div class="bg-gray-100 p-1 rounded flex items-center me-2">
<a href="javascript:void(0);" class="avatar avatar-sm avatar-rounded border border-white flex-shrink-0 me-2">
<img src="assets/img/users/user-42.jpg" alt="Img">
</a>
<h6 class="fs-12"><a href="javascript:void(0);">Ruth</a></h6>
</div>
<div>
<a href="javascript:void(0);" class="flex items-center fs-12"><i class="ti ti-circle-plus me-1"></i>Add New</a>
</div>
</div>
</div>
<div class="col-span-3">
<p class="flex items-center mb-3"><i class="ti ti-bookmark me-2"></i>Tags</p>
</div>
<div class="col-span-9">
<div class="flex items-center mb-3">
<a href="javascript:void(0);" class="badge task-tag bg-pink text-white px-2 py-1 text-[10px] rounded-s-full rounded-e-full me-2">Admin Panel</a>
<a href="javascript:void(0);" class="badge task-tag bg-info text-white px-2 py-1 text-[10px] rounded-s-full rounded-e-full">High Tech</a>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item bg-white rounded mb-5">
<div>
<div class="accordion-header" id="headingeight">
<div class="accordion-button border-b p-5">
<div class="flex items-center justify-between flex-fill">
<h5>Files</h5>
<div class="flex items-center">
<a href="javascript:void(0);" class="btn btn-primary py-1 px-1 inline-flex items-center me-3 text-[10px]"><i class="ti ti-square-rounded-plus-filled me-1"></i>Add New</a>
<a href="javascript:void(0);" class="flex items-center bg-white collapsearrow" data-accordion-toggle="primaryBordereight" data-accordion-target="#primaryBordereight" aria-expanded="false" aria-controls="primaryBordereight">
<i class="ti ti-chevron-down fs-18"></i>
</a>
</div>
</div>
</div>
</div>
<div id="primaryBordereight" class="text-dark" aria-labelledby="headingeight">
<div class="accordion-body p-5">
<div class="files-carousel owl-carousel">
<div class="card border border-borderColor rounded-[5px] bg-white shadow-none mb-0">
<div class="card-body p-5">
<div class="flex items-center justify-between mb-2 pb-2 border-b">
<div class="flex items-center">
<a href="javascript:void(0);" class="rounded flex items-center justify-center size-8 p-2 bg-light me-2">
<img src="assets/img/icons/file-02.svg" class="size-7" alt="img">
</a>
<div>
<h6 class="mb-1">Project_1.docx</h6>
<span class="text-gray-500">7.6 MB</span>
</div>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-download"></i></a>
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-trash"></i></a>
</div>
</div>
<div class="flex items-center justify-between">
<p class="font-medium mb-0 text-gray-500">15 May 2024, 6:53 PM</p>
<span class="avatar avatar-sm avatar-rounded"><img src="assets/img/profiles/avatar-02.jpg" alt="Img"></span>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] bg-white shadow-none mb-0">
<div class="card-body p-5">
<div class="flex items-center justify-between mb-2 pb-2 border-b">
<div class="flex items-center">
<a href="javascript:void(0);" class="rounded flex items-center justify-center size-8 p-2 bg-light me-2">
<img src="assets/img/icons/file-01.svg" class="size-7" alt="img">
</a>
<div>
<h6 class="mb-1">Proposal.pdf</h6>
<span class="text-gray-500">12.6 MB</span>
</div>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-download"></i></a>
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-trash"></i></a>
</div>
</div>
<div class="flex items-center justify-between">
<p class="font-medium mb-0 text-gray-500">15 May 2024, 6:53 PM</p>
<span class="avatar avatar-sm avatar-rounded"><img src="assets/img/users/user-19.jpg" alt="Img"></span>
</div>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] bg-white shadow-none mb-0">
<div class="card-body p-5">
<div class="flex items-center justify-between mb-2 pb-2 border-b">
<div class="flex items-center">
<a href="javascript:void(0);" class="rounded flex items-center justify-center size-8 p-2 bg-light me-2">
<img src="assets/img/icons/file-04.svg" class="size-7" alt="img">
</a>
<div>
<h6 class="mb-1">Logo-Img.zip</h6>
<span class="text-gray-500">6.2 MB</span>
</div>
</div>
<div class="flex items-center">
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-download"></i></a>
<a href="javascript:void(0);" class="btn size-7 flex items-center justify-center text-[10px] btn-icon hover:bg-dark-transparent active:text-white active:bg-primary"><i class="ti ti-trash"></i></a>
</div>
</div>
<div class="flex items-center justify-between">
<p class="font-medium mb-0 text-gray-500">15 May 2024, 6:53 PM</p>
<span class="avatar avatar-sm avatar-rounded"><img src="assets/img/users/user-20.jpg" alt="Img"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-4">
<div class="card card border border-borderColor rounded-[5px] shadow-xs bg-white mb-4">
<div class="card-body p-0">
<div class="flex flex-col">
<div class="flex items-center justify-between border-b p-3">
<p class="mb-0">Project</p>
<h6 class="font-normal">Hospital Administration</h6>
</div>
<div class="flex items-center justify-between border-b p-3">
<p class="mb-0">Created on</p>
<h6 class="font-normal">14 Nov 2026</h6>
</div>
<div class="flex items-center justify-between border-b p-3">
<p class="mb-0">Started on</p>
<h6 class="font-normal">15 Jan 2026</h6>
</div>
<div class="flex items-center justify-between p-3">
<p class="mb-0">Due Date</p>
<h6 class="font-normal">15 Nov 2026</h6>
</div>
</div>
</div>
</div>
<div class="accordion-item bg-white rounded mb-5">
<div>
<div class="accordion-header" id="headingseven">
<div class="accordion-button border-b p-5">
<div class="flex items-center justify-between flex-fill">
<h5>Activity</h5>
<div class="flex items-center">
<a href="javascript:void(0);" class="btn btn-primary py-1 px-1 inline-flex items-center me-3 text-[10px]"><i class="ti ti-square-rounded-plus-filled me-1"></i>Add New</a>
<a href="javascript:void(0);" class="flex items-center bg-white collapsearrow" data-accordion-toggle="primaryBorderseven" data-accordion-target="#primaryBorderseven" aria-expanded="false" aria-controls="primaryBorderseven">
<i class="ti ti-chevron-down fs-18"></i>
</a>
</div>
</div>
</div>
</div>
<div id="primaryBorderseven" class="text-dark" aria-labelledby="headingseven">
<div class="accordion-body p-5">
<div class="notice-widget ">
<div class="notice-con relative flex items-center justify-between mb-4">
<div class="flex overflow-hidden">
<span class="bg-info avatar avatar-md me-3 flex items-center justify-center rounded-full text-white flex-shrink-0">
<i class="ti ti-checkup-list text-[16px]"></i>
</span>
<div class="overflow-hidden">
<p class="truncate mb-1"><span class="text-gray-900 font-medium">Andrew </span>added a New Task</p>
<p class="mb-1 text-gray-500">15 May 2024, 6:53 PM</p>
</div>
</div>
</div>
<div class="notice-con relative flex items-center justify-between mb-4">
<div class="flex overflow-hidden me-2">
<span class="bg-warning avatar avatar-md me-3 flex items-center justify-center rounded-full text-white flex-shrink-0">
<i class="ti ti-circle-dot text-[16px]"></i>
</span>
<div class="overflow-hidden">
<p class="truncate mb-1"><span class="text-gray-900 font-medium">Jermai </span>Moved task <span class="text-gray-900 font-medium truncate"> “Private chat module”</span></p>
<p class="mb-1 text-gray-500">15 May 2024, 6:53 PM</p>
<div class="flex items-center">
<span class="badge bg-success text-white px-[0.45rem] rounded font-medium text-[10px] me-2"><i class="ti ti-point-filled me-1"></i>Completed</span>
<span><i class="ti ti-arrows-left-right me-2"></i></span>
<span class="badge bg-purple text-white px-[0.45rem] rounded font-medium text-[10px]"><i class="ti ti-point-filled me-1"></i>Inprogress</span>
</div>
</div>
</div>
</div>
<div class="notice-con relative flex items-center justify-between mb-4">
<div class="flex overflow-hidden me-2">
<span class="bg-purple avatar avatar-md me-3 flex items-center justify-center rounded-full text-white flex-shrink-0">
<i class="ti ti-checkup-list text-[16px]"></i>
</span>
<div class="overflow-hidden">
<p class="truncate mb-1"><span class="text-gray-900 font-medium">Jermai </span>Created task <span class="text-gray-900 font-medium"> “Private chat module”</span></p>
<p class="mb-1 text-gray-500">15 May 2024, 6:53 PM</p>
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex overflow-hidden">
<span class="bg-secondary avatar avatar-md me-3 flex items-center justify-center rounded-full text-white flex-shrink-0">
<i class="ti ti-photo text-[16px]"></i>
</span>
<div class="overflow-hidden">
<p class="truncate mb-1"><span class="text-gray-900 font-medium">Hendry </span> Updated Image <span class="text-gray-900 font-medium"> “logo.jpg” </span></p>
<p class="mb-1 text-gray-500">15 May 2024, 6:53 PM</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 -->
</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>
<script src="assets/plugins/flatpickr/flatpickr.min.js"></script>
<script src="assets/plugins/flatpickr/flatpickr.js"></script>
<!-- Daterangepikcer JS -->
<script src="assets/plugins/daterangepicker/daterangepicker.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>
<!-- 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>
<!-- Owl Carousel JS -->
<script src="assets/js/owl.carousel.min.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/file-manager.js"></script>
<script src="assets/js/todo.js"></script>
<script src="assets/js/theme-colorpicker.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>