File: /mnt/data/smarthr-co-in/demo/tailwind/template/src/form-basic-inputs.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">
<!-- Select2 CSS -->
<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">
<!-- Summernote CSS -->
<link rel="stylesheet" href="assets/plugins/summernote/summernote-lite.min.css">
<!-- Daterangepikcer CSS -->
<link rel="stylesheet" href="assets/plugins/daterangepicker/daterangepicker.css">
<!-- Bootstrap Tagsinput CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css">
<!-- Color Picker Css -->
<link rel="stylesheet" href="assets/plugins/flatpickr/flatpickr.min.css">
<link rel="stylesheet" href="assets/plugins/@simonwep/pickr/themes/nano.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="../dist/style.css">
</head>
<body>
<div id="global-loader" style="display: none;">
<div class="page-loader"></div>
</div>
<!-- Main Wrapper -->
<div class="main-wrapper">
<!-- Header -->
<div class="header fixed top-0 left-0 right-0 bg-white h-[50px] border-b border-gray-200 lg:left-vertical-w">
<div class="main-header h-[50px]">
<div class="header-left hidden relative float-left text-center h-[50px] z-[1] media-max-md:flex">
<a href="index.html" class="logo">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<a id="mobile_btn" class="mobile_btn" href="#sidebar">
<span class="bar-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<div class="header-user px-[15px] py-4">
<div class="nav user-menu nav-list flex items-center justify-center h-full px-6 'media-max-md:hidden">
<div class="me-auto flex items-center" id="header-search">
<a id="toggle_btn" href="javascript:void(0);" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 text-lg leading-normal rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent me-1">
<i class="ti ti-arrow-bar-to-left"></i>
</a>
<!-- Search -->
<div class="flex w-[259px] relative me-1">
<span class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none text-gray-400"><i class="ti ti-search"></i></span>
<input type="text" class="block flex-1 border border-borderColor bg-white rounded-[5px] py-1.5 pl-7 pr-12 text-gray-900 placeholder:text-gray-400 focus:ring-0 focus:border-borderColor h-[30px] text-xs" placeholder="Search in HRMS">
<span class="absolute inset-y-1/2 end-0 flex items-center me-2.5 pointer-events-none "><kbd class="bg-dark-transparent text-[10px] font-medium text-gray-500 px-[3px] py-0.5 rounded">CTRL + / </kbd></span>
</div>
<!-- /Search -->
<div>
<button data-dropdown-toggle="crm-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] me-1 hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900" type="button">
<i class="ti ti-layout-grid"></i>
</button>
<div id="crm-dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-[5px] shadow w-55 dark:bg-gray-700">
<div class="border-b border px-[20px] py-4">
<h4>CRM</h4>
</div>
<div class="border-b border p-[20px] pb-1">
<div class="grid grid-cols-1 gap-x-6 sm:grid-cols-2 *:border *:border-borderColor *:bg-white *:p-2 *:rounded-md *:font-medium">
<a href="contacts.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-user-shield text-default me-2 group-hover:text-primary"></i>Contacts
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="companies-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-building text-default me-2 group-hover:text-primary"></i>Companies
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="deals-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-heart-handshake text-default me-2 group-hover:text-primary"></i>Deals
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="leads-grid.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-user-check text-default me-2 group-hover:text-primary"></i>Leads
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="pipeline.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-timeline-event-text text-default me-2 group-hover:text-primary"></i>Pipeline
</span>
<i class="ti ti-arrow-right"></i>
</a>
<a href="activity.html" class="flex items-center justify-between p-2 crm-link text-gray-900 group hover:bg-primary-transparent hover:border-primary-transparent hover:text-primary mb-3">
<span class="flex items-center me-3">
<i class="ti ti-activity text-default me-2 group-hover:text-primary"></i>Activities
</span>
<i class="ti ti-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<a href="profile-settings.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-settings-cog"></i>
</a>
</div>
<!-- Horizontal Single -->
<div class="sidebar sidebar-horizontal hidden" id="horizontal-single">
<div class="sidebar-menu">
<div class="main-menu">
<ul class="nav-menu">
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3">
<span>Main</span>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-smart-home"></i><span>Dashboard</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Super Admin</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-grid-add"></i><span>Applications</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-board-split"></i><span>Layouts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="layout-horizontal.html">
<span>Horizontal</span>
</a>
</li>
<li>
<a href="layout-detached.html">
<span>Detached</span>
</a>
</li>
<li>
<a href="layout-modern.html">
<span>Modern</span>
</a>
</li>
<li>
<a href="layout-two-column.html">
<span>Two Column </span>
</a>
</li>
<li>
<a href="layout-hovered.html">
<span>Hovered</span>
</a>
</li>
<li>
<a href="layout-box.html">
<span>Boxed</span>
</a>
</li>
<li>
<a href="layout-horizontal-single.html">
<span>Horizontal Single</span>
</a>
</li>
<li>
<a href="layout-horizontal-overlay.html">
<span>Horizontal Overlay</span>
</a>
</li>
<li>
<a href="layout-horizontal-box.html">
<span>Horizontal Box</span>
</a>
</li>
<li>
<a href="layout-horizontal-sidemenu.html">
<span>Menu Aside</span>
</a>
</li>
<li>
<a href="layout-vertical-transparent.html">
<span>Transparent</span>
</a>
</li>
<li>
<a href="layout-without-header.html">
<span>Without Header</span>
</a>
</li>
<li>
<a href="layout-rtl.html">
<span>RTL</span>
</a>
</li>
<li>
<a href="layout-dark.html">
<span>Dark</span>
</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="clients-grid.html"><span>Clients</span>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="submenu">
<a href="call.html">Crm<span class="menu-arrow"></span></a>
<ul>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">Leaves<span class="menu-arrow"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Administration</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Settings</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">General Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Website Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">System Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Financial Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">
<a href="#" class="active">
<i class="ti ti-page-break"></i><span>Pages</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
<li class="submenu">
<a href="#"><span>Content</span> <span class="menu-arrow"></span></a>
<ul>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>Authentication</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</li>
<li class="submenu">
<a href="#" class="active">
<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);" class="active">
<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);" class="active">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="active">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html">Form Select</a>
</li>
<li>
<a href="form-mask.html">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul>
<li>
<a href="form-horizontal.html">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html">Form Validation</a>
</li>
<li>
<a href="form-select2.html">Select2</a>
</li>
<li>
<a href="form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html">Form Pickers</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Tables</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="tables-basic.html">Basic Tables </a>
</li>
<li>
<a href="data-tables.html">Data Table </a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-chart-line"></i>
<span>Charts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="chart-apex.html">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html">Chart C3</a>
</li>
<li>
<a href="chart-js.html">Chart Js</a>
</li>
<li>
<a href="chart-morris.html">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-icons"></i>
<span>Icons</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="icon-fontawesome.html">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Horizontal Single -->
<div class="flex items-center">
<div class="me-1">
<a href="#" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent btnFullscreen">
<i class="ti ti-maximize"></i>
</a>
</div>
<div class="me-1">
<button data-dropdown-toggle="app-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900" type="button">
<i class="ti ti-layout-grid-remove"></i>
</button>
<div id="app-dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-[5px] shadow w-[200px]">
<div class="border-b border px-[20px] py-4">
<h4>Applications</h4>
</div>
<div class="border-b border p-[20px]">
<a href="calendar.html" class="flex items-center text-gray-900 hover:text-primary pb-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-calendar text-gray-900"></i></span>Calendar
</a>
<a href="todo.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-subtask text-gray-900"></i></span>To Do
</a>
<a href="notes.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-notes text-gray-900"></i></span>Notes
</a>
<a href="file-manager.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-folder text-gray-900"></i></span>File Manager
</a>
<a href="kanban-view.html" class="flex items-center text-gray-900 hover:text-primary py-2">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-layout-kanban text-gray-900"></i></span>Kanban
</a>
<a href="invoices.html" class="flex items-center text-gray-900 hover:text-primary py-2 pb-0">
<span class="inline-flex items-center justify-center size-8 rounded bg-dark-transparent me-2"><i class="ti ti-file-invoice text-gray-900"></i></span>Invoices
</a>
</div>
</div>
</div>
<div class="me-1">
<a href="chat.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-brand-hipchat"></i>
<span class="right-1 top-0.5 absolute w-[10px] h-[10px] text-[6px] flex items-center justify-center bg-info text-white rounded-full">5</span>
</a>
</div>
<div class="me-1">
<a href="email.html" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-mail"></i>
</a>
</div>
<div class="me-1 notification_item">
<button data-dropdown-toggle="noti-dropdown" class="btn btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent focus:bg-dark-transparent focus:text-gray-900 relative" type="button">
<i class="ti ti-bell"></i>
<span class="right-[5px] top-[5px] absolute w-[6px] h-[6px] text-[6px] flex items-center justify-center bg-danger text-white rounded-full notification-status-dot"></span>
</button>
<div id="noti-dropdown" class="z-10 hidden bg-white rounded-[5px] shadow p-6 w-55 dark:bg-gray-700">
<div class="flex items-center justify-between border-b border-borderColor p-0 pb-4 mb-4">
<h4 class="notification-title">Notifications (2)</h4>
<div class="flex items-center">
<a href="#" class="text-primary text-nowrap text-[15px] me-3 lh-1">Mark all as read</a>
<button id="doubleDropdownButton" data-dropdown-toggle="doubleDropdown" data-dropdown-placement="right-start" type="button" class="flex items-center w-full text-gray-900 hover:text-primary"><i class="ti ti-calendar-due me-1"></i>Today</button>
<div id="doubleDropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
<ul class="p-2 text-sm text-gray-900" aria-labelledby="doubleDropdownButton">
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900">This Week</a>
</li>
<li>
<a href="javascript:void(0);" class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900">Last Week</a>
</li>
</ul>
</div>
</div>
</div>
<div class="text-gray-900 noti-content scroll-smooth h-[270px] overflow-y-auto">
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-27.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1"><span class="text-title font-semibold">Shawn</span> performance in Math is below the threshold.</p>
<span>Just Now</span>
</div>
</div>
</a>
</div>
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html" class="pb-0">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-23.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1"><span class="text-title font-semibold">Sylvia</span> added appointment on 02:00 PM</p>
<span>10 mins ago</span>
<div
class="flex justify-start items-center mt-1">
<span class="btn bg-light border border-light text-gray-900 text-center py-1 px-2 hover:bg-light-900 hover:text-gray-900 text-xs leading-normal me-2">Deny</span>
<span class="btn bg-primary border border-primary text-white text-center py-1 px-2 hover:bg-primary-900 hover:text-white text-xs leading-normal">Approve</span>
</div>
</div>
</div>
</a>
</div>
<div class="border-b border-borderColor mb-4 pb-4">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-25.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1">New student record <span class="text-title font-semibold"> George</span> is created by <span class="text-title font-semibold">Teressa</span></p>
<span>2 hrs ago</span>
</div>
</div>
</a>
</div>
<div class="border-0 mb-4 pb-0">
<a href="activity.html">
<div class="flex">
<span class="flex items-center size-[45px] me-2 shrink-0">
<img src="assets/img/profiles/avatar-01.jpg" alt="Profile" class="rounded">
</span>
<div class="grow">
<p class="mb-1">A new teacher record for <span class="text-title font-semibold">Elisa</span> </p>
<span>09:45 AM</span>
</div>
</div>
</a>
</div>
</div>
<div class="flex p-0 gap-2">
<a href="#" class="btn bg-light border border-light text-gray-900 text-center hover:bg-light-900 hover:text-gray-900 w-full">Cancel</a>
<a href="activity.html" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white w-full">View All</a>
</div>
</div>
</div>
<div class="me-1">
<button data-dropdown-toggle="profile-dropdown" class="flex items-center justify-center" type="button">
<span class="relative">
<img src="assets/img/profiles/avatar-12.jpg" alt="Img" class="size-6 rounded-full">
<span class="right-0 bottom-0 absolute w-2 h-2 bg-success border-2 border-white rounded-full"></span>
</span>
</button>
<div id="profile-dropdown" class="z-10 hidden bg-white divide-y divide-borderColor rounded-[5px] shadow w-55">
<div class="px-[20px] py-4">
<div class="flex items-center">
<span class="size-[45px] me-2">
<img src="assets/img/profiles/avatar-12.jpg" alt="img" class="rounded-full border-2 border-gray-100">
</span>
<div>
<h5 class="mb-0">Kevin Larry</h5>
<p class="text-xs leading-normal text-gray-900 font-medium mb-0">[email protected]</p>
</div>
</div>
</div>
<ul class="p-[20px]">
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="profile.html">
<i class="ti ti-user-circle me-1"></i>My Profile
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="bussiness-settings.html">
<i class="ti ti-settings me-1"></i>Settings
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="security-settings.html">
<i class="ti ti-status-change me-1"></i>Status
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="profile-settings.html">
<i class="ti ti-circle-arrow-up me-1"></i>My Account
</a>
</li>
<li>
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="knowledgebase.html">
<i class="ti ti-question-mark me-1"></i>Knowledge Base
</a>
</li>
</ul>
<div class="px-[20px] py-4">
<a class="inline-flex items-center text-gray-900 py-2 hover:text-primary" href="login.html">
<i class="ti ti-login me-2"></i>Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="dropdown mobile-user-menu">
<a href="javascript:void(0);" data-dropdown-toggle="mobile-dropdown"><i class="fa fa-ellipsis-v"></i></a>
<ul id="mobile-dropdown" class="hidden p-1 border rounded bg-white shadow-lg w-40 z-[1]">
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="profile.html">My Profile</a></li>
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="profile-settings.html">Settings</a></li>
<li><a class="rounded p-2 flex items-center hover:bg-primary-transparent hover:text-primary text-gray-900" href="login.html">Logout</a></li>
</ul>
</div>
<!-- /Mobile Menu -->
</div>
</div>
<!-- /Header -->
<!-- Sidebar -->
<div class="sidebar fixed top-0 left-0 bottom-0 w-sidebar bg-white border-r border-borderColor" id="sidebar">
<!-- Logo -->
<div class="sidebar-logo fixed h-[50px] w-sidebar pt-4 px-4">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="logo-small hidden">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo hidden">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<!-- /Logo -->
<div class="modern-profile hidden p-3 pb-0 ">
<div class="text-center rounded bg-light p-3 mb-4 user-profile flex items-center justify-center flex-col">
<div class="relative inline-flex items-center justify-center size-[45px] online mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="rounded-full">
<div class="absolute inline-flex items-center justify-center w-3 h-3 text-xs font-bold text-white bg-success border-2 border-white rounded-full top-8 end-0 dark:border-gray-900"></div>
</div>
<h6 class="text-xs leading-normal font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="sidebar-nav mb-3">
<ul class="nav nav-tabs nav-tabs-solid nav-tabs-rounded nav-justified bg-light p-3 rounded-[65px] flex justify-center items-center gap-3" role="tablist">
<li class="nav-item py-2 px-3 bg-primary rounded-[65px]"><a class="nav-link active border-0 text-white" href="#">Menu</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="chat.html">Chats</a></li>
<li class="nav-item py-2 px-3 rounded-[65px]"><a class="nav-link border-0 text-gray-700" href="email.html">Inbox</a></li>
</ul>
</div>
</div>
<div class="sidebar-header p-3 pb-0 pt-2 hidden">
<div class="text-center rounded bg-light p-2 mb-4 sidebar-profile flex items-center">
<div class="size-8 onlin">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="rounded-full">
</div>
<div class="text-start sidebar-profile-info ms-2">
<h6 class="text-xs leading-normal font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
</div>
<div class="flex w-[220px] relative me-1 mb-4">
<span class="absolute inset-y-0 start-0 flex items-center ps-2.5 pointer-events-none text-gray-400"><i class="ti ti-search"></i></span>
<input type="text" class="block flex-1 border border-borderColor bg-white rounded-[5px] py-1.5 pl-7 pr-12 text-gray-900 placeholder:text-gray-400 focus:ring-0 focus:border-borderColor h-[30px] text-xs" placeholder="Search in HRMS">
<span class="absolute inset-y-1/2 end-0 flex items-center me-2.5 pointer-events-none "><kbd class="bg-dark-transparent text-[10px] font-medium text-gray-500 px-[3px] py-0.5 rounded">CTRL + / </kbd></span>
</div>
<div class="flex items-center justify-between menu-item mb-3">
<div class="me-3">
<a href="calendar.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="me-3 notification-item">
<a href="chat.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-brand-hipchat"></i>
<span class="text-[6px] w-[10px] h-[10px] flex items-center justify-center text-white rounded-full absolute right-[5px] text top-[2px] z-[1] bg-info">5</span>
</a>
</div>
<div class="me-3 notification-item">
<a href="activity.html" class="relative inline-flex items-center justify-center border border-borderColor size-[30px] p-3 text-sm font-medium text-center hover:text-gray-900 hover:bg-dark-transparent rounded-[5px]">
<i class="ti ti-bell"></i>
<div class="notification-status-dot w-[6px] h-[6px] rounded-full absolute right-[5px] top-[5px] z-[1] bg-danger"></div>
</a>
</div>
<div class="me-0">
<a href="email.html" class="btn btn-menubar border border-borderColor size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-message"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>MAIN MENU</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-smart-home text-gray-500 group-hover:text-gray-900 group-active:text-gray-900"></i>
<span class="ms-2">Dashboard</span>
<span class="ms-2 text-[10px] bg-danger rounded font-medium text-white px-1 py-0.5 inline-flex items-center">Hot</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="index.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-grid-add"></i><span class="ms-2">Applications</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="chat.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calls<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="voice-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Voice Call</a></li>
<li><a href="video-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Video Call</a></li>
<li><a href="outgoing-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Outgoing Call</a></li>
<li><a href="incoming-call.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Incoming Call</a></li>
<li><a href="call-history.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Calendar</a></li>
<li><a href="email.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Email</a></li>
<li><a href="todo.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">To Do</a></li>
<li><a href="notes.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Notes</a></li>
<li><a href="social-feed.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Social Feed</a></li>
<li><a href="file-manager.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">File Manager</a></li>
<li><a href="kanban-view.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Kanban</a></li>
<li><a href="invoices.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoices</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">Super Admin</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="dashboard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Dashboard</a></li>
<li><a href="companies.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Companies</a></li>
<li><a href="subscription.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Subscriptions</a></li>
<li><a href="packages.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Packages</a></li>
<li><a href="domain.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Domain</a></li>
<li><a href="purchase-transaction.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Purchase Transaction</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>LAYOUT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="layout-horizontal.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar"></i><span class="ms-2">Horizontal</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-detached.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-details"></i><span class="ms-2">Detached</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-modern.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board-split"></i><span class="ms-2">Modern</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-two-column.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-columns-2"></i><span class="ms-2">Two Column </span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-hovered.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-column-insert-left"></i><span class="ms-2">Hovered</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-box.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-align-middle"></i><span class="ms-2">Boxed</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-single.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-navbar-inactive"></i><span class="ms-2">Horizontal Single</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-overlay.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-collage"></i><span class="ms-2">Horizontal Overlay</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-box.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-board"></i><span class="ms-2">Horizontal Box</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-horizontal-sidemenu.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table"></i><span class="ms-2">Menu Aside</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-vertical-transparent.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout"></i><span class="ms-2">Transparent</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-without-header.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-layout-sidebar"></i><span class="ms-2">Without Header</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-rtl.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-text-direction-rtl"></i><span class="ms-2">RTL</span>
</a>
</li>
<li class="mb-[5px]">
<a href="layout-dark.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-moon"></i><span class="ms-2">Dark</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>PROJECTS</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="clients-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-users-group"></i><span class="ms-2">Clients</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-box"></i><span class="ms-2">Projects</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="projects-grid.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Projects</a></li>
<li><a href="tasks.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tasks</a></li>
<li><a href="task-board.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Task Board</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>CRM</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="contacts-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-shield"></i><span class="ms-2">Contacts</span>
</a>
</li>
<li class="mb-[5px]">
<a href="companies-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-building"></i><span class="ms-2">Companies</span>
</a>
</li>
<li class="mb-[5px]">
<a href="deals-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-heart-handshake"></i><span class="ms-2">Deals</span>
</a>
</li>
<li class="mb-[5px]">
<a href="leads-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-check"></i><span class="ms-2">Leads</span>
</a>
</li>
<li class="mb-[5px]">
<a href="pipeline.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-timeline-event-text"></i><span class="ms-2">Pipeline</span>
</a>
</li>
<li class="mb-[5px]">
<a href="analytics.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-graph"></i><span class="ms-2">Analytics</span>
</a>
</li>
<li class="mb-[5px]">
<a href="activity.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-activity"></i><span class="ms-2">Activities</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>HRM</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-users"></i><span class="ms-2">Employees</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="employees.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Lists</a></li>
<li><a href="employees-grid.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Grid</a></li>
<li><a href="employee-details.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Details</a></li>
<li><a href="departments.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Departments</a></li>
<li><a href="designations.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Designations</a></li>
<li><a href="policy.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Policies</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-ticket"></i><span class="ms-2">Tickets</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="tickets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tickets</a></li>
<li><a href="ticket-details.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Ticket Details</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="holidays.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-calendar-event"></i><span class="ms-2">Holidays</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-time"></i><span class="ms-2">Attendance</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaves<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="leaves.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave (Employee)</a></li>
<li><a href="leave-settings.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance (Employee)</a></li>
<li><a href="timesheets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Timesheets</a></li>
<li><a href="schedule-timing.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Shift & Schedule</a></li>
<li><a href="overtime.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Overtime</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-school"></i><span class="ms-2">Performance</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="performance-indicator.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Indicator</a></li>
<li><a href="performance-review.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Review</a></li>
<li><a href="performance-appraisal.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Performance Appraisal</a></li>
<li><a href="goal-tracking.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Goal List</a></li>
<li><a href="goal-type.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Goal Type</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-edit"></i><span class="ms-2">Training</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="training.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Training List</a></li>
<li><a href="trainers.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Trainers</a></li>
<li><a href="training-type.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Training Type</a></li>
</ul>
</li>
<li class="mb-[5px]">
<a href="promotion.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-speakerphone"></i><span class="ms-2">Promotion</span>
</a>
</li>
<li class="mb-[5px]">
<a href="resignation.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-external-link"></i><span class="ms-2">Resignation</span>
</a>
</li>
<li class="mb-[5px]">
<a href="termination.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-circle-x"></i><span class="ms-2">Termination</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>RECRUITMENT</span></li>
<li>
<ul class="mb-[19px]">
<li class="mb-[5px]">
<a href="job-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-timeline"></i><span class="ms-2">Jobs</span>
</a>
</li>
<li class="mb-[5px]">
<a href="candidates-grid.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-shield"></i><span class="ms-2">Candidates</span>
</a>
</li>
<li class="mb-[5px]">
<a href="refferals.html" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-ux-circle"></i><span class="ms-2">Referrals</span>
</a>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>FINANCE & ACCOUNTS</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-shopping-cart-dollar"></i><span class="ms-2">Sales</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="estimates.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Estimates</a></li>
<li><a href="invoices.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoices</a></li>
<li><a href="payments.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payments</a></li>
<li><a href="expenses.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Expenses</a></li>
<li><a href="provident-fund.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Provident Fund</a></li>
<li><a href="taxes.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Taxes</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-dollar"></i><span class="ms-2">Accounting</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="categories.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Categories</a></li>
<li><a href="budgets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budgets</a></li>
<li><a href="budget-expenses.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budget Expenses</a></li>
<li><a href="budget-revenues.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-cash"></i><span class="ms-2">Payroll</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="employee-salary.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Salary</a></li>
<li><a href="payslip.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payslip</a></li>
<li><a href="payroll.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payroll Items</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>ADMINISTRATION</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-cash"></i><span class="ms-2">Assets</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="assets.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Assets</a></li>
<li><a href="asset-categories.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Asset Categories</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-headset"></i><span class="ms-2">Help & Supports</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="knowledgebase.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Knowledge Base</a></li>
<li><a href="activity.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Activities</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">User Management</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="users.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Users</a></li>
<li><a href="roles-permissions.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-user-star"></i><span class="ms-2">Reports</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="expenses-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Expense Report</a></li>
<li><a href="invoice-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Invoice Report</a></li>
<li><a href="payment-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payment Report</a></li>
<li><a href="project-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Project Report</a></li>
<li><a href="task-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Task Report</a></li>
<li><a href="user-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">User Report</a></li>
<li><a href="employee-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Employee Report</a></li>
<li><a href="payslip-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Payslip Report</a></li>
<li><a href="attendance-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Attendance Report</a></li>
<li><a href="leave-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leave Report</a></li>
<li><a href="daily-report.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Daily Report</a></li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-settings"></i><span class="ms-2">Settings</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">General Settings<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></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 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-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 active subdrop flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before: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 active flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Select</a>
</li>
<li>
<a href="form-mask.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li>
<a href="form-horizontal.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Validation</a>
</li>
<li>
<a href="form-select2.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Select2</a>
</li>
<li>
<a href="form-wizard.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Form Picker</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table-plus"></i>
<span class="ms-2">Tables</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="tables-basic.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Basic Tables </a>
</li>
<li>
<a href="data-tables.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Data Table </a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-chart-line"></i>
<span class="ms-2">Charts</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="chart-apex.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chart C3</a>
</li>
<li>
<a href="chart-js.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Chart Js</a>
</li>
<li>
<a href="chart-morris.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-icons"></i>
<span class="ms-2">Icons</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="icon-fontawesome.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-table-plus"></i>
<span class="ms-2">Maps</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li>
<a href="maps-vector.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Vector</a>
</li>
<li>
<a href="maps-leaflet.html" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-title text-[10px] font-semibold text-gray-400 mb-3"><span>Extras</span></li>
<li>
<ul class="mb-[19px]">
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-file-text"></i>
<span class="ms-2">Documentation</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-exchange"></i>
<span class="ms-2">Changelog</span>
<span class="bg-pink text-white text-[10px] py-0.5 px-1.5 ms-1 rounded leading-4">v4.0.8</span>
</a>
</li>
<li class="submenu mb-[5px]">
<a href="javascript:void(0);" class="relative flex item-center w-full p-2 text-sm leading-normal font-medium text-gray-900 group hover:bg-dark-transparent transition-all duration-500 ease-in-out rounded-[5px]">
<i class="ti ti-menu-2"></i>
<span class="ms-2">Multi Level</span>
<span class="menu-arrow absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span>
</a>
<ul class="relative mt-2 before:absolute before:top-0 before:left-3.5 before:w-[1.5px] before:h-full before:bg-gray-100">
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-5 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-10 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 ms-10 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);" class="relative flex items-center w-full text-xs leading-normal p-2 ps-8 text-gray-500 hover:text-primary before:absolute before:left-[13px] before:top-1/2 before:-translate-y-1/2 before:w-0.5 before:h-[18px] before:bg-primary before:opacity-0">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Sidebar -->
<!-- Horizontal Menu -->
<div class="sidebar sidebar-horizontal hidden" id="horizontal-menu">
<div class="sidebar-menu">
<div class="main-menu">
<ul class="nav-menu">
<li class="menu-title">
<span>Main</span>
</li>
<li class="submenu">
<a href="#" class="subdrop">
<i class="ti ti-smart-home"></i><span>Dashboard</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Super Admin</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-grid-add"></i><span>Applications</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="chat.html">Chat</a></li>
<li class="submenu submenu-two">
<a href="call.html">Calls<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
</ul>
</li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-layout-board-split"></i><span>Layouts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="layout-horizontal.html">
<span>Horizontal</span>
</a>
</li>
<li>
<a href="layout-detached.html">
<span>Detached</span>
</a>
</li>
<li>
<a href="layout-modern.html">
<span>Modern</span>
</a>
</li>
<li>
<a href="layout-two-column.html">
<span>Two Column </span>
</a>
</li>
<li>
<a href="layout-hovered.html">
<span>Hovered</span>
</a>
</li>
<li>
<a href="layout-box.html">
<span>Boxed</span>
</a>
</li>
<li>
<a href="layout-horizontal-single.html">
<span>Horizontal Single</span>
</a>
</li>
<li>
<a href="layout-horizontal-overlay.html">
<span>Horizontal Overlay</span>
</a>
</li>
<li>
<a href="layout-horizontal-box.html">
<span>Horizontal Box</span>
</a>
</li>
<li>
<a href="layout-horizontal-sidemenu.html">
<span>Menu Aside</span>
</a>
</li>
<li>
<a href="layout-vertical-transparent.html">
<span>Transparent</span>
</a>
</li>
<li>
<a href="layout-without-header.html">
<span>Without Header</span>
</a>
</li>
<li>
<a href="layout-rtl.html">
<span>RTL</span>
</a>
</li>
<li>
<a href="layout-dark.html">
<span>Dark</span>
</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="clients-grid.html"><span>Clients</span>
</a>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
<li class="submenu">
<a href="call.html">Crm<span class="menu-arrow"></span></a>
<ul>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">Leaves<span class="menu-arrow"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<i class="ti ti-user-star"></i><span>Administration</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Settings</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);">General Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Website Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">System Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Financial Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu">
<a href="#" class="active">
<i class="ti ti-page-break"></i><span>Pages</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
<li class="submenu">
<a href="#"><span>Content</span> <span class="menu-arrow"></span></a>
<ul>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">Blogs<span class="menu-arrow"></span></a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Locations<span class="menu-arrow"></span></a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">
<span>Authentication</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu">
<a href="javascript:void(0);" class="">Login<span class="menu-arrow"></span></a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="">Register<span class="menu-arrow"></span></a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu"><a href="javascript:void(0);">Forgot Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Reset Password<span class="menu-arrow"></span></a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Email Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">2 Step Verification<span class="menu-arrow"></span></a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</li>
<li class="submenu">
<a href="#" class="active">
<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);" class="active">
<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);" class="active">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="active">Basic Inputs</a>
</li>
<li>
<a href="form-checkbox-radios.html">Checkbox & Radios</a>
</li>
<li>
<a href="form-input-groups.html">Input Groups</a>
</li>
<li>
<a href="form-grid-gutters.html">Grid & Gutters</a>
</li>
<li>
<a href="form-select.html">Form Select</a>
</li>
<li>
<a href="form-mask.html">Input Masks</a>
</li>
<li>
<a href="form-fileupload.html">File Uploads</a>
</li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts <span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li>
<a href="form-horizontal.html">Horizontal Form</a>
</li>
<li>
<a href="form-vertical.html">Vertical Form</a>
</li>
<li>
<a href="form-floating-labels.html">Floating Labels</a>
</li>
</ul>
</li>
<li>
<a href="form-validation.html">Form Validation</a>
</li>
<li>
<a href="form-select2.html">Select2</a>
</li>
<li>
<a href="form-wizard.html">Form Wizard</a>
</li>
<li>
<a href="form-pickers.html">Form Pickers</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Tables</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="tables-basic.html">Basic Tables </a>
</li>
<li>
<a href="data-tables.html">Data Table </a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-chart-line"></i>
<span>Charts</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="chart-apex.html">Apex Charts</a>
</li>
<li>
<a href="chart-c3.html">Chart C3</a>
</li>
<li>
<a href="chart-js.html">Chart Js</a>
</li>
<li>
<a href="chart-morris.html">Morris Charts</a>
</li>
<li>
<a href="chart-flot.html">Flot Charts</a>
</li>
<li>
<a href="chart-peity.html">Peity Charts</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-icons"></i>
<span>Icons</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="icon-fontawesome.html">Fontawesome Icons</a>
</li>
<li>
<a href="icon-tabler.html">Tabler Icons</a>
</li>
<li>
<a href="icon-bootstrap.html">Bootstrap Icons</a>
</li>
<li>
<a href="icon-remix.html">Remix Icons</a>
</li>
<li>
<a href="icon-feather.html">Feather Icons</a>
</li>
<li>
<a href="icon-ionic.html">Ionic Icons</a>
</li>
<li>
<a href="icon-material.html">Material Icons</a>
</li>
<li>
<a href="icon-pe7.html">Pe7 Icons</a>
</li>
<li>
<a href="icon-simpleline.html">Simpleline Icons</a>
</li>
<li>
<a href="icon-themify.html">Themify Icons</a>
</li>
<li>
<a href="icon-weather.html">Weather Icons</a>
</li>
<li>
<a href="icon-typicon.html">Typicon Icons</a>
</li>
<li>
<a href="icon-flag.html">Flag Icons</a>
</li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="xl:flex items-center d-none">
<a href="#" class="me-3 avatar avatar-sm">
<img src="assets/img/profiles/avatar-07.jpg" alt="profile" class="rounded-full">
</a>
<a href="#" class="btn btn-icon btn-sm rounded-full mode-toggle">
<i class="ti ti-sun"></i>
</a>
</div>
</div>
</div>
</div>
<!-- /Horizontal Menu -->
<!-- Two Col Sidebar -->
<div class="two-col-sidebar" id="two-col-sidebar">
<div class="sidebar sidebar-twocol">
<div class="twocol-mini">
<a href="index.html" class="logo-small">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<div class="sidebar-left slimscroll">
<div class="nav flex flex-col items-center nav-pills" id="sidebar-tabs" data-tabs-toggle="#two-col-tabs" data-tabs-active-classes="bg-light text-default" role="tablist" >
<a href="#" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#dashboard" aria-selected="false">
<i class="ti ti-smart-home"></i>
</a>
<a href="#" class="nav-link" title="Apps" role="tab" data-tabs-target="#application" aria-selected="false">
<i class="ti ti-layout-grid-add"></i>
</a>
<a href="#" class="nav-link" title="Super Admin" role="tab" data-tabs-target="#super-admin" aria-selected="false">
<i class="ti ti-user-star"></i>
</a>
<a href="#" class="nav-link" title="Layout" role="tab" data-tabs-target="#layout" aria-selected="false">
<i class="ti ti-layout-board-split"></i>
</a>
<a href="#" class="nav-link" title="Projects" role="tab" data-tabs-target="#projects" aria-selected="false">
<i class="ti ti-users-group"></i>
</a>
<a href="#" class="nav-link" title="Crm" role="tab" data-tabs-target="#crm" aria-selected="false">
<i class="ti ti-user-shield"></i>
</a>
<a href="#" class="nav-link" title="Hrm" role="tab" data-tabs-target="#hrm" aria-selected="false">
<i class="ti ti-user"></i>
</a>
<a href="#" class="nav-link" title="Finance" role="tab" data-tabs-target="#finance" aria-selected="false">
<i class="ti ti-shopping-cart-dollar"></i>
</a>
<a href="#" class="nav-link" title="Administration" role="tab" data-tabs-target="#administration" aria-selected="false">
<i class="ti ti-cash"></i>
</a>
<a href="#" class="nav-link" title="Content" role="tab" data-tabs-target="#content" aria-selected="false">
<i class="ti ti-license"></i>
</a>
<a href="#" class="nav-link" title="Pages" role="tab" data-tabs-target="#pages" aria-selected="false">
<i class="ti ti-page-break"></i>
</a>
<a href="#" class="nav-link" title="Authentication" role="tab" data-tabs-target="#authentication" aria-selected="false">
<i class="ti ti-lock-check"></i>
</a>
<a href="#" class="nav-link " title="UI Elements" role="tab" data-tabs-target="#ui-elements" aria-selected="true">
<i class="ti ti-ux-circle"></i>
</a>
<a href="#" class="nav-link" title="Extras" role="tab" data-tabs-target="#extras" aria-selected="false">
<i class="ti ti-vector-triangle"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-right">
<div class="sidebar-logo mb-4">
<a href="index.html" class="logo logo-normal">
<img src="assets/img/logo.svg" alt="Logo">
</a>
<a href="index.html" class="dark-logo">
<img src="assets/img/logo-white.svg" alt="Logo">
</a>
</div>
<div class="sidebar-scroll">
<h6 class="mb-3">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="tab-content" id="two-col-tabs">
<div class="hidden" id="dashboard">
<ul>
<li class="menu-title"><span>MAIN MENU</span></li>
<li><a href="index.html">Admin Dashboard</a></li>
<li><a href="employee-dashboard.html">Employee Dashboard</a></li>
<li><a href="deals-dashboard.html">Deals Dashboard</a></li>
<li><a href="leads-dashboard.html">Leads Dashboard</a></li>
</ul>
</div>
<div class="hidden" id="application">
<ul>
<li class="menu-title"><span>APPLICATION</span></li>
<li><a href="voice-call.html">Voice Call</a></li>
<li><a href="video-call.html">Video Call</a></li>
<li><a href="outgoing-call.html">Outgoing Call</a></li>
<li><a href="incoming-call.html">Incoming Call</a></li>
<li><a href="call-history.html">Call History</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="email.html">Email</a></li>
<li><a href="todo.html">To Do</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="file-manager.html">File Manager</a></li>
<li><a href="kanban-view.html">Kanban</a></li>
<li><a href="invoices.html">Invoices</a></li>
</ul>
</div>
<div class="hidden" id="super-admin">
<ul>
<li class="menu-title"><span>SUPER ADMIN</span></li>
<li><a href="dashboard.html">Dashboard</a></li>
<li><a href="companies.html">Companies</a></li>
<li><a href="subscription.html">Subscriptions</a></li>
<li><a href="packages.html">Packages</a></li>
<li><a href="domain.html">Domain</a></li>
<li><a href="purchase-transaction.html">Purchase Transaction</a></li>
</ul>
</div>
<div class="hidden" id="layout">
<ul>
<li class="menu-title"><span>LAYOUT</span></li>
<li><a href="layout-horizontal.html"><span>Horizontal</span></a></li>
<li><a href="layout-detached.html"><span>Detached</span></a></li>
<li><a href="layout-modern.html"><span>Modern</span></a></li>
<li><a href="layout-two-column.html"><span>Two Column </span></a></li>
<li><a href="layout-hovered.html"><span>Hovered</span></a></li>
<li><a href="layout-box.html"><span>Boxed</span></a></li>
<li><a href="layout-horizontal-single.html"><span>Horizontal Single</span></a></li>
<li><a href="layout-horizontal-overlay.html"><span>Horizontal Overlay</span></a></li>
<li><a href="layout-horizontal-box.html"><span>Horizontal Box</span></a></li>
<li><a href="layout-horizontal-sidemenu.html"><span>Menu Aside</span></a></li>
<li><a href="layout-vertical-transparent.html"><span>Transparent</span></a></li>
<li><a href="layout-without-header.html"><span>Without Header</span></a></li>
<li><a href="layout-rtl.html"><span>RTL</span></a></li>
<li><a href="layout-dark.html"><span>Dark</span></a></li>
</ul>
</div>
<div class="hidden" id="projects">
<ul>
<li class="menu-title"><span>PROJECTS</span></li>
<li><a href="clients-grid.html">Clients</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Projects</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="projects-grid.html">Projects</a></li>
<li><a href="tasks.html">Tasks</a></li>
<li><a href="task-board.html">Task Board</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="crm">
<ul>
<li class="menu-title"><span>CRM</span></li>
<li><a href="contacts-grid.html"><span>Contacts</span></a></li>
<li><a href="companies-grid.html"><span>Companies</span></a></li>
<li><a href="deals-grid.html"><span>Deals</span></a></li>
<li><a href="leads-grid.html"><span>Leads</span></a></li>
<li><a href="pipeline.html"><span>Pipeline</span></a></li>
<li><a href="analytics.html"><span>Analytics</span></a></li>
<li><a href="activity.html"><span>Activities</span></a></li>
</ul>
</div>
<div class="hidden" id="hrm">
<ul>
<li class="menu-title"><span>HRM</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Employees</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employees.html">Employee Lists</a></li>
<li><a href="employees-grid.html">Employee Grid</a></li>
<li><a href="employee-details.html">Employee Details</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="designations.html">Designations</a></li>
<li><a href="policy.html">Policies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Tickets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="ticket-details.html">Ticket Details</a></li>
</ul>
</li>
<li><a href="holidays.html"><span>Holidays</span></a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Attendance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Leaves<span
class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="leaves.html">Leaves (Admin)</a></li>
<li><a href="leaves-employee.html">Leave (Employee)</a></li>
<li><a href="leave-settings.html">Leave Settings</a></li>
</ul>
</li>
<li><a href="attendance-admin.html">Attendance (Admin)</a></li>
<li><a href="attendance-employee.html">Attendance (Employee)</a></li>
<li><a href="timesheets.html">Timesheets</a></li>
<li><a href="schedule-timing.html">Shift & Schedule</a></li>
<li><a href="overtime.html">Overtime</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Performance</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="performance-indicator.html">Performance Indicator</a></li>
<li><a href="performance-review.html">Performance Review</a></li>
<li><a href="performance-appraisal.html">Performance Appraisal</a></li>
<li><a href="goal-tracking.html">Goal List</a></li>
<li><a href="goal-type.html">Goal Type</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Training</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="training.html">Training List</a></li>
<li><a href="trainers.html">Trainers</a></li>
<li><a href="training-type.html">Training Type</a></li>
</ul>
</li>
<li><a href="promotion.html"><span>Promotion</span></a></li>
<li><a href="resignation.html"><span>Resignation</span></a></li>
<li><a href="termination.html"><span>Termination</span></a></li>
</ul>
</div>
<div class="hidden" id="finance">
<ul>
<li class="menu-title"><span>FINANCE & ACCOUNTS</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Sales</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="estimates.html">Estimates</a></li>
<li><a href="invoices.html">Invoices</a></li>
<li><a href="payments.html">Payments</a></li>
<li><a href="expenses.html">Expenses</a></li>
<li><a href="provident-fund.html">Provident Fund</a></li>
<li><a href="taxes.html">Taxes</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Accounting</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="categories.html">Categories</a></li>
<li><a href="budgets.html">Budgets</a></li>
<li><a href="budget-expenses.html">Budget Expenses</a></li>
<li><a href="budget-revenues.html">Budget Revenues</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Payroll</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="employee-salary.html">Employee Salary</a></li>
<li><a href="payslip.html">Payslip</a></li>
<li><a href="payroll.html">Payroll Items</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="administration">
<ul>
<li class="menu-title"><span>ADMINISTRATION</span></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Assets</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="assets.html">Assets</a></li>
<li><a href="asset-categories.html">Asset Categories</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Help & Supports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="knowledgebase.html">Knowledge Base</a></li>
<li><a href="activity.html">Activities</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>User Management</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="users.html">Users</a></li>
<li><a href="roles-permissions.html">Roles & Permissions</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"><span>Reports</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="expenses-report.html">Expense Report</a></li>
<li><a href="invoice-report.html">Invoice Report</a></li>
<li><a href="payment-report.html">Payment Report</a></li>
<li><a href="project-report.html">Project Report</a></li>
<li><a href="task-report.html">Task Report</a></li>
<li><a href="user-report.html">User Report</a></li>
<li><a href="employee-report.html">Employee Report</a></li>
<li><a href="payslip-report.html">Payslip Report</a></li>
<li><a href="attendance-report.html">Attendance Report</a></li>
<li><a href="leave-report.html">Leave Report</a></li>
<li><a href="daily-report.html">Daily Report</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
General Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="profile-settings.html">Profile</a></li>
<li><a href="security-settings.html">Security</a></li>
<li><a href="notification-settings.html">Notifications</a></li>
<li><a href="connected-apps.html">Connected Apps</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Website Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="bussiness-settings.html">Business Settings</a></li>
<li><a href="seo-settings.html">SEO Settings</a></li>
<li><a href="localization-settings.html">Localization</a></li>
<li><a href="prefixes.html">Prefixes</a></li>
<li><a href="preferences.html">Preferences</a></li>
<li><a href="performance-appraisal.html">Appearance</a></li>
<li><a href="language.html">Language</a></li>
<li><a href="authentication-settings.html">Authentication</a></li>
<li><a href="ai-settings.html">AI Settings</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">App Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="salary-settings.html">Salary Settings</a></li>
<li><a href="approval-settings.html">Approval Settings</a></li>
<li><a href="invoice-settings.html">Invoice Settings</a></li>
<li><a href="leave-type.html">Leave Type</a></li>
<li><a href="custom-fields.html">Custom Fields</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
System Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-settings.html">Email Settings</a></li>
<li><a href="email-template.html">Email Templates</a></li>
<li><a href="sms-settings.html">SMS Settings</a></li>
<li><a href="sms-template.html">SMS Templates</a></li>
<li><a href="otp-settings.html">OTP</a></li>
<li><a href="gdpr.html">GDPR Cookies</a></li>
<li><a href="maintenance-mode.html">Maintenance Mode</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Financial Settings
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="payment-gateways.html">Payment Gateways</a></li>
<li><a href="tax-rates.html">Tax Rate</a></li>
<li><a href="currencies.html">Currencies</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Other Settings<span class="menu-arrow"></span></a>
<ul>
<li><a href="custom-css.html">Custom CSS</a></li>
<li><a href="custom-js.html">Custom JS</a></li>
<li><a href="cronjob.html">Cronjob</a></li>
<li><a href="storage-settings.html">Storage</a></li>
<li><a href="ban-ip-address.html">Ban IP Address</a></li>
<li><a href="backup.html">Backup</a></li>
<li><a href="clear-cache.html">Clear Cache</a></li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="content">
<ul>
<li class="menu-title"><span>CONTENT</span></li>
<li><a href="pages.html">Pages</a></li>
<li class="submenu">
<a href="javascript:void(0);">
Blogs
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="blogs.html">All Blogs</a></li>
<li><a href="blog-categories.html">Categories</a></li>
<li><a href="blog-comments.html">Comments</a></li>
<li><a href="blog-tags.html">Blog Tags</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Locations
<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="countries.html">Countries</a></li>
<li><a href="states.html">States</a></li>
<li><a href="cities.html">Cities</a></li>
</ul>
</li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="faq.html">FAQ’S</a></li>
</ul>
</div>
<div class="hidden" id="pages">
<ul>
<li class="menu-title"><span>PAGES</span></li>
<li><a href="starter.html"><span>Starter</span></a></li>
<li><a href="profile.html"><span>Profile</span></a></li>
<li><a href="gallery.html"><span>Gallery</span></a></li>
<li><a href="search-result.html"><span>Search Results</span></a></li>
<li><a href="timeline.html"><span>Timeline</span></a></li>
<li><a href="pricing.html"><span>Pricing</span></a></li>
<li><a href="coming-soon.html"><span>Coming Soon</span></a></li>
<li><a href="under-maintenance.html"><span>Under Maintenance</span></a></li>
<li><a href="under-construction.html"><span>Under Construction</span></a></li>
<li><a href="api-keys.html"><span>API Keys</span></a></li>
<li><a href="privacy-policy.html"><span>Privacy Policy</span></a></li>
<li><a href="terms-condition.html"><span>Terms & Conditions</span></a></li>
</ul>
</div>
<div class="hidden" id="authentication">
<ul>
<li class="menu-title"><span>AUTHENTICATION</span></li>
<li class="submenu">
<a href="javascript:void(0);">
Login<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="login.html">Cover</a></li>
<li><a href="login-2.html">Illustration</a></li>
<li><a href="login-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Register<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="register.html">Cover</a></li>
<li><a href="register-2.html">Illustration</a></li>
<li><a href="register-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Forgot Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="forgot-password.html">Cover</a></li>
<li><a href="forgot-password-2.html">Illustration</a></li>
<li><a href="forgot-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Reset Password<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="reset-password.html">Cover</a></li>
<li><a href="reset-password-2.html">Illustration</a></li>
<li><a href="reset-password-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
Email Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="email-verification.html">Cover</a></li>
<li><a href="email-verification-2.html">Illustration</a></li>
<li><a href="email-verification-3.html">Basic</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
2 Step Verification<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="two-step-verification.html">Cover</a></li>
<li><a href="two-step-verification-2.html">Illustration</a></li>
<li><a href="two-step-verification-3.html">Basic</a></li>
</ul>
</li>
<li><a href="lock-screen.html">Lock Screen</a></li>
<li><a href="error-404.html">404 Error</a></li>
<li><a href="error-500.html">500 Error</a></li>
</ul>
</div>
<div class="hidden" id="ui-elements">
<ul>
<li class="menu-title"><span>UI INTERFACE</span></li>
<li class="submenu">
<a href="javascript:void(0);">Base UI<span class="menu-arrow"></span>
</a>
<ul>
<li><a href="ui-alerts.html">Alerts</a></li>
<li><a href="ui-accordion.html">Accordion</a></li>
<li><a href="ui-avatar.html">Avatar</a></li>
<li><a href="ui-badges.html">Badges</a></li>
<li><a href="ui-borders.html">Border</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-buttons-group.html">Button Group</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-cards.html">Card</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-colors.html">Colors</a></li>
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-images.html">Images</a></li>
<li><a href="ui-lightbox.html">Lightbox</a></li>
<li><a href="ui-media.html">Media</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-offcanvas.html">Offcanvas</a></li>
<li><a href="ui-pagination.html">Pagination</a></li>
<li><a href="ui-popovers.html">Popovers</a></li>
<li><a href="ui-progress.html">Progress</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-sweetalerts.html">Sweet Alerts</a></li>
<li><a href="ui-nav-tabs.html">Tabs</a></li>
<li><a href="ui-tooltips.html">Tooltips</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-video.html">Video</a></li>
<li><a href="ui-sortable.html">Sortable</a></li>
<li><a href="ui-swiperjs.html">Swiperjs</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);"> Advanced UI <span class="menu-arrow"></span> </a>
<ul>
<li><a href="ui-clipboard.html">Clipboard</a></li>
<li><a href="ui-drag-drop.html">Drag & Drop</a></li>
<li><a href="ui-rangeslider.html">Range Slider</a></li>
<li><a href="ui-rating.html">Rating</a></li>
<li><a href="ui-text-editor.html">Text Editor</a></li>
<li><a href="ui-counter.html">Counter</a></li>
<li><a href="ui-scrollbar.html">Scrollbar</a></li>
<li><a href="ui-stickynote.html">Sticky Note</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);" class="active"> Forms <span class="menu-arrow"></span>
</a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="active">Form Elements<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-basic-inputs.html" class="active">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a></li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables <span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="hidden" id="extras">
<ul>
<li class="menu-title"><span>EXTRAS</span></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Change Log</a></li>
<li class="submenu">
<a href="javascript:void(0);"><span>Multi Level</span><span class="menu-arrow"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 1</a></li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Multilevel 2<span class="menu-arrow inside-submenu"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.1</a></li>
<li class="submenu submenu-two submenu-three">
<a href="javascript:void(0);">Multilevel 2.2<span class="menu-arrow inside-submenu inside-submenu-two"></span></a>
<ul>
<li><a href="javascript:void(0);">Multilevel 2.2.1</a></li>
<li><a href="javascript:void(0);">Multilevel 2.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Multilevel 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Two Col Sidebar -->
<!-- Stacked Sidebar -->
<div class="stacked-sidebar" id="stacked-sidebar">
<div class="sidebar sidebar-stacked flex">
<div class="stacked-mini">
<a href="index.html" class="logo-small flex items-center justify-center mb-5">
<img src="assets/img/logo-small.svg" alt="Logo">
</a>
<div class="sidebar-left slimscroll">
<div class="flex items-center flex-col">
<div class="mb-1 notification-item">
<a href="#" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-bell"></i>
<span class="notification-status-dot"></span>
</a>
</div>
<div class="mb-1">
<a href="#" class="btn border after:btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent btnFullscreen">
<i class="ti ti-maximize"></i>
</a>
</div>
<div class="mb-1">
<a href="calendar.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-layout-grid-remove"></i>
</a>
</div>
<div class="mb-1">
<a href="chat.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent relative">
<i class="ti ti-brand-hipchat"></i>
<span class=" bg-info rounded-full flex items-center justify-center header-badge">5</span>
</a>
</div>
<div class="mb-1">
<a href="email.html" class="btn border btn-menubar size-[30px] flex items-center justify-center text-gray-500 rounded-[5px] hover:text-gray-900 hover:bg-dark-transparent">
<i class="ti ti-mail"></i>
</a>
</div>
</div>
</div>
</div>
<div class="sidebar-right flex justify-between flex-col bg-white pt-[16px] border-r h-screen w-[180px]">
<div class="sidebar-scroll px-[16px] pt-0">
<h6 class="mb-3 text-center">Welcome to SmartHR</h6>
<div class="text-center rounded bg-light p-3 mb-4">
<div class="avatar avatar-lg online mx-auto relative mb-3">
<img src="assets/img/profiles/avatar-02.jpg" alt="Img" class="img-fluid rounded-full mx-auto">
</div>
<h6 class="text-[12px] font-normal mb-1">Adrian Herman</h6>
<p class="text-[10px]">System Admin</p>
</div>
<div class="stack-menu relative">
<div class="nav flex-column items-center nav-pills" role="tablist" id="default-stack-styled-tab" data-tabs-toggle="#menu-stacked-bar" data-tabs-active-classes="bg-light text-default">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-6">
<a href="#menu-dashboard" class="nav-link" title="Dashboard" role="tab" data-tabs-target="#menu-dashboard" aria-selected="false">
<span><i class="ti ti-smart-home"></i></span>
<p>Dashboard</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-application" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-application" aria-selected="false">
<span><i class="ti ti-layout-grid-add"></i></span>
<p>Applications</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-superadmin" class="nav-link" title="Apps" role="tab" data-tabs-target="#menu-superadmin" aria-selected="false">
<span><i class="ti ti-user-star"></i></span>
<p>Super Admin</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-layout" class="nav-link" title="Layout" role="tab" data-tabs-target="#menu-layout" aria-selected="false">
<span><i class="ti ti-layout-board-split"></i></span>
<p>Layouts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-project" class="nav-link" title="Projects" role="tab" data-tabs-target="#menu-project" aria-selected="false">
<span><i class="ti ti-folder"></i></span>
<p>Projects</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-crm" class="nav-link" title="CRM" role="tab" data-tabs-target="#menu-crm" aria-selected="false">
<span><i class="ti ti-user-shield"></i></span>
<p>Crm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-hrm" class="nav-link" title="HRM" role="tab" data-tabs-target="#menu-hrm" aria-selected="false">
<span><i class="ti ti-users"></i></span>
<p>Hrm</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-finance" class="nav-link" title="Finance & Accounts" role="tab" data-tabs-target="#menu-finance" aria-selected="false">
<span><i class="ti ti-shopping-cart-dollar"></i></span>
<p>Finance & Accounts</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-administration" class="nav-link" title="Administration" role="tab" data-tabs-target="#menu-administration" aria-selected="false">
<span><i class="ti ti-cash"></i></span>
<p>Administration</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-content" class="nav-link" title="Content" role="tab" data-tabs-target="#menu-content" aria-selected="false">
<span><i class="ti ti-license"></i></span>
<p>Contents</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-pages" class="nav-link" title="Pages" role="tab" data-tabs-target="#menu-pages" aria-selected="false">
<span><i class="ti ti-page-break"></i></span>
<p>Pages</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-authentication" class="nav-link" title="Authentication" role="tab" data-tabs-target="#menu-authentication" aria-selected="false">
<span><i class="ti ti-lock-check"></i></span>
<p>Authentication</p>
</a>
</div>
<div class="col-span-6">
<a href="#menu-ui-elements" class="nav-link" title="UI Elements" role="tab" data-tabs-target="#menu-ui-elements" aria-selected="true">
<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);" class="active">Forms<span class="menu-arrow"></span> </a>
<ul>
<li class="submenu submenu-two">
<a href="javascript:void(0);" class="active">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="active">Basic Inputs</a></li>
<li><a href="form-checkbox-radios.html">Checkbox & Radios</a> </li>
<li><a href="form-input-groups.html">Input Groups</a></li>
<li><a href="form-grid-gutters.html">Grid & Gutters</a></li>
<li><a href="form-select.html">Form Select</a></li>
<li><a href="form-mask.html">Input Masks</a></li>
<li><a href="form-fileupload.html">File Uploads</a></li>
</ul>
</li>
<li class="submenu submenu-two">
<a href="javascript:void(0);">Layouts<span class="menu-arrow inside-submenu absolute top-1/2 -translate-y-1/2 right-2.5 flex items-center w-4 h-4 transition-all duration-200 ease-in-out before:absolute before:top-[5px] before:left-[5px] before:w-1.5 before:h-1.5 before:border-r-2 before:border-b-2 before:border-gray-900 before:rotate-45"></span></a>
<ul>
<li><a href="form-horizontal.html">Horizontal Form</a></li>
<li><a href="form-vertical.html">Vertical Form</a></li>
<li><a href="form-floating-labels.html">Floating Labels</a></li>
</ul>
</li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-select2.html">Select2</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-pickers.html">Form Picker</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Tables<span class="menu-arrow"></span></a>
<ul>
<li><a href="tables-basic.html">Basic Tables </a></li>
<li><a href="data-tables.html">Data Table </a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Charts<span class="menu-arrow"></span> </a>
<ul>
<li><a href="chart-apex.html">Apex Charts</a></li>
<li><a href="chart-c3.html">Chart C3</a></li>
<li><a href="chart-js.html">Chart Js</a></li>
<li><a href="chart-morris.html">Morris Charts</a></li>
<li><a href="chart-flot.html">Flot Charts</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Icons<span class="menu-arrow"></span> </a>
<ul>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-tabler.html">Tabler Icons</a></li>
<li><a href="icon-bootstrap.html">Bootstrap Icons</a></li>
<li><a href="icon-remix.html">Remix Icons</a></li>
<li><a href="icon-feather.html">Feather Icons</a></li>
<li><a href="icon-ionic.html">Ionic Icons</a></li>
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-pe7.html">Pe7 Icons</a></li>
<li><a href="icon-simpleline.html">Simpleline Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-typicon.html">Typicon Icons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">
<i class="ti ti-table-plus"></i>
<span>Maps</span>
<span class="menu-arrow"></span>
</a>
<ul>
<li>
<a href="maps-vector.html">Vector</a>
</li>
<li>
<a href="maps-leaflet.html">Leaflet</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-3">
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal mb-3">Documentation</a>
<a href="javascript:void(0);" class="flex items-center text-xs leading-normal">Change Log<span class="badge bg-pink text-[10px] font-medium px-[5px] leading-4 rounded text-white fs-10 ms-2">v4.0.8</span></a>
</div>
</div>
</div>
</div>
<!-- /Stacked Sidebar -->
<!-- Page Wrapper -->
<div class="page-wrapper cardhead relative pt-[50px] ml-[252px]">
<div class="content p-6">
<!-- Page Header -->
<div class="page-header mb-5">
<h4 class="page-title">Basic Inputs</h4>
</div>
<!-- /Page Header -->
<div class="row">
<div class="col-lg-12">
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white mb-6">
<div class="card-header py-4 px-5 border-b border-borderColor flex items-center justify-between flex-wrap gap-3">
<h4 class="card-title">Basic Inputs</h4>
</div>
<div class="card-body p-5">
<form action="#">
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Text Input</label>
<div class="col-span-6">
<input type="text" class="form-control">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Password</label>
<div class="col-span-6">
<input type="password" class="form-control">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Disabled Input</label>
<div class="col-span-6">
<input type="text" class="form-control" disabled="disabled">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Readonly Input</label>
<div class="col-span-6">
<input type="text" class="form-control" value="readonly" readonly="readonly">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Placeholder</label>
<div class="col-span-6">
<input type="text" class="form-control" placeholder="Placeholder">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">File Input</label>
<div class="col-span-6">
<input class="w-full text-sm rounded-input border border-borderColor" type="file">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Default Select</label>
<div class="col-span-6">
<select class="form-select w-full text-sm rounded-input border text-gray-900 border-borderColor p-2">
<option>-- Select --</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Radio</label>
<div class="col-span-6">
<div class="radio">
<label>
<input type="radio" name="radio" class="text-primary"> Option 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="text-primary"> Option 2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="text-primary"> Option 3
</label>
</div>
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Checkbox</label>
<div class="col-span-6">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" class="text-primary rounded"> Option 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" class="text-primary rounded"> Option 2
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" class="text-primary rounded"> Option 3
</label>
</div>
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Textarea</label>
<div class="col-span-6">
<textarea rows="5" cols="5" class="w-full text-sm rounded-input border border-borderColor p-2" placeholder="Enter text here"></textarea>
</div>
</div>
<div class="mb-0 md:grid grid-cols-8">
<label class="form-label">Input Addons</label>
<div class="col-span-6">
<div class="input-group flex items-center">
<span class="input-group-text rounded-l-lg border border-borderColor p-2" id="basic-addon1">@</span>
<input type="text" class="w-full text-sm border border-borderColor p-2" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<button class="bg-primary text-white font-semibold rounded-r-lg px-3.5 py-2" type="button">Button</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card border border-borderColor rounded-[5px] shadow-xs bg-white">
<div class="card-header py-4 px-5 border-b border-borderColor flex items-center justify-between flex-wrap gap-3">
<h4 class="card-title">Input Sizes</h4>
</div>
<div class="card-body p-5">
<form action="#">
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Large Input</label>
<div class="col-span-6">
<input type="text" class="text-lg w-full rounded-input border border-borderColor p-2" placeholder=".form-control-lg">
</div>
</div>
<div class="mb-3 md:grid grid-cols-8">
<label class="form-label">Default Input</label>
<div class="col-span-6">
<input type="text" class="w-full text-base rounded-input border border-borderColor p-2" placeholder=".form-control">
</div>
</div>
<div class="mb-0 md:grid grid-cols-8">
<label class="form-label">Small Input</label>
<div class="col-span-6">
<input type="text" class="form-control-sm w-full text-sm rounded-input border border-borderColor p-2" placeholder=".form-control-sm">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer sm:flex items-center justify-between border-top bg-white p-3">
<p class="mb-0">2014 - 2025 © SmartHR.</p>
<p>Designed & Developed By <a href="javascript:void(0);" class="text-primary">Dreams</a></p>
</div>
</div>
<!-- /page wrapper -->
</div>
<!-- /Main Wrapper -->
<!-- jQuery -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<!-- Flowbite JS -->
<script src="assets/js/flowbite.min.js"></script>
<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>
<!-- Slimscroll JS -->
<script src="assets/js/jquery.slimscroll.min.js"></script>
<!-- Datetimepicker JS -->
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
<!-- Daterangepikcer JS -->
<script src="assets/plugins/daterangepicker/daterangepicker.js"></script>
<!-- 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>
<!-- Color Picker JS -->
<script src="assets/plugins/@simonwep/pickr/pickr.es5.min.js"></script>
<!-- Custom JS -->
<script src="assets/js/theme-colorpicker.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>