Files
CoreGradeWeb/app/Views/tools/index.php
T
2021-09-19 11:55:00 -04:00

5543 lines
392 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->
<head><base href="">
<title>Metronic - the world's #1 selling Bootstrap Admin Theme Ecosystem for HTML, Vue, React, Angular &amp; Laravel by Keenthemes</title>
<meta name="description" content="The most advanced Bootstrap Admin Theme on Themeforest trusted by 94,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue &amp; Laravel versions. Grab your copy now and get life-time updates for free." />
<meta name="keywords" content="Metronic, bootstrap, bootstrap 5, Angular, VueJs, React, Laravel, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Metronic - Bootstrap 5 HTML, VueJS, React, Angular &amp; Laravel Admin Dashboard Theme" />
<meta property="og:url" content="https://www.coregrade.com" />
<meta property="og:site_name" content="CoreGrade | Tools" />
<link rel="canonical" href="www.coregrade.com" />
<link rel="shortcut icon" href="/tassets/media/logos/favicon.ico" />
<!--begin::Fonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Page Vendor Stylesheets(used by this page)-->
<link href="/tassets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Page Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="/tassets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="/tassets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body id="kt_body" class="header-tablet-and-mobile-fixed aside-enabled">
<!--begin::Main-->
<!--begin::Root-->
<div class="d-flex flex-column flex-root">
<!--begin::Page-->
<div class="page d-flex flex-row flex-column-fluid">
<!--begin::Aside-->
<div id="kt_aside" class="aside" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'200px', '300px': '250px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_aside_mobile_toggle">
<!--begin::Aside Toolbarl-->
<div class="aside-toolbar flex-column-auto" id="kt_aside_toolbar">
<!--end::Aside user-->
</div>
<!--end::Aside Toolbarl-->
<!--begin::Aside menu-->
<div class="aside-menu flex-column-fluid">
<!--begin::Aside Menu-->
<div class="hover-scroll-overlay-y px-2 my-5 my-lg-5" id="kt_aside_menu_wrapper" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="{default: '#kt_aside_toolbar, #kt_aside_footer', lg: '#kt_header, #kt_aside_toolbar, #kt_aside_footer'}" data-kt-scroll-wrappers="#kt_aside_menu" data-kt-scroll-offset="5px">
<!--begin::Menu-->
<div class="menu menu-column menu-title-gray-800 menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary menu-arrow-gray-500" id="#kt_aside_menu" data-kt-menu="true">
<div class="menu-item">
<a class="menu-link active" href="#">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/general/gen025.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="2" y="2" width="9" height="9" rx="2" fill="black" />
<rect opacity="0.3" x="13" y="2" width="9" height="9" rx="2" fill="black" />
<rect opacity="0.3" x="13" y="13" width="9" height="9" rx="2" fill="black" />
<rect opacity="0.3" x="2" y="13" width="9" height="9" rx="2" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Default</span>
</a>
</div>
<div class="menu-item">
<div class="menu-content pt-8 pb-2">
<span class="menu-section text-muted text-uppercase fs-8 ls-1">Crafted</span>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/general/gen022.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.2929 2.70711C11.6834 2.31658 12.3166 2.31658 12.7071 2.70711L15.2929 5.29289C15.6834 5.68342 15.6834 6.31658 15.2929 6.70711L12.7071 9.29289C12.3166 9.68342 11.6834 9.68342 11.2929 9.29289L8.70711 6.70711C8.31658 6.31658 8.31658 5.68342 8.70711 5.29289L11.2929 2.70711Z" fill="black" />
<path d="M11.2929 14.7071C11.6834 14.3166 12.3166 14.3166 12.7071 14.7071L15.2929 17.2929C15.6834 17.6834 15.6834 18.3166 15.2929 18.7071L12.7071 21.2929C12.3166 21.6834 11.6834 21.6834 11.2929 21.2929L8.70711 18.7071C8.31658 18.3166 8.31658 17.6834 8.70711 17.2929L11.2929 14.7071Z" fill="black" />
<path opacity="0.3" d="M5.29289 8.70711C5.68342 8.31658 6.31658 8.31658 6.70711 8.70711L9.29289 11.2929C9.68342 11.6834 9.68342 12.3166 9.29289 12.7071L6.70711 15.2929C6.31658 15.6834 5.68342 15.6834 5.29289 15.2929L2.70711 12.7071C2.31658 12.3166 2.31658 11.6834 2.70711 11.2929L5.29289 8.70711Z" fill="black" />
<path opacity="0.3" d="M17.2929 8.70711C17.6834 8.31658 18.3166 8.31658 18.7071 8.70711L21.2929 11.2929C21.6834 11.6834 21.6834 12.3166 21.2929 12.7071L18.7071 15.2929C18.3166 15.6834 17.6834 15.6834 17.2929 15.2929L14.7071 12.7071C14.3166 12.3166 14.3166 11.6834 14.7071 11.2929L17.2929 8.70711Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Pages</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Profile</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Projects</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Campaigns</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Documents</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Connections</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Activity</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Projects</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">My Projects</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View Project</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Targets</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Budget</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Users</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Files</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Activity</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="#">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Settings</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Wizards</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/wizards/horizontal.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Horizontal</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/wizards/vertical.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Vertical</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Search</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/search/horizontal.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Horizontal</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/search/vertical.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Vertical</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Blog</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/blog/home.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Blog Home</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/blog/post.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Blog Post</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Company</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/about.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">About Us</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/pricing.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Pricing</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/contact.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Contact Us</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/team.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Our Team</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/licenses.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Licenses</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/company/sitemap.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Sitemap</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Careers</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/careers/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Careers List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/careers/apply.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Careers Apply</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">FAQ</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/faq/classic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Classic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/pages/faq/extended.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Extended</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 10H13V11C13 11.6 12.6 12 12 12C11.4 12 11 11.6 11 11V10H3C2.4 10 2 10.4 2 11V13H22V11C22 10.4 21.6 10 21 10Z" fill="black" />
<path opacity="0.3" d="M12 12C11.4 12 11 11.6 11 11V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V11C13 11.6 12.6 12 12 12Z" fill="black" />
<path opacity="0.3" d="M18.1 21H5.9C5.4 21 4.9 20.6 4.8 20.1L3 13H21L19.2 20.1C19.1 20.6 18.6 21 18.1 21ZM13 18V15C13 14.4 12.6 14 12 14C11.4 14 11 14.4 11 15V18C11 18.6 11.4 19 12 19C12.6 19 13 18.6 13 18ZM17 18V15C17 14.4 16.6 14 16 14C15.4 14 15 14.4 15 15V18C15 18.6 15.4 19 16 19C16.6 19 17 18.6 17 18ZM9 18V15C9 14.4 8.6 14 8 14C7.4 14 7 14.4 7 15V18C7 18.6 7.4 19 8 19C8.6 19 9 18.6 9 18Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Subscriptions</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/subscriptions/getting-started.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Getting Started</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/subscriptions/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Subscription List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/subscriptions/add.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Add Subscription</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/subscriptions/view.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View Subscription</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 7H2V11H22V7Z" fill="black" />
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Invoice Manager</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View Invoices</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/invoices/view/invoice-1.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Invoice 1</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/invoices/view/invoice-2.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Invoice 2</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/invoices/create.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Create Invoice</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion mb-1">
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/general/gen051.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="black" />
<path d="M14.854 11.321C14.7568 11.2282 14.6388 11.1818 14.4998 11.1818H14.3333V10.2272C14.3333 9.61741 14.1041 9.09378 13.6458 8.65628C13.1875 8.21876 12.639 8 12 8C11.361 8 10.8124 8.21876 10.3541 8.65626C9.89574 9.09378 9.66663 9.61739 9.66663 10.2272V11.1818H9.49999C9.36115 11.1818 9.24306 11.2282 9.14583 11.321C9.0486 11.4138 9 11.5265 9 11.6591V14.5227C9 14.6553 9.04862 14.768 9.14583 14.8609C9.24306 14.9536 9.36115 15 9.49999 15H14.5C14.6389 15 14.7569 14.9536 14.8542 14.8609C14.9513 14.768 15 14.6553 15 14.5227V11.6591C15.0001 11.5265 14.9513 11.4138 14.854 11.321ZM13.3333 11.1818H10.6666V10.2272C10.6666 9.87594 10.7969 9.57597 11.0573 9.32743C11.3177 9.07886 11.6319 8.9546 12 8.9546C12.3681 8.9546 12.6823 9.07884 12.9427 9.32743C13.2031 9.57595 13.3333 9.87594 13.3333 10.2272V11.1818Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">User Management</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div data-kt-menu-trigger="click" class="menu-item menu-accordion mb-1">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Users</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/user-management/users/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Users List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/user-management/users/view.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View User</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Roles</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/user-management/roles/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Roles List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/user-management/roles/view.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View Role</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/user-management/permissions.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Permissions</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion mb-1">
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotune/graphs/gra006.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13 5.91517C15.8 6.41517 18 8.81519 18 11.8152C18 12.5152 17.9 13.2152 17.6 13.9152L20.1 15.3152C20.6 15.6152 21.4 15.4152 21.6 14.8152C21.9 13.9152 22.1 12.9152 22.1 11.8152C22.1 7.01519 18.8 3.11521 14.3 2.01521C13.7 1.91521 13.1 2.31521 13.1 3.01521V5.91517H13Z" fill="black" />
<path opacity="0.3" d="M19.1 17.0152C19.7 17.3152 19.8 18.1152 19.3 18.5152C17.5 20.5152 14.9 21.7152 12 21.7152C9.1 21.7152 6.50001 20.5152 4.70001 18.5152C4.30001 18.0152 4.39999 17.3152 4.89999 17.0152L7.39999 15.6152C8.49999 16.9152 10.2 17.8152 12 17.8152C13.8 17.8152 15.5 17.0152 16.6 15.6152L19.1 17.0152ZM6.39999 13.9151C6.19999 13.2151 6 12.5152 6 11.8152C6 8.81517 8.2 6.41515 11 5.91515V3.01519C11 2.41519 10.4 1.91519 9.79999 2.01519C5.29999 3.01519 2 7.01517 2 11.8152C2 12.8152 2.2 13.8152 2.5 14.8152C2.7 15.4152 3.4 15.7152 4 15.3152L6.39999 13.9151Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">Support Center</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion mb-1">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tickets</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/tickets/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tickets List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/tickets/view.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">View Ticket</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion mb-1">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tutorials</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/tutorials/list.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tutorials List</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/tutorials/post.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tutorial Post</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/faq.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">FAQ</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/licenses.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Licenses</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="../../demo8/dist/apps/support-center/contact.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Contact Us</span>
</a>
</div>
</div>
</div>
</div>
<!--end::Menu-->
</div>
<!--end::Aside Menu-->
</div>
<!--end::Aside menu-->
<!--begin::Footer-->
<div class="aside-footer flex-column-auto py-5" id="kt_aside_footer">
<a href="/blog" class="btn btn-custom btn-primary w-100" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click" title="200+ in-house components and 3rd-party plugins">
<span class="btn-label">CoreGrade Blog</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen005.svg-->
<span class="svg-icon btn-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22ZM15 17C15 16.4 14.6 16 14 16H8C7.4 16 7 16.4 7 17C7 17.6 7.4 18 8 18H14C14.6 18 15 17.6 15 17ZM17 12C17 11.4 16.6 11 16 11H8C7.4 11 7 11.4 7 12C7 12.6 7.4 13 8 13H16C16.6 13 17 12.6 17 12ZM17 7C17 6.4 16.6 6 16 6H8C7.4 6 7 6.4 7 7C7 7.6 7.4 8 8 8H16C16.6 8 17 7.6 17 7Z" fill="black" />
<path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</div>
<!--end::Footer-->
</div>
<!--end::Aside-->
<!--begin::Wrapper-->
<div class="wrapper d-flex flex-column flex-row-fluid" id="kt_wrapper">
<!--begin::Header-->
<div id="kt_header" style="" class="header align-items-stretch">
<!--begin::Brand-->
<div class="header-brand">
<!--begin::Logo-->
<a href="/">
<img alt="CoreGrade" src="/tassets/media/logos/coregrade-logo-1.png" class="h-25px h-lg-25px" />
</a>
<!--end::Logo-->
<!--begin::Aside minimize-->
<div id="kt_aside_toggle" class="btn btn-icon w-auto px-0 btn-active-color-primary aside-minimize" data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body" data-kt-toggle-name="aside-minimize">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr092.svg-->
<span class="svg-icon svg-icon-1 me-n1 minimize-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="8.5" y="11" width="12" height="2" rx="1" fill="black" />
<path d="M10.3687 11.6927L12.1244 10.2297C12.5946 9.83785 12.6268 9.12683 12.194 8.69401C11.8043 8.3043 11.1784 8.28591 10.7664 8.65206L7.84084 11.2526C7.39332 11.6504 7.39332 12.3496 7.84084 12.7474L10.7664 15.3479C11.1784 15.7141 11.8043 15.6957 12.194 15.306C12.6268 14.8732 12.5946 14.1621 12.1244 13.7703L10.3687 12.3073C10.1768 12.1474 10.1768 11.8526 10.3687 11.6927Z" fill="black" />
<path opacity="0.5" d="M16 5V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6C14 5.44772 13.5523 5 13 5H6C5.44771 5 5 5.44772 5 6V18C5 18.5523 5.44771 19 6 19H13C13.5523 19 14 18.5523 14 18C14 17.4477 14.4477 17 15 17C15.5523 17 16 17.4477 16 18V19C16 20.1046 15.1046 21 14 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H14C15.1046 3 16 3.89543 16 5Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<!--begin::Svg Icon | path: icons/duotune/arrows/arr076.svg-->
<span class="svg-icon svg-icon-1 minimize-active">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" width="12" height="2" rx="1" transform="matrix(-1 0 0 1 15.5 11)" fill="black" />
<path d="M13.6313 11.6927L11.8756 10.2297C11.4054 9.83785 11.3732 9.12683 11.806 8.69401C12.1957 8.3043 12.8216 8.28591 13.2336 8.65206L16.1592 11.2526C16.6067 11.6504 16.6067 12.3496 16.1592 12.7474L13.2336 15.3479C12.8216 15.7141 12.1957 15.6957 11.806 15.306C11.3732 14.8732 11.4054 14.1621 11.8756 13.7703L13.6313 12.3073C13.8232 12.1474 13.8232 11.8526 13.6313 11.6927Z" fill="black" />
<path d="M8 5V6C8 6.55228 8.44772 7 9 7C9.55228 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H11C10.4477 19 10 18.5523 10 18C10 17.4477 9.55228 17 9 17C8.44772 17 8 17.4477 8 18V19C8 20.1046 8.89543 21 10 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H10C8.89543 3 8 3.89543 8 5Z" fill="#C4C4C4" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Aside minimize-->
<!--begin::Aside toggle-->
<div class="d-flex align-items-center d-lg-none ms-n3 me-1" title="Show aside menu">
<div class="btn btn-icon btn-active-color-primary w-30px h-30px" id="kt_aside_mobile_toggle">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs015.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 7H3C2.4 7 2 6.6 2 6V4C2 3.4 2.4 3 3 3H21C21.6 3 22 3.4 22 4V6C22 6.6 21.6 7 21 7Z" fill="black" />
<path opacity="0.3" d="M21 14H3C2.4 14 2 13.6 2 13V11C2 10.4 2.4 10 3 10H21C21.6 10 22 10.4 22 11V13C22 13.6 21.6 14 21 14ZM22 20V18C22 17.4 21.6 17 21 17H3C2.4 17 2 17.4 2 18V20C2 20.6 2.4 21 3 21H21C21.6 21 22 20.6 22 20Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Aside toggle-->
</div>
<!--end::Brand-->
<div class="toolbar">
<!--begin::Toolbar-->
<div class="container-fluid py-6 py-lg-0 d-flex flex-column flex-lg-row align-items-lg-stretch justify-content-lg-between">
<!--begin::Page title-->
<div class="page-title d-flex flex-column me-5">
<!--begin::Title-->
<h1 class="d-flex flex-column text-dark fw-bolder fs-3 mb-0">Dashboard</h1>
<!--end::Title-->
<!--begin::Breadcrumb-->
<ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 pt-1">
<!--begin::Item-->
<li class="breadcrumb-item text-muted">
<a href="/" class="text-muted text-hover-primary">Home</a>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item">
<span class="bullet bg-gray-200 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-dark">Tools</li>
<!--end::Item-->
</ul>
<!--end::Breadcrumb-->
</div>
<!--end::Page title-->
<!--begin::Action group-->
<div class="d-flex align-items-center overflow-auto pt-3 pt-lg-0">
</div>
<!--end::Action group-->
</div>
<!--end::Toolbar-->
</div>
</div>
<!--end::Header-->
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
<!--begin::Post-->
<div class="post d-flex flex-column-fluid" id="kt_post">
<!--begin::Container-->
<div id="kt_content_container" class="container-xxl">
<!--begin::Row-->
<div class="row g-5 g-xl-8">
<div class="col-xl-4">
<!--begin::Statistics Widget 5-->
<a href="#" class="card bg-body-white hoverable card-xl-stretch mb-xl-8">
<!--begin::Body-->
<div class="card-body">
<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
<span class="svg-icon svg-icon-primary svg-icon-3x ms-n1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 10H13V11C13 11.6 12.6 12 12 12C11.4 12 11 11.6 11 11V10H3C2.4 10 2 10.4 2 11V13H22V11C22 10.4 21.6 10 21 10Z" fill="black" />
<path opacity="0.3" d="M12 12C11.4 12 11 11.6 11 11V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V11C13 11.6 12.6 12 12 12Z" fill="black" />
<path opacity="0.3" d="M18.1 21H5.9C5.4 21 4.9 20.6 4.8 20.1L3 13H21L19.2 20.1C19.1 20.6 18.6 21 18.1 21ZM13 18V15C13 14.4 12.6 14 12 14C11.4 14 11 14.4 11 15V18C11 18.6 11.4 19 12 19C12.6 19 13 18.6 13 18ZM17 18V15C17 14.4 16.6 14 16 14C15.4 14 15 14.4 15 15V18C15 18.6 15.4 19 16 19C16.6 19 17 18.6 17 18ZM9 18V15C9 14.4 8.6 14 8 14C7.4 14 7 14.4 7 15V18C7 18.6 7.4 19 8 19C8.6 19 9 18.6 9 18Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<div class="text-gray-900 fw-bolder fs-2 mb-2 mt-5">Shopping Cart</div>
<div class="fw-bold text-gray-400">Lands, Houses, Ranchos, Farms</div>
</div>
<!--end::Body-->
</a>
<!--end::Statistics Widget 5-->
</div>
<div class="col-xl-4">
<!--begin::Statistics Widget 5-->
<a href="#" class="card bg-primary hoverable card-xl-stretch mb-xl-8">
<!--begin::Body-->
<div class="card-body">
<!--begin::Svg Icon | path: icons/duotune/general/gen008.svg-->
<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 2H10C10.6 2 11 2.4 11 3V10C11 10.6 10.6 11 10 11H3C2.4 11 2 10.6 2 10V3C2 2.4 2.4 2 3 2Z" fill="black" />
<path opacity="0.3" d="M14 2H21C21.6 2 22 2.4 22 3V10C22 10.6 21.6 11 21 11H14C13.4 11 13 10.6 13 10V3C13 2.4 13.4 2 14 2Z" fill="black" />
<path opacity="0.3" d="M3 13H10C10.6 13 11 13.4 11 14V21C11 21.6 10.6 22 10 22H3C2.4 22 2 21.6 2 21V14C2 13.4 2.4 13 3 13Z" fill="black" />
<path opacity="0.3" d="M14 13H21C21.6 13 22 13.4 22 14V21C22 21.6 21.6 22 21 22H14C13.4 22 13 21.6 13 21V14C13 13.4 13.4 13 14 13Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<div class="text-white fw-bolder fs-2 mb-2 mt-5">Appartments</div>
<div class="fw-bold text-white">Flats, Shared Rooms, Duplex</div>
</div>
<!--end::Body-->
</a>
<!--end::Statistics Widget 5-->
</div>
<div class="col-xl-4">
<!--begin::Statistics Widget 5-->
<a href="#" class="card bg-dark hoverable card-xl-stretch mb-5 mb-xl-8">
<!--begin::Body-->
<div class="card-body">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr070.svg-->
<span class="svg-icon svg-icon-gray-100 svg-icon-3x ms-n1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="8" y="9" width="3" height="10" rx="1.5" fill="black" />
<rect opacity="0.5" x="13" y="5" width="3" height="14" rx="1.5" fill="black" />
<rect x="18" y="11" width="3" height="8" rx="1.5" fill="black" />
<rect x="3" y="13" width="3" height="6" rx="1.5" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<div class="text-gray-100 fw-bolder fs-2 mb-2 mt-5">Sales Stats</div>
<div class="fw-bold text-gray-100">50% Increased for FY20</div>
</div>
<!--end::Body-->
</a>
<!--end::Statistics Widget 5-->
</div>
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row g-5 g-xl-8">
<!--begin::Col-->
<div class="col-xl-4">
<!--begin::List Widget 1-->
<div class="card card-xl-stretch mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0 pt-5">
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder text-dark">Tasks Overview</span>
<span class="text-muted mt-1 fw-bold fs-7">Pending 10 tasks</span>
</h3>
<div class="card-toolbar">
<!--begin::Menu-->
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_613575d731d65">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Status:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select option" data-dropdown-parent="#kt_menu_613575d731d65" data-allow-clear="true">
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="2">In Process</option>
<option value="2">Rejected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Author</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Customer</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked" />
<label class="form-check-label">Enabled</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
<!--end::Menu-->
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-5">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-50px me-5">
<span class="symbol-label bg-light-success">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-2x svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</div>
<!--end::Symbol-->
<!--begin::Text-->
<div class="d-flex flex-column">
<a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Project Briefing</a>
<span class="text-muted fw-bold">Project Manager</span>
</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-50px me-5">
<span class="symbol-label bg-light-warning">
<!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
<span class="svg-icon svg-icon-2x svg-icon-warning">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black" />
<path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</div>
<!--end::Symbol-->
<!--begin::Text-->
<div class="d-flex flex-column">
<a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Concept Design</a>
<span class="text-muted fw-bold">Art Director</span>
</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-50px me-5">
<span class="symbol-label bg-light-primary">
<!--begin::Svg Icon | path: icons/duotune/communication/com012.svg-->
<span class="svg-icon svg-icon-2x svg-icon-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M20 3H4C2.89543 3 2 3.89543 2 5V16C2 17.1046 2.89543 18 4 18H4.5C5.05228 18 5.5 18.4477 5.5 19V21.5052C5.5 22.1441 6.21212 22.5253 6.74376 22.1708L11.4885 19.0077C12.4741 18.3506 13.6321 18 14.8167 18H20C21.1046 18 22 17.1046 22 16V5C22 3.89543 21.1046 3 20 3Z" fill="black" />
<rect x="6" y="12" width="7" height="2" rx="1" fill="black" />
<rect x="6" y="7" width="12" height="2" rx="1" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</div>
<!--end::Symbol-->
<!--begin::Text-->
<div class="d-flex flex-column">
<a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Functional Logics</a>
<span class="text-muted fw-bold">Lead Developer</span>
</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-50px me-5">
<span class="symbol-label bg-light-danger">
<!--begin::Svg Icon | path: icons/duotune/coding/cod008.svg-->
<span class="svg-icon svg-icon-2x svg-icon-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.2166 8.50002L10.5166 7.80007C10.1166 7.40007 10.1166 6.80005 10.5166 6.40005L13.4166 3.50002C15.5166 1.40002 18.9166 1.50005 20.8166 3.90005C22.5166 5.90005 22.2166 8.90007 20.3166 10.8001L17.5166 13.6C17.1166 14 16.5166 14 16.1166 13.6L15.4166 12.9C15.0166 12.5 15.0166 11.9 15.4166 11.5L18.3166 8.6C19.2166 7.7 19.1166 6.30002 18.0166 5.50002C17.2166 4.90002 16.0166 5.10007 15.3166 5.80007L12.4166 8.69997C12.2166 8.89997 11.6166 8.90002 11.2166 8.50002ZM11.2166 15.6L8.51659 18.3001C7.81659 19.0001 6.71658 19.2 5.81658 18.6C4.81658 17.9 4.71659 16.4 5.51659 15.5L8.31658 12.7C8.71658 12.3 8.71658 11.7001 8.31658 11.3001L7.6166 10.6C7.2166 10.2 6.6166 10.2 6.2166 10.6L3.6166 13.2C1.7166 15.1 1.4166 18.1 3.1166 20.1C5.0166 22.4 8.51659 22.5 10.5166 20.5L13.3166 17.7C13.7166 17.3 13.7166 16.7001 13.3166 16.3001L12.6166 15.6C12.3166 15.2 11.6166 15.2 11.2166 15.6Z" fill="black" />
<path opacity="0.3" d="M5.0166 9L2.81659 8.40002C2.31659 8.30002 2.0166 7.79995 2.1166 7.19995L2.31659 5.90002C2.41659 5.20002 3.21659 4.89995 3.81659 5.19995L6.0166 6.40002C6.4166 6.60002 6.6166 7.09998 6.5166 7.59998L6.31659 8.30005C6.11659 8.80005 5.5166 9.1 5.0166 9ZM8.41659 5.69995H8.6166C9.1166 5.69995 9.5166 5.30005 9.5166 4.80005L9.6166 3.09998C9.6166 2.49998 9.2166 2 8.5166 2H7.81659C7.21659 2 6.71659 2.59995 6.91659 3.19995L7.31659 4.90002C7.41659 5.40002 7.91659 5.69995 8.41659 5.69995ZM14.6166 18.2L15.1166 21.3C15.2166 21.8 15.7166 22.2 16.2166 22L17.6166 21.6C18.1166 21.4 18.4166 20.8 18.1166 20.3L16.7166 17.5C16.5166 17.1 16.1166 16.9 15.7166 17L15.2166 17.1C14.8166 17.3 14.5166 17.7 14.6166 18.2ZM18.4166 16.3L19.8166 17.2C20.2166 17.5 20.8166 17.3 21.0166 16.8L21.3166 15.9C21.5166 15.4 21.1166 14.8 20.5166 14.8H18.8166C18.0166 14.8 17.7166 15.9 18.4166 16.3Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</div>
<!--end::Symbol-->
<!--begin::Text-->
<div class="d-flex flex-column">
<a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Development</a>
<span class="text-muted fw-bold">DevOps</span>
</div>
<!--end::Text-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<!--begin::Symbol-->
<div class="symbol symbol-50px me-5">
<span class="symbol-label bg-light-info">
<!--begin::Svg Icon | path: icons/duotune/general/gen049.svg-->
<span class="svg-icon svg-icon-2x svg-icon-info">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="black" />
<path d="M12.0006 11.1542C13.1434 11.1542 14.0777 10.22 14.0777 9.0771C14.0777 7.93424 13.1434 7 12.0006 7C10.8577 7 9.92348 7.93424 9.92348 9.0771C9.92348 10.22 10.8577 11.1542 12.0006 11.1542Z" fill="black" />
<path d="M15.5652 13.814C15.5108 13.6779 15.4382 13.551 15.3566 13.4331C14.9393 12.8163 14.2954 12.4081 13.5697 12.3083C13.479 12.2993 13.3793 12.3174 13.3067 12.3718C12.9257 12.653 12.4722 12.7981 12.0006 12.7981C11.5289 12.7981 11.0754 12.653 10.6944 12.3718C10.6219 12.3174 10.5221 12.2902 10.4314 12.3083C9.70578 12.4081 9.05272 12.8163 8.64456 13.4331C8.56293 13.551 8.49036 13.687 8.43595 13.814C8.40875 13.8684 8.41781 13.9319 8.44502 13.9864C8.51759 14.1133 8.60828 14.2403 8.68991 14.3492C8.81689 14.5215 8.95295 14.6757 9.10715 14.8208C9.23413 14.9478 9.37925 15.0657 9.52439 15.1836C10.2409 15.7188 11.1026 15.9999 11.9915 15.9999C12.8804 15.9999 13.7421 15.7188 14.4586 15.1836C14.6038 15.0748 14.7489 14.9478 14.8759 14.8208C15.021 14.6757 15.1661 14.5215 15.2931 14.3492C15.3838 14.2312 15.4655 14.1133 15.538 13.9864C15.5833 13.9319 15.5924 13.8684 15.5652 13.814Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</div>
<!--end::Symbol-->
<!--begin::Text-->
<div class="d-flex flex-column">
<a href="#" class="text-dark text-hover-primary fs-6 fw-bolder">Testing</a>
<span class="text-muted fw-bold">QA Managers</span>
</div>
<!--end::Text-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::List Widget 1-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-8">
<!--begin::Tables Widget 5-->
<div class="card card-xl-stretch mb-5 mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0 pt-5">
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder fs-3 mb-1">Latest Products</span>
<span class="text-muted mt-1 fw-bold fs-7">More than 400 new products</span>
</h3>
<div class="card-toolbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-dark active fw-bolder px-4 me-1" data-bs-toggle="tab" href="#kt_table_widget_5_tab_1">Month</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-dark fw-bolder px-4 me-1" data-bs-toggle="tab" href="#kt_table_widget_5_tab_2">Week</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-dark fw-bolder px-4" data-bs-toggle="tab" href="#kt_table_widget_5_tab_3">Day</a>
</li>
</ul>
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body py-3">
<div class="tab-content">
<!--begin::Tap pane-->
<div class="tab-pane fade show active" id="kt_table_widget_5_tab_1">
<!--begin::Table container-->
<div class="table-responsive">
<!--begin::Table-->
<table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4">
<!--begin::Table head-->
<thead>
<tr class="border-0">
<th class="p-0 w-50px"></th>
<th class="p-0 min-w-150px"></th>
<th class="p-0 min-w-140px"></th>
<th class="p-0 min-w-110px"></th>
<th class="p-0 min-w-50px"></th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/plurk.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Brad Simmons</a>
<span class="text-muted fw-bold d-block">Movie Creator</span>
</td>
<td class="text-end text-muted fw-bold">React, HTML</td>
<td class="text-end">
<span class="badge badge-light-success">Approved</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/telegram.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Popular Authors</a>
<span class="text-muted fw-bold d-block">Most Successful</span>
</td>
<td class="text-end text-muted fw-bold">Python, MySQL</td>
<td class="text-end">
<span class="badge badge-light-warning">In Progress</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/vimeo.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">New Users</a>
<span class="text-muted fw-bold d-block">Awesome Users</span>
</td>
<td class="text-end text-muted fw-bold">Laravel,Metronic</td>
<td class="text-end">
<span class="badge badge-light-primary">Success</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/bebo.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Active Customers</a>
<span class="text-muted fw-bold d-block">Movie Creator</span>
</td>
<td class="text-end text-muted fw-bold">AngularJS, C#</td>
<td class="text-end">
<span class="badge badge-light-danger">Rejected</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/kickstarter.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Bestseller Theme</a>
<span class="text-muted fw-bold d-block">Best Customers</span>
</td>
<td class="text-end text-muted fw-bold">ReactJS, Ruby</td>
<td class="text-end">
<span class="badge badge-light-warning">In Progress</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
</tbody>
<!--end::Table body-->
</table>
</div>
<!--end::Table-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_table_widget_5_tab_2">
<!--begin::Table container-->
<div class="table-responsive">
<!--begin::Table-->
<table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4">
<!--begin::Table head-->
<thead>
<tr class="border-0">
<th class="p-0 w-50px"></th>
<th class="p-0 min-w-150px"></th>
<th class="p-0 min-w-140px"></th>
<th class="p-0 min-w-110px"></th>
<th class="p-0 min-w-50px"></th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/plurk.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Brad Simmons</a>
<span class="text-muted fw-bold d-block">Movie Creator</span>
</td>
<td class="text-end text-muted fw-bold">React, HTML</td>
<td class="text-end">
<span class="badge badge-light-success">Approved</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/telegram.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Popular Authors</a>
<span class="text-muted fw-bold d-block">Most Successful</span>
</td>
<td class="text-end text-muted fw-bold">Python, MySQL</td>
<td class="text-end">
<span class="badge badge-light-warning">In Progress</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/bebo.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Active Customers</a>
<span class="text-muted fw-bold d-block">Movie Creator</span>
</td>
<td class="text-end text-muted fw-bold">AngularJS, C#</td>
<td class="text-end">
<span class="badge badge-light-danger">Rejected</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
</tbody>
<!--end::Table body-->
</table>
</div>
<!--end::Table-->
</div>
<!--end::Tap pane-->
<!--begin::Tap pane-->
<div class="tab-pane fade" id="kt_table_widget_5_tab_3">
<!--begin::Table container-->
<div class="table-responsive">
<!--begin::Table-->
<table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4">
<!--begin::Table head-->
<thead>
<tr class="border-0">
<th class="p-0 w-50px"></th>
<th class="p-0 min-w-150px"></th>
<th class="p-0 min-w-140px"></th>
<th class="p-0 min-w-110px"></th>
<th class="p-0 min-w-50px"></th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/kickstarter.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Bestseller Theme</a>
<span class="text-muted fw-bold d-block">Best Customers</span>
</td>
<td class="text-end text-muted fw-bold">ReactJS, Ruby</td>
<td class="text-end">
<span class="badge badge-light-warning">In Progress</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/bebo.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Active Customers</a>
<span class="text-muted fw-bold d-block">Movie Creator</span>
</td>
<td class="text-end text-muted fw-bold">AngularJS, C#</td>
<td class="text-end">
<span class="badge badge-light-danger">Rejected</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/vimeo.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">New Users</a>
<span class="text-muted fw-bold d-block">Awesome Users</span>
</td>
<td class="text-end text-muted fw-bold">Laravel,Metronic</td>
<td class="text-end">
<span class="badge badge-light-primary">Success</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
<tr>
<td>
<div class="symbol symbol-45px me-2">
<span class="symbol-label">
<img src="/tassets/media/svg/brand-logos/telegram.svg" class="h-50 align-self-center" alt="" />
</span>
</div>
</td>
<td>
<a href="#" class="text-dark fw-bolder text-hover-primary mb-1 fs-6">Popular Authors</a>
<span class="text-muted fw-bold d-block">Most Successful</span>
</td>
<td class="text-end text-muted fw-bold">Python, MySQL</td>
<td class="text-end">
<span class="badge badge-light-warning">In Progress</span>
</td>
<td class="text-end">
<a href="#" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</a>
</td>
</tr>
</tbody>
<!--end::Table body-->
</table>
</div>
<!--end::Table-->
</div>
<!--end::Tap pane-->
</div>
</div>
<!--end::Body-->
</div>
<!--end::Tables Widget 5-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row g-5 g-xl-8">
<div class="col-xl-4">
<!--begin::List Widget 3-->
<div class="card card-xl-stretch mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0">
<h3 class="card-title fw-bolder text-dark">Todo</h3>
<div class="card-toolbar">
<!--begin::Menu-->
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 3-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3" data-kt-menu="true">
<!--begin::Heading-->
<div class="menu-item px-3">
<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
</div>
<!--end::Heading-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Create Invoice</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link flex-stack px-3">Create Payment
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Generate Bill</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
<a href="#" class="menu-link px-3">
<span class="menu-title">Subscription</span>
<span class="menu-arrow"></span>
</a>
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Plans</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Billing</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Statements</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator my-2"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3">
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
<!--end::Input-->
<!--end::Label-->
<span class="form-check-label text-muted fs-6">Recuring</span>
<!--end::Label-->
</label>
<!--end::Switch-->
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3 my-1">
<a href="#" class="menu-link px-3">Settings</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu 3-->
<!--end::Menu-->
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-2">
<!--begin::Item-->
<div class="d-flex align-items-center mb-8">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-success"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">Create FireStone Logo</a>
<span class="text-muted fw-bold d-block">Due in 2 Days</span>
</div>
<!--end::Description-->
<span class="badge badge-light-success fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-8">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-primary"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">Stakeholder Meeting</a>
<span class="text-muted fw-bold d-block">Due in 3 Days</span>
</div>
<!--end::Description-->
<span class="badge badge-light-primary fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-8">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-warning"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">Scoping &amp; Estimations</a>
<span class="text-muted fw-bold d-block">Due in 5 Days</span>
</div>
<!--end::Description-->
<span class="badge badge-light-warning fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-8">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-primary"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">KPI App Showcase</a>
<span class="text-muted fw-bold d-block">Due in 2 Days</span>
</div>
<!--end::Description-->
<span class="badge badge-light-primary fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-8">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-danger"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">Project Meeting</a>
<span class="text-muted fw-bold d-block">Due in 12 Days</span>
</div>
<!--end::Description-->
<span class="badge badge-light-danger fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<!--begin::Bullet-->
<span class="bullet bullet-vertical h-40px bg-success"></span>
<!--end::Bullet-->
<!--begin::Checkbox-->
<div class="form-check form-check-custom form-check-solid mx-5">
<input class="form-check-input" type="checkbox" value="" />
</div>
<!--end::Checkbox-->
<!--begin::Description-->
<div class="flex-grow-1">
<a href="#" class="text-gray-800 text-hover-primary fw-bolder fs-6">Customers Update</a>
<span class="text-muted fw-bold d-block">Due in 1 week</span>
</div>
<!--end::Description-->
<span class="badge badge-light-success fs-8 fw-bolder">New</span>
</div>
<!--end:Item-->
</div>
<!--end::Body-->
</div>
<!--end:List Widget 3-->
</div>
<div class="col-xl-8">
<!--begin::Charts Widget 1-->
<div class="card card-xl-stretch mb-5 mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0 pt-5">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bolder fs-3 mb-1">Recent Statistics</span>
<span class="text-muted fw-bold fs-7">More than 400 new members</span>
</h3>
<!--end::Title-->
<!--begin::Toolbar-->
<div class="card-toolbar">
<!--begin::Menu-->
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_613575d7347d3">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Status:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select option" data-dropdown-parent="#kt_menu_613575d7347d3" data-allow-clear="true">
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="2">In Process</option>
<option value="2">Rejected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Author</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Customer</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked" />
<label class="form-check-label">Enabled</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
<!--end::Menu-->
</div>
<!--end::Toolbar-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<!--begin::Chart-->
<div id="kt_charts_widget_1_chart" style="height: 350px"></div>
<!--end::Chart-->
</div>
<!--end::Body-->
</div>
<!--end::Charts Widget 1-->
</div>
</div>
<!--end::Row-->
<!--begin::Row-->
<div class="row g-5 g-xl-8">
<div class="col-xl-6">
<!--begin::List Widget 7-->
<div class="card card-xl-stretch mb-xl-8">
<!--begin::Header-->
<div class="card-header align-items-center border-0 mt-4">
<h3 class="card-title align-items-start flex-column">
<span class="fw-bolder text-dark">Latest Media</span>
<span class="text-muted mt-1 fw-bold fs-7">Articles and publications</span>
</h3>
<div class="card-toolbar">
<!--begin::Menu-->
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_613575d734e08">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Status:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select option" data-dropdown-parent="#kt_menu_613575d734e08" data-allow-clear="true">
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="2">In Process</option>
<option value="2">Rejected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Author</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Customer</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked" />
<label class="form-check-label">Enabled</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
<!--end::Menu-->
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-3">
<!--begin::Item-->
<div class="d-flex align-items-sm-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('assets/media/stock/600x400/img-20.jpg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="d-flex flex-row-fluid flex-wrap align-items-center">
<div class="flex-grow-1 me-2">
<a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-6">Cup &amp; Green</a>
<span class="text-muted fw-bold d-block pt-1">Size: 87KB</span>
</div>
<span class="badge badge-light-success fs-8 fw-bolder my-2">Approved</span>
</div>
<!--end::Title-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-sm-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('assets/media/stock/600x400/img-19.jpg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="d-flex flex-row-fluid flex-wrap align-items-center">
<div class="flex-grow-1 me-2">
<a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-6">Yellow Background</a>
<span class="text-muted fw-bold d-block pt-1">Size: 1.2MB</span>
</div>
<span class="badge badge-light-warning fs-8 fw-bolder my-2">In Progress</span>
</div>
<!--end::Title-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-sm-center mb-7">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('assets/media/stock/600x400/img-25.jpg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="d-flex flex-row-fluid flex-wrap align-items-center">
<div class="flex-grow-1 me-2">
<a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-6">Nike &amp; Blue</a>
<span class="text-muted fw-bold d-block pt-1">Size: 87KB</span>
</div>
<span class="badge badge-light-success fs-8 fw-bolder my-2">Success</span>
</div>
<!--end::Title-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-sm-center">
<!--begin::Symbol-->
<div class="symbol symbol-60px symbol-2by3 me-4">
<div class="symbol-label" style="background-image: url('assets/media/stock/600x400/img-24.jpg')"></div>
</div>
<!--end::Symbol-->
<!--begin::Title-->
<div class="d-flex flex-row-fluid flex-wrap align-items-center">
<div class="flex-grow-1 me-2">
<a href="#" class="text-gray-800 fw-bolder text-hover-primary fs-6">Red Boots</a>
<span class="text-muted fw-bold d-block pt-1">Size: 345KB</span>
</div>
<span class="badge badge-light-danger fs-8 fw-bolder my-2">Rejected</span>
</div>
<!--end::Title-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::List Widget 7-->
</div>
<div class="col-xl-6">
<!--begin::List Widget 6-->
<div class="card card-xl-stretch mb-5 mb-xl-8">
<!--begin::Header-->
<div class="card-header border-0">
<h3 class="card-title fw-bolder text-dark">Notifications</h3>
<div class="card-toolbar">
<!--begin::Menu-->
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</button>
<!--begin::Menu 3-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3" data-kt-menu="true">
<!--begin::Heading-->
<div class="menu-item px-3">
<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
</div>
<!--end::Heading-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Create Invoice</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link flex-stack px-3">Create Payment
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></i></a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Generate Bill</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
<a href="#" class="menu-link px-3">
<span class="menu-title">Subscription</span>
<span class="menu-arrow"></span>
</a>
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Plans</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Billing</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3">Statements</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator my-2"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3">
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<!--begin::Input-->
<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
<!--end::Input-->
<!--end::Label-->
<span class="form-check-label text-muted fs-6">Recuring</span>
<!--end::Label-->
</label>
<!--end::Switch-->
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3 my-1">
<a href="#" class="menu-link px-3">Settings</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu 3-->
<!--end::Menu-->
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body pt-0">
<!--begin::Item-->
<div class="d-flex align-items-center bg-light-warning rounded p-5 mb-7">
<!--begin::Icon-->
<span class="svg-icon svg-icon-warning me-5">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Icon-->
<!--begin::Title-->
<div class="flex-grow-1 me-2">
<a href="#" class="fw-bolder text-gray-800 text-hover-primary fs-6">Group lunch celebration</a>
<span class="text-muted fw-bold d-block">Due in 2 Days</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span class="fw-bolder text-warning py-1">+28%</span>
<!--end::Lable-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center bg-light-success rounded p-5 mb-7">
<!--begin::Icon-->
<span class="svg-icon svg-icon-success me-5">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Icon-->
<!--begin::Title-->
<div class="flex-grow-1 me-2">
<a href="#" class="fw-bolder text-gray-800 text-hover-primary fs-6">Navigation optimization</a>
<span class="text-muted fw-bold d-block">Due in 2 Days</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span class="fw-bolder text-success py-1">+50%</span>
<!--end::Lable-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center bg-light-danger rounded p-5 mb-7">
<!--begin::Icon-->
<span class="svg-icon svg-icon-danger me-5">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Icon-->
<!--begin::Title-->
<div class="flex-grow-1 me-2">
<a href="#" class="fw-bolder text-gray-800 text-hover-primary fs-6">Rebrand strategy planning</a>
<span class="text-muted fw-bold d-block">Due in 5 Days</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span class="fw-bolder text-danger py-1">-27%</span>
<!--end::Lable-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center bg-light-info rounded p-5">
<!--begin::Icon-->
<span class="svg-icon svg-icon-info me-5">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Icon-->
<!--begin::Title-->
<div class="flex-grow-1 me-2">
<a href="#" class="fw-bolder text-gray-800 text-hover-primary fs-6">Product goals strategy</a>
<span class="text-muted fw-bold d-block">Due in 7 Days</span>
</div>
<!--end::Title-->
<!--begin::Lable-->
<span class="fw-bolder text-info py-1">+8%</span>
<!--end::Lable-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::List Widget 6-->
</div>
</div>
<!--end::Row-->
</div>
<!--end::Container-->
</div>
<!--end::Post-->
</div>
<!--end::Content-->
<!--begin::Footer-->
<div class="footer py-4 d-flex flex-lg-column" id="kt_footer">
<!--begin::Container-->
<div class="container-fluid d-flex flex-column flex-md-row align-items-center justify-content-between">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<span class="text-muted fw-bold me-1">2018 - <?=date("Y")?>©</span>
<a href="https://www.coregrade.com" target="_blank" class="text-gray-800 text-hover-primary">CoreGrade</a>
</div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-bold order-1">
<li class="menu-item">
<a href="https://coregrade.com" target="_blank" class="menu-link px-2">About</a>
</li>
<li class="menu-item">
<a href="https://coregrade.com/support" target="_blank" class="menu-link px-2">Support</a>
</li>
</ul>
<!--end::Menu-->
</div>
<!--end::Container-->
</div>
<!--end::Footer-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::Root-->
<!--begin::Drawers-->
<!--begin::Activities drawer-->
<div id="kt_activities" class="bg-body" data-kt-drawer="true" data-kt-drawer-name="activities" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'lg': '900px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_activities_toggle" data-kt-drawer-close="#kt_activities_close">
<div class="card shadow-none rounded-0">
<!--begin::Header-->
<div class="card-header" id="kt_activities_header">
<h3 class="card-title fw-bolder text-dark">Activity Logs</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="kt_activities_close">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</button>
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body position-relative" id="kt_activities_body">
<!--begin::Content-->
<div id="kt_activities_scroll" class="position-relative scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_activities_body" data-kt-scroll-dependencies="#kt_activities_header, #kt_activities_footer" data-kt-scroll-offset="5px">
<!--begin::Timeline items-->
<div class="timeline">
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px me-4">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/communication/com003.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M2 4V16C2 16.6 2.4 17 3 17H13L16.6 20.6C17.1 21.1 18 20.8 18 20V17H21C21.6 17 22 16.6 22 16V4C22 3.4 21.6 3 21 3H3C2.4 3 2 3.4 2 4Z" fill="black" />
<path d="M18 9H6C5.4 9 5 8.6 5 8C5 7.4 5.4 7 6 7H18C18.6 7 19 7.4 19 8C19 8.6 18.6 9 18 9ZM16 12C16 11.4 15.6 11 15 11H6C5.4 11 5 11.4 5 12C5 12.6 5.4 13 6 13H15C15.6 13 16 12.6 16 12Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">There are 2 new tasks for you in “AirPlus Mobile APp” project:</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Added at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Nina Nilson">
<img src="/tassets/media/avatars/150-11.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
<!--begin::Timeline details-->
<div class="overflow-auto pb-5">
<!--begin::Record-->
<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5">
<!--begin::Title-->
<a href="#" class="fs-5 text-dark text-hover-primary fw-bold w-375px min-w-200px">Meeting with customer</a>
<!--end::Title-->
<!--begin::Label-->
<div class="min-w-175px pe-2">
<span class="badge badge-light text-muted">Application Design</span>
</div>
<!--end::Label-->
<!--begin::Users-->
<div class="symbol-group symbol-hover flex-nowrap flex-grow-1 min-w-100px pe-2">
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px">
<img src="/tassets/media/avatars/150-3.jpg" alt="img" />
</div>
<!--end::User-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px">
<img src="/tassets/media/avatars/150-11.jpg" alt="img" />
</div>
<!--end::User-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px">
<div class="symbol-label fs-8 fw-bold bg-primary text-inverse-primary">A</div>
</div>
<!--end::User-->
</div>
<!--end::Users-->
<!--begin::Progress-->
<div class="min-w-125px pe-2">
<span class="badge badge-light-primary">In Progress</span>
</div>
<!--end::Progress-->
<!--begin::Action-->
<a href="#" class="btn btn-sm btn-light btn-active-light-primary">View</a>
<!--end::Action-->
</div>
<!--end::Record-->
<!--begin::Record-->
<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-0">
<!--begin::Title-->
<a href="#" class="fs-5 text-dark text-hover-primary fw-bold w-375px min-w-200px">Project Delivery Preparation</a>
<!--end::Title-->
<!--begin::Label-->
<div class="min-w-175px">
<span class="badge badge-light text-muted">CRM System Development</span>
</div>
<!--end::Label-->
<!--begin::Users-->
<div class="symbol-group symbol-hover flex-nowrap flex-grow-1 min-w-100px">
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px">
<img src="/tassets/media/avatars/150-5.jpg" alt="img" />
</div>
<!--end::User-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px">
<div class="symbol-label fs-8 fw-bold bg-success text-inverse-primary">B</div>
</div>
<!--end::User-->
</div>
<!--end::Users-->
<!--begin::Progress-->
<div class="min-w-125px">
<span class="badge badge-light-success">Completed</span>
</div>
<!--end::Progress-->
<!--begin::Action-->
<a href="#" class="btn btn-sm btn-light btn-active-light-primary">View</a>
<!--end::Action-->
</div>
<!--end::Record-->
</div>
<!--end::Timeline details-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/communication/com009.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M5.78001 21.115L3.28001 21.949C3.10897 22.0059 2.92548 22.0141 2.75004 21.9727C2.57461 21.9312 2.41416 21.8418 2.28669 21.7144C2.15923 21.5869 2.06975 21.4264 2.0283 21.251C1.98685 21.0755 1.99507 20.892 2.05201 20.7209L2.886 18.2209L7.22801 13.879L10.128 16.774L5.78001 21.115Z" fill="black" />
<path d="M21.7 8.08899L15.911 2.30005C15.8161 2.2049 15.7033 2.12939 15.5792 2.07788C15.455 2.02637 15.3219 1.99988 15.1875 1.99988C15.0531 1.99988 14.92 2.02637 14.7958 2.07788C14.6717 2.12939 14.5589 2.2049 14.464 2.30005L13.74 3.02295C13.548 3.21498 13.4402 3.4754 13.4402 3.74695C13.4402 4.01849 13.548 4.27892 13.74 4.47095L14.464 5.19397L11.303 8.35498C10.1615 7.80702 8.87825 7.62639 7.62985 7.83789C6.38145 8.04939 5.2293 8.64265 4.332 9.53601C4.14026 9.72817 4.03256 9.98855 4.03256 10.26C4.03256 10.5315 4.14026 10.7918 4.332 10.984L13.016 19.667C13.208 19.859 13.4684 19.9668 13.74 19.9668C14.0115 19.9668 14.272 19.859 14.464 19.667C15.3575 18.77 15.9509 17.618 16.1624 16.3698C16.374 15.1215 16.1932 13.8383 15.645 12.697L18.806 9.53601L19.529 10.26C19.721 10.452 19.9814 10.5598 20.253 10.5598C20.5245 10.5598 20.785 10.452 20.977 10.26L21.7 9.53601C21.7952 9.44108 21.8706 9.32825 21.9221 9.2041C21.9737 9.07995 22.0002 8.94691 22.0002 8.8125C22.0002 8.67809 21.9737 8.54505 21.9221 8.4209C21.8706 8.29675 21.7952 8.18392 21.7 8.08899Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n2">
<!--begin::Timeline heading-->
<div class="overflow-auto pe-3">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">Invitation for crafting engaging designs that speak human workshop</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Sent at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Alan Nilson">
<img src="/tassets/media/avatars/150-2.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/coding/cod008.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M11.2166 8.50002L10.5166 7.80007C10.1166 7.40007 10.1166 6.80005 10.5166 6.40005L13.4166 3.50002C15.5166 1.40002 18.9166 1.50005 20.8166 3.90005C22.5166 5.90005 22.2166 8.90007 20.3166 10.8001L17.5166 13.6C17.1166 14 16.5166 14 16.1166 13.6L15.4166 12.9C15.0166 12.5 15.0166 11.9 15.4166 11.5L18.3166 8.6C19.2166 7.7 19.1166 6.30002 18.0166 5.50002C17.2166 4.90002 16.0166 5.10007 15.3166 5.80007L12.4166 8.69997C12.2166 8.89997 11.6166 8.90002 11.2166 8.50002ZM11.2166 15.6L8.51659 18.3001C7.81659 19.0001 6.71658 19.2 5.81658 18.6C4.81658 17.9 4.71659 16.4 5.51659 15.5L8.31658 12.7C8.71658 12.3 8.71658 11.7001 8.31658 11.3001L7.6166 10.6C7.2166 10.2 6.6166 10.2 6.2166 10.6L3.6166 13.2C1.7166 15.1 1.4166 18.1 3.1166 20.1C5.0166 22.4 8.51659 22.5 10.5166 20.5L13.3166 17.7C13.7166 17.3 13.7166 16.7001 13.3166 16.3001L12.6166 15.6C12.3166 15.2 11.6166 15.2 11.2166 15.6Z" fill="black" />
<path opacity="0.3" d="M5.0166 9L2.81659 8.40002C2.31659 8.30002 2.0166 7.79995 2.1166 7.19995L2.31659 5.90002C2.41659 5.20002 3.21659 4.89995 3.81659 5.19995L6.0166 6.40002C6.4166 6.60002 6.6166 7.09998 6.5166 7.59998L6.31659 8.30005C6.11659 8.80005 5.5166 9.1 5.0166 9ZM8.41659 5.69995H8.6166C9.1166 5.69995 9.5166 5.30005 9.5166 4.80005L9.6166 3.09998C9.6166 2.49998 9.2166 2 8.5166 2H7.81659C7.21659 2 6.71659 2.59995 6.91659 3.19995L7.31659 4.90002C7.41659 5.40002 7.91659 5.69995 8.41659 5.69995ZM14.6166 18.2L15.1166 21.3C15.2166 21.8 15.7166 22.2 16.2166 22L17.6166 21.6C18.1166 21.4 18.4166 20.8 18.1166 20.3L16.7166 17.5C16.5166 17.1 16.1166 16.9 15.7166 17L15.2166 17.1C14.8166 17.3 14.5166 17.7 14.6166 18.2ZM18.4166 16.3L19.8166 17.2C20.2166 17.5 20.8166 17.3 21.0166 16.8L21.3166 15.9C21.5166 15.4 21.1166 14.8 20.5166 14.8H18.8166C18.0166 14.8 17.7166 15.9 18.4166 16.3Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="mb-5 pe-3">
<!--begin::Title-->
<a href="#" class="fs-5 fw-bold text-gray-800 text-hover-primary mb-2">3 New Incoming Project Files:</a>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Sent at 10:30 PM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Jan Hummer">
<img src="/tassets/media/avatars/150-6.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
<!--begin::Timeline details-->
<div class="overflow-auto pb-5">
<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-700px p-5">
<!--begin::Item-->
<div class="d-flex flex-aligns-center pe-10 pe-lg-20">
<!--begin::Icon-->
<img alt="" class="w-30px me-3" src="/tassets/media/svg/files/pdf.svg" />
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-1 fw-bold">
<!--begin::Desc-->
<a href="#" class="fs-6 text-hover-primary fw-bolder">Finance KPI App Guidelines</a>
<!--end::Desc-->
<!--begin::Number-->
<div class="text-gray-400">1.9mb</div>
<!--end::Number-->
</div>
<!--begin::Info-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex flex-aligns-center pe-10 pe-lg-20">
<!--begin::Icon-->
<img alt="" class="w-30px me-3" src="/tassets/media/svg/files/doc.svg" />
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-1 fw-bold">
<!--begin::Desc-->
<a href="#" class="fs-6 text-hover-primary fw-bolder">Client UAT Testing Results</a>
<!--end::Desc-->
<!--begin::Number-->
<div class="text-gray-400">18kb</div>
<!--end::Number-->
</div>
<!--end::Info-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex flex-aligns-center">
<!--begin::Icon-->
<img alt="" class="w-30px me-3" src="/tassets/media/svg/files/css.svg" />
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-1 fw-bold">
<!--begin::Desc-->
<a href="#" class="fs-6 text-hover-primary fw-bolder">Finance Reports</a>
<!--end::Desc-->
<!--begin::Number-->
<div class="text-gray-400">20mb</div>
<!--end::Number-->
</div>
<!--end::Icon-->
</div>
<!--end::Item-->
</div>
</div>
<!--end::Timeline details-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs027.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.25 18.525L13.05 21.825C12.35 22.125 11.65 22.125 10.95 21.825L2.75 18.525C1.75 18.125 1.75 16.725 2.75 16.325L4.04999 15.825L10.25 18.325C10.85 18.525 11.45 18.625 12.05 18.625C12.65 18.625 13.25 18.525 13.85 18.325L20.05 15.825L21.35 16.325C22.35 16.725 22.35 18.125 21.25 18.525ZM13.05 16.425L21.25 13.125C22.25 12.725 22.25 11.325 21.25 10.925L13.05 7.62502C12.35 7.32502 11.65 7.32502 10.95 7.62502L2.75 10.925C1.75 11.325 1.75 12.725 2.75 13.125L10.95 16.425C11.65 16.725 12.45 16.725 13.05 16.425Z" fill="black" />
<path d="M11.05 11.025L2.84998 7.725C1.84998 7.325 1.84998 5.925 2.84998 5.525L11.05 2.225C11.75 1.925 12.45 1.925 13.15 2.225L21.35 5.525C22.35 5.925 22.35 7.325 21.35 7.725L13.05 11.025C12.45 11.325 11.65 11.325 11.05 11.025Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">Task
<a href="#" class="text-primary fw-bolder me-1">#45890</a>merged with
<a href="#" class="text-primary fw-bolder me-1">#45890</a>in “Ads Pro Admin Dashboard project:</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Initiated at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Nina Nilson">
<img src="/tassets/media/avatars/150-11.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black" />
<path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">3 new application design concepts added:</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Created at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Marcus Dotson">
<img src="/tassets/media/avatars/150-3.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
<!--begin::Timeline details-->
<div class="overflow-auto pb-5">
<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-700px p-7">
<!--begin::Item-->
<div class="overlay me-10">
<!--begin::Image-->
<div class="overlay-wrapper">
<img alt="img" class="rounded w-200px" src="/tassets/media/demos/demo1.png" />
</div>
<!--end::Image-->
<!--begin::Link-->
<div class="overlay-layer bg-dark bg-opacity-10 rounded">
<a href="#" class="btn btn-sm btn-primary btn-shadow">Explore</a>
</div>
<!--end::Link-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="overlay me-10">
<!--begin::Image-->
<div class="overlay-wrapper">
<img alt="img" class="rounded w-200px" src="/tassets/media/demos/demo2.png" />
</div>
<!--end::Image-->
<!--begin::Link-->
<div class="overlay-layer bg-dark bg-opacity-10 rounded">
<a href="#" class="btn btn-sm btn-primary btn-shadow">Explore</a>
</div>
<!--end::Link-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="overlay">
<!--begin::Image-->
<div class="overlay-wrapper">
<img alt="img" class="rounded w-200px" src="/tassets/media/demos/demo3.png" />
</div>
<!--end::Image-->
<!--begin::Link-->
<div class="overlay-layer bg-dark bg-opacity-10 rounded">
<a href="#" class="btn btn-sm btn-primary btn-shadow">Explore</a>
</div>
<!--end::Link-->
</div>
<!--end::Item-->
</div>
</div>
<!--end::Timeline details-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/communication/com010.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 8.725C6 8.125 6.4 7.725 7 7.725H14L18 11.725V12.925L22 9.725L12.6 2.225C12.2 1.925 11.7 1.925 11.4 2.225L2 9.725L6 12.925V8.725Z" fill="black" />
<path opacity="0.3" d="M22 9.72498V20.725C22 21.325 21.6 21.725 21 21.725H3C2.4 21.725 2 21.325 2 20.725V9.72498L11.4 17.225C11.8 17.525 12.3 17.525 12.6 17.225L22 9.72498ZM15 11.725H18L14 7.72498V10.725C14 11.325 14.4 11.725 15 11.725Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">New case
<a href="#" class="text-primary fw-bolder me-1">#67890</a>is assigned to you in Multi-platform Database Design project</div>
<!--end::Title-->
<!--begin::Description-->
<div class="overflow-auto pb-5">
<!--begin::Wrapper-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Added at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<a href="#" class="text-primary fw-bolder me-1">Alice Tan</a>
<!--end::User-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="black" />
<path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mb-10 mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">You have received a new order:</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Placed at 5:05 AM by</div>
<!--end::Info-->
<!--begin::User-->
<div class="symbol symbol-circle symbol-25px" data-bs-toggle="tooltip" data-bs-boundary="window" data-bs-placement="top" title="Robert Rich">
<img src="/tassets/media/avatars/150-14.jpg" alt="img" />
</div>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
<!--begin::Timeline details-->
<div class="overflow-auto pb-5">
<!--begin::Notice-->
<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed min-w-lg-600px flex-shrink-0 p-6">
<!--begin::Icon-->
<!--begin::Svg Icon | path: icons/duotune/coding/cod004.svg-->
<span class="svg-icon svg-icon-2tx svg-icon-primary me-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M19.0687 17.9688H11.0687C10.4687 17.9688 10.0687 18.3687 10.0687 18.9688V19.9688C10.0687 20.5687 10.4687 20.9688 11.0687 20.9688H19.0687C19.6687 20.9688 20.0687 20.5687 20.0687 19.9688V18.9688C20.0687 18.3687 19.6687 17.9688 19.0687 17.9688Z" fill="black" />
<path d="M4.06875 17.9688C3.86875 17.9688 3.66874 17.8688 3.46874 17.7688C2.96874 17.4688 2.86875 16.8688 3.16875 16.3688L6.76874 10.9688L3.16875 5.56876C2.86875 5.06876 2.96874 4.46873 3.46874 4.16873C3.96874 3.86873 4.56875 3.96878 4.86875 4.46878L8.86875 10.4688C9.06875 10.7688 9.06875 11.2688 8.86875 11.5688L4.86875 17.5688C4.66875 17.7688 4.36875 17.9688 4.06875 17.9688Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
<!--begin::Content-->
<div class="mb-3 mb-md-0 fw-bold">
<h4 class="text-gray-900 fw-bolder">Database Backup Process Completed!</h4>
<div class="fs-6 text-gray-700 pe-7">Login into Metronic Admin Dashboard to make sure the data integrity is OK</div>
</div>
<!--end::Content-->
<!--begin::Action-->
<a href="#" class="btn btn-primary px-6 align-self-center text-nowrap">Proceed</a>
<!--end::Action-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Notice-->
</div>
<!--end::Timeline details-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
<!--begin::Timeline item-->
<div class="timeline-item">
<!--begin::Timeline line-->
<div class="timeline-line w-40px"></div>
<!--end::Timeline line-->
<!--begin::Timeline icon-->
<div class="timeline-icon symbol symbol-circle symbol-40px">
<div class="symbol-label bg-light">
<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 10H13V11C13 11.6 12.6 12 12 12C11.4 12 11 11.6 11 11V10H3C2.4 10 2 10.4 2 11V13H22V11C22 10.4 21.6 10 21 10Z" fill="black" />
<path opacity="0.3" d="M12 12C11.4 12 11 11.6 11 11V3C11 2.4 11.4 2 12 2C12.6 2 13 2.4 13 3V11C13 11.6 12.6 12 12 12Z" fill="black" />
<path opacity="0.3" d="M18.1 21H5.9C5.4 21 4.9 20.6 4.8 20.1L3 13H21L19.2 20.1C19.1 20.6 18.6 21 18.1 21ZM13 18V15C13 14.4 12.6 14 12 14C11.4 14 11 14.4 11 15V18C11 18.6 11.4 19 12 19C12.6 19 13 18.6 13 18ZM17 18V15C17 14.4 16.6 14 16 14C15.4 14 15 14.4 15 15V18C15 18.6 15.4 19 16 19C16.6 19 17 18.6 17 18ZM9 18V15C9 14.4 8.6 14 8 14C7.4 14 7 14.4 7 15V18C7 18.6 7.4 19 8 19C8.6 19 9 18.6 9 18Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Timeline icon-->
<!--begin::Timeline content-->
<div class="timeline-content mt-n1">
<!--begin::Timeline heading-->
<div class="pe-3 mb-5">
<!--begin::Title-->
<div class="fs-5 fw-bold mb-2">New order
<a href="#" class="text-primary fw-bolder me-1">#67890</a>is placed for Workshow Planning &amp; Budget Estimation</div>
<!--end::Title-->
<!--begin::Description-->
<div class="d-flex align-items-center mt-1 fs-6">
<!--begin::Info-->
<div class="text-muted me-2 fs-7">Placed at 4:23 PM by</div>
<!--end::Info-->
<!--begin::User-->
<a href="#" class="text-primary fw-bolder me-1">Jimmy Bold</a>
<!--end::User-->
</div>
<!--end::Description-->
</div>
<!--end::Timeline heading-->
</div>
<!--end::Timeline content-->
</div>
<!--end::Timeline item-->
</div>
<!--end::Timeline items-->
</div>
<!--end::Content-->
</div>
<!--end::Body-->
<!--begin::Footer-->
<div class="card-footer py-5 text-center" id="kt_activities_footer">
<a href="../../demo8/dist/pages/profile/activity.html" class="btn btn-bg-body text-primary">View All Activities
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-3 svg-icon-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon--></a>
</div>
<!--end::Footer-->
</div>
</div>
<!--end::Activities drawer-->
<!--begin::Chat drawer-->
<div id="kt_drawer_chat" class="bg-body" data-kt-drawer="true" data-kt-drawer-name="chat" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'300px', 'md': '500px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_drawer_chat_toggle" data-kt-drawer-close="#kt_drawer_chat_close">
<!--begin::Messenger-->
<div class="card w-100 rounded-0" id="kt_drawer_chat_messenger">
<!--begin::Card header-->
<div class="card-header pe-5" id="kt_drawer_chat_messenger_header">
<!--begin::Title-->
<div class="card-title">
<!--begin::User-->
<div class="d-flex justify-content-center flex-column me-3">
<a href="#" class="fs-4 fw-bolder text-gray-900 text-hover-primary me-1 mb-2 lh-1">Brian Cox</a>
<!--begin::Info-->
<div class="mb-0 lh-1">
<span class="badge badge-success badge-circle w-10px h-10px me-1"></span>
<span class="fs-7 fw-bold text-muted">Active</span>
</div>
<!--end::Info-->
</div>
<!--end::User-->
</div>
<!--end::Title-->
<!--begin::Card toolbar-->
<div class="card-toolbar">
<!--begin::Menu-->
<div class="me-2">
<button class="btn btn-sm btn-icon btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<i class="bi bi-three-dots fs-3"></i>
</button>
<!--begin::Menu 3-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3" data-kt-menu="true">
<!--begin::Heading-->
<div class="menu-item px-3">
<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Contacts</div>
</div>
<!--end::Heading-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_users_search">Add Contact</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link flex-stack px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_invite_friends">Invite Contacts
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a contact email to send an invitation"></i></a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<a href="#" class="menu-link px-3">
<span class="menu-title">Groups</span>
<span class="menu-arrow"></span>
</a>
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Create Group</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Invite Members</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Settings</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3 my-1">
<a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Settings</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu 3-->
</div>
<!--end::Menu-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_chat_close">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--end::Card toolbar-->
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body" id="kt_drawer_chat_messenger_body">
<!--begin::Messages-->
<div class="scroll-y me-n5 pe-5" data-kt-element="messages" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer" data-kt-scroll-wrappers="#kt_drawer_chat_messenger_body" data-kt-scroll-offset="0px">
<!--begin::Message(in)-->
<div class="d-flex justify-content-start mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-start">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-3">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">Brian Cox</a>
<span class="text-muted fs-7 mb-1">2 mins</span>
</div>
<!--end::Details-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">How likely are you to recommend our company to your friends and family ?</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(in)-->
<!--begin::Message(out)-->
<div class="d-flex justify-content-end mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-end">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Details-->
<div class="me-3">
<span class="text-muted fs-7 mb-1">5 mins</span>
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">You</a>
</div>
<!--end::Details-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-26.jpg" />
</div>
<!--end::Avatar-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-primary text-dark fw-bold mw-lg-400px text-end" data-kt-element="message-text">Hey there, were just writing to let you know that youve been subscribed to a repository on GitHub.</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(out)-->
<!--begin::Message(in)-->
<div class="d-flex justify-content-start mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-start">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-3">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">Brian Cox</a>
<span class="text-muted fs-7 mb-1">1 Hour</span>
</div>
<!--end::Details-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">Ok, Understood!</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(in)-->
<!--begin::Message(out)-->
<div class="d-flex justify-content-end mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-end">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Details-->
<div class="me-3">
<span class="text-muted fs-7 mb-1">2 Hours</span>
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">You</a>
</div>
<!--end::Details-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-26.jpg" />
</div>
<!--end::Avatar-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-primary text-dark fw-bold mw-lg-400px text-end" data-kt-element="message-text">Youll receive notifications for all issues, pull requests!</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(out)-->
<!--begin::Message(in)-->
<div class="d-flex justify-content-start mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-start">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-3">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">Brian Cox</a>
<span class="text-muted fs-7 mb-1">3 Hours</span>
</div>
<!--end::Details-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">You can unwatch this repository immediately by clicking here:
<a href="https://keenthemes.com">Keenthemes.com</a></div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(in)-->
<!--begin::Message(out)-->
<div class="d-flex justify-content-end mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-end">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Details-->
<div class="me-3">
<span class="text-muted fs-7 mb-1">4 Hours</span>
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">You</a>
</div>
<!--end::Details-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-26.jpg" />
</div>
<!--end::Avatar-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-primary text-dark fw-bold mw-lg-400px text-end" data-kt-element="message-text">Most purchased Business courses during this sale!</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(out)-->
<!--begin::Message(in)-->
<div class="d-flex justify-content-start mb-10">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-start">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-3">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">Brian Cox</a>
<span class="text-muted fs-7 mb-1">5 Hours</span>
</div>
<!--end::Details-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(in)-->
<!--begin::Message(template for out)-->
<div class="d-flex justify-content-end mb-10 d-none" data-kt-element="template-out">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-end">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Details-->
<div class="me-3">
<span class="text-muted fs-7 mb-1">Just now</span>
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary ms-1">You</a>
</div>
<!--end::Details-->
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-26.jpg" />
</div>
<!--end::Avatar-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-primary text-dark fw-bold mw-lg-400px text-end" data-kt-element="message-text"></div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(template for out)-->
<!--begin::Message(template for in)-->
<div class="d-flex justify-content-start mb-10 d-none" data-kt-element="template-in">
<!--begin::Wrapper-->
<div class="d-flex flex-column align-items-start">
<!--begin::User-->
<div class="d-flex align-items-center mb-2">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-3">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary me-1">Brian Cox</a>
<span class="text-muted fs-7 mb-1">Just now</span>
</div>
<!--end::Details-->
</div>
<!--end::User-->
<!--begin::Text-->
<div class="p-5 rounded bg-light-info text-dark fw-bold mw-lg-400px text-start" data-kt-element="message-text">Right before vacation season we have the next Big Deal for you.</div>
<!--end::Text-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Message(template for in)-->
</div>
<!--end::Messages-->
</div>
<!--end::Card body-->
<!--begin::Card footer-->
<div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
<!--begin::Input-->
<textarea class="form-control form-control-flush mb-3" rows="1" data-kt-element="input" placeholder="Type a message"></textarea>
<!--end::Input-->
<!--begin:Toolbar-->
<div class="d-flex flex-stack">
<!--begin::Actions-->
<div class="d-flex align-items-center me-2">
<button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button" data-bs-toggle="tooltip" title="Coming soon">
<i class="bi bi-paperclip fs-3"></i>
</button>
<button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button" data-bs-toggle="tooltip" title="Coming soon">
<i class="bi bi-upload fs-3"></i>
</button>
</div>
<!--end::Actions-->
<!--begin::Send-->
<button class="btn btn-primary" type="button" data-kt-element="send">Send</button>
<!--end::Send-->
</div>
<!--end::Toolbar-->
</div>
<!--end::Card footer-->
</div>
<!--end::Messenger-->
</div>
<!--end::Chat drawer-->
<!--begin::Exolore drawer toggle-->
<button id="kt_explore_toggle" class="explore-toggle btn btn-sm bg-body btn-color-gray-700 btn-active-primary shadow-sm position-fixed px-5 fw-bolder zindex-2 top-50 mt-10 end-0 transform-90 fs-6 rounded-top-0" title="Explore Metronic" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-trigger="hover">
<span id="kt_explore_toggle_label">Explore</span>
</button>
<!--end::Exolore drawer toggle-->
<!--begin::Exolore drawer-->
<div id="kt_explore" class="bg-body" data-kt-drawer="true" data-kt-drawer-name="explore" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'350px', 'lg': '475px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_explore_toggle" data-kt-drawer-close="#kt_explore_close">
<!--begin::Card-->
<div class="card shadow-none rounded-0 w-100">
<!--begin::Header-->
<div class="card-header" id="kt_explore_header">
<h3 class="card-title fw-bolder text-gray-700">Explore Metronic</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="kt_explore_close">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</button>
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body" id="kt_explore_body">
<!--begin::Content-->
<div id="kt_explore_scroll" class="scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_explore_body" data-kt-scroll-dependencies="#kt_explore_header" data-kt-scroll-offset="5px">
<!--begin::Wrapper-->
<div class="mb-0">
<!--begin::Header-->
<div class="mb-7">
<div class="d-flex flex-stack">
<h3 class="mb-0">Metronic Licenses</h3>
<a href="https://themeforest.net/licenses/standard" class="fw-bold" target="_blank">License FAQs</a>
</div>
</div>
<!--end::Header-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Regular License</div>
<i class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="popover" data-bs-custom-class="popover-dark" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Use, by you or one client in a single end product which end users are not charged for."></i>
</div>
<div class="fs-7 text-muted">For single end product used by you or one client</div>
</div>
<div class="text-nowrap">
<span class="text-muted fs-7 fw-bold me-n1">$</span>
<span class="text-dark fs-1 fw-bolder">39</span>
</div>
</div>
</div>
<!--end::License-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Extended License</div>
<i class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="popover" data-bs-custom-class="popover-dark" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Use, by you or one client, in a single end product which end users can be charged for."></i>
</div>
<div class="fs-7 text-muted">For single end product with paying users.</div>
</div>
<div class="text-nowrap">
<span class="text-muted fs-7 fw-bold me-n1">$</span>
<span class="text-dark fs-1 fw-bolder">939</span>
</div>
</div>
</div>
<!--end::License-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Custom License</div>
</div>
<div class="fs-7 text-muted">Reach us for custom license offers.</div>
</div>
<div class="text-nowrap">
<a href="https://keenthemes.com/contact/" class="btn btn-sm btn-success" target="_blank">Contact Us</a>
</div>
</div>
</div>
<!--end::License-->
<!--begin::Purchase-->
<a href="https://1.envato.market/EA4JP" class="btn btn-primary mb-15 w-100">Buy Now</a>
<!--end::Purchase-->
<!--begin::Demos-->
<div class="mb-0">
<h3 class="fw-bolder text-center mb-6">Metronic Demos</h3>
<!--begin::Row-->
<div class="row g-5">
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo1.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo1" class="btn btn-sm btn-success shadow">Demo 1</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo2.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo2" class="btn btn-sm btn-success shadow">Demo 2</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo3.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo3" class="btn btn-sm btn-success shadow">Demo 3</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo4.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo4" class="btn btn-sm btn-success shadow">Demo 4</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo5.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo5" class="btn btn-sm btn-success shadow">Demo 5</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo6.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo6" class="btn btn-sm btn-success shadow">Demo 6</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo7.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo7" class="btn btn-sm btn-success shadow">Demo 7</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-success rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo8.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo8" class="btn btn-sm btn-success shadow">Demo 8</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo9.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo9" class="btn btn-sm btn-success shadow">Demo 9</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo10.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo11.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo12.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo13.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo13" class="btn btn-sm btn-success shadow">Demo 13</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo14.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo15.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo16.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo17.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo18.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative rounded">
<div class="overlay-wrapper">
<img src="/tassets/media/demos/demo19.png" alt="demo" class="w-100 opacity-75" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Demos-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Content-->
</div>
<!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Exolore drawer-->
<!--end::Drawers-->
<!--begin::Modals-->
<!--begin::Modal - Invite Friends-->
<div class="modal fade" id="kt_modal_invite_friends" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog mw-650px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header pb-0 border-0 justify-content-end">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--begin::Modal header-->
<!--begin::Modal body-->
<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
<!--begin::Heading-->
<div class="text-center mb-13">
<!--begin::Title-->
<h1 class="mb-3">Invite a Friend</h1>
<!--end::Title-->
<!--begin::Description-->
<div class="text-muted fw-bold fs-5">If you need more info, please check out
<a href="#" class="link-primary fw-bolder">FAQ Page</a>.</div>
<!--end::Description-->
</div>
<!--end::Heading-->
<!--begin::Google Contacts Invite-->
<div class="btn btn-light-primary fw-bolder w-100 mb-8">
<img alt="Logo" src="/tassets/media/svg/brand-logos/google-icon.svg" class="h-20px me-3" />Invite Gmail Contacts</div>
<!--end::Google Contacts Invite-->
<!--begin::Separator-->
<div class="separator d-flex flex-center mb-8">
<span class="text-uppercase bg-body fs-7 fw-bold text-muted px-3">or</span>
</div>
<!--end::Separator-->
<!--begin::Textarea-->
<textarea class="form-control form-control-solid mb-8" rows="3" placeholder="Type or paste emails here"></textarea>
<!--end::Textarea-->
<!--begin::Users-->
<div class="mb-10">
<!--begin::Heading-->
<div class="fs-6 fw-bold mb-2">Your Invitations</div>
<!--end::Heading-->
<!--begin::List-->
<div class="mh-300px scroll-y me-n7 pe-7">
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-1.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Emma Smith</a>
<div class="fw-bold text-muted">e.smith@kpmg.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-bold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Melody Macy</a>
<div class="fw-bold text-muted">melody@altbox.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-26.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Max Smith</a>
<div class="fw-bold text-muted">max@kt.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-4.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Sean Bean</a>
<div class="fw-bold text-muted">sean@dellito.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-15.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Brian Cox</a>
<div class="fw-bold text-muted">brian@exchange.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-warning text-warning fw-bold">M</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>
<div class="fw-bold text-muted">mikaela@pexcom.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-8.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>
<div class="fw-bold text-muted">f.mitcham@kpmg.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-bold">O</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Olivia Wild</a>
<div class="fw-bold text-muted">olivia@corpmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-primary text-primary fw-bold">N</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Neil Owen</a>
<div class="fw-bold text-muted">owen.neil@gmail.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-6.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Dan Wilson</a>
<div class="fw-bold text-muted">dam@consilting.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-danger text-danger fw-bold">E</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Emma Bold</a>
<div class="fw-bold text-muted">emma@intenso.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-7.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Ana Crown</a>
<div class="fw-bold text-muted">ana.cf@limtel.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-info text-info fw-bold">A</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Robert Doe</a>
<div class="fw-bold text-muted">robert@benko.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-17.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">John Miller</a>
<div class="fw-bold text-muted">miller@mapple.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<span class="symbol-label bg-light-success text-success fw-bold">L</span>
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>
<div class="fw-bold text-muted">lucy.m@fentech.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2" selected="selected">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-10.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
<div class="fw-bold text-muted">ethan@loop.com.au</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1" selected="selected">Guest</option>
<option value="2">Owner</option>
<option value="3">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
<!--begin::User-->
<div class="d-flex flex-stack py-4">
<!--begin::Details-->
<div class="d-flex align-items-center">
<!--begin::Avatar-->
<div class="symbol symbol-35px symbol-circle">
<img alt="Pic" src="/tassets/media/avatars/150-7.jpg" />
</div>
<!--end::Avatar-->
<!--begin::Details-->
<div class="ms-5">
<a href="#" class="fs-5 fw-bolder text-gray-900 text-hover-primary mb-2">Ana Crown</a>
<div class="fw-bold text-muted">ana.cf@limtel.com</div>
</div>
<!--end::Details-->
</div>
<!--end::Details-->
<!--begin::Access menu-->
<div class="ms-2 w-100px">
<select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
<option value="1">Guest</option>
<option value="2">Owner</option>
<option value="3" selected="selected">Can Edit</option>
</select>
</div>
<!--end::Access menu-->
</div>
<!--end::User-->
</div>
<!--end::List-->
</div>
<!--end::Users-->
<!--begin::Notice-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5 fw-bold">
<label class="fs-6">Adding Users by Team Members</label>
<div class="fs-7 text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" checked="checked" />
<span class="form-check-label fw-bold text-muted">Allowed</span>
</label>
<!--end::Switch-->
</div>
<!--end::Notice-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Invite Friend-->
<!--begin::Modal - Create App-->
<div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-dialog-centered mw-900px">
<!--begin::Modal content-->
<div class="modal-content">
<!--begin::Modal header-->
<div class="modal-header">
<!--begin::Modal title-->
<h2>Create App</h2>
<!--end::Modal title-->
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body py-lg-10 px-lg-10">
<!--begin::Stepper-->
<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_modal_create_app_stepper">
<!--begin::Aside-->
<div class="d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px">
<!--begin::Nav-->
<div class="stepper-nav ps-lg-10">
<!--begin::Step 1-->
<div class="stepper-item current" data-kt-stepper-element="nav">
<!--begin::Line-->
<div class="stepper-line w-40px"></div>
<!--end::Line-->
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">1</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Details</h3>
<div class="stepper-desc">Name your App</div>
</div>
<!--end::Label-->
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Line-->
<div class="stepper-line w-40px"></div>
<!--end::Line-->
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">2</span>
</div>
<!--begin::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Frameworks</h3>
<div class="stepper-desc">Define your app framework</div>
</div>
<!--begin::Label-->
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Line-->
<div class="stepper-line w-40px"></div>
<!--end::Line-->
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">3</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Database</h3>
<div class="stepper-desc">Select the app database type</div>
</div>
<!--end::Label-->
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Line-->
<div class="stepper-line w-40px"></div>
<!--end::Line-->
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">4</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Billing</h3>
<div class="stepper-desc">Provide payment details</div>
</div>
<!--end::Label-->
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Line-->
<div class="stepper-line w-40px"></div>
<!--end::Line-->
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="stepper-check fas fa-check"></i>
<span class="stepper-number">5</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Completed</h3>
<div class="stepper-desc">Review and Submit</div>
</div>
<!--end::Label-->
</div>
<!--end::Step 5-->
</div>
<!--end::Nav-->
</div>
<!--begin::Aside-->
<!--begin::Content-->
<div class="flex-row-fluid py-lg-5 px-lg-15">
<!--begin::Form-->
<form class="form" novalidate="novalidate" id="kt_modal_create_app_form">
<!--begin::Step 1-->
<div class="current" data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-bold mb-2">
<span class="required">App Name</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your unique app name"></i>
</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid" name="name" placeholder="" value="" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-bold mb-4">
<span class="required">Category</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Select your app category"></i>
</label>
<!--end::Label-->
<!--begin:Options-->
<div class="fv-row">
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-primary">
<!--begin::Svg Icon | path: icons/duotune/maps/map004.svg-->
<span class="svg-icon svg-icon-1 svg-icon-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M18.4 5.59998C21.9 9.09998 21.9 14.8 18.4 18.3C14.9 21.8 9.2 21.8 5.7 18.3L18.4 5.59998Z" fill="black" />
<path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM19.9 11H13V8.8999C14.9 8.6999 16.7 8.00005 18.1 6.80005C19.1 8.00005 19.7 9.4 19.9 11ZM11 19.8999C9.7 19.6999 8.39999 19.2 7.39999 18.5C8.49999 17.7 9.7 17.2001 11 17.1001V19.8999ZM5.89999 6.90002C7.39999 8.10002 9.2 8.8 11 9V11.1001H4.10001C4.30001 9.4001 4.89999 8.00002 5.89999 6.90002ZM7.39999 5.5C8.49999 4.7 9.7 4.19998 11 4.09998V7C9.7 6.8 8.39999 6.3 7.39999 5.5ZM13 17.1001C14.3 17.3001 15.6 17.8 16.6 18.5C15.5 19.3 14.3 19.7999 13 19.8999V17.1001ZM13 4.09998C14.3 4.29998 15.6 4.8 16.6 5.5C15.5 6.3 14.3 6.80002 13 6.90002V4.09998ZM4.10001 13H11V15.1001C9.1 15.3001 7.29999 16 5.89999 17.2C4.89999 16 4.30001 14.6 4.10001 13ZM18.1 17.1001C16.6 15.9001 14.8 15.2 13 15V12.8999H19.9C19.7 14.5999 19.1 16.0001 18.1 17.1001Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Quick Online Courses</span>
<span class="fs-7 text-muted">Creating a clear text structure is just one SEO</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="1" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">
<!--begin::Svg Icon | path: icons/duotune/general/gen024.svg-->
<span class="svg-icon svg-icon-1 svg-icon-danger">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="5" y="5" width="5" height="5" rx="1" fill="#000000" />
<rect x="14" y="5" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="5" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
<rect x="14" y="14" width="5" height="5" rx="1" fill="#000000" opacity="0.3" />
</g>
</svg>
</span>
<!--end::Svg Icon-->
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Face to Face Discussions</span>
<span class="fs-7 text-muted">Creating a clear text structure is just one aspect</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="2" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">
<!--begin::Svg Icon | path: icons/duotune/general/gen013.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M20.9 12.9C20.3 12.9 19.9 12.5 19.9 11.9C19.9 11.3 20.3 10.9 20.9 10.9H21.8C21.3 6.2 17.6 2.4 12.9 2V2.9C12.9 3.5 12.5 3.9 11.9 3.9C11.3 3.9 10.9 3.5 10.9 2.9V2C6.19999 2.5 2.4 6.2 2 10.9H2.89999C3.49999 10.9 3.89999 11.3 3.89999 11.9C3.89999 12.5 3.49999 12.9 2.89999 12.9H2C2.5 17.6 6.19999 21.4 10.9 21.8V20.9C10.9 20.3 11.3 19.9 11.9 19.9C12.5 19.9 12.9 20.3 12.9 20.9V21.8C17.6 21.3 21.4 17.6 21.8 12.9H20.9Z" fill="black" />
<path d="M16.9 10.9H13.6C13.4 10.6 13.2 10.4 12.9 10.2V5.90002C12.9 5.30002 12.5 4.90002 11.9 4.90002C11.3 4.90002 10.9 5.30002 10.9 5.90002V10.2C10.6 10.4 10.4 10.6 10.2 10.9H9.89999C9.29999 10.9 8.89999 11.3 8.89999 11.9C8.89999 12.5 9.29999 12.9 9.89999 12.9H10.2C10.4 13.2 10.6 13.4 10.9 13.6V13.9C10.9 14.5 11.3 14.9 11.9 14.9C12.5 14.9 12.9 14.5 12.9 13.9V13.6C13.2 13.4 13.4 13.2 13.6 12.9H16.9C17.5 12.9 17.9 12.5 17.9 11.9C17.9 11.3 17.5 10.9 16.9 10.9Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Full Intro Training</span>
<span class="fs-7 text-muted">Creating a clear text structure copywriting</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="category" value="3" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
</div>
<!--end:Options-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-bold mb-4">
<span class="required">Select Framework</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your apps framework"></i>
</label>
<!--end::Label-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-warning">
<i class="fab fa-html5 text-warning fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">HTML5</span>
<span class="fs-7 text-muted">Base Web Projec</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" checked="checked" name="framework" value="1" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">
<i class="fab fa-react text-success fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">ReactJS</span>
<span class="fs-7 text-muted">Robust and flexible app framework</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="2" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">
<i class="fab fa-angular text-danger fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Angular</span>
<span class="fs-7 text-muted">Powerful data mangement</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="3" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin:Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-primary">
<i class="fab fa-vuejs text-primary fs-2x"></i>
</span>
</span>
<!--end:Icon-->
<!--begin:Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Vue</span>
<span class="fs-7 text-muted">Lightweight and responsive framework</span>
</span>
<!--end:Info-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="framework" value="4" />
</span>
<!--end:Input-->
</label>
<!--end::Option-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required fs-5 fw-bold mb-2">Database Name</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid" name="dbname" placeholder="" value="master_db" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-bold mb-4">
<span class="required">Select Database Engine</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Select your app database engine"></i>
</label>
<!--end::Label-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-success">
<i class="fas fa-database text-success fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">MySQL</span>
<span class="fs-7 text-muted">Basic MySQL database</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" checked="checked" value="1" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer mb-5">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-danger">
<i class="fab fa-google text-danger fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">Firebase</span>
<span class="fs-7 text-muted">Google based app data management</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" value="2" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack cursor-pointer">
<!--begin::Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label bg-light-warning">
<i class="fab fa-amazon text-warning fs-2x"></i>
</span>
</span>
<!--end::Icon-->
<!--begin::Info-->
<span class="d-flex flex-column">
<span class="fw-bolder fs-6">DynamoDB</span>
<span class="fs-7 text-muted">Amazon Fast NoSQL Database</span>
</span>
<!--end::Info-->
</span>
<!--end::Label-->
<!--begin::Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" name="dbengine" value="3" />
</span>
<!--end::Input-->
</label>
<!--end::Option-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div data-kt-stepper-element="content">
<div class="w-100">
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
<span class="required">Name On Card</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify a card holder's name"></i>
</label>
<!--end::Label-->
<input type="text" class="form-control form-control-solid" placeholder="" name="card_name" value="Max Doe" />
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-bold form-label mb-2">Card Number</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" placeholder="Enter card number" name="card_number" value="4111 1111 1111 1111" />
<!--end::Input-->
<!--begin::Card logos-->
<div class="position-absolute translate-middle-y top-50 end-0 me-5">
<img src="/tassets/media/svg/card-logos/visa.svg" alt="" class="h-25px" />
<img src="/tassets/media/svg/card-logos/mastercard.svg" alt="" class="h-25px" />
<img src="/tassets/media/svg/card-logos/american-express.svg" alt="" class="h-25px" />
</div>
<!--end::Card logos-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row mb-10">
<!--begin::Col-->
<div class="col-md-8 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-bold form-label mb-2">Expiration Date</label>
<!--end::Label-->
<!--begin::Row-->
<div class="row fv-row">
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_month" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Month">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_year" class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Year">
<option></option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
</select>
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-4 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
<span class="required">CVV</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Enter a card CVV code"></i>
</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" minlength="3" maxlength="4" placeholder="CVV" name="card_cvv" />
<!--end::Input-->
<!--begin::CVV icon-->
<div class="position-absolute translate-middle-y top-50 end-0 me-3">
<!--begin::Svg Icon | path: icons/duotune/finance/fin002.svg-->
<span class="svg-icon svg-icon-2hx">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 7H2V11H22V7Z" fill="black" />
<path opacity="0.3" d="M21 19H3C2.4 19 2 18.6 2 18V6C2 5.4 2.4 5 3 5H21C21.6 5 22 5.4 22 6V18C22 18.6 21.6 19 21 19ZM14 14C14 13.4 13.6 13 13 13H5C4.4 13 4 13.4 4 14C4 14.6 4.4 15 5 15H13C13.6 15 14 14.6 14 14ZM16 15.5C16 16.3 16.7 17 17.5 17H18.5C19.3 17 20 16.3 20 15.5C20 14.7 19.3 14 18.5 14H17.5C16.7 14 16 14.7 16 15.5Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::CVV icon-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-bold form-label">Save Card for further billing?</label>
<div class="fs-7 fw-bold text-muted">If you need more info, please check budget planning</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1" checked="checked" />
<span class="form-check-label fw-bold text-muted">Save Card</span>
</label>
<!--end::Switch-->
</div>
<!--end::Input group-->
</div>
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div data-kt-stepper-element="content">
<div class="w-100 text-center">
<!--begin::Heading-->
<h1 class="fw-bolder text-dark mb-3">Release!</h1>
<!--end::Heading-->
<!--begin::Description-->
<div class="text-muted fw-bold fs-3">Submit your app to kickstart your project.</div>
<!--end::Description-->
<!--begin::Illustration-->
<div class="text-center px-4 py-15">
<img src="/tassets/media/illustrations/sketchy-1/9.png" alt="" class="w-100 mh-300px" />
</div>
<!--end::Illustration-->
</div>
</div>
<!--end::Step 5-->
<!--begin::Actions-->
<div class="d-flex flex-stack pt-10">
<!--begin::Wrapper-->
<div class="me-2">
<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
<span class="svg-icon svg-icon-3 me-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1" fill="black" />
<path d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->Back</button>
</div>
<!--end::Wrapper-->
<!--begin::Wrapper-->
<div>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="submit">
<span class="indicator-label">Submit
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-3 ms-2 me-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon--></span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue
<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
<span class="svg-icon svg-icon-3 ms-1 me-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="black" />
<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon--></button>
</div>
<!--end::Wrapper-->
</div>
<!--end::Actions-->
</form>
<!--end::Form-->
</div>
<!--end::Content-->
</div>
<!--end::Stepper-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Create App-->
<!--begin::Modal - Upgrade plan-->
<div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true">
<!--begin::Modal dialog-->
<div class="modal-dialog modal-xl">
<!--begin::Modal content-->
<div class="modal-content rounded">
<!--begin::Modal header-->
<div class="modal-header justify-content-end border-0 pb-0">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Close-->
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body pt-0 pb-15 px-5 px-xl-20">
<!--begin::Heading-->
<div class="mb-13 text-center">
<h1 class="mb-3">Upgrade a Plan</h1>
<div class="text-muted fw-bold fs-5">If you need more info, please check
<a href="#" class="link-primary fw-bolder">Pricing Guidelines</a>.</div>
</div>
<!--end::Heading-->
<!--begin::Plans-->
<div class="d-flex flex-column">
<!--begin::Nav group-->
<div class="nav-group nav-group-outline mx-auto" data-kt-buttons="true">
<a href="#" class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3 me-2 active" data-kt-plan="month">Monthly</a>
<a href="#" class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3" data-kt-plan="annual">Annual</a>
</div>
<!--end::Nav group-->
<!--begin::Row-->
<div class="row mt-10">
<!--begin::Col-->
<div class="col-lg-6 mb-10 mb-lg-0">
<!--begin::Tabs-->
<div class="nav flex-column">
<!--begin::Tab link-->
<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 active mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_startup">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success me-6">
<input class="form-check-input" type="radio" name="plan" checked="checked" value="startup" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<h2 class="d-flex align-items-center fs-2 fw-bolder flex-wrap">Startup</h2>
<div class="fw-bold opacity-50">Best for startups</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bolder" data-kt-plan-price-month="39" data-kt-plan-price-annual="399">39</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</div>
<!--end::Tab link-->
<!--begin::Tab link-->
<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_advanced">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success me-6">
<input class="form-check-input" type="radio" name="plan" value="advanced" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<h2 class="d-flex align-items-center fs-2 fw-bolder flex-wrap">Advanced</h2>
<div class="fw-bold opacity-50">Best for 100+ team size</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bolder" data-kt-plan-price-month="339" data-kt-plan-price-annual="3399">339</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</div>
<!--end::Tab link-->
<!--begin::Tab link-->
<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_enterprise">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success me-6">
<input class="form-check-input" type="radio" name="plan" value="enterprise" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<h2 class="d-flex align-items-center fs-2 fw-bolder flex-wrap">Enterprise
<span class="badge badge-light-success ms-2 fs-7">Most popular</span></h2>
<div class="fw-bold opacity-50">Best value for 1000+ team</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<span class="mb-2">$</span>
<span class="fs-3x fw-bolder" data-kt-plan-price-month="999" data-kt-plan-price-annual="9999">999</span>
<span class="fs-7 opacity-50">/
<span data-kt-element="period">Mon</span></span>
</div>
<!--end::Price-->
</div>
<!--end::Tab link-->
<!--begin::Tab link-->
<div class="nav-link btn btn-outline btn-outline-dashed btn-color-dark d-flex flex-stack text-start p-6">
<!--end::Description-->
<div class="d-flex align-items-center me-2">
<!--begin::Radio-->
<div class="form-check form-check-custom form-check-solid form-check-success me-6">
<input class="form-check-input" type="radio" name="plan" value="custom" />
</div>
<!--end::Radio-->
<!--begin::Info-->
<div class="flex-grow-1">
<h2 class="d-flex align-items-center fs-2 fw-bolder flex-wrap">Custom</h2>
<div class="fw-bold opacity-50">Requet a custom license</div>
</div>
<!--end::Info-->
</div>
<!--end::Description-->
<!--begin::Price-->
<div class="ms-5">
<a href="#" class="btn btn-sm btn-primary">Contact Us</a>
</div>
<!--end::Price-->
</div>
<!--end::Tab link-->
</div>
<!--end::Tabs-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-lg-6">
<!--begin::Tab content-->
<div class="tab-content rounded h-100 bg-light p-10">
<!--begin::Tab Pane-->
<div class="tab-pane fade show active" id="kt_upgrade_plan_startup">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bolder text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-bold">Optimal for 10+ team size and new startup</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-muted flex-grow-1">Finance Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-muted flex-grow-1">Accounting Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-muted flex-grow-1">Network Platform</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-bold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
<!--begin::Tab Pane-->
<div class="tab-pane fade" id="kt_upgrade_plan_advanced">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bolder text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-bold">Optimal for 100+ team size and grown company</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Finance Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-muted flex-grow-1">Network Platform</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-bold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen040.svg-->
<span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="7" y="15.3137" width="12" height="2" rx="1" transform="rotate(-45 7 15.3137)" fill="black" />
<rect x="8.41422" y="7" width="12" height="2" rx="1" transform="rotate(45 8.41422 7)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
<!--begin::Tab Pane-->
<div class="tab-pane fade" id="kt_upgrade_plan_enterprise">
<!--begin::Heading-->
<div class="pb-5">
<h2 class="fw-bolder text-dark">Whats in Startup Plan?</h2>
<div class="text-muted fw-bold">Optimal for 1000+ team and enterpise</div>
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="pt-1">
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Finance Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center mb-7">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Network Platform</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
<!--begin::Item-->
<div class="d-flex align-items-center">
<span class="fw-bold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>
<!--begin::Svg Icon | path: icons/duotune/general/gen043.svg-->
<span class="svg-icon svg-icon-1 svg-icon-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<path d="M10.4343 12.4343L8.75 10.75C8.33579 10.3358 7.66421 10.3358 7.25 10.75C6.83579 11.1642 6.83579 11.8358 7.25 12.25L10.2929 15.2929C10.6834 15.6834 11.3166 15.6834 11.7071 15.2929L17.25 9.75C17.6642 9.33579 17.6642 8.66421 17.25 8.25C16.8358 7.83579 16.1642 7.83579 15.75 8.25L11.5657 12.4343C11.2533 12.7467 10.7467 12.7467 10.4343 12.4343Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::Tab Pane-->
</div>
<!--end::Tab content-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Plans-->
<!--begin::Actions-->
<div class="d-flex flex-center flex-row-fluid pt-12">
<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Upgrade Plan</button>
</div>
<!--end::Actions-->
</div>
<!--end::Modal body-->
</div>
<!--end::Modal content-->
</div>
<!--end::Modal dialog-->
</div>
<!--end::Modal - Upgrade plan-->
<!--end::Modals-->
<!--begin::Scrolltop-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="black" />
<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Scrolltop-->
<!--end::Main-->
<script>var hostUrl = "/tassets/";</script>
<!--begin::Javascript-->
<!--begin::Global Javascript Bundle(used by all pages)-->
<script src="/tassets/plugins/global/plugins.bundle.js"></script>
<script src="/tassets/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--begin::Page Vendors Javascript(used by this page)-->
<script src="/tassets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
<!--end::Page Vendors Javascript-->
<!--begin::Page Custom Javascript(used by this page)-->
<script src="/tassets/js/custom/widgets.js"></script>
<script src="/tassets/js/custom/apps/chat/chat.js"></script>
<script src="/tassets/js/custom/modals/create-app.js"></script>
<script src="/tassets/js/custom/modals/upgrade-plan.js"></script>
<!--end::Page Custom Javascript-->
<!--end::Javascript-->
</body>
<!--end::Body-->
</html>