File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../tmpr/..//insights/ui-list-groups.php
<!DOCTYPE html>
<!-- beautify ignore:start -->
<html lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact " dir="ltr" data-theme="theme-default" data-assets-path="assets/" data-template="vertical-menu-template" data-style="light"><!--ui-list-groups.html [XR&CO'2014],11:01:13 GMT -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>Demo : List groups - UI elements | sneat - Bootstrap Dashboard PRO</title>
<meta name="description" content="" />
<meta name="keywords" content="">
<!-- Canonical SEO -->
<link rel="canonical" href="https://thebrand.ai/insights">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="https://thebrand.ai/favicon/favicon.ico" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="assets/vendor/fonts/boxicons.css" />
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome.css" />
<link rel="stylesheet" href="assets/vendor/fonts/flag-icons.css" />
<!-- Core CSS -->
<link rel="stylesheet" href="assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="assets/css/demo.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="assets/vendor/libs/perfect-/perfect-scrollbar.css" />
<link rel="stylesheet" href="assets/vendor/libs/typeahead-js/typeahead.css" />
<!-- Page CSS -->
<!-- Helpers -->
<script src="assets/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<script src="assets/vendor/js/template-customizer.js"></script>
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="assets/js/config.js"></script>
</head>
<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar ">
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
<div class="app-brand demo ">
<a href="dashboard.php" class="app-brand-link">
<span class="app-brand-logo demo">
<img src="img/logo.png?jjw" style="max-height:60px">
</span>
<!--<span class="app-brand-text demo menu-text fw-bold ms-2">Brand Insights</span>-->
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-home-smile"></i>
<div class="text-truncate" data-i18n="Dashboards">Dashboards</div>
<span class="badge rounded-pill bg-danger ms-auto">5</span>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="dashboards-analytics.html" class="menu-link">
<div class="text-truncate" data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="dashboards-crm.html" class="menu-link">
<div class="text-truncate" data-i18n="CRM">CRM</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-dashboard" class="menu-link">
<div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-dashboard" class="menu-link">
<div class="text-truncate" data-i18n="Logistics">Logistics</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-dashboard.1" class="menu-link">
<div class="text-truncate" data-i18n="Academy">Academy</div>
</a>
</li>
</ul>
</li>
<!-- Layouts -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-layout"></i>
<div class="text-truncate" data-i18n="Layouts">Layouts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="layouts-collapsed-menu" class="menu-link">
<div class="text-truncate" data-i18n="Collapsed menu">Collapsed menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar.php" class="menu-link">
<div class="text-truncate" data-i18n="Content navbar">Content navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar-" class="menu-link">
<div class="text-truncate" data-i18n="Content nav + Sidebar">Content nav + Sidebar</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/horizontal-menu-template" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Horizontal">Horizontal</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-menu.16" class="menu-link">
<div class="text-truncate" data-i18n="Without menu">Without menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-navbar" class="menu-link">
<div class="text-truncate" data-i18n="Without navbar">Without navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-fluid.18.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Fluid">Fluid</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-container.19.de" class="menu-link">
<div class="text-truncate" data-i18n="Container">Container</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-blank.1a.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Blank">Blank</div>
</a>
</li>
</ul>
</li>
<!-- Front Pages -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-store'></i>
<div class="text-truncate" data-i18n="Front Pages">Front Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/landing-page.html" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Landing">Landing</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/pricing-page.html" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/payment-page.html" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Payment">Payment</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/checkout-page.html" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/help-center-landing.html" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Help Center">Help Center</div>
</a>
</li>
</ul>
</li>
<!-- Apps & Pages -->
<li class="menu-header small text-uppercase">
<span class="menu-header-text" data-i18n="Apps & Pages">Apps & Pages</span>
</li>
<li class="menu-item">
<a href="app-email.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-envelope"></i>
<div class="text-truncate" data-i18n="Email">Email</div>
</a>
</li>
<li class="menu-item">
<a href="app-chat.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-chat"></i>
<div class="text-truncate" data-i18n="Chat">Chat</div>
</a>
</li>
<li class="menu-item">
<a href="app-calendar.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-calendar"></i>
<div class="text-truncate" data-i18n="Calendar">Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="app-kanban.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-grid"></i>
<div class="text-truncate" data-i18n="Kanban">Kanban</div>
</a>
</li>
<!-- e-commerce-app menu start -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-cart-alt'></i>
<div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-dashboard" class="menu-link">
<div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Products">Products</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-product-l" class="menu-link">
<div class="text-truncate" data-i18n="Product List">Product List</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-product-a" class="menu-link">
<div class="text-truncate" data-i18n="Add Product">Add Product</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-category-" class="menu-link">
<div class="text-truncate" data-i18n="Category List">Category List</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Order">Order</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-order-lis" class="menu-link">
<div class="text-truncate" data-i18n="Order List">Order List</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-order-det" class="menu-link">
<div class="text-truncate" data-i18n="Order Details">Order Details</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Customer">Customer</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-" class="menu-link">
<div class="text-truncate" data-i18n="All Customers">All Customers</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Customer Details">Customer Details</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-3" class="menu-link">
<div class="text-truncate" data-i18n="Overview">Overview</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-4" class="menu-link">
<div class="text-truncate" data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-5" class="menu-link">
<div class="text-truncate" data-i18n="Address & Billing">Address & Billing</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-6" class="menu-link">
<div class="text-truncate" data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="app-ecommerce-manage-re" class="menu-link">
<div class="text-truncate" data-i18n="Manage Reviews">Manage Reviews</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-referral" class="menu-link">
<div class="text-truncate" data-i18n="Referrals">Referrals</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Settings">Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-settings-" class="menu-link">
<div class="text-truncate" data-i18n="Store Details">Store Details</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-3" class="menu-link">
<div class="text-truncate" data-i18n="Payments">Payments</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-4" class="menu-link">
<div class="text-truncate" data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-5" class="menu-link">
<div class="text-truncate" data-i18n="Shipping & Delivery">Shipping & Delivery</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-6" class="menu-link">
<div class="text-truncate" data-i18n="Locations">Locations</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-7" class="menu-link">
<div class="text-truncate" data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- e-commerce-app menu end -->
<!-- Academy menu start -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-book-open'></i>
<div class="text-truncate" data-i18n="Academy">Academy</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-academy-dashboard.1" class="menu-link">
<div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course.31.d" class="menu-link">
<div class="text-truncate" data-i18n="My Course">My Course</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course-deta" class="menu-link">
<div class="text-truncate" data-i18n="Course Details">Course Details</div>
</a>
</li>
</ul>
</li>
<!-- Academy menu end -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-car'></i>
<div class="text-truncate" data-i18n="Logistics">Logistics</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-logistics-dashboard" class="menu-link">
<div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-fleet.33" class="menu-link">
<div class="text-truncate" data-i18n="Fleet">Fleet</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-food-menu'></i>
<div class="text-truncate" data-i18n="Invoice">Invoice</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="mycontent.php" class="menu-link">
<div class="text-truncate" data-i18n="List">List</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-preview.35" class="menu-link">
<div class="text-truncate" data-i18n="Preview">Preview</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-edit.36.del" class="menu-link">
<div class="text-truncate" data-i18n="Edit">Edit</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-add.37.dela" class="menu-link">
<div class="text-truncate" data-i18n="Add">Add</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-user"></i>
<div class="text-truncate" data-i18n="Users">Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-list.38.delaye" class="menu-link">
<div class="text-truncate" data-i18n="List">List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="View">View</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-view-account.3" class="menu-link">
<div class="text-truncate" data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-security" class="menu-link">
<div class="text-truncate" data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-billing.3" class="menu-link">
<div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-notificat" class="menu-link">
<div class="text-truncate" data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-connectio" class="menu-link">
<div class="text-truncate" data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-check-shield'></i>
<div class="text-truncate" data-i18n="Roles & Permissions">Roles & Permissions</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-access-roles.3e.del" class="menu-link">
<div class="text-truncate" data-i18n="Roles">Roles</div>
</a>
</li>
<li class="menu-item">
<a href="app-access-permission.3" class="menu-link">
<div class="text-truncate" data-i18n="Permission">Permission</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-dock-top"></i>
<div class="text-truncate" data-i18n="Pages">Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="User Profile">User Profile</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-profile-user.40.d" class="menu-link">
<div class="text-truncate" data-i18n="Profile">Profile</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-teams.41" class="menu-link">
<div class="text-truncate" data-i18n="Teams">Teams</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-projects" class="menu-link">
<div class="text-truncate" data-i18n="Projects">Projects</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-connectio" class="menu-link">
<div class="text-truncate" data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-" class="menu-link">
<div class="text-truncate" data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-3" class="menu-link">
<div class="text-truncate" data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings.php" class="menu-link">
<div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-5" class="menu-link">
<div class="text-truncate" data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-6" class="menu-link">
<div class="text-truncate" data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="pages-faq.html" class="menu-link">
<div class="text-truncate" data-i18n="FAQ">FAQ</div>
</a>
</li>
<li class="menu-item">
<a href="pages-pricing.4a.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Misc">Misc</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-misc-error.4b.del" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Error">Error</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-under-mainte" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Under Maintenance">Under Maintenance</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-comingsoon.4" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Coming Soon">Coming Soon</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-not-authoriz" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Not Authorized">Not Authorized</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-lock-open-alt"></i>
<div class="text-truncate" data-i18n="Authentications">Authentications</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Login">Login</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-login-basic.4f.del" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-login.php" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Register">Register</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-register-basic.51" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="join.php" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
<li class="menu-item">
<a href="auth-register-multistep" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Multi-steps">Multi-steps</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Verify Email">Verify Email</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-verify-email-basic" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-verify-email-cover" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Reset Password">Reset Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-reset-password-bas" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-reset-password-cov" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Forgot Password">Forgot Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-forgot-password-ba" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-forgot-password-co" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Two Steps">Two Steps</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-two-steps-basic.5a" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-two-steps-cover.5b" class="menu-link" target="_blank">
<div class="text-truncate" data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-spreadsheet"></i>
<div class="text-truncate" data-i18n="Wizard Examples">Wizard Examples</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="wizard-ex-checkout.5c.d" class="menu-link">
<div class="text-truncate" data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-property-list" class="menu-link">
<div class="text-truncate" data-i18n="Property Listing">Property Listing</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-create-deal.5" class="menu-link">
<div class="text-truncate" data-i18n="Create Deal">Create Deal</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="modal-examples.5f.delay" class="menu-link">
<i class="menu-icon tf-icons bx bx-window-open"></i>
<div class="text-truncate" data-i18n="Modal Examples">Modal Examples</div>
</a>
</li>
<!-- Components -->
<li class="menu-header small text-uppercase"><span class="menu-header-text" data-i18n="Components">Components</span></li>
<!-- Cards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-collection"></i>
<div class="text-truncate" data-i18n="Cards">Cards</div>
<span class="badge rounded-pill bg-primary ms-auto">6</span>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="cards-basic.html" class="menu-link">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="cards-advance.61.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Advance">Advance</div>
</a>
</li>
<li class="menu-item">
<a href="cards-statistics.62.del" class="menu-link">
<div class="text-truncate" data-i18n="Statistics">Statistics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-analytics.63.dela" class="menu-link">
<div class="text-truncate" data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-gamifications.64" class="menu-link">
<div class="text-truncate" data-i18n="Gamifications">Gamifications</div>
</a>
</li>
<li class="menu-item">
<a href="cards-actions.65.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Actions">Actions</div>
</a>
</li>
</ul>
</li>
<!-- User interface -->
<li class="menu-item active open">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-box"></i>
<div class="text-truncate" data-i18n="User interface">User interface</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="ui-accordion.html" class="menu-link">
<div class="text-truncate" data-i18n="Accordion">Accordion</div>
</a>
</li>
<li class="menu-item">
<a href="ui-alerts.html" class="menu-link">
<div class="text-truncate" data-i18n="Alerts">Alerts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-badges.html" class="menu-link">
<div class="text-truncate" data-i18n="Badges">Badges</div>
</a>
</li>
<li class="menu-item">
<a href="ui-buttons.html" class="menu-link">
<div class="text-truncate" data-i18n="Buttons">Buttons</div>
</a>
</li>
<li class="menu-item">
<a href="ui-carousel.html" class="menu-link">
<div class="text-truncate" data-i18n="Carousel">Carousel</div>
</a>
</li>
<li class="menu-item">
<a href="ui-collapse.html" class="menu-link">
<div class="text-truncate" data-i18n="Collapse">Collapse</div>
</a>
</li>
<li class="menu-item">
<a href="ui-dropdowns.html" class="menu-link">
<div class="text-truncate" data-i18n="Dropdowns">Dropdowns</div>
</a>
</li>
<li class="menu-item">
<a href="ui-footer.html" class="menu-link">
<div class="text-truncate" data-i18n="Footer">Footer</div>
</a>
</li>
<li class="menu-item active">
<a href="ui-list-groups.6e.delay" class="menu-link">
<div class="text-truncate" data-i18n="List Groups">List groups</div>
</a>
</li>
<li class="menu-item">
<a href="ui-modals.html" class="menu-link">
<div class="text-truncate" data-i18n="Modals">Modals</div>
</a>
</li>
<li class="menu-item">
<a href="ui-navbar.html" class="menu-link">
<div class="text-truncate" data-i18n="Navbar">Navbar</div>
</a>
</li>
<li class="menu-item">
<a href="ui-offcanvas.html" class="menu-link">
<div class="text-truncate" data-i18n="Offcanvas">Offcanvas</div>
</a>
</li>
<li class="menu-item">
<a href="ui-pagination-breadcrum.php" class="menu-link">
<div class="text-truncate" data-i18n="Pagination & Breadcrumbs">Pagination & Breadcrumbs</div>
</a>
</li>
<li class="menu-item">
<a href="ui-progress.html" class="menu-link">
<div class="text-truncate" data-i18n="Progress">Progress</div>
</a>
</li>
<li class="menu-item">
<a href="ui-spinners.html" class="menu-link">
<div class="text-truncate" data-i18n="Spinners">Spinners</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tabs-pills.75.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Tabs & Pills">Tabs & Pills</div>
</a>
</li>
<li class="menu-item">
<a href="ui-toasts.html" class="menu-link">
<div class="text-truncate" data-i18n="Toasts">Toasts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tooltips-popovers.77" class="menu-link">
<div class="text-truncate" data-i18n="Tooltips & Popovers">Tooltips & Popovers</div>
</a>
</li>
<li class="menu-item">
<a href="ui-typography.78.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Typography">Typography</div>
</a>
</li>
</ul>
</li>
<!-- Extended components -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-copy"></i>
<div class="text-truncate" data-i18n="Extended UI">Extended UI</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-avatar.php" class="menu-link">
<div class="text-truncate" data-i18n="Avatar">Avatar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-blockui.php" class="menu-link">
<div class="text-truncate" data-i18n="BlockUI">BlockUI</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-drag-and-dr" class="menu-link">
<div class="text-truncate" data-i18n="Drag & Drop">Drag & Drop</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-media-playe" class="menu-link">
<div class="text-truncate" data-i18n="Media Player">Media Player</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-perfect-scr" class="menu-link">
<div class="text-truncate" data-i18n="Perfect Scrollbar">Perfect Scrollbar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-star-rating" class="menu-link">
<div class="text-truncate" data-i18n="Star Ratings">Star Ratings</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-sweetalert2" class="menu-link">
<div class="text-truncate" data-i18n="SweetAlert2">SweetAlert2</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-text-divide" class="menu-link">
<div class="text-truncate" data-i18n="Text Divider">Text Divider</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div class="text-truncate" data-i18n="Timeline">Timeline</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-timeline-ba.php" class="menu-link">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-timeline-fu" class="menu-link">
<div class="text-truncate" data-i18n="Fullscreen">Fullscreen</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="extended-ui-tour.83.del" class="menu-link">
<div class="text-truncate" data-i18n="Tour">Tour</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-treeview.84" class="menu-link">
<div class="text-truncate" data-i18n="Treeview">Treeview</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-misc.85.del" class="menu-link">
<div class="text-truncate" data-i18n="Miscellaneous">Miscellaneous</div>
</a>
</li>
</ul>
</li>
<!-- Icons -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-crown"></i>
<div class="text-truncate" data-i18n="Icons">Icons</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="icons-boxicons.86.delay" class="menu-link">
<div class="text-truncate" data-i18n="Boxicons">Boxicons</div>
</a>
</li>
<li class="menu-item">
<a href="icons-font-awesome.87.d" class="menu-link">
<div class="text-truncate" data-i18n="Fontawesome">Fontawesome</div>
</a>
</li>
</ul>
</li>
<!-- Forms & Tables -->
<li class="menu-header small text-uppercase"><span class="menu-header-text" data-i18n="Forms & Tables">Forms & Tables</span></li>
<!-- Forms -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-detail"></i>
<div class="text-truncate" data-i18n="Form Elements">Form Elements</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="forms-basic-inputs.88.d" class="menu-link">
<div class="text-truncate" data-i18n="Basic Inputs">Basic Inputs</div>
</a>
</li>
<li class="menu-item">
<a href="forms-input-groups.89.d" class="menu-link">
<div class="text-truncate" data-i18n="Input groups">Input groups</div>
</a>
</li>
<li class="menu-item">
<a href="forms-custom-options.8a" class="menu-link">
<div class="text-truncate" data-i18n="Custom Options">Custom Options</div>
</a>
</li>
<li class="menu-item">
<a href="forms-editors.8b.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Editors">Editors</div>
</a>
</li>
<li class="menu-item">
<a href="forms-file-upload.8c.de" class="menu-link">
<div class="text-truncate" data-i18n="File Upload">File Upload</div>
</a>
</li>
<li class="menu-item">
<a href="forms-pickers.8d.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Pickers">Pickers</div>
</a>
</li>
<li class="menu-item">
<a href="forms-selects.8e.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Select & Tags">Select & Tags</div>
</a>
</li>
<li class="menu-item">
<a href="forms-sliders.8f.delaye" class="menu-link">
<div class="text-truncate" data-i18n="Sliders">Sliders</div>
</a>
</li>
<li class="menu-item">
<a href="forms-switches.90.delay" class="menu-link">
<div class="text-truncate" data-i18n="Switches">Switches</div>
</a>
</li>
<li class="menu-item">
<a href="forms-extras.html" class="menu-link">
<div class="text-truncate" data-i18n="Extras">Extras</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-detail"></i>
<div class="text-truncate" data-i18n="Form Layouts">Form Layouts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-layouts-vertical.9" class="menu-link">
<div class="text-truncate" data-i18n="Vertical Form">Vertical Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-horizontal" class="menu-link">
<div class="text-truncate" data-i18n="Horizontal Form">Horizontal Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-sticky.94" class="menu-link">
<div class="text-truncate" data-i18n="Sticky Actions">Sticky Actions</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-carousel"></i>
<div class="text-truncate" data-i18n="Form Wizard">Form Wizard</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-wizard-numbered.95" class="menu-link">
<div class="text-truncate" data-i18n="Numbered">Numbered</div>
</a>
</li>
<li class="menu-item">
<a href="form-wizard-icons.96.de" class="menu-link">
<div class="text-truncate" data-i18n="Icons">Icons</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="form-validation.97.dela" class="menu-link">
<i class="menu-icon tf-icons bx bx-list-check"></i>
<div class="text-truncate" data-i18n="Form Validation">Form Validation</div>
</a>
</li>
<!-- Tables -->
<li class="menu-item">
<a href="tables-basic.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-table"></i>
<div class="text-truncate" data-i18n="Tables">Tables</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-grid"></i>
<div class="text-truncate" data-i18n="Datatables">Datatables</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="tables-datatables-basic" class="menu-link">
<div class="text-truncate" data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-advan" class="menu-link">
<div class="text-truncate" data-i18n="Advanced">Advanced</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-exten" class="menu-link">
<div class="text-truncate" data-i18n="Extensions">Extensions</div>
</a>
</li>
</ul>
</li>
<!-- Charts & Maps -->
<li class="menu-header small text-uppercase">
<span class="menu-header-text" data-i18n="Charts & Maps">Charts & Maps</span>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons bx bx-chart"></i>
<div class="text-truncate" data-i18n="Charts">Charts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="charts-apex.html" class="menu-link">
<div class="text-truncate" data-i18n="Apex Charts">Apex Charts</div>
</a>
</li>
<li class="menu-item">
<a href="charts-chartjs.9d.delay" class="menu-link">
<div class="text-truncate" data-i18n="ChartJS">ChartJS</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="maps-leaflet.html" class="menu-link">
<i class="menu-icon tf-icons bx bx-map-alt"></i>
<div class="text-truncate" data-i18n="Leaflet Maps">Leaflet Maps</div>
</a>
</li>
<!-- Misc -->
<li class="menu-header small text-uppercase"><span class="menu-header-text" data-i18n="Misc">Misc</span></li>
<li class="menu-item">
<a href="https://themeselection.com/support/" target="_blank" class="menu-link">
<i class="menu-icon tf-icons bx bx-support"></i>
<div class="text-truncate" data-i18n="Support">Support</div>
</a>
</li>
<li class="menu-item">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/" target="_blank" class="menu-link">
<i class="menu-icon tf-icons bx bx-file"></i>
<div class="text-truncate" data-i18n="Documentation">Documentation</div>
</a>
</li>
</ul>
</aside>
<!-- / Menu -->
<!-- Layout container -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none ">
<a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
<i class="bx bx-menu bx-md"></i>
</a>
</div>
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
<!-- Search -->
<div class="navbar-nav align-items-center">
<div class="nav-item navbar-search-wrapper mb-0">
<a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
<i class="bx bx-search bx-md"></i>
<span class="d-none d-md-inline-block text-muted fw-normal ms-4">Search (Ctrl+/)</span>
</a>
</div>
</div>
<!-- /Search -->
<ul class="navbar-nav flex-row align-items-center ms-auto">
<!-- Language -->
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class='bx bx-globe bx-md'></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
<span>English</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
<span>French</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
<span>Arabic</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
<span>German</span>
</a>
</li>
</ul>
</li>
<!-- /Language -->
<!-- Style Switcher -->
<li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class='bx bx-md'></i>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-styles">
<li>
<a class="dropdown-item" href="javascript:void(0);" data-theme="light">
<span><i class='bx bx-sun bx-md me-3'></i>Light</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
<span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-theme="system">
<span><i class="bx bx-desktop bx-md me-3"></i>System</span>
</a>
</li>
</ul>
</li>
<!-- / Style Switcher-->
<!-- Quick links -->
<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<i class='bx bx-grid-alt bx-md'></i>
</a>
<div class="dropdown-menu dropdown-menu-end p-0">
<div class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Shortcuts</h6>
<a href="javascript:void(0)" class="dropdown-shortcuts-add py-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Add shortcuts"><i class="bx bx-plus-circle text-heading"></i></a>
</div>
</div>
<div class="dropdown-shortcuts-list scrollable-container">
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-calendar bx-26px text-heading"></i>
</span>
<a href="app-calendar.html" class="stretched-link">Calendar</a>
<small>Appointments</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-food-menu bx-26px text-heading"></i>
</span>
<a href="mycontent.php" class="stretched-link">Invoice App</a>
<small>Manage Accounts</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-user bx-26px text-heading"></i>
</span>
<a href="app-user-list.38.delaye" class="stretched-link">User App</a>
<small>Manage Users</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-check-shield bx-26px text-heading"></i>
</span>
<a href="app-access-roles.3e.del" class="stretched-link">Role Management</a>
<small>Permission</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
</span>
<a href="index.php" class="stretched-link">Dashboard</a>
<small>User Dashboard</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-cog bx-26px text-heading"></i>
</span>
<a href="pages-account-settings-" class="stretched-link">Setting</a>
<small>Account Settings</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-help-circle bx-26px text-heading"></i>
</span>
<a href="pages-faq.html" class="stretched-link">FAQs</a>
<small>FAQs & Articles</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="bx bx-window-open bx-26px text-heading"></i>
</span>
<a href="modal-examples.5f.delay" class="stretched-link">Modals</a>
<small>Useful Popups</small>
</div>
</div>
</div>
</div>
</li>
<!-- Quick links -->
<!-- Notification -->
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<span class="position-relative">
<i class="bx bx-bell bx-md"></i>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end p-0">
<li class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Notification</h6>
<div class="d-flex align-items-center h6 mb-0">
<span class="badge bg-label-primary me-2">8 New</span>
<a href="javascript:void(0)" class="dropdown-notifications-all p-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Mark all as read"><i class="bx bx-envelope-open text-heading"></i></a>
</div>
</div>
</li>
<li class="dropdown-notifications-list scrollable-container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="assets/img/avatars/1.png" alt class="rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Congratulation Lettie 🎉</h6>
<small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
<small class="text-muted">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-danger">CF</span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Charles Franklin</h6>
<small class="mb-1 d-block text-body">Accepted your connection</small>
<small class="text-muted">12hr ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="assets/img/avatars/2.png" alt class="rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">New Message ✉️</h6>
<small class="mb-1 d-block text-body">You have new message from Natalie</small>
<small class="text-muted">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"><i class="bx bx-cart"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Whoo! You have new order 🛒 </h6>
<small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
<small class="text-muted">1 day ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="assets/img/avatars/9.png" alt class="rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Application has been approved 🚀 </h6>
<small class="mb-1 d-block text-body">Your ABC project application has been approved.</small>
<small class="text-muted">2 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"><i class="bx bx-pie-chart-alt"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Monthly report is generated</h6>
<small class="mb-1 d-block text-body">July monthly financial report is generated </small>
<small class="text-muted">3 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="assets/img/avatars/5.png" alt class="rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">Send connection request</h6>
<small class="mb-1 d-block text-body">Peter sent you connection request</small>
<small class="text-muted">4 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="assets/img/avatars/6.png" alt class="rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">New message from Jane</h6>
<small class="mb-1 d-block text-body">Your have new message from Jane</small>
<small class="text-muted">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-warning"><i class="bx bx-error"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-0">CPU is running high</h6>
<small class="mb-1 d-block text-body">CPU Utilization Percent is currently at 88.63%,</small>
<small class="text-muted">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="bx bx-x"></span></a>
</div>
</div>
</li>
</ul>
</li>
<li class="border-top">
<div class="d-grid p-4">
<a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
<small class="align-middle">View all notifications</small>
</a>
</div>
</li>
</ul>
</li>
<!--/ Notification -->
<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
<div class="avatar avatar-online">
<img src="assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle">
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="pages-account-settings-">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar avatar-online">
<img src="assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle">
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">John Doe</h6>
<small class="text-muted">Admin</small>
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider my-1"></div>
</li>
<li>
<a class="dropdown-item" href="pages-profile-user.40.d">
<i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings-">
<i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings.php">
<span class="d-flex align-items-center align-middle">
<i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i><span class="flex-grow-1 align-middle">Billing Plan</span>
<span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
</span>
</a>
</li>
<li>
<div class="dropdown-divider my-1"></div>
</li>
<li>
<a class="dropdown-item" href="pages-pricing.4a.delaye">
<i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-faq.html">
<i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
</a>
</li>
<li>
<div class="dropdown-divider my-1"></div>
</li>
<li>
<a class="dropdown-item" href="auth-login.php" target="_blank">
<i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
</a>
</li>
</ul>
</li>
<!--/ User -->
</ul>
</div>
<!-- Search Small Screens -->
<div class="navbar-search-wrapper search-input-wrapper d-none">
<input type="text" class="form-control search-input container-xxl border-0" placeholder="Search..." aria-label="Search...">
<i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
</div>
</nav>
<!-- / Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
<div class="card mb-6">
<h5 class="card-header">List groups</h5>
<div class="card-body">
<div class="row">
<!-- Basic List group -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">Basic</small>
<div class="mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action active">Bear claw cake biscuit</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Soufflé pastry pie ice</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">Tart tiramisu cake</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bonbon toffee muffin</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Dragée tootsie roll</a>
</div>
</div>
</div>
<!--/ Basic List group -->
<!-- List group with Badges & Pills -->
<div class="col-lg-6">
<small class="text-light fw-medium">With Bagdes & Pills</small>
<div class="mt-4">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Soufflé
pastry pie ice
<span class="badge badge-center bg-primary">5</span>
</li>
<li class="list-group-item disabled">Bear claw cake biscuit</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Tart
tiramisu cake
<span class="badge badge-center bg-success">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Bonbon
toffee muffin
<span class="badge badge-center bg-danger rounded-pill">3</span>
</li>
<li class="list-group-item">Dragée tootsie roll</li>
</ul>
</div>
</div>
<!--/ List group with Badges & Pills -->
</div>
</div>
<hr class="m-0">
<div class="card-body">
<div class="row">
<!-- List group Flush (Without main border) -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">Flush</small>
<div class="mt-4">
<div class="list-group list-group-flush">
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bear claw cake biscuit</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Soufflé pastry pie ice</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Tart tiramisu cake</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bonbon toffee muffin</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Dragée tootsie roll</a>
</div>
</div>
</div>
<!--/ List group Flush (Without main border) -->
<!-- List group Icons -->
<div class="col-lg-6">
<small class="text-light fw-medium">With Icons</small>
<div class="mt-4">
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<i class="bx bx-tv me-3"></i>
Soufflé pastry pie ice
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bx bx-bell me-3"></i>
Bear claw cake biscuit
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bx bx-support me-3"></i>
Tart tiramisu cake
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bx bx-purchase-tag-alt me-3"></i>
Bonbon toffee muffin
</li>
<li class="list-group-item d-flex align-items-center">
<i class="bx bx-closet me-3"></i>
Dragée tootsie roll
</li>
</ul>
</div>
</div>
<!--/ List group Icons -->
</div>
</div>
<hr class="m-0">
<div class="card-body">
<div class="row">
<!-- List group Numbered -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">Numbered</small>
<div class="mt-4">
<ol class="list-group list-group-numbered">
<li class="list-group-item">Bear claw cake biscuit</li>
<li class="list-group-item">Soufflé pastry pie ice</li>
<li class="list-group-item">Tart tiramisu cake</li>
<li class="list-group-item">Bonbon toffee muffin</li>
<li class="list-group-item">Dragée tootsie roll</li>
</ol>
</div>
</div>
<!--/ List group Numbered -->
<!-- List group checkbox -->
<div class="col-lg-6">
<small class="text-light fw-medium">List Group With Checkbox</small>
<div class="mt-4">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-3" type="checkbox" value="">
Soufflé pastry pie ice
</label>
<label class="list-group-item">
<input class="form-check-input me-3" type="checkbox" value="">
Bear claw cake biscuit
</label>
<label class="list-group-item">
<input class="form-check-input me-3" type="checkbox" value="">
Tart tiramisu cake
</label>
<label class="list-group-item">
<input class="form-check-input me-3" type="checkbox" value="">
Bonbon toffee muffin
</label>
<label class="list-group-item">
<input class="form-check-input me-3" type="checkbox" value="">
Dragée tootsie roll
</label>
</div>
</div>
</div>
<!--/ List group checkbox -->
</div>
</div>
<hr class="m-0">
<div class="card-body">
<div class="row">
<!-- Contextual List group -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">Contextual classes</small>
<div class="mt-4">
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary list group item</li>
<li class="list-group-item list-group-item-secondary">Secondary list group item</li>
<li class="list-group-item list-group-item-success">Success list group item</li>
<li class="list-group-item list-group-item-danger">Danger list group item</li>
<li class="list-group-item list-group-item-warning">Warning list group item</li>
<li class="list-group-item list-group-item-info">Info list group item</li>
<li class="list-group-item list-group-item-dark">Dark list group item</li>
</ul>
</div>
</div>
<!--/ Contextual List group -->
<!-- Custom content with heading -->
<div class="col-lg-6">
<small class="text-light fw-medium">Custom content</small>
<div class="mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
<!--/ Custom content with heading -->
</div>
</div>
</div>
<div class="card mb-6">
<h5 class="card-header">Javascript behavior</h5>
<div class="card-body">
<div class="row">
<!-- Custom content with heading -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">Vertical</small>
<div class="mt-4">
<div class="row">
<div class="col-md-4 col-12 mb-6 mb-md-0">
<div class="list-group">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings">Settings</a>
</div>
</div>
<div class="col-md-8 col-12">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="list-home">
Donut sugar plum sweet roll biscuit. Cake oat cake gummi bears. Tart wafer wafer halvah gummi bears
cheesecake. Topping croissant cake sweet roll. Dessert fruitcake gingerbread halvah marshmallow pudding
bear claw cheesecake. Bonbon dragée cookie gummies. Pudding marzipan liquorice. Sugar plum dragée
cupcake cupcake cake dessert chocolate bar. Pastry lollipop lemon drops lollipop halvah croissant.
Pastry sweet gingerbread lemon drops topping ice cream.
</div>
<div class="tab-pane fade" id="list-profile">
Muffin lemon drops chocolate chupa chups jelly beans dessert jelly-o. Soufflé gummies gummies. Ice cream
powder marshmallow cotton candy oat cake wafer. Marshmallow gingerbread tootsie roll. Chocolate cake
bonbon jelly beans lollipop jelly beans halvah marzipan danish pie. Oat cake chocolate cake pudding bear
claw liquorice gingerbread icing sugar plum brownie. Toffee cookie apple pie cheesecake bear claw sugar
plum wafer gummi bears fruitcake.
</div>
<div class="tab-pane fade" id="list-messages">
Ice cream dessert candy sugar plum croissant cupcake tart pie apple pie. Pastry chocolate chupa chups
tiramisu. Tiramisu cookie oat cake. Pudding brownie bonbon. Pie carrot cake chocolate macaroon. Halvah
jelly jelly beans cake macaroon jelly-o. Danish pastry dessert gingerbread powder halvah. Muffin bonbon
fruitcake dragée sweet sesame snaps oat cake marshmallow cheesecake. Cupcake donut sweet bonbon
cheesecake soufflé chocolate bar.
</div>
<div class="tab-pane fade" id="list-settings">
Marzipan cake oat cake. Marshmallow pie chocolate. Liquorice oat cake donut halvah jelly-o. Jelly-o
muffin macaroon cake gingerbread candy cupcake. Cake lollipop lollipop jelly brownie cake topping
chocolate. Pie oat cake jelly. Lemon drops halvah jelly cookie bonbon cake cupcake ice cream. Donut tart
bonbon sweet roll soufflé gummies biscuit. Wafer toffee topping jelly beans icing pie apple pie toffee
pudding. Tiramisu powder macaroon tiramisu cake halvah.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<small class="text-light fw-medium">Horizontal</small>
<div class="mt-4">
<div class="list-group list-group-horizontal-md text-md-center">
<a class="list-group-item list-group-item-action active" id="home-list-item" data-bs-toggle="list" href="#horizontal-home">Home</a>
<a class="list-group-item list-group-item-action" id="profile-list-item" data-bs-toggle="list" href="#horizontal-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="messages-list-item" data-bs-toggle="list" href="#horizontal-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="settings-list-item" data-bs-toggle="list" href="#horizontal-settings">Settings</a>
</div>
<div class="tab-content px-0 mt-0">
<div class="tab-pane fade show active" id="horizontal-home">
Donut sugar plum sweet roll biscuit. Cake oat cake gummi bears. Tart wafer wafer halvah gummi bears
cheesecake. Topping croissant cake sweet roll. Dessert fruitcake gingerbread halvah marshmallow pudding bear
claw cheesecake. Bonbon dragée cookie gummies. Pudding marzipan liquorice. Sugar plum dragée cupcake cupcake
cake dessert chocolate bar. Pastry lollipop lemon drops lollipop halvah croissant. Pastry sweet gingerbread
lemon drops topping ice cream.
</div>
<div class="tab-pane fade" id="horizontal-profile">
Muffin lemon drops chocolate chupa chups jelly beans dessert jelly-o. Soufflé gummies gummies. Ice cream
powder marshmallow cotton candy oat cake wafer. Marshmallow gingerbread tootsie roll. Chocolate cake bonbon
jelly beans lollipop jelly beans halvah marzipan danish pie. Oat cake chocolate cake pudding bear claw
liquorice gingerbread icing sugar plum brownie. Toffee cookie apple pie cheesecake bear claw sugar plum
wafer gummi bears fruitcake.
</div>
<div class="tab-pane fade" id="horizontal-messages">
Ice cream dessert candy sugar plum croissant cupcake tart pie apple pie. Pastry chocolate chupa chups
tiramisu. Tiramisu cookie oat cake. Pudding brownie bonbon. Pie carrot cake chocolate macaroon. Halvah jelly
jelly beans cake macaroon jelly-o. Danish pastry dessert gingerbread powder halvah. Muffin bonbon fruitcake
dragée sweet sesame snaps oat cake marshmallow cheesecake. Cupcake donut sweet bonbon cheesecake soufflé
chocolate bar.
</div>
<div class="tab-pane fade" id="horizontal-settings">
Marzipan cake oat cake. Marshmallow pie chocolate. Liquorice oat cake donut halvah jelly-o. Jelly-o muffin
macaroon cake gingerbread candy cupcake. Cake lollipop lollipop jelly brownie cake topping chocolate. Pie
oat cake jelly. Lemon drops halvah jelly cookie bonbon cake cupcake ice cream. Donut tart bonbon sweet roll
soufflé gummies biscuit. Wafer toffee topping jelly beans icing pie apple pie toffee pudding. Tiramisu
powder macaroon tiramisu cake halvah.
</div>
</div>
</div>
</div>
<!--/ Custom content with heading -->
</div>
</div>
</div>
<div class="card">
<h5 class="card-header">Timeline & Notification</h5>
<div class="card-body">
<div class="row">
<!-- Timeline Style -->
<div class="col-lg-6 p-6">
<small class="text-light fw-medium">Timeline</small>
<div class="mt-4">
<ul class="list-group list-group-timeline">
<li class="list-group-item list-group-timeline-primary">Bear claw cake biscuit</li>
<li class="list-group-item list-group-timeline-success">Soufflé pastry pie ice</li>
<li class="list-group-item list-group-timeline-warning">Tart tiramisu cake</li>
<li class="list-group-item list-group-timeline-info">Dragée tootsie roll</li>
<li class="list-group-item list-group-timeline-danger">Bonbon toffee muffin</li>
</ul>
</div>
</div>
<!--/ Timeline Style -->
<!-- Notification Style -->
<div class="col-lg-6 p-6">
<small class="text-light fw-medium">Notification</small>
<div class="mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-center">
<div class="avatar me-3">
<span class="avatar-initial rounded-circle bg-label-success">M</span>
</div>
<div class="list-content">
<h6 class="mb-0">List group item heading</h6>
<small class="text-muted">Donec id elit non mi porta.</small>
</div>
</div>
<small>3 days ago</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-center">
<div class="avatar me-3">
<span class="avatar-initial rounded-circle bg-label-danger">B</span>
</div>
<div class="list-content">
<h6 class="mb-0">List group item heading</h6>
<small class="text-muted">Donec id elit non mi porta.</small>
</div>
</div>
<small>1 day ago</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-center">
<div class="avatar me-3">
<span class="avatar-initial rounded-circle bg-label-primary">V</span>
</div>
<div class="list-content">
<h6 class="mb-0">List group item heading</h6>
<small class="text-muted">Donec id elit non mi porta.</small>
</div>
</div>
<small>5 days ago</small>
</a>
</div>
</div>
</div>
<!--/ Notification Style -->
</div>
</div>
<hr class="m-0">
<div class="card-body">
<div class="row">
<!-- User List Style -->
<div class="col-12 col-lg-6 mb-6 mb-xl-0">
<small class="text-light fw-medium">User List</small>
<div class="mt-4">
<div class="list-group">
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="assets/img/avatars/2.png" alt="User Image" class="rounded-circle me-3" width="38">
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1 fw-normal">Danish sesame snaps halvah</h6>
<small class="text-muted">13 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-success"></span>
<small>Online</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="assets/img/avatars/8.png" alt="User Image" class="rounded-circle me-3" width="38">
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1 fw-normal">Cake halvah biscuit cheesecake</h6>
<small class="text-muted">11 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-warning"></span>
<small>Away</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="assets/img/avatars/4.png" alt="User Image" class="rounded-circle me-3" width="38">
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1 fw-normal">Tart cheesecake jujubes caramels</h6>
<small class="text-muted">9 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-secondary"></span>
<small>Offline</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="assets/img/avatars/11.png" alt="User Image" class="rounded-circle me-3" width="38">
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1 fw-normal">Icing sweet gummies</h6>
<small class="text-muted">15 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-danger"></span>
<small>In Meeting</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ User List Style -->
<!-- Progress Style -->
<div class="col-12 col-lg-6">
<small class="text-light fw-medium">Progress</small>
<div class="mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-primary rounded p-2 me-3"><i class="bx bxl-bootstrap text-white"></i></div>
<div class="w-100">
<h6 class="mb-2">Bootstrap is an open source toolkit</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 95%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-success rounded p-2 me-3"><i class="bx bxl-vuejs text-white"></i></div>
<div class="w-100">
<h6 class="mb-2">Vue.js is the Progressive JavaScript Framework</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-danger rounded p-2 me-3"><i class="bx bxl-angular text-white"></i></div>
<div class="w-100">
<h6 class="mb-2">Angular implements Functional Programming concepts</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 55%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-info rounded p-2 me-3"><i class="bx bxl-react text-white"></i></div>
<div class="w-100">
<h6 class="mb-2">List group item heading</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-warning rounded p-2 me-3"><i class="bx bxl-redux text-white"></i></div>
<div class="w-100">
<h6 class="mb-2">Redux, the most popular framework</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<!--/ Progress Style -->
</div>
</div>
</div>
</div>
<!-- / Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
<div class="container-xxl">
<div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
<div class="text-body">
© <script>
document.write(new Date().getFullYear())
</script>, made with ❤️ by <a href="https://thebrand.ai/" target="_blank" class="footer-link">Brand AI</a>
</div>
<div class="d-none d-lg-inline-block">
<a href="https://themeselection.com/license/" class="footer-link me-4" target="_blank">License</a>
<a href="https://themeselection.com/" target="_blank" class="footer-link me-4">More Themes</a>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/" target="_blank" class="footer-link me-4">Documentation</a>
<a href="https://themeselection.com/support/" target="_blank" class="footer-link d-none d-sm-inline-block">Support</a>
</div>
</div>
</div>
</footer>
<!-- / Footer -->
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- / Layout wrapper -->
<!-- Core JS -->
<!-- build:js assets/vendor/js/core.js -->
<script src="assets/vendor/libs/jquery/jquery.js"></script>
<script src="assets/vendor/libs/popper/popper.js"></script>
<script src="assets/vendor/js/bootstrap.js"></script>
<script src="assets/vendor/libs/perfect-/perfect-scrollbar.bc.de"></script>
<script src="assets/vendor/libs/hammer/hammer.js"></script>
<script src="assets/vendor/libs/i18n/i18n.js"></script>
<script src="assets/vendor/libs/typeahead-js/typeahead.js"></script>
<script src="assets/vendor/js/menu.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
<!-- Main JS -->
<script src="assets/js/main.js"></script>
<!-- Page JS -->
</body> <!--ui-list-groups.html [XR&CO'2014],11:01:13 GMT -->
</html>
<!-- beautify ignore:end -->