| Server IP : 150.95.80.236 / Your IP : 18.219.159.197 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/sc.pcu.in.th/demo15/dist/documentation/forms/ |
Upload File : |
<!DOCTYPE html>
<!--
Author: Keenthemes
Product Name: Metronic - Bootstrap 5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme
Purchase: https://1.envato.market/EA4JP
Website: http://www.keenthemes.com
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
-->
<html lang="en">
<!--begin::Head-->
<head><base href="../../">
<title>Autosize Textarea Javascript Plugin by Keenthemes</title>
<meta charset="utf-8" />
<meta name="description" content="The most advanced Bootstrap Admin Theme on Themeforest trusted by 94,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue & Laravel versions. Grab your copy now and get life-time updates for free." />
<meta name="keywords" content="Metronic, bootstrap, bootstrap 5, Angular, VueJs, React, Laravel, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Metronic - Bootstrap 5 HTML, VueJS, React, Angular & Laravel Admin Dashboard Theme" />
<meta property="og:url" content="https://keenthemes.com/metronic" />
<meta property="og:site_name" content="Keenthemes | Metronic" />
<link rel="canonical" href="https://preview.keenthemes.com/metronic8" />
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
<!--begin::Fonts-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Page Vendor Stylesheets(used by this page)-->
<link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Page Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body>
<!--begin::Main-->
<div class="d-flex flex-column flex-root">
<!--begin::Page-->
<div class="docs-page d-flex flex-row flex-column-fluid">
<!--begin::Aside-->
<div id="kt_docs_aside" class="docs-aside" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'200px', '300px': '250px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_docs_aside_toggle">
<!--begin::Logo-->
<div class="docs-aside-logo flex-column-auto h-75px" id="kt_docs_aside_logo">
<!--begin::Link-->
<a href="../../demo15/dist/index.html">
<img alt="Logo" src="assets/media/logos/logo-1.svg" class="h-25px" />
</a>
<!--end::Link-->
</div>
<!--end::Logo-->
<!--begin::Menu-->
<div class="docs-aside-menu flex-column-fluid">
<!--begin::Aside Menu-->
<div class="hover-scroll-overlay-y mt-5 mb-5 mt-lg-0 mb-lg-5 pe-lg-n2 me-lg-2" id="kt_docs_aside_menu_wrapper" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_docs_aside_logo" data-kt-scroll-wrappers="#kt_docs_aside_menu" data-kt-scroll-offset="10px">
<!--begin::Menu-->
<div class="menu menu-column menu-title-gray-800 menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary menu-arrow-gray-500" id="#kt_docs_aside_menu" data-kt-menu="true">
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Getting Started</h4>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started.html">
<span class="menu-title">Overview</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Build</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/build/gulp.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Gulp</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/build/webpack.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Webpack</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/multi-demo.html">
<span class="menu-title">Multi-demo</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/file-structure.html">
<span class="menu-title">File Structure</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Customization</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/customization/sass.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">SASS</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/customization/javascript.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Javascript</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/customization/no-jquery.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">No jQuery</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/video-tutorials.html">
<span class="menu-title">Video Tutorials</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/illustrations.html">
<span class="menu-title">Illustrations</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/dark-mode.html">
<span class="menu-title">Dark Mode</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/rtl.html">
<span class="menu-title">RTL Version</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="https://preview.keenthemes.com/metronic8/demo15/layout-builder.html" target="blank">
<span class="menu-title">Layout Builder</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Server Side Integration</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/integration/blazor.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Blazor</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/updates.html">
<span class="menu-title">Updates</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/references.html">
<span class="menu-title">References</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/getting-started/changelog.html">
<span class="menu-title">Changelog
<span class="badge badge-changelog badge-light-danger bg-hover-danger text-hover-white fw-bold fs-9 px-2 ms-2">v8.0.30</span></span>
</a>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Base</h4>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/utilities.html">
<span class="menu-title">Utilities</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Helpers</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/helpers/flex-layouts.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Flex Layouts
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/helpers/text.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Text</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/helpers/background.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Background</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/helpers/borders.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Borders</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/helpers/opacity.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Opacity</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Forms</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/forms/controls.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Controls</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/forms/advanced.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Advanced</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/forms/input-group.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Input Group</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/buttons.html">
<span class="menu-title">Buttons</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/accordion.html">
<span class="menu-title">Accordion</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/alerts.html">
<span class="menu-title">Alerts</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/badges.html">
<span class="menu-title">Badges</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/breadcrumb.html">
<span class="menu-title">Breadcrumb</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/bullets.html">
<span class="menu-title">Bullets
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/cards.html">
<span class="menu-title">Cards</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/carousel.html">
<span class="menu-title">Carousel</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/indicator.html">
<span class="menu-title">Indicator
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/modal.html">
<span class="menu-title">Modal</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/overlay.html">
<span class="menu-title">Overlay
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/pagination.html">
<span class="menu-title">Pagination</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/popovers.html">
<span class="menu-title">Popovers</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/pulse.html">
<span class="menu-title">Pulse
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/rating.html">
<span class="menu-title">Rating
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/ribbon.html">
<span class="menu-title">Ribbon
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/rotate.html">
<span class="menu-title">Rotate
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/separator.html">
<span class="menu-title">Separator
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/symbol.html">
<span class="menu-title">Symbol
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/tables.html">
<span class="menu-title">Tables</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/tabs.html">
<span class="menu-title">Tabs</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/toasts.html">
<span class="menu-title">Toasts</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/base/tooltips.html">
<span class="menu-title">Tooltips</span>
</a>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Forms</h4>
</div>
<div class="menu-item">
<a class="menu-link active py-2" href="../../demo15/dist/documentation/forms/autosize.html">
<span class="menu-title">Autosize</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/clipboard.html">
<span class="menu-title">Clipboard</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/daterangepicker.html">
<span class="menu-title">Date Range Picker</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/dialer.html">
<span class="menu-title">Dialer
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/dropzonejs.html">
<span class="menu-title">DropzoneJS</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/flatpickr.html">
<span class="menu-title">Flatpickr</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">FormValidation</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formvalidation/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formvalidation/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formvalidation/advanced.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Advanced</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Form Repeater</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formrepeater/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formrepeater/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formrepeater/nested.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Nested</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/formrepeater/advanced.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Advanced</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/image-input.html">
<span class="menu-title">Image Input
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/inputmask.html">
<span class="menu-title">Inputmask</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/bootstrap-maxlength.html">
<span class="menu-title">Bootstrap Maxlength</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/bootstrap-multiselectsplitter.html">
<span class="menu-title">Multiselectsplitter</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/nouislider.html">
<span class="menu-title">noUiSlider</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/password-meter.html">
<span class="menu-title">Password Meter
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/google-recaptcha.html">
<span class="menu-title">reCAPTCHA</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/select2.html">
<span class="menu-title">Select2</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/forms/tagify.html">
<span class="menu-title">Tagify</span>
</a>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Editors</h4>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">CKEditor</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/classic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Classic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/inline.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Inline</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/balloon.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Balloon</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/balloon-block.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Balloon Block</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/ckeditor/document.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Document</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Quill</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/quill/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/quill/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/quill/autosave.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Autosave</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">TinyMCE</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/tinymce/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/tinymce/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/tinymce/plugins.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Plugin Addons</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/editors/tinymce/hidden.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Hidden Menubar</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Charts</h4>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">AmCharts</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/amcharts/charts.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">AmChart Charts</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/amcharts/maps.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">AmChart Maps</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/amcharts/stock-charts.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">AmChart Stock Charts</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/apexcharts.html">
<span class="menu-title">ApexCharts</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/chartjs.html">
<span class="menu-title">ChartJS</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Flotcharts</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic Chart</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/axis.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Axis Labels</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/tracking.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Tracking Curves</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/dynamic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Dynamic Chart</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/stack.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Stack Chart Controls</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/bar.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Bar Chart</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/flotcharts/pie.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Pie Chart</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Google Charts</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/google-charts/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/google-charts/column.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Column Chart</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/google-charts/pie.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Pie Chart</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/charts/google-charts/line.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Line Chart</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">General</h4>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">DataTables</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/datatables/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/datatables/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/datatables/advanced.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Advanced</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/datatables/server-side.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Ajax Server Side</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/datatables/api.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">API</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/menu.html">
<span class="menu-title">Menu
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/blockui.html">
<span class="menu-title">BlockUI
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/cookie.html">
<span class="menu-title">Cookie
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/cookiealert.html">
<span class="menu-title">Cookie Alert</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/countup.html">
<span class="menu-title">CountUp</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/cropper.html">
<span class="menu-title">Cropper</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Draggable</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/draggable/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/draggable/cards.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Draggable</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/draggable/multiple-containers.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Multiple Containers</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/draggable/swappable.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Swappable</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/draggable/restricted.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Restricted</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/drawer.html">
<span class="menu-title">Drawer
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Fullcalendar</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/drag-n-drop.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Drag-n-Drop</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/selectable.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Selectable Dates</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/background-events.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Background Events</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/locales.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Localization</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fullcalendar/timezone.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Timezone</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/fslightbox.html">
<span class="menu-title">Fullscreen Lightbox</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">jKanban Board</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jkanban/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jkanban/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jkanban/color.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Colored</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jkanban/restricted.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Restricted</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jkanban/rich.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Rich Content</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">jsTree</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic Tree</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/contextual.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Contextual Menu</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/customicons.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Custom Icons</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/dragdrop.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Drag & Drop</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/checkable.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Checkable Tree</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/jstree/ajax.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Ajax Data</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/scroll.html">
<span class="menu-title">Scroll
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/scrolltop.html">
<span class="menu-title">Scrolltop
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/search.html">
<span class="menu-title">Quick Search
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/smooth-scroll.html">
<span class="menu-title">Smooth Scroll</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/stepper.html">
<span class="menu-title">Stepper
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/sticky.html">
<span class="menu-title">Sticky
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/swapper.html">
<span class="menu-title">Swapper
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/sweetalert.html">
<span class="menu-title">SweetAlert</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Tiny Slider</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/tiny-slider/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/tiny-slider/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/tiny-slider/advanced.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Advanced</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/toastr.html">
<span class="menu-title">Toastr</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/toggle.html">
<span class="menu-title">Toggle
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/typedjs.html">
<span class="menu-title">Typed.js</span>
</a>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link py-2">
<span class="menu-title">Vis-Timeline</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/basic.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Basic</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/style.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Custom Styling</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/group.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Groups</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/interaction.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Interactions</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/general/vis-timeline/template.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Templates</span>
</a>
</div>
</div>
</div>
<div class="menu-item">
<div class="h-30px"></div>
</div>
<div class="menu-item">
<h4 class="menu-content text-muted mb-0 fs-7 text-uppercase">Icons</h4>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/icons/duotune.html">
<span class="menu-title">Duotune
<span class="badge badge-exclusive badge-light-success fw-bold fs-9 px-2 py-1 ms-1">Exclusive</span></span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/icons/bootstrap-icons.html">
<span class="menu-title">Bootstrap Icons</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/icons/font-awesome.html">
<span class="menu-title">Font Awesome</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link py-2" href="../../demo15/dist/documentation/icons/line-awesome.html">
<span class="menu-title">Line Awesome</span>
</a>
</div>
</div>
<!--end::Menu-->
</div>
</div>
<!--end::Menu-->
</div>
<!--end::Aside-->
<!--begin::Wrapper-->
<div class="docs-wrapper d-flex flex-column flex-row-fluid" id="kt_docs_wrapper">
<!--begin::Header-->
<div id="kt_docs_header" class="docs-header align-items-stretch mb-2 mb-lg-10">
<!--begin::Container-->
<div class="container">
<div class="d-flex align-items-stretch justify-content-between py-3 h-75px">
<!--begin::Aside toggle-->
<div class="d-flex align-items-center d-lg-none ms-n2 me-1" title="Show aside menu">
<div class="btn btn-icon btn-flex btn-active-color-primary" id="kt_docs_aside_toggle">
<!--begin::Svg Icon | path: icons/duotune/abstract/abs015.svg-->
<span class="svg-icon svg-icon-1 mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 7H3C2.4 7 2 6.6 2 6V4C2 3.4 2.4 3 3 3H21C21.6 3 22 3.4 22 4V6C22 6.6 21.6 7 21 7Z" fill="black" />
<path opacity="0.3" d="M21 14H3C2.4 14 2 13.6 2 13V11C2 10.4 2.4 10 3 10H21C21.6 10 22 10.4 22 11V13C22 13.6 21.6 14 21 14ZM22 20V18C22 17.4 21.6 17 21 17H3C2.4 17 2 17.4 2 18V20C2 20.6 2.4 21 3 21H21C21.6 21 22 20.6 22 20Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Aside toggle-->
<!--begin::Logo-->
<div class="d-flex d-lg-none align-items-center flex-grow-1 flex-lg-grow-0 me-3 me-lg-15">
<a href="../../demo15/dist/index.html">
<img alt="Logo" src="assets/media/logos/logo-1.svg" class="h-25px" />
</a>
</div>
<!--end::Logo-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center justify-content-between flex-lg-grow-1">
<!--begin::Header title-->
<div class="d-flex align-items-center" id="kt_docs_header_title">
<!--begin::Page title-->
<div class="docs-page-title d-flex flex-column flex-lg-row align-items-lg-center py-5 mb-lg-0" data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_docs_content_container', 'lg': '#kt_docs_header_title'}">
<!--begin::Title-->
<h1 class="d-flex align-items-center text-dark my-1 fs-4">Documentation
<a href="../../demo15/dist/documentation/getting-started/changelog.html" class="badge fw-bold fs-9 px-2 ms-2 badge-white text-hover-primary shadow-sm">v8.0.30</a></h1>
<!--end::Title-->
<!--begin::Separator-->
<span class="d-none d-lg-block bullet h-20px w-1px bg-secondary mx-4"></span>
<!--end::Separator-->
<!--begin::Breadcrumb-->
<ul class="breadcrumb breadcrumb-separatorless fw-bold fs-6 my-1">
<!--begin::Item-->
<li class="breadcrumb-item text-gray-600">Forms</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item">
<span class="bullet w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-dark">Autosize</li>
<!--end::Item-->
</ul>
<!--end::Breadcrumb-->
</div>
<!--end::Page title-->
</div>
<!--end::Header title-->
<!--begin::Toolbar-->
<div class="d-flex align-items-center">
<!--begin::Search-->
<div id="kt_docs_search" class="d-flex align-items-center w-lg-250px me-2 me-lg-5" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="menu" data-kt-search-responsive="lg" data-kt-menu-trigger="auto" data-kt-menu-permanent="true" data-kt-menu-placement="bottom-end">
<!--begin::Tablet and mobile search toggle-->
<div data-kt-search-element="toggle" class="d-flex d-lg-none align-items-center">
<div class="btn btn-icon btn-color-gray-700 btn-active-color-primary bg-body w-40px h-40px">
<!--begin::Svg Icon | path: icons/duotune/general/gen004.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21.7 18.9L18.6 15.8C17.9 16.9 16.9 17.9 15.8 18.6L18.9 21.7C19.3 22.1 19.9 22.1 20.3 21.7L21.7 20.3C22.1 19.9 22.1 19.3 21.7 18.9Z" fill="black" />
<path opacity="0.3" d="M11 20C6 20 2 16 2 11C2 6 6 2 11 2C16 2 20 6 20 11C20 16 16 20 11 20ZM11 4C7.1 4 4 7.1 4 11C4 14.9 7.1 18 11 18C14.9 18 18 14.9 18 11C18 7.1 14.9 4 11 4ZM8 11C8 9.3 9.3 8 11 8C11.6 8 12 7.6 12 7C12 6.4 11.6 6 11 6C8.2 6 6 8.2 6 11C6 11.6 6.4 12 7 12C7.6 12 8 11.6 8 11Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
</div>
<!--end::Tablet and mobile search toggle-->
<!--begin::Form-->
<form data-kt-search-element="form" class="d-none d-lg-block w-100 mb-5 mb-lg-0 position-relative" autocomplete="off">
<!--begin::Hidden input(Added to disable form autocomplete)-->
<input type="hidden" />
<!--end::Hidden input-->
<!--begin::Icon-->
<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
<span class="svg-icon svg-icon-2 svg-icon-gray-700 position-absolute top-50 translate-middle-y ms-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<!--end::Icon-->
<!--begin::Input-->
<input type="text" class="form-control form-control-solid h-40px bg-body ps-13 fs-7" name="search" value="" placeholder="Search documentation ..." data-kt-search-element="input" />
<!--end::Input-->
<!--begin::Spinner-->
<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
<span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
</span>
<!--end::Spinner-->
<!--begin::Reset-->
<span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-4" data-kt-search-element="clear">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2 me-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<!--end::Reset-->
</form>
<!--end::Form-->
<!--begin::Menu-->
<div data-kt-search-element="content" class="menu menu-sub menu-sub-dropdown w-300px w-md-350px py-7 ps-7 pe-5 overflow-hidden">
<!--begin::Wrapper-->
<div data-kt-search-element="wrapper">
<!--begin::Search results-->
<div data-kt-search-element="results" class="d-none">
<!--begin::Items-->
<div class="scroll-y mh-200px mh-lg-350px">
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/index.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Overview</span>
<span class="fw-bold fs-base text-muted">Introduction & Getting Started</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/build/gulp.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Gulp</span>
<span class="fw-bold fs-base text-muted">Automate & enhance your build workflow</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/build/webpack.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Webpack</span>
<span class="fw-bold fs-base text-muted">Module bundler for build process automation</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/multi-demo.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Multi-demo</span>
<span class="fw-bold fs-base text-muted">Multi-demo concept & usage</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/file-structure.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">File Structure</span>
<span class="fw-bold fs-base text-muted">Theme File Structure Organization</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/customization/sass.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">SASS</span>
<span class="fw-bold fs-base text-muted">SASS Structure & Customization</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/customization/javascript.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Javacript</span>
<span class="fw-bold fs-base text-muted">Javacript Structure & Customization</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/customization/no-jquery.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">No jQuery</span>
<span class="fw-bold fs-base text-muted">Remove jQuery from build</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/dark-mode.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Dark Mode</span>
<span class="fw-bold fs-base text-muted">Dark Mode Setup for Layout & Components</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/illustrations.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Illustrations</span>
<span class="fw-bold fs-base text-muted">Vector Illustrations</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/video-tutorials.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Illustrations</span>
<span class="fw-bold fs-base text-muted">Youtube video tutorials</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/rtl.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">RTL Version</span>
<span class="fw-bold fs-base text-muted">Theme & Bootstrap RTL Version Setup</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/integration/blazor.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Blazor</span>
<span class="fw-bold fs-base text-muted">Bootstrap Blazor Server Side Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/integration/laravel.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Laravel</span>
<span class="fw-bold fs-base text-muted">Bootstrap Laravel Server Side Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/changelog.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Changelog</span>
<span class="fw-bold fs-base text-muted">Versions & Updates Information</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/updates.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Updates</span>
<span class="fw-bold fs-base text-muted">General Update Guidelines</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/references.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">References</span>
<span class="fw-bold fs-base text-muted">3rd-party Libraries & Resources</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/utilities.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Utilities</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Utilities</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/helpers/flex-layouts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Flex Layouts</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Flex Layouts</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/helpers/text.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Text</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Text Utilities</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/helpers/background.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Background</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Background Utilities</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/helpers/borders.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Borders</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Border Utilities</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/helpers/opacity.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Opacity</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Opacity Utilities</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/forms/controls.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Controls</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Form Controls</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/forms/advanced.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Advanced</span>
<span class="fw-bold fs-base text-muted">Advanced Bootstrap Form Controls</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/forms/input-group.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Input Group</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Input Group</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/buttons.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Buttons</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Buttons</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/indicator.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Indicator</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Indicator Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/rotate.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Rotate</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Rotate Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/tables.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tables</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Tables and DataTable</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/cards.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Cards</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Cards</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/symbol.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Symbol</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Symbol Component For Avatars and Images</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/badges.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Badges</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Badge Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/pulse.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Pulse</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Pulse Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/bullets.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bullets</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Bullet Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/accordion.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Accordion</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Accordion</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/carousel.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Carousel</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Carousel</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/overlay.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bootstrap Overlay</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Overlay Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/separator.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Separator</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Separator Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/tabs.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tabs</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Tabs</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/breadcrumb.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Breadcrumb</span>
<span class="fw-bold fs-base text-muted">Customized Bootstrap Breadcrumb</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/modal.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Modal</span>
<span class="fw-bold fs-base text-muted">Customized Bootstrap Modals</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/tooltips.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tooltips</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Tooltips</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/popovers.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Popovers</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Popovers</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/pagination.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Pagination</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Pagination</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/rating.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Rating</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Rating Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/ribbon.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Ribbon</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Ribbon Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/alerts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Alerts</span>
<span class="fw-bold fs-base text-muted">Customized Bootstrap Alerts</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/base/toasts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Toasts</span>
<span class="fw-bold fs-base text-muted">Extended Bootstrap Toasts</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/autosize.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Autosize Textarea</span>
<span class="fw-bold fs-base text-muted">Autosize Textarea Javascript Plugin</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/select2.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Select2</span>
<span class="fw-bold fs-base text-muted">Select2 and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/clipboard.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Clipboard</span>
<span class="fw-bold fs-base text-muted">Clipboard.js and Bootstrap integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/flatpickr.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Flatpickr</span>
<span class="fw-bold fs-base text-muted">Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formrepeater/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Form Repeater Overview</span>
<span class="fw-bold fs-base text-muted">Form Repeater and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formrepeater/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic Example</span>
<span class="fw-bold fs-base text-muted">Form Repeater Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formrepeater/nested.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Nested Example</span>
<span class="fw-bold fs-base text-muted">Form Repeater Nested Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formrepeater/advanced.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Nested Example</span>
<span class="fw-bold fs-base text-muted">Form Repeater Nested Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formvalidation/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">FormValidation Overview</span>
<span class="fw-bold fs-base text-muted">FormValidation and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formvalidation/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic Example</span>
<span class="fw-bold fs-base text-muted">FormValidation Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/formvalidation/advanced.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Advanced Example</span>
<span class="fw-bold fs-base text-muted">FormValidation Advanced Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/daterangepicker.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Date Range Picker</span>
<span class="fw-bold fs-base text-muted">Bootstrap Datepicker & Timepicker Implementation with Daterangepicker</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/tagify.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tagify</span>
<span class="fw-bold fs-base text-muted">Bootstrap Tags Implementation with Tagify</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/dialer.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Dialer</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Dialer and Input Spinner Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/nouislider.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">noUiSlider</span>
<span class="fw-bold fs-base text-muted">noUiSlider and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/password-meter.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Password Meter</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Password Meter & Strength Checker Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/inputmask.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Inputmask</span>
<span class="fw-bold fs-base text-muted">Inputmask Plugin & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/bootstrap-multiselectsplitter.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bootstrap Multiselectsplitter</span>
<span class="fw-bold fs-base text-muted">Bootstrap Multiselectsplitter Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/google-recaptcha.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Google reCAPTCHA</span>
<span class="fw-bold fs-base text-muted">Google reCAPTCHA & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/dropzonejs.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DropzoneJS</span>
<span class="fw-bold fs-base text-muted">DropzoneJS & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/image-input.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Image Input</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Image Input with Preview Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/bootstrap-maxlength.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bootstrap Maxlength</span>
<span class="fw-bold fs-base text-muted">A visual feedback indicator for the maxlength attribute.</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/amcharts/charts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">AmCharts</span>
<span class="fw-bold fs-base text-muted">AmCharts & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/amcharts/maps.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">AmCharts</span>
<span class="fw-bold fs-base text-muted">AmCharts Maps & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/amcharts/stock-charts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">AmCharts</span>
<span class="fw-bold fs-base text-muted">AmCharts Stock & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/apexcharts.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">ApexCharts</span>
<span class="fw-bold fs-base text-muted">ApexCharts & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/chartjs.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Chartjs</span>
<span class="fw-bold fs-base text-muted">Chartjs & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Overview</span>
<span class="fw-bold fs-base text-muted">Attractive JavaScript plotting for jQuery</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic Chart</span>
<span class="fw-bold fs-base text-muted">Flotcharts Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/axis.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Axis Labels</span>
<span class="fw-bold fs-base text-muted">Flotcharts Axis Labels Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/tracking.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tracking Curves</span>
<span class="fw-bold fs-base text-muted">Flotcharts Tracking Curves Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/dynamic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Dynamic Chart</span>
<span class="fw-bold fs-base text-muted">Flotcharts Dynamic Chart Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/stack.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Stack Chart Controls</span>
<span class="fw-bold fs-base text-muted">Flotcharts Stack Chart Controls Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/bar.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bar Chart</span>
<span class="fw-bold fs-base text-muted">Flotcharts Bar Chart Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/flotcharts/pie.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Pie Chart</span>
<span class="fw-bold fs-base text-muted">Flotcharts Pie Chart Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/google-charts/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Overview</span>
<span class="fw-bold fs-base text-muted">Google Charts Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/google-charts/column.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Column Chart</span>
<span class="fw-bold fs-base text-muted">Google Column Charts Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/google-charts/pie.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Pie Chart</span>
<span class="fw-bold fs-base text-muted">Google Pie Charts Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/charts/google-charts/line.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Line Chart</span>
<span class="fw-bold fs-base text-muted">Google Line Charts Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/tinymce/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tinymce Overview</span>
<span class="fw-bold fs-base text-muted">Tinymce Editor and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/tinymce/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic TinyMCE</span>
<span class="fw-bold fs-base text-muted">Tinymce Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/tinymce/plugins.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">TinyMCE Plugins</span>
<span class="fw-bold fs-base text-muted">Tinymce Editor Plugins Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/tinymce/hidden.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">TinyMCE Menubar</span>
<span class="fw-bold fs-base text-muted">TinyMCE with Hidden Menubar Example</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Overview</span>
<span class="fw-bold fs-base text-muted">CKEditor & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/classic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CKEditor Classic</span>
<span class="fw-bold fs-base text-muted">CKEditor Classic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/inline.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CKEditor Inline</span>
<span class="fw-bold fs-base text-muted">CKEditor Inline Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/balloon.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CKEditor Ballon</span>
<span class="fw-bold fs-base text-muted">CKEditor Ballon Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/balloon-block.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CKEditor Balloon Block</span>
<span class="fw-bold fs-base text-muted">CKEditor Balloon Block Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/ckeditor/document.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CKEditor Document</span>
<span class="fw-bold fs-base text-muted">CKEditor Document Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/quill/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Quill Overview</span>
<span class="fw-bold fs-base text-muted">Quill & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/quill/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Quill Basic</span>
<span class="fw-bold fs-base text-muted">Quill Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/editors/quill/autosave.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Quill Autosave</span>
<span class="fw-bold fs-base text-muted">Quill Autosave Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DataTables Overview</span>
<span class="fw-bold fs-base text-muted">DataTables & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DataTables</span>
<span class="fw-bold fs-base text-muted">DataTables Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/advanced.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DataTables</span>
<span class="fw-bold fs-base text-muted">DataTables Advanced Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/server-side.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DataTables</span>
<span class="fw-bold fs-base text-muted">DataTables Ajax Server Side Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/api.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">API</span>
<span class="fw-bold fs-base text-muted">DataTables API Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/draggable/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Draggable Overview</span>
<span class="fw-bold fs-base text-muted">Draggable and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/draggable/cards.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Simple List</span>
<span class="fw-bold fs-base text-muted">Draggable Simple List Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/draggable/multiple-containers.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Multiple Containers</span>
<span class="fw-bold fs-base text-muted">Draggable Multiple Containers Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/draggable/swappable.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Swappable</span>
<span class="fw-bold fs-base text-muted">Draggable Swappable Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/draggable/restricted.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Restricted</span>
<span class="fw-bold fs-base text-muted">Draggable Restricted Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fslightbox.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Fullscreen Lightbox</span>
<span class="fw-bold fs-base text-muted">Fullscreen Lightbox & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Fullcalendar Overview</span>
<span class="fw-bold fs-base text-muted">Fullcalendar & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/drag-n-drop.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Drag-n-Drop</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Drag & Drop Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/selectable.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Selectable Dates</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Selectable Dates Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/background-events.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Background Events</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Background Events Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/locales.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Localization</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Localization Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/timezone.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Timezone</span>
<span class="fw-bold fs-base text-muted">Fullcalendar Timezone Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jkanban/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">jKanban Overview</span>
<span class="fw-bold fs-base text-muted">jKanban & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jkanban/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic</span>
<span class="fw-bold fs-base text-muted">jKanban Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jkanban/color.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Colored</span>
<span class="fw-bold fs-base text-muted">jKanban Colored Items Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jkanban/restricted.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Restricted</span>
<span class="fw-bold fs-base text-muted">jKanban Restricted Items Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jkanban/rich.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Rich Content</span>
<span class="fw-bold fs-base text-muted">jKanban Rich Content Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/menu.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Menu</span>
<span class="fw-bold fs-base text-muted">Customm Bootstrap KTMenu component with Nested Dropdown & Accordion Submenu</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/typedjs.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Typed.js</span>
<span class="fw-bold fs-base text-muted">Typed.js & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/stepper.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Stepper</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Stepper & Wizard Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/scroll.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Scroll</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Scrollbar Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/cookie.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Cookie</span>
<span class="fw-bold fs-base text-muted">Custom Cookie Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/cookiealert.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Cookie Alert</span>
<span class="fw-bold fs-base text-muted">Cookie Alert Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/cropper.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Cropper</span>
<span class="fw-bold fs-base text-muted">Cropper.js & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/drawer.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Drawer</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Offcanvas & Drawer Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/toastr.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Toastr</span>
<span class="fw-bold fs-base text-muted">Toastr & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/blockui.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">BlockUI</span>
<span class="fw-bold fs-base text-muted">BlockUI & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/scrolltop.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Scrolltop</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Scrolltop Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/search.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Search</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Quick Search Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/smooth-scroll.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Smooth Scroll</span>
<span class="fw-bold fs-base text-muted">Smooth Scroll and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/sticky.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Sticky</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Sticky Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/swapper.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Swapper</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Swapper Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/sweetalert.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Sweet Alert</span>
<span class="fw-bold fs-base text-muted">Beautiful Replacement for Javascript Popups</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/toggle.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Scroll</span>
<span class="fw-bold fs-base text-muted">Custom Bootstrap Toggle Component</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Overview</span>
<span class="fw-bold fs-base text-muted">Vis-timeline & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic</span>
<span class="fw-bold fs-base text-muted">Vis-timeline Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/style.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Custom Styling</span>
<span class="fw-bold fs-base text-muted">Vis-timeline Custom Styling Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/group.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Group</span>
<span class="fw-bold fs-base text-muted">Vis-timeline Group Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/interaction.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Interaction</span>
<span class="fw-bold fs-base text-muted">Vis-timeline Interaction Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/vis-timeline/template.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Templates</span>
<span class="fw-bold fs-base text-muted">Vis-timeline Templates Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">jsTree Overview</span>
<span class="fw-bold fs-base text-muted">jsTree & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic</span>
<span class="fw-bold fs-base text-muted">jsTree Basic Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/contextual.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Contextual Menu</span>
<span class="fw-bold fs-base text-muted">jsTree Contextual Menu Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/customicons.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Custom Icons</span>
<span class="fw-bold fs-base text-muted">jsTree Custom Icons Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/dragdrop.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Drag & Drop</span>
<span class="fw-bold fs-base text-muted">jsTree Drag & Drop Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/checkable.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Checkable Tree</span>
<span class="fw-bold fs-base text-muted">jsTree Checkable Tree Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/jstree/ajax.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Ajax Data</span>
<span class="fw-bold fs-base text-muted">jsTree Ajax Data Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/tiny-slider/overview.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Tiny Slider Overview</span>
<span class="fw-bold fs-base text-muted">Tiny slider for all purposes</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/tiny-slider/basic.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Basic</span>
<span class="fw-bold fs-base text-muted">Tiny Slider Basic Example</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/tiny-slider/advanced.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Custom Navs</span>
<span class="fw-bold fs-base text-muted">Tiny Slider Custom Navigation Example</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/countup.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">CountUp</span>
<span class="fw-bold fs-base text-muted">Lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/icons/duotune.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Duotune</span>
<span class="fw-bold fs-base text-muted">In-house Designed Duotune SVG Icon Set</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/icons/bootstrap-icons.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Bootstrap Icons</span>
<span class="fw-bold fs-base text-muted">Bootstrap Icons and Flaticon Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/icons/font-awesome.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Fontawesome</span>
<span class="fw-bold fs-base text-muted">Fontawesome Icons and Flaticon Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/icons/line-awesome.html" data-kt-searchable="true" class="d-none d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Line Awesome</span>
<span class="fw-bold fs-base text-muted">Line Awesome Icons and Flaticon Integration</span>
</a>
<!--end::Item-->
</div>
<!--end::Items-->
</div>
<!--end::Search results-->
<!--begin::Recently viewed-->
<div class="mb-0" data-kt-search-element="main">
<!--begin::Heading-->
<div class="d-flex flex-stack fw-bold mb-2">
<!--begin::Label-->
<span class="text-muted fs-base me-2">Suggestions:</span>
<!--end::Label-->
</div>
<!--end::Heading-->
<!--begin::Items-->
<div class="scroll-y mh-200px mh-lg-325px">
<!--begin::Item-->
<a href="../../demo15/dist/documentation/getting-started/dark-mode.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Dark Mode</span>
<span class="fw-bold fs-base text-muted">Dark Mode Setup for Layout & Components</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/select2.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Select2</span>
<span class="fw-bold fs-base text-muted">Select2 and Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/forms/flatpickr.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Flatpickr</span>
<span class="fw-bold fs-base text-muted">Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/datatables/server-side.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">DataTables</span>
<span class="fw-bold fs-base text-muted">DataTables Ajax Server Side Examples</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/general/fullcalendar/overview.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Fullcalendar Overview</span>
<span class="fw-bold fs-base text-muted">Fullcalendar & Bootstrap Integration</span>
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="../../demo15/dist/documentation/icons/duotune.html" class="d-flex flex-column text-dark text-hover-primary py-2">
<span class="fw-bolder fs-5 mb-0">Duotune</span>
<span class="fw-bold fs-base text-muted">In-house Designed Duotune SVG Icon Set</span>
</a>
<!--end::Item-->
</div>
<!--end::Items-->
</div>
<!--end::Recently viewed-->
<!--begin::Empty-->
<div data-kt-search-element="empty" class="text-center d-none">
<!--begin::Icon-->
<div class="pt-10 pb-5">
<!--begin::Svg Icon | path: icons/duotune/files/fil024.svg-->
<span class="svg-icon svg-icon-4x opacity-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path opacity="0.3" d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" fill="black" />
<path d="M20 8L14 2V6C14 7.10457 14.8954 8 16 8H20Z" fill="black" />
<rect x="13.6993" y="13.6656" width="4.42828" height="1.73089" rx="0.865447" transform="rotate(45 13.6993 13.6656)" fill="black" />
<path d="M15 12C15 14.2 13.2 16 11 16C8.8 16 7 14.2 7 12C7 9.8 8.8 8 11 8C13.2 8 15 9.8 15 12ZM11 9.6C9.68 9.6 8.6 10.68 8.6 12C8.6 13.32 9.68 14.4 11 14.4C12.32 14.4 13.4 13.32 13.4 12C13.4 10.68 12.32 9.6 11 9.6Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Icon-->
<!--begin::Message-->
<div class="pb-15 fw-bold">
<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
<div class="text-muted fs-7">Please try again with a different query</div>
</div>
<!--end::Message-->
</div>
<!--end::Empty-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Menu-->
</div>
<!--end::Search-->
<a class="btn btn-flex btn-bg-white btn-color-gray-700 btn-active-primary h-40px border-0 fw-bolder px-3 px-lg-6 me-2 me-lg-4" href="https://preview.keenthemes.com/metronic8" target="_blank">Preview</a>
<a class="btn btn-primary btn-flex h-40px border-0 fw-bolder px-3 px-lg-6" href="https://1.envato.market/EA4JP" target="_blank">Purchase</a>
</div>
<!--end::Toolbar-->
</div>
<!--end::Wrapper-->
</div>
<div class="border-gray-300 border-bottom border-bottom-dashed"></div>
</div>
<!--end::Container-->
</div>
<!--end::Header-->
<!--begin::Content-->
<div class="docs-content d-flex flex-column flex-column-fluid" id="kt_docs_content">
<!--begin::Container-->
<div class="container" id="kt_docs_content_container">
<!--begin::Card-->
<div class="card card-docs mb-2">
<!--begin::Card Body-->
<div class="card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700">
<!--begin::Section-->
<div class="pb-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" id="overview">
<a href="#overview"></a>Overview</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">
<strong class="me-1">Autosize</strong>is a small, stand-alone script to automatically adjust textarea height. For full documentation please check the
<a href="http://www.jacklmoore.com/autosize/" target="_blank" class="fw-bold">plugin's site</a>.</div>
<!--end::Block-->
</div>
<!--end::Section-->
<!--begin::Section-->
<div class="py-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" id="usage">
<a href="#usage"></a>Usage</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">Autosize's Javascript files are bundled in the global plugin bundles and globally included in all pages:</div>
<!--end::Block-->
<!--begin::Code-->
<div class="py-5">
<!--begin::Highlight-->
<div class="highlight">
<button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button>
<div class="highlight-code">
<pre class="language-html">
<code class="language-html"><link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script></code>
</pre>
</div>
</div>
<!--end::Highlight-->
</div>
<!--end::Code-->
</div>
<!--end::Section-->
<!--begin::Section-->
<div class="py-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" id="initialization">
<a href="#initialization"></a>Initialization</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">
<ul class="py-0">
<li class="py-2">Autosize's Javascript is globally included and bundled without our plugins bundle.</li>
<li class="py-2">Autosize's is initialized by adding
<code>data-kt-autosize="true"</code>HTML attribute within any
<code>textarea</code>HTML element.</li>
<li class="py-2">Autosize instances can also be controlled programmatically.
<a href="#methods" data-kt-scroll-toggle="">See below for more info</a>.</li>
<li class="py-2">Autosize also supports event hooks. Please refer to the
<a href="http://www.jacklmoore.com/autosize/" target="_blank" class="me-1">official documentation</a>for more info.</li>
</ul>
</div>
<!--end::Block-->
</div>
<!--end::Section-->
<!--begin::Section-->
<div class="py-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" id="basic">
<a href="#basic"></a>Basic Example</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">Here's an example of the
<code>textarea</code>automatically resizing base on the amount of text written in it.</div>
<!--end::Block-->
<div class="py-5">
<!--begin::Information-->
<div class="d-flex align-items-center rounded py-5 px-5 bg-light-info">
<!--begin::Icon-->
<!--begin::Svg Icon | path: icons/duotune/general/gen044.svg-->
<span class="svg-icon svg-icon-3x svg-icon-info me-5">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="black" />
<rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="black" />
<rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
<!--end::Icon-->
<!--begin::Description-->
<div class="text-gray-700 fw-bold fs-6">Combine our extended
<code>.form-control</code>CSS classes to create quick and solid
<code>textarea</code>layouts.</div>
<!--end::Description-->
</div>
<!--end::Information-->
</div>
<!--begin::Block-->
<div class="py-5">
<div class="rounded border d-flex flex-column p-10">
<label for="" class="form-label">Basic autosize textarea</label>
<textarea class="form-control" data-kt-autosize="true"></textarea>
</div>
</div>
<!--end::Block-->
<!--begin::Block-->
<div class="py-5">
<div class="rounded border d-flex flex-column p-10">
<label for="" class="form-label">Solid autosize textarea</label>
<textarea class="form-control form-control form-control-solid" data-kt-autosize="true"></textarea>
</div>
</div>
<!--end::Block-->
<!--begin::Code-->
<div class="py-5">
<!--begin::Highlight-->
<div class="highlight">
<button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button>
<div class="highlight-code">
<pre class="language-html">
<code class="language-html"><!--begin::basic autosize textarea-->
<div class="rounded border d-flex flex-column p-10">
<label for="" class="form-label">Basic autosize textarea</label>
<textarea class="form-control" data-kt-autosize="true"></textarea>
</div>
<!--end::basic autosize textarea-->
<!--begin::solid autosize textarea-->
<div class="rounded border d-flex flex-column p-10">
<label for="" class="form-label">Solid autosize textarea</label>
<textarea class="form-control form-control form-control-solid" data-kt-autosize="true"></textarea>
</div>
<!--end::solid autosize textarea--></code>
</pre>
</div>
</div>
<!--end::Highlight-->
</div>
<!--end::Code-->
</div>
<!--end::Section-->
<!--begin::Section-->
<div class="py-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" data-kt-scroll-offset="85" id="options">
<a href="#options" data-kt-scroll-toggle=""></a>Markup Reference</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">Autosize uses HTML attributes to initialize the autosize function. Here are the references for each below</div>
<!--end::Block-->
<!--begin::Block-->
<div class="py-5">
<div class="fw-bolder fs-2">HTML Attribute references</div>
</div>
<!--end::Block-->
<!--begin::Table-->
<div class="py-5">
<div class="table-responsive border rounded">
<table class="table table-striped align-top mb-0 g-5">
<thead>
<tr class="fs-4 fw-bolder text-dark p-6">
<th class="min-w-250px">Name</th>
<th class="min-w-100px">Type</th>
<th class="min-w-500px">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>data-kt-autosize</code>
</td>
<td>
<code class="ms-0">mandatory</code>
</td>
<td>Enables the current element as the Autosize component. Accepts
<code>true</code>or
<code>false</code>values.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--end::Table-->
</div>
<!--end::Section-->
<!--begin::Section-->
<div class="pt-10">
<!--begin::Heading-->
<h1 class="anchor fw-bolder mb-5" data-kt-scroll-offset="85" id="methods">
<a href="#methods" data-kt-scroll-toggle=""></a>Methods</h1>
<!--end::Heading-->
<!--begin::Block-->
<div class="py-5">All Autosize components can be initialized automatically through HTML attributes. However, it can also be programmatically intialized by ignoring the HTML attribute and manually initializing it via Javascript.</div>
<!--end::Block-->
<!--begin::Table-->
<div class="pt-2">
<!--begin::Table wrapper-->
<div class="table-responsive border rounded">
<!--begin::Table-->
<table class="table table-striped mb-0 g-6">
<!--begin::Head-->
<thead>
<tr class="fs-4 fw-bolder p-6">
<th class="min-w-400px">Name</th>
<th class="min-w-500px">Description</th>
</tr>
</thead>
<!--end::Head-->
<!--begin::Head-->
<thead>
<tr class="fs-4 fw-bolder p-6">
<th colspan="2">Static Methods</th>
</tr>
</thead>
<!--end::Head-->
<!--begin::Body-->
<tbody>
<tr>
<td>
<code>Initialization</code>
</td>
<td>Initializes Autosize instances by selecting the element required. This method can be used to initialize dynamicly populated Autosize instances(e.g: after Ajax request).
<div class="pt-3">
<!--begin::Highlight-->
<div class="highlight">
<button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button>
<div class="highlight-code">
<pre class="language-javascript">
<code class="language-javascript">// Single node
const autosize_element = document.querySelector('#kt_autosize');
autosize(autosize_element);
// Nodelist
const autosize_elements = document.querySelectorAll('.kt_autosize');
autosize(autosize_elements);
// jQuery
autosize($('.kt_autosize'));</code>
</pre>
</div>
</div>
<!--end::Highlight-->
</div></td>
</tr>
</tbody>
<!--end::Body-->
<!--begin::Head-->
<thead>
<tr class="fs-4 fw-bolder p-6">
<th colspan="2">Public Methods</th>
</tr>
</thead>
<!--end::Head-->
<!--begin::Body-->
<tbody>
<tr>
<td>
<code>update</code>
</td>
<td>Triggers the height adjustment for an assigned textarea element. Autosize will automatically adjust the textarea height on keyboard and window resize events. There is no efficient way for Autosize to monitor for when another script has changed the textarea value or for changes in layout that impact the textarea element.
<div class="pt-3">
<!--begin::Highlight-->
<div class="highlight">
<button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button>
<div class="highlight-code">
<pre class="language-javascript">
<code class="language-javascript">// Change value
autosize_element.vlaue = "some value";
autosize.update(autosize_element);</code>
</pre>
</div>
</div>
<!--end::Highlight-->
</div></td>
</tr>
<tr>
<td>
<code>destroy</code>
</td>
<td>Removes Autosize and reverts any changes it made to the textarea element.
<div class="pt-3">
<!--begin::Highlight-->
<div class="highlight">
<button class="highlight-copy btn" data-bs-toggle="tooltip" title="Copy code">copy</button>
<div class="highlight-code">
<pre class="language-javascript">
<code class="language-javascript">autosize.destroy(autosize_element);</code>
</pre>
</div>
</div>
<!--end::Highlight-->
</div></td>
</tr>
</tbody>
<!--end::Body-->
</table>
</div>
</div>
<!--end::Table-->
</div>
<!--end::Section-->
</div>
<!--end::Card Body-->
</div>
<!--end::Card-->
</div>
<!--end::Container-->
</div>
<!--end::Content-->
<!--begin::Footer-->
<div class="py-4 d-flex flex-lg-column py-6" id="kt_footer">
<!--begin::Container-->
<div class="container d-flex flex-column flex-md-row align-items-center justify-content-between">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<span class="text-muted fw-bold me-1">2021©</span>
<a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
</div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-bold order-1 align-items-center mb-3 mb-md-0">
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://www.youtube.com/c/KeenThemesTuts/videos" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Youtube" src="assets/media/svg/social-logos/youtube.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://github.com/KeenthemesHub" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Github" src="assets/media/svg/social-logos/github.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://twitter.com/keenthemes" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Twitter" src="assets/media/svg/social-logos/twitter.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://www.instagram.com/keenthemes" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Instagram" src="assets/media/svg/social-logos/instagram.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://www.facebook.com/keenthemes" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Facebook" src="assets/media/svg/social-logos/facebook.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
<!--begin::Menu item-->
<li class="menu-item">
<!--begin::Menu link-->
<a href="https://dribbble.com/keenthemes" target="_blank" class="menu-link px-3">
<img alt="Keenthemes Dribbble" src="assets/media/svg/social-logos/dribbble.svg" class="h-20px" />
</a>
<!--end::Menu link-->
</li>
<!--end::Menu link-->
</ul>
<!--end::Menu-->
</div>
<!--end::Container-->
</div>
<!--end::Footer-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::Main-->
<!--begin::Exolore drawer toggle-->
<button id="kt_explore_toggle" class="explore-toggle btn btn-sm bg-body btn-color-gray-700 btn-active-primary shadow-sm position-fixed px-5 fw-bolder zindex-2 top-50 mt-10 end-0 transform-90 fs-6 rounded-top-0" title="Explore Metronic" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-trigger="hover">
<span id="kt_explore_toggle_label">Explore</span>
</button>
<!--end::Exolore drawer toggle-->
<!--begin::Exolore drawer-->
<div id="kt_explore" class="bg-body" data-kt-drawer="true" data-kt-drawer-name="explore" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'350px', 'lg': '475px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_explore_toggle" data-kt-drawer-close="#kt_explore_close">
<!--begin::Card-->
<div class="card shadow-none rounded-0 w-100">
<!--begin::Header-->
<div class="card-header" id="kt_explore_header">
<h3 class="card-title fw-bolder text-gray-700">Explore Metronic</h3>
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="kt_explore_close">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</button>
</div>
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body" id="kt_explore_body">
<!--begin::Content-->
<div id="kt_explore_scroll" class="scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#kt_explore_body" data-kt-scroll-dependencies="#kt_explore_header" data-kt-scroll-offset="5px">
<!--begin::Wrapper-->
<div class="mb-0">
<!--begin::Header-->
<div class="mb-7">
<div class="d-flex flex-stack">
<h3 class="mb-0">Metronic Licenses</h3>
<a href="https://themeforest.net/licenses/standard" class="fw-bold" target="_blank">License FAQs</a>
</div>
</div>
<!--end::Header-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Regular License</div>
<i class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="popover" data-bs-custom-class="popover-dark" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Use, by you or one client in a single end product which end users are not charged for."></i>
</div>
<div class="fs-7 text-muted">For single end product used by you or one client</div>
</div>
<div class="text-nowrap">
<span class="text-muted fs-7 fw-bold me-n1">$</span>
<span class="text-dark fs-1 fw-bolder">39</span>
</div>
</div>
</div>
<!--end::License-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Extended License</div>
<i class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="popover" data-bs-custom-class="popover-dark" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Use, by you or one client, in a single end product which end users can be charged for."></i>
</div>
<div class="fs-7 text-muted">For single end product with paying users.</div>
</div>
<div class="text-nowrap">
<span class="text-muted fs-7 fw-bold me-n1">$</span>
<span class="text-dark fs-1 fw-bolder">939</span>
</div>
</div>
</div>
<!--end::License-->
<!--begin::License-->
<div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
<div class="d-flex flex-stack">
<div class="d-flex flex-column">
<div class="d-flex align-items-center mb-1">
<div class="fs-6 fw-bold text-gray-800 fw-bold mb-0 me-1">Custom License</div>
</div>
<div class="fs-7 text-muted">Reach us for custom license offers.</div>
</div>
<div class="text-nowrap">
<a href="https://keenthemes.com/contact/" class="btn btn-sm btn-success" target="_blank">Contact Us</a>
</div>
</div>
</div>
<!--end::License-->
<!--begin::Purchase-->
<a href="https://1.envato.market/EA4JP" class="btn btn-primary mb-15 w-100">Buy Now</a>
<!--end::Purchase-->
<!--begin::Demos-->
<div class="mb-0">
<h3 class="fw-bolder text-center mb-6">Metronic Demos</h3>
<!--begin::Row-->
<div class="row g-5">
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo1.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo1" class="btn btn-sm btn-success shadow">Demo 1</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo2.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo2" class="btn btn-sm btn-success shadow">Demo 2</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo3.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo3" class="btn btn-sm btn-success shadow">Demo 3</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo4.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo4" class="btn btn-sm btn-success shadow">Demo 4</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo5.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo5" class="btn btn-sm btn-success shadow">Demo 5</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo6.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo6" class="btn btn-sm btn-success shadow">Demo 6</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo7.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo7" class="btn btn-sm btn-success shadow">Demo 7</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo8.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo8" class="btn btn-sm btn-success shadow">Demo 8</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo9.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo9" class="btn btn-sm btn-success shadow">Demo 9</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo10.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo10" class="btn btn-sm btn-success shadow">Demo 10</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo11.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo11" class="btn btn-sm btn-success shadow">Demo 11</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo12.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo12" class="btn btn-sm btn-success shadow">Demo 12</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo13.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo13" class="btn btn-sm btn-success shadow">Demo 13</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo14.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo14" class="btn btn-sm btn-success shadow">Demo 14</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-success rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo15.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo15" class="btn btn-sm btn-success shadow">Demo 15</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo16.png" alt="demo" class="w-100" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<a href="https://preview.keenthemes.com/metronic8/demo16" class="btn btn-sm btn-success shadow">Demo 16</a>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo17.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo18.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo19.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo20.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo21.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo22.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<!--begin::Demo-->
<div class="overlay overflow-hidden position-relative border border-4 border-gray-200 rounded">
<div class="overlay-wrapper">
<img src="assets/media/demos/demo23.png" alt="demo" class="w-100 opacity-25" />
</div>
<div class="overlay-layer bg-dark bg-opacity-10">
<div class="badge badge-white px-6 py-4 fw-bold fs-base shadow">Coming soon</div>
</div>
</div>
<!--end::Demo-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Demos-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Content-->
</div>
<!--end::Body-->
</div>
<!--end::Card-->
</div>
<!--end::Exolore drawer-->
<!--begin::Scrolltop-->
<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg-->
<span class="svg-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="black" />
<path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="black" />
</svg>
</span>
<!--end::Svg Icon-->
</div>
<!--end::Scrolltop-->
<script>var hostUrl = "assets/";</script>
<!--begin::Javascript-->
<!--begin::Global Javascript Bundle(used by all pages)-->
<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->
<!--begin::Page Vendors Javascript(used by this page)-->
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
<!--end::Page Vendors Javascript-->
<!--begin::Page Custom Javascript(used by this page)-->
<script src="assets/js/custom/documentation/documentation.js"></script>
<script src="assets/js/custom/documentation/search.js"></script>
<script src="assets/js/custom/documentation/forms/autosize.js"></script>
<!--end::Page Custom Javascript-->
<!--end::Javascript-->
</body>
<!--end::Body-->
</html>