<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

    <!-- START @HEAD -->
    <head>
        <!-- START @META SECTION -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Blankon is a theme fullpack admin template powered by Twitter bootstrap 3 front-end framework. Included are multiple example pages, elements styles, and javascript widgets to get your project started.">
        <meta name="keywords" content="admin, admin template, bootstrap3, clean, fontawesome4, good documentation, lightweight admin, responsive dashboard, webapp">
        <meta name="author" content="Djava UI">
        <title>FORM PICKER | BLANKON - Fullpack Admin Theme</title>
        <!--/ END META SECTION -->

        <!-- START @FAVICONS -->
        <!--<link href="../../../img/ico/apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144">-->
        <!--<link href="../../../img/ico/apple-touch-icon-114x114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114">-->
        <!--<link href="../../../img/ico/apple-touch-icon-72x72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72">-->
        <!--<link href="../../../img/ico/apple-touch-icon-57x57-precomposed.png" rel="apple-touch-icon-precomposed">-->
        <!--<link href="../../../img/ico/apple-touch-icon.png" rel="shortcut icon">-->
        <!--/ END FAVICONS -->

        <!-- START @FONT STYLES -->
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Oswald:700,400" rel="stylesheet">
        <!--/ END FONT STYLES -->

        <!-- START @GLOBAL MANDATORY STYLES -->
        <link href="../../../assets/global/plugins/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <!--/ END GLOBAL MANDATORY STYLES -->

        <!-- START @PAGE LEVEL STYLES -->
        <link href="../../../assets/global/plugins/bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="../../../assets/global/plugins/bower_components/animate.css/animate.min.css" rel="stylesheet">
        <link href="../../../assets/global/plugins/bower_components/bootstrap-datepicker-vitalets/css/datepicker.css" rel="stylesheet">
        <link href="../../../assets/global/plugins/bower_components/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
        <link href="../../../assets/global/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
        <!--/ END PAGE LEVEL STYLES -->

        <!-- START @THEME STYLES -->
        <link href="../../../assets/admin/css/reset.css" rel="stylesheet">
        <link href="../../../assets/admin/css/layout.css" rel="stylesheet">
        <link href="../../../assets/admin/css/components.css" rel="stylesheet">
        <link href="../../../assets/admin/css/plugins.css" rel="stylesheet">
        <link href="../../../assets/admin/css/themes/default.theme.css" rel="stylesheet" id="theme">
        <link href="../../../assets/admin/css/custom.css" rel="stylesheet">
        <!--/ END THEME STYLES -->

        <!-- START @IE SUPPORT -->
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="../../../assets/global/plugins/bower_components/html5shiv/dist/html5shiv.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/respond-minmax/dest/respond.min.js"></script>
        <![endif]-->
        <!--/ END IE SUPPORT -->
    </head>
    <!--/ END HEAD -->

    <!--

    |=========================================================================================================================|
    |  TABLE OF CONTENTS (Use search to find needed section)                                                                  |
    |=========================================================================================================================|
    |  01. @HEAD                        |  Container for all the head elements                                                |
    |  02. @META SECTION                |  The meta tag provides metadata about the HTML document                             |
    |  03. @FAVICONS                    |  Short for favorite icon, shortcut icon, website icon, tab icon or bookmark icon    |
    |  04. @FONT STYLES                 |  Font from google fonts                                                             |
    |  05. @GLOBAL MANDATORY STYLES     |  The main 3rd party plugins css file                                                |
    |  06. @PAGE LEVEL STYLES           |  Specific 3rd party plugins css file                                                |
    |  07. @THEME STYLES                |  The main theme css file                                                            |
    |  08. @IE SUPPORT                  |  IE support of HTML5 elements and media queries                                     |
    |=========================================================================================================================|
    |  09. @BODY                        |  Contains all the contents of an HTML document                                      |
    |  10. @WRAPPER                     |  Wrapping page section                                                              |
    |  11. @HEADER                      |  Header page section contains about logo, top navigation, notification menu         |
    |  12. @SIDEBAR LEFT                |  Sidebar page section contains all sidebar menu left                                |
    |  13. @PAGE CONTENT                |  Contents page section contains breadcrumb, content page, footer page               |
    |  14. @SIDEBAR RIGHT               |  Sidebar page section contains all sidebar menu right                               |
    |  15. @BACK TOP                    |  Element back to top and action                                                     |
    |=========================================================================================================================|
    |  16. @CORE PLUGINS                |  The main 3rd party plugins script file                                             |
    |  17. @PAGE LEVEL PLUGINS          |  Specific 3rd party plugins script file                                             |
    |  18. @PAGE LEVEL SCRIPTS          |  The main theme script file                                                         |
    |=========================================================================================================================|

    START @BODY
    |=========================================================================================================================|
	|  TABLE OF CONTENTS (Apply to body class)                                                                                |
	|=========================================================================================================================|
    |  01. page-boxed                   |  Page into the box is not full width screen                                         |
	|  02. page-header-fixed            |  Header element become fixed position                                               |
	|  03. page-sidebar-fixed           |  Sidebar element become fixed position with scroll support                          |
	|  04. page-sidebar-minimize        |  Sidebar element become minimize style width sidebar                                |
	|  05. page-footer-fixed            |  Footer element become fixed position with scroll support on page content           |
	|  06. page-sound                   |  For playing sounds on user actions and page events                                 |
	|=========================================================================================================================|

	-->
    <body>

        <!--[if lt IE 9]>
        <p class="upgrade-browser">Upps!! You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- START @WRAPPER -->
        <section id="wrapper">

            <!-- START @HEADER -->
            <header id="header">

                <!-- Start header left -->
                <div class="header-left">
                    <!-- Start offcanvas left: This menu will take position at the top of template header (mobile only). Make sure that only #header have the `position: relative`, or it may cause unwanted behavior -->
                    <div class="navbar-minimize-mobile left">
                        <i class="fa fa-bars"></i>
                    </div>
                    <!--/ End offcanvas left -->

                    <!-- Start navbar header -->
                    <div class="navbar-header">

                        <!-- Start brand -->
                        <a class="navbar-brand" href="dashboard.html">
                            <img class="logo" src="http://img.djavaui.com/?create=175x50,81B71A?f=ffffff" alt="brand logo">
                        </a><!-- /.navbar-brand -->
                        <!--/ End brand -->

                    </div><!-- /.navbar-header -->
                    <!--/ End navbar header -->

                    <!-- Start offcanvas right: This menu will take position at the top of template header (mobile only). Make sure that only #header have the `position: relative`, or it may cause unwanted behavior -->
                    <div class="navbar-minimize-mobile right">
                        <i class="fa fa-cog"></i>
                    </div>
                    <!--/ End offcanvas right -->

                    <div class="clearfix"></div>
                </div><!-- /.header-left -->
                <!--/ End header left -->

                <!-- Start header right -->
                <div class="header-right">
                    <!-- Start navbar toolbar -->
                    <div class="navbar navbar-toolbar">

                        <!-- Start left navigation -->
                        <ul class="nav navbar-nav navbar-left">

                            <!-- Start sidebar shrink -->
                            <li class="navbar-minimize">
                                <a href="javascript:void(0);" title="Minimize sidebar">
                                    <i class="fa fa-bars"></i>
                                </a>
                            </li>
                            <!--/ End sidebar shrink -->

                            <!-- Start form search -->
                            <li class="navbar-search">
                                <!-- Just view on mobile screen-->
                                <a href="#" class="trigger-search"><i class="fa fa-search"></i></a>
                                <form class="navbar-form">
                                    <div class="form-group has-feedback">
                                        <input type="text" class="form-control typeahead rounded" placeholder="Search for people, places and things">
                                        <button type="submit" class="btn btn-theme fa fa-search form-control-feedback rounded"></button>
                                    </div>
                                </form>
                            </li>
                            <!--/ End form search -->

                        </ul><!-- /.navbar-left -->
                        <!--/ End left navigation -->

                        <!-- Start right navigation -->
                        <ul class="nav navbar-nav navbar-right">

                            <!-- Start messages -->
                            <li class="dropdown navbar-message">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope-o"></i><span class="rounded count label label-danger">7</span></a>

                                <!-- Start dropdown menu -->
                                <div class="dropdown-menu animated flipInX">
                                    <div class="dropdown-header">
                                        <span class="title">Messages <strong>(7)</strong></span>
                                        <span class="option text-right"><a href="#">+ New message</a></span>
                                    </div>
                                    <div class="dropdown-body">

                                        <!-- Start message search -->
                                        <form class="form-horizontal" action="#">
                                            <div class="form-group has-feedback has-feedback-sm m-5">
                                                <input type="text" class="form-control input-sm" placeholder="Search message...">
                                                <button type="submit" class="btn btn-theme fa fa-search form-control-feedback"></button>
                                            </div>
                                        </form>
                                        <!--/ End message search -->

                                        <!-- Start message list -->
                                        <div class="media-list niceScroll">

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">John Kribo</span>
                                                    <span class="media-text">I was impressed how fast the content is loaded. Congratulations. nice design.</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta"><i class="fa fa-reply"></i></span>
                                                    <span class="media-meta"><i class="fa fa-paperclip"></i></span>
                                                    <span class="media-meta pull-right">13 minutes</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Jennifer Poiyem</span>
                                                    <span class="media-text">It’s Simple, Clean & Nice .. Good work Dear .. GLWS</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta pull-right">17 hours</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Clara Wati</span>
                                                    <span class="media-text">Great work! Do you have any plans to add loading indicators for AJAX calls that might take longer than normal?</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta pull-right">1 days</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Toni Mriang</span>
                                                    <span class="media-text">I am very interested in the theme and I’m thinking about buying it.</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta"><i class="fa fa-paperclip"></i></span>
                                                    <span class="media-meta pull-right">2 days</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Bella negoro</span>
                                                    <span class="media-text">Great work! Good luck!</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta"><i class="fa fa-paperclip"></i></span>
                                                    <span class="media-meta"><i class="fa fa-user"></i></span>
                                                    <span class="media-meta pull-right">1 week</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Kim Mbako</span>
                                                    <span class="media-text">Hi! First of all, thank you for the very nice theme for creating awesome web applications :)</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta"><i class="fa fa-paperclip"></i></span>
                                                    <span class="media-meta pull-right">1 week</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="page-messages.html" class="media">
                                                <div class="pull-left"><img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" class="media-object img-circle" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-heading">Pack Suparman</span>
                                                    <span class="media-text">Apik temen kie jan template, nyong gep tuku jal..</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta pull-right">1 week</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <!-- Start message indicator -->
                                            <a href="#" class="media indicator inline">
                                                <span class="spinner">Load more messages...</span>
                                            </a>
                                            <!--/ End message indicator -->

                                        </div>
                                        <!--/ End message list -->

                                    </div>
                                    <div class="dropdown-footer">
                                        <a href="page-messages.html">See All</a>
                                    </div>
                                </div>
                                <!--/ End dropdown menu -->

                            </li><!-- /.navbar-message -->
                            <!--/ End messages -->

                            <!-- Start notifications -->
                            <li class="dropdown navbar-notification">

                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o"></i><span class="rounded count label label-danger">6</span></a>

                                <!-- Start dropdown menu -->
                                <div class="dropdown-menu animated flipInX">
                                    <div class="dropdown-header">
                                        <span class="title">Notifications <strong>(10)</strong></span>
                                        <span class="option text-right"><a href="#"><i class="fa fa-cog"></i> Setting</a></span>
                                    </div>
                                    <div class="dropdown-body niceScroll">

                                        <!-- Start notification list -->
                                        <div class="media-list small">

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><i class="fa fa-share-alt fg-info"></i></div>
                                                <div class="media-body">
                                                    <span class="media-text"><strong>Dolanan Remi : </strong><strong>Chris Job,</strong><strong>Denny Puk</strong> and <strong>Joko Fernandes</strong> sent you <strong>5 free energy boosts and other request</strong></span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">3 minutes</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><i class="fa fa-cogs fg-success"></i></div>
                                                <div class="media-body">
                                                    <span class="media-text">Your sistem is updated</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">5 minutes</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i></div>
                                                <div class="media-body">
                                                    <span class="media-text">3 Member is BANNED</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">5 minutes</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><img class="img-circle" src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" alt="..."/></div>
                                                <div class="media-body">
                                                    <span class="media-text">daddy pushed to project Blankon version 1.0.0</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">45 minutes</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><i class="fa fa-user fg-info"></i></div>
                                                <div class="media-body">
                                                    <span class="media-text">Change your user profile</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">1 days</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <a href="#" class="media">
                                                <div class="media-object pull-left"><i class="fa fa-book fg-info"></i></div>
                                                <div class="media-body">
                                                    <span class="media-text">Added new article</span>
                                                    <!-- Start meta icon -->
                                                    <span class="media-meta">1 days</span>
                                                    <!--/ End meta icon -->
                                                </div><!-- /.media-body -->
                                            </a><!-- /.media -->

                                            <!-- Start notification indicator -->
                                            <a href="#" class="media indicator inline">
                                                <span class="spinner">Load more notifications...</span>
                                            </a>
                                            <!--/ End notification indicator -->

                                        </div>
                                        <!--/ End notification list -->

                                    </div>
                                    <div class="dropdown-footer">
                                        <a href="#">See All</a>
                                    </div>
                                </div>
                                <!--/ End dropdown menu -->

                            </li><!-- /.navbar-notification -->
                            <!--/ End notifications -->

                            <!-- Start profile -->
                            <li class="dropdown navbar-profile">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="meta">
                                        <span class="avatar"><img src="http://img.djavaui.com/?create=35x35,4888E1?f=ffffff" class="img-circle" alt="admin"></span>
                                        <span class="text hidden-xs hidden-sm text-muted">Tol Lee</span>
                                        <span class="caret"></span>
                                    </span>
                                </a>
                                <!-- Start dropdown menu -->
                                <ul class="dropdown-menu animated flipInX">
                                    <li class="dropdown-header">Account</li>
                                    <li><a href="page-profile.html"><i class="fa fa-user"></i>View profile</a></li>
                                    <li><a href="mail-inbox.html"><i class="fa fa-envelope-square"></i>Inbox <span class="label label-info pull-right">30</span></a></li>
                                    <li><a href="#"><i class="fa fa-share-square"></i>Invite a friend</a></li>
                                    <li class="dropdown-header">Product</li>
                                    <li><a href="#"><i class="fa fa-upload"></i>Upload</a></li>
                                    <li><a href="#"><i class="fa fa-dollar"></i>Earning</a></li>
                                    <li><a href="#"><i class="fa fa-download"></i>Withdrawals</a></li>
                                    <li class="divider"></li>
                                    <li><a href="page-signin.html"><i class="fa fa-sign-out"></i>Logout</a></li>
                                </ul>
                                <!--/ End dropdown menu -->
                            </li><!-- /.navbar-profile -->
                            <!--/ End profile -->

                            <!-- Start settings -->
                            <li class="navbar-setting pull-right">
                                <a href="javascript:void(0);"><i class="fa fa-cog fa-spin"></i></a>
                            </li><!-- /.navbar-setting -->
                            <!--/ End settings -->

                        </ul><!-- /.navbar-right -->
                        <!--/ End right navigation -->

                    </div><!-- /.navbar-toolbar -->
                    <!--/ End navbar toolbar -->
                </div><!-- /.header-right -->
                <!--/ End header left -->

            </header> <!-- /#header -->
            <!--/ END HEADER -->

            <!--

            START @SIDEBAR LEFT
            |=========================================================================================================================|
            |  TABLE OF CONTENTS (Apply to sidebar left class)                                                                        |
            |=========================================================================================================================|
            |  01. sidebar-box               |  Variant style sidebar left with box icon                                              |
            |  02. sidebar-rounded           |  Variant style sidebar left with rounded icon                                          |
            |  03. sidebar-circle            |  Variant style sidebar left with circle icon                                           |
            |=========================================================================================================================|

            -->
            <aside id="sidebar-left" class="sidebar-circle">

                <!-- Start left navigation - profile shortcut -->
                <div class="sidebar-content">
                    <div class="media">
                        <a class="pull-left has-notif avatar" href="page-profile.html">
                            <img src="http://img.djavaui.com/?create=50x50,4888E1?f=ffffff" alt="admin">
                            <i class="online"></i>
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Hello, <span>Lee</span></h4>
                            <small>Web Designer</small>
                        </div>
                    </div>
                </div><!-- /.sidebar-content -->
                <!--/ End left navigation -  profile shortcut -->

                <!-- Start left navigation - menu -->
                <ul class="sidebar-menu">

                    <!-- Start navigation - dashboard -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-home"></i></span>
                            <span class="text">Dashboard</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li><a href="dashboard.html">Basic</a></li>
                            <li><a href="dashboard-ecommerce.html">E-Commerce</a></li>
                            <li><a href="dashboard-hr.html">Human resources</a></li>
                            <li><a href="dashboard-investor.html">Investor</a></li>
                            <li><a href="dashboard-marketing-campaign.html">Marketing campaign</a></li>
                            <li><a href="dashboard-projects.html">Projects</a></li>
                            <li><a href="dashboard-real-estate.html">Real estate</a></li>
                            <li><a href="dashboard-retail-analysis.html">Retail analysis</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - dashboard -->

                    <!-- Start navigation - frontend themes -->
                    <li>
                        <a href="frontend-themes.html">
                            <span class="icon"><i class="fa fa-leaf"></i></span>
                            <span class="text">Frontend themes</span>
                        </a>
                    </li>
                    <!--/ End navigation - frontend themes -->

                    <!-- Start navigation - blankon versions -->
                    <li>
                        <a href="blankon-versions.html">
                            <span class="icon"><i class="fa fa-dropbox"></i></span>
                            <span class="text">Blankon Versions</span>
                        </a>
                    </li>
                    <!--/ End navigation - blankon versions -->

                    <!-- Start category apps -->
                    <li class="sidebar-category">
                        <span>APPS</span>
                        <span class="pull-right"><i class="fa fa-trophy"></i></span>
                    </li>
                    <!--/ End category apps -->

                    <!-- Start navigation - blog -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-globe"></i></span>
                            <span class="text">Blog</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li class="submenu">
                                <a href="javascript:void(0);">Grid <span class="label label-danger pull-right">NEW</span></a>
                                <ul>
                                    <li><a href="blog-grid.html">Type 1</a></li>
                                    <li><a href="blog-grid-type-2.html">Type 2</a></li>
                                </ul>
                            </li>
                            <li><a href="blog-list.html">List</a></li>
                            <li><a href="blog-single.html">Single</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - blog -->

                    <!-- Start navigation - mail -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-envelope"></i></span>
                            <span class="text">Mail</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li><a href="mail-inbox.html">Inbox</a></li>
                            <li><a href="mail-compose.html">Compose mail</a></li>
                            <li><a href="mail-view.html">View mail</a></li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Template mail <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="mail-template-billing.html" target="_blank">Billing</a></li>
                                    <li><a href="mail-template-newsletter.html" target="_blank">Newsletter</a></li>
                                    <li><a href="mail-template-promo.html" target="_blank">Promotion</a></li>
                                </ul>
                            </li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Responsive Layout <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="mail-layout-responsive-basic.html" target="_blank">Basic</a></li>
                                    <li><a href="mail-layout-responsive-basic-2col.html" target="_blank">Basic 2 col</a></li>
                                    <li><a href="mail-layout-responsive-bodyimage.html" target="_blank">Body image</a></li>
                                    <li><a href="mail-layout-responsive-bodyimage-2col.html" target="_blank">Body image 2 col</a></li>
                                    <li><a href="mail-layout-responsive-boxed-2col.html" target="_blank">Boxed 2 col</a></li>
                                    <li><a href="mail-layout-responsive-boxed-3col.html" target="_blank">Boxed 3 col</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!--/ End navigation - mail -->

                    <!-- Start navigation - project -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-rocket"></i></span>
                            <span class="text">Project</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li class="submenu">
                                <a href="javascript:void(0);">Portfolio <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="project-portfolio.html">Type 1</a></li>
                                    <li><a href="project-portfolio-type-2.html">Type 2</a></li>
                                    <li><a href="project-portfolio-type-3.html">Type 3</a></li>
                                    <li><a href="project-portfolio-type-4.html">Type 4</a></li>
                                </ul>
                            </li>
                            <li><a href="project-team.html">Team</a></li>
                            <li><a href="project-team-board.html">Team Board</a></li>
                            <li><a href="project-team-profile.html">Team Profile</a></li>
                            <li><a href="project-issue-tracker.html">Issue Tracker</a></li>
                            <li><a href="project-clients.html">Clients</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - project -->

                    <!-- Start navigation - pages -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-file-o"></i></span>
                            <span class="text">Pages</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li class="submenu">
                                <a href="javascript:void(0);">Gallery <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="page-gallery.html">Type 1</a></li>
                                    <li><a href="page-gallery-type-2.html">Type 2</a></li>
                                    <li><a href="page-gallery-type-3.html">Type 3</a></li>
                                    <li><a href="page-gallery-type-4.html">Type 4</a></li>
                                </ul>
                            </li>
                            <li><a href="page-calendar.html">Calendar</a></li>
                            <li><a href="page-faq.html">FAQ <span class="label label-danger pull-right">New</span></a></li>
                            <li><a href="page-invoice.html">Invoice</a></li>
                            <li><a href="page-messages.html">Messages</a></li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Timeline <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="page-timeline.html">Type 1</a></li>
                                    <li><a href="page-timeline-type-2.html">Type 2</a></li>
                                </ul>
                            </li>
                            <li><a href="page-profile.html">Profile</a></li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Search<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="page-search-basic.html">Basic</a></li>
                                    <li><a href="page-search-course.html">Courses</a></li>
                                </ul>
                            </li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Error <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="page-error-403.html">Error 403</a></li>
                                    <li><a href="page-error-403-type-2.html">Error 403 Type 2</a></li>
                                    <li><a href="page-error-404.html">Error 404</a></li>
                                    <li><a href="page-error-404-type-2.html">Error 404 Type 2</a></li>
                                    <li><a href="page-error-500.html">Error 500</a></li>
                                    <li><a href="page-error-500-type-2.html">Error 500 Type 2</a></li>
                                </ul>
                            </li>
                            <li class="submenu">
                                <a href="javascript:void(0);">Account <span class="arrow"></span></a>
                                <ul>
                                    <li><a href="page-signin.html">Sign In</a></li>
                                    <li><a href="page-signin-type-2.html">Sign In Type 2</a></li>
                                    <li><a href="page-signup.html">Sign Up</a></li>
                                    <li><a href="page-lost-password.html">Lost password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!--/ End navigation - pages -->

                    <!-- Start category ui kit-->
                    <li class="sidebar-category">
                        <span>UI KIT</span>
                        <span class="pull-right"><i class="fa fa-magic"></i></span>
                    </li>
                    <!--/ End category ui kit-->

                    <!-- Start navigation - forms -->
                    <li class="submenu active">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-list-alt"></i></span>
                            <span class="text">Forms</span>
                            <span class="arrow"></span>
                            <span class="selected"></span>
                        </a>
                        <ul>
                            <li><a href="form-element.html">Element</a></li>
                            <li><a href="form-advanced.html">Advanced</a></li>
                            <li><a href="form-layout.html">Layout</a></li>
                            <li><a href="form-validation.html">Validation</a></li>
                            <li><a href="form-wizard.html">Wizard</a></li>
                            <li><a href="form-wysiwyg.html">Text Editor</a></li>
                            <li><a href="form-xeditable.html">X-Editable</a></li>
                            <li class="active"><a href="form-picker.html">Picker</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - forms -->

                    <!-- Start navigation - tables -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-table"></i></span>
                            <span class="text">Tables</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li><a href="table-default.html">Default</a></li>
                            <li><a href="table-color.html">Color</a></li>
                            <li><a href="table-datatable.html">Datatable</a></li>
                            <li><a href="table-samples.html">Samples <span class="label label-danger pull-right">NEW</span></a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - tables -->

                    <!-- Start navigation - maps -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-map-marker"></i></span>
                            <span class="text">Maps</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li><a href="maps-google.html">Google</a></li>
                            <li><a href="maps-vector.html">Vector</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - maps -->

                    <!-- Start navigation - charts -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-signal"></i></span>
                            <span class="text">Charts</span>
                            <span class="arrow"></span>
                        </a>
                        <ul>
                            <li><a href="chart-flot.html">Flot</a></li>
                            <li><a href="chart-morris.html">Morris</a></li>
                            <li><a href="chart-chartjs.html">Chartjs</a></li>
                            <li><a href="chart-c3js.html">C3js</a></li>
                            <li><a href="chart-peity.html">Peity</a></li>
                            <li><a href="chart-easy-pie-chart.html">Easy Pie Chart</a></li>
                            <li><a href="chart-chartist.html">Chartist</a></li>
                        </ul>
                    </li>
                    <!--/ End navigation - charts -->

                    <!-- Start category development -->
                    <li class="sidebar-category">
                        <span>DEVELOP</span>
                        <span class="pull-right"><i class="fa fa-code"></i></span>
                    </li>
                    <!--/ End category development -->

                    <!-- Start development - ui features -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-cubes"></i></span>
                            <span class="text">UI Features</span>
                            <span class="plus"></span>
                        </a>
                        <ul>
                            <li><a href="ui-feature-bootstrap-tour.html">Bootstrap Tour</a></li>
                            <li><a href="ui-feature-notifications.html">Notifications</a></li>
                            <li><a href="ui-feature-grid-stack.html">Grid Stack</a></li>
                        </ul>
                    </li>
                    <!--/ End development - ui features -->

                    <!-- Start development - components -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-cube"></i></span>
                            <span class="text">Components</span>
                            <span class="plus"></span>
                        </a>
                        <ul>
                            <li><a href="component-grid-system.html">Grid System</a></li>
                            <li><a href="component-buttons.html">Buttons</a></li>
                            <li><a href="component-typography.html">Typography</a></li>
                            <li><a href="component-panel.html">Panels</a></li>
                            <li><a href="component-alerts.html">Alerts</a></li>
                            <li><a href="component-modals.html">Modals</a></li>
                            <li><a href="component-video.html">Video <span class="label label-danger pull-right">New</span></a></li>
                            <li><a href="component-tabsaccordion.html">Tabs & Accordion</a></li>
                            <li><a href="component-sliders.html">Sliders</a></li>
                            <li class="submenu">
                                <a href="javascript:void(0);">
                                    <span class="text">List Group</span>
                                    <span class="arrow"></span>
                                </a>
                                <ul>
                                    <li><a href="component-list-group.html">Basic</a></li>
                                    <li><a href="component-list-group-samples.html">Samples</a></li>
                                </ul>
                            </li>
                            <li class="submenu">
                                <a href="javascript:void(0);">
                                    <span class="text">Icons</span>
                                    <span class="count label label-danger">6</span>
                                    <span class="arrow"></span>
                                </a>
                                <ul>
                                    <li><a href="component-glyphicons.html">Glyphicons</a></li>
                                    <li><a href="component-glyphicons-pro.html">Glyphicons PRO</a></li>
                                    <li><a href="component-font-awesome.html">Font Awesome</a></li>
                                    <li><a href="component-weather-icons.html">Weather Icons</a></li>
                                    <li><a href="component-map-icons.html">Map Icons</a></li>
                                    <li><a href="component-simple-line-icons.html">Simple Line Icons</a></li>
                                    <li><a href="component-flag-icon-css.html">Flag Icon CSS <span class="label label-danger pull-right">NEW</span></a></li>
                                </ul>
                            </li>
                            <li><a href="component-other.html">Other</a></li>
                        </ul>
                    </li>
                    <!--/ End development - components -->

                    <!-- Start development - layouts -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-columns"></i></span>
                            <span class="text">Layouts</span>
                            <span class="plus"></span>
                        </a>
                        <ul>
                            <li><a href="layout-blank.html">Blank Page</a></li>
                            <li><a href="layout-boxed.html">Boxed Page</a></li>
                            <li><a href="layout-header-fixed.html">Header Fixed Page</a></li>
                            <li><a href="layout-sidebar-fixed.html">Sidebar Fixed Page</a></li>
                            <li><a href="layout-sidebar-minimize.html">Sidebar Minimize Page</a></li>
                            <li><a href="layout-sidebar-default.html">Sidebar Default Page</a></li>
                            <li><a href="layout-sidebar-box.html">Sidebar Box Page</a></li>
                            <li><a href="layout-sidebar-rounded.html">Sidebar Rounded Page</a></li>
                            <li><a href="layout-sidebar-circle.html">Sidebar Circle Page</a></li>
                            <li><a href="layout-footer-fixed.html">Footer Fixed Page</a></li>
                        </ul>
                    </li>
                    <!--/ End development - layouts -->

                    <!-- Start development - sub menu -->
                    <li class="submenu">
                        <a href="javascript:void(0);">
                            <span class="icon"><i class="fa fa-align-left"></i></span>
                            <span class="text">Sub Menu</span>
                            <span class="plus"></span>
                        </a>
                        <ul>
                            <!-- Start level 1 -->
                            <li class="submenu">
                                <a href="javascript:void(0);">
                                    <span class="text">Level 1</span>
                                    <span class="arrow"></span>
                                </a>
                                <ul>
                                    <!-- Start level 2 -->
                                    <li class="submenu">
                                        <a href="javascript:void(0);">
                                            <span class="text">Level 2</span>
                                            <span class="fa fa-angle-double-right pull-right arrow"></span>
                                        </a>
                                        <ul>
                                            <!-- Start level 3 -->
                                            <li class="submenu">
                                                <a href="javascript:void(0);">
                                                    <span class="text">Level 3</span>
                                                    <span class="fa fa-angle-double-right pull-right arrow"></span>
                                                </a>
                                                <ul>
                                                    <!-- Start level 4 -->
                                                    <li class="submenu">
                                                        <a href="javascript:void(0);">
                                                            <span class="text">Level 4</span>
                                                            <span class="fa fa-angle-double-right pull-right arrow"></span>
                                                        </a>
                                                        <ul>
                                                            <!-- Start level 5 -->
                                                            <li>
                                                                <a href="javascript:void(0);">Level 5</a>
                                                            </li>
                                                            <!--/ End level 5 -->
                                                            <li>
                                                                <a href="javascript:void(0);">Level 5</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:void(0);">Level 5</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <!--/ End level 4 -->
                                                    <li>
                                                        <a href="javascript:void(0);">Level 4</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0);">Level 4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <!--/ End level 3 -->
                                            <li>
                                                <a href="javascript:void(0);">Level 3</a>
                                            </li>
                                            <li>
                                                <a href="javascript:void(0);">Level 3</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <!--/ End level 2 -->
                                    <li>
                                        <a href="javascript:void(0);">Level 2</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">Level 2</a>
                                    </li>
                                </ul>
                            </li>
                            <!--/ End level 1 -->
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="text">Level 1</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">
                                    <span class="text">Level 1</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <!--/ End development - sub menu -->

                    <!-- Start development - animate.css -->
                    <li>
                        <a href="animate.html">
                            <span class="icon"><i class="fa fa-forumbee"></i></span>
                            <span class="text">Animate.css</span>
                            <span class="label label-danger pull-right">New</span>
                        </a>
                    </li>
                    <!--/ End development - animate.css -->

                    <!-- Start category widget -->
                    <li class="sidebar-category">
                        <span>WIDGET</span>
                        <span class="pull-right"><i class="fa fa-cubes"></i></span>
                    </li>
                    <!--/ End category widget -->

                    <!-- Start widget - overview -->
                    <li>
                        <a href="widget-overview.html">
                            <span class="icon"><i class="fa fa-desktop"></i></span>
                            <span class="text">Overview</span>
                            <span class="label label-primary pull-right rounded">10</span>
                        </a>
                    </li>
                    <!--/ End widget - overview -->

                    <!-- Start widget - social -->
                    <li>
                        <a href="widget-social.html">
                            <span class="icon"><i class="fa fa-group"></i></span>
                            <span class="text">Social</span>
                            <span class="label label-success pull-right rounded">28</span>
                        </a>
                    </li>
                    <!--/ End widget - social -->

                    <!-- Start widget - blog -->
                    <li>
                        <a href="widget-blog.html">
                            <span class="icon"><i class="fa fa-pencil"></i></span>
                            <span class="text">Blog</span>
                            <span class="label label-info pull-right rounded">15</span>
                        </a>
                    </li>
                    <!--/ End widget - blog -->

                    <!-- Start widget - weather -->
                    <li>
                        <a href="widget-weather.html">
                            <span class="icon"><i class="fa fa-sun-o"></i></span>
                            <span class="text">Weather</span>
                            <span class="label label-warning pull-right rounded">6</span>
                        </a>
                    </li>
                    <!--/ End widget - weather -->

                    <!-- Start widget - misc -->
                    <li>
                        <a href="widget-misc.html">
                            <span class="icon"><i class="fa fa-puzzle-piece"></i></span>
                            <span class="text">Misc</span>
                            <span class="label label-danger pull-right rounded">9</span>
                        </a>
                    </li>
                    <!--/ End widget - misc -->

                    <!-- Start category documentation -->
                    <li class="sidebar-category">
                        <span><span class="hidden-sidebar-minimize">BLANKON</span> CORE</span>
                        <span class="pull-right"><i class="fa fa-coffee"></i></span>
                    </li>
                    <!--/ End category documentation -->

                    <!-- Start documentation - api documentation -->
                    <li>
                        <a href="../../../documentation/admin/html/full-documentation.html" target="_blank">
                            <span class="icon"><i class="fa fa-book"></i></span>
                            <span class="text">API Documentation</span>
                        </a>
                    </li>
                    <!--/ End documentation - api documentation -->

                </ul><!-- /.sidebar-menu -->
                <!--/ End left navigation - menu -->

                <!-- Start left navigation - footer -->
                <div class="sidebar-footer hidden-xs hidden-sm hidden-md">
                    <a id="setting" class="pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-title="Setting"><i class="fa fa-cog"></i></a>
                    <a id="fullscreen" class="pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-title="Fullscreen"><i class="fa fa-desktop"></i></a>
                    <a id="lock-screen" data-url="page-signin.html" class="pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-title="Lock Screen"><i class="fa fa-lock"></i></a>
                    <a id="logout" data-url="page-lock-screen.html" class="pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-title="Logout"><i class="fa fa-power-off"></i></a>
                </div><!-- /.sidebar-footer -->
                <!--/ End left navigation - footer -->

            </aside><!-- /#sidebar-left -->
            <!--/ END SIDEBAR LEFT -->

            <!-- START @PAGE CONTENT -->
            <section id="page-content">

                <!-- Start page header -->
                <div class="header-content">
                    <h2><i class="fa fa-list-alt"></i> Form Picker <span>date, daterange, datetime, time & color pickers</span></h2>
                    <div class="breadcrumb-wrapper hidden-xs">
                        <span class="label">You are here:</span>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-home"></i>
                                <a href="dashboard.html">Dashboard</a>
                                <i class="fa fa-angle-right"></i>
                            </li>
                            <li>
                                <a href="#">Forms</a>
                                <i class="fa fa-angle-right"></i>
                            </li>
                            <li class="active">Form Picker</li>
                        </ol>
                    </div><!-- /.breadcrumb-wrapper -->
                </div><!-- /.header-content -->
                <!--/ End page header -->

                <!-- Start body content -->
                <div class="body-content animated fadeIn">

                    <div class="row">
                        <div class="col-md-12">

                            <!-- Start datepicker -->
                            <div class="panel panel-primary rounded shadow">
                                <div class="panel-heading">
                                    <div class="pull-left">
                                        <h3 class="panel-title">Datepicker</h3>
                                    </div>
                                    <div class="pull-right">
                                        <button class="btn btn-sm" data-action="collapse" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Collapse"><i class="fa fa-angle-up"></i></button>
                                        <button class="btn btn-sm" data-action="remove" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Remove"><i class="fa fa-times"></i></button>
                                    </div>
                                    <div class="clearfix"></div>
                                </div><!-- /.panel-heading  -->
                                <div class="panel-sub-heading">
                                    <div class="callout callout-info"><p>Add <a href="http://vitalets.github.io/bootstrap-datepicker/" target="_blank">datepicker</a> picker to field or to any other element.</p></div>
                                </div><!-- /.panel-sub-heading  -->
                                <div class="panel-body no-padding">

                                    <form class="form-horizontal form-bordered" id="dp">
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Default datepicker (options)</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control" value="02-16-2012" id="dp1">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Default datepicker (data tag)</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control" value="02/16/12" data-date-format="mm/dd/yy" id="dp2">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Inline mode</label>
                                            <div class="col-sm-7">
                                                <div id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"></div>
                                            </div>
                                        </div>
                                    </form>

                                </div><!-- /.panel-body  -->
                            </div><!-- /.panel  -->
                            <!-- End datepicker -->

                        </div>
                    </div><!-- /.row -->

                    <div class="row">
                        <div class="col-md-12">

                            <!-- Start daterangepicker -->
                            <div class="panel panel-primary rounded shadow">
                                <div class="panel-heading">
                                    <div class="pull-left">
                                        <h3 class="panel-title">Date Range Picker</h3>
                                    </div>
                                    <div class="pull-right">
                                        <button class="btn btn-sm" data-action="collapse" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Collapse"><i class="fa fa-angle-up"></i></button>
                                        <button class="btn btn-sm" data-action="remove" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Remove"><i class="fa fa-times"></i></button>
                                    </div>
                                    <div class="clearfix"></div>
                                </div><!-- /.panel-heading  -->
                                <div class="panel-sub-heading">
                                    <div class="callout callout-info"><p><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a> A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework.</p></div>
                                </div><!-- /.panel-sub-heading  -->
                                <div class="panel-body no-padding">

                                    <form class="form-horizontal form-bordered">
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Date Range Picker (default)</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control date-range-picker" value="01/01/2015 - 01/31/2015" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Date and Time</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control date-range-picker-time" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Single Date Picker</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control date-range-picker-single" value="10/24/1984" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Predefined Ranges</label>
                                            <div class="col-sm-7">
                                                <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                                    <span></span> <b class="caret"></b>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group form-group-divider">
                                            <div class="form-inner">
                                                <h4 class="no-margin">Configuration Generator</h4>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-12">

                                                <div class="well configurator">

                                                    <form>
                                                        <div class="row">

                                                            <div class="col-md-4">

                                                                <div class="form-group">
                                                                    <label for="parentEl">parentEl</label>
                                                                    <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="startDate">startDate</label>
                                                                    <input type="text" class="form-control" id="startDate" value="07/01/2015">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="endDate">endDate</label>
                                                                    <input type="text" class="form-control" id="endDate" value="07/15/2015">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="minDate">minDate</label>
                                                                    <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="maxDate">maxDate</label>
                                                                    <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
                                                                </div>

                                                            </div>
                                                            <div class="col-md-4">

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="autoApply"> autoApply
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="singleDatePicker"> singleDatePicker
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="showDropdowns"> showDropdowns
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="timePicker"> timePicker
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
                                                                    </label>
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
                                                                    <input type="text" class="form-control" id="timePickerIncrement" value="1">
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="locale"> locale (with example settings)
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
                                                                    </label>
                                                                </div>

                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
                                                                    </label>
                                                                </div>

                                                            </div>
                                                            <div class="col-md-4">

                                                                <div class="form-group">
                                                                    <label for="opens">opens</label>
                                                                    <select id="opens" class="form-control">
                                                                        <option value="right" selected>right</option>
                                                                        <option value="left">left</option>
                                                                        <option value="center">center</option>
                                                                    </select>
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="drops">drops</label>
                                                                    <select id="drops" class="form-control">
                                                                        <option value="down" selected>down</option>
                                                                        <option value="up">up</option>
                                                                    </select>
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="buttonClasses">buttonClasses</label>
                                                                    <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="applyClass">applyClass</label>
                                                                    <input type="text" class="form-control" id="applyClass" value="btn-success">
                                                                </div>

                                                                <div class="form-group">
                                                                    <label for="cancelClass">cancelClass</label>
                                                                    <input type="text" class="form-control" id="cancelClass" value="btn-default">
                                                                </div>

                                                            </div>

                                                        </div>
                                                    </form>

                                                </div>

                                                <div class="row">

                                                    <div class="col-md-4 demo">
                                                        <h4>Your Date Range Picker</h4>
                                                        <div class="input-group">
                                                            <input type="text" id="config-demo" class="form-control">
                                                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-8">
                                                        <h4>Configuration</h4>

                                                        <div class="well">
                                                            <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </form>

                                </div><!-- /.panel-body  -->
                            </div><!-- /.panel  -->
                            <!-- End daterangepicker -->

                        </div>
                    </div><!-- /.row -->

                    <div class="row">
                        <div class="col-md-12">

                            <!-- Start colorpicker -->
                            <div class="panel panel-danger rounded shadow">
                                <div class="panel-heading">
                                    <div class="pull-left">
                                        <h3 class="panel-title">Color Picker</h3>
                                    </div>
                                    <div class="pull-right">
                                        <button class="btn btn-sm" data-action="collapse" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Collapse"><i class="fa fa-angle-up"></i></button>
                                        <button class="btn btn-sm" data-action="remove" data-container="body" data-toggle="tooltip" data-placement="top" data-title="Remove"><i class="fa fa-times"></i></button>
                                    </div>
                                    <div class="clearfix"></div>
                                </div><!-- /.panel-heading  -->
                                <div class="panel-sub-heading">
                                    <div class="callout callout-info"><p><a href="http://mjolnic.com/bootstrap-colorpicker/" target="_blank">Colorpicker</a> plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon and maintained in Github by @mjolnic and the community.</p></div>
                                </div><!-- /.panel-sub-heading  -->
                                <div class="panel-body no-padding">

                                    <form class="form-horizontal form-bordered" action="#">
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">With hex format</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control color-picker" value="#5367ce" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">As a component</label>
                                            <div class="col-sm-7">
                                                <div class="input-group color-picker">
                                                    <input type="text" value="#8c6464" class="form-control" />
                                                    <span class="input-group-addon"><i></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Transparent color support</label>
                                            <div class="col-sm-7">
                                                <input type="text" data-format="hex" class="form-control color-picker-transparent" value="transparent"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Horizonal mode</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control color-picker-horizontal" data-horizontal="true" value="#8fff00"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Inline mode</label>
                                            <div class="col-sm-7">
                                                <div class="color-picker" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Bootstrap colors</label>
                                            <div class="col-sm-7">
                                                <input type="text" data-format="hex" class="form-control color-picker-bootstrap" value="success"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Custom widget size</label>
                                            <div class="col-sm-7">
                                                <input type="text" class="form-control color-picker-size" value="#ffaa00" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Using events</label>
                                            <div class="col-sm-7">
                                                <a href="#" class="btn small colorpicker-event" data-color="rgb(255, 255, 255)">Change background color</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">Bootstrap Modal</label>
                                            <div class="col-sm-7">
                                                <button type="button" class="btn btn-success" data-toggle="modal" data-target=".color-picker-modal">SHOW</button>
                                            </div>
                                        </div>
                                    </form>

                                </div><!-- /.panel-body  -->
                            </div><!-- /.panel  -->
                            <!-- End colorpicker -->

                        </div>
                    </div><!-- /.row -->

                </div><!-- /.body-content -->
                <!--/ End body content -->

                <!-- Start footer content -->
                <footer class="footer-content">
                    2014 - <span id="copyright-year"></span> &copy; Blankon Admin. Created by <a href="http://djavaui.com/" target="_blank">Djava UI</a>, Yogyakarta ID
                    <span class="pull-right">0.01 GB(0%) of 15 GB used</span>
                </footer><!-- /.footer-content -->
                <!--/ End footer content -->

            </section><!-- /#page-content -->
            <!--/ END PAGE CONTENT -->

            <!-- START @SIDEBAR RIGHT -->
            <aside id="sidebar-right">

                <div class="panel panel-tab">
                    <div class="panel-heading no-padding">
                        <div class="pull-right">
                            <ul class="nav nav-tabs">
                                <li>
                                    <a href="#sidebar-profile" data-toggle="tab">
                                        <i class="fa fa-user"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#sidebar-layout" data-toggle="tab">
                                        <i class="fa fa-cogs"></i>
                                    </a>
                                </li>
                                <li class="active">
                                    <a href="#sidebar-setting" data-toggle="tab">
                                        <i class="fa fa-paint-brush"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#sidebar-chat" data-toggle="tab">
                                        <i class="fa fa-comments"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body no-padding">
                        <div class="tab-content">
                            <div class="tab-pane" id="sidebar-profile">
                                <div class="sidebar-profile">

                                    <!-- Start right navigation - menu -->
                                    <ul class="sidebar-menu niceScroll">

                                        <!-- Start category about me -->
                                        <li class="sidebar-category">
                                            <span>ABOUT ME</span>
                                            <span class="pull-right"><i class="fa fa-newspaper-o"></i></span>
                                        </li>
                                        <!--/ End category about me -->

                                        <!--/ Start navigation - about me -->
                                        <li>
                                            <ul class="list-unstyled">
                                                <li>
                                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                                                </li>
                                                <li>
                                                    <i class="fa fa-refresh"></i> Last update about 2 hours ago
                                                </li>
                                                <li>
                                                    <i class="fa fa-clock-o"></i> Total time spent 250 hrs
                                                </li>
                                                <li>
                                                    <i class="fa fa-envelope"></i> Tol.lee@djavaui.com
                                                </li>
                                                <li>
                                                    <i class="fa fa-mobile"></i> 1 405 777 1212
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - about me -->

                                        <!-- Start category recent activity -->
                                        <li class="sidebar-category">
                                            <span>RECENT ACTIVITY</span>
                                            <span class="pull-right"><i class="fa fa-line-chart"></i></span>
                                        </li>
                                        <!--/ End category recent activity -->

                                        <!--/ Start navigation - activity -->
                                        <li>
                                            <div class="media-list activity">
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <i class="fa fa-flash"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Added a note to Ticket #947</span>
                                                        <span class="media-meta time">about 2 hours ago</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <i class="fa fa-flash"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Added a product to Ticket #948</span>
                                                        <span class="media-meta time">about 3 hours ago</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <i class="fa fa-flash"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Added a service to Ticket #949</span>
                                                        <span class="media-meta time">about 15 hours ago</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                            </div><!-- /.media-list -->
                                        </li>
                                        <!--/ End navigation - activity -->

                                        <!-- Start category current working -->
                                        <li class="sidebar-category">
                                            <span>CURRENTLY WORKING</span>
                                            <span class="pull-right"><i class="fa fa-group"></i></span>
                                        </li>
                                        <!--/ End category current working -->

                                        <!-- Start left navigation - current working -->
                                        <li>
                                            <div class="media-list working">
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Daddy Botak">
                                                        <i class="online"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Daddy Botak</span>
                                                        <span class="media-meta status">online</span>
                                                        <span class="media-meta device"><i class="fa fa-globe"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Sarah Tingting">
                                                        <i class="offline"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Sarah Tingting</span>
                                                        <span class="media-meta status">offline</span>
                                                        <span class="media-meta device"><i class="fa fa-globe"></i></span>
                                                        <span class="media-meta time">7 m</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Nicolas Olivier</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Claudia Cinta">
                                                        <i class="online"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Claudia Cinta</span>
                                                        <span class="media-meta status">online</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Catherine Parker</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                            </div><!-- /.media-list -->
                                        </li>
                                        <!--/ End left navigation - current working -->

                                    </ul>
                                    <!-- Start right navigation - menu -->
                                </div>
                            </div><!-- /#sidebar-profile -->
                            <div class="tab-pane" id="sidebar-layout">
                                <div class="sidebar-layout">

                                    <!-- Start right navigation - menu -->
                                    <ul class="sidebar-menu niceScroll">

                                        <!--/ Start navigation - reset settings -->
                                        <li>
                                            <a id="reset-setting" href="javascript:void(0);" class="btn btn-inverse btn-block"><i class="fa fa-refresh fa-spin"></i> RESET SETTINGS</a>
                                        </li>
                                        <!--/ End navigation - reset settings -->

                                        <!-- Start category layout -->
                                        <li class="sidebar-category">
                                            <span>LAYOUT</span>
                                            <span class="pull-right"><i class="fa fa-toggle-on"></i></span>
                                        </li>
                                        <!--/ End category layout -->

                                        <!--/ Start navigation - layout -->
                                        <li>
                                            <ul class="list-unstyled layout-setting">
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="layout-fluid" type="radio" name="layout" value="">
                                                        <label for="layout-fluid">Fluid</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="layout-boxed" type="radio" name="layout" value="page-boxed">
                                                        <label for="layout-boxed">Boxed</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - layout -->

                                        <!-- Start category header -->
                                        <li class="sidebar-category">
                                            <span>HEADER</span>
                                            <span class="pull-right"><i class="fa fa-toggle-on"></i></span>
                                        </li>
                                        <!--/ End category header -->

                                        <!--/ Start navigation - header -->
                                        <li>
                                            <ul class="list-unstyled header-layout-setting">
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="header-default" type="radio" name="header" value="">
                                                        <label for="header-default">Default</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="header-fixed" type="radio" name="header" value="page-header-fixed">
                                                        <label for="header-fixed">Fixed</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - header -->

                                        <!-- Start category sidebar -->
                                        <li class="sidebar-category">
                                            <span>SIDEBAR</span>
                                            <span class="pull-right"><i class="fa fa-toggle-on"></i></span>
                                        </li>
                                        <!--/ End category sidebar -->

                                        <!--/ Start navigation - sidebar -->
                                        <li>
                                            <ul class="list-unstyled sidebar-layout-setting">
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-default" type="radio" name="sidebar" value="">
                                                        <label for="sidebar-default">Default</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-fixed" type="radio" name="sidebar" value="page-sidebar-fixed">
                                                        <label for="sidebar-fixed">Fixed</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - sidebar -->

                                        <!-- Start category sidebar type -->
                                        <li class="sidebar-category">
                                            <span>SIDEBAR TYPE</span>
                                            <span class="pull-right"><i class="fa fa-toggle-on"></i></span>
                                        </li>
                                        <!--/ End category sidebar type -->

                                        <!--/ Start navigation - sidebar -->
                                        <li>
                                            <ul class="list-unstyled sidebar-type-setting">
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-type-default" type="radio" name="sidebarType" value="">
                                                        <label for="sidebar-type-default">Default</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-type-box" type="radio" name="sidebarType" value="sidebar-box">
                                                        <label for="sidebar-type-box">Box</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-type-rounded" type="radio" name="sidebarType" value="sidebar-rounded">
                                                        <label for="sidebar-type-rounded">Rounded</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="sidebar-type-circle" type="radio" name="sidebarType" value="sidebar-circle">
                                                        <label for="sidebar-type-circle">Circle</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - sidebar -->

                                        <!-- Start category footer -->
                                        <li class="sidebar-category">
                                            <span>FOOTER</span>
                                            <span class="pull-right"><i class="fa fa-toggle-on"></i></span>
                                        </li>
                                        <!--/ End category footer -->

                                        <!--/ Start navigation - footer -->
                                        <li>
                                            <ul class="list-unstyled footer-layout-setting">
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="footer-default" type="radio" name="footer" value="">
                                                        <label for="footer-default">Default</label>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="rdio rdio-theme">
                                                        <input id="footer-fixed" type="radio" name="footer" value="page-footer-fixed">
                                                        <label for="footer-fixed">Fixed</label>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - footer -->

                                    </ul>
                                    <!-- Start right navigation - menu -->
                                </div>
                            </div><!-- /#sidebar-layout -->
                            <div class="tab-pane in active" id="sidebar-setting">
                                <div class="sidebar-setting">
                                    <!-- Start right navigation - menu -->
                                    <ul class="sidebar-menu">

                                        <!-- Start category color schemes -->
                                        <li class="sidebar-category">
                                            <span>COLOR SCHEMES</span>
                                            <span class="pull-right"><i class="fa fa-tint"></i></span>
                                        </li>
                                        <!--/ End category color schemes -->

                                        <!-- Start navigation - themes -->
                                        <li>
                                            <div class="sidebar-themes color-schemes">

                                                <a class="theme" href="javascript:void(0);" style="background-color: #81b71a" data-toggle="tooltip" data-placement="right" data-original-title="Default"><span class="hide">default</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #00B1E1" data-toggle="tooltip" data-placement="top" data-original-title="Blue"><span class="hide">blue</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #37BC9B" data-toggle="tooltip" data-placement="top" data-original-title="Cyan"><span class="hide">cyan</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #8CC152" data-toggle="tooltip" data-placement="top" data-original-title="Green"><span class="hide">green</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #E9573F" data-toggle="tooltip" data-placement="top" data-original-title="Red"><span class="hide">red</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #F6BB42" data-toggle="tooltip" data-placement="top" data-original-title="Yellow"><span class="hide">yellow</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #906094" data-toggle="tooltip" data-placement="top" data-original-title="Purple"><span class="hide">purple</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #D39174" data-toggle="tooltip" data-placement="top" data-original-title="Brown"><span class="hide">brown</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #9FB478" data-toggle="tooltip" data-placement="left" data-original-title="Green Army"><span class="hide">green-army</span></a>

                                                <a class="theme" href="javascript:void(0);" style="background-color: #63D3E9" data-toggle="tooltip" data-placement="right" data-original-title="Blue Sea"><span class="hide">blue-sea</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #5577B4" data-toggle="tooltip" data-placement="top" data-original-title="Blue Gray"><span class="hide">blue-gray</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #AF86B9" data-toggle="tooltip" data-placement="top" data-original-title="Purple Gray"><span class="hide">purple-gray</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #CC6788" data-toggle="tooltip" data-placement="top" data-original-title="Purple Wine"><span class="hide">purple-wine</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #F06F6F" data-toggle="tooltip" data-placement="top" data-original-title="Alizarin Crimson"><span class="hide">alizarin-crimson</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #979797" data-toggle="tooltip" data-placement="top" data-original-title="Black And White"><span class="hide">black-and-white</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #8BC4B9" data-toggle="tooltip" data-placement="top" data-original-title="Amazon"><span class="hide">amazon</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #B0B069" data-toggle="tooltip" data-placement="top" data-original-title="Amber"><span class="hide">amber</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #A9C784" data-toggle="tooltip" data-placement="left" data-original-title="Android green"><span class="hide">android-green</span></a>

                                                <a class="theme" href="javascript:void(0);" style="background-color: #B3998A" data-toggle="tooltip" data-placement="right" data-original-title="Antique brass"><span class="hide">antique-brass</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #8D8D6E" data-toggle="tooltip" data-placement="top" data-original-title="Antique Bronze"><span class="hide">antique-bronze</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #B0B69D" data-toggle="tooltip" data-placement="top" data-original-title="Artichoke"><span class="hide">artichoke</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #F19B69" data-toggle="tooltip" data-placement="top" data-original-title="Atomic Tangerine"><span class="hide">atomic-tangerine</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #98777B" data-toggle="tooltip" data-placement="top" data-original-title="Bazaar"><span class="hide">bazaar</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #C3A961" data-toggle="tooltip" data-placement="top" data-original-title="Bistre Brown"><span class="hide">bistre-brown</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #D6725E" data-toggle="tooltip" data-placement="top" data-original-title="Bittersweet"><span class="hide">bittersweet</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #7789D1" data-toggle="tooltip" data-placement="top" data-original-title="Blueberry"><span class="hide">blueberry</span></a>
                                                <a class="theme" href="javascript:void(0);" style="background-color: #6FA362" data-toggle="tooltip" data-placement="left" data-original-title="Bud Green"><span class="hide">bud-green</span></a>

                                            </div><!-- /.sidebar-themes -->
                                        </li>
                                        <!--/ End navigation - themes -->

                                        <!-- Start category navbar color -->
                                        <li class="sidebar-category">
                                            <span>NAVBAR COLOR</span>
                                            <span class="pull-right"><i class="fa fa-tint"></i></span>
                                        </li>
                                        <!--/ End category navbar color -->

                                        <!-- Start navigation - navbar color -->
                                        <li>
                                            <div class="sidebar-themes navbar-color">

                                                <a class="theme bg-dark" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Dark"><span class="hide">dark</span></a>
                                                <a class="theme bg-light" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Light"><span class="hide">light</span></a>
                                                <a class="theme bg-primary" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Primary"><span class="hide">primary</span></a>
                                                <a class="theme bg-success" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Success"><span class="hide">success</span></a>
                                                <a class="theme bg-info" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Info"><span class="hide">info</span></a>
                                                <a class="theme bg-warning" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Warning"><span class="hide">warning</span></a>
                                                <a class="theme bg-danger" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Danger"><span class="hide">danger</span></a>

                                            </div><!-- /.navbar-color -->
                                        </li>
                                        <!--/ End navigation - navbar color -->

                                        <!-- Start category sidebar color -->
                                        <li class="sidebar-category">
                                            <span>SIDEBAR COLOR</span>
                                            <span class="pull-right"><i class="fa fa-tint"></i></span>
                                        </li>
                                        <!--/ End category sidebar color -->

                                        <!-- Start navigation - sidebar color -->
                                        <li>
                                            <div class="sidebar-themes sidebar-color">

                                                <a class="theme bg-dark" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Dark"><span class="hide">dark</span></a>
                                                <a class="theme bg-light" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Light"><span class="hide">light</span></a>
                                                <a class="theme bg-primary" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Primary"><span class="hide">primary</span></a>
                                                <a class="theme bg-success" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Success"><span class="hide">success</span></a>
                                                <a class="theme bg-info" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Info"><span class="hide">info</span></a>
                                                <a class="theme bg-warning" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Warning"><span class="hide">warning</span></a>
                                                <a class="theme bg-danger" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="Danger"><span class="hide">danger</span></a>

                                            </div><!-- /.sidebar-color -->
                                        </li>
                                        <!--/ End navigation - sidebar color -->

                                        <!-- Start category task progress -->
                                        <li class="sidebar-category">
                                            <span>TASK PROGRESS</span>
                                            <span class="pull-right"><i class="fa fa-sliders"></i></span>
                                        </li>
                                        <!--/ End category task progress -->

                                        <!--/ Start navigation - task progress -->
                                        <li>
                                            <ul class="list-group sidebar-task">
                                                <li class="list-group-item">
                                                    <p class="details"> <span> Core System </span> <span class="pull-right"> 82% </span> </p>
                                                    <div class="progress progress-xs progress-striped active no-margin">
                                                        <div style="width: 82%" class="progress-bar progress-bar-success"> </div>
                                                    </div>
                                                </li>
                                                <li class="list-group-item">
                                                    <p class="details"> <span> Front-End </span> <span class="pull-right"> 67% </span> </p>
                                                    <div class="progress progress-xs progress-striped active no-margin">
                                                        <div style="width: 47%" class="progress-bar progress-bar-danger"> </div>
                                                    </div>
                                                </li>
                                                <li class="list-group-item">
                                                    <p class="details"> <span> Back-End </span> <span class="pull-right"> 45% </span> </p>
                                                    <div class="progress progress-xs progress-striped active no-margin">
                                                        <div style="width: 47%" class="progress-bar progress-bar-info"> </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End navigation - task progress -->

                                        <!-- Start category summary system -->
                                        <li class="sidebar-category">
                                            <span>SUMMARY SYSTEM</span>
                                            <span class="pull-right"><i class="fa fa-bar-chart-o"></i></span>
                                        </li>
                                        <!--/ End category summary system -->

                                        <!-- Start left navigation - summary -->
                                        <li>
                                            <ul class="sidebar-summary sparklines">
                                                <li>
                                                    <div class="list-info">
                                                        <span>Average Users</span>
                                                        <h4>1, 412, 101</h4>
                                                    </div>
                                                    <div class="chart"><span class="average">4,2,3,2,4,2,5,1,2,2,5,3</span></div>
                                                    <div class="clearfix"></div>
                                                </li>
                                                <li>
                                                    <div class="list-info">
                                                        <span>Daily Traffic</span>
                                                        <h4>781, 601</h4>
                                                    </div>
                                                    <div class="chart"><span class="traffic">1,2,3,2,4,1,5,3,2,4,2,3</span></div>
                                                    <div class="clearfix"></div>
                                                </li>
                                                <li>
                                                    <div class="list-info">
                                                        <span>Disk Usage</span>
                                                        <h4>52.2%</h4>
                                                    </div>
                                                    <div class="chart"><span class="disk">5,5,3,2,1,3,4,3,2,4,1,3</span></div>
                                                    <div class="clearfix"></div>
                                                </li>
                                                <li>
                                                    <div class="list-info">
                                                        <span>CPU Usage</span>
                                                        <h4>67.8%</h4>
                                                    </div>
                                                    <div class="chart"><span class="cpu">1,5,3,2,4,5,5,3,2,4,5,3</span></div>
                                                    <div class="clearfix"></div>
                                                </li>
                                            </ul>
                                        </li>
                                        <!--/ End left navigation - summary -->

                                    </ul>
                                    <!-- Start right navigation - menu -->
                                </div>
                            </div><!-- /#sidebar-setting -->
                            <div class="tab-pane" id="sidebar-chat">
                                <div class="sidebar-chat">

                                    <form class="form-horizontal">
                                        <div class="form-group has-feedback">
                                            <input class="form-control" type="text" placeholder="Search messages...">
                                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                        </div>
                                    </form>

                                    <!-- Start right navigation - menu -->
                                    <ul class="sidebar-menu niceScroll">

                                        <!-- Start category family chat -->
                                        <li class="sidebar-category">
                                            <span>FAMILY</span>
                                            <span class="pull-right"><i class="fa fa-home"></i></span>
                                        </li>
                                        <!--/ End category family chat -->

                                        <li>
                                            <!-- Start chat - contact list -->
                                            <div class="media-list">
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Daddy Botak">
                                                        <i class="online"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Daddy Botak</span>
                                                        <span class="media-meta status">online</span>
                                                        <span class="media-meta device"><i class="fa fa-globe"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Sarah Tingting">
                                                        <i class="offline"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Sarah Tingting</span>
                                                        <span class="media-meta status">offline</span>
                                                        <span class="media-meta device"><i class="fa fa-globe"></i></span>
                                                        <span class="media-meta time">7 m</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="...">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Nicolas Olivier</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Harry Potret">
                                                        <i class="online"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Harry Potret</span>
                                                        <span class="media-meta status">online</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="...">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Catherine Parker</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                            </div><!-- /.media-list -->
                                            <!--/ End chat - contact list -->
                                        </li>

                                        <!-- Start category friends chat -->
                                        <li class="sidebar-category">
                                            <span>FRIENDS</span>
                                            <span class="pull-right"><i class="fa fa-group"></i></span>
                                        </li>
                                        <!--/ End category friends chat -->

                                        <li>
                                            <!-- Start chat - contact list -->
                                            <div class="media-list">
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Jeck Joko">
                                                        <i class="online"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Jeck Joko</span>
                                                        <span class="media-meta status">online</span>
                                                        <span class="media-meta device"><i class="fa fa-globe"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Tenny Imoet">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Tenny Imoet</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Leli Madang">
                                                        <i class="offline"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Leli Madang</span>
                                                        <span class="media-meta status">offline</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                        <span class="media-meta time">2 m</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Rebecca Cabean">
                                                        <i class="offline"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Rebecca Cabean</span>
                                                        <span class="media-meta status">offline</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                        <span class="media-meta time">8 m</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="...">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">ondoel return</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                            </div><!-- /.media-list -->
                                            <!--/ End chat - contact list -->
                                        </li>

                                        <!-- Start category other chat -->
                                        <li class="sidebar-category">
                                            <span>OTHERS</span>
                                            <span class="pull-right"><i class="fa fa-share"></i></span>
                                        </li>
                                        <!--/ End category other chat -->

                                        <li>
                                            <!-- Start chat - contact list -->
                                            <div class="media-list">
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Sishy Mawar">
                                                        <i class="offline"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Sishy Mawar</span>
                                                        <span class="media-meta status">offline</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                        <span class="media-meta time">23 m</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="Mbah Roso">
                                                        <i class="away"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Mbah Roso</span>
                                                        <span class="media-meta status">away</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                        <span class="media-meta time">2 h</span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                                <a href="#" class="media">
                                                    <div class="media-object pull-left has-notif">
                                                        <img src="http://img.djavaui.com/?create=30x30,4888E1?f=ffffff" class="img-circle" alt="...">
                                                        <i class="busy"></i>
                                                    </div><!-- /.media-object -->
                                                    <div class="media-body">
                                                        <span class="media-heading">Alma Butoi</span>
                                                        <span class="media-meta status">busy</span>
                                                        <span class="media-meta device"><i class="fa fa-mobile"></i></span>
                                                    </div><!-- /.media-body -->
                                                </a><!-- /.media -->
                                            </div><!-- /.media-list -->
                                            <!--/ End chat - contact list -->
                                        </li>

                                    </ul><!-- /.sidebar-menu -->
                                    <!-- Start right navigation - menu -->

                                </div><!-- /.sidebar-chat -->
                            </div><!-- /#sidebar-chat -->
                        </div>
                    </div>
                </div>

            </aside><!-- /#sidebar-right -->
            <!--/ END SIDEBAR RIGHT -->

        </section><!-- /#wrapper -->
        <!--/ END WRAPPER -->

        <!-- START @ADDITIONAL ELEMENTS -->
        <div class="modal fade color-picker-modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" style="margin-bottom: 140px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Colorpicker inside modal</h4>
                    </div>
                    <div class="modal-body no-padding">
                        <form class="form-horizontal form-bordered" action="#">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">With hex format</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control color-picker" value="#5367ce" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">As a component</label>
                                <div class="col-sm-7">
                                    <div class="input-group color-picker">
                                        <input type="text" value="#8c6464" class="form-control" />
                                        <span class="input-group-addon"><i></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Transparent color support</label>
                                <div class="col-sm-7">
                                    <input type="text" data-format="hex" class="form-control color-picker-transparent" value="transparent"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Horizonal mode</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control color-picker-horizontal" data-horizontal="true" value="#8fff00"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Inline mode</label>
                                <div class="col-sm-7">
                                    <div class="color-picker" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Bootstrap colors</label>
                                <div class="col-sm-7">
                                    <input type="text" data-format="hex" class="form-control color-picker-bootstrap" value="success"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Custom widget size</label>
                                <div class="col-sm-7">
                                    <input type="text" class="form-control color-picker-size" value="#ffaa00" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-4 control-label">Using events</label>
                                <div class="col-sm-7">
                                    <a href="#" class="btn small colorpicker-event" data-color="rgb(255, 255, 255)">Change background color</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <!--/ END ADDITIONAL ELEMENTS -->

        <!-- START @BACK TOP -->
        <div id="back-top" class="animated pulse circle">
            <i class="fa fa-angle-up"></i>
        </div><!-- /#back-top -->
        <!--/ END BACK TOP -->

        <!-- START JAVASCRIPT SECTION (Load javascripts at bottom to reduce load time) -->
        <!-- START @CORE PLUGINS -->
        <script src="../../../assets/global/plugins/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/jquery-cookie/jquery.cookie.js"></script>
        <script src="../../../assets/global/plugins/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/typehead.js/dist/handlebars.js"></script>
        <script src="../../../assets/global/plugins/bower_components/typehead.js/dist/typeahead.bundle.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/jquery-nicescroll/jquery.nicescroll.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/jquery.sparkline.min/index.js"></script>
        <script src="../../../assets/global/plugins/bower_components/jquery-easing-original/jquery.easing.1.3.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/ionsound/js/ion.sound.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/bootbox/bootbox.js"></script>
        <!--/ END CORE PLUGINS -->

        <!-- START @PAGE LEVEL PLUGINS -->
        <script src="../../../assets/global/plugins/bower_components/bootstrap-datepicker-vitalets/js/bootstrap-datepicker.js"></script>
        <script src="../../../assets/global/plugins/bower_components/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/moment/min/moment.min.js"></script>
        <script src="../../../assets/global/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
        <!--/ END PAGE LEVEL PLUGINS -->

        <!-- START @PAGE LEVEL SCRIPTS -->
        <script src="../../../assets/admin/js/apps.js"></script>
        <script src="../../../assets/admin/js/pages/blankon.form.picker.js"></script>
        <script src="../../../assets/admin/js/demo.js"></script>
        <!--/ END PAGE LEVEL SCRIPTS -->
        <!--/ END JAVASCRIPT SECTION -->

        <!-- START GOOGLE ANALYTICS -->
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-55892530-1', 'auto');
            ga('send', 'pageview');

        </script>
        <!--/ END GOOGLE ANALYTICS -->

    </body>
    <!--/ END BODY -->

</html>