SMusatov
/
gentelella
зеркало из https://github.com/ColorlibHQ/gentelella.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- bootstrap-daterangepicker -->
    <link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- bootstrap-datetimepicker -->
    <link href="../vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <!-- Ion.RangeSlider -->
    <link href="../vendors/normalize-css/normalize.css" rel="stylesheet">
    <link href="../vendors/ion.rangeSlider/css/ion.rangeSlider.css" rel="stylesheet">
    <link href="../vendors/ion.rangeSlider/css/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <!-- Bootstrap Colorpicker -->
    <link href="../vendors/farbelous-bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">

    <link href="../vendors/cropper/dist/cropper.min.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../build/css/custom.css" rel="stylesheet">
    <link href="../build/css/style-extra-bs4.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="body">
    <div class="main_container container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-2 left_col">
                <div class="left_col">
                    <div class="navbar nav_title" style="border: 0;">
                        <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
                    </div>

                    <div class="clearfix"></div>

                    <!-- menu profile quick info -->
                    <div class="profile clearfix">
                        <div class="profile_pic">
                            <img src="images/img.jpg" alt="..." class="img-circle profile_img">
                        </div>
                        <div class="profile_info">
                            <span>Welcome,</span>
                            <h2>John Doe</h2>
                        </div>
                    </div>
                    <!-- /menu profile quick info -->

                    <br/>

                    <!-- sidebar menu -->
                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                        <div class="menu_section">
                            <h3>General</h3>
                            <ul class="nav side-menu">
                                <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="index.html">Dashboard</a></li>
                                        <li><a href="index2.html">Dashboard2</a></li>
                                        <li><a href="index3.html">Dashboard3</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="form.html">General Form</a></li>
                                        <li><a href="form_advanced.html">Advanced Components</a></li>
                                        <li><a href="form_validation.html">Form Validation</a></li>
                                        <li><a href="form_wizards.html">Form Wizard</a></li>
                                        <li><a href="form_upload.html">Form Upload</a></li>
                                        <li><a href="form_buttons.html">Form Buttons</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-desktop"></i> UI Elements <span
                                        class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="general_elements.html">General Elements</a></li>
                                        <li><a href="media_gallery.html">Media Gallery</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="widgets.html">Widgets</a></li>
                                        <li><a href="invoice.html">Invoice</a></li>
                                        <li><a href="inbox.html">Inbox</a></li>
                                        <li><a href="calendar.html">Calendar</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="tables.html">Tables</a></li>
                                        <li><a href="tables_dynamic.html">Table Dynamic</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span
                                        class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="chartjs.html">Chart JS</a></li>
                                        <li><a href="chartjs2.html">Chart JS2</a></li>
                                        <li><a href="morisjs.html">Moris JS</a></li>
                                        <li><a href="echarts.html">ECharts</a></li>
                                        <li><a href="other_charts.html">Other Charts</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
                                        <li><a href="fixed_footer.html">Fixed Footer</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="menu_section">
                            <h3>Live On</h3>
                            <ul class="nav side-menu">
                                <li><a><i class="fa fa-bug"></i> Additional Pages <span
                                        class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="e_commerce.html">E-commerce</a></li>
                                        <li><a href="projects.html">Projects</a></li>
                                        <li><a href="project_detail.html">Project Detail</a></li>
                                        <li><a href="contacts.html">Contacts</a></li>
                                        <li><a href="profile.html">Profile</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="page_403.html">403 Error</a></li>
                                        <li><a href="page_404.html">404 Error</a></li>
                                        <li><a href="page_500.html">500 Error</a></li>
                                        <li><a href="plain_page.html">Plain Page</a></li>
                                        <li><a href="login.html">Login Page</a></li>
                                        <li><a href="pricing_tables.html">Pricing Tables</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span
                                        class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="#level1_1">Level One</a></li>
                                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
                                            <ul class="nav child_menu">
                                                <li class="sub_menu"><a href="level2.html">Level Two</a>
                                                </li>
                                                <li><a href="#level2_1">Level Two</a>
                                                </li>
                                                <li><a href="#level2_2">Level Two</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="#level1_2">Level One</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span
                                        class="label label-success pull-right">Coming Soon</span></a></li>
                            </ul>
                        </div>

                    </div>
                    <!-- /sidebar menu -->

                    <!-- /menu footer buttons -->
                    <div class="sidebar-footer col-lg-2 hidden-small">
                        <a data-toggle="tooltip" data-placement="top" title="Settings">
                            <span class="fa fa-cog" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                            <span class="fa fa-arrows-alt" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="Lock">
                            <span class="fa fa-eye-slash" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                            <span class="fa fa-power-off" aria-hidden="true"></span>
                        </a>
                    </div>
                    <!-- /menu footer buttons -->
                </div>
            </div>
            <div class="col-lg-10 col-md-12 right_col_wrapper">
                <div class="row">
                    <!-- top navigation -->
                    <div class="top_nav col-md-12">
                        <div class="nav_menu">
                            <nav>
                                <div class="nav toggle">
                                    <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                                </div>

                                <ul class="nav navbar-nav navbar-right">
                                    <li class="">
                                        <a href="javascript:;" class="user-profile dropdown-toggle"
                                           data-toggle="dropdown"
                                           aria-expanded="false">
                                            <img src="images/img.jpg" alt="">John Doe
                                            <span class=" fa fa-angle-down"></span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-usermenu pull-right">
                                            <li><a href="javascript:;"> Profile</a></li>
                                            <li>
                                                <a href="javascript:;">
                                                    <span class="badge bg-red pull-right">50%</span>
                                                    <span>Settings</span>
                                                </a>
                                            </li>
                                            <li><a href="javascript:;">Help</a></li>
                                            <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log
                                                Out</a>
                                            </li>
                                        </ul>
                                    </li>

                                    <li role="presentation" class="dropdown">
                                        <a href="javascript:;" class="dropdown-toggle info-number"
                                           data-toggle="dropdown"
                                           aria-expanded="false">
                                            <i class="fa fa-envelope-o"></i>
                                            <span class="badge bg-green">6</span>
                                        </a>
                                        <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                                            <li>
                                                <a>
                                                <span class="image"><img src="images/img.jpg"
                                                                         alt="Profile Image"/></span>
                                                    <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                                    <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                <span class="image"><img src="images/img.jpg"
                                                                         alt="Profile Image"/></span>
                                                    <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                                    <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                <span class="image"><img src="images/img.jpg"
                                                                         alt="Profile Image"/></span>
                                                    <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                                    <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                <span class="image"><img src="images/img.jpg"
                                                                         alt="Profile Image"/></span>
                                                    <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                                    <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <div class="text-center">
                                                    <a>
                                                        <strong>See All Alerts</strong>
                                                        <i class="fa fa-angle-right"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <!-- /top navigation -->
                    <!-- page content -->
                    <div class="right_col col-md-12" role="main">
                        <div class="">
                            <div class="page-title row">
                                <div class="text-left col-sm-6 col-12">
                                    <h3>Form advanced</h3>
                                </div>

                                <div class="text-right col-sm-6 col-12">
                                    <div class="row">
                                        <div class="offset-xl-7 col-xl-5 col-lg-12 col-md-12 col-sm-5 col-12 form-group pull-right top_search mt-3">
                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Search for...">
                                                <span class="input-group-btn">
                      <button class="btn btn-light" type="button">Go!</button>
                    </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="row">
                                <!-- form input mask -->
                                <div class="col-md-6 col-sm-12 col-12">
                                    <div class="x_panel">
                                        <div class="x_title">
                                            <h2>Input Mask</h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <br/>
                                            <form class="form-horizontal form-label-left">

                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">Date
                                                            Mask</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask': '99/99/9999'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">Phone
                                                            mask</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask' : '(999) 999-9999'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">Custom
                                                            Mask</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask': '99-999999'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">Serial
                                                            Number</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask' : '****-****-****-****-****-***'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">TaxID
                                                            Mask</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask' : '99-99999999'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-3">Credit
                                                            Card
                                                            Mask</label>
                                                        <div class="col-md-9 col-sm-9 col-9">
                                                            <input type="text" class="form-control"
                                                                   data-inputmask="'mask' : '9999-9999-9999-9999'">
                                                            <span class="fa fa-user form-control-feedback right"
                                                                  aria-hidden="true"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ln_solid"></div>

                                                <div class="form-group">
                                                    <div class="row">
                                                        <div class="col-md-9 col-md-offset-3">
                                                            <button type="submit" class="btn btn-primary">Cancel
                                                            </button>
                                                            <button type="submit" class="btn btn-success">Submit
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- /form input mask -->

                                <!-- form color picker -->
                                <div class="col-md-6 col-sm-12 col-12">
                                    <div class="x_panel">
                                        <div class="x_title">
                                            <h2>Color Picker</h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <br/>
                                            <form class="form-horizontal form-label-left">

                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-12">Default
                                                            Input</label>
                                                        <div class="col-md-9 col-sm-9 col-12">
                                                            <input type="text" class="demo1 form-control"
                                                                   value="#5367ce"/>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-12">Styled</label>
                                                        <div class="col-md-9 col-sm-9 col-12">
                                                            <div class="input-group demo2">
                                                                <input type="text" value="#e01ab5"
                                                                       class="form-control"/>
                                                                <span class="input-group-append">
                                                                    <span class="input-group-text colorpicker-input-addon">
                                                                        <i></i>
                                                                    </span>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-12">Horizontal
                                                            bar</label>
                                                        <div class="col-md-9 col-sm-9 col-12">
                                                            <input type="text"
                                                                   class="form-control demo colorpicker-element"
                                                                   data-horizontal="true" id="demo_forceformat"
                                                                   value="#8fff00">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-12">Vertical
                                                            bar</label>
                                                        <div class="col-md-9 col-sm-9 col-12">
                                                            <input type="text"
                                                                   class="form-control demo colorpicker-element"
                                                                   id="demo_forceformat3" value="#8fff00">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="control-label col-md-3 col-sm-3 col-12">Inline
                                                            picker</label>
                                                        <div class="col-md-9 col-sm-9 col-12">
                                                            <div class="card bg-light mt-1">
                                                                <div class="card-body">
                                                                    <div id="demo_cont"
                                                                         class="demo demo-auto inl-bl colorpicker-element"
                                                                         data-container="#demo_cont"
                                                                         data-color="rgba(150,216,62,0.55)"
                                                                         data-inline="true"></div>
                                                                    <div class="demo demo-auto inl-bl colorpicker-element"
                                                                         data-container="true"
                                                                         data-color="rgb(50,216,62)"
                                                                         data-inline="true"
                                                                         style="margin-left:20px;"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!-- /form color picker -->

                                <!-- form input knob -->
                                <div class="col-md-12">
                                    <div class="x_panel">
                                        <div class="x_title">
                                            <h2>Input knob</h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <div class="row">
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>Display value</p>
                                                    <input class="knob" data-width="100" data-height="120"
                                                           data-min="-100"
                                                           data-displayPrevious=true data-fgColor="#26B99A" value="44">
                                                </div>
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>&#215; 'cursor' mode</p>
                                                    <input class="knob" data-width="100" data-height="120"
                                                           data-cursor=true
                                                           data-fgColor="#34495E" value="29">
                                                </div>
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>Step 0.1</p>
                                                    <input class="knob" data-width="100" data-height="120"
                                                           data-min="-10000"
                                                           data-displayPrevious=true data-fgColor="#26B99A"
                                                           data-max="10000"
                                                           data-step=".1" value="0">
                                                </div>
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>Angle arc</p>
                                                    <input class="knob" data-width="100" data-height="120"
                                                           data-angleOffset=-125
                                                           data-angleArc=250 data-fgColor="#34495E"
                                                           data-rotation="anticlockwise" value="35">
                                                </div>
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>Alternate design</p>
                                                    <input class="knob" data-width="110" data-height="120"
                                                           data-displayPrevious=true data-fgColor="#26B99A"
                                                           data-skin="tron"
                                                           data-thickness=".2" value="75">
                                                </div>
                                                <div class="col-md-2 col-sm-4 col-4">
                                                    <p>Angle offset</p>
                                                    <input class="knob" data-width="100" data-height="120"
                                                           data-angleOffset=90
                                                           data-linecap=round data-fgColor="#26B99A" value="35">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /form input knob -->

                            </div>


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

                                    <!-- form date pickers -->
                                    <div class="x_panel" style="">
                                        <div class="x_title">
                                            <h2>Date Pickers
                                                <small> Available with multiple designs</small>
                                            </h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <div class="card bg-light mt-2" style="overflow: auto">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div id="reportrange_right" class="pull-left"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                                                                <i class="fa fa-calendar"></i>
                                                                <span>December 30, 2014 - January 28, 2015</span> <b
                                                                    class="caret"></b>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <p>Date Range Picker with opening to right and left</p>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div id="reportrange" class="pull-right"
                                                                 style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                                                                <i class="fa fa-calendar"></i>
                                                                <span>December 30, 2014 - January 28, 2015</span> <b
                                                                    class="caret"></b>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card bg-light mt-2" style="overflow: auto">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            Date Range Picker
                                                            <form class="form-horizontal">
                                                                <fieldset>
                                                                    <div class="control-group">
                                                                        <div class="controls">
                                                                            <div class="input-prepend input-group">
                                                                    <span class="add-on input-group-prepend input-group-text"><i
                                                                            class="fa fa-calendar"></i></span>
                                                                                <input type="text" style="width: 200px"
                                                                                       name="reservation"
                                                                                       id="reservation"
                                                                                       class="form-control"
                                                                                       value="01/01/2016 - 01/25/2016"/>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </fieldset>
                                                            </form>
                                                        </div>

                                                        <div class="col-md-5">
                                                            Date and Time
                                                            <form class="form-horizontal">
                                                                <fieldset>
                                                                    <div class="control-group">
                                                                        <div class="controls">
                                                                            <div class="input-prepend input-group">
                                                                    <span class="add-on input-group-prepend input-group-text"><i
                                                                            class="fa fa-calendar"></i></span>
                                                                                <input type="text"
                                                                                       name="reservation-time"
                                                                                       id="reservation-time"
                                                                                       class="form-control"
                                                                                       value="01/01/2016 - 01/25/2016"/>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </fieldset>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row calendar-exibit mt-2">
                                                <div class="col-md-3">
                                                    <div class="daterangepicker dropdown-menu ltr single opensright show-calendar picker_1 xdisplay">
                                                        <div class="calendar left single" style="display: block;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control active" type="text"
                                                                    name="daterangepicker_start" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar"
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th class="prev available"><i
                                                                                class="fa fa-chevron-left "></i>
                                                                        </th>
                                                                        <th colspan="5" class="month">Oct 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            25
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">26
                                                                        </td>
                                                                        <td class="off available" data-title="r0c2">27
                                                                        </td>
                                                                        <td class="off available" data-title="r0c3">28
                                                                        </td>
                                                                        <td class="off available" data-title="r0c4">29
                                                                        </td>
                                                                        <td class="off available" data-title="r0c5">30
                                                                        </td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            1
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            2
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">3</td>
                                                                        <td class="available" data-title="r1c2">4</td>
                                                                        <td class="available" data-title="r1c3">5</td>
                                                                        <td class="available" data-title="r1c4">6</td>
                                                                        <td class="available" data-title="r1c5">7</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            8
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            9
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">10</td>
                                                                        <td class="available" data-title="r2c2">11</td>
                                                                        <td class="available" data-title="r2c3">12</td>
                                                                        <td class="available" data-title="r2c4">13</td>
                                                                        <td class="available" data-title="r2c5">14</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            15
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            16
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">17</td>
                                                                        <td class="today active start-date active end-date available"
                                                                            data-title="r3c2">18
                                                                        </td>
                                                                        <td class="available" data-title="r3c3">19</td>
                                                                        <td class="available" data-title="r3c4">20</td>
                                                                        <td class="available" data-title="r3c5">21</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            22
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            23
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">24</td>
                                                                        <td class="available" data-title="r4c2">25</td>
                                                                        <td class="available" data-title="r4c3">26</td>
                                                                        <td class="available" data-title="r4c4">27</td>
                                                                        <td class="available" data-title="r4c5">28</td>
                                                                        <td class="weekend available" data-title="r4c6">
                                                                            29
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r5c0">
                                                                            30
                                                                        </td>
                                                                        <td class="available" data-title="r5c1">31</td>
                                                                        <td class="off available" data-title="r5c2">1
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">2
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">3
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">4
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="calendar right" style="display: none;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control" type="text"
                                                                    name="daterangepicker_end" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th></th>
                                                                        <th colspan="5" class="month">Nov 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            30
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">31
                                                                        </td>
                                                                        <td class="available" data-title="r0c2">1</td>
                                                                        <td class="available" data-title="r0c3">2</td>
                                                                        <td class="available" data-title="r0c4">3</td>
                                                                        <td class="available" data-title="r0c5">4</td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            6
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">7</td>
                                                                        <td class="available" data-title="r1c2">8</td>
                                                                        <td class="available" data-title="r1c3">9</td>
                                                                        <td class="available" data-title="r1c4">10</td>
                                                                        <td class="available" data-title="r1c5">11</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            12
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            13
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">14</td>
                                                                        <td class="available" data-title="r2c2">15</td>
                                                                        <td class="available" data-title="r2c3">16</td>
                                                                        <td class="available" data-title="r2c4">17</td>
                                                                        <td class="available" data-title="r2c5">18</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            19
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            20
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">21</td>
                                                                        <td class="available" data-title="r3c2">22</td>
                                                                        <td class="available" data-title="r3c3">23</td>
                                                                        <td class="available" data-title="r3c4">24</td>
                                                                        <td class="available" data-title="r3c5">25</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            26
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            27
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">28</td>
                                                                        <td class="available" data-title="r4c2">29</td>
                                                                        <td class="available" data-title="r4c3">30</td>
                                                                        <td class="off available" data-title="r4c4">1
                                                                        </td>
                                                                        <td class="off available" data-title="r4c5">2
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r4c6">
                                                                            3
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c0">
                                                                            4
                                                                        </td>
                                                                        <td class="off available" data-title="r5c1">5
                                                                        </td>
                                                                        <td class="off available" data-title="r5c2">6
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">7
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">8
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">9
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            10
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="ranges" style="display: none;">
                                                            <div class="range_inputs">
                                                                <button class="applyBtn btn btn-sm btn-success"
                                                                        type="button">Apply
                                                                </button>
                                                                <button class="cancelBtn btn btn-sm btn-light"
                                                                        type="button">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <fieldset>
                                                        <div class="control-group">
                                                            <div class="controls">
                                                                <div class=" xdisplay_inputx form-group has-feedback">
                                                                    <input type="text"
                                                                           class="form-control has-feedback-left"
                                                                           id="single_cal1" placeholder="First Name"
                                                                           aria-describedby="inputSuccess2Status">
                                                                    <span class="fa fa-calendar-o form-control-feedback left"
                                                                          aria-hidden="true"></span>
                                                                    <span id="inputSuccess2Status"
                                                                          class="sr-only">(success)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>

                                                </div>

                                                <div class="col-md-3">
                                                    <div class="daterangepicker dropdown-menu ltr single opensright show-calendar picker_2 xdisplay">
                                                        <div class="calendar left single" style="display: block;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control active" type="text"
                                                                    name="daterangepicker_start" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th class="prev available"><i
                                                                                class="fa fa-chevron-left "></i>
                                                                        </th>
                                                                        <th colspan="5" class="month">Oct 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            25
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">26
                                                                        </td>
                                                                        <td class="off available" data-title="r0c2">27
                                                                        </td>
                                                                        <td class="off available" data-title="r0c3">28
                                                                        </td>
                                                                        <td class="off available" data-title="r0c4">29
                                                                        </td>
                                                                        <td class="off available" data-title="r0c5">30
                                                                        </td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            1
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            2
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">3</td>
                                                                        <td class="available" data-title="r1c2">4</td>
                                                                        <td class="available" data-title="r1c3">5</td>
                                                                        <td class="available" data-title="r1c4">6</td>
                                                                        <td class="available" data-title="r1c5">7</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            8
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            9
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">10</td>
                                                                        <td class="available" data-title="r2c2">11</td>
                                                                        <td class="available" data-title="r2c3">12</td>
                                                                        <td class="available" data-title="r2c4">13</td>
                                                                        <td class="available" data-title="r2c5">14</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            15
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            16
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">17</td>
                                                                        <td class="today active start-date active end-date available"
                                                                            data-title="r3c2">18
                                                                        </td>
                                                                        <td class="available" data-title="r3c3">19</td>
                                                                        <td class="available" data-title="r3c4">20</td>
                                                                        <td class="available" data-title="r3c5">21</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            22
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            23
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">24</td>
                                                                        <td class="available" data-title="r4c2">25</td>
                                                                        <td class="available" data-title="r4c3">26</td>
                                                                        <td class="available" data-title="r4c4">27</td>
                                                                        <td class="available" data-title="r4c5">28</td>
                                                                        <td class="weekend available" data-title="r4c6">
                                                                            29
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r5c0">
                                                                            30
                                                                        </td>
                                                                        <td class="available" data-title="r5c1">31</td>
                                                                        <td class="off available" data-title="r5c2">1
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">2
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">3
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">4
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="calendar right" style="display: none;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control" type="text"
                                                                    name="daterangepicker_end" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th></th>
                                                                        <th colspan="5" class="month">Nov 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            30
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">31
                                                                        </td>
                                                                        <td class="available" data-title="r0c2">1</td>
                                                                        <td class="available" data-title="r0c3">2</td>
                                                                        <td class="available" data-title="r0c4">3</td>
                                                                        <td class="available" data-title="r0c5">4</td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            6
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">7</td>
                                                                        <td class="available" data-title="r1c2">8</td>
                                                                        <td class="available" data-title="r1c3">9</td>
                                                                        <td class="available" data-title="r1c4">10</td>
                                                                        <td class="available" data-title="r1c5">11</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            12
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            13
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">14</td>
                                                                        <td class="available" data-title="r2c2">15</td>
                                                                        <td class="available" data-title="r2c3">16</td>
                                                                        <td class="available" data-title="r2c4">17</td>
                                                                        <td class="available" data-title="r2c5">18</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            19
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            20
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">21</td>
                                                                        <td class="available" data-title="r3c2">22</td>
                                                                        <td class="available" data-title="r3c3">23</td>
                                                                        <td class="available" data-title="r3c4">24</td>
                                                                        <td class="available" data-title="r3c5">25</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            26
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            27
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">28</td>
                                                                        <td class="available" data-title="r4c2">29</td>
                                                                        <td class="available" data-title="r4c3">30</td>
                                                                        <td class="off available" data-title="r4c4">1
                                                                        </td>
                                                                        <td class="off available" data-title="r4c5">2
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r4c6">
                                                                            3
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c0">
                                                                            4
                                                                        </td>
                                                                        <td class="off available" data-title="r5c1">5
                                                                        </td>
                                                                        <td class="off available" data-title="r5c2">6
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">7
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">8
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">9
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            10
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="ranges" style="display: none;">
                                                            <div class="range_inputs">
                                                                <button class="applyBtn btn btn-sm btn-success"
                                                                        type="button">Apply
                                                                </button>
                                                                <button class="cancelBtn btn btn-sm btn-light"
                                                                        type="button">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <fieldset>
                                                        <div class="control-group">
                                                            <div class="controls">
                                                                <div class="xdisplay_inputx form-group has-feedback">
                                                                    <input type="text"
                                                                           class="form-control has-feedback-left"
                                                                           id="single_cal2" placeholder="First Name"
                                                                           aria-describedby="inputSuccess2Status2">
                                                                    <span class="fa fa-calendar-o form-control-feedback left"
                                                                          aria-hidden="true"></span>
                                                                    <span id="inputSuccess2Status2" class="sr-only">(success)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>

                                                <div class="col-md-3">
                                                    <div class="daterangepicker dropdown-menu ltr single opensright show-calendar picker_3 xdisplay">
                                                        <div class="calendar left single" style="display: block;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control active" type="text"
                                                                    name="daterangepicker_start" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar"
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th class="prev available"><i
                                                                                class="fa fa-chevron-left "></i>
                                                                        </th>
                                                                        <th colspan="5" class="month">Oct 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            25
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">26
                                                                        </td>
                                                                        <td class="off available" data-title="r0c2">27
                                                                        </td>
                                                                        <td class="off available" data-title="r0c3">28
                                                                        </td>
                                                                        <td class="off available" data-title="r0c4">29
                                                                        </td>
                                                                        <td class="off available" data-title="r0c5">30
                                                                        </td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            1
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            2
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">3</td>
                                                                        <td class="available" data-title="r1c2">4</td>
                                                                        <td class="available" data-title="r1c3">5</td>
                                                                        <td class="available" data-title="r1c4">6</td>
                                                                        <td class="available" data-title="r1c5">7</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            8
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            9
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">10</td>
                                                                        <td class="available" data-title="r2c2">11</td>
                                                                        <td class="available" data-title="r2c3">12</td>
                                                                        <td class="available" data-title="r2c4">13</td>
                                                                        <td class="available" data-title="r2c5">14</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            15
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            16
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">17</td>
                                                                        <td class="today active start-date active end-date available"
                                                                            data-title="r3c2">18
                                                                        </td>
                                                                        <td class="available" data-title="r3c3">19</td>
                                                                        <td class="available" data-title="r3c4">20</td>
                                                                        <td class="available" data-title="r3c5">21</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            22
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            23
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">24</td>
                                                                        <td class="available" data-title="r4c2">25</td>
                                                                        <td class="available" data-title="r4c3">26</td>
                                                                        <td class="available" data-title="r4c4">27</td>
                                                                        <td class="available" data-title="r4c5">28</td>
                                                                        <td class="weekend available" data-title="r4c6">
                                                                            29
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r5c0">
                                                                            30
                                                                        </td>
                                                                        <td class="available" data-title="r5c1">31</td>
                                                                        <td class="off available" data-title="r5c2">1
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">2
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">3
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">4
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="calendar right" style="display: none;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control" type="text"
                                                                    name="daterangepicker_end" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th></th>
                                                                        <th colspan="5" class="month">Nov 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            30
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">31
                                                                        </td>
                                                                        <td class="available" data-title="r0c2">1</td>
                                                                        <td class="available" data-title="r0c3">2</td>
                                                                        <td class="available" data-title="r0c4">3</td>
                                                                        <td class="available" data-title="r0c5">4</td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            6
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">7</td>
                                                                        <td class="available" data-title="r1c2">8</td>
                                                                        <td class="available" data-title="r1c3">9</td>
                                                                        <td class="available" data-title="r1c4">10</td>
                                                                        <td class="available" data-title="r1c5">11</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            12
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            13
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">14</td>
                                                                        <td class="available" data-title="r2c2">15</td>
                                                                        <td class="available" data-title="r2c3">16</td>
                                                                        <td class="available" data-title="r2c4">17</td>
                                                                        <td class="available" data-title="r2c5">18</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            19
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            20
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">21</td>
                                                                        <td class="available" data-title="r3c2">22</td>
                                                                        <td class="available" data-title="r3c3">23</td>
                                                                        <td class="available" data-title="r3c4">24</td>
                                                                        <td class="available" data-title="r3c5">25</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            26
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            27
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">28</td>
                                                                        <td class="available" data-title="r4c2">29</td>
                                                                        <td class="available" data-title="r4c3">30</td>
                                                                        <td class="off available" data-title="r4c4">1
                                                                        </td>
                                                                        <td class="off available" data-title="r4c5">2
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r4c6">
                                                                            3
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c0">
                                                                            4
                                                                        </td>
                                                                        <td class="off available" data-title="r5c1">5
                                                                        </td>
                                                                        <td class="off available" data-title="r5c2">6
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">7
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">8
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">9
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            10
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="ranges" style="display: none;">
                                                            <div class="range_inputs">
                                                                <button class="applyBtn btn btn-sm btn-success"
                                                                        type="button">Apply
                                                                </button>
                                                                <button class="cancelBtn btn btn-sm btn-light"
                                                                        type="button">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <fieldset>
                                                        <div class="control-group">
                                                            <div class="controls">
                                                                <div class="xdisplay_inputx form-group has-feedback">
                                                                    <input type="text"
                                                                           class="form-control has-feedback-left"
                                                                           id="single_cal3" placeholder="First Name"
                                                                           aria-describedby="inputSuccess2Status3">
                                                                    <span class="fa fa-calendar-o form-control-feedback left"
                                                                          aria-hidden="true"></span>
                                                                    <span id="inputSuccess2Status3" class="sr-only">(success)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>

                                                <div class="col-md-3">
                                                    <div class="daterangepicker dropdown-menu ltr single opensright show-calendar picker_4 xdisplay">
                                                        <div class="calendar left single" style="display: block;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control active" type="text"
                                                                    name="daterangepicker_start" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th class="prev available"><i
                                                                                class="fa fa-chevron-left "></i>
                                                                        </th>
                                                                        <th colspan="5" class="month">Oct 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            25
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">26
                                                                        </td>
                                                                        <td class="off available" data-title="r0c2">27
                                                                        </td>
                                                                        <td class="off available" data-title="r0c3">28
                                                                        </td>
                                                                        <td class="off available" data-title="r0c4">29
                                                                        </td>
                                                                        <td class="off available" data-title="r0c5">30
                                                                        </td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            1
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            2
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">3</td>
                                                                        <td class="available" data-title="r1c2">4</td>
                                                                        <td class="available" data-title="r1c3">5</td>
                                                                        <td class="available" data-title="r1c4">6</td>
                                                                        <td class="available" data-title="r1c5">7</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            8
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            9
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">10</td>
                                                                        <td class="available" data-title="r2c2">11</td>
                                                                        <td class="available" data-title="r2c3">12</td>
                                                                        <td class="available" data-title="r2c4">13</td>
                                                                        <td class="available" data-title="r2c5">14</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            15
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            16
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">17</td>
                                                                        <td class="today active start-date active end-date available"
                                                                            data-title="r3c2">18
                                                                        </td>
                                                                        <td class="available" data-title="r3c3">19</td>
                                                                        <td class="available" data-title="r3c4">20</td>
                                                                        <td class="available" data-title="r3c5">21</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            22
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            23
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">24</td>
                                                                        <td class="available" data-title="r4c2">25</td>
                                                                        <td class="available" data-title="r4c3">26</td>
                                                                        <td class="available" data-title="r4c4">27</td>
                                                                        <td class="available" data-title="r4c5">28</td>
                                                                        <td class="weekend available" data-title="r4c6">
                                                                            29
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r5c0">
                                                                            30
                                                                        </td>
                                                                        <td class="available" data-title="r5c1">31</td>
                                                                        <td class="off available" data-title="r5c2">1
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">2
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">3
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">4
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="calendar right" style="display: none;">
                                                            <div class="daterangepicker_input"><input
                                                                    class="input-mini form-control" type="text"
                                                                    name="daterangepicker_end" value=""
                                                                    style="display: none;"><i
                                                                    class="fa fa-calendar "
                                                                    style="display: none;"></i>
                                                                <div class="calendar-time" style="display: none;">
                                                                    <div></div>
                                                                    <i class="fa fa-clock-o "></i>
                                                                </div>
                                                            </div>
                                                            <div class="calendar-table">
                                                                <table class="table-condensed">
                                                                    <thead>
                                                                    <tr>
                                                                        <th></th>
                                                                        <th colspan="5" class="month">Nov 2016</th>
                                                                        <th class="next available"><i
                                                                                class="fa fa-chevron-right "></i>
                                                                        </th>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>Su</th>
                                                                        <th>Mo</th>
                                                                        <th>Tu</th>
                                                                        <th>We</th>
                                                                        <th>Th</th>
                                                                        <th>Fr</th>
                                                                        <th>Sa</th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r0c0">
                                                                            30
                                                                        </td>
                                                                        <td class="off available" data-title="r0c1">31
                                                                        </td>
                                                                        <td class="available" data-title="r0c2">1</td>
                                                                        <td class="available" data-title="r0c3">2</td>
                                                                        <td class="available" data-title="r0c4">3</td>
                                                                        <td class="available" data-title="r0c5">4</td>
                                                                        <td class="weekend available" data-title="r0c6">
                                                                            5
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r1c0">
                                                                            6
                                                                        </td>
                                                                        <td class="available" data-title="r1c1">7</td>
                                                                        <td class="available" data-title="r1c2">8</td>
                                                                        <td class="available" data-title="r1c3">9</td>
                                                                        <td class="available" data-title="r1c4">10</td>
                                                                        <td class="available" data-title="r1c5">11</td>
                                                                        <td class="weekend available" data-title="r1c6">
                                                                            12
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r2c0">
                                                                            13
                                                                        </td>
                                                                        <td class="available" data-title="r2c1">14</td>
                                                                        <td class="available" data-title="r2c2">15</td>
                                                                        <td class="available" data-title="r2c3">16</td>
                                                                        <td class="available" data-title="r2c4">17</td>
                                                                        <td class="available" data-title="r2c5">18</td>
                                                                        <td class="weekend available" data-title="r2c6">
                                                                            19
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r3c0">
                                                                            20
                                                                        </td>
                                                                        <td class="available" data-title="r3c1">21</td>
                                                                        <td class="available" data-title="r3c2">22</td>
                                                                        <td class="available" data-title="r3c3">23</td>
                                                                        <td class="available" data-title="r3c4">24</td>
                                                                        <td class="available" data-title="r3c5">25</td>
                                                                        <td class="weekend available" data-title="r3c6">
                                                                            26
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend available" data-title="r4c0">
                                                                            27
                                                                        </td>
                                                                        <td class="available" data-title="r4c1">28</td>
                                                                        <td class="available" data-title="r4c2">29</td>
                                                                        <td class="available" data-title="r4c3">30</td>
                                                                        <td class="off available" data-title="r4c4">1
                                                                        </td>
                                                                        <td class="off available" data-title="r4c5">2
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r4c6">
                                                                            3
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c0">
                                                                            4
                                                                        </td>
                                                                        <td class="off available" data-title="r5c1">5
                                                                        </td>
                                                                        <td class="off available" data-title="r5c2">6
                                                                        </td>
                                                                        <td class="off available" data-title="r5c3">7
                                                                        </td>
                                                                        <td class="off available" data-title="r5c4">8
                                                                        </td>
                                                                        <td class="off available" data-title="r5c5">9
                                                                        </td>
                                                                        <td class="weekend off available"
                                                                            data-title="r5c6">
                                                                            10
                                                                        </td>
                                                                    </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                        <div class="ranges" style="display: none;">
                                                            <div class="range_inputs">
                                                                <button class="applyBtn btn btn-sm btn-success"
                                                                        type="button">Apply
                                                                </button>
                                                                <button class="cancelBtn btn btn-sm btn-light"
                                                                        type="button">Cancel
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <fieldset>
                                                        <div class="control-group">
                                                            <div class="controls">
                                                                <div class="xdisplay_inputx form-group has-feedback">
                                                                    <input type="text"
                                                                           class="form-control has-feedback-left"
                                                                           id="single_cal4" placeholder="First Name"
                                                                           aria-describedby="inputSuccess2Status4">
                                                                    <span class="fa fa-calendar-o form-control-feedback left"
                                                                          aria-hidden="true"></span>
                                                                    <span id="inputSuccess2Status4" class="sr-only">(success)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- /form datepicker -->


                                    <!-- form datetimepicker -->
                                    <div class="x_panel" style="">
                                        <div class="x_title">
                                            <h2>Date Pickers
                                                <small> Available with multiple designs</small>
                                            </h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">

                                            <div class="container">
                                                <div class="row">

                                                    <div class='col-sm-4'>
                                                        Basic Example
                                                        <div class="form-group">
                                                            <div class='input-group date' id='myDatepicker'>
                                                                <input type='text' class="form-control"/>
                                                                <span class="input-group-prepend input-group-text">
                               <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class='col-sm-4'>
                                                        Only Date Picker
                                                        <div class="form-group">
                                                            <div class='input-group date' id='myDatepicker2'>
                                                                <input type='text' class="form-control"/>
                                                                <span class="input-group-prepend input-group-text">
                               <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class='col-sm-4'>
                                                        Only Time Picker
                                                        <small>For 24H format use format: 'HH:mm'</small>
                                                        <div class="form-group">
                                                            <div class='input-group date' id='myDatepicker3'>
                                                                <input type='text' class="form-control"/>
                                                                <span class="input-group-prepend input-group-text">
                               <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class='col-sm-4'>
                                                        Using ReadOnly
                                                        <div class="form-group">
                                                            <div class='input-group date' id='myDatepicker4'>
                                                                <input type='text' class="form-control"
                                                                       readonly="readonly"/>
                                                                <span class="input-group-prepend input-group-text">
                               <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class='col-sm-4'>
                                                        Linked Picker Parent
                                                        <div class="form-group">
                                                            <div class='input-group date' id='datetimepicker6'>
                                                                <input type='text' class="form-control"/>
                                                                <span class="input-group-prepend input-group-text">
                                    <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class='col-sm-4'>
                                                        Linked Picker Children
                                                        <div class="form-group">
                                                            <div class='input-group date' id='datetimepicker7'>
                                                                <input type='text' class="form-control"/>
                                                                <span class="input-group-prepend input-group-text">
                                    <span class="fa fa-calendar"></span>
                            </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /form datetimepicker -->

                                    <!-- form grid slider -->
                                    <div class="x_panel" style="">
                                        <div class="x_title">
                                            <h2>Grid Slider</h2>
                                            <ul class="nav navbar-right panel_toolbox">
                                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                </li>
                                                <li class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                       role="button"
                                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Settings 1</a>
                                                        </li>
                                                        <li><a href="#">Settings 2</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="x_content">
                                            <div class="row grid_slider">

                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Default grid slider with min and max values</p>
                                                    <input type="text" id="range" value="" name="range"/>
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Grid with slider labels are far away outside it's container</p>
                                                    <input type="text" id="range_25" value="" name="range"/>
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Grid with labels inside container using force_edges attribute</p>
                                                    <input type="text" id="range_27" value="" name="range"/>
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Create Grid with pre-defined steps</p>
                                                    <input type="text" id="range_26" value="" name="range"/>
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Prevent one from dragging the labels</p>
                                                    <input type="text" id="range_31" value="" name="range"/>
                                                </div>
                                                <div class="col-md-6 col-sm-6 col-12">
                                                    <p>Grid with minimum and maximum values</p>
                                                    <input type="text" class="range_min_max" value="" name="range"/>
                                                </div>
                                                <div class="col-md-12">
                                                    <p>Grid With time in 24 hour format</p>
                                                    <input type="text" class="range_time24" value="" name="range"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br/>
                                    <br/>
                                    <!-- /form grid slider -->

                                    <!-- image cropping -->
                                    <div class="cropper">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="img-container">
                                                    <img id="image" src="images/cropper.jpg" alt="Picture">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="docs-preview clearfix">
                                                    <div class="img-preview preview-lg"></div>
                                                    <div class="img-preview preview-md"></div>
                                                    <div class="img-preview preview-sm"></div>
                                                    <div class="img-preview preview-xs"></div>
                                                </div>

                                                <div class="docs-data">
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataX">X</label>
                                                        <input type="text" class="form-control" id="dataX"
                                                               placeholder="x">
                                                        <span class="input-group-prepend input-group-text">px</span>
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataY">Y</label>
                                                        <input type="text" class="form-control" id="dataY"
                                                               placeholder="y">
                                                        <span class="input-group-prepend input-group-text">px</span>
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataWidth">Width</label>
                                                        <input type="text" class="form-control" id="dataWidth"
                                                               placeholder="width">
                                                        <span class="input-group-prepend input-group-text">px</span>
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataHeight">Height</label>
                                                        <input type="text" class="form-control" id="dataHeight"
                                                               placeholder="height">
                                                        <span class="input-group-prepend input-group-text">px</span>
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataRotate">Rotate</label>
                                                        <input type="text" class="form-control" id="dataRotate"
                                                               placeholder="rotate">
                                                        <span class="input-group-prepend input-group-text">deg</span>
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataScaleX">ScaleX</label>
                                                        <input type="text" class="form-control" id="dataScaleX"
                                                               placeholder="scaleX">
                                                    </div>
                                                    <div class="input-group input-group-sm">
                                                        <label class="input-group-prepend input-group-text" for="dataScaleY">ScaleY</label>
                                                        <input type="text" class="form-control" id="dataScaleY"
                                                               placeholder="scaleY">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9 docs-buttons">
                                                <!-- <h3 class="page-header">Toolbar:</h3> -->
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary"
                                                            data-method="setDragMode"
                                                            data-option="move" title="Move">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                            <span class="fa fa-arrows"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary"
                                                            data-method="setDragMode"
                                                            data-option="crop" title="Crop">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
                            <span class="fa fa-crop"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="zoom"
                                                            data-option="0.1" title="Zoom In">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
                            <span class="fa fa-search-plus"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="zoom"
                                                            data-option="-0.1" title="Zoom Out">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
                            <span class="fa fa-search-minus"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="move"
                                                            data-option="-10" data-second-option="0" title="Move Left">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;move&quot;, -10, 0)">
                            <span class="fa fa-arrow-left"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="move"
                                                            data-option="10" data-second-option="0" title="Move Right">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, 10, 0)">
                            <span class="fa fa-arrow-right"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="move"
                                                            data-option="0" data-second-option="-10" title="Move Up">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;move&quot;, 0, -10)">
                            <span class="fa fa-arrow-up"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="move"
                                                            data-option="0" data-second-option="10" title="Move Down">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;move&quot;, 0, 10)">
                            <span class="fa fa-arrow-down"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="rotate"
                                                            data-option="-45" title="Rotate Left">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
                            <span class="fa fa-rotate-left"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="rotate"
                                                            data-option="45" title="Rotate Right">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
                            <span class="fa fa-rotate-right"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="scaleX"
                                                            data-option="-1" title="Flip Horizontal">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleX&quot;, -1)">
                            <span class="fa fa-arrows-h"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="scaleY"
                                                            data-option="-1" title="Flip Vertical">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleY&quot;, -1)">
                            <span class="fa fa-arrows-v"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="crop"
                                                            title="Crop">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;crop&quot;)">
                            <span class="fa fa-check"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="clear"
                                                            title="Clear">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
                            <span class="fa fa-remove"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="disable"
                                                            title="Disable">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;disable&quot;)">
                            <span class="fa fa-lock"></span>
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary" data-method="enable"
                                                            title="Enable">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;enable&quot;)">
                            <span class="fa fa-unlock"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-primary" data-method="reset"
                                                            title="Reset">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
                            <span class="fa fa-refresh"></span>
                          </span>
                                                    </button>
                                                    <label class="btn btn-primary btn-upload" for="inputImage"
                                                           title="Upload image file">
                                                        <input type="file" class="sr-only" id="inputImage" name="file"
                                                               accept="image/*">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="Import image with Blob URLs">
                            <span class="fa fa-upload"></span>
                          </span>
                                                    </label>
                                                    <button type="button" class="btn btn-primary" data-method="destroy"
                                                            title="Destroy">
                          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
                            <span class="fa fa-power-off"></span>
                          </span>
                                                    </button>
                                                </div>

                                                <div class="btn-group btn-group-crop">
                                                    <button type="button" class="btn btn-primary"
                                                            data-method="getCroppedCanvas">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;getCroppedCanvas&quot;)">
                            Get Cropped Canvas
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary"
                                                            data-method="getCroppedCanvas"
                                                            data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
                            160&times;90
                          </span>
                                                    </button>
                                                    <button type="button" class="btn btn-primary"
                                                            data-method="getCroppedCanvas"
                                                            data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
                          <span class="docs-tooltip" data-toggle="tooltip"
                                title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })">
                            320&times;180
                          </span>
                                                    </button>
                                                </div>

                                                <!-- Show the cropped image in modal -->
                                                <div class="modal fade docs-cropped" id="getCroppedCanvasModal"
                                                     aria-hidden="true" aria-labelledby="getCroppedCanvasTitle"
                                                     role="dialog" tabindex="-1">
                                                    <div class="modal-dialog">
                                                        <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" id="getCroppedCanvasTitle">
                                                                    Cropped</h4>
                                                            </div>
                                                            <div class="modal-body"></div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-light"
                                                                        data-dismiss="modal">Close
                                                                </button>
                                                                <a class="btn btn-primary" id="download"
                                                                   href="javascript:void(0);" download="cropped.png">Download</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- /.modal -->

                                                <button type="button" class="btn btn-primary" data-method="getData"
                                                        data-option data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
                          Get Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary" data-method="setData"
                                                        data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setData&quot;, data)">
                          Set Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary"
                                                        data-method="getContainerData"
                                                        data-option data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip"
                              title="$().cropper(&quot;getContainerData&quot;)">
                          Get Container Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary" data-method="getImageData"
                                                        data-option data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getImageData&quot;)">
                          Get Image Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary"
                                                        data-method="getCanvasData"
                                                        data-option data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCanvasData&quot;)">
                          Get Canvas Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary"
                                                        data-method="setCanvasData"
                                                        data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip"
                              title="$().cropper(&quot;setCanvasData&quot;, data)">
                          Set Canvas Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary"
                                                        data-method="getCropBoxData"
                                                        data-option data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip"
                              title="$().cropper(&quot;getCropBoxData&quot;)">
                          Get Crop Box Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary"
                                                        data-method="setCropBoxData"
                                                        data-target="#putData">
                        <span class="docs-tooltip" data-toggle="tooltip"
                              title="$().cropper(&quot;setCropBoxData&quot;, data)">
                          Set Crop Box Data
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary" data-method="moveTo"
                                                        data-option="0">
                        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.moveTo(0)">
                          0,0
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary" data-method="zoomTo"
                                                        data-option="1">
                        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoomTo(1)">
                          100%
                        </span>
                                                </button>
                                                <button type="button" class="btn btn-primary" data-method="rotateTo"
                                                        data-option="180">
                        <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(180)">
                          180°
                        </span>
                                                </button>
                                                <input type="text" class="form-control" id="putData"
                                                       placeholder="Get data to here or set data with this value">
                                            </div><!-- /.docs-buttons -->

                                            <div class="col-md-3 docs-toggles">
                                                <!-- <h3 class="page-header">Toggles:</h3> -->
                                                <div class="btn-group btn-group-justified" data-toggle="buttons">
                                                    <label class="btn btn-primary active">
                                                        <input type="radio" class="sr-only" id="aspectRatio0"
                                                               name="aspectRatio" value="1.7777777777777777">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="aspectRatio: 16 / 9">
                            16:9
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="aspectRatio1"
                                                               name="aspectRatio" value="1.3333333333333333">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="aspectRatio: 4 / 3">
                            4:3
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="aspectRatio2"
                                                               name="aspectRatio" value="1">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="aspectRatio: 1 / 1">
                            1:1
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="aspectRatio3"
                                                               name="aspectRatio" value="0.6666666666666666">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="aspectRatio: 2 / 3">
                            2:3
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="aspectRatio4"
                                                               name="aspectRatio" value="NaN">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="aspectRatio: NaN">
                            Free
                          </span>
                                                    </label>
                                                </div>

                                                <div class="btn-group btn-group-justified" data-toggle="buttons">
                                                    <label class="btn btn-primary active">
                                                        <input type="radio" class="sr-only" id="viewMode0"
                                                               name="viewMode"
                                                               value="0" checked>
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="View Mode 0">
                            VM0
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="viewMode1"
                                                               name="viewMode"
                                                               value="1">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="View Mode 1">
                            VM1
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="viewMode2"
                                                               name="viewMode"
                                                               value="2">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="View Mode 2">
                            VM2
                          </span>
                                                    </label>
                                                    <label class="btn btn-primary">
                                                        <input type="radio" class="sr-only" id="viewMode3"
                                                               name="viewMode"
                                                               value="3">
                                                        <span class="docs-tooltip" data-toggle="tooltip"
                                                              title="View Mode 3">
                            VM3
                          </span>
                                                    </label>
                                                </div>

                                                <div class="dropdown dropup docs-options">
                                                    <button type="button"
                                                            class="btn btn-primary btn-block dropdown-toggle"
                                                            id="toggleOptions" data-toggle="dropdown"
                                                            aria-expanded="true">
                                                        Toggle Options
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="toggleOptions"
                                                        role="menu">
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="responsive" checked>
                                                                responsive
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="restore" checked>
                                                                restore
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="checkCrossOrigin" checked>
                                                                checkCrossOrigin
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="checkOrientation" checked>
                                                                checkOrientation
                                                            </label>
                                                        </li>

                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="modal" checked>
                                                                modal
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="guides" checked>
                                                                guides
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="center" checked>
                                                                center
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="highlight" checked>
                                                                highlight
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="background" checked>
                                                                background
                                                            </label>
                                                        </li>

                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="autoCrop" checked>
                                                                autoCrop
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="movable" checked>
                                                                movable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="rotatable" checked>
                                                                rotatable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="scalable" checked>
                                                                scalable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="zoomable" checked>
                                                                zoomable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="zoomOnTouch" checked>
                                                                zoomOnTouch
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="zoomOnWheel" checked>
                                                                zoomOnWheel
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="cropBoxMovable" checked>
                                                                cropBoxMovable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="cropBoxResizable" checked>
                                                                cropBoxResizable
                                                            </label>
                                                        </li>
                                                        <li role="presentation">
                                                            <label class="checkbox-inline">
                                                                <input type="checkbox" name="toggleDragModeOnDblclick"
                                                                       checked>
                                                                toggleDragModeOnDblclick
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div><!-- /.dropdown -->

                                                <a class="btn btn-light btn-block" data-toggle="tooltip"
                                                   href="https://fengyuanchen.github.io/cropperjs"
                                                   title="Cropper without jQuery">Cropper.js</a>

                                            </div><!-- /.docs-toggles -->
                                        </div>
                                    </div>
                                    <!-- /image cropping -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /page content -->
                    <!-- footer content -->
                    <footer class="col-md-12">
                        <div class="pull-right">
                            Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
                        </div>
                        <div class="clearfix"></div>
                    </footer>
                    <!-- /footer content -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>
<!-- Popper -->
<script src="../vendors/popper/popper.min.js"></script>
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../vendors/moment/min/moment.min.js"></script>
<script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap-datetimepicker -->
<script src="../vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<!-- Ion.RangeSlider -->
<script src="../vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<!-- Bootstrap Colorpicker -->
<script src="../vendors/farbelous-bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- jquery.inputmask -->
<script src="../vendors/jquery.inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
<!-- jQuery Knob -->
<script src="../vendors/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- Cropper -->
<script src="../vendors/cropper/dist/cropper.min.js"></script>

<!-- Custom Theme Scripts -->
<script src="../build/js/custom.min.js"></script>

<!-- Initialize datetimepicker -->
<script>
    $('#myDatepicker').datetimepicker();

    $('#myDatepicker2').datetimepicker({
        format: 'DD.MM.YYYY'
    });

    $('#myDatepicker3').datetimepicker({
        format: 'hh:mm A'
    });

    $('#myDatepicker4').datetimepicker({
        ignoreReadonly: true,
        allowInputToggle: true
    });

    $('#datetimepicker6').datetimepicker();

    $('#datetimepicker7').datetimepicker({
        useCurrent: false
    });

    $("#datetimepicker6").on("dp.change", function (e) {
        $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
    });

    $("#datetimepicker7").on("dp.change", function (e) {
        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
    });
</script>
</body>
</html>