| Server IP : 92.204.40.98 / Your IP : 216.73.216.201 Web Server : LiteSpeed System : Linux amster.dnsfors.com 4.18.0-553.111.1.el8_10.x86_64 #1 SMP Sun Mar 8 20:06:07 EDT 2026 x86_64 User : tmksyste ( 2190) PHP Version : 8.3.31 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/tmksyste/domains/tmksystems.in/private_html/crmapp/bkp/ |
Upload File : |
<!doctype html>
<html lang="en" data-layout="vertical" data-sidebar="dark" data-sidebar-image="img-1" data-sidebar-size="lg" data-preloader="disable" data-theme="default" data-topbar="light" data-bs-theme="light" data-theme-color="0">
<!-- Mirrored from themesbrand.com/dosix/layouts/pages-profile.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 16 Jul 2024 06:02:55 GMT -->
<head>
<meta charset="utf-8">
<title>Profile | Dosix - Admin & Dashboard Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Minimal Admin & Dashboard Template" name="description">
<meta content="Themesbrand" name="author">
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Fonts css load -->
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link id="fontsLink" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Layout config Js -->
<script src="assets/js/layout.js"></script>
<!-- Bootstrap Css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Icons Css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css">
<!-- App Css-->
<link href="assets/css/app.min.css" rel="stylesheet" type="text/css">
<!-- custom Css-->
<link href="assets/css/custom.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Begin page -->
<div id="layout-wrapper">
<!-- ========== App Menu ========== -->
<div class="app-menu navbar-menu">
<!-- LOGO -->
<div class="navbar-brand-box">
<a href="index.html" class="logo logo-dark">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="22">
</span>
</a>
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="22">
</span>
</a>
<button type="button" class="btn btn-sm p-0 fs-3xl header-item float-end btn-vertical-sm-hover" id="vertical-hover">
<i class="ri-record-circle-line"></i>
</button>
<div class="vertical-menu-btn-wrapper header-item vertical-icon">
<button type="button" class="btn btn-sm px-0 fs-xl vertical-menu-btn topnav-hamburger shadow hamburger-icon" id="topnav-hamburger-icon">
<i class='bx bx-chevrons-right'></i>
<i class='bx bx-chevrons-left'></i>
</button>
</div>
</div>
<div id="scrollbar">
<div class="container-fluid">
<div id="two-column-menu">
</div>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a href="#sidebarHospital" class="nav-link menu-link collapsed" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarHospital">
<i class=" bx bx-buildings"></i> <span data-key="t-hospital">Hospital</span>
</a>
<div class="collapse menu-dropdown" id="sidebarHospital">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="index.html" class="nav-link" data-key="t-dashboard">Dashboard</a>
</li>
<li class="nav-item">
<a href="doctor-appointments.html" class="nav-link" data-key="t-appointments">Appointments</a>
</li>
<li class="nav-item">
<a href="doctor-staff-list.html" class="nav-link" data-key="t-staff-list">Staff List</a>
</li>
<li class="nav-item">
<a href="doctor-list.html" class="nav-link" data-key="t-doctors">Doctors</a>
</li>
<li class="nav-item">
<a href="doctor-patients.html" class="nav-link" data-key="t-patients">Patients</a>
</li>
<li class="nav-item">
<a href="doctor-department.html" class="nav-link" data-key="t-department">Department</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarEcommerce" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarEcommerce">
<i class="bx bx-cart-alt"></i> <span data-key="t-ecommerce">Ecommerce</span>
</a>
<div class="collapse menu-dropdown" id="sidebarEcommerce">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="dashboard-ecommerce.html" class="nav-link" data-key="t-dashboard"> Dashboard </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-products.html" class="nav-link" data-key="t-products"> Products </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-product-details.html" class="nav-link" data-key="t-product-overview"> Product Overview </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-add-product.html" class="nav-link" data-key="t-add-product"> Add Product </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-cart.html" class="nav-link" data-key="t-shopping-cart"> Shopping Cart </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-checkout.html" class="nav-link" data-key="t-checkout"> Checkout </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-orders.html" class="nav-link" data-key="t-orders"> Orders </a>
</li>
<li class="nav-item">
<a href="apps-ecommerce-customers.html" class="nav-link" data-key="t-customers"> Customers </a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="apps-calendar.html" class="nav-link menu-link"> <i class="bx bx-calendar"></i> <span data-key="t-calendar">Calendar</span> </a>
</li>
<li class="nav-item">
<a href="apps-chat.html" class="nav-link menu-link"> <i class="bx bx-chat"></i> <span data-key="t-chat">Chat</span> </a>
</li>
<li class="nav-item">
<a href="apps-email.html" class="nav-link menu-link"> <i class="bx bx-envelope"></i> <span data-key="t-email">Email</span> </a>
</li>
<li class="nav-item">
<a href="#sidebarInvoices" class="nav-link menu-link collapsed" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarInvoices">
<i class="bx bx-file"></i> <span data-key="t-invoices">Invoices</span>
</a>
<div class="collapse menu-dropdown" id="sidebarInvoices">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="apps-invoices-list.html" class="nav-link" data-key="t-list-view">List View</a>
</li>
<li class="nav-item">
<a href="apps-invoices-overview.html" class="nav-link" data-key="t-overview">Overview</a>
</li>
<li class="nav-item">
<a href="apps-invoices-create.html" class="nav-link" data-key="t-create-invoice">Create Invoice</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarAuth" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAuth">
<i class="bx bx-user-circle"></i> <span data-key="t-authentication">Authentication</span>
</a>
<div class="collapse menu-dropdown" id="sidebarAuth">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="auth-signin.html" class="nav-link" role="button" data-key="t-signin"> Sign In </a>
</li>
<li class="nav-item">
<a href="auth-signup.html" class="nav-link" role="button" data-key="t-signup"> Sign Up </a>
</li>
<li class="nav-item">
<a href="auth-pass-reset.html" class="nav-link" role="button" data-key="t-password-reset">
Password Reset
</a>
</li>
<li class="nav-item">
<a href="auth-pass-change.html" class="nav-link" role="button" data-key="t-password-create">
Password Create
</a>
</li>
<li class="nav-item">
<a href="auth-lockscreen.html" class="nav-link" role="button" data-key="t-lock-screen">
Lock Screen
</a>
</li>
<li class="nav-item">
<a href="auth-logout.html" class="nav-link" role="button" data-key="t-logout"> Logout </a>
</li>
<li class="nav-item">
<a href="auth-success-msg.html" class="nav-link" role="button" data-key="t-success-message"> Success Message </a>
</li>
<li class="nav-item">
<a href="auth-twostep.html" class="nav-link" role="button" data-key="t-two-step-verification"> Two Step Verification </a>
</li>
<li class="nav-item">
<a href="#sidebarErrors" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarErrors" data-key="t-errors"> Errors </a>
<div class="collapse menu-dropdown" id="sidebarErrors">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="auth-404.html" class="nav-link" data-key="t-404-error"> 404 Error </a>
</li>
<li class="nav-item">
<a href="auth-500.html" class="nav-link" data-key="t-500"> 500 </a>
</li>
<li class="nav-item">
<a href="auth-503.html" class="nav-link" data-key="t-503"> 503 </a>
</li>
<li class="nav-item">
<a href="auth-offline.html" class="nav-link" data-key="t-offline-page"> Offline Page </a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarPages" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarPages">
<i class="bx bxs-contact"></i> <span data-key="t-pages">Pages</span>
</a>
<div class="collapse menu-dropdown" id="sidebarPages">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="pages-starter.html" class="nav-link" data-key="t-starter"> Starter </a>
</li>
<li class="nav-item">
<a href="pages-profile.html" class="nav-link" data-key="t-profile"> Profile </a>
</li>
<li class="nav-item">
<a href="pages-profile-settings.html" class="nav-link" data-key="t-profile-setting"> Profile Settings </a>
</li>
<li class="nav-item">
<a href="pages-timeline.html" class="nav-link" data-key="t-timeline"> Timeline </a>
</li>
<li class="nav-item">
<a href="pages-faqs.html" class="nav-link" data-key="t-faqs"> FAQs </a>
</li>
<li class="nav-item">
<a href="pages-pricing.html" class="nav-link" data-key="t-pricing"> Pricing </a>
</li>
<li class="nav-item">
<a href="pages-maintenance.html" class="nav-link" data-key="t-maintenance"> Maintenance </a>
</li>
<li class="nav-item">
<a href="pages-coming-soon.html" class="nav-link" data-key="t-coming-soon"> Coming Soon </a>
</li>
<li class="nav-item">
<a href="pages-privacy-policy.html" class="nav-link" data-key="t-privacy-policy"> Privacy Policy </a>
</li>
<li class="nav-item">
<a href="pages-term-conditions.html" class="nav-link" data-key="t-term-conditions"> Term & Conditions </a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarUI" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarUI">
<i class="bx bx-cube"></i> <span data-key="t-bootstrap-ui">Bootstrap UI</span>
</a>
<div class="collapse menu-dropdown mega-dropdown-menu" id="sidebarUI">
<div class="row">
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-alerts.html" class="nav-link" data-key="t-alerts">Alerts</a>
</li>
<li class="nav-item">
<a href="ui-badges.html" class="nav-link" data-key="t-badges">Badges</a>
</li>
<li class="nav-item">
<a href="ui-buttons.html" class="nav-link" data-key="t-buttons">Buttons</a>
</li>
<li class="nav-item">
<a href="ui-colors.html" class="nav-link" data-key="t-colors">Colors</a>
</li>
<li class="nav-item">
<a href="ui-cards.html" class="nav-link" data-key="t-cards">Cards</a>
</li>
<li class="nav-item">
<a href="ui-carousel.html" class="nav-link" data-key="t-carousel">Carousel</a>
</li>
<li class="nav-item">
<a href="ui-dropdowns.html" class="nav-link" data-key="t-dropdowns">Dropdowns</a>
</li>
<li class="nav-item">
<a href="ui-grid.html" class="nav-link" data-key="t-grid">Grid</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-images.html" class="nav-link" data-key="t-images">Images</a>
</li>
<li class="nav-item">
<a href="ui-tabs.html" class="nav-link" data-key="t-tabs">Tabs</a>
</li>
<li class="nav-item">
<a href="ui-accordions.html" class="nav-link" data-key="t-accordion-collapse">Accordion & Collapse</a>
</li>
<li class="nav-item">
<a href="ui-modals.html" class="nav-link" data-key="t-modals">Modals</a>
</li>
<li class="nav-item">
<a href="ui-offcanvas.html" class="nav-link" data-key="t-offcanvas">Offcanvas</a>
</li>
<li class="nav-item">
<a href="ui-placeholders.html" class="nav-link" data-key="t-placeholders">Placeholders</a>
</li>
<li class="nav-item">
<a href="ui-progress.html" class="nav-link" data-key="t-progress">Progress</a>
</li>
<li class="nav-item">
<a href="ui-notifications.html" class="nav-link" data-key="t-notifications">Notifications</a>
</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="ui-media.html" class="nav-link" data-key="t-media-object">Media object</a>
</li>
<li class="nav-item">
<a href="ui-embed-video.html" class="nav-link" data-key="t-embed-video">Embed Video</a>
</li>
<li class="nav-item">
<a href="ui-typography.html" class="nav-link" data-key="t-typography">Typography</a>
</li>
<li class="nav-item">
<a href="ui-lists.html" class="nav-link" data-key="t-lists">Lists</a>
</li>
<li class="nav-item">
<a href="ui-links.html" class="nav-link" data-key="t-links">Links</a>
</li>
<li class="nav-item">
<a href="ui-general.html" class="nav-link" data-key="t-general">General</a>
</li>
<li class="nav-item">
<a href="ui-ribbons.html" class="nav-link" data-key="t-ribbons">Ribbons</a>
</li>
<li class="nav-item">
<a href="ui-utilities.html" class="nav-link" data-key="t-utilities">Utilities</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarAdvanceUI" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAdvanceUI">
<i class="bx bx-layer"></i> <span data-key="t-advance-ui">Advance UI</span>
</a>
<div class="collapse menu-dropdown" id="sidebarAdvanceUI">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="advance-ui-sweetalerts.html" class="nav-link" data-key="t-sweet-alerts">Sweet Alerts</a>
</li>
<li class="nav-item">
<a href="advance-ui-nestable.html" class="nav-link" data-key="t-nestable-list">Nestable List</a>
</li>
<li class="nav-item">
<a href="advance-ui-scrollbar.html" class="nav-link" data-key="t-scrollbar">Scrollbar</a>
</li>
<li class="nav-item">
<a href="advance-ui-swiper.html" class="nav-link" data-key="t-swiper-slider">Swiper Slider</a>
</li>
<li class="nav-item">
<a href="advance-ui-ratings.html" class="nav-link" data-key="t-ratings">Ratings</a>
</li>
<li class="nav-item">
<a href="advance-ui-highlight.html" class="nav-link" data-key="t-highlight">Highlight</a>
</li>
<li class="nav-item">
<a href="advance-ui-scrollspy.html" class="nav-link" data-key="t-scrollSpy">ScrollSpy</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="widgets.html">
<i class="bx bx-pen"></i> <span data-key="t-widgets">Widgets</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarForms" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarForms">
<i class="bx bx-copy-alt"></i> <span data-key="t-forms">Forms</span>
</a>
<div class="collapse menu-dropdown" id="sidebarForms">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="forms-elements.html" class="nav-link" data-key="t-basic-elements">Basic Elements</a>
</li>
<li class="nav-item">
<a href="forms-select.html" class="nav-link" data-key="t-form-select">Form Select</a>
</li>
<li class="nav-item">
<a href="forms-checkboxs-radios.html" class="nav-link" data-key="t-checkboxes-radios">Checkboxes & Radios</a>
</li>
<li class="nav-item">
<a href="forms-pickers.html" class="nav-link" data-key="t-pickers">Pickers</a>
</li>
<li class="nav-item">
<a href="forms-masks.html" class="nav-link" data-key="t-input-masks">Input Masks</a>
</li>
<li class="nav-item">
<a href="forms-advanced.html" class="nav-link" data-key="t-advanced">Advanced</a>
</li>
<li class="nav-item">
<a href="forms-range-sliders.html" class="nav-link" data-key="t-range-slider">Range Slider</a>
</li>
<li class="nav-item">
<a href="forms-validation.html" class="nav-link" data-key="t-validation">Validation</a>
</li>
<li class="nav-item">
<a href="forms-wizard.html" class="nav-link" data-key="t-wizard">Wizard</a>
</li>
<li class="nav-item">
<a href="forms-editors.html" class="nav-link" data-key="t-editors">Editors</a>
</li>
<li class="nav-item">
<a href="forms-file-uploads.html" class="nav-link" data-key="t-file-uploads">File Uploads</a>
</li>
<li class="nav-item">
<a href="forms-layouts.html" class="nav-link" data-key="t-form-layouts">Form Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarTables" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarTables">
<i class="bx bx-table"></i> <span data-key="t-tables">Tables</span>
</a>
<div class="collapse menu-dropdown" id="sidebarTables">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="tables-basic.html" class="nav-link" data-key="t-basic-tables">Basic Tables</a>
</li>
<li class="nav-item">
<a href="tables-gridjs.html" class="nav-link" data-key="t-grid-js">Grid Js</a>
</li>
<li class="nav-item">
<a href="tables-listjs.html" class="nav-link" data-key="t-list-js">List Js</a>
</li>
<li class="nav-item">
<a href="tables-datatables.html" class="nav-link" data-key="t-datatables">Datatables</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarCharts" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarCharts">
<i class="bx bx-pie-chart-alt-2"></i> <span data-key="t-apexcharts">Apexcharts</span>
</a>
<div class="collapse menu-dropdown" id="sidebarCharts">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="charts-apex-line.html" class="nav-link" data-key="t-line">Line</a>
</li>
<li class="nav-item">
<a href="charts-apex-area.html" class="nav-link" data-key="t-area">Area</a>
</li>
<li class="nav-item">
<a href="charts-apex-column.html" class="nav-link" data-key="t-column">Column</a>
</li>
<li class="nav-item">
<a href="charts-apex-bar.html" class="nav-link" data-key="t-bar">Bar</a>
</li>
<li class="nav-item">
<a href="charts-apex-mixed.html" class="nav-link" data-key="t-mixed">Mixed</a>
</li>
<li class="nav-item">
<a href="charts-apex-timeline.html" class="nav-link" data-key="t-timeline">Timeline</a>
</li>
<li class="nav-item">
<a href="charts-apex-range-area.html" class="nav-link" data-key="t-range-area">Range Area</a>
</li>
<li class="nav-item">
<a href="charts-apex-funnel.html" class="nav-link" data-key="t-funnel">Funnel</a>
</li>
<li class="nav-item">
<a href="charts-apex-candlestick.html" class="nav-link" data-key="t-candlstick">Candlstick</a>
</li>
<li class="nav-item">
<a href="charts-apex-boxplot.html" class="nav-link" data-key="t-boxplot">Boxplot</a>
</li>
<li class="nav-item">
<a href="charts-apex-bubble.html" class="nav-link" data-key="t-bubble">Bubble</a>
</li>
<li class="nav-item">
<a href="charts-apex-scatter.html" class="nav-link" data-key="t-scatter">Scatter</a>
</li>
<li class="nav-item">
<a href="charts-apex-heatmap.html" class="nav-link" data-key="t-heatmap">Heatmap</a>
</li>
<li class="nav-item">
<a href="charts-apex-treemap.html" class="nav-link" data-key="t-treemap">Treemap</a>
</li>
<li class="nav-item">
<a href="charts-apex-pie.html" class="nav-link" data-key="t-pie">Pie</a>
</li>
<li class="nav-item">
<a href="charts-apex-radialbar.html" class="nav-link" data-key="t-radialbar">Radialbar</a>
</li>
<li class="nav-item">
<a href="charts-apex-radar.html" class="nav-link" data-key="t-radar">Radar</a>
</li>
<li class="nav-item">
<a href="charts-apex-polar.html" class="nav-link" data-key="t-polar-area">Polar Area</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarIcons" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarIcons">
<i class="bx bx-traffic-cone"></i> <span data-key="t-icons">Icons</span>
</a>
<div class="collapse menu-dropdown" id="sidebarIcons">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="icons-remix.html" class="nav-link" data-key="t-remix">Remix</a>
</li>
<li class="nav-item">
<a href="icons-boxicons.html" class="nav-link" data-key="t-boxicons">Boxicons</a>
</li>
<li class="nav-item">
<a href="icons-materialdesign.html" class="nav-link" data-key="t-material-design">Material Design</a>
</li>
<li class="nav-item">
<a href="icons-bootstrap.html" class="nav-link" data-key="t-bootstrap">Bootstrap</a>
</li>
<li class="nav-item">
<a href="icons-phosphor.html" class="nav-link" data-key="t-phosphor">Phosphor</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link collapsed" href="#sidebarMaps" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarMaps">
<i class="bx bx-map-alt"></i> <span data-key="t-maps">Maps</span>
</a>
<div class="collapse menu-dropdown" id="sidebarMaps">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="maps-google.html" class="nav-link" data-key="t-google">Google</a>
</li>
<li class="nav-item">
<a href="maps-vector.html" class="nav-link" data-key="t-vector">Vector</a>
</li>
<li class="nav-item">
<a href="maps-leaflet.html" class="nav-link" data-key="t-leaflet">Leaflet</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link menu-link" href="#sidebarMultilevel" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarMultilevel">
<i class="bx bx-share-alt"></i> <span data-key="t-multi-level">Multi Level</span>
</a>
<div class="collapse menu-dropdown" id="sidebarMultilevel">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-1.1"> Level 1.1 </a>
</li>
<li class="nav-item">
<a href="#sidebarAccount" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarAccount" data-key="t-level-1.2"> Level
1.2
</a>
<div class="collapse menu-dropdown" id="sidebarAccount">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-2.1"> Level 2.1 </a>
</li>
<li class="nav-item">
<a href="#sidebarCrm" class="nav-link" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="sidebarCrm" data-key="t-level-2.2"> Level 2.2
</a>
<div class="collapse menu-dropdown" id="sidebarCrm">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-3.1"> Level 3.1
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-key="t-level-3.2"> Level 3.2
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Sidebar -->
</div>
<div class="dropdown sidebar-user mt-4">
<button type="button" class="btn sidebar-user-button shadow-none w-100" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center overflow-hidden">
<img class="rounded-circle header-profile-user" src="assets/images/users/32/avatar-1.jpg" alt="Header Avatar">
<span class="text-start ms-xl-2 overflow-hidden flex-grow-1 sideba-user-content">
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text text-truncate mb-0" data-key="t-dixie-allen">Dixie Allen</span>
<span class="d-none d-xl-block ms-1 fs-sm user-name-sub-text" data-key="t-founder">Founder</span>
</span>
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<h6 class="dropdown-header">Welcome Dixie!</h6>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-account-circle text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Profile</span></a>
<a class="dropdown-item" href="apps-chat.html"><i class="mdi mdi-message-text-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Messages</span></a>
<a class="dropdown-item" href="apps-tickets-overview.html"><i class="mdi mdi-calendar-check-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Taskboard</span></a>
<a class="dropdown-item" href="pages-faqs.html"><i class="mdi mdi-lifebuoy text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Help</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-wallet text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Balance : <b>$8451.36</b></span></a>
<a class="dropdown-item" href="pages-profile-settings.html"><span class="badge bg-success-subtle text-success mt-1 float-end">New</span><i class="mdi mdi-cog-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Settings</span></a>
<a class="dropdown-item" href="auth-lockscreen.html"><i class="mdi mdi-lock text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Lock screen</span></a>
<a class="dropdown-item" href="auth-logout.html"><i class="mdi mdi-logout text-muted fs-lg align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
</div>
</div>
<div class="sidebar-background"></div>
</div>
<!-- Left Sidebar End -->
<!-- Vertical Overlay-->
<div class="vertical-overlay"></div>
<div class="topbar-wrapper shadow">
<header id="page-topbar">
<div class="layout-width">
<div class="navbar-header">
<div class="d-flex">
<!-- LOGO -->
<div class="navbar-brand-box horizontal-logo">
<a href="index.html" class="logo logo-dark">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="" height="22">
</span>
</a>
<a href="index.html" class="logo logo-light">
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="" height="22">
</span>
<span class="logo-lg">
<img src="assets/images/logo-light.png" alt="" height="22">
</span>
</a>
</div>
<div class="header-item flex-shrink-0 me-3 vertical-btn-wrapper">
<button type="button" class="btn btn-sm px-0 fs-xl vertical-menu-btn topnav-hamburger border hamburger-icon" id="topnav-hamburger-icon">
<i class='bx bx-chevrons-right arrow-right'></i>
<i class='bx bx-chevrons-left arrow-left'></i>
</button>
</div>
<h4 class="mb-sm-0 header-item page-title lh-base">Profile</h4>
</div>
<div class="d-flex align-items-center">
<div class="dropdown d-none d-md-flex topbar-head-dropdown header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-search fs-3xl"></i>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-search-dropdown">
<form class="p-3">
<div class="form-group m-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
<button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="dropdown ms-1 topbar-head-dropdown header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="header-lang-img" src="assets/images/flags/us.svg" alt="Header Language" height="20" class="rounded">
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language py-2" data-lang="en" title="English">
<img src="assets/images/flags/us.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">English</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="sp" title="Spanish">
<img src="assets/images/flags/spain.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">Española</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="gr" title="German">
<img src="assets/images/flags/germany.svg" alt="user-image" class="me-2 rounded" height="18"> <span class="align-middle">Deutsche</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="it" title="Italian">
<img src="assets/images/flags/italy.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">Italiana</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ru" title="Russian">
<img src="assets/images/flags/russia.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">русский</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ch" title="Chinese">
<img src="assets/images/flags/china.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">中国人</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="fr" title="French">
<img src="assets/images/flags/french.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">français</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ar" title="Arabic">
<img src="assets/images/flags/ae.svg" alt="user-image" class="me-2 rounded" height="18">
<span class="align-middle">عربي</span>
</a>
</div>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-cart-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<i class='bx bx-shopping-bag fs-3xl'></i>
<span class="position-absolute topbar-badge cartitem-badge fs-3xs translate-middle badge rounded-pill bg-info">5</span>
</button>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-end p-0 product-list" aria-labelledby="page-header-cart-dropdown">
<div class="p-3 border-bottom">
<div class="row align-items-center">
<div class="col">
<h6 class="m-0 fs-lg fw-semibold"> My Cart <span class="badge bg-secondary fs-sm cartitem-badge ms-1">7</span></h6>
</div>
<div class="col-auto">
<a href="#!">View All</a>
</div>
</div>
</div>
<div data-simplebar style="max-height: 300px;">
<div class="p-3">
<div class="text-center empty-cart" id="empty-cart">
<div class="avatar-md mx-auto my-3">
<div class="avatar-title bg-info-subtle text-info fs-2 rounded-circle">
<i class='bx bx-cart'></i>
</div>
</div>
<h5 class="mb-3">Your Cart is Empty!</h5>
<a href="#!" class="btn btn-success w-md mb-3">Shop Now</a>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-1.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Blive Printed Men Round Neck</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">327.49</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="2" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">654.98</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-5.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Sportwear</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Willage Volleyball Ball</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">49.06</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="3" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">147.18</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-10.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Cotton collar tshirts for men</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">53.33</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="3" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">159.99</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-11.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Jeans blue men boxer</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">164.37</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="1" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">164.37</span></h5>
</div>
</div>
</div>
<div class="d-block dropdown-item product text-wrap p-2">
<div class="d-flex">
<div class="avatar-sm me-3 flex-shrink-0">
<div class="avatar-title bg-light rounded">
<img src="assets/images/products/32/img-8.png" class="avatar-xs" alt="user-pic">
</div>
</div>
<div class="flex-grow-1">
<p class="mb-1 fs-sm text-muted">Fashion</p>
<h6 class="mt-0 mb-3 fs-md">
<a href="#!" class="text-reset">Full Sleeve Solid Men Sweatshirt</a>
</h6>
<div class="text-muted fw-medium d-none">$<span class="product-price">180.00</span></div>
<div class="input-step">
<button type="button" class="minus">–</button>
<input type="number" class="product-quantity" value="1" min="0" max="100" readonly>
<button type="button" class="plus">+</button>
</div>
</div>
<div class="ps-2 d-flex flex-column justify-content-between align-items-end">
<button type="button" class="btn btn-icon btn-sm btn-ghost-primary remove-cart-btn" data-bs-toggle="modal" data-bs-target="#removeCartModal"><i class="ri-close-fill fs-lg"></i></button>
<h5 class="mb-0">$ <span class="product-line-price">180.00</span></h5>
</div>
</div>
</div>
<div id="count-table">
<table class="table table-borderless mb-0 fw-semibold">
<tbody>
<tr>
<td>Sub Total :</td>
<td class="text-end cart-subtotal">$1306.52</td>
</tr>
<tr>
<td>Discount <span class="text-muted">(DOSIX15)</span>:</td>
<td class="text-end cart-discount">- $195.98</td>
</tr>
<tr>
<td>Shipping Charge :</td>
<td class="text-end cart-shipping">$65.00</td>
</tr>
<tr>
<td>Estimated Tax (12.5%) : </td>
<td class="text-end cart-tax">$163.31</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="p-3 border-bottom-0 border-start-0 border-end-0 border-dashed border" id="checkout-elem">
<div class="d-flex justify-content-between align-items-center pb-3">
<h5 class="m-0 text-muted">Total:</h5>
<div class="px-2">
<h5 class="m-0 cart-total">$1338.86</h5>
</div>
</div>
<a href="apps-ecommerce-checkout.html" class="btn btn-info text-center w-100">
Checkout
</a>
</div>
</div>
</div>
<div class="ms-1 header-item d-none d-sm-flex">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" data-toggle="fullscreen">
<i class='bx bx-fullscreen fs-3xl'></i>
</button>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle mode-layout" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-sun align-middle fs-3xl"></i>
</button>
<div class="dropdown-menu p-2 dropdown-menu-end" id="light-dark-mode">
<a href="#!" class="dropdown-item" data-mode="light"><i class="bx bx-sun align-middle me-2"></i> Default (light mode)</a>
<a href="#!" class="dropdown-item" data-mode="dark"><i class="bx bx-moon align-middle me-2"></i> Dark</a>
<a href="#!" class="dropdown-item" data-mode="auto"><i class="bx bx-desktop align-middle me-2"></i> Auto (system default)</a>
</div>
</div>
<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
<button type="button" class="btn btn-icon btn-topbar btn-ghost-dark rounded-circle" id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
<i class='bx bx-notification fs-3xl'></i>
<span class="position-absolute topbar-badge fs-3xs translate-middle badge rounded-pill bg-danger"><span class="notification-badge">3</span><span class="visually-hidden">unread messages</span></span>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-notifications-dropdown">
<div class="dropdown-head rounded-top">
<div class="px-3 py-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-0 fs-lg fw-semibold"> Notifications <span class="badge bg-danger-subtle text-danger fs-sm notification-badge"> 3</span></h6>
</div>
<div class="col-auto dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" class="link-secondary fs-md"><i class="bi bi-three-dots-vertical"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">All Clear</a></li>
<li><a class="dropdown-item" href="#">Mark all as read</a></li>
<li><a class="dropdown-item" href="#">Archive All</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="pb-2 ps-0" id="notificationItemsTabContent">
<div data-simplebar style="max-height: 300px;" class="pe-0">
<h6 class="text-overflow text-muted fs-sm my-2 notification-title px-3">Today</h6>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-3.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-danger rounded-circle">
<span class="visually-hidden">Un Active</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1 text-muted"><b>Angela Bernier</b> mentioned you in <a href="#!">This Project</a></p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 48 min ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check02">
<label class="form-check-label" for="all-notification-check02"></label>
</div>
</div>
</div>
</div>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-2.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-success rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1">Answered to your comment on the cash flow forecast's graph 🔔.</p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 1 hrs ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check02">
<label class="form-check-label" for="all-notification-check02"></label>
</div>
</div>
</div>
</div>
<h6 class="text-overflow text-muted fs-sm my-3 px-3 notification-title">Read Before</h6>
<div class="text-reset notification-item d-block dropdown-item position-relative border-dashed border-bottom">
<div class="d-flex">
<div class="position-relative me-3 flex-shrink-0">
<img src="assets/images/users/32/avatar-8.jpg" class="rounded-circle avatar-xs" alt="user-pic">
<span class="active-badge position-absolute start-100 translate-middle p-1 bg-warning rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="flex-grow-1">
<div class="fs-md text-muted">
<p class="mb-1">We talked about a project on linkedin.</p>
</div>
<p class="mb-0 fs-xs fw-medium text-uppercase text-muted">
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
</p>
</div>
<div class="px-2 fs-base">
<div class="form-check notification-check">
<input class="form-check-input" type="checkbox" value="" id="all-notification-check04">
<label class="form-check-label" for="all-notification-check04"></label>
</div>
</div>
</div>
</div>
</div>
<div class="notification-actions" id="notification-actions">
<div class="d-flex text-muted justify-content-center align-items-center">
Select <div id="select-content" class="text-body fw-semibold px-1">0</div> Result <button type="button" class="btn btn-link link-danger p-0 ms-2" data-bs-toggle="modal" data-bs-target="#removeNotificationModal">Remove</button>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown ms-sm-3 header-item topbar-user">
<button type="button" class="btn shadow-none" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center">
<img class="rounded-circle header-profile-user" src="assets/images/users/32/avatar-1.jpg" alt="Header Avatar">
<span class="text-start ms-xl-2">
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">Richard Marshall</span>
<span class="d-none d-xl-block ms-1 fs-sm user-name-sub-text">Founder</span>
</span>
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<h6 class="dropdown-header">Welcome Richard!</h6>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-account-circle text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Profile</span></a>
<a class="dropdown-item" href="apps-chat.html"><i class="mdi mdi-message-text-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Messages</span></a>
<a class="dropdown-item" href="apps-tickets-overview.html"><i class="mdi mdi-calendar-check-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Taskboard</span></a>
<a class="dropdown-item" href="pages-faqs.html"><i class="mdi mdi-lifebuoy text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Help</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="pages-profile.html"><i class="mdi mdi-wallet text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Balance : <b>$8451.36</b></span></a>
<a class="dropdown-item" href="pages-profile-settings.html"><span class="badge bg-success-subtle text-success mt-1 float-end">New</span><i class="mdi mdi-cog-outline text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Settings</span></a>
<a class="dropdown-item" href="auth-lockscreen.html"><i class="mdi mdi-lock text-muted fs-lg align-middle me-1"></i> <span class="align-middle">Lock screen</span></a>
<a class="dropdown-item" href="auth-logout.html"><i class="mdi mdi-logout text-muted fs-lg align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- removeNotificationModal -->
<div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="NotificationModalbtn-close"></button>
</div>
<div class="modal-body p-md-5">
<div class="text-center">
<div class="text-danger">
<i class="bi bi-trash display-4"></i>
</div>
<div class="mt-4 fs-base">
<h4 class="mb-1">Are you sure ?</h4>
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
</div>
</div>
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete It!</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- removeCartModal -->
<div id="removeCartModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-cartmodal"></button>
</div>
<div class="modal-body p-md-5">
<div class="text-center">
<div class="text-danger">
<i class="bi bi-trash display-5"></i>
</div>
<div class="mt-4">
<h4>Are you sure ?</h4>
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this product ?</p>
</div>
</div>
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn w-sm btn-danger" id="remove-cartproduct">Yes, Delete It!</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
<li class="breadcrumb-item active">Profile</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex mb-3">
<div class="dropdown flex-shrink-0 ms-auto">
<button class="btn btn-light btn-icon btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-share"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#!"><i class="bi bi-facebook me-1 align-baseline"></i> Facebook</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-whatsapp me-1 align-baseline"></i> Whatsapp</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-instagram me-1 align-baseline"></i> Instagram</a></li>
</ul>
</div>
</div>
<div class="text-center border-bottom border-dashed pb-4">
<img src="assets/images/users/avatar-1.jpg" alt="" class="avatar-lg rounded-circle p-1 img-thumbnail">
<div class="mt-3">
<h5>Dixie Allen <i class="bi bi-patch-check-fill align-baseline text-info ms-1"></i></h5>
<p class="text-muted">Web Developer</p>
</div>
<div class="d-flex gap-2 mt-4">
<button type="button" class="btn btn-subtle-secondary custom-toggle w-50" data-bs-toggle="button" aria-pressed="true">
<span class="icon-on"><i class="bi bi-person-plus align-baseline me-1"></i> Follow</span>
<span class="icon-off"><i class="bi bi-person-x align-baseline me-1"></i> Unfollow</span>
</button>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
<div class="border-bottom border-dashed py-4">
<h5 class="card-title mb-3">Information</h5>
<div class="table-responsive">
<table class="table table-borderless table-sm align-middle mb-0">
<tbody>
<tr>
<th class="ps-0" scope="row">Designation</th>
<td class="text-muted text-end">Web Developer</td>
</tr>
<tr>
<th class="ps-0" scope="row">Phone No</th>
<td class="text-muted text-end">617 219 6245</td>
</tr>
<tr>
<th class="ps-0" scope="row">Birth of Date</th>
<td class="text-muted text-end">24 June, 1998</td>
</tr>
<tr>
<th class="ps-0" scope="row">Website</th>
<td class="text-muted text-end"><a href="http://themesbrand.com/" target="_blank">www.themesbrand.com</a></td>
</tr>
<tr>
<th class="ps-0" scope="row">Email</th>
<td class="text-muted text-end">richardmarshall@dosix.com</td>
</tr>
<tr>
<th class="ps-0" scope="row">Location</th>
<td class="text-muted text-end">Los Angeles, California</td>
</tr>
<tr>
<th class="ps-0" scope="row">Joining Date</th>
<td class="text-muted text-end">30 Oct 2023</td>
</tr>
<tr>
<th>Social Media</th>
<td>
<div class="d-flex flex-wrap justify-content-end gap-2">
<a href="javascript:void(0);" class="avatar-xs d-block">
<span class="avatar-title rounded-circle bg-secondary-subtle text-dark">
<i class="bi bi-github"></i>
</span>
</a>
<a href="javascript:void(0);" class="avatar-xs d-block">
<span class="avatar-title rounded-circle bg-primary-subtle text-primary">
<i class="bi bi-facebook"></i>
</span>
</a>
<a href="javascript:void(0);" class="avatar-xs d-block">
<span class="avatar-title rounded-circle bg-success-subtle text-success">
<i class="bi bi-dribbble"></i>
</span>
</a>
<a href="javascript:void(0);" class="avatar-xs d-block">
<span class="avatar-title rounded-circle bg-danger-subtle text-danger">
<i class="bi bi-instagram"></i>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="border-bottom border-dashed py-4">
<h5 class="card-title mb-3">Documents</h5>
<div class="vstack gap-3">
<div class="d-flex gap-2 align-items-center position-relative">
<div class="flex-shrink-0">
<div class="avatar-sm border border rounded">
<div class="avatar-title bg-body-secondary text-secondary rounded fs-lg">
<i class="bi bi-file-zip"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<h6>Artboard.zip</h6>
<p class="text-muted mb-0">2.02MB</p>
</div>
<div class="flex-shrink-0">
<a href="#!" class="icon-link icon-link-hover text-reset stretched-link fs-xl" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);"><i class="bi bi-download"></i></a>
</div>
</div>
<div class="d-flex gap-2 align-items-center position-relative">
<div class="flex-shrink-0">
<div class="avatar-sm border border rounded">
<div class="avatar-title bg-body-secondary text-secondary rounded fs-lg">
<i class="bi bi-filetype-txt"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<h6>Steex.txt</h6>
<p class="text-muted mb-0">1.49 MB</p>
</div>
<div class="flex-shrink-0">
<a href="#!" class="icon-link icon-link-hover text-reset stretched-link fs-xl" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);"><i class="bi bi-download"></i></a>
</div>
</div>
<div class="d-flex gap-2 align-items-center position-relative">
<div class="flex-shrink-0">
<div class="avatar-sm border border rounded">
<div class="avatar-title bg-body-secondary text-secondary rounded fs-lg">
<i class="bi bi-image"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<h6>Profile bg.png</h6>
<p class="text-muted mb-0">325 KB</p>
</div>
<div class="flex-shrink-0">
<a href="#!" class="icon-link icon-link-hover text-reset stretched-link fs-xl" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);"><i class="bi bi-download"></i></a>
</div>
</div>
<div class="d-flex gap-2 align-items-center position-relative">
<div class="flex-shrink-0">
<div class="avatar-sm border border rounded">
<div class="avatar-title bg-body-secondary text-secondary rounded fs-lg">
<i class="bi bi-file-pdf"></i>
</div>
</div>
</div>
<div class="flex-grow-1">
<h6>Steex Docs.pdf</h6>
<p class="text-muted mb-0">2.06 MB</p>
</div>
<div class="flex-shrink-0">
<a href="#!" class="icon-link icon-link-hover text-reset stretched-link fs-xl" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);"><i class="bi bi-download"></i></a>
</div>
</div>
</div>
</div>
<div class="pt-4">
<div class="d-flex align-items-center mb-3 gap-2">
<div class="flex-grow-1">
<h5 class="card-title mb-0">Recent Followers</h5>
</div>
<div class="flex-shrink-0">
<a href="#!" class="icon-link">View all <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div>
<div>
<div class="d-flex align-items-center gap-2 pb-2">
<div class="avatar-sm flex-shrink-0">
<img src="assets/images/users/avatar-3.jpg" alt="" class="img-fluid img-thumbnail">
</div>
<div class="flex-grow-1">
<h6 class="fs-md">Esther James</h6>
<p class="text-muted fs-sm mb-0">Web Designer</p>
</div>
<div class="flex-shrink-0">
<button type="button" class="btn btn-sm btn-outline-info custom-toggle active" data-bs-toggle="button" aria-pressed="true">
<span class="icon-on"><i class=" bx bx-user-check align-bottom fs-md"></i></span>
<span class="icon-off"><i class=" bx bx-user-x align-bottom fs-md"></i></span>
</button>
</div>
</div>
<div class="d-flex align-items-center gap-2 pb-2">
<div class="avatar-sm flex-shrink-0">
<img src="assets/images/users/avatar-6.jpg" alt="" class="img-fluid img-thumbnail">
</div>
<div class="flex-grow-1">
<h6 class="fs-md">Jacqueline Steve</h6>
<p class="fs-sm text-muted mb-0">UI/UX Designer</p>
</div>
<div class="flex-shrink-0">
<button type="button" class="btn btn-sm btn-outline-info custom-toggle" data-bs-toggle="button" aria-pressed="true">
<span class="icon-on"><i class=" bx bx-user-check align-bottom fs-md"></i></span>
<span class="icon-off"><i class=" bx bx-user-x align-bottom fs-md"></i></span>
</button>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<div class="avatar-sm flex-shrink-0">
<img src="assets/images/users/avatar-2.jpg" alt="" class="img-fluid img-thumbnail">
</div>
<div class="flex-grow-1">
<h6 class="fs-md">George Whalen</h6>
<p class="fs-sm text-muted mb-0">Backend Developer</p>
</div>
<div class="flex-shrink-0">
<button type="button" class="btn btn-sm btn-outline-info custom-toggle" data-bs-toggle="button" aria-pressed="true">
<span class="icon-on"><i class=" bx bx-user-check align-bottom fs-md"></i></span>
<span class="icon-off"><i class=" bx bx-user-x align-bottom fs-md"></i></span>
</button>
</div>
</div>
</div>
</div><!-- end card body -->
</div>
</div>
</div><!--end card-->
</div><!--end col-->
<div class="col-xl-9">
<div class="row align-items-center g-3 mb-3">
<div class="col-md order-1">
<!-- Nav tabs -->
<ul class="nav nav-pills arrow-navtabs nav-secondary gap-2 flex-grow-1" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#overview-tab" role="tab">
Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#activities" role="tab">
Activities
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#projects" role="tab">
Projects
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#friends" role="tab">
Friends
</a>
</li>
</ul>
</div><!--end col-->
<div class="col-md-auto order-lg-2">
<a href="pages-profile-settings.html" class="btn btn-primary"><i class="ri-edit-box-line align-bottom"></i> Edit Profile</a>
</div><!--end col-->
</div><!--end row-->
<div class="tab-content">
<div class="tab-pane active" id="overview-tab" role="tabpanel">
<div class="card">
<div class="card-body">
<div class="mb-4">
<h5 class="card-title mb-3">Media</h5>
<div class="row profile-media g-3">
<div class="col-lg-3">
<img src="assets/images/small/img-2.jpg" alt="" class="img-fluid h-100 rounded object-fit-cover">
</div><!--end col-->
<div class="col-lg-4">
<div class="row g-3">
<div class="col-lg-12">
<img src="assets/images/small/img-3.jpg" alt="" class="fixed-width w-100 rounded object-fit-cover">
</div><!--end col-->
<div class="col-lg-6">
<img src="assets/images/small/img-9.jpg" alt="" class="fixed-width w-100 rounded object-fit-cover">
</div><!--end-col-->
<div class="col-lg-6">
<img src="assets/images/small/img-1.jpg" alt="" class="fixed-width w-100 rounded object-fit-cover">
</div><!--end col-->
</div><!--end row-->
</div><!--end col-->
<div class="col-lg-3">
<img src="assets/images/small/img-8.jpg" alt="" class="img-fluid rounded object-fit-cover h-100 object-fit-cover">
</div><!--end col-->
<div class="col-lg-2">
<div class="row g-3">
<div class="col-lg-12">
<img src="assets/images/small/img-10.jpg" alt="" class="fixed-width w-100 rounded object-fit-cover">
</div><!--end-col-->
<div class="col-lg-12">
<img src="assets/images/small/img-5.jpg" alt="" class="fixed-width w-100 rounded object-fit-cover">
</div><!--end col-->
</div><!--end row-->
</div><!--end col-->
</div><!--end row-->
</div>
<div class="mb-4">
<h5 class="card-title mb-3">About Us</h5>
<p class="text-muted mb-2">A <b>Web Developer</b> creates and designs different websites for clients. They are responsible for their aesthetic as well as their function. Professionals in this field may also need to be able to ensure sites are compatible with multiple types of media. Web Developers need to have a firm understanding of programming and graphical design. Having a strong resume that emphasizes these attributes makes it significantly easier to get hired as a Web Developer.</p>
<p class="text-muted mb-0">As a web designer, my objective is to make a positive impact on clients, co-workers, and the Internet using my skills and experience to design compelling and attractive websites. Solving code problems. Editing & Design with designing team in the company to build perfect web designs.</p>
</div>
<div class="mb-4">
<div class="row">
<div class="col-lg-6">
<h5 class="card-title mb-3">Languages</h5>
<div class="d-flex flex-wrap gap-2">
<span class="badge bg-primary-subtle text-primary">English</span>
<span class="badge bg-primary-subtle text-primary">French</span>
<span class="badge bg-primary-subtle text-primary">German</span>
<span class="badge bg-primary-subtle text-primary">Arabic</span>
<span class="badge bg-primary-subtle text-primary">Italiana</span>
</div>
</div>
<div class="col-lg-6">
<h5 class="card-title mb-3 mt-4 mt-lg-0">Skills & Knowledge</h5>
<div class="d-flex flex-wrap gap-2">
<span class="badge bg-secondary-subtle text-secondary">Photoshop</span>
<span class="badge bg-secondary-subtle text-secondary">illustrator</span>
<span class="badge bg-secondary-subtle text-secondary">HTML</span>
<span class="badge bg-secondary-subtle text-secondary">CSS</span>
<span class="badge bg-secondary-subtle text-secondary">Javascript</span>
<span class="badge bg-secondary-subtle text-secondary">Php</span>
<span class="badge bg-secondary-subtle text-secondary">Python</span>
</div>
</div>
</div>
</div>
<div>
<h5 class="card-title mb-3">Education Qualification</h5>
<ul class="acitivity-timeline-2 list-unstyled mb-0">
<li>
<h6 class="fs-md">Masters in Computer Application (MCA)</h6>
<div class="d-flex align-items-center mb-3 gap-3">
<p class="mb-0">
<i class="bi bi-calendar align-baseline me-1"></i> 2023 - Continue
</p>
<p class="mb-0">
<i class="bi bi-buildings align-baseline me-1"></i> California State University
</p>
</div>
<p class="text-muted mb-0">It is a 3-year post-graduate course. To pursue MCA, you must be a graduate from a well-known university after completing 10+2 with Mathematics as a subject to apply for this course.</p>
</li>
<li>
<h6 class="fs-md">Bachelors's in Computer Application (BCA)</h6>
<div class="d-flex align-items-center mb-3 gap-3">
<p class="mb-0">
<i class="bi bi-calendar align-baseline me-1"></i> 2018 - 2023
</p>
<p class="mb-0">
<i class="bi bi-buildings align-baseline me-1"></i> California State University
</p>
</div>
<p class="text-muted mb-0">BCA is a three-year degree course for people who wish to dive into the world of programming language.</p>
</li>
</ul>
</div>
</div>
<!--end card-body-->
</div><!-- end card -->
</div>
<!--end tab-pane-->
<div class="tab-pane fade" id="activities" role="tabpanel">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Activity Stream</h5>
</div>
<div class="card-body">
<ul class="acitivity-timeline-2 list-unstyled mb-0">
<li>
<h6 class="fs-md">Purchase by James Price</h6>
<p>09:24 PM</p>
<p class="mb-0">Product noise evolve smartwatch</p>
</li>
<li>
<h6 class="fs-md">New ticket received <span class="badge text-bg-info align-middle ms-1">New</span></h6>
<p class="mb-3">4 days ago</p>
<p class="text-muted mb-0">User <span class="text-secondary">Erica245</span> submitted a ticket</p>
</li>
<li>
<h6 class="fs-md">Adding a new event with attachments</h6>
<p class="mb-3">30 days ago</p>
<div class="border border-dashed p-2 rounded-3">
<div class="row g-3">
<div class="col-auto">
<div class="d-flex position-relative gap-2">
<div class="flex-shrink-0">
<i class="bi bi-file-earmark-image fs-xl text-danger"></i>
</div>
<div class="flex-grow-1 ms-2">
<a href="javascript:void(0);" class="stretched-link">
<h6>UI/UX design</h6>
</a>
<small>685 KB</small>
</div>
</div>
</div>
<div class="col-auto">
<div class="d-flex position-relative gap-2">
<div class="flex-shrink-0">
<i class="bi bi-file-pdf fs-xl text-info"></i>
</div>
<div class="flex-grow-1 ms-2">
<a href="javascript:void(0);" class="stretched-link">
<h6>Dosix Invoice</h6>
</a>
<small>342 KB</small>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<h6 class="fs-md">01:30 PM</h6>
<p class="mb-0 text-muted">Lunch time after which sleep just doesn't want to let go of me. 🤝</p>
</li>
<li>
<h6 class="fs-md">03:30 PM</h6>
<p class="mb-0 text-muted">Drink the magical chai, it will ward off sleep they said. 🤷</p>
</li>
<li>
<h6 class="fs-md">Templates layout upload</h6>
<p class="mb-3">1 week ago</p>
<p class="text-muted fst-italic">
Powerful, clean & modern responsive bootstrap 5 admin template. The maximum file size for uploads in this demo :
</p>
<div class="row border border-dashed gx-2 p-2">
<img src="assets/images/small/img-3.jpg" alt="" class="avatar-md rounded">
<img src="assets/images/small/img-5.jpg" alt="" class="avatar-md rounded">
<img src="assets/images/small/img-7.jpg" alt="" class="avatar-md rounded">
<img src="assets/images/small/img-9.jpg" alt="" class="avatar-md rounded">
</div>
<!--end row-->
</li>
<li>
<h6 class="fs-md">04:24 PM</h6>
<p class="mb-0 text-muted">The only time I don't feel sleepy cause it's work out time. I mean walking time. 😹</p>
</li>
<li>
<h6 class="fs-md">06:43 PM</h6>
<p class="mb-0 text-muted">Food my tummy needs, sleep my body needs.👿</p>
</li>
<li>
<h6 class="fs-md">07:36 PM</h6>
<p class="mb-0 text-muted">My tummy's happy time 🍝</p>
</li>
</ul>
</div>
</div>
<!--end card-->
</div>
<!--end tab-pane-->
<div class="tab-pane fade" id="projects" role="tabpanel">
<div class="row">
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-warning-subtle text-warning">Web Design</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Chat App Update</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">2 year Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-primary float-end">80%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
J
</div>
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i>4</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 3</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-primary-subtle text-primary">Mobile App</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">ABC Project Customization</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-medium text-reset">2 month Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-warning float-end">65%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-4.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 25</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 146</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-secondary-subtle text-secondary">Dashboard</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Client - Frank Hook</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">1 year Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-danger float-end">23%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" style="width: 23%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
M
</div>
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i>8</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 98</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-success-subtle text-success">App Development</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Dosix Project</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">11 year Ago</span></p>
<h5 class="fs-xs">Completed <span class="text-success float-end">100%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 12</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 36</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-secondary-subtle text-secondary">Landing Page</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Brand Logo Design</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">10 min Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-primary float-end">68%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
E
</div>
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 13</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 62</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-info-subtle text-info">Web Development</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-dark">Chat App</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-dark">8 hr Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-info float-end">76%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="width: 76%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-1.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
R
</div>
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 36</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 195</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-warning-subtle text-warning">Mobile App</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Project Update</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">48 min Ago</span></p>
<h5 class="fs-xs">Progress <span class="text-info float-end">69%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100" style="width: 69%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-6.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-5.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 87</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 249</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-danger-subtle text-danger">Web Design</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Bsuiness Template - UI/UX design</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">7 month Ago</span></p>
<h5 class="fs-xs">Inprogress <span class="text-danger float-end">10%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-6.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
R
</div>
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 130</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 341</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<div class="flex-grow-1 me-3">
<div class="badge bg-danger-subtle text-danger">Web Design</div>
</div>
<div class="flex-shrink-0 ms-2">
<div class="text-end dropdown">
<a href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a>
<ul class="dropdown-menu dropdown-menu-end mb-0">
<li><a class="dropdown-item" href="#!"><i class="bi bi-pencil-square align-baseline me-1"></i> Edit</a></li>
<li><a class="dropdown-item" href="#!"><i class="bi bi-trash3 align-baseline me-1"></i> Remove</a></li>
</ul>
</div>
</div>
</div>
<h6 class="fs-md text-truncate"><a href="#" class="text-reset">Bsuiness Template - UI/UX design</a></h6>
<p class="text-muted fs-sm text-truncate">Last Update : <span class="fw-semibold text-reset">7 month Ago</span></p>
<h5 class="fs-xs">Completed <span class="text-success float-end">100%</span></h5>
<div class="progress progress-sm">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%; visibility: visible; animation-name: animationProgress;">
</div>
</div>
<div class="d-flex mt-3 align-items-center">
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<div class="avatar-group">
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-6.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-8.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<div class="avatar-title rounded-circle bg-light text-primary">
R
</div>
</div>
</a>
<a href="#!" class="avatar-group-item">
<div class="avatar-xxs">
<img src="assets/images/users/avatar-3.jpg" alt="" class="rounded-circle img-fluid">
</div>
</a>
</div>
</div>
</div>
<div class="flex-shrink-0 ms-2 hstack gap-3">
<span class="text-muted"><i class="bi bi-paperclip align-baseline me-1"></i> 130</span>
<span class="text-muted"><i class="bi bi-chat-right-dots align-baseline me-1"></i> 341</span>
</div>
</div>
</div>
<!-- end card body -->
</div>
<!-- end card -->
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row align-items-center justify-content-between text-center text-sm-start mb-3">
<div class="col-sm">
<div class="text-muted">
Showing <span class="fw-semibold">9</span> of <span class="fw-semibold">11</span> Results
</div>
</div><!--end col-->
<div class="col-sm-auto mt-3 mt-sm-0">
<div class="pagination-wrap hstack gap-2">
<a class="page-item pagination-prev disabled" href="#">
Previous
</a>
<ul class="pagination listjs-pagination mb-0">
<li class="active"><a class="page" href="#" data-i="1" data-page="10">1</a></li>
<li><a class="page" href="#" data-i="2" data-page="10">2</a></li>
</ul>
<a class="page-item pagination-next" href="#">
Next
</a>
</div>
</div><!--end col-->
</div><!--end row-->
</div>
<!--end tab-pane-->
<div class="tab-pane fade" id="friends" role="tabpanel">
<div class="d-flex align-items-center mb-4">
<h5 class="card-title flex-grow-1 mb-0">Friends</h5>
<div>
<a href="pages-contacts.html" class="icon-link">View All <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-2.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Patricia Honda</a></h5>
<p class="text-muted mb-0">Full Stack Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 617 219 6245</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> patriciahonda@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> 2995 Lynn Street Newton, MA 02160</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-3.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">James Lash</a></h5>
<p class="text-muted mb-0">Web Designer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 617 219 6245</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> jameslash@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> 3089 Leroy Lane Pollock, SD 57648</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-4.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Angus Garnsey</a></h5>
<p class="text-muted mb-0">React Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 085 383 2388</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> angusgarnsey@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> 1738 Old Cres Lady Frere 5411</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-5.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-danger p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Matilda Marston</a></h5>
<p class="text-muted mb-0">Shopify Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 082 288 1065</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> matildamarston@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> 2168 Bezuidenhout St Evander 2270</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-6.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Zachary Benjamin</a></h5>
<p class="text-muted mb-0">Shopify Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 348 9730237</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> zacharybenjamin@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> Via Carlo Alberto, 8 22020-Faloppio CO</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<div class="avatar-sm">
<div class="avatar-title fs-lg bg-danger-subtle text-danger rounded">
RC
</div>
</div>
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Ruby Chomley</a></h5>
<p class="text-muted mb-0">Shopify Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 348 9730237</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> rubychomley@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> Via Pasquale Scura, 76 75010-Calciano MT</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<img src="assets/images/users/avatar-7.jpg" alt="" class="avatar-sm rounded">
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Sophia Prendiville</a></h5>
<p class="text-muted mb-0">Angular Developer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 0354 3037376</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> sophiaprendiville@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> 36078-Maglio Di Sopra VI</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<div class="avatar-sm">
<div class="avatar-title fs-lg bg-info-subtle text-info rounded">
SZ
</div>
</div>
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Samantha Zepps</a></h5>
<p class="text-muted mb-0">Project Manager</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 0365 4363346</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> samanthazepps@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> Via del Carmine, 108 36040-Sarego VI</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--end col-->
<div class="col-xxl-4 col-sm-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-end">
<a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-horizontal-rounded"></i></a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Remove</a>
</div>
</div>
<div class="d-flex align-items-center">
<div class="flex-shrink-0 position-relative">
<div class="avatar-sm">
<div class="avatar-title fs-lg bg-warning-subtle text-warning rounded">
XB
</div>
</div>
<span class="position-absolute top-0 start-100 translate-middle badge border border-2 border-white rounded-circle bg-success p-1"><span class="visually-hidden">unread messages</span></span>
</div>
<div class="flex-grow-1 ms-2">
<h5 class="fs-md"><a href="pages-profile.html" class="text-dark">Xavier Bower</a></h5>
<p class="text-muted mb-0">Graphic Designer</p>
</div>
</div>
<div class="mt-4">
<p class="text-muted mb-2"><i class="bi bi-telephone align-baseline me-1"></i> 0486 45 08 27</p>
<p class="text-muted mb-2"><i class="bi bi-envelope align-baseline me-1"></i> xavierbower@dosix.com</p>
<p class="text-muted mb-0"><i class="bi bi-geo-alt align-baseline me-1"></i> Rue Haute 47 8630 Steenkerke</p>
</div>
<div class="d-flex gap-2 pt-4">
<a href="pages-profile.html" class="btn btn-subtle-secondary w-50"><i class="bi bi-person align-baseline me-1"></i> Profile</a>
<button type="button" class="btn btn-primary text-truncate w-50"><i class="bi bi-chat-left-text align-baseline me-1"></i> Contact Us</button>
</div>
</div>
</div>
</div><!--END col-->
</div><!--end row-->
<div class="row align-items-center mb-3">
<div class="col-sm">
<div class="text-muted text-center text-sm-start">
Showing <span class="fw-semibold">9</span> of <span class="fw-semibold">13</span> Results
</div>
</div><!--end col-->
<div class="col-sm-auto mt-3 mt-sm-0">
<div class="pagination-wrap hstack justify-content-center gap-2">
<a class="page-item pagination-prev disabled" href="#">
Previous
</a>
<ul class="pagination listjs-pagination mb-0">
<li class="active"><a class="page" href="#" data-i="1" data-page="10">1</a></li>
<li><a class="page" href="#" data-i="2" data-page="10">2</a></li>
</ul>
<a class="page-item pagination-next" href="#">
Next
</a>
</div>
</div><!--end col-->
</div><!--end row-->
</div>
<!--end tab-pane-->
</div>
</div><!--end col-->
</div><!--end row-->
</div><!-- container-fluid -->
</div><!-- End Page-content -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<script>document.write(new Date().getFullYear())</script> © Dosix.
</div>
<div class="col-sm-6">
<div class="text-sm-end d-none d-sm-block">
Design & Develop by Themesbrand
</div>
</div>
</div>
</div>
</footer>
</div><!-- end main content-->
</div>
<!-- END layout-wrapper -->
<!--start back-to-top-->
<button class="btn btn-dark btn-icon" id="back-to-top">
<i class="bi bi-caret-up fs-3xl"></i>
</button>
<!--end back-to-top-->
<!--preloader-->
<div id="preloader">
<div id="status">
<div class="spinner-border text-primary avatar-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="customizer-setting d-none d-md-block">
<div class="btn btn-info p-2 text-uppercase rounded-end-0 shadow-lg" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
<i class="bi bi-gear mb-1"></i> Customizer
</div>
</div>
<!-- Theme Settings -->
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
<div class="d-flex align-items-center p-3 offcanvas-header border-bottom">
<div class="me-2">
<h5 class="mb-1">Admin Builder</h5>
<p class="text-muted mb-0">Choose your themes & layouts etc.</p>
</div>
<button type="button" class="btn-close ms-auto" id="customizerclose-btn" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div data-simplebar class="h-100">
<div class="p-4">
<h6 class="fs-lg mb-1">Layout</h6>
<p class="text-muted fs-md">Choose your layout</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Vertical</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
<span class="d-flex h-100 flex-column gap-1">
<span class="bg-light d-flex p-1 gap-1 align-items-center">
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
</span>
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Horizontal</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Two Column</h5>
</div>
<!-- end col -->
</div>
<h6 class="mt-4 fs-lg mb-1">Color Scheme</h6>
<p class="text-muted fs-md">Choose Light or Dark Scheme.</p>
<div class="colorscheme-cardradio">
<div class="row g-3">
<div class="col-6">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-light" value="light">
<label class="form-check-label p-0 bg-transparent" for="layout-mode-light">
<img src="assets/images/custom-theme/light-mode.png" alt="" class="img-fluid">
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-6">
<div class="form-check card-radio dark">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-mode-dark" value="dark">
<label class="form-check-label p-0 bg-transparent" for="layout-mode-dark">
<img src="assets/images/custom-theme/dark-mode.png" alt="" class="img-fluid">
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
</div>
</div>
<div id="layout-width">
<h6 class="mt-4 fs-lg mb-1">Layout Width</h6>
<p class="text-muted fs-md">Choose Fluid or Boxed layout.</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-fluid" value="fluid">
<label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Fluid</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-width" id="layout-width-boxed" value="boxed">
<label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-width-boxed">
<span class="d-flex gap-1 h-100 border-start border-end">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Boxed</h5>
</div>
</div>
</div>
<h6 class="mt-4 fs-lg mb-1">Topbar Color</h6>
<p class="text-muted fs-md">Choose Light or Dark Topbar Color.</p>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar" id="topbar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-primary d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
</div>
<div id="sidebar-size">
<h6 class="mt-4 fs-lg mb-1">Sidebar Size</h6>
<p class="text-muted fs-md">Choose a size of Sidebar.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-default" value="lg">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Default</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-compact" value="md">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Compact</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small" value="sm">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Small (Icon View)</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-size" id="sidebar-size-small-hover" value="sm-hover">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small-hover">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1">
<span class="d-block p-1 bg-primary-subtle mb-2"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Small Hover View</h5>
</div>
</div>
</div>
<div id="sidebar-view">
<h6 class="mt-4 fs-lg mb-1">Sidebar View</h6>
<p class="text-muted fs-md">Choose Default or Detached Sidebar view.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-default" value="default">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Default</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-layout-style" id="sidebar-view-detached" value="detached">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
<span class="d-block p-1 bg-primary-subtle rounded me-1"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle ms-auto"></span>
<span class="d-block p-1 pb-0 px-2 bg-primary-subtle"></span>
</span>
<span class="d-flex gap-1 h-100 p-1 px-2">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
</span>
<span class="bg-light d-block p-1 mt-auto px-2"></span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Detached</h5>
</div>
</div>
</div>
<div id="sidebar-color">
<h6 class="mt-4 fs-lg mb-1">Sidebar Color</h6>
<p class="text-muted fs-md">Choose a color of Sidebar.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Light</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient.show">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Dark</h5>
</div>
<div class="col-4">
<button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient" aria-expanded="false" aria-controls="collapseBgGradient">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</button>
<h5 class="fs-sm text-center fw-medium mt-2">Gradient</h5>
</div>
</div>
<!-- end row -->
<div class="collapse" id="collapseBgGradient">
<div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient" value="gradient">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient">
<span class="avatar-title rounded-circle bg-vertical-gradient"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-2" value="gradient-2">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-2">
<span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-3" value="gradient-3">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-3">
<span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar" id="sidebar-color-gradient-4" value="gradient-4">
<label class="form-check-label p-0 avatar-xs rounded-circle" for="sidebar-color-gradient-4">
<span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
</label>
</div>
</div>
</div>
</div>
<div id="sidebar-img">
<h6 class="mt-4 fw-semibold fs-base">Sidebar Images</h6>
<p class="text-muted fs-md">Choose a image of Sidebar.</p>
<div class="d-flex gap-2 flex-wrap img-switch">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-none" value="none">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
<span class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
<i class="ri-close-fill fs-3xl"></i>
</span>
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-01" value="img-1">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
<img src="assets/images/sidebar/img-sm-1.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-02" value="img-2">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
<img src="assets/images/sidebar/img-sm-2.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-03" value="img-3">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
<img src="assets/images/sidebar/img-sm-3.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidebar-image" id="sidebarimg-04" value="img-4">
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
<img src="assets/images/sidebar/img-sm-4.jpg" alt="" class="avatar-md w-auto object-cover">
</label>
</div>
</div>
</div>
<div id="preloader-menu">
<h6 class="mt-4 fw-semibold fs-base">Preloader</h6>
<p class="text-muted fs-md">Choose a preloader.</p>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-custom" value="enable">
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-custom">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
<!-- <div id="preloader"> -->
<span class="d-flex align-items-center justify-content-center">
<span class="spinner-border text-primary avatar-xxs m-auto" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</span>
<!-- </div> -->
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Enable</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-preloader" id="preloader-view-none" value="disable">
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-none">
<span class="d-flex gap-1 h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
<span class="d-block p-1 px-2 bg-primary-subtle rounded mb-2"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
<span class="d-block p-1 px-2 pb-0 bg-primary-subtle"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
<span class="bg-light d-block p-1 mt-auto"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="fs-sm text-center fw-medium mt-2">Disable</h5>
</div>
</div>
</div><!-- end preloader-menu -->
</div>
</div>
</div>
<div class="offcanvas-footer border-top p-3 text-center">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
</div>
<div class="col-6">
<a href="#!" target="_blank" class="btn btn-primary w-100">Buy Now</a>
</div>
</div>
</div>
</div>
<!-- JAVASCRIPT -->
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/js/plugins.js"></script>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
<!-- Mirrored from themesbrand.com/dosix/layouts/pages-profile.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 16 Jul 2024 06:02:58 GMT -->
</html>