   <!DOCTYPE html>
   <html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">
      <head>
         <!-- Meta Data --> 
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>Account Soft | PROGRAMERS INTERNATIONAL</title>
         <meta name="Description" content="">
         <meta name="Author" content="">
         <meta name="keywords" content="">
         <!-- Favicon --> 
         <link rel="icon" href="images/favicon.png" type="image/x-icon">
         <!-- Choices JS --> <script src="js/choices.min.js"></script> <!-- Bootstrap Css --> 
         <link id="style" href="css/bootstrap.min.css" rel="stylesheet">
         <!-- Main Theme Js --> <script src="js/main.js"></script> <!-- Style Css --> 
         <link href="css/styles.min.css" rel="stylesheet">
         <!-- Icons Css --> 
         <link href="css/icons.css" rel="stylesheet">
         <!-- Node Waves Css --> 
         <link href="css/waves.min.css" rel="stylesheet">
         <!-- Simplebar Css --> 
         <link href="css/simplebar.min.css" rel="stylesheet">
         <!-- Color Picker Css --> 
         <link rel="stylesheet" href="css/flatpickr.min.css">
         <link rel="stylesheet" href="css/nano.min.css">
         <!-- Choices Css --> 
         <link rel="stylesheet" href="css/choices.min.css">
         <link rel="stylesheet" href="css/jsvectormap.min.css">
         <link rel="stylesheet" href="css/swiper-bundle.min.css">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
         <meta http-equiv="imagetoolbar" content="no">
         <style type="text/css">
            <!-- input,textarea{-webkit-touch-callout:default;-webkit-user-select:auto;-khtml-user-select:auto;-moz-user-select:text;-ms-user-select:text;user-select:text} *{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none} -->
         </style>
         <style type="text/css" media="print">
            <!-- body{display:none} -->
         </style>
         <!--[if gte IE 5]>
         <frame>
         </frame><![endif]-->
      </head>
      <body>
         <div class="offcanvas offcanvas-end" tabindex="-1" id="switcher-canvas" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header border-bottom">
               <h5 class="offcanvas-title text-default" id="offcanvasRightLabel">Switcher</h5>
               <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 
            </div>
            <div class="offcanvas-body">
               <nav class="border-bottom border-block-end-dashed">
                  <div class="nav nav-tabs nav-justified" id="switcher-main-tab" role="tablist"> <button class="nav-link active" id="switcher-home-tab" data-bs-toggle="tab" data-bs-target="#switcher-home" type="button" role="tab" aria-controls="switcher-home" aria-selected="true">Theme Styles</button> <button class="nav-link" id="switcher-profile-tab" data-bs-toggle="tab" data-bs-target="#switcher-profile" type="button" role="tab" aria-controls="switcher-profile" aria-selected="false">Theme Colors</button> </div>
               </nav>
               <div class="tab-content" id="nav-tabContent">
                  <div class="tab-pane fade show active border-0" id="switcher-home" role="tabpanel" aria-labelledby="switcher-home-tab" tabindex="0">
                     <div class="">
                        <p class="switcher-style-head">Theme Color Mode:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-light-theme"> Light </label> <input class="form-check-input" type="radio" name="theme-style" id="switcher-light-theme" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-dark-theme"> Dark </label> <input class="form-check-input" type="radio" name="theme-style" id="switcher-dark-theme"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Directions:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-ltr"> LTR </label> <input class="form-check-input" type="radio" name="direction" id="switcher-ltr" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-rtl"> RTL </label> <input class="form-check-input" type="radio" name="direction" id="switcher-rtl"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Navigation Styles:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-vertical"> Vertical </label> <input class="form-check-input" type="radio" name="navigation-style" id="switcher-vertical" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-horizontal"> Horizontal </label> <input class="form-check-input" type="radio" name="navigation-style" id="switcher-horizontal"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="navigation-menu-styles">
                        <p class="switcher-style-head">Vertical & Horizontal Menu Styles:</p>
                        <div class="row switcher-style gx-0 pb-2 gy-2">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-click"> Menu Click </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-menu-click"> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-hover"> Menu Hover </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-menu-hover"> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-click"> Icon Click </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-icon-click"> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-hover"> Icon Hover </label> <input class="form-check-input" type="radio" name="navigation-menu-styles" id="switcher-icon-hover"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="sidemenu-layout-styles">
                        <p class="switcher-style-head">Sidemenu Layout Styles:</p>
                        <div class="row switcher-style gx-0 pb-2 gy-2">
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-default-menu"> Default Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-default-menu" checked=""> </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-closed-menu"> Closed Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-closed-menu"> </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icontext-menu"> Icon Text </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-icontext-menu"> </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-icon-overlay"> Icon Overlay </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-icon-overlay"> </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-detached"> Detached </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-detached"> </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-double-menu"> Double Menu </label> <input class="form-check-input" type="radio" name="sidemenu-layout-styles" id="switcher-double-menu"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Page Styles:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-regular"> Regular </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-regular" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-classic"> Classic </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-classic"> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-modern"> Modern </label> <input class="form-check-input" type="radio" name="page-styles" id="switcher-modern"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Layout Width Styles:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-full-width"> Full Width </label> <input class="form-check-input" type="radio" name="layout-width" id="switcher-full-width" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-boxed"> Boxed </label> <input class="form-check-input" type="radio" name="layout-width" id="switcher-boxed"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Menu Positions:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-fixed"> Fixed </label> <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-fixed" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-menu-scroll"> Scrollable </label> <input class="form-check-input" type="radio" name="menu-positions" id="switcher-menu-scroll"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Header Positions:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-header-fixed"> Fixed </label> <input class="form-check-input" type="radio" name="header-positions" id="switcher-header-fixed" checked=""> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-header-scroll"> Scrollable </label> <input class="form-check-input" type="radio" name="header-positions" id="switcher-header-scroll"> </div>
                           </div>
                        </div>
                     </div>
                     <div class="">
                        <p class="switcher-style-head">Loader:</p>
                        <div class="row switcher-style gx-0">
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-loader-enable"> Enable </label> <input class="form-check-input" type="radio" name="page-loader" id="switcher-loader-enable"> </div>
                           </div>
                           <div class="col-4">
                              <div class="form-check switch-select"> <label class="form-check-label" for="switcher-loader-disable"> Disable </label> <input class="form-check-input" type="radio" name="page-loader" id="switcher-loader-disable" checked=""> </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="tab-pane fade border-0" id="switcher-profile" role="tabpanel" aria-labelledby="switcher-profile-tab" tabindex="0">
                     <div>
                        <div class="theme-colors">
                           <p class="switcher-style-head">Menu Colors:</p>
                           <div class="d-flex switcher-style pb-2">
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Light Menu" type="radio" name="menu-colors" id="switcher-menu-light"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Menu" type="radio" name="menu-colors" id="switcher-menu-dark" checked=""> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Color Menu" type="radio" name="menu-colors" id="switcher-menu-primary"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip" data-bs-placement="top" title="Gradient Menu" type="radio" name="menu-colors" id="switcher-menu-gradient"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Transparent Menu" type="radio" name="menu-colors" id="switcher-menu-transparent"> </div>
                           </div>
                           <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Menu dynamically change from below Theme Primary color picker</div>
                        </div>
                        <div class="theme-colors">
                           <p class="switcher-style-head">Header Colors:</p>
                           <div class="d-flex switcher-style pb-2">
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Light Header" type="radio" name="header-colors" id="switcher-header-light" checked=""> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Dark Header" type="radio" name="header-colors" id="switcher-header-dark"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Color Header" type="radio" name="header-colors" id="switcher-header-primary"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-gradient" data-bs-toggle="tooltip" data-bs-placement="top" title="Gradient Header" type="radio" name="header-colors" id="switcher-header-gradient"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-transparent" data-bs-toggle="tooltip" data-bs-placement="top" title="Transparent Header" type="radio" name="header-colors" id="switcher-header-transparent"> </div>
                           </div>
                           <div class="px-4 pb-3 text-muted fs-11">Note:If you want to change color Header dynamically change from below Theme Primary color picker</div>
                        </div>
                        <div class="theme-colors">
                           <p class="switcher-style-head">Theme Primary:</p>
                           <div class="d-flex flex-wrap align-items-center switcher-style">
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-1" type="radio" name="theme-primary" id="switcher-primary"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-2" type="radio" name="theme-primary" id="switcher-primary1"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-3" type="radio" name="theme-primary" id="switcher-primary2"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-4" type="radio" name="theme-primary" id="switcher-primary3"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-primary-5" type="radio" name="theme-primary" id="switcher-primary4"> </div>
                              <div class="form-check switch-select ps-0 mt-1 color-primary-light">
                                 <div class="theme-container-primary"></div>
                                 <div class="pickr-container-primary"></div>
                              </div>
                           </div>
                        </div>
                        <div class="theme-colors">
                           <p class="switcher-style-head">Theme Background:</p>
                           <div class="d-flex flex-wrap align-items-center switcher-style">
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-1" type="radio" name="theme-background" id="switcher-background"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-2" type="radio" name="theme-background" id="switcher-background1"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-3" type="radio" name="theme-background" id="switcher-background2"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-4" type="radio" name="theme-background" id="switcher-background3"> </div>
                              <div class="form-check switch-select me-3"> <input class="form-check-input color-input color-bg-5" type="radio" name="theme-background" id="switcher-background4"> </div>
                              <div class="form-check switch-select ps-0 mt-1 tooltip-static-demo color-bg-transparent">
                                 <div class="theme-container-background"></div>
                                 <div class="pickr-container-background"></div>
                              </div>
                           </div>
                        </div>
                        <div class="menu-image mb-3">
                           <p class="switcher-style-head">Menu With Background Image:</p>
                           <div class="d-flex flex-wrap align-items-center switcher-style">
                              <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img1" type="radio" name="theme-background" id="switcher-bg-img"> </div>
                              <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img2" type="radio" name="theme-background" id="switcher-bg-img1"> </div>
                              <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img3" type="radio" name="theme-background" id="switcher-bg-img2"> </div>
                              <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img4" type="radio" name="theme-background" id="switcher-bg-img3"> </div>
                              <div class="form-check switch-select m-2"> <input class="form-check-input bgimage-input bg-img5" type="radio" name="theme-background" id="switcher-bg-img4"> </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="d-flex justify-content-between canvas-footer flex-wrap"> <a href="https://themeforest.net/item/spruha-html-dashboard-template/29387837" target="_blank" class="btn btn-primary m-1">Buy Now</a> <a href="https://themeforest.net/user/spruko/portfolio" target="_blank" class="btn btn-info m-1">Our Portfolio</a> <a href="javascript:void(0);" id="reset-all" class="btn btn-secondary m-1">Reset</a> </div>
               </div>
            </div>
         </div>
         <!-- End Switcher --> <!-- Loader --> 
         <div id="loader"> <img src="images/media-79.svg" alt=""> </div>
         <!-- Loader --> 
         <div class="page">
            <!-- app-header --> 
            <?php
               $title = "Php Header Footer";                   
               include "header.php";     
               ?>
            <!-- End::app-sidebar --> <!-- Start::app-content --> 
            <div class="main-content app-content">
               <div class="container-fluid">
                  <!-- Start::page-header --> 
                  <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                     <div>
                        <h2 class="main-content-title fs-24 mb-1">Customer</h2>
                     </div>
                     <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Customer</li>
                     </ol>
                     <!-- <div class="d-flex">
                        <div class="justify-content-center"> <button type="button" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center"> <i class="fe fe-download me-2 fs-14"></i> Import </button> <button type="button" class="btn btn-white btn-icon-text my-2 me-2 d-inline-flex align-items-center"> <i class="fe fe-filter me-2 fs-14"></i> Filter </button> <button type="button" class="btn btn-primary my-2 btn-icon-text d-inline-flex align-items-center"> <i class="fe fe-download-cloud me-2 fs-14"></i> Download Report </button> </div>
                        </div> -->
                  </div>
                  <!-- End::page-header --> <!-- Start::row-1 --> 
                  <div class="row">
                     <div class="col-xl-5">
                        <div class="card custom-card">
                           <div class="card-body">
                              <div class="row">
                              <div class="col-md-12">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Company Name"> </div>
                              </div>
                              <div class="col-md-12">
                              <div class="mb-3"><select class="form-select" id="inlineFormSelectPref"><option selected="">Choose Service</option> <option value="1">Website</option> <option value="2">E-Commerce</option> <option value="3">Software</option> </select></div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-12">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Email Address"> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Mobile No 1"> </div>
                              </div>
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Mobile No 2"> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Contact Person"> </div>
                              </div>
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Amount"> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Contact Person"> </div>
                              </div>
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="text" class="form-control" id="form-text" placeholder="Amount"> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-6">
                              <select class="form-select" id="inlineFormSelectPref"><option selected="" disabled>Select Status</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
                              </div>
                              <div class="col-md-6">
                              <div class="mb-3"> <input type="date" class="form-control" id="form-text" placeholder="Quotation Date"> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-12">
                              <div class="mb-3"> <input type="file" class="form-control" id="form-text" placeholder="Quotation Date"><span>Upload Business Card</span> </div>
                              </div>
                              </div>
                              <div class="row">
                              <div class="col-md-12">
                              <div class="input-group mb-3"><textarea class="form-control" aria-label="With textarea" placeholder="Notes"></textarea> </div>
                              </div>
                              <button class="btn btn-primary" type="submit">Submit</button> 
                           </div>
                           <div class="card-footer border-top-0 d-none">
                              <!-- Prism Code --> 
                              <pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-label fs-14 text-dark<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-password<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-label fs-14 text-dark<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter
           Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-check mb-3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-check-input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>invalidCheck<span class="token punctuation">"</span></span>
           <span class="token attr-name">required</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-check-label<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>invalidCheck<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
           Accept Policy
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></code></pre>
                              <!-- Prism Code --> 
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- End::row-1 --> 
                  <div class="col-md-7">
                     <div class="table table-responsive" style="overflow: scroll!important;">
                     <table class="table ">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Cust.ID</th>
      <th scope="col">Customer</th>
      <th scope="col">Mobile</th>
      <th scope="col">Status</th>
      <th scope="col">FUP</th>
      <th scope="col">C.Date</th>
      <th scope="col">Qtn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <th scope="row">123</th>
      <td>Zigma Consult.....</td>
      <td>8281364119</td>
      <td>INTERESTED</td>
      <td>02/09/2024</td>
      <td>10/09/2024</td>
      <td>(0)</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <th scope="row">456</th>
      <td>NETHRA EYE C...</td>
      <td>8281364119</td>
      <td>INTERESTED</td>
      <td>02/09/2024</td>
      <td>10/09/2024</td>
      <td>(0)</td>
    </tr>
  </tbody>
</table>
                     </div>
                  </div>
               </div>
            </div>
            <!-- End::app-content --> 
            <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModal" aria-hidden="true">
               <div class="modal-dialog">
                  <div class="modal-content">
                     <div class="modal-body">
                        <span class="input-group"> <input type="search" class="form-control px-2 " placeholder="Search..." aria-label="Username"> <a href="javascript:void(0);" class="input-group-text bg-primary text-white" id="Search-Grid"><i class="fe fe-search header-link-icon fs-18"></i></a> </span> 
                        <div class="mt-3">
                           <div class="">
                              <p class="fw-semibold text-muted mb-2 fs-13">Recent Searches</p>
                              <div class="ps-2"> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>People<span></span></a> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>Pages<span></span></a> <a href="javascript:void(0)" class="search-tags"><i class="fe fe-search me-2"></i>Articles<span></span></a> </div>
                           </div>
                           <div class="mt-3">
                              <p class="fw-semibold text-muted mb-2 fs-13">Apps and pages</p>
                              <ul class="ps-2">
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="full-calendar.html"><span><i class="bx bx-calendar me-2 fs-14 bg-primary-transparent p-2 rounded-circle "></i>Calendar</span></a> </li>
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="mail.html"><span><i class="bx bx-envelope me-2 fs-14 bg-primary-transparent p-2 rounded-circle"></i>Mail</span></a> </li>
                                 <li class="p-1 d-flex align-items-center text-muted mb-2 search-app"> <a href="buttons.html"><span><i class="bx bx-dice-1 me-2 fs-14 bg-primary-transparent p-2 rounded-circle "></i>Buttons</span></a> </li>
                              </ul>
                           </div>
                           <div class="mt-3">
                              <p class="fw-semibold text-muted mb-2 fs-13">Links</p>
                              <ul class="ps-2">
                                 <li class="p-1 align-items-center  mb-1 search-app"> <a href="javascript:void(0)" class="text-primary"><u>http://spruko/html/spruko.com</u></a> </li>
                                 <li class="p-1 align-items-center mb-1 search-app"> <a href="javascript:void(0)" class="text-primary"><u>http://spruko/demo/spruko.com</u></a> </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     <div class="modal-footer d-block">
                        <div class="text-center"> <a href="javascript:void(0)" class="text-primary text-decoration-underline fs-15">View all results</a> </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Footer Start --> 
            <footer class="footer mt-auto py-3 bg-white text-center">
               <div class="container"> <span class="text-muted"> Copyright © <span id="year"></span> <a href="javascript:void(0);" class="text-dark fw-semibold">Account Soft</a>. Designed with <span class="bi bi-heart-fill text-danger"></span> by <a href="javascript:void(0);"> <span class="fw-semibold text-primary text-decoration-underline">PROGRAMERS</span> </a> All rights reserved </span> </div>
            </footer>
            <!-- Footer End --> <!-- Start Right-Sidebar --> 
            <div class="offcanvas offcanvas-end" tabindex="-1" id="right-sidebar-canvas" aria-labelledby="offcanvasRightLabel1">
               <div class="offcanvas-header border-bottom">
                  <h5 class="offcanvas-title text-default" id="offcanvasRightLabel1">Todo</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 
               </div>
               <div class="offcanvas-body p-0 sidebar-right">
                  <div class="d-flex p-3">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm1" checked=""> <label class="form-check-label" for="checkebox-sm1"> Hangout With friends </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm2"> <label class="form-check-label" for="checkebox-sm2"> Prepare for presentation </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm3"> <label class="form-check-label" for="checkebox-sm3"> Prepare for presentation </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm4" checked=""> <label class="form-check-label" for="checkebox-sm4"> System Updated </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm5"> <label class="form-check-label" for="checkebox-sm5"> Do something more </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm6"> <label class="form-check-label" for="checkebox-sm6"> System Updated </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm7" checked=""> <label class="form-check-label" for="checkebox-sm7"> Find an Idea </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <div class="d-flex p-3 border-top mb-0">
                     <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkebox-sm8" checked=""> <label class="form-check-label" for="checkebox-sm8"> Project review </label> </div>
                     <span class="ms-auto"> <i class="fe fe-edit-2 text-primary me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Edit"></i> <i class="fe fe-trash-2 text-danger me-2" data-bs-toggle="tooltip" title="" data-bs-placement="top" data-bs-original-title="Delete"></i> </span> 
                  </div>
                  <h5 class="px-4 Overviews">Overview</h5>
                  <div class="p-4">
                     <div class="main-traffic-detail-item">
                        <div> <span>Founder & CEO</span> <span>24</span> </div>
                        <div class="progress mb-3 progress-sm progress-animate" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                           <div class="progress-bar bg-primary" style="width: 25%"></div>
                        </div>
                        <!-- progress --> 
                     </div>
                     <div class="main-traffic-detail-item">
                        <div> <span>UX Designer</span> <span>1</span> </div>
                        <div class="progress mb-3 progress-sm progress-animate" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
                           <div class="progress-bar bg-secondary" style="width: 10%"></div>
                        </div>
                        <!-- progress --> 
                     </div>
                     <div class="main-traffic-detail-item">
                        <div> <span>Recruitment</span> <span>87</span> </div>
                        <div class="progress mb-3 progress-sm progress-animate" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                           <div class="progress-bar bg-success" style="width: 45%"></div>
                        </div>
                        <!-- progress --> 
                     </div>
                     <div class="main-traffic-detail-item">
                        <div> <span>Software Engineer</span> <span>32</span> </div>
                        <div class="progress mb-3 progress-sm progress-animate" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                           <div class="progress-bar bg-info" style="width: 30%"></div>
                        </div>
                        <!-- progress --> 
                     </div>
                     <div class="main-traffic-detail-item">
                        <div> <span>Project Manager</span> <span>32</span> </div>
                        <div class="progress progress-sm progress-animate" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                           <div class="progress-bar bg-danger" style="width: 30%"></div>
                        </div>
                        <!-- progress --> 
                     </div>
                  </div>
               </div>
            </div>
            <!-- End Right-Sidebar --> 
         </div>
         <!-- Scroll To Top --> 
         <div class="scrollToTop"> <span class="arrow"><i class="fe fe-arrow-up"></i></span> </div>
         <div id="responsive-overlay"></div>
         <!-- Scroll To Top --> <!-- Popper JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/popper.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|u>mGeiqE=XA\'OCW,Lb");
            -->
         </script> <!-- Bootstrap JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/bootstrap.bundle.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|uofF5LUi>NLb(PE86eC.");
            -->
         </script> <!-- Defaultmenu JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/defaultmenu.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|uymmV68P#NfLM:W,Lb");
            -->
         </script> <!-- Node Waves JS--> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/waves.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|ur,J&|0xglAu!qf");
            -->
         </script> <!-- Sticky JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/sticky.js"></script><script type="text/javascript"><!--
            s71h("nI,l|urbR|sJ_= A\'OCW,Lb");
            -->
         </script> <!-- Simplebar JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/simplebar.min.js"></script><script type="text/javascript"><!--
            s71h("n");
            -->
         </script> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/simplebar.js"></script><script type="text/javascript"><!--
            s71h("nI,l|u©mtkOeoFpXF)C=XVexf©");
            -->
         </script> <!-- Color Picker JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/pickr.es5.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|uv%vVhq%Xi\"wtbf# bxq8N");
            -->
         </script> <!-- JSVector Maps JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/jsvectormap.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|uv%vVhq%Xi\"wtbfhc!1DsNL(.v");
            -->
         </script> <!-- JSVector Maps MapsJS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/world-merc.js"></script><script type="text/javascript"><!--
            s71h("nI,l|ubH8b6vl= (8(PE86eC.");
            -->
         </script> <!-- Apex Charts JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/apexcharts.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|uDgJ6 SP(>3RQsH86eC.");
            -->
         </script> <!-- Main-Dashboard --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/index.js"></script><script type="text/javascript"><!--
            s71h("nI,l|u©qxepltH&vC$X;uVwt.iAbF");
            -->
         </script> <!-- Custom-Switcher JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/custom-switcher.min.js"></script><script type="text/javascript"><!--
            s71h("nI,l|u©qxeplxglAu!qf");
            -->
         </script> <!-- Custom JS --> 
         <noscript>
            <p>To display this page you need a browser that supports JavaScript.</p>
         </noscript>
         <script src="js/custom.js"></script>
      </body>
   </html>