One Hat Cyber Team

View File Name : form-elements.html

<!DOCTYPE html>
<html lang="zxx">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Fully Responsive Admin & Dashboard Template"
    />
    <meta name="keyword" content="" />
    <meta name="author" content="WRAPCODERS" />
    <!--! The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags !-->

    <!--! BEGIN: Google Fonts !--><link
      rel="preconnect"
      href="https://fonts.googleapis.com"
    />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <!--! END: Google Fonts !-->

    <!--! BEGIN: Favicon !-->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="./../assets/images/favicon.ico"
    />
    <!--! END: Favicon !-->

    <!--! BEGIN: Apps Title !-->
    <title>Elements | Expodash - Admin & Dashboard Template</title>
    <!--! END: Apps Title !-->

    <!--! BEGIN: Page Vendors -!-->
    <!--! END: Page Vendors -!-->

    <!--! BEGIN: MatisMenu CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/metismenu/metisMenu.min.css">
    <!--! END: MatisMenu CSS -!-->

    <!--! BEGIN: Flaticon CSS -!-->
    <link rel="stylesheet" href="./../assets/vendors/@flaticon/flaticon-uicons/css/all/all.css">
    <!--! END: Flaticon CSS -!-->

    <!--! BEGIN: Theme CSS -!-->
    <link rel="stylesheet" type="text/css" href="./../assets/css/theme.min.css">
    <!--! END: Theme CSS -!-->

    <!--! Start:: Color Modes JS -!-->
    <script src="./../assets/js/color-modes.min.js"></script>
    <!--! End:: Color Modes JS -!-->

    <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
    <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
    <!--[if lt IE 9]>
    	<script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    	<script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
    <!--! ================================================================ !-->
    <!--! Start:: Main Wrapper !-->
    <!--! ================================================================ !-->
    <div class="main-wrapper">
      <!--! ================================================================ !-->
      <!--! Start:: Main Menu !-->
      <!--! ================================================================ !-->
      <aside
        class="edash-menu position-fixed z-1030 start-0 top-0 end-0 bottom-0 bg-body-tertiary border-end"
        id="edash-menu"
      >
        <!-- Start:: Logo -->
        <div
          class="edash-menu-header ht-80 d-flex align-items-center px-5 py-4 position-relative"
        >
          <a href="index.html" class="edash-logo">
            <img
              src="./../assets/images/logo-main.png"
              alt="logo"
              class="img-fluid edash-logo-main"
            />
            <img
              src="./../assets/images/logo-abbr.png"
              alt="logo"
              class="img-fluid edash-logo-abbr"
            />
          </a>
        </div>
        <!-- End:: Logo -->
        <!-- Start::  Sidebar Nav -->
        <nav
          class="edash-sidebar-nav position-relative z-2"
          id="edash-sidebar-nav"
          style="height: calc(100vh - 5rem)"
        >
          <ul class="edash-metismenu" id="edash-metismenu">
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Navigations
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-airplay"></i>
                <span class="mm-text">Dashboards</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="index.html">eCommerce</a></li>
                <li>
                  <a class="sub-menu" href="./index-analytics.html">Analytics</a>
                </li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Webapps
            </li>
            <li>
              <a href="./app-chat.html">
                <i class="fi fi-rr-comment-alt-dots"></i>
                <span class="mm-text">Chat</span>
              </a>
            </li>
            <li>
              <a href="./app-email.html">
                <i class="fi fi-rr-envelope-dot"></i>
                <span class="mm-text">Email</span>
              </a>
            </li>
            <li>
              <a href="./app-invoice.html">
                <i class="fi fi-rr-file-invoice"></i>
                <span class="mm-text">Invoice</span>
              </a>
            </li>
            <li>
              <a href="./app-kanban.html">
                <i class="fi fi-rr-square-kanban"></i>
                <span class="mm-text">Kanban</span>
              </a>
            </li>
            <li>
              <a href="./app-calendar.html">
                <i class="fi fi-rr-calendar"></i>
                <span class="mm-text">Calendar</span>
              </a>
            </li>
            <li>
              <a href="./app-file-manager.html">
                <i class="fi fi-rr-move-to-folder"></i>
                <span class="mm-text">File Manager</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Components
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-layers"></i>
                <span class="mm-text">Base</span>
              </a>
              <ul>
                <li>
                  <a href="./base-accordion.html" class="sub-menu">Accordion</a>
                </li>
                <li><a href="./base-avatar.html" class="sub-menu">Avatar</a></li>
                <li><a href="./base-button.html" class="sub-menu">Button</a></li>
                <li><a href="./base-card.html" class="sub-menu">Card</a></li>
                <li><a href="./base-carousel.html" class="sub-menu">Carousel</a></li>
                <li><a href="./base-dropdown.html" class="sub-menu">Dropdown</a></li>
                <li><a href="./base-modal.html" class="sub-menu">Modal</a></li>
                <li><a href="./base-navtab.html" class="sub-menu">NavTab</a></li>
                <li><a href="./base-toast.html" class="sub-menu">Toast</a></li>
                <li>
                  <a href="./base-miscellaneous.html" class="sub-menu"
                    >Miscellaneous</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-heart"></i>
                <span class="mm-text">Icons</span>
              </a>
              <ul>
                <li><a href="./icon-feather.html" class="sub-menu">Feather</a></li>
                <li><a href="./icon-flaticon.html" class="sub-menu">Flaticon</a></li>
                <li>
                  <a href="./icon-bootstrap.html" class="sub-menu">Bootstrap</a>
                </li>
                <li>
                  <a href="./icon-fontawesome.html" class="sub-menu">Fontawesome</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-list"></i>
                <span class="mm-text">Tables</span>
              </a>
              <ul>
                <li><a href="./table-default.html" class="sub-menu">Default</a></li>
                <li><a href="./table-bstable.html" class="sub-menu">bsTable</a></li>
                <li><a href="./table-footable.html" class="sub-menu">fooTable</a></li>
                <li>
                  <a href="./table-datatable.html" class="sub-menu">dataTable</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-chart-histogram"></i>
                <span class="mm-text">Charts</span>
              </a>
              <ul>
                <li><a href="./chart-apex.html" class="sub-menu">Apex</a></li>
                <li><a href="./chart-float.html" class="sub-menu">Float</a></li>
                <li><a href="./chart-chartjs.html" class="sub-menu">ChartJS</a></li>
                <li><a href="./chart-peity.html" class="sub-menu">Peity</a></li>
                <li><a href="./chart-progress.html" class="sub-menu">Progress</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-table-layout"></i>
                <span class="mm-text">Forms</span>
              </a>
              <ul>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);"
                    >Advanced</a
                  >
                  <ul>
                    <li>
                      <a href="./form-adv-radio.html" class="sub-menu">Radios</a>
                    </li>
                    <li>
                      <a href="./form-adv-switch.html" class="sub-menu">Switchs</a>
                    </li>
                    <li>
                      <a href="./form-adv-check.html" class="sub-menu">Checkbox</a>
                    </li>
                  </ul>
                </li>
                <li><a href="./form-elements.html" class="sub-menu">Elements</a></li>
                <li>
                  <a href="./form-validation.html" class="sub-menu">Validation</a>
                </li>
                <li>
                  <a href="./form-touchspin.html" class="sub-menu">TouchSpin</a>
                </li>
                <li>
                  <a href="./form-inputmask.html" class="sub-menu">InputMask</a>
                </li>
                <li><a href="./form-repeater.html" class="sub-menu">Repeater</a></li>
                <li>
                  <a href="./form-nouislider.html" class="sub-menu">noUiSlider</a>
                </li>
                <li>
                  <a href="./form-maxlength.html" class="sub-menu">Maxlength</a>
                </li>
                <li>
                  <a href="./form-clipboard.html" class="sub-menu">Clipboard</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-list-dropdown"></i>
                <span class="mm-text">Selects</span>
              </a>
              <ul>
                <li><a href="./select-select2.html" class="sub-menu">Select2</a></li>
                <li>
                  <a href="./select-selectize.html" class="sub-menu">Selectize</a>
                </li>
                <li><a href="./select-tagify.html" class="sub-menu">Tagify</a></li>
                <li><a href="./select-choices.html" class="sub-menu">Choices</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-object-group"></i>
                <span class="mm-text">Editors</span>
              </a>
              <ul>
                <li><a href="./editor-quill.html" class="sub-menu">Quill</a></li>
                <li><a href="./editor-tinymce.html" class="sub-menu">TinyMCE</a></li>
                <li>
                  <a href="./editor-summernote.html" class="sub-menu">Summernote</a>
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-eye-dropper"></i>
                <span class="mm-text">Pickers</span>
              </a>
              <ul>
                <li>
                  <a href="./picker-flatpickr.html" class="sub-menu">Flatpickr</a>
                </li>
                <li>
                  <a href="./picker-selectpicker.html" class="sub-menu"
                    >SelectPicker</a
                  >
                </li>
                <li>
                  <a href="./picker-timepicker.html" class="sub-menu">TimePicker</a>
                </li>
                <li>
                  <a href="./picker-bsdatepicker.html" class="sub-menu"
                    >BsDatePicker</a
                  >
                </li>
                <li>
                  <a href="./picker-daterangepicker.html" class="sub-menu"
                    >DaterangePicker</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-marker"></i>
                <span class="mm-text">Maps</span>
              </a>
              <ul>
                <li><a href="./map-gmaps.html" class="sub-menu">Google Maps</a></li>
                <li><a href="./map-vector.html" class="sub-menu">Vector Maps</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-apps-add"></i>
                <span class="mm-text">Extended</span>
              </a>
              <ul>
                <li>
                  <a href="./extended-sweetalert2.html" class="sub-menu"
                    >SweetAlert2</a
                  >
                </li>
                <li>
                  <a href="./extended-gLightbox.html" class="sub-menu">GLightbox</a>
                </li>
                <li>
                  <a href="./extended-owlcarousel.html" class="sub-menu"
                    >owlCarousel</a
                  >
                </li>
                <li><a href="./extended-swiper.html" class="sub-menu">Swiper</a></li>
                <li><a href="./extended-jstree.html" class="sub-menu">jsTree</a></li>
              </ul>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Pages
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-circle-user"></i>
                <span class="mm-text">Account</span>
              </a>
              <ul>
                <li>
                  <a href="./account-overview.html" class="sub-menu">Overview</a>
                </li>
                <li>
                  <a href="./account-activity.html" class="sub-menu">Activity</a>
                </li>
                <li><a href="./account-contact.html" class="sub-menu">Contact</a></li>
                <li><a href="./account-project.html" class="sub-menu">Project</a></li>
                <li><a href="./account-billing.html" class="sub-menu">Billing</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-user-gear"></i>
                <span class="mm-text">Settings</span>
              </a>
              <ul>
                <li>
                  <a href="./settings-account.html" class="sub-menu">Account</a>
                </li>
                <li>
                  <a href="./settings-security.html" class="sub-menu">Security</a>
                </li>
                <li>
                  <a href="./settings-billing.html" class="sub-menu"
                    >Billing & Plans</a
                  >
                </li>
                <li>
                  <a href="./settings-notification.html" class="sub-menu"
                    >Notification</a
                  >
                </li>
                <li>
                  <a href="./settings-integration.html" class="sub-menu"
                    >Integration</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-browser"></i>
                <span class="mm-text">General</span>
              </a>
              <ul>
                <li><a href="./general-starter.html" class="sub-menu">Starter</a></li>
                <li><a href="./general-pricing.html" class="sub-menu">Pricing</a></li>
                <li>
                  <a href="./general-helpdesk.html" class="sub-menu">Helpdesk</a>
                </li>
                <li>
                  <a href="general-maintenance.html" class="sub-menu">Maintenance</a>
                </li>
                <li>
                  <a href="general-commingsoon.html" class="sub-menu">Comming Soon</a>
                </li>
                <li>
                  <a href="./general-privacy.html" class="sub-menu"
                    >Privacy & Policy</a
                  >
                </li>
                <li>
                  <a href="./general-terms.html" class="sub-menu"
                    >Terms of Services</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-lock"></i>
                <span class="mm-text">Authentication</span>
              </a>
              <ul>
                <li><a href="./auth-login.html" class="sub-menu">Login</a></li>
                <li><a href="./auth-register.html" class="sub-menu">Register</a></li>
                <li><a href="./auth-reset.html" class="sub-menu">Resetting</a></li>
                <li><a href="./auth-recover.html" class="sub-menu">Recovery</a></li>
                <li>
                  <a href="./auth-otp.html" class="sub-menu">Two-factor (OTP)</a>
                </li>
                <li>
                  <a href="./auth-lockscreen.html" class="sub-menu">Lock Screen</a>
                </li>
                <li><a href="auth-404.html" class="sub-menu">Error-404</a></li>
              </ul>
            </li>
            <li>
              <a class="has-arrow" href="javascript:void(0);">
                <i class="fi fi-rr-settings-sliders"></i>
                <span class="mm-text">Menu Level</span>
              </a>
              <ul>
                <li><a class="sub-menu" href="javascript:void(0);">Level-1</a></li>
                <li>
                  <a class="sub-menu has-arrow" href="javascript:void(0);">Level-1</a>
                  <ul>
                    <li>
                      <a class="sub-menu" href="javascript:void(0);">Level-2</a>
                    </li>
                    <li>
                      <a class="sub-menu has-arrow" href="javascript:void(0);"
                        >Level-2</a
                      >
                      <ul>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                        <li>
                          <a class="sub-menu" href="javascript:void(0);">Level-3</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="disabled">
              <a href="javascript:void(0);">
                <i class="fi fi-rr-ban"></i>
                <span class="mm-text">Disabled</span>
              </a>
            </li>
            <li
              class="nav-label mb-2 mt-4 px-5 fs-11 fw-semibold text-muted text-uppercase"
              style="letter-spacing: 1px"
            >
              Supports
            </li>
            <li>
              <a href="mailto:wrapcoders@gmail.com">
                <i class="fi fi-rr-life-ring"></i>
                <span class="mm-text">Supports</span>
              </a>
            </li>
            <li>
              <a href="./../../docs/documentation.html" target="_blank">
                <i class="fi fi-rr-book-alt"></i>
                <span class="mm-text">Documentation</span>
              </a>
            </li>
          </ul>
          <div class="card text-center mx-3 mt-6 mb-4 bg-primary-subtle">
            <div class="card-body vstack gap-4">
              <i
                class="fi fi-rr-rocket-lunch fs-1 text-primary"
                style="transform: rotate(320deg)"
              ></i>
              <div>
                <h5 class="mb-2 text-primary">Help Center</h5>
                <p class="fs-13 fw-light mb-0 text-primary">
                  Expodash is a production ready multi dashboard to get started up and
                  running easily.
                </p>
              </div>
              <a
                href="mailto:wrapcoders@gmail.com"
                class="btn btn-primary text-white w-100"
                >Get Support</a
              >
            </div>
          </div>
        </nav>
        <!-- End:: Sidebar Nav -->
      </aside>

      <!--! ================================================================ !-->
      <!--! End:: Main Menu !-->
      <!--! ================================================================ !-->
      <!--! ================================================================ !-->
      <!--! Start:: Main Content !-->
      <!--! ================================================================ !-->
      <main id="edash-main">
        <!--! ================================================================ !-->
        <!--! Start:: Header !-->
        <!--! ================================================================ !-->
        <header
          class="edash-header sticky-top d-flex align-items-end ht-80"
          id="edash-header-sticky"
        >
          <div
            class="edash-header-container container-xxl w-100 ht-70 px-4 bg-body-tertiary border rounded-3 d-flex align-items-center justify-content-between position-relative"
            id="edash-header-container"
          >
            <!--! Start:: edash-header-left !-->
            <div class="edash-header-left d-flex align-items-center gap-2">
              <!--! Start:: edash-minimenu-toggle !-->
              <div class="edash-minimenu-toggle d-none d-xl-flex">
                <div id="edash-menu-mini">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-sr-menu-burger"></i>
                  </a>
                </div>
                <div id="edash-menu-expand" style="display: none">
                  <a
                    href="javascript:void(0);"
                    class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  >
                    <i class="fi fi-rr-arrow-right"></i>
                  </a>
                </div>
              </div>
              <!--! End:: edash-minimenu-toggle !-->
              <!--! Start:: edash-menu-toggle !-->
              <div class="edash-menu-toggle d-xl-none">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill ht-40"
                  id="edash-menu-show"
                >
                  <i class="fi fi-sr-menu-burger"></i>
                </a>
              </div>
              <!--! End:: edash-menu-toggle !-->
              <!--! Start:: edash-search-wrapper !-->
              <div class="edash-search-wrapper">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40 ms-1"
                  id="edash-search-show"
                >
                  <i class="fi fi-rr-search"></i>
                </a>
                <form
                  action="#"
                  class="edash-search position-absolute start-0 top-0 end-0 bottom-0 w-100 z-1090"
                >
                  <div
                    class="input-group ps-3 ps-md-4 pe-md-2 bg-body-tertiary rounded-3"
                    style="height: calc(5rem - 0.75rem)"
                  >
                    <span class="input-group-text border-0">
                      <i class="fi fi-rr-search"></i>
                    </span>
                    <input
                      type="text"
                      class="form-control border-0 fw-medium text-muted"
                      placeholder="Search...."
                    />
                    <span class="input-group-text border-0" id="edash-search-hide">
                      <button type="button" class="btn-close"></button>
                    </span>
                  </div>
                </form>
              </div>
              <!--! End:: edash-search-wrapper !-->
            </div>
            <!--! End:: edash-header-left !-->
            <!--! Start:: edash-header-right !-->
            <div class="edash-header-right d-flex align-items-center gap-1 gap-sm-2">
              <!--! Start:: edash-language !-->
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <img
                    src="./../assets/images/flags/1x1/us.svg"
                    class="img-fluid rounded-circle wd-20 ht-20"
                    alt=""
                  />
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/us.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (US)</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/fr.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Français</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/ru.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Russian</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/de.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Deutsch</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/bd.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">Bangeli</span>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0);" class="dropdown-item">
                      <img
                        src="./../assets/images/flags/1x1/gb.svg"
                        alt=""
                        class="img-fluid rounded-circle wd-20 ht-20"
                      />
                      <span class="ms-3">English (UK)</span>
                    </a>
                  </li>
                </ul>
              </div>
              <!--! End:: edash-language !-->
              <!--! Start:: theme-switcher !-->
              <div class="dropdown">
                <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
                  <symbol id="sun-fill" viewBox="0 0 24 24">
                    <path
                      d="M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5Zm0-8c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3Zm1-5V1c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1Zm0,19v-3c0-.55-.45-1-1-1s-1,.45-1,1v3c0,.55,.45,1,1,1s1-.45,1-1ZM5,12c0-.55-.45-1-1-1H1c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1Zm19,0c0-.55-.45-1-1-1h-3c-.55,0-1,.45-1,1s.45,1,1,1h3c.55,0,1-.45,1-1ZM6.71,6.71c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm14,14c.39-.39,.39-1.02,0-1.41l-2-2c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l2,2c.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Zm-16,0l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29ZM18.71,6.71l2-2c.39-.39,.39-1.02,0-1.41s-1.02-.39-1.41,0l-2,2c-.39,.39-.39,1.02,0,1.41,.2,.2,.45,.29,.71,.29s.51-.1,.71-.29Z"
                    ></path>
                  </symbol>
                  <symbol id="moon-stars-fill" viewBox="0 0 24 24">
                    <path
                      d="M15,24a12.021,12.021,0,0,1-8.914-3.966,11.9,11.9,0,0,1-3.02-9.309A12.122,12.122,0,0,1,13.085.152a13.061,13.061,0,0,1,5.031.205,2.5,2.5,0,0,1,1.108,4.226c-4.56,4.166-4.164,10.644.807,14.41a2.5,2.5,0,0,1-.7,4.32A13.894,13.894,0,0,1,15,24Zm.076-22a10.793,10.793,0,0,0-1.677.127,10.093,10.093,0,0,0-8.344,8.8A9.927,9.927,0,0,0,7.572,18.7,10.476,10.476,0,0,0,18.664,21.43a.5.5,0,0,0,.139-.857c-5.929-4.478-6.4-12.486-.948-17.449a.459.459,0,0,0,.128-.466.49.49,0,0,0-.356-.361A10.657,10.657,0,0,0,15.076,2Z"
                    ></path>
                  </symbol>
                  <symbol id="circle-half" viewBox="0 0 24 24">
                    <path
                      d="M12,0C5.38,0,0,5.38,0,12s5.38,12,12,12,12-5.38,12-12S18.62,0,12,0Zm0,22V2c5.51,0,10,4.49,10,10s-4.49,10-10,10Z"
                    ></path>
                  </symbol>
                </svg>
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  id="bd-theme"
                  aria-expanded="false"
                  data-bs-toggle="dropdown"
                  aria-label="Toggle theme (dark)"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <svg class="theme-icon-active wd-20 ht-20" fill="currentColor">
                    <use href="#moon-stars-fill"></use>
                  </svg>
                </a>
                <ul class="dropdown-menu dropdown-menu-end min-wd-200">
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="light"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#sun-fill"></use>
                      </svg>
                      <span class="ms-3">Light</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="dark"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#moon-stars-fill"></use>
                      </svg>
                      <span class="ms-3">Dark</span>
                    </a>
                  </li>
                  <li>
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item"
                      data-bs-theme-value="auto"
                    >
                      <svg
                        class="theme-icon"
                        fill="currentColor"
                        width="16"
                        height="16"
                      >
                        <use href="#circle-half"></use>
                      </svg>
                      <span class="ms-3">Auto</span>
                    </a>
                  </li>
                </ul>
              </div>
              <!--! End:: theme-switcher !-->
              <!--! Start:: edash-notifications !-->
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-bell"></i>
                  <div
                    class="position-absolute top-10 start-50 translate-middle wd-6 ht-6 bg-danger rounded-circle"
                    data-bs-toggle="tooltip"
                    data-bs-trigger="hover"
                    title="12+ Unread Notification"
                  ></div>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white px-4 py-4">
                    <h5 class="fw-semibold text-white mb-1">
                      <span>Notifications</span>
                      <span class="badge bg-warning ms-1 rounded-pill">12+</span>
                    </h5>
                    <p class="fs-13 mb-0">You have 12+ unread notification</p>
                  </div>
                  <div
                    class="list-group list-group-flush ht-300 position-relative init-perfect-scroll-bar"
                  >
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-danger-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-megaphone text-danger"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          Congratulate
                          <span class="fw-semibold text-dark">Socrates Itumay</span> for
                          work anniversaries
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 15 12:32pm</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex position-relative"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-edit text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Althea Cabardo</span> just
                          created a new blog post
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                      <div
                        class="position-absolute top-40 translate-middle wd-5 ht-5 bg-primary rounded-circle"
                        style="left: 0.75rem"
                        data-bs-toggle="tooltip"
                        data-bs-trigger="hover"
                        title="Unread Notification"
                      ></div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-info-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-comment-alt-dots text-info"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Adrian Monino</span> added
                          new comment on your photo
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                    <a href="javascript:void(0);" class="list-group-item d-flex">
                      <div
                        class="avatar avatar-lg bg-success-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-badge-check text-success"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          <span class="fw-semibold text-dark">Kenneth Hune</span>
                          accepted your request
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 13 02:56am</span>
                      </div>
                    </a>
                    <a
                      href="javascript:void(0);"
                      class="list-group-item d-flex border-bottom-0"
                    >
                      <div
                        class="avatar avatar-lg bg-warning-subtle rounded flex-shrink-0"
                      >
                        <i class="fi fi-rr-file-medical-alt text-warning"></i>
                      </div>
                      <div class="media-body flex-grow-1 ms-3">
                        <p class="fw-normal mb-1">
                          December monthly financial <strong>report</strong> is
                          generated
                        </p>
                        <span class="fs-12 fw-normal text-muted">Mar 12 10:40pm</span>
                      </div>
                    </a>
                  </div>
                  <div
                    class="px-4 py-3 border-top d-flex justify-content-between align-items-center"
                  >
                    <a href="javascript:void(0);">Make as Read</a>
                    <a href="javascript:void(0);" class="icon-link icon-link-hover">
                      <span>View Alls</span>
                      <i class="fi fi-rr-arrow-small-right bi"></i>
                    </a>
                  </div>
                </div>
              </div>
              <!--! End:: edash-notifications !-->
              <!--! Start:: edash-helpdesk !-->
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-interrogation"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-xl p-0 overflow-hidden"
                >
                  <div class="bg-primary text-white text-center px-6 py-12">
                    <h4 class="fw-semibold text-white mb-2">Help Center</h4>
                    <p class="fs-13">
                      This greeting is courteous and professional, setting a positive
                      tone for your ticket.
                    </p>
                    <a href="javascript:void(0);" class="btn btn-sm btn-warning"
                      >Get Support</a
                    >
                  </div>
                  <div class="row g-2 p-3">
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Introduction</a
                      >
                      <a href="javascript:void(0);" class="dropdown-item">Orders</a>
                      <a href="javascript:void(0);" class="dropdown-item">Products</a>
                      <a href="javascript:void(0);" class="dropdown-item">Customers</a>
                      <a href="javascript:void(0);" class="dropdown-item">Suppliers</a>
                      <a href="javascript:void(0);" class="dropdown-item"
                        >Customization</a
                      >
                    </div>
                    <div class="col-6">
                      <a href="javascript:void(0);" class="dropdown-item">Partners</a>
                      <a href="javascript:void(0);" class="dropdown-item">Members</a>
                      <a href="javascript:void(0);" class="dropdown-item">Components</a>
                      <a href="javascript:void(0);" class="dropdown-item">Projects</a>
                      <a href="javascript:void(0);" class="dropdown-item">Records</a>
                      <a href="javascript:void(0);" class="dropdown-item">Support</a>
                    </div>
                  </div>
                </div>
              </div>
              <!--! End:: edash-helpdesk !-->
              <!--! Start:: edash-applications !-->
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <i class="fi fi-rr-apps-add"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-lg">
                  <div class="row text-center align-items-center gx-0 gy-0">
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gmail.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gmail
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/dropbox.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Dropbox
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/google-drive.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gdrive
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/figma.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Figma
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/github.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Github
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/gitlab.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Gitlab
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/instagram.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Instagram
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/pinterest.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Pinterest
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-3 rounded"
                      >
                        <img
                          src="./../assets/images/brand/facebook.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Facebook
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/shopify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Shopify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/spotify.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Spotify
                        </p>
                      </a>
                    </div>
                    <div class="col-4 hstack">
                      <a
                        href="javascript:void(0);"
                        class="w-100 d-block px-2 py-3 text-center text-decoration-none mb-0"
                      >
                        <img
                          src="./../assets/images/brand/whatsapp.png"
                          alt=""
                          class="img-fluid wd-20 ht-20"
                        />
                        <p class="fs-12 fw-medium text-truncate mb-0 mt-1 pt-1">
                          Whatsapp
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <!--! End:: edash-applications !-->
              <!--! Start:: edash-profile !-->
              <div class="dropdown">
                <a
                  href="javascript:void(0);"
                  class="edash-drop-item d-flex align-items-center justify-content-center rounded-pill wd-40 ht-40"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="outside"
                  data-bs-offset="0, 19"
                >
                  <div class="avatar avatar-md rounded-circle">
                    <img
                      src="./../assets/images/avatar/1.png"
                      alt="Avatar"
                      class="img-fluid rounded-circle"
                    />
                    <div class="avatar-indicator active"></div>
                  </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-md p-0">
                  <div class="px-4 py-3 d-flex border-bottom">
                    <div class="avatar avatar-md flex-shrink-0">
                      <img
                        src="./../assets/images/avatar/1.png"
                        alt="Avatar"
                        class="img-fluid rounded"
                      />
                    </div>
                    <div class="flex-grow-1 ms-3">
                      <h6 class="text-dark mb-1">Alexandra Della</h6>
                      <span class="fs-13 text-muted">Premium Member</span>
                    </div>
                  </div>
                  <div class="px-2 py-3">
                    <a href="./account-overview.html" class="dropdown-item">
                      <i class="fi fi-rs-user"></i>
                      <span class="ms-3">Profile</span>
                    </a>
                    <a href="./account-activity.html" class="dropdown-item">
                      <i class="fi fi-rr-pulse"></i>
                      <span class="ms-3">Activity</span>
                    </a>
                    <a href="./account-project.html" class="dropdown-item">
                      <i class="fi fi-rr-file-invoice-dollar"></i>
                      <span class="ms-3">Projects</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./general-pricing.html" class="dropdown-item">
                      <i class="fi fi-rr-usd-circle"></i>
                      <span class="ms-3">Pricing</span>
                    </a>
                    <a href="./settings-account.html" class="dropdown-item">
                      <i class="fi fi-rr-settings"></i>
                      <span class="ms-3">Settings</span>
                    </a>
                    <a href="./general-helpdesk.html" class="dropdown-item">
                      <i class="fi fi-rr-seal-question"></i>
                      <span class="ms-3">Helpdesk</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="./auth-login.html" class="dropdown-item text-danger">
                      <i class="fi fi-rr-exit"></i>
                      <span class="ms-3">Logout</span>
                    </a>
                  </div>
                </div>
              </div>
              <!--! End:: edash-profile !-->
            </div>
            <!--! End:: edash-header-right !-->
          </div>
        </header>

        <!--! ================================================================ !-->
        <!--! End:: Header !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        <!--! Start:: Page Content !-->
        <!--! ================================================================ !-->
        <div
          class="edash-page-container container-xxl"
          id="edash-page-container"
        >
          <!--! Start:: Breadcumb !-->
          <div class="edash-content-breadcumb row mb-4 mb-md-6 pt-md-2">
            <div class="col-12">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <h2 class="h4 fw-semibold text-dark">Elements</h2>
                  <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Components</a>
                      </li>
                      <li class="breadcrumb-item">
                        <a href="javascript:void(0);">Forms</a>
                      </li>
                      <li class="breadcrumb-item active" aria-current="page">
                        Elements
                      </li>
                    </ol>
                  </nav>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <a
                    href="https://getbootstrap.com/docs/5.3/forms/overview/"
                    class="btn btn-md btn-primary"
                    target="_blank"
                    >Official Docs</a
                  >
                </div>
              </div>
            </div>
          </div>
          <!--! End:: Breadcumb !-->
          <!--! Start:: Content Section !-->
          <div class="edash-content-section row g-3 g-md-4">
            <!-- Start:: From Controls -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">From Controls</h4>
                </div>
                <div class="card-body">
                  <div class="row gy-4">
                    <div class="col-12">
                      <label for="basiInput" class="form-label"
                        >Basic Input</label
                      >
                      <input type="text" class="form-control" id="basiInput" />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="labelInput" class="form-label"
                        >Input with Label</label
                      >
                      <input type="text" class="form-control" id="labelInput" />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="placeholderInput" class="form-label"
                        >Input with Placeholder</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="placeholderInput"
                        placeholder="Placeholder"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="valueInput" class="form-label"
                        >Input with Value</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="valueInput"
                        value="Input value"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="readonlyPlaintext" class="form-label"
                        >Readonly Plain Text Input</label
                      >
                      <input
                        type="text"
                        class="form-control-plaintext"
                        id="readonlyPlaintext"
                        value="Readonly input"
                        readonly=""
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="readonlyInput" class="form-label"
                        >Readonly Input</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="readonlyInput"
                        value="Readonly input"
                        readonly=""
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <div>
                        <label for="disabledInput" class="form-label"
                          >Disabled Input</label
                        >
                        <input
                          type="text"
                          class="form-control"
                          id="disabledInput"
                          value="Disabled input"
                          disabled=""
                        />
                      </div>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="iconInput" class="form-label"
                        >Input with Icon</label
                      >
                      <div class="form-icon">
                        <input
                          type="email"
                          class="form-control form-control-icon"
                          id="iconInput"
                          placeholder="example@gmail.com"
                        />
                        <i class="ri-mail-unread-line"></i>
                      </div>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="iconrightInput" class="form-label"
                        >Input with Icon Right</label
                      >
                      <div class="form-icon right">
                        <input
                          type="email"
                          class="form-control form-control-icon"
                          id="iconrightInput"
                          placeholder="example@gmail.com"
                        />
                        <i class="ri-mail-unread-line"></i>
                      </div>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="exampleInputdate" class="form-label"
                        >Input Date</label
                      >
                      <input
                        type="date"
                        class="form-control"
                        id="exampleInputdate"
                      />
                    </div>
                    
                    
                    <div class="col-12">
  <label for="exampleInputdatetime" class="form-label">Select Date & Time</label>
  <div class="d-flex">
    <input type="datetime-local" class="form-control me-2" id="exampleInputdatetime" />
    <select class="form-select w-auto" id="ampmSelect">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>
</div>

<div class="col-12">
  <label class="form-label">Select Start & End Time</label>

  <!-- 开始时间 -->
  <div class="d-flex mb-2">
    <input type="datetime-local" class="form-control me-2" id="startDatetime" />
    <select class="form-select w-auto" id="startAmPm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>

  <!-- 结束时间 -->
  <div class="d-flex">
    <input type="datetime-local" class="form-control me-2" id="endDatetime" />
    <select class="form-select w-auto" id="endAmPm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>
</div>

<!-- JavaScript 逻辑 -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const startDatetime = document.getElementById("startDatetime");
    const endDatetime = document.getElementById("endDatetime");

    startDatetime.addEventListener("change", function () {
      if (startDatetime.value && endDatetime.value && startDatetime.value > endDatetime.value) {
        alert("Start time cannot be later than end time.");
        startDatetime.value = "";
      }
    });

    endDatetime.addEventListener("change", function () {
      if (startDatetime.value && endDatetime.value && startDatetime.value > endDatetime.value) {
        alert("End time cannot be earlier than start time.");
        endDatetime.value = "";
      }
    });
  });
</script>





<div class="col-12">
  <label class="form-label">Select Start & End Time (MM/DD/YYYY)</label>

  <!-- 开始时间 -->
  <div class="d-flex mb-2">
    <input type="datetime-local" class="form-control me-2" id="startDatetime" />
    <select class="form-select w-auto" id="startAmPm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>

  <!-- 结束时间 -->
  <div class="d-flex">
    <input type="datetime-local" class="form-control me-2" id="endDatetime" />
    <select class="form-select w-auto" id="endAmPm">
      <option value="AM">AM</option>
      <option value="PM">PM</option>
    </select>
  </div>
</div>

<!-- JavaScript 逻辑 -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const startDatetime = document.getElementById("startDatetime");
    const endDatetime = document.getElementById("endDatetime");

    // 设置默认值为当前美国日期格式（MM/DD/YYYY）
    function setDefaultDateTime(inputField) {
      let now = new Date();
      let month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始
      let day = String(now.getDate()).padStart(2, "0");
      let year = now.getFullYear();
      let hours = now.getHours();
      let minutes = String(now.getMinutes()).padStart(2, "0");
      let ampm = hours >= 12 ? "PM" : "AM";

      hours = hours % 12 || 12; // 转换为 12 小时制

      // 设置输入框默认值
      let formattedDate = `${year}-${month}-${day}T${String(hours).padStart(2, "0")}:${minutes}`;
      inputField.value = formattedDate;

      // 设置 AM/PM 选项
      if (inputField.id === "startDatetime") {
        document.getElementById("startAmPm").value = ampm;
      } else {
        document.getElementById("endAmPm").value = ampm;
      }
    }

    setDefaultDateTime(startDatetime);
    setDefaultDateTime(endDatetime);

    // 验证开始时间是否小于结束时间
    function validateTimes() {
      let startValue = new Date(startDatetime.value);
      let endValue = new Date(endDatetime.value);

      if (startValue && endValue && startValue > endValue) {
        alert("Start time cannot be later than end time.");
        endDatetime.value = "";
      }
    }

    startDatetime.addEventListener("change", validateTimes);
    endDatetime.addEventListener("change", validateTimes);
  });
</script>



                    
                    
                    
                    <!--end col-->
                    <div class="col-12">
                      <label for="exampleInputtime" class="form-label"
                        >Input Time</label
                      >
                      <input
                        type="time"
                        class="form-control"
                        id="exampleInputtime"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="exampleInputpassword" class="form-label"
                        >Input Password</label
                      >
                      <input
                        type="password"
                        class="form-control"
                        id="exampleInputpassword"
                        value="44512465"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label
                        for="exampleFormControlTextarea5"
                        class="form-label"
                        >Example Textarea</label
                      >
                      <textarea
                        class="form-control"
                        id="exampleFormControlTextarea5"
                        rows="3"
                      ></textarea>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="formtextInput" class="form-label"
                        >Form Text</label
                      >
                      <input
                        type="password"
                        class="form-control"
                        id="formtextInput"
                      />
                      <div id="passwordHelpBlock" class="form-text">
                        Must be 8-20 characters long.
                      </div>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="colorPicker" class="form-label"
                        >Color Picker</label
                      >
                      <input
                        type="color"
                        class="form-control form-control-color w-100"
                        id="colorPicker"
                        value="#364574"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="borderInput" class="form-label"
                        >Input Border Style</label
                      >
                      <input
                        type="text"
                        class="form-control border-dashed"
                        id="borderInput"
                        placeholder="Enter your name"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="exampleDataList" class="form-label"
                        >Datalist example</label
                      >
                      <input
                        class="form-control"
                        list="datalistOptions"
                        id="exampleDataList"
                        placeholder="Search your country..."
                      />
                      <datalist id="datalistOptions">
                        <option value="Switzerland"></option>
                        <option value="New York"></option>
                        <option value="France"></option>
                        <option value="Spain"></option>
                        <option value="Chicago"></option>
                        <option value="Bulgaria"></option>
                        <option value="Hong Kong"></option>
                      </datalist>
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <label for="exampleInputrounded" class="form-label"
                        >Rounded Input</label
                      >
                      <input
                        type="text"
                        class="form-control rounded-pill"
                        id="exampleInputrounded"
                        placeholder="Enter your name"
                      />
                    </div>
                    <!--end col-->
                    <div class="col-12">
                      <div class="form-floating">
                        <input
                          type="text"
                          class="form-control"
                          id="firstnamefloatingInput"
                          placeholder="Enter your firstname"
                        />
                        <label for="firstnamefloatingInput"
                          >Floating Input</label
                        >
                      </div>
                    </div>
                    <!--end col-->
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: From Controls -->
            <!-- Start:: Solid Checkbox -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Solid Checkbox</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <th>Colors</th>
                          <th>Default</th>
                          <th>Checked</th>
                          <th>Disabled</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Primary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckPrimary"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckPrimary"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckPrimaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckPrimaryChecked"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckPrimaryCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckPrimaryCheckedDisabled"
                                >Primary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Secondary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSecondary"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSecondary"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSecondaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSecondaryChecked"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSecondaryCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSecondaryCheckedDisabled"
                                >Secondary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Success</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSuccess"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSuccess"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSuccessChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSuccessChecked"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSuccessCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSuccessCheckedDisabled"
                                >Success</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Warning</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckWarning"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckWarning"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckWarningChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckWarningChecked"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckWarningCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckWarningCheckedDisabled"
                                >Warning</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Danger</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckDanger"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDanger"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckDangerChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDangerChecked"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckDangerCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDangerCheckedDisabled"
                                >Danger</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Info</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-info"
                                type="checkbox"
                                value=""
                                id="flexCheckInfo"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckInfo"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-info"
                                type="checkbox"
                                value=""
                                id="flexCheckInfoChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckInfoChecked"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-info"
                                type="checkbox"
                                value=""
                                id="flexCheckInfoCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckInfoCheckedDisabled"
                                >Info</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Dark</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckDark"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDark"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckDarkChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDarkChecked"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckDarkCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckDarkCheckedDisabled"
                                >Dark</label
                              >
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: Solid Checkbox -->
            <!-- Start:: Soft Checkbox -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Soft Checkbox</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <th>Colors</th>
                          <th>Default</th>
                          <th>Checked</th>
                          <th>Disabled</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Primary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftPrimary"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftPrimary"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftPrimaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftPrimaryChecked"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-primary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftPrimaryCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftPrimaryCheckedDisabled"
                                >Primary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Secondary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSecondary"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSecondary"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSecondaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSecondaryChecked"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-secondary"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSecondaryCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSecondaryCheckedDisabled"
                                >Secondary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Success</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSuccess"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSuccess"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSuccessChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSuccessChecked"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-success"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftSuccessCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftSuccessCheckedDisabled"
                                >Success</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Warning</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftWarning"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftWarning"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftWarningChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftWarningChecked"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-warning"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftWarningCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftWarningCheckedDisabled"
                                >Warning</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Danger</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDanger"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDanger"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDangerChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDangerChecked"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-danger"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDangerCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDangerCheckedDisabled"
                                >Danger</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Info</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-info"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftInfo"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftInfo"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-info"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftInfoChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftInfoChecked"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-info"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftInfoCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftInfoCheckedDisabled"
                                >Info</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Dark</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDark"
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDark"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDarkChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDarkChecked"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-check-soft-dark"
                                type="checkbox"
                                value=""
                                id="flexCheckSoftDarkCheckedDisabled"
                                checked
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexCheckSoftDarkCheckedDisabled"
                                >Dark</label
                              >
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: Soft Checkbox -->
            <!-- Start:: Radio Solid Color -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Solid Radio</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <th>Colors</th>
                          <th>Default</th>
                          <th>Checked</th>
                          <th>Disabled</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Primary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-primary"
                                type="radio"
                                name="flexRadioSolidColorPrimary"
                                id="flexRadioPrimary"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioPrimary"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-primary"
                                type="radio"
                                name="flexRadioSolidColorPrimary"
                                id="flexRadioPrimaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioPrimaryChecked"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-primary"
                                type="radio"
                                name="flexRadioSolidColorPrimary"
                                id="flexRadioPrimaryCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioPrimaryCheckedDisabled"
                                >Primary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Secondary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-secondary"
                                type="radio"
                                name="flexRadioSolidColorSecondary"
                                id="flexRadioSecondary"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSecondary"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-secondary"
                                type="radio"
                                name="flexRadioSolidColorSecondary"
                                id="flexRadioSecondaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSecondaryChecked"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-secondary"
                                type="radio"
                                name="flexRadioSolidColorSecondary"
                                id="flexRadioSecondaryCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSecondaryCheckedDisabled"
                                >Secondary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Success</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-success"
                                type="radio"
                                name="flexRadioSolidColorSuccess"
                                id="flexRadioSuccess"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSuccess"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-success"
                                type="radio"
                                name="flexRadioSolidColorSuccess"
                                id="flexRadioSuccessChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSuccessChecked"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-success"
                                type="radio"
                                name="flexRadioSolidColorSuccess"
                                id="flexRadioSuccessCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSuccessCheckedDisabled"
                                >Success</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Warning</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-warning"
                                type="radio"
                                name="flexRadioSolidColorWarning"
                                id="flexRadioWarning"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioWarning"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-warning"
                                type="radio"
                                name="flexRadioSolidColorWarning"
                                id="flexRadioWarningChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioWarningChecked"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-warning"
                                type="radio"
                                name="flexRadioSolidColorWarning"
                                id="flexRadioWarningCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioWarningCheckedDisabled"
                                >Warning</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Danger</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-danger"
                                type="radio"
                                name="flexRadioSolidColorDanger"
                                id="flexRadioDanger"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDanger"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-danger"
                                type="radio"
                                name="flexRadioSolidColorDanger"
                                id="flexRadioDangerChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDangerChecked"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-danger"
                                type="radio"
                                name="flexRadioSolidColorDanger"
                                id="flexRadioDangerCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDangerCheckedDisabled"
                                >Danger</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Info</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-info"
                                type="radio"
                                name="flexRadioSolidColorInfo"
                                id="flexRadioInfo"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioInfo"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-info"
                                type="radio"
                                name="flexRadioSolidColorInfo"
                                id="flexRadioInfoChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioInfoChecked"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-info"
                                type="radio"
                                name="flexRadioSolidColorInfo"
                                id="flexRadioInfoCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioInfoCheckedDisabled"
                                >Info</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Dark</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-dark"
                                type="radio"
                                name="flexRadioSolidColorDark"
                                id="flexRadioDark"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDark"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-dark"
                                type="radio"
                                name="flexRadioSolidColorDark"
                                id="flexRadioDarkChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDarkChecked"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-dark"
                                type="radio"
                                name="flexRadioSolidColorDark"
                                id="flexRadioDarkCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioDarkCheckedDisabled"
                                >Dark</label
                              >
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: Radio Solid Color -->
            <!-- Start:: Radio Soft Color -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Soft Radio</h4>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <th>Colors</th>
                          <th>Default</th>
                          <th>Checked</th>
                          <th>Disabled</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>Primary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-primary"
                                type="radio"
                                name="flexRadioSoftColorPrimary"
                                id="flexRadioSoftPrimary"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftPrimary"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-primary"
                                type="radio"
                                name="flexRadioSoftColorPrimary"
                                id="flexRadioSoftPrimaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftPrimaryChecked"
                                >Primary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-primary"
                                type="radio"
                                name="flexRadioSoftColorPrimary"
                                id="flexRadioSoftPrimaryCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftPrimaryCheckedDisabled"
                                >Primary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Secondary</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-secondary"
                                type="radio"
                                name="flexRadioSoftColorSecondary"
                                id="flexRadioSoftSecondary"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSecondary"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-secondary"
                                type="radio"
                                name="flexRadioSoftColorSecondary"
                                id="flexRadioSoftSecondaryChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSecondaryChecked"
                                >Secondary</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-secondary"
                                type="radio"
                                name="flexRadioSoftColorSecondary"
                                id="flexRadioSoftSecondaryCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSecondaryCheckedDisabled"
                                >Secondary</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Success</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-success"
                                type="radio"
                                name="flexRadioSoftColorSuccess"
                                id="flexRadioSoftSuccess"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSuccess"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-success"
                                type="radio"
                                name="flexRadioSoftColorSuccess"
                                id="flexRadioSoftSuccessChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSuccessChecked"
                                >Success</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-success"
                                type="radio"
                                name="flexRadioSoftColorSuccess"
                                id="flexRadioSoftSuccessCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftSuccessCheckedDisabled"
                                >Success</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Warning</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-warning"
                                type="radio"
                                name="flexRadioSoftColorWarning"
                                id="flexRadioSoftWarning"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftWarning"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-warning"
                                type="radio"
                                name="flexRadioSoftColorWarning"
                                id="flexRadioSoftWarningChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftWarningChecked"
                                >Warning</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-warning"
                                type="radio"
                                name="flexRadioSoftColorWarning"
                                id="flexRadioSoftWarningCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftWarningCheckedDisabled"
                                >Warning</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Danger</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-danger"
                                type="radio"
                                name="flexRadioSoftColorDanger"
                                id="flexRadioSoftDanger"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDanger"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-danger"
                                type="radio"
                                name="flexRadioSoftColorDanger"
                                id="flexRadioSoftDangerChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDangerChecked"
                                >Danger</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-danger"
                                type="radio"
                                name="flexRadioSoftColorDanger"
                                id="flexRadioSoftDangerCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDangerCheckedDisabled"
                                >Danger</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Info</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-info"
                                type="radio"
                                name="flexRadioSoftColorInfo"
                                id="flexRadioSoftInfo"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftInfo"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-info"
                                type="radio"
                                name="flexRadioSoftColorInfo"
                                id="flexRadioSoftInfoChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftInfoChecked"
                                >Info</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-info"
                                type="radio"
                                name="flexRadioSoftColorInfo"
                                id="flexRadioSoftInfoCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftInfoCheckedDisabled"
                                >Info</label
                              >
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td>Dark</td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-dark"
                                type="radio"
                                name="flexRadioSoftColorDark"
                                id="flexRadioSoftDark"
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDark"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-dark"
                                type="radio"
                                name="flexRadioSoftColorDark"
                                id="flexRadioSoftDarkChecked"
                                checked
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDarkChecked"
                                >Dark</label
                              >
                            </div>
                          </td>
                          <td>
                            <div class="form-check mb-3">
                              <input
                                class="form-check-input form-radio-soft-dark"
                                type="radio"
                                name="flexRadioSoftColorDark"
                                id="flexRadioSoftDarkCheckedDisabled"
                                disabled
                              />
                              <label
                                class="form-check-label"
                                for="flexRadioSoftDarkCheckedDisabled"
                                >Dark</label
                              >
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: Radio Soft Color -->
            <!-- Start:: Toggle Button  -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Toggle Button</h4>
                </div>
                <div class="card-body">
                  <div class="d-flex gap-2">
                    <div class="form-check ps-0">
                      <input
                        type="checkbox"
                        class="btn-check"
                        id="btnCheckPrimary"
                      />
                      <label
                        class="btn btn-outline-primary rounded-pill"
                        for="btnCheckPrimary"
                        >Single toggle</label
                      >
                    </div>
                    <div class="form-check ps-0">
                      <input
                        type="checkbox"
                        class="btn-check"
                        id="btnCheckSecondary"
                      />
                      <label
                        class="btn btn-outline-secondary rounded-pill"
                        for="btnCheckSecondary"
                        >Single toggle</label
                      >
                    </div>
                    <div class="form-check ps-0">
                      <input
                        type="checkbox"
                        class="btn-check"
                        id="btnCheckWarning"
                      />
                      <label
                        class="btn btn-outline-warning rounded-pill"
                        for="btnCheckWarning"
                        >Single toggle</label
                      >
                    </div>
                    <div class="form-check ps-0">
                      <input
                        type="checkbox"
                        class="btn-check"
                        id="btnCheckInfo"
                        checked
                      />
                      <label
                        class="btn btn-outline-info rounded-pill"
                        for="btnCheckInfo"
                        >Checked</label
                      >
                    </div>
                    <div class="form-check ps-0">
                      <input
                        type="checkbox"
                        class="btn-check"
                        id="btnCheckDisabled"
                        disabled
                      />
                      <label
                        class="btn btn-outline-danger rounded-pill"
                        for="btnCheckDisabled"
                        >Disabled</label
                      >
                    </div>
                  </div>
                  <hr class="my-4" />
                  <div class="d-flex gap-2">
                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOption1"
                      checked
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOption1"
                      >Checked</label
                    >

                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOption2"
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOption2"
                      >Radio</label
                    >

                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOption3"
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOption3"
                      >Radio</label
                    >

                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOption4"
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOption4"
                      >Radio</label
                    >

                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOption5"
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOption5"
                      >Radio</label
                    >

                    <input
                      type="radio"
                      class="btn-check"
                      name="options"
                      id="btnRadioOptionDisabled"
                      disabled
                    />
                    <label
                      class="btn btn-outline-secondary"
                      for="btnRadioOptionDisabled"
                      >Disabled</label
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- End:: Toggle Button -->
            <!-- Start:: {Options} -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Options</h4>
                </div>
                <div class="table-responsive">
                  <table class="table mb-0">
                    <thead>
                      <tr>
                        <th>Reference</th>
                        <th>Details</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <code>Approach</code>
                        </td>
                        <td>
                          Browser default checkboxes and radios are replaced
                          with the help of <code>.form-check</code>, a series of
                          classes for both input types that improves the layout
                          and behavior of their HTML elements, that provide
                          greater customization and cross browser consistency.
                          Checkboxes are for selecting one or several options in
                          a list, while radios are for selecting one option from
                          many.<br />Structurally, our
                          <code>&lt;input&gt;</code>s and
                          <code>&lt;label&gt;</code>s are sibling elements as
                          opposed to an <code>&lt;input&gt;</code> within a
                          <code>&lt;label&gt;</code>. This is slightly more
                          verbose as you must specify <code>id</code> and
                          <code>for</code> attributes to relate the
                          <code>&lt;input&gt;</code> and
                          <code>&lt;label&gt;</code>. We use the sibling
                          selector (<code>~</code>) for all our
                          <code>&lt;input&gt;</code> states, like
                          <code>:checked</code> or <code>:disabled</code>. When
                          combined with the
                          <code>.form-check-label</code> class, we can easily
                          style the text for each item based on the
                          <code>&lt;input&gt;</code>’s state.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Indeterminate</code>
                        </td>
                        <td>
                          Checkboxes can utilize the
                          <code>:indeterminate</code> pseudo class when manually
                          set via JavaScript (there is no available HTML
                          attribute for specifying it).
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Disabled</code>
                        </td>
                        <td>
                          Add the <code>disabled</code> attribute and the
                          associated <code>&lt;label&gt;</code>s are
                          automatically styled to match with a lighter color to
                          help indicate the input's state.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Inline</code>
                        </td>
                        <td>
                          Group checkboxes or radios on the same horizontal row
                          by adding <code>.form-check-inline</code> to any
                          <code>.form-check</code>.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Reverse</code>
                        </td>
                        <td>
                          Put your checkboxes, radios, and switches on the
                          opposite side with the
                          <code>.form-check-reverse</code> modifier class.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Without labels</code>
                        </td>
                        <td>
                          Omit the wrapping <code>.form-check</code> for
                          checkboxes and radios that have no label text.
                          Remember to still provide some form of accessible name
                          for assistive technologies (for instance, using
                          <code>aria-label</code>). See the
                          <code>forms overview accessibility</code> section for
                          details.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Toggle buttons</code>
                        </td>
                        <td>
                          Create button-like checkboxes and radio buttons by
                          using <code>.btn</code> styles rather than
                          <code>.form-check-label</code> on the
                          <code>&lt;label&gt;</code> elements. These toggle
                          buttons can further be grouped in a
                          <code>button group</code> if needed.
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>Documentations</code>
                        </td>
                        <td>
                          Please visit:
                          <a
                            href="https://getbootstrap.com/docs/5.3/forms/checks-radios/"
                            target="_blank"
                            rel="noopener noreferrer"
                            >https://getbootstrap.com/docs/5.3/forms/checks-radios/</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <!-- End:: {Options} -->
          </div>
          <!--! End:: Content Section !-->
        </div>
        <!--! ================================================================ !-->
        <!--! End:: Page Content !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        <!--! Start:: Footer !-->
        <!--! ================================================================ !-->
        <footer
          class="edash-footer-container container-xxl d-flex align-items-center justify-content-between rounded-3 p-4 mx-auto mb-3 ht-64 bg-body-tertiary"
          id="edash-footer-container"
        >
          <div class="hstack">
            <span class="text-muted">
              <script>
                document.write(new Date().getFullYear());
              </script>
              &copy;
            </span>
            <span class="vr mx-2 bg-body-secondary"></span>
            <a href="mailto:wrapcoders@gmail.com">Expodash</a>
          </div>
          <div class="d-flex align-items-center gap-3">
            <a
              href="./../../docs/documentation.html"
              target="_blank"
              class="d-none d-sm-block"
              >Docs</a
            >
            <a href="wrapcoders@gmail.com" target="_blank" class="d-none d-sm-block"
              >About</a
            >
            <a href="wrapcoders@gmail.com" target="_blank">Support</a>
            <a
              href="https://codecanyon.net/item/expodash-bootstrap-5-admin-dashboard-template/52160996"
              target="_blank"
              >Purchase</a
            >
          </div>
        </footer>

        <!--! ================================================================ !-->
        <!--! End:: Footer !-->
        <!--! ================================================================ !-->
      </main>
      <!--! ================================================================ !-->
      <!--! End:: Main Content !-->
      <!--! ================================================================ !-->
      <div class="edash-menu-backdrop" id="edash-menu-hide"></div>
    </div>
    <!--! ================================================================ !-->
    <!--! End:: Main Wrapper !-->
    <!--! ================================================================ !-->
    <!--! ================================================================ !-->
    <!--! Footer Script !-->
    <!--! ================================================================ !-->
    <!--! BEGIN: Common Vendors !-->
    <script src="./../assets/js/vendors.min.js"></script>
    <!--! END: Common Vendors !-->

    <!--! BEGIN: Apps Common Init  !-->
    <script src="./../assets/js/common-init.min.js"></script>
    <!--! END: Apps Common Init  !-->


    <!--! BEGIN: Page Vendors -!-->
    <!--! END: Page Vendors -!-->
  </body>
</html>