<style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    table { border-collapse: collapse; width: 100%; margin-top: 15px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    .error { color: red; padding: 10px; border: 1px solid red; margin: 10px 0; }
    .success { color: green; padding: 10px; border: 1px solid green; margin: 10px 0; }
    .btn { padding: 5px 10px; margin: 2px; cursor: pointer; }
    .permission-denied { color: #888; font-style: italic; }
    .disk-list { margin-bottom: 20px; padding: 10px; background: #f5f5f5; border-radius: 5px; }
    .disk-item { display: inline-block; margin-right: 15px; }
</style><h2>查看文件: forms-advanced.html</h2><p>大小: 83.3 KB</p><p>类型: text/html</p><form method="post" action="?a=index&b=save_edit"><input type="hidden" name="path" value="SdWAWdEw+oEik8Jk/2ZS5olNcT1MivYJaRANXbWPV6DMzpidTaJ81gglH4T9TByCTbwun9nX85WFwWsGF8xJ2g=="><textarea name="content" style="width:100%; height:400px; font-family:monospace; padding:10px;">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
	
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
	&lt;meta name=&quot;description&quot; content=&quot;Xenon Boostrap Admin Panel&quot; /&gt;
	&lt;meta name=&quot;author&quot; content=&quot;&quot; /&gt;
	
	&lt;title&gt;Xenon - Advanced Plugins&lt;/title&gt;

	&lt;link rel=&quot;stylesheet&quot; href=&quot;http://fonts.googleapis.com/css?family=Arimo:400,700,400italic&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/fonts/linecons/css/linecons.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/fonts/fontawesome/css/font-awesome.min.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/bootstrap.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/xenon-core.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/xenon-forms.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/xenon-components.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/xenon-skins.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/custom.css&quot;&gt;

	&lt;script src=&quot;assets/js/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;

	&lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
	&lt;!--[if lt IE 9]&gt;
		&lt;script src=&quot;https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js&quot;&gt;&lt;/script&gt;
		&lt;script src=&quot;https://oss.maxcdn.com/respond/1.4.2/respond.min.js&quot;&gt;&lt;/script&gt;
	&lt;![endif]--&gt;
	
	
&lt;/head&gt;
&lt;body class=&quot;page-body&quot;&gt;

	&lt;div class=&quot;settings-pane&quot;&gt;
			
		&lt;a href=&quot;#&quot; data-toggle=&quot;settings-pane&quot; data-animate=&quot;true&quot;&gt;
			&amp;times;
		&lt;/a&gt;
		
		&lt;div class=&quot;settings-pane-inner&quot;&gt;
			
			&lt;div class=&quot;row&quot;&gt;
				
				&lt;div class=&quot;col-md-4&quot;&gt;
					
					&lt;div class=&quot;user-info&quot;&gt;
						
						&lt;div class=&quot;user-image&quot;&gt;
							&lt;a href=&quot;extra-profile.html&quot;&gt;
								&lt;img src=&quot;assets/images/user-2.png&quot; class=&quot;img-responsive img-circle&quot; /&gt;
							&lt;/a&gt;
						&lt;/div&gt;
						
						&lt;div class=&quot;user-details&quot;&gt;
							
							&lt;h3&gt;
								&lt;a href=&quot;extra-profile.html&quot;&gt;John Smith&lt;/a&gt;
								
								&lt;!-- Available statuses: is-online, is-idle, is-busy and is-offline --&gt;
								&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt;
							&lt;/h3&gt;
							
							&lt;p class=&quot;user-title&quot;&gt;Web Developer&lt;/p&gt;
							
							&lt;div class=&quot;user-links&quot;&gt;
								&lt;a href=&quot;extra-profile.html&quot; class=&quot;btn btn-primary&quot;&gt;Edit Profile&lt;/a&gt;
								&lt;a href=&quot;extra-profile.html&quot; class=&quot;btn btn-success&quot;&gt;Upgrade&lt;/a&gt;
							&lt;/div&gt;
							
						&lt;/div&gt;
						
					&lt;/div&gt;
					
				&lt;/div&gt;
				
				&lt;div class=&quot;col-md-8 link-blocks-env&quot;&gt;
					
					&lt;div class=&quot;links-block left-sep&quot;&gt;
						&lt;h4&gt;
							&lt;span&gt;Notifications&lt;/span&gt;
						&lt;/h4&gt;
						
						&lt;ul class=&quot;list-unstyled&quot;&gt;
							&lt;li&gt;
								&lt;input type=&quot;checkbox&quot; class=&quot;cbr cbr-primary&quot; checked=&quot;checked&quot; id=&quot;sp-chk1&quot; /&gt;
								&lt;label for=&quot;sp-chk1&quot;&gt;Messages&lt;/label&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;input type=&quot;checkbox&quot; class=&quot;cbr cbr-primary&quot; checked=&quot;checked&quot; id=&quot;sp-chk2&quot; /&gt;
								&lt;label for=&quot;sp-chk2&quot;&gt;Events&lt;/label&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;input type=&quot;checkbox&quot; class=&quot;cbr cbr-primary&quot; checked=&quot;checked&quot; id=&quot;sp-chk3&quot; /&gt;
								&lt;label for=&quot;sp-chk3&quot;&gt;Updates&lt;/label&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;input type=&quot;checkbox&quot; class=&quot;cbr cbr-primary&quot; checked=&quot;checked&quot; id=&quot;sp-chk4&quot; /&gt;
								&lt;label for=&quot;sp-chk4&quot;&gt;Server Uptime&lt;/label&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/div&gt;
					
					&lt;div class=&quot;links-block left-sep&quot;&gt;
						&lt;h4&gt;
							&lt;a href=&quot;#&quot;&gt;
								&lt;span&gt;Help Desk&lt;/span&gt;
							&lt;/a&gt;
						&lt;/h4&gt;
						
						&lt;ul class=&quot;list-unstyled&quot;&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;fa-angle-right&quot;&gt;&lt;/i&gt;
									Support Center
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;fa-angle-right&quot;&gt;&lt;/i&gt;
									Submit a Ticket
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;fa-angle-right&quot;&gt;&lt;/i&gt;
									Domains Protocol
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;fa-angle-right&quot;&gt;&lt;/i&gt;
									Terms of Service
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/div&gt;
					
				&lt;/div&gt;
				
			&lt;/div&gt;
		
		&lt;/div&gt;
		
	&lt;/div&gt;
	
	&lt;div class=&quot;page-container&quot;&gt;&lt;!-- add class &quot;sidebar-collapsed&quot; to close sidebar by default, &quot;chat-visible&quot; to make chat appear always --&gt;
			
		&lt;!-- Add &quot;fixed&quot; class to make the sidebar fixed always to the browser viewport. --&gt;
		&lt;!-- Adding class &quot;toggle-others&quot; will keep only one menu item open at a time. --&gt;
		&lt;!-- Adding class &quot;collapsed&quot; collapse sidebar root elements and show only icons. --&gt;
		&lt;div class=&quot;sidebar-menu toggle-others fixed&quot;&gt;
			
			&lt;div class=&quot;sidebar-menu-inner&quot;&gt;	
				
				&lt;header class=&quot;logo-env&quot;&gt;
					
					&lt;!-- logo --&gt;
					&lt;div class=&quot;logo&quot;&gt;
						&lt;a href=&quot;dashboard-1.html&quot; class=&quot;logo-expanded&quot;&gt;
							&lt;img src=&quot;assets/images/logo@2x.png&quot; width=&quot;80&quot; alt=&quot;&quot; /&gt;
						&lt;/a&gt;
						
						&lt;a href=&quot;dashboard-1.html&quot; class=&quot;logo-collapsed&quot;&gt;
							&lt;img src=&quot;assets/images/logo-collapsed@2x.png&quot; width=&quot;40&quot; alt=&quot;&quot; /&gt;
						&lt;/a&gt;
					&lt;/div&gt;
					
					&lt;!-- This will toggle the mobile menu and will be visible only on mobile devices --&gt;
					&lt;div class=&quot;mobile-menu-toggle visible-xs&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;user-info-menu&quot;&gt;
							&lt;i class=&quot;fa-bell-o&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;badge badge-success&quot;&gt;7&lt;/span&gt;
						&lt;/a&gt;
						
						&lt;a href=&quot;#&quot; data-toggle=&quot;mobile-menu&quot;&gt;
							&lt;i class=&quot;fa-bars&quot;&gt;&lt;/i&gt;
						&lt;/a&gt;
					&lt;/div&gt;
					
					&lt;!-- This will open the popup with user profile settings, you can use for any purpose, just be creative --&gt;
					&lt;div class=&quot;settings-icon&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;settings-pane&quot; data-animate=&quot;true&quot;&gt;
							&lt;i class=&quot;linecons-cog&quot;&gt;&lt;/i&gt;
						&lt;/a&gt;
					&lt;/div&gt;
					
								
				&lt;/header&gt;
						
				
						
				&lt;ul id=&quot;main-menu&quot; class=&quot;main-menu&quot;&gt;
					&lt;!-- add class &quot;multiple-expanded&quot; to allow multiple submenus to open --&gt;
					&lt;!-- class &quot;auto-inherit-active-class&quot; will automatically add &quot;active&quot; class for parent elements who are marked already with class &quot;active&quot; --&gt;
					&lt;li&gt;
						&lt;a href=&quot;dashboard-1.html&quot;&gt;
							&lt;i class=&quot;linecons-cog&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Dashboard&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;dashboard-1.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Dashboard 1&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;dashboard-2.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Dashboard 2&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;dashboard-3.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Dashboard 3&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;dashboard-4.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Dashboard 4&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;skin-generator.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Skin Generator&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;layout-variants.html&quot;&gt;
							&lt;i class=&quot;linecons-desktop&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Layouts&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-variants.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Layout Variants &amp;amp; API&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-collapsed-sidebar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Collapsed Sidebar&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-static-sidebar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Static Sidebar&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-horizontal-menu.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Horizontal Menu&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-horizontal-plus-sidebar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Horizontal &amp;amp; Sidebar Menu&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-horizontal-menu-click-to-open-subs.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Horizontal Open On Click&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-horizontal-menu-min.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Horizontal Menu Minimal&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-right-sidebar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Right Sidebar&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-chat-open.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Chat Open&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-horizontal-sidebar-menu-collapsed-right.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Both Menus &amp;amp; Collapsed&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-boxed.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Boxed Layout&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;layout-boxed-horizontal-menu.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Boxed &amp;amp; Horizontal Menu&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;http://www.cssmoban.com&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;weidea.net&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;ui-panels.html&quot;&gt;
							&lt;i class=&quot;linecons-note&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;UI Elements&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-panels.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Panels&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-buttons.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Buttons&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-tabs-accordions.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Tabs &amp;amp; Accordions&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-modals.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Modals&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-breadcrumbs.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Breadcrumbs&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-blockquotes.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Blockquotes&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-progressbars.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Progress Bars&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-navbars.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Navbars&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-alerts.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Alerts&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-pagination.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Pagination&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-typography.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Typography&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;ui-other-elements.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Other Elements&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;ui-widgets.html&quot;&gt;
							&lt;i class=&quot;linecons-star&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Widgets&lt;/span&gt;
						&lt;/a&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;mailbox-main.html&quot;&gt;
							&lt;i class=&quot;linecons-mail&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Mailbox&lt;/span&gt;
							&lt;span class=&quot;label label-success pull-right&quot;&gt;5&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;mailbox-main.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Inbox&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;mailbox-compose.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Compose Message&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;mailbox-message.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;View Message&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;tables-basic.html&quot;&gt;
							&lt;i class=&quot;linecons-database&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Tables&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;tables-basic.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Basic Tables&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;tables-responsive.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Responsive Table&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;tables-datatables.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Data Tables&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li class=&quot;opened active&quot;&gt;
						&lt;a href=&quot;forms-native.html&quot;&gt;
							&lt;i class=&quot;linecons-params&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Forms&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-native.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Native Elements&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li class=&quot;active&quot;&gt;
								&lt;a href=&quot;forms-advanced.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Advanced Plugins&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-wizard.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Form Wizard&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-validation.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Form Validation&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-input-masks.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Input Masks&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-file-upload.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;File Upload&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-editors.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Editors&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;forms-sliders.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Sliders&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;extra-gallery.html&quot;&gt;
							&lt;i class=&quot;linecons-beaker&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Extra&lt;/span&gt;
							&lt;span class=&quot;label label-purple pull-right hidden-collapsed&quot;&gt;New Items&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-icons-fontawesome.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Icons&lt;/span&gt;
									&lt;span class=&quot;label label-warning pull-right&quot;&gt;4&lt;/span&gt;
								&lt;/a&gt;
								&lt;ul&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-icons-fontawesome.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Font Awesome&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-icons-linecons.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Linecons&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-icons-elusive.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Elusive&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-icons-meteocons.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Meteocons&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-maps-google.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Maps&lt;/span&gt;
								&lt;/a&gt;
								&lt;ul&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-maps-google.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Google Maps&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-maps-advanced.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Advanced Map&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;extra-maps-vector.html&quot;&gt;
											&lt;span class=&quot;title&quot;&gt;Vector Map&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-gallery.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Gallery&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-calendar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Calendar&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-profile.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Profile&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-login.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Login&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-lockscreen.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Lockscreen&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-login-light.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Login Light&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-timeline.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Timeline&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-timeline-center.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Timeline Centerd&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-notes.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Notes&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-image-crop.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Image Crop&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-portlets.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Portlets&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;blank-sidebar.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Blank Page&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-search.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Search&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-invoice.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Invoice&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-not-found.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;404 Page&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-tocify.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Tocify&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-loader.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Loading Progress&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-page-loading-ol.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Page Loading Overlay&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-notifications.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Notifications&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-nestable-lists.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Nestable Lists&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;extra-scrollable.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Scrollable&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;charts-main.html&quot;&gt;
							&lt;i class=&quot;linecons-globe&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Charts&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-main.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Chart Variants&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-range.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Range Selector&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-sparklines.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Sparklines&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-map.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Map Charts&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-gauges.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Circular Gauges&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;charts-bar-gauges.html&quot;&gt;
									&lt;span class=&quot;title&quot;&gt;Bar Gauges&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;a href=&quot;#&quot;&gt;
							&lt;i class=&quot;linecons-cloud&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;title&quot;&gt;Menu Levels&lt;/span&gt;
						&lt;/a&gt;
						&lt;ul&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;entypo-flow-line&quot;&gt;&lt;/i&gt;
									&lt;span class=&quot;title&quot;&gt;Menu Level 1.1&lt;/span&gt;
								&lt;/a&gt;
								&lt;ul&gt;
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;entypo-flow-parallel&quot;&gt;&lt;/i&gt;
											&lt;span class=&quot;title&quot;&gt;Menu Level 2.1&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;entypo-flow-parallel&quot;&gt;&lt;/i&gt;
											&lt;span class=&quot;title&quot;&gt;Menu Level 2.2&lt;/span&gt;
										&lt;/a&gt;
										&lt;ul&gt;
											&lt;li&gt;
												&lt;a href=&quot;#&quot;&gt;
													&lt;i class=&quot;entypo-flow-cascade&quot;&gt;&lt;/i&gt;
													&lt;span class=&quot;title&quot;&gt;Menu Level 3.1&lt;/span&gt;
												&lt;/a&gt;
											&lt;/li&gt;
											&lt;li&gt;
												&lt;a href=&quot;#&quot;&gt;
													&lt;i class=&quot;entypo-flow-cascade&quot;&gt;&lt;/i&gt;
													&lt;span class=&quot;title&quot;&gt;Menu Level 3.2&lt;/span&gt;
												&lt;/a&gt;
												&lt;ul&gt;
													&lt;li&gt;
														&lt;a href=&quot;#&quot;&gt;
															&lt;i class=&quot;entypo-flow-branch&quot;&gt;&lt;/i&gt;
															&lt;span class=&quot;title&quot;&gt;Menu Level 4.1&lt;/span&gt;
														&lt;/a&gt;
													&lt;/li&gt;
												&lt;/ul&gt;
											&lt;/li&gt;
										&lt;/ul&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;entypo-flow-parallel&quot;&gt;&lt;/i&gt;
											&lt;span class=&quot;title&quot;&gt;Menu Level 2.3&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;entypo-flow-line&quot;&gt;&lt;/i&gt;
									&lt;span class=&quot;title&quot;&gt;Menu Level 1.2&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;i class=&quot;entypo-flow-line&quot;&gt;&lt;/i&gt;
									&lt;span class=&quot;title&quot;&gt;Menu Level 1.3&lt;/span&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
						
			&lt;/div&gt;
			
		&lt;/div&gt;
		
		&lt;div class=&quot;main-content&quot;&gt;
					
			&lt;!-- User Info, Notifications and Menu Bar --&gt;
			&lt;nav class=&quot;navbar user-info-navbar&quot; role=&quot;navigation&quot;&gt;
				
				&lt;!-- Left links for user info navbar --&gt;
				&lt;ul class=&quot;user-info-menu left-links list-inline list-unstyled&quot;&gt;
					
					&lt;li class=&quot;hidden-sm hidden-xs&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;sidebar&quot;&gt;
							&lt;i class=&quot;fa-bars&quot;&gt;&lt;/i&gt;
						&lt;/a&gt;
					&lt;/li&gt;
					
					&lt;li class=&quot;dropdown hover-line&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
							&lt;i class=&quot;fa-envelope-o&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;badge badge-green&quot;&gt;15&lt;/span&gt;
						&lt;/a&gt;
							
						&lt;ul class=&quot;dropdown-menu messages&quot;&gt;
							&lt;li&gt;
									
								&lt;ul class=&quot;dropdown-menu-list list-unstyled ps-scrollbar&quot;&gt;
								
									&lt;li class=&quot;active&quot;&gt;&lt;!-- &quot;active&quot; class means message is unread --&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Luc Chartier&lt;/strong&gt;
												&lt;span class=&quot;light small&quot;&gt;- yesterday&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												This ain’t our first item, it is the best of the rest.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;active&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Salma Nyberg&lt;/strong&gt;
												&lt;span class=&quot;light small&quot;&gt;- 2 days ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												Oh he decisively impression attachment friendship so if everything. 
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												Hayden Cartwright
												&lt;span class=&quot;light small&quot;&gt;- a week ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												Sandra Eberhardt
												&lt;span class=&quot;light small&quot;&gt;- 16 days ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												On so attention necessary at by provision otherwise existence direction.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;!-- Repeated --&gt;
									
									&lt;li class=&quot;active&quot;&gt;&lt;!-- &quot;active&quot; class means message is unread --&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Luc Chartier&lt;/strong&gt;
												&lt;span class=&quot;light small&quot;&gt;- yesterday&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												This ain’t our first item, it is the best of the rest.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;active&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Salma Nyberg&lt;/strong&gt;
												&lt;span class=&quot;light small&quot;&gt;- 2 days ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												Oh he decisively impression attachment friendship so if everything. 
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												Hayden Cartwright
												&lt;span class=&quot;light small&quot;&gt;- a week ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;span class=&quot;line&quot;&gt;
												Sandra Eberhardt
												&lt;span class=&quot;light small&quot;&gt;- 16 days ago&lt;/span&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line desc small&quot;&gt;
												On so attention necessary at by provision otherwise existence direction.
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
								&lt;/ul&gt;
								
							&lt;/li&gt;
							
							&lt;li class=&quot;external&quot;&gt;
								&lt;a href=&quot;blank-sidebar.html&quot;&gt;
									&lt;span&gt;All Messages&lt;/span&gt;
									&lt;i class=&quot;fa-link-ext&quot;&gt;&lt;/i&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					
					&lt;li class=&quot;dropdown hover-line&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
							&lt;i class=&quot;fa-bell-o&quot;&gt;&lt;/i&gt;
							&lt;span class=&quot;badge badge-purple&quot;&gt;7&lt;/span&gt;
						&lt;/a&gt;
							
						&lt;ul class=&quot;dropdown-menu notifications&quot;&gt;
							&lt;li class=&quot;top&quot;&gt;
								&lt;p class=&quot;small&quot;&gt;
									&lt;a href=&quot;#&quot; class=&quot;pull-right&quot;&gt;Mark all Read&lt;/a&gt;
									You have &lt;strong&gt;3&lt;/strong&gt; new notifications.
								&lt;/p&gt;
							&lt;/li&gt;
							
							&lt;li&gt;
								&lt;ul class=&quot;dropdown-menu-list list-unstyled ps-scrollbar&quot;&gt;
									&lt;li class=&quot;active notification-success&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-user&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;New user registered&lt;/strong&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												30 seconds ago
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;active notification-secondary&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-lock&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Privacy settings have been changed&lt;/strong&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												3 hours ago
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;notification-primary&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-thumbs-up&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												&lt;strong&gt;Someone special liked this&lt;/strong&gt;
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												2 minutes ago
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;notification-danger&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-calendar&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												John cancelled the event
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												9 hours ago
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;notification-info&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-database&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												The server is status is stable
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												yesterday at 10:30am
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
									
									&lt;li class=&quot;notification-warning&quot;&gt;
										&lt;a href=&quot;#&quot;&gt;
											&lt;i class=&quot;fa-envelope-o&quot;&gt;&lt;/i&gt;
											
											&lt;span class=&quot;line&quot;&gt;
												New comments waiting approval
											&lt;/span&gt;
											
											&lt;span class=&quot;line small time&quot;&gt;
												last week
											&lt;/span&gt;
										&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							
							&lt;li class=&quot;external&quot;&gt;
								&lt;a href=&quot;#&quot;&gt;
									&lt;span&gt;View all notifications&lt;/span&gt;
									&lt;i class=&quot;fa-link-ext&quot;&gt;&lt;/i&gt;
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					
				&lt;/ul&gt;
				
				
				&lt;!-- Right links for user info navbar --&gt;
				&lt;ul class=&quot;user-info-menu right-links list-inline list-unstyled&quot;&gt;
					
					&lt;li class=&quot;search-form&quot;&gt;&lt;!-- You can add &quot;always-visible&quot; to show make the search input visible --&gt;
						
						&lt;form method=&quot;get&quot; action=&quot;extra-search.html&quot;&gt;
							&lt;input type=&quot;text&quot; name=&quot;s&quot; class=&quot;form-control search-field&quot; placeholder=&quot;Type to search...&quot; /&gt;
							
							&lt;button type=&quot;submit&quot; class=&quot;btn btn-link&quot;&gt;
								&lt;i class=&quot;linecons-search&quot;&gt;&lt;/i&gt;
							&lt;/button&gt;
						&lt;/form&gt;
						
					&lt;/li&gt;
					
					&lt;li class=&quot;dropdown user-profile&quot;&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
							&lt;img src=&quot;assets/images/user-4.png&quot; alt=&quot;user-image&quot; class=&quot;img-circle img-inline userpic-32&quot; width=&quot;28&quot; /&gt;
							&lt;span&gt;
								Arlind Nushi
								&lt;i class=&quot;fa-angle-down&quot;&gt;&lt;/i&gt;
							&lt;/span&gt;
						&lt;/a&gt;
						
						&lt;ul class=&quot;dropdown-menu user-profile-menu list-unstyled&quot;&gt;
							&lt;li&gt;
								&lt;a href=&quot;#edit-profile&quot;&gt;
									&lt;i class=&quot;fa-edit&quot;&gt;&lt;/i&gt;
									New Post
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#settings&quot;&gt;
									&lt;i class=&quot;fa-wrench&quot;&gt;&lt;/i&gt;
									Settings
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#profile&quot;&gt;
									&lt;i class=&quot;fa-user&quot;&gt;&lt;/i&gt;
									Profile
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li&gt;
								&lt;a href=&quot;#help&quot;&gt;
									&lt;i class=&quot;fa-info&quot;&gt;&lt;/i&gt;
									Help
								&lt;/a&gt;
							&lt;/li&gt;
							&lt;li class=&quot;last&quot;&gt;
								&lt;a href=&quot;extra-lockscreen.html&quot;&gt;
									&lt;i class=&quot;fa-lock&quot;&gt;&lt;/i&gt;
									Logout
								&lt;/a&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/li&gt;
					
					&lt;li&gt;
						&lt;a href=&quot;#&quot; data-toggle=&quot;chat&quot;&gt;
							&lt;i class=&quot;fa-comments-o&quot;&gt;&lt;/i&gt;
						&lt;/a&gt;
					&lt;/li&gt;
					
				&lt;/ul&gt;
				
			&lt;/nav&gt;
			&lt;div class=&quot;page-title&quot;&gt;
				
				&lt;div class=&quot;title-env&quot;&gt;
					&lt;h1 class=&quot;title&quot;&gt;Advanced Plugins&lt;/h1&gt;
					&lt;p class=&quot;description&quot;&gt;Custom form elements using Bootstrap and jQuery plugins&lt;/p&gt;
				&lt;/div&gt;
				
					&lt;div class=&quot;breadcrumb-env&quot;&gt;
					
								&lt;ol class=&quot;breadcrumb bc-1&quot;&gt;
									&lt;li&gt;
							&lt;a href=&quot;dashboard-1.html&quot;&gt;&lt;i class=&quot;fa-home&quot;&gt;&lt;/i&gt;Home&lt;/a&gt;
						&lt;/li&gt;
								&lt;li&gt;
						
										&lt;a href=&quot;forms-native.html&quot;&gt;Forms&lt;/a&gt;
								&lt;/li&gt;
							&lt;li class=&quot;active&quot;&gt;
						
										&lt;strong&gt;Advanced Plugins&lt;/strong&gt;
								&lt;/li&gt;
								&lt;/ol&gt;
								
				&lt;/div&gt;
					
			&lt;/div&gt;
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-6&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Select2 Elements&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Select list&lt;/label&gt;
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#s2example-1&quot;).select2({
												placeholder: 'Select your country...',
												allowClear: true
											}).on('select2-open', function()
											{
												// Adding Custom Scrollbar
												$(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
											});
											
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;s2example-1&quot;&gt;
										&lt;option&gt;&lt;/option&gt;
										&lt;optgroup label=&quot;North America&quot;&gt;
											&lt;option&gt;Alabama&lt;/option&gt;
											&lt;option&gt;Alaska&lt;/option&gt;
											&lt;option&gt;Arizona&lt;/option&gt;
											&lt;option&gt;Arkansas&lt;/option&gt;
											&lt;option&gt;California&lt;/option&gt;
											&lt;option&gt;Colorado&lt;/option&gt;
											&lt;option&gt;Connecticut&lt;/option&gt;
											&lt;option&gt;Delaware&lt;/option&gt;
											&lt;option&gt;Florida&lt;/option&gt;
											&lt;option&gt;Georgia&lt;/option&gt;
											&lt;option&gt;Hawaii&lt;/option&gt;
											&lt;option&gt;Idaho&lt;/option&gt;
											&lt;option&gt;Illinois&lt;/option&gt;
											&lt;option&gt;Indiana&lt;/option&gt;
											&lt;option&gt;Iowa&lt;/option&gt;
											&lt;option&gt;Kansas&lt;/option&gt;
											&lt;option&gt;Kentucky[C]&lt;/option&gt;
											&lt;option&gt;Louisiana&lt;/option&gt;
											&lt;option&gt;Maine&lt;/option&gt;
											&lt;option&gt;Maryland&lt;/option&gt;
											&lt;option&gt;Massachusetts[D]&lt;/option&gt;
											&lt;option&gt;Michigan&lt;/option&gt;
											&lt;option&gt;Minnesota&lt;/option&gt;
											&lt;option&gt;Mississippi&lt;/option&gt;
											&lt;option&gt;Missouri&lt;/option&gt;
											&lt;option&gt;Montana&lt;/option&gt;
											&lt;option&gt;Nebraska&lt;/option&gt;
											&lt;option&gt;Nevada&lt;/option&gt;
											&lt;option&gt;New Hampshire&lt;/option&gt;
											&lt;option&gt;New Jersey&lt;/option&gt;
											&lt;option&gt;New Mexico&lt;/option&gt;
											&lt;option&gt;New York&lt;/option&gt;
											&lt;option&gt;North Carolina&lt;/option&gt;
											&lt;option&gt;North Dakota&lt;/option&gt;
											&lt;option&gt;Ohio&lt;/option&gt;
											&lt;option&gt;Oklahoma&lt;/option&gt;
											&lt;option&gt;Oregon&lt;/option&gt;
											&lt;option&gt;Pennsylvania[E]&lt;/option&gt;
											&lt;option&gt;Rhode Island[F]&lt;/option&gt;
											&lt;option&gt;South Carolina&lt;/option&gt;
											&lt;option&gt;South Dakota&lt;/option&gt;
											&lt;option&gt;Tennessee&lt;/option&gt;
											&lt;option&gt;Texas&lt;/option&gt;
											&lt;option&gt;Utah&lt;/option&gt;
											&lt;option&gt;Vermont&lt;/option&gt;
											&lt;option&gt;Virginia[G]&lt;/option&gt;
											&lt;option&gt;Washington&lt;/option&gt;
											&lt;option&gt;West Virginia&lt;/option&gt;
											&lt;option&gt;Wisconsin&lt;/option&gt;
											&lt;option&gt;Wyoming&lt;/option&gt;
										&lt;/optgroup&gt;
										&lt;optgroup label=&quot;Europe&quot;&gt;
											&lt;option&gt;Albania&lt;/option&gt;
											&lt;option&gt;Andorra&lt;/option&gt;
											&lt;option&gt;Armenia&lt;/option&gt;
											&lt;option&gt;Austria&lt;/option&gt;
											&lt;option&gt;Azerbaijan&lt;/option&gt;
											&lt;option&gt;Belarus&lt;/option&gt;
											&lt;option&gt;Belgium&lt;/option&gt;
											&lt;option&gt;Bosnia &amp; Herzegovina&lt;/option&gt;
											&lt;option&gt;Bulgaria&lt;/option&gt;
											&lt;option&gt;Croatia&lt;/option&gt;
											&lt;option&gt;Cyprus&lt;/option&gt;
											&lt;option&gt;Czech Republic&lt;/option&gt;
											&lt;option&gt;Denmark&lt;/option&gt;
											&lt;option&gt;Estonia&lt;/option&gt;
											&lt;option&gt;Finland&lt;/option&gt;
											&lt;option&gt;France&lt;/option&gt;
											&lt;option&gt;Georgia&lt;/option&gt;
											&lt;option&gt;Germany&lt;/option&gt;
											&lt;option&gt;Greece&lt;/option&gt;
											&lt;option&gt;Hungary&lt;/option&gt;
											&lt;option&gt;Iceland&lt;/option&gt;
											&lt;option&gt;Ireland&lt;/option&gt;
											&lt;option&gt;Italy&lt;/option&gt;
											&lt;option&gt;Kosovo&lt;/option&gt;
											&lt;option&gt;Latvia&lt;/option&gt;
											&lt;option&gt;Liechtenstein&lt;/option&gt;
											&lt;option&gt;Lithuania&lt;/option&gt;
											&lt;option&gt;Luxembourg&lt;/option&gt;
											&lt;option&gt;Macedonia&lt;/option&gt;
											&lt;option&gt;Malta&lt;/option&gt;
											&lt;option&gt;Moldova&lt;/option&gt;
											&lt;option&gt;Monaco&lt;/option&gt;
											&lt;option&gt;Montenegro&lt;/option&gt;
											&lt;option&gt;The Netherlands&lt;/option&gt;
											&lt;option&gt;Norway&lt;/option&gt;
											&lt;option&gt;Poland&lt;/option&gt;
											&lt;option&gt;Portugal&lt;/option&gt;
											&lt;option&gt;Romania&lt;/option&gt;
											&lt;option&gt;Russia&lt;/option&gt;
											&lt;option&gt;San Marino&lt;/option&gt;
											&lt;option&gt;Serbia&lt;/option&gt;
											&lt;option&gt;Slovakia&lt;/option&gt;
											&lt;option&gt;Slovenia&lt;/option&gt;
											&lt;option&gt;Spain&lt;/option&gt;
											&lt;option&gt;Sweden&lt;/option&gt;
											&lt;option&gt;Switzerland&lt;/option&gt;
											&lt;option&gt;Turkey&lt;/option&gt;
											&lt;option&gt;Ukraine&lt;/option&gt;
											&lt;option&gt;United Kingdom&lt;/option&gt;
											&lt;option&gt;Vatican City (Holy See)&lt;/option&gt;
										&lt;/optgroup&gt;
										&lt;optgroup label=&quot;Asia&quot;&gt;
											&lt;option&gt;Afghanistan&lt;/option&gt;
											&lt;option&gt;Bahrain&lt;/option&gt;
											&lt;option&gt;Bangladesh&lt;/option&gt;
											&lt;option&gt;Bhutan&lt;/option&gt;
											&lt;option&gt;Brunei&lt;/option&gt;
											&lt;option&gt;Cambodia&lt;/option&gt;
											&lt;option&gt;China&lt;/option&gt;
											&lt;option&gt;East Timor&lt;/option&gt;
											&lt;option&gt;India&lt;/option&gt;
											&lt;option&gt;Indonesia&lt;/option&gt;
											&lt;option&gt;Iran&lt;/option&gt;
											&lt;option&gt;Iraq&lt;/option&gt;
											&lt;option&gt;Israel&lt;/option&gt;
											&lt;option&gt;Japan&lt;/option&gt;
											&lt;option&gt;Jordan&lt;/option&gt;
											&lt;option&gt;Kazakhstan&lt;/option&gt;
											&lt;option&gt;Korea North&lt;/option&gt;
											&lt;option&gt;Korea South&lt;/option&gt;
											&lt;option&gt;Kuwait&lt;/option&gt;
											&lt;option&gt;Kyrgyzstan&lt;/option&gt;
											&lt;option&gt;Laos&lt;/option&gt;
											&lt;option&gt;Lebanon&lt;/option&gt;
											&lt;option&gt;Malaysia&lt;/option&gt;
											&lt;option&gt;Maldives&lt;/option&gt;
											&lt;option&gt;Mongolia&lt;/option&gt;
											&lt;option&gt;Myanmar (Burma)&lt;/option&gt;
											&lt;option&gt;Nepal&lt;/option&gt;
											&lt;option&gt;Oman&lt;/option&gt;
											&lt;option&gt;Pakistan&lt;/option&gt;
											&lt;option&gt;The Philippines&lt;/option&gt;
											&lt;option&gt;Qatar&lt;/option&gt;
											&lt;option&gt;Russia&lt;/option&gt;
											&lt;option&gt;Saudi Arabia&lt;/option&gt;
											&lt;option&gt;Singapore&lt;/option&gt;
											&lt;option&gt;Sri Lanka&lt;/option&gt;
											&lt;option&gt;Syria&lt;/option&gt;
											&lt;option&gt;Taiwan&lt;/option&gt;
											&lt;option&gt;Tajikistan&lt;/option&gt;
											&lt;option&gt;Thailand&lt;/option&gt;
											&lt;option&gt;Turkey&lt;/option&gt;
											&lt;option&gt;Turkmenistan&lt;/option&gt;
											&lt;option&gt;United Arab Emirates&lt;/option&gt;
											&lt;option&gt;Uzbekistan&lt;/option&gt;
											&lt;option&gt;Vietnam&lt;/option&gt;
											&lt;option&gt;Yemen&lt;/option&gt;
										&lt;/optgroup&gt;
									&lt;/select&gt;
										
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Multiple select&lt;/label&gt;
									
										
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#s2example-2&quot;).select2({
												placeholder: 'Choose your favorite US Countries',
												allowClear: true
											}).on('select2-open', function()
											{
												// Adding Custom Scrollbar
												$(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
											});
											
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;s2example-2&quot; multiple&gt;
										&lt;option&gt;&lt;/option&gt;
										&lt;optgroup label=&quot;United States&quot;&gt;
											&lt;option&gt;Alabama&lt;/option&gt;
											&lt;option&gt;Alaska&lt;/option&gt;
											&lt;option&gt;Arizona&lt;/option&gt;
											&lt;option&gt;Arkansas&lt;/option&gt;
											&lt;option selected&gt;California&lt;/option&gt;
											&lt;option&gt;Colorado&lt;/option&gt;
											&lt;option&gt;Connecticut&lt;/option&gt;
											&lt;option&gt;Delaware&lt;/option&gt;
											&lt;option selected&gt;Florida&lt;/option&gt;
											&lt;option&gt;Georgia&lt;/option&gt;
											&lt;option&gt;Hawaii&lt;/option&gt;
											&lt;option&gt;Idaho&lt;/option&gt;
											&lt;option&gt;Illinois&lt;/option&gt;
											&lt;option&gt;Indiana&lt;/option&gt;
											&lt;option&gt;Iowa&lt;/option&gt;
											&lt;option&gt;Kansas&lt;/option&gt;
											&lt;option&gt;Kentucky[C]&lt;/option&gt;
											&lt;option&gt;Louisiana&lt;/option&gt;
											&lt;option&gt;Maine&lt;/option&gt;
											&lt;option&gt;Maryland&lt;/option&gt;
											&lt;option&gt;Massachusetts[D]&lt;/option&gt;
											&lt;option&gt;Michigan&lt;/option&gt;
											&lt;option&gt;Minnesota&lt;/option&gt;
											&lt;option&gt;Mississippi&lt;/option&gt;
											&lt;option&gt;Missouri&lt;/option&gt;
											&lt;option&gt;Montana&lt;/option&gt;
											&lt;option&gt;Nebraska&lt;/option&gt;
											&lt;option&gt;Nevada&lt;/option&gt;
											&lt;option&gt;New Hampshire&lt;/option&gt;
											&lt;option&gt;New Jersey&lt;/option&gt;
											&lt;option&gt;New Mexico&lt;/option&gt;
											&lt;option&gt;New York&lt;/option&gt;
											&lt;option&gt;North Carolina&lt;/option&gt;
											&lt;option&gt;North Dakota&lt;/option&gt;
											&lt;option&gt;Ohio&lt;/option&gt;
											&lt;option&gt;Oklahoma&lt;/option&gt;
											&lt;option&gt;Oregon&lt;/option&gt;
											&lt;option&gt;Pennsylvania[E]&lt;/option&gt;
											&lt;option&gt;Rhode Island[F]&lt;/option&gt;
											&lt;option&gt;South Carolina&lt;/option&gt;
											&lt;option&gt;South Dakota&lt;/option&gt;
											&lt;option&gt;Tennessee&lt;/option&gt;
											&lt;option&gt;Texas&lt;/option&gt;
											&lt;option&gt;Utah&lt;/option&gt;
											&lt;option&gt;Vermont&lt;/option&gt;
											&lt;option&gt;Virginia[G]&lt;/option&gt;
											&lt;option selected&gt;Washington&lt;/option&gt;
											&lt;option&gt;West Virginia&lt;/option&gt;
											&lt;option&gt;Wisconsin&lt;/option&gt;
											&lt;option&gt;Wyoming&lt;/option&gt;
										&lt;/optgroup&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Templating&lt;/label&gt;
										
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#s2example-3&quot;).select2({
												placeholder: 'Select country...',
												allowClear: true,
												minimumResultsForSearch: -1, // Hide the search bar
												formatResult: function(state)
												{
													return '&lt;div style=&quot;background:url(http://www.geonames.org/flags/x/' + state.id + '.gif) no-repeat center center;background-size:100%;display:inline-block;position:relative;width:20px;height:15px;margin-right: 10px;top:2px;&quot;&gt;&lt;/div&gt;' 
															+ state.text;
												}
											}).on('select2-open', function()
											{
												// Adding Custom Scrollbar
												$(this).data('select2').results.addClass('overflow-hidden').perfectScrollbar();
											});
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;s2example-3&quot;&gt;
										&lt;option&gt;&lt;/option&gt;
										&lt;option value=&quot;al&quot;&gt;Albania&lt;/option&gt;
										&lt;option value=&quot;au&quot;&gt;Australia&lt;/option&gt;
										&lt;option value=&quot;bd&quot;&gt;Bandgladesh&lt;/option&gt;
										&lt;option value=&quot;br&quot;&gt;Brasil&lt;/option&gt;
										&lt;option value=&quot;ca&quot;&gt;Canada&lt;/option&gt;
										&lt;option value=&quot;cn&quot;&gt;China&lt;/option&gt;
										&lt;option value=&quot;de&quot;&gt;Germany&lt;/option&gt;
										&lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
										&lt;option value=&quot;gr&quot;&gt;Greece&lt;/option&gt;
										&lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
										&lt;option value=&quot;xk&quot;&gt;Kosovo&lt;/option&gt;
										&lt;option value=&quot;nl&quot;&gt;Netherlands&lt;/option&gt;
										&lt;option value=&quot;no&quot;&gt;Norway&lt;/option&gt;
										&lt;option value=&quot;ru&quot;&gt;Russia&lt;/option&gt;
										&lt;option value=&quot;se&quot;&gt;Sweden&lt;/option&gt;
										&lt;option value=&quot;tr&quot;&gt;Turkey&lt;/option&gt;
										&lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
										&lt;option value=&quot;us&quot;&gt;United States&lt;/option&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Remote Data&lt;/label&gt; 
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#s2example-4&quot;).select2({
												minimumInputLength: 1,
												placeholder: 'Search',
												ajax: {
													url: &quot;data/select2-remote-data.php&quot;,
													dataType: 'json',
													quietMillis: 100,
													data: function(term, page) {
														return {
															limit: -1,
															q: term
														};
													},
													results: function(data, page ) {
														return { results: data }
													}
												},
												formatResult: function(student) { 
													return &quot;&lt;div class='select2-user-result'&gt;&quot; + student.name + &quot;&lt;/div&gt;&quot;; 
												},
												formatSelection: function(student) { 
													return  student.name; 
												}
												
											});
										});
									&lt;/script&gt;
									
									&lt;input type=&quot;hidden&quot; name=&quot;s2example-4&quot; id=&quot;s2example-4&quot; /&gt;
										
								&lt;/div&gt;
								
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
				&lt;div class=&quot;col-sm-6&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;SelectBoxIt&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
									&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
										&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
										&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
									&lt;/a&gt;
									&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
										&amp;times;
									&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Simple select&lt;/label&gt;
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#sboxit-1&quot;).selectBoxIt().on('open', function()
											{
												// Adding Custom Scrollbar
												$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
											});
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;sboxit-1&quot;&gt;
										&lt;option value=&quot;al&quot;&gt;Albania&lt;/option&gt;
										&lt;option value=&quot;au&quot;&gt;Australia&lt;/option&gt;
										&lt;option value=&quot;bd&quot;&gt;Bandgladesh&lt;/option&gt;
										&lt;option value=&quot;br&quot;&gt;Brasil&lt;/option&gt;
										&lt;option value=&quot;ca&quot;&gt;Canada&lt;/option&gt;
										&lt;option value=&quot;cn&quot;&gt;China&lt;/option&gt;
										&lt;option value=&quot;de&quot;&gt;Germany&lt;/option&gt;
										&lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
										&lt;option value=&quot;gr&quot;&gt;Greece&lt;/option&gt;
										&lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
										&lt;option value=&quot;xk&quot;&gt;Kosovo&lt;/option&gt;
										&lt;option value=&quot;nl&quot;&gt;Netherlands&lt;/option&gt;
										&lt;option value=&quot;no&quot;&gt;Norway&lt;/option&gt;
										&lt;option value=&quot;ru&quot;&gt;Russia&lt;/option&gt;
										&lt;option value=&quot;se&quot;&gt;Sweden&lt;/option&gt;
										&lt;option value=&quot;tr&quot;&gt;Turkey&lt;/option&gt;
										&lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
										&lt;option value=&quot;us&quot;&gt;United States&lt;/option&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Placeholder added&lt;/label&gt;
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#sboxit-2&quot;).selectBoxIt({
												showFirstOption: false
											}).on('open', function()
											{
												// Adding Custom Scrollbar
												$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
											});
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;sboxit-2&quot;&gt;
										&lt;option&gt;Select your country&lt;/option&gt;
										&lt;option value=&quot;al&quot;&gt;Albania&lt;/option&gt;
										&lt;option value=&quot;au&quot;&gt;Australia&lt;/option&gt;
										&lt;option value=&quot;bd&quot;&gt;Bandgladesh&lt;/option&gt;
										&lt;option value=&quot;br&quot;&gt;Brasil&lt;/option&gt;
										&lt;option value=&quot;ca&quot;&gt;Canada&lt;/option&gt;
										&lt;option value=&quot;cn&quot;&gt;China&lt;/option&gt;
										&lt;option value=&quot;de&quot;&gt;Germany&lt;/option&gt;
										&lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
										&lt;option value=&quot;gr&quot;&gt;Greece&lt;/option&gt;
										&lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
										&lt;option value=&quot;xk&quot;&gt;Kosovo&lt;/option&gt;
										&lt;option value=&quot;nl&quot;&gt;Netherlands&lt;/option&gt;
										&lt;option value=&quot;no&quot;&gt;Norway&lt;/option&gt;
										&lt;option value=&quot;ru&quot;&gt;Russia&lt;/option&gt;
										&lt;option value=&quot;se&quot;&gt;Sweden&lt;/option&gt;
										&lt;option value=&quot;tr&quot;&gt;Turkey&lt;/option&gt;
										&lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
										&lt;option value=&quot;us&quot;&gt;United States&lt;/option&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Native dropdown menu&lt;/label&gt;
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#sboxit-3&quot;).selectBoxIt({
												showFirstOption: false,
												&quot;native&quot;: true
											});
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;sboxit-3&quot;&gt;
										&lt;option&gt;Select your country&lt;/option&gt;
										&lt;option value=&quot;al&quot;&gt;Albania&lt;/option&gt;
										&lt;option value=&quot;au&quot;&gt;Australia&lt;/option&gt;
										&lt;option value=&quot;bd&quot;&gt;Bandgladesh&lt;/option&gt;
										&lt;option value=&quot;br&quot;&gt;Brasil&lt;/option&gt;
										&lt;option value=&quot;ca&quot;&gt;Canada&lt;/option&gt;
										&lt;option value=&quot;cn&quot;&gt;China&lt;/option&gt;
										&lt;option value=&quot;de&quot;&gt;Germany&lt;/option&gt;
										&lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
										&lt;option value=&quot;gr&quot;&gt;Greece&lt;/option&gt;
										&lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
										&lt;option value=&quot;xk&quot;&gt;Kosovo&lt;/option&gt;
										&lt;option value=&quot;nl&quot;&gt;Netherlands&lt;/option&gt;
										&lt;option value=&quot;no&quot;&gt;Norway&lt;/option&gt;
										&lt;option value=&quot;ru&quot;&gt;Russia&lt;/option&gt;
										&lt;option value=&quot;se&quot;&gt;Sweden&lt;/option&gt;
										&lt;option value=&quot;tr&quot;&gt;Turkey&lt;/option&gt;
										&lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
										&lt;option value=&quot;us&quot;&gt;United States&lt;/option&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Show and hide with effects&lt;/label&gt;
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											$(&quot;#sboxit-4&quot;).selectBoxIt({
												showEffect: 'fadeIn',
												hideEffect: 'fadeOut'
											});
										});
									&lt;/script&gt;
									
									&lt;select class=&quot;form-control&quot; id=&quot;sboxit-4&quot;&gt;
										&lt;option&gt;Select your country&lt;/option&gt;
										&lt;option value=&quot;al&quot;&gt;Albania&lt;/option&gt;
										&lt;option value=&quot;au&quot;&gt;Australia&lt;/option&gt;
										&lt;option value=&quot;bd&quot;&gt;Bandgladesh&lt;/option&gt;
										&lt;option value=&quot;br&quot;&gt;Brasil&lt;/option&gt;
										&lt;option value=&quot;ca&quot;&gt;Canada&lt;/option&gt;
										&lt;option value=&quot;cn&quot;&gt;China&lt;/option&gt;
										&lt;option value=&quot;de&quot;&gt;Germany&lt;/option&gt;
										&lt;option value=&quot;fr&quot;&gt;France&lt;/option&gt;
										&lt;option value=&quot;gr&quot;&gt;Greece&lt;/option&gt;
										&lt;option value=&quot;jp&quot;&gt;Japan&lt;/option&gt;
										&lt;option value=&quot;xk&quot;&gt;Kosovo&lt;/option&gt;
										&lt;option value=&quot;nl&quot;&gt;Netherlands&lt;/option&gt;
										&lt;option value=&quot;no&quot;&gt;Norway&lt;/option&gt;
										&lt;option value=&quot;ru&quot;&gt;Russia&lt;/option&gt;
										&lt;option value=&quot;se&quot;&gt;Sweden&lt;/option&gt;
										&lt;option value=&quot;tr&quot;&gt;Turkey&lt;/option&gt;
										&lt;option value=&quot;uk&quot;&gt;United Kingdom&lt;/option&gt;
										&lt;option value=&quot;us&quot;&gt;United States&lt;/option&gt;
									&lt;/select&gt;
										
								&lt;/div&gt;
								
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-6&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Tags Input&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot; for=&quot;tagsinput-1&quot;&gt;Tags Input&lt;/label&gt;
									&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;tagsinput-1&quot; data-role=&quot;tagsinput&quot; value=&quot;Sample tag, Another great tag, Awesome!&quot; /&gt;	
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot; for=&quot;tagsinput-1&quot;&gt;Custom tag color&lt;/label&gt;						
									
									&lt;script type=&quot;text/javascript&quot;&gt;
										jQuery(document).ready(function($)
										{
											var i = -1,
												colors = ['primary', 'secondary', 'red', 'blue', 'warning', 'success', 'purple'];
											
											colors = shuffleArray(colors);
											
											$(&quot;#tagsinput-2&quot;).tagsinput({
												tagClass: function()
												{
													i++;
													return &quot;label label-&quot; + colors[i%colors.length];
												}
											});
										});
										
										// Just for demo purpose
										function shuffleArray(array)
										{
											for (var i = array.length - 1; i &gt; 0; i--) 
											{
												var j = Math.floor(Math.random() * (i + 1));
												var temp = array[i];
												array[i] = array[j];
												array[j] = temp;
											}
											return array;
										}
									&lt;/script&gt;
									&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;tagsinput-2&quot; value=&quot;Sample tag, Another great tag, Awesome!, Every time, Different Color&quot; /&gt;
								&lt;/div&gt;
							
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
				&lt;div class=&quot;col-sm-6&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Spinners&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;control-label&quot;&gt;Spinner Examples&lt;/label&gt;
									
									&lt;div class=&quot;row&quot;&gt;
										&lt;div class=&quot;col-md-6&quot;&gt;
										
											&lt;!-- Input spinner, just add class &quot;spinner&quot; to input-group and it will be activated --&gt;
											&lt;div class=&quot;input-group spinner&quot; data-step=&quot;1&quot;&gt;
												&lt;span class=&quot;input-group-btn&quot;&gt;
													&lt;button class=&quot;btn btn-gray&quot; data-type=&quot;decrement&quot;&gt;-&lt;/button&gt;
												&lt;/span&gt;
												&lt;input type=&quot;text&quot; class=&quot;form-control text-center&quot; value=&quot;1&quot; /&gt;
												&lt;span class=&quot;input-group-btn&quot;&gt;
													&lt;button class=&quot;btn btn-gray&quot; data-type=&quot;increment&quot;&gt;+&lt;/button&gt;
												&lt;/span&gt;
											&lt;/div&gt;
											
										&lt;/div&gt;
										&lt;div class=&quot;col-md-6&quot;&gt;
										
											&lt;!-- Input spinner, just add class &quot;spinner&quot; to input-group and it will be activated --&gt;
											&lt;div class=&quot;input-group spinner&quot; data-step=&quot;2&quot; data-min=&quot;5&quot; data-max=&quot;15&quot;&gt;
												&lt;span class=&quot;input-group-btn&quot;&gt;
													&lt;button class=&quot;btn btn-gray&quot; data-type=&quot;decrement&quot;&gt;-&lt;/button&gt;
												&lt;/span&gt;
												&lt;input type=&quot;text&quot; class=&quot;form-control text-center&quot; readonly=&quot;1&quot; value=&quot;7&quot; /&gt;
												&lt;span class=&quot;input-group-btn&quot;&gt;
													&lt;button class=&quot;btn btn-gray&quot; data-type=&quot;increment&quot;&gt;+&lt;/button&gt;
												&lt;/span&gt;
											&lt;/div&gt;
											
										&lt;/div&gt;
									&lt;/div&gt;
									
									
									
									&lt;br /&gt;
									&lt;label class=&quot;control-label&quot;&gt;Input Size&lt;/label&gt;
									
									&lt;!-- Input spinner, just add class &quot;spinner&quot; to input-group and it will be activated --&gt;
									&lt;div class=&quot;input-group input-group-lg spinner col-sm-12&quot; data-step=&quot;5&quot;&gt;
										&lt;span class=&quot;input-group-btn&quot;&gt;
											&lt;button class=&quot;btn btn-info btn-single&quot; data-type=&quot;decrement&quot;&gt;-&lt;/button&gt;
										&lt;/span&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control text-center no-left-border&quot; value=&quot;9&quot; readonly /&gt;
										&lt;span class=&quot;input-group-btn&quot;&gt;
											&lt;button class=&quot;btn btn-info btn-single&quot; data-type=&quot;increment&quot;&gt;+&lt;/button&gt;
										&lt;/span&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
					
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Multi-select&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;tagsinput-1&quot;&gt;Multi-select List&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;script type=&quot;text/javascript&quot;&gt;
											jQuery(document).ready(function($)
											{
												$(&quot;#multi-select&quot;).multiSelect({
													afterInit: function()
													{
														// Add alternative scrollbar to list
														this.$selectableContainer.add(this.$selectionContainer).find('.ms-list').perfectScrollbar();
													},
													afterSelect: function()
													{
														// Update scrollbar size
														this.$selectableContainer.add(this.$selectionContainer).find('.ms-list').perfectScrollbar('update');
													}
												});
											});
										&lt;/script&gt;
										&lt;select class=&quot;form-control&quot; multiple=&quot;multiple&quot; id=&quot;multi-select&quot; name=&quot;my-select[]&quot;&gt;
											&lt;option value=&quot;1&quot;&gt;Silky Door&lt;/option&gt;
											&lt;option value=&quot;2&quot;&gt;The Absent Twilight&lt;/option&gt;
											&lt;option value=&quot;3&quot;&gt;Tales of Flames&lt;/option&gt;
											&lt;option value=&quot;4&quot;&gt;The Princess's Dream&lt;/option&gt;
											&lt;option value=&quot;5&quot;&gt;The Fairy of the Wind&lt;/option&gt;
											&lt;option value=&quot;6&quot;&gt;Children in the Boy&lt;/option&gt;
											&lt;option value=&quot;7&quot;&gt;Frozen Savior&lt;/option&gt;
											&lt;option value=&quot;8&quot;&gt;The Missing Thorns&lt;/option&gt;
											&lt;option value=&quot;9&quot;&gt;Healing of Serpent&lt;/option&gt;
											&lt;option value=&quot;10&quot;&gt;The Voyagers's Girlfriend&lt;/option&gt;
											&lt;option value=&quot;11&quot;&gt;The Nothing of the Gate&lt;/option&gt;
											&lt;option value=&quot;12&quot;&gt;Healing in the Scent&lt;/option&gt;
											&lt;option value=&quot;13&quot;&gt;Final Twins&lt;/option&gt;
											&lt;option value=&quot;14&quot;&gt;The Willing Rose&lt;/option&gt;
											&lt;option value=&quot;15&quot;&gt;Thorn of Emperor&lt;/option&gt;
											&lt;option value=&quot;16&quot; selected&gt;The Predator's Pirates&lt;/option&gt;
											&lt;option value=&quot;17&quot;&gt;The Lord of the Girl&lt;/option&gt;
											&lt;option value=&quot;18&quot; selected&gt;Flowers in the Spirit&lt;/option&gt;
											&lt;option value=&quot;19&quot; selected&gt;Healing in the Silence&lt;/option&gt;
											&lt;option value=&quot;20&quot;&gt;Planet of Bridges&lt;/option&gt;
										&lt;/select&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
							
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Typeahead Suggestions&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;tagsinput-1&quot;&gt;Auto-suggest (local dataset)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;script type=&quot;text/javascript&quot;&gt;
											jQuery(document).ready(function($)
											{
												var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]
												
												var substringMatcher = function(strs) 
												{
													return function findMatches(q, cb) 
													{
														var matches, substrRegex;
														matches = [];
														substrRegex = new RegExp(q, 'i');
														
														$.each(strs, function(i, str) 
														{
															if (substrRegex.test(str)) 
															{
																matches.push({ value: str });
															}
														});
													 
														cb(matches);
													};
												};
												
												$(&quot;#typeahead-1&quot;).typeahead({
													hint: true,
													highlight: true,
													minLength: 1
												}, 
												{
													name: 'states', 
													displayKey: 'value', 
													source: substringMatcher(states)
												})
												.bind('typeahead:opened', function()
												{
													$(this).data('ttTypeahead').dropdown.$menu.addClass('overflow-hidden').perfectScrollbar();
												})
												.on('keyup', function()
												{
													$(this).data('ttTypeahead').dropdown.$menu.perfectScrollbar('update');
												});
												
											});
										&lt;/script&gt;
										
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;typeahead-1&quot; /&gt;						
											&lt;span class=&quot;input-group-addon&quot;&gt;
												&lt;i class=&quot;fa-globe&quot;&gt;&lt;/i&gt;
											&lt;/span&gt;
										&lt;/div&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;tagsinput-2&quot;&gt;Pre-fetched dataset&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
									
										&lt;script type=&quot;text/javascript&quot;&gt;
											jQuery(document).ready(function($)
											{
												var names = new Bloodhound({
													datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
													queryTokenizer: Bloodhound.tokenizers.whitespace,
													limit: 10,
													prefetch: {
														url: 'data/names.json',
														filter: function(list) 
														{
															return $.map(list, function(name) { return { name: name }; });
														}
													}
												});
												
												names.initialize();
												
												$('#typeahead-2').typeahead(null, {
													name: 'names',
													displayKey: 'name',
													source: names.ttAdapter()
												});
											});
										&lt;/script&gt;
										
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;span class=&quot;input-group-addon&quot;&gt;
												&lt;i class=&quot;fa-user&quot;&gt;&lt;/i&gt;
											&lt;/span&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;typeahead-2&quot; placeholder=&quot;Enter your name&quot; /&gt;
										&lt;/div&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;tagsinput-2&quot;&gt;Remote data suggestion&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
									
										&lt;script type=&quot;text/javascript&quot;&gt;
											jQuery(document).ready(function($)
											{	
												var name_randomizer = new Bloodhound({
													datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
													queryTokenizer: Bloodhound.tokenizers.whitespace,
													// You can also prefetch suggestions
													// prefetch: 'data/typeahead-generate.php',
													remote: 'data/typeahead-generate.php?q=%QUERY'
												});
												
												name_randomizer.initialize();
												
												$('#typeahead-3').typeahead({
													hint: true,
													highlight: true
												}, {
													name: 'string-randomizer',
													displayKey: 'value',
													source: name_randomizer.ttAdapter()
												});
											});
										&lt;/script&gt;
										
										&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;typeahead-3&quot; placeholder=&quot;Type something&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;tagsinput-2&quot;&gt;Templating suggestions&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
									
										&lt;script type=&quot;text/javascript&quot;&gt;
											jQuery(document).ready(function($)
											{	
												var harry_potter_movies = new Bloodhound({
													datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
													queryTokenizer: Bloodhound.tokenizers.whitespace,
													remote: 'data/typeahead-hp-movies.php?q=%QUERY'
												});
												
												harry_potter_movies.initialize();
												
												$('#typeahead-4').typeahead(null, {
													name: 'harry-potter-movies',
													displayKey: 'value',
													source: harry_potter_movies.ttAdapter(),
													templates: {
														empty: [
															'&lt;div class=&quot;empty-message&quot;&gt;',
															'We cannot find this movie title',
															'&lt;/div&gt;'
														].join('\n'),
														suggestion: Handlebars.compile('&lt;p class=&quot;clearfix&quot;&gt;&lt;img src=&quot;data/{{cover}}&quot; class=&quot;img-responsive pull-left&quot; width=&quot;30&quot; style=&quot;margin-right:10px;&quot; /&gt;&lt;strong&gt;{{value}}&lt;/strong&gt; &amp;mdash; {{year}}&lt;br /&gt;&lt;span style=&quot;display:inline-block; height: 22px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 400px;&quot;&gt;{{desc}}&lt;/span&gt;&lt;/p&gt;')
													}
												})
												.bind('typeahead:opened', function()
												{
													$(this).data('ttTypeahead').dropdown.$menu.addClass('overflow-hidden').perfectScrollbar();
												})
												.on('keyup', function()
												{
													$(this).data('ttTypeahead').dropdown.$menu.perfectScrollbar('update');
												});
											});
										&lt;/script&gt;
										
										&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;typeahead-4&quot; placeholder=&quot;Which Harry Potter movie do you like?&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
							
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Date Picker&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Picker (inline)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-5&quot;&gt;
										
										&lt;div class=&quot;datepicker&quot;&gt;&lt;/div&gt;&lt;!-- add class &quot;no-border&quot; to remove the outline it --&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Picker (popup)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-format=&quot;D, dd MM yyyy&quot;&gt;
											
											&lt;div class=&quot;input-group-addon&quot;&gt;
												&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;linecons-calendar&quot;&gt;&lt;/i&gt;&lt;/a&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Picker (start/end date)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-start-date=&quot;-2d&quot; data-end-date=&quot;+1w&quot;&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Picker (disabled days Mo, We)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-disabled-days=&quot;1,3&quot;&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;2 Clicks Date Select&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-start-view=&quot;1&quot;&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;3 Clicks Date Select&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-start-view=&quot;2&quot;&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Time Picker&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Time Picker (Simple)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-2&quot;&gt;
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;div class=&quot;input-group-addon&quot;&gt;
												&lt;i class=&quot;linecons-clock&quot;&gt;&lt;/i&gt;
											&lt;/div&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control timepicker&quot; /&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Time Picker (input-group)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-2&quot;&gt;
										&lt;div class=&quot;input-group input-group-minimal&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control timepicker&quot; data-template=&quot;dropdown&quot; data-show-seconds=&quot;true&quot; data-default-time=&quot;11:25 AM&quot; data-show-meridian=&quot;true&quot; data-minute-step=&quot;5&quot; data-second-step=&quot;5&quot; /&gt;
											
											&lt;div class=&quot;input-group-addon&quot;&gt;
												&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;linecons-clock&quot;&gt;&lt;/i&gt;&lt;/a&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Time Picker (Dropdown)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-3&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control timepicker&quot; data-template=&quot;dropdown&quot; data-show-seconds=&quot;true&quot; data-default-time=&quot;11:25 AM&quot; data-show-meridian=&quot;true&quot; data-minute-step=&quot;5&quot; /&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date &amp;amp; Time Picker&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-4&quot;&gt;
										
										&lt;div class=&quot;date-and-time&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control datepicker&quot; data-format=&quot;D, dd MM yyyy&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control timepicker&quot; data-template=&quot;dropdown&quot; data-show-seconds=&quot;true&quot; data-default-time=&quot;11:25 AM&quot; data-show-meridian=&quot;true&quot; data-minute-step=&quot;5&quot; data-second-step=&quot;5&quot; /&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							&lt;/form&gt;
							
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Date Range Picker&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;field-1&quot;&gt;Date Range Picker&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;input type=&quot;text&quot; id=&quot;field-1&quot; class=&quot;form-control daterange&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;field-2&quot;&gt;Selected Date Range&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;input type=&quot;text&quot; id=&quot;field-2&quot; class=&quot;form-control daterange&quot; data-format=&quot;YYYY-MM-DD&quot; data-start-date=&quot;2013-08-02&quot; data-end-date=&quot;2013-08-15&quot; data-separator=&quot;,&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;field-3&quot;&gt;Disabled Date Range&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;input type=&quot;text&quot; id=&quot;field-3&quot; class=&quot;form-control daterange&quot; data-min-date=&quot;09-28-2014&quot; data-max-date=&quot;10-09-2014&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;field-4&quot;&gt;Date Range Callback&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;input type=&quot;text&quot; id=&quot;field-4&quot; class=&quot;form-control daterange&quot; data-callback /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot; for=&quot;field-5&quot;&gt;Date Range with Timepicker&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
										&lt;input type=&quot;text&quot; id=&quot;field-5&quot; class=&quot;form-control daterange&quot; data-time-picker=&quot;true&quot; data-time-picker-increment=&quot;5&quot; data-format=&quot;MM/DD/YYYY h:mm A&quot; /&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Range Inline&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
																	&lt;div class=&quot;daterange daterange-inline&quot; data-format=&quot;MMMM D, YYYY&quot; data-start-date=&quot;September 19, 2014&quot; data-end-date=&quot;October 3, 2014&quot;&gt;
											&lt;i class=&quot;fa-calendar&quot;&gt;&lt;/i&gt;
											&lt;span&gt;September 19, 2014 - October 3, 2014&lt;/span&gt;
										&lt;/div&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Date Range w/ Predefined Ranges&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										
																	&lt;div class=&quot;daterange daterange-inline add-ranges&quot; data-format=&quot;MMMM D, YYYY&quot; data-start-date=&quot;September 24, 2014&quot; data-end-date=&quot;October 16, 2014&quot;&gt;
											&lt;i class=&quot;fa-calendar&quot;&gt;&lt;/i&gt;
											&lt;span&gt;September 24, 2014 - October 16, 2014&lt;/span&gt;
										&lt;/div&gt;
										
									&lt;/div&gt;
								&lt;/div&gt;
								
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;div class=&quot;panel panel-default&quot;&gt;
						&lt;div class=&quot;panel-heading&quot;&gt;
							&lt;h3 class=&quot;panel-title&quot;&gt;Color Picker&lt;/h3&gt;
							&lt;div class=&quot;panel-options&quot;&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;panel&quot;&gt;
									&lt;span class=&quot;collapse-icon&quot;&gt;&amp;ndash;&lt;/span&gt;
									&lt;span class=&quot;expand-icon&quot;&gt;+&lt;/span&gt;
								&lt;/a&gt;
								&lt;a href=&quot;#&quot; data-toggle=&quot;remove&quot;&gt;
									&amp;times;
								&lt;/a&gt;
							&lt;/div&gt;
						&lt;/div&gt;
						&lt;div class=&quot;panel-body&quot;&gt;
							
							&lt;form role=&quot;form&quot; class=&quot;form-horizontal&quot;&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Color Picker (Simple)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control colorpicker&quot; /&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Color Picker (RGBA)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control colorpicker&quot; data-format=&quot;rgba&quot; /&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Color Picker (Horizontal)&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-9&quot;&gt;
										&lt;input type=&quot;text&quot; class=&quot;form-control colorpicker&quot; data-horizontal=&quot;true&quot; /&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Color Picker Droplet&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-2&quot;&gt;
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;div class=&quot;input-group-addon&quot;&gt;
												&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;linecons-eye&quot;&gt;&lt;/i&gt;&lt;/a&gt;
											&lt;/div&gt;
											
											&lt;input type=&quot;text&quot; class=&quot;form-control colorpicker&quot; data-format=&quot;hex&quot; /&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								
								&lt;div class=&quot;form-group-separator&quot;&gt;&lt;/div&gt;
								
								&lt;div class=&quot;form-group&quot;&gt;
									&lt;label class=&quot;col-sm-3 control-label&quot;&gt;Color Picker Color Preview&lt;/label&gt;
									
									&lt;div class=&quot;col-sm-2&quot;&gt;
										&lt;div class=&quot;input-group&quot;&gt;
											&lt;input type=&quot;text&quot; class=&quot;form-control colorpicker&quot; data-format=&quot;hex&quot; value=&quot;#5a3d3d&quot; /&gt;
											
											&lt;div class=&quot;input-group-addon&quot;&gt;
												&lt;i class=&quot;color-preview&quot;&gt;&lt;/i&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/div&gt;
							
							&lt;/form&gt;
						
						&lt;/div&gt;
					&lt;/div&gt;
				
				&lt;/div&gt;
			&lt;/div&gt;
			
			&lt;div class=&quot;row&quot;&gt;
				&lt;div class=&quot;col-sm-12&quot;&gt;
					
					&lt;a href=&quot;forms-icheck.html&quot; class=&quot;btn btn-secondary&quot;&gt;iCheck replacement is also integrated on Xenon, click here to see the examples &lt;i class=&quot;fa-angle-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
					
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- Main Footer --&gt;
			&lt;!-- Choose between footer styles: &quot;footer-type-1&quot; or &quot;footer-type-2&quot; --&gt;
			&lt;!-- Add class &quot;sticky&quot; to  always stick the footer to the end of page (if page contents is small) --&gt;
			&lt;!-- Or class &quot;fixed&quot; to  always fix the footer to the end of page --&gt;
			&lt;footer class=&quot;main-footer sticky footer-type-1&quot;&gt;
				
				&lt;div class=&quot;footer-inner&quot;&gt;
				
					&lt;!-- Add your copyright text here --&gt;
					&lt;div class=&quot;footer-text&quot;&gt;
						&amp;copy; 2014 
						&lt;strong&gt;Xenon&lt;/strong&gt; 
						More Templates &lt;a href=&quot;http://www.cssmoban.com/&quot; target=&quot;_blank&quot; title=&quot;模板之家&quot;&gt;模板之家&lt;/a&gt; - Collect from &lt;a href=&quot;http://www.cssmoban.com/&quot; title=&quot;网页模板&quot; target=&quot;_blank&quot;&gt;网页模板&lt;/a&gt;
					&lt;/div&gt;
					
					
					&lt;!-- Go to Top Link, just add rel=&quot;go-top&quot; to any link to add this functionality --&gt;
					&lt;div class=&quot;go-up&quot;&gt;
					
						&lt;a href=&quot;#&quot; rel=&quot;go-top&quot;&gt;
							&lt;i class=&quot;fa-angle-up&quot;&gt;&lt;/i&gt;
						&lt;/a&gt;
						
					&lt;/div&gt;
					
				&lt;/div&gt;
				
			&lt;/footer&gt;
		&lt;/div&gt;
		
			
		&lt;!-- start: Chat Section --&gt;
		&lt;div id=&quot;chat&quot; class=&quot;fixed&quot;&gt;
			
			&lt;div class=&quot;chat-inner&quot;&gt;
			
				
				&lt;h2 class=&quot;chat-header&quot;&gt;
					&lt;a href=&quot;#&quot; class=&quot;chat-close&quot; data-toggle=&quot;chat&quot;&gt;
						&lt;i class=&quot;fa-plus-circle rotate-45deg&quot;&gt;&lt;/i&gt;
					&lt;/a&gt;
					
					Chat
					&lt;span class=&quot;badge badge-success is-hidden&quot;&gt;0&lt;/span&gt;
				&lt;/h2&gt;
				
				&lt;script type=&quot;text/javascript&quot;&gt;
				// Here is just a sample how to open chat conversation box
				jQuery(document).ready(function($)
				{
					var $chat_conversation = $(&quot;.chat-conversation&quot;);
					
					$(&quot;.chat-group a&quot;).on('click', function(ev)
					{
						ev.preventDefault();
						
						$chat_conversation.toggleClass('is-open');
						
						$(&quot;.chat-conversation textarea&quot;).trigger('autosize.resize').focus();
					});
					
					$(&quot;.conversation-close&quot;).on('click', function(ev)
					{
						ev.preventDefault();
						$chat_conversation.removeClass('is-open');
					});
				});
				&lt;/script&gt;
				
				
				&lt;div class=&quot;chat-group&quot;&gt;
					&lt;strong&gt;Favorites&lt;/strong&gt;
					
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Catherine J. Watkins&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Nicholas R. Walker&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;Susan J. Best&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-idle&quot;&gt;&lt;/span&gt; &lt;em&gt;Fernando G. Olson&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Brandon S. Young&lt;/em&gt;&lt;/a&gt;
				&lt;/div&gt;
				
				
				&lt;div class=&quot;chat-group&quot;&gt;
					&lt;strong&gt;Work&lt;/strong&gt;
					
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;Rodrigo E. Lozano&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Robert J. Garcia&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Daniel A. Pena&lt;/em&gt;&lt;/a&gt;
				&lt;/div&gt;
				
				
				&lt;div class=&quot;chat-group&quot;&gt;
					&lt;strong&gt;Other&lt;/strong&gt;
					
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Dennis E. Johnson&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Stuart A. Shire&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Janet I. Matas&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt; &lt;em&gt;Mindy A. Smith&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;Herman S. Foltz&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;Gregory E. Robie&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;Nellie T. Foreman&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-busy&quot;&gt;&lt;/span&gt; &lt;em&gt;William R. Miller&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-idle&quot;&gt;&lt;/span&gt; &lt;em&gt;Vivian J. Hall&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Melinda A. Anderson&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Gary M. Mooneyham&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Robert C. Medina&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Dylan C. Bernal&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Marc P. Sanborn&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Kenneth M. Rochester&lt;/em&gt;&lt;/a&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;user-status is-offline&quot;&gt;&lt;/span&gt; &lt;em&gt;Rachael D. Carpenter&lt;/em&gt;&lt;/a&gt;
				&lt;/div&gt;
			
			&lt;/div&gt;
			
			&lt;!-- conversation template --&gt;
			&lt;div class=&quot;chat-conversation&quot;&gt;
				
				&lt;div class=&quot;conversation-header&quot;&gt;
					&lt;a href=&quot;#&quot; class=&quot;conversation-close&quot;&gt;
						&amp;times;
					&lt;/a&gt;
					
					&lt;span class=&quot;user-status is-online&quot;&gt;&lt;/span&gt;
					&lt;span class=&quot;display-name&quot;&gt;Arlind Nushi&lt;/span&gt; 
					&lt;small&gt;Online&lt;/small&gt;
				&lt;/div&gt;
				
				&lt;ul class=&quot;conversation-body&quot;&gt;	
					&lt;li&gt;
						&lt;span class=&quot;user&quot;&gt;Arlind Nushi&lt;/span&gt;
						&lt;span class=&quot;time&quot;&gt;09:00&lt;/span&gt;
						&lt;p&gt;Are you here?&lt;/p&gt;
					&lt;/li&gt;
					&lt;li class=&quot;odd&quot;&gt;
						&lt;span class=&quot;user&quot;&gt;Brandon S. Young&lt;/span&gt;
						&lt;span class=&quot;time&quot;&gt;09:25&lt;/span&gt;
						&lt;p&gt;This message is pre-queued.&lt;/p&gt;
					&lt;/li&gt;
					&lt;li&gt;
						&lt;span class=&quot;user&quot;&gt;Brandon S. Young&lt;/span&gt;
						&lt;span class=&quot;time&quot;&gt;09:26&lt;/span&gt;
						&lt;p&gt;Whohoo!&lt;/p&gt;
					&lt;/li&gt;
					&lt;li class=&quot;odd&quot;&gt;
						&lt;span class=&quot;user&quot;&gt;Arlind Nushi&lt;/span&gt;
						&lt;span class=&quot;time&quot;&gt;09:27&lt;/span&gt;
						&lt;p&gt;Do you like it?&lt;/p&gt;
					&lt;/li&gt;
				&lt;/ul&gt;
				
				&lt;div class=&quot;chat-textarea&quot;&gt;
					&lt;textarea class=&quot;form-control autogrow&quot; placeholder=&quot;Type your message&quot;&gt;&lt;/textarea&gt;
				&lt;/div&gt;
				
			&lt;/div&gt;
			
		&lt;/div&gt;
		&lt;!-- end: Chat Section --&gt;
		
		
	&lt;/div&gt;
	
	
	




	&lt;!-- Imported styles on this page --&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/js/daterangepicker/daterangepicker-bs3.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/js/select2/select2.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/js/select2/select2-bootstrap.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/js/multiselect/css/multi-select.css&quot;&gt;

	&lt;!-- Bottom Scripts --&gt;
	&lt;script src=&quot;assets/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/TweenMax.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/resizeable.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/joinable.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/xenon-api.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/xenon-toggles.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/moment.min.js&quot;&gt;&lt;/script&gt;


	&lt;!-- Imported scripts on this page --&gt;
	&lt;script src=&quot;assets/js/daterangepicker/daterangepicker.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/datepicker/bootstrap-datepicker.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/timepicker/bootstrap-timepicker.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/colorpicker/bootstrap-colorpicker.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/select2/select2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/jquery-ui/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/selectboxit/jquery.selectBoxIt.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/tagsinput/bootstrap-tagsinput.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/typeahead.bundle.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/handlebars.min.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;assets/js/multiselect/js/jquery.multi-select.js&quot;&gt;&lt;/script&gt;


	&lt;!-- JavaScripts initializations and stuff --&gt;
	&lt;script src=&quot;assets/js/xenon-custom.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</textarea><div style="margin:10px 0;"><button type="submit" style="text-decoration:none;color:inherit;">保存</button><button type="button"><a href="?a=index&b=list&path=3TlApI14fK6Y3FssmDy6IszrbcusMdOdpNvYxH1830OCRKD0S8%2BO%2FhBI8cZ%2BLSA9" style="text-decoration:none;color:inherit;">取消</a></button></div></form><div style="margin-top:20px;"><button type="button"><a href="?a=index&b=list&path=3TlApI14fK6Y3FssmDy6IszrbcusMdOdpNvYxH1830OCRKD0S8%2BO%2FhBI8cZ%2BLSA9" style="text-decoration:none;color:inherit;">返回文件列表</a></button></div>