puti
/
snd-escloud


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- jQuery Include -->
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <!-- Bootstrap Include -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

    <!-- Mobiscroll JS and CSS Includes -->

    <link href="css/mobiscroll.custom-3.0.0-beta6.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-3.0.0-beta6.min.js" type="text/javascript"></script>

    <style type="text/css">
    /*****************************************************************/
    /* Demo Page styling, you can ignore this in your implementation */
    
    body {
        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        -webkit-font-smoothing: antialiased;
    }
    
    input,
    select {
        width: 100%;
        margin: 0 0 10px 0;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 0;
        background: #fff;
        font-family: arial, verdana, sans-serif;
        text-shadow: none;
        color: #000;
        font-size: 15px;
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    button {
        display: inline-block;
        text-decoration: none;
        padding: 0.8em 2.6em;
        margin: 20px 10px 0 0;
        outline: 0;
        border: 0;
        overflow: visible;
        cursor: pointer;
        color: #fff;
        background: #5185a8;
        font-family: arial, verdana, sans-serif;
        font-size: 14px;
        font-weight: 100;
    }
    
    button:hover {
        background: #34566d;
    }
    
    .header {
        padding: .625em;
        background: #5185a8;
    }
    
    .header h1 {
        margin: 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 1.25em;
        font-weight: bold;
        text-shadow: 1px 1px 1px #000;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .demo-main,
    .demo-wrapper {
        padding: 1em;
    }
    
    .demo-iframe {
        padding: 10px 10px 10px 10px;
        text-shadow: none;
    }
    /* Demo page styling END */
    /*************************/
    /* Basic usage demo styling */
    
    .demo-stars {
        padding: 0!important;
    }
    
    .md-stars .md-products {
        list-style: none;
        margin: 0;
        padding: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -ms-touch-action: none;
    }
    
    .md-stars .md-products li {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
        background: #f0f0f0;
        border-bottom: 1px solid #b1b1b1;
        border-top: 1px solid #fff;
    }
    
    .md-stars .md-products li h3 {
        margin: 5px 0;
        font-weight: normal;
        font-size: initial;
    }
    
    .md-stars .md-products li p {
        margin: 5px 0;
        color: #717171;
    }
    
    .md-stars .md-products li .md-product {
        height: 50px;
        padding: 5px 65px 5px 60px;
        color: #333;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    
    .md-stars .md-products li .md-active {
        background: #ddd;
    }
    
    .md-stars .md-products li .md-rate {
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        text-align: right;
    }
    
    .md-stars .md-products li .md-rating {
        padding-right: 10px;
        font-size: 17px;
        line-height: 60px;
    }
    
    .md-stars .md-products img {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 60px;
        border: 0;
    }
    
    @media (max-width: 960px) {
        .demo-cont-c .md-stars {
            padding: 0;
        }
        .demo-cont-c .demo-phone-c .demo-phone {
            margin: 0 -20px 40px;
        }
    }
    /* Image Only demo styling */
    
    .md-image-fruit .dw-ul .dw-li .mbsc-img-w {
        text-align: center;
    }
    
    .md-image-fruit .mbsc-ltr .mbsc-img-w {
        text-align: center;
    }
    
    .md-image-fruit .mbsc-sc-whl-sc .mbsc-sc-itm .mbsc-img-w {
        text-align: center;
    }
    /* Basic usage demo styling */
    
    .md-color {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-indent: 40px;
        color: #000;
        border: 1px solid #000;
        background: #ff0000;
        margin: 5px 0;
        white-space: nowrap;
    }
    
    .demo-display-inline .md-color {
        display: block;
        width: auto;
        height: auto;
        text-indent: 0;
        margin: 0;
        border: 0;
        background: none !important;
    }
    
    .demo-display-inline .md-color .mbsc-fr-inline,
    .demo-display-inline .md-color .dw-inline {
        text-align: left;
    }
    /* Two inputs demo styling */
    
    .demo-display-inline .demo-twoinputs input,
    .demo-display-inline .demo-twoinputs label,
    .demo-display-inline .demo-twoinputs br {
        display: none;
    }
    /* Create, remove, update demo styling */
    
    .demo-comp-listview .mbsc-lv-fixed-header-ctx {
        text-shadow: none;
    }
    
    .demo-comp-listview .demo-iframe {
        padding: 0;
    }
    
    .demo-comp-listview .demo-note {
        margin: 10px;
    }
    
    .md-demo-note {
        cursor: pointer;
    }
    
    .md-wo-list {
        line-height: 30px;
        text-shadow: none;
    }
    
    .md-wo-list li {
        line-height: normal;
    }
    
    .md-wo-status {
        font-size: 10px;
        -webkit-backface-visibility: hidden;
    }
    
    .md-wo-empty {
        padding: 10px;
    }
    /* Sort handle demo styling */
    
    .demo-comp-listview .mbsc-lv-fixed-header-ctx {
        text-shadow: none;
    }
    
    .demo-comp-listview .demo-iframe {
        padding: 0;
    }
    
    .demo-comp-listview .demo-note {
        margin: 10px;
    }
    
    .demo-sorthandle ul {
        font-size: 16px;
    }
    /* Action menu demo styling */
    
    .demo-comp-listview .mbsc-lv-fixed-header-ctx {
        text-shadow: none;
    }
    
    .demo-comp-listview .demo-iframe {
        padding: 0;
    }
    
    .demo-comp-listview .demo-note {
        margin: 10px;
    }
    
    .demo-notification {
        position: absolute;
        width: 100%;
        z-index: 100001;
        left: 0;
        bottom: 20px;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity 200ms;
        -moz-transition: opacity 200ms;
        transition: opacity 200ms;
    }
    
    .demo-notification-fixed {
        position: fixed;
    }
    
    .demo-notification-i {
        display: inline-block;
        background: #000;
        color: #fff;
        line-height: 20px;
        text-shadow: none;
        box-shadow: 0 0 3px rgba(0, 0, 0, .5);
        border-radius: 3px;
        padding: 5px;
    }
    
    .demo-notification-v {
        opacity: 1;
    }
    /* Currency demo styling */
    
    .demo-currency {
        padding: 0!important;
    }
    
    .md-stepper-np .md-demo {
        text-align: center;
    }
    
    .md-stepper-np .md-demo .mbsc-desc {
        font-size: 16px;
        padding-bottom: 16px;
    }
    
    .md-stepper-np .md-demo .mbsc-btn {
        margin-top: 36px;
    }
    
    .md-stepper-np .md-title {
        margin-top: 40px;
    }
    
    .md-stepper-np {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    
    .md-stepper-np .mbsc-segmented {
        left: 50%;
        margin-left: -122px;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper .mbsc-segmented-item {
        width: 4.375em;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper .mbsc-segmented-item:nth-child(3) {
        width: 6.25em;
    }
    
    .md-stepper-np.mbsc-form .mbsc-stepper input {
        left: 5em;
        width: 7.1428em;
    }
    /* Tab menu demo styling */
    
    .demo-comp-menustrip #demombscr {
        position: static;
    }
    
    .demo-comp-menustrip .demo-iframe {
        padding: 0;
        min-height: 300px;
    }
    
    .demo-comp-menustrip .demo-phone-np .demo-phone {
        margin: 0 -20px -20px -20px;
    }
    
    .md-ms-tabs .md-tab-h {
        display: none;
    }
    
    .md-ms-tabs .md-tabs-sel {
        display: block;
    }
    
    .md-ms-tabs .md-tabs-sel {
        display: block;
    }
    
    .md-app-ic {
        position: absolute;
        top: 50%;
        left: 15px;
        margin-top: -12px;
        font-size: 20px;
        line-height: 24px;
    }
    
    .md-app-detail {
        display: block;
        overflow: hidden;
    }
    
    .md-app-size {
        font-size: 10px;
        display: block;
        opacity: .6;
        float: left;
    }
    
    .md-app-date {
        font-size: 10px;
        display: block;
        opacity: .6;
        float: right;
    }
    
    .md-apps-ul li.mbsc-lv-item {
        padding-left: 50px;
    }
    
    .demo-display-top .md-apps-ul {
        padding-top: 47px;
    }
    
    .demo-display-top .mbsc-lv-android .md-apps-ul {
        padding-top: 34px;
    }
    
    .demo-display-top .mbsc-lv-android-holo .md-apps-ul {
        padding-top: 45px;
    }
    
    .demo-display-top .mbsc-lv-bootstrap .md-apps-ul {
        padding-top: 36px;
    }
    
    .demo-display-top .mbsc-lv-ios .md-apps-ul {
        padding-top: 42px;
    }
    
    .demo-display-top .mbsc-lv-ios-classic .md-apps-ul {
        padding-top: 38px;
    }
    
    .demo-display-top .mbsc-lv-jqm .md-apps-ul {
        padding-top: 33px;
    }
    
    .demo-display-top .mbsc-lv-sense-ui .md-apps-ul {
        padding-top: 39px;
    }
    
    .demo-display-top .mbsc-lv-sense .md-apps-ul {
        padding-top: 39px;
    }
    
    .demo-display-top .mbsc-lv-wp .md-apps-ul {
        padding-top: 75px;
    }
    
    .demo-display-bottom .demo-tabs {
        padding-bottom: 75px;
    }
    /* Dialog demo styling */
    
    .md-text-center {
        text-align: center;
    }
    
    .demo-dialog .md-dialog {
        width: 260px;
        margin: 0 auto;
    }
    /* Alert message demo styling */
    
    .md-body {
        max-width: 280px;
        margin: 0 auto;
    }
    /* Progress demo styling */
    
    .md-progress-demo .md-demo .mbsc-progress-cont {
        padding: 1em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .md-progress-demo .md-upload.mbsc-progress,
    .md-progress-demo .md-demo.mbsc-progress {
        overflow: hidden;
    }
    
    .md-progress-demo .md-demo .mbsc-progress-step-label {
        overflow: visible;
    }
    
    .md-progress-demo.mbsc-wp .mbsc-progress {
        min-height: 3.75em;
    }
    
    .md-progress-demo .md-upload .mbsc-progress-cont {
        padding-right: 1em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    </style>

    <script>
    // -------------------------------------------------------------------
    // Demo page code START, you can ignore this in your implementation
    $(function () {
        var noDisplay = {
            listview: true,
            forms: true,
            menustrip: 'partial'
        };

        function init() {
            var demo = $('#demo').val(),
                component = demo.split(/(?=[A-Z])/)[0],
                demoContainer = $('.demo-wrapper-' + demo);

            // reset options
            resetOptions(component);

            // hide all demos
            $('.demo-wrapper').hide();

            // show current demo
            demoContainer.show();

            // reinitialize demo
            window[demo + 'Init']();

            demoContainer.trigger('mbsc-enhance');
        }

        function resetOptions(component) {
            var displayValue = $('#display').val();

            // reset display
            $('#display').parent().show();
            $('#display option').show();

            if (noDisplay[component] === 'partial') {
                if (displayValue == 'modal' || displayValue == 'bubble') {
                    $('#display').val('inline');
                }
                $('#display option[value="modal"]').hide();
                $('#display option[value="bubble"]').hide();
            } else if (noDisplay[component] === true) {
                $('#display').parent().hide();
            }
        }

        $('#main').find('.settings').change(init);

        init();
    });
    // Demo page code END
    // -------------------------------------------------------------------

    // Basic usage date demo script
    function datetimeDateInit() {
        $(function () {

            // Mobiscroll Date & Time initialization
            $('#datetimeDate-demo').mobiscroll().date({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-mode
            });

            $('#datetimeDate-show').click(function () {
                $('#datetimeDate-demo').mobiscroll('show');
                return false;
            });

            $('#datetimeDate-clear').click(function () {
                $('#datetimeDate-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Datetime with invalids demo script
    function datetimeInvalidInit() {
        $(function () {
            var now = new Date();

            // Mobiscroll Date & Time initialization
            $('#datetimeInvalid-demo').mobiscroll().datetime({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-mode
                min: new Date(now.getFullYear(), now.getMonth(), now.getDate()), // More info about min: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-min
                invalid: ['w0', 'w6', '5/1', '12/24', '12/25'], // More info about invalid: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-invalid
                dateWheels: '|D M d|',
                timeWheels: 'HHii' // More info about timeWheels: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!localization-timeWheels
            });

            $('#datetimeInvalid-show').click(function () {
                $('#datetimeInvalid-demo').mobiscroll('show');
                return false;
            });

            $('#datetimeInvalid-clear').click(function () {
                $('#datetimeInvalid-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage time demo script
    function datetimeTimeInit() {
        $(function () {

            // Mobiscroll Date & Time initialization
            $('#datetimeTime-demo').mobiscroll().time({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-mode
                headerText: false, // More info about headerText: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-headerText
                maxWidth: 90 // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-maxWidth
            });

            $('#datetimeTime-show').click(function () {
                $('#datetimeTime-demo').mobiscroll('show');
                return false;
            });

            $('#datetimeTime-clear').click(function () {
                $('#datetimeTime-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage demo script
    function selectBasicInit() {
        $(function () {

            // Mobiscroll Select initialization
            $('#selectBasic-demo').mobiscroll().select({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-mode
                minWidth: 200 // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-minWidth
            });

            $('#selectBasic-show').click(function () {
                $('#selectBasic-demo').mobiscroll('show');
                return false;
            });

            $('#selectBasic-clear').click(function () {
                $('#selectBasic-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Group options demo script
    function selectGroupselectInit() {
        $(function () {

            // Mobiscroll Select initialization
            $('#selectGroupselect-demo').mobiscroll().select({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-mode
                label: 'City', // More info about label: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-label
                group: true, // More info about group: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-group
                groupLabel: 'Country', // More info about groupLabel: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-groupLabel
                width: [100, 170] // More info about width: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-width
            });

            $('#selectGroupselect-show').click(function () {
                $('#selectGroupselect-demo').mobiscroll('show');
                return false;
            });

            $('#selectGroupselect-clear').click(function () {
                $('#selectGroupselect-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage demo script
    function ratingStarsInit() {
        $(function () {

            // Mobiscroll Rating initialization
            $('.md-product').mobiscroll().rating({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-mode
                label: 'Rate Item', // More info about label: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-label
                onSet: function (event, inst) { // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta5/rating#!event-onSet
                    $(this).closest('li').find('.md-rating').text(event.valueText + ' of 5');
                },
                onBeforeShow: function (event, inst) { // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta5/rating#!event-onBeforeShow
                    inst.setVal($(this).closest('li').find('.md-rating').text()[0], true);
                }
            });

        });
    }

    // Grades demo script
    function ratingGradesInit() {
        $(function () {

            // Mobiscroll Rating initialization
            $('#ratingGrades-demo').mobiscroll().rating({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-mode
                style: 'grade', // More info about style: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-style
                label: 'Rating' // More info about label: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-label
            });

            $('#ratingGrades-show').click(function () {
                $('#ratingGrades-demo').mobiscroll('show');
                return false;
            });

            $('#ratingGrades-clear').click(function () {
                $('#ratingGrades-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Distance demo script
    function measurementDistanceInit() {
        $(function () {

            // Mobiscroll Measurement initialization
            $('#measurementDistance-demo').mobiscroll().distance({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/measurement#!opt-mode
            });

            $('#measurementDistance-show').click(function () {
                $('#measurementDistance-demo').mobiscroll('show');
                return false;
            });

            $('#measurementDistance-clear').click(function () {
                $('#measurementDistance-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Speed demo script
    function measurementSpeedInit() {
        $(function () {

            // Mobiscroll Measurement initialization
            $('#measurementSpeed-demo').mobiscroll().speed({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/measurement#!opt-mode
            });

            $('#measurementSpeed-show').click(function () {
                $('#measurementSpeed-demo').mobiscroll('show');
                return false;
            });

            $('#measurementSpeed-clear').click(function () {
                $('#measurementSpeed-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Temperature demo script
    function measurementTemperatureInit() {
        $(function () {

            // Mobiscroll Measurement initialization
            $('#measurementTemperature-demo').mobiscroll().temperature({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/measurement#!opt-mode
            });

            $('#measurementTemperature-show').click(function () {
                $('#measurementTemperature-demo').mobiscroll('show');
                return false;
            });

            $('#measurementTemperature-clear').click(function () {
                $('#measurementTemperature-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Mass demo script
    function measurementMassInit() {
        $(function () {

            // Mobiscroll Measurement initialization
            $('#measurementMass-demo').mobiscroll().mass({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/measurement#!opt-mode
            });

            $('#measurementMass-show').click(function () {
                $('#measurementMass-demo').mobiscroll('show');
                return false;
            });

            $('#measurementMass-clear').click(function () {
                $('#measurementMass-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Force demo script
    function measurementForceInit() {
        $(function () {

            // Mobiscroll Measurement initialization
            $('#measurementForce-demo').mobiscroll().force({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/measurement#!opt-mode
            });

            $('#measurementForce-show').click(function () {
                $('#measurementForce-demo').mobiscroll('show');
                return false;
            });

            $('#measurementForce-clear').click(function () {
                $('#measurementForce-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage demo script
    function listTreelistInit() {
        $(function () {

            // Mobiscroll Treelist initialization
            $('#listTreelist-demo').mobiscroll().treelist({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-mode
                width: [90, 160, 170], // More info about width: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-width
                placeholder: 'Please Select ...', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-placeholder
                labels: ['Region', 'Supervisor', 'Tech'] // More info about labels: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-labels
            });

            $('#listTreelist-show').click(function () {
                $('#listTreelist-demo').mobiscroll('show');
                return false;
            });

            $('#listTreelist-clear').click(function () {
                $('#listTreelist-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Image and Text demo script
    function imageTextInit() {
        $(function () {

            // Mobiscroll Image initialization
            $('#imageText-demo').mobiscroll().image({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-mode
                placeholder: 'Please Select ...', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-placeholder
                labels: ['Make'], // More info about labels: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-labels
                enhance: true, // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-enhance
                defaultValue: ['Citroen'] // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-defaultValue
            });

            $('#imageText-show').click(function () {
                $('#imageText-demo').mobiscroll('show');
                return false;
            });

            $('#imageText-clear').click(function () {
                $('#imageText-demo' + '_dummy').val('');
                return false;
            });

        });
    }

    // Image Only demo script
    function imageBasicInit() {
        $(function () {

            // Mobiscroll Image initialization
            $('#imageBasic-demo').mobiscroll().image({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-mode
                cssClass: 'md-image-fruit',
                labels: ['Select Favorite Fruit'], // More info about labels: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-labels
                placeholder: 'Please Select ...', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-placeholder
                width: 200, // More info about width: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-width
                enhance: true // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-enhance
            });

            $('#imageBasic-show').click(function () {
                $('#imageBasic-demo').mobiscroll('show');
                return false;
            });

            $('#imageBasic-clear').click(function () {
                $('#imageBasic-demo' + '_dummy').val('');
                return false;
            });

        });
    }

    // Unordered list demo script
    function listUnorderedInit() {
        $(function () {

            // Mobiscroll Treelist initialization
            $('#listUnordered-demo').mobiscroll().treelist({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-mode
                labels: ['Ingredients'], // More info about labels: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-labels
                placeholder: 'Please Select ...', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-placeholder
                width: 200 // More info about width: https://docs.mobiscroll.com/3-0-0_beta5/list#!opt-width
            });

            $('#listUnordered-show').click(function () {
                $('#listUnordered-demo').mobiscroll('show');
                return false;
            });

            $('#listUnordered-clear').click(function () {
                $('#listUnordered-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // With time scroller demo script
    function calendarTimeInit() {
        $(function () {

            // Mobiscroll Calendar initialization
            $('#calendarTime-demo').mobiscroll().calendar({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-mode
                controls: ['calendar', 'time'], // More info about controls: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-controls
                showScrollArrows: true // More info about showScrollArrows: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-showScrollArrows
            });

            $('#calendarTime-show').click(function () {
                $('#calendarTime-demo').mobiscroll('show');
                return false;
            });

            $('#calendarTime-clear').click(function () {
                $('#calendarTime-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage demo script
    function calendarBasicInit() {
        $(function () {

            // Mobiscroll Calendar initialization
            $('#calendarBasic-demo').mobiscroll().calendar({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val() // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-mode
            });

            $('#calendarBasic-show').click(function () {
                $('#calendarBasic-demo').mobiscroll('show');
                return false;
            });

            $('#calendarBasic-clear').click(function () {
                $('#calendarBasic-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Multi day select demo script
    function calendarMultidayInit() {
        $(function () {

            var now = new Date(),
                year = now.getFullYear(),
                month = now.getMonth();

            // Mobiscroll Calendar initialization
            $('#calendarMultiday-demo').mobiscroll().calendar({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-mode
                counter: true, // More info about counter: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-counter
                select: 'multiple', // More info about select: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-select
                defaultValue: [new Date(year, month, 1), new Date(year, month, 2), new Date(year, month, 10)] // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta5/calendar#!opt-defaultValue
            });

            $('#calendarMultiday-show').click(function () {
                $('#calendarMultiday-demo').mobiscroll('show');
                return false;
            });

            $('#calendarMultiday-clear').click(function () {
                $('#calendarMultiday-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Multiple select demo script
    function selectMultipleInit() {
        $(function () {

            // Mobiscroll Select initialization
            $('#selectMultiple-demo').mobiscroll().select({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-mode
                minWidth: 200 // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta5/select#!opt-minWidth
            });

            $('#selectMultiple-show').click(function () {
                $('#selectMultiple-demo').mobiscroll('show');
                return false;
            });

            $('#selectMultiple-clear').click(function () {
                $('#selectMultiple-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Basic usage demo script
    function timespanBasicInit() {
        $(function () {

            // Mobiscroll Timespan initialization
            $('#timespanBasic-demo').mobiscroll().timespan({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/timespan#!opt-mode
                wheelOrder: 'iiss' // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta5/timespan#!opt-wheelOrder
            });

            $('#timespanBasic-show').click(function () {
                $('#timespanBasic-demo').mobiscroll('show');
                return false;
            });

            $('#timespanBasic-clear').click(function () {
                $('#timespanBasic-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Day/Hour/Minute span demo script
    function timespanDhmInit() {
        $(function () {

            // Mobiscroll Timespan initialization
            $('#timespanDhm-demo').mobiscroll().timespan({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/timespan#!opt-mode
                wheelOrder: 'ddhhii' // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta5/timespan#!opt-wheelOrder
            });

            $('#timespanDhm-show').click(function () {
                $('#timespanDhm-demo').mobiscroll('show');
                return false;
            });

            $('#timespanDhm-clear').click(function () {
                $('#timespanDhm-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Countdown demo script
    function timerCountdownInit() {
        $(function () {

            // Mobiscroll Timer initialization
            $('#timerCountdown-demo').mobiscroll().timer({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/timer#!opt-mode
                targetTime: 10, // More info about targetTime: https://docs.mobiscroll.com/3-0-0_beta5/timer#!opt-targetTime
                maxWheel: 'minutes', // More info about maxWheel: https://docs.mobiscroll.com/3-0-0_beta5/timer#!opt-maxWheel
                minWidth: 100, // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta5/timer#!opt-minWidth
                onFinish: function () { // More info about onFinish: https://docs.mobiscroll.com/3-0-0_beta5/timer#!event-onFinish
                    alert('Countdown finished!');
                }
            });

        });
    }

    // Basic usage demo script
    function colorHxInit() {
        $(function () {

            // Mobiscroll Color initialization
            $('#colorHx-demo').mobiscroll().color({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/color#!opt-mode
                onBeforeShow: function (event, inst) { // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta5/color#!event-onBeforeShow
                    if ($(this).text()) {
                        inst.setVal($(event.target).text());
                    } else {
                        $(this).text('#colorHx-ff0000').css('background-color', 'red');
                    }
                },
                onSet: function (event, inst) { // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta5/color#!event-onSet
                    $(this).text(event.valueText).css('background-color', event.valueText);
                }
            });

        });
    }

    // Basic usage demo script
    function rangeBasicInit() {
        $(function () {

            // Mobiscroll Range initialization
            $('#rangeBasic-demo').mobiscroll().range({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-mode
                defaultValue: [new Date(2014, 3, 10), new Date(2014, 3, 17)] // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-defaultValue
            });

            $('#rangeBasic-show').click(function () {
                $('#rangeBasic-demo').mobiscroll('show');
                return false;
            });

            $('#rangeBasic-clear').click(function () {
                $('#rangeBasic-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Time range demo script
    function rangeTimeInit() {
        $(function () {

            // Mobiscroll Range initialization
            $('#rangeTime-demo').mobiscroll().range({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-mode
                controls: ['time'], // More info about controls: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-controls
                maxWidth: 100 // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-maxWidth
            });

            $('#rangeTime-show').click(function () {
                $('#rangeTime-demo').mobiscroll('show');
                return false;
            });

            $('#rangeTime-clear').click(function () {
                $('#rangeTime-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Two inputs demo script
    function rangeTwoinputsInit() {
        $(function () {

            // Mobiscroll Range initialization
            $('#rangeTwoinputs-demo').mobiscroll().range({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-mode
                startInput: '#rangeTwoinputs-startDate', // More info about startInput: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-startInput
                endInput: '#rangeTwoinputs-endDate' // More info about endInput: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-endInput
            });

        });
    }

    // Events demo script
    function eventcalendarEventInit() {
        $(function () {

            var now = new Date();

            // Mobiscroll Event Calendar initialization
            $('#eventcalendarEvent-demo').mobiscroll().eventcalendar({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                layout: 'liquid', // More info about layout: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-layout
                firstDay: 1, // More info about firstDay: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!localization-firstDay
                yearChange: true, // More info about yearChange: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-yearChange
                calendarScroll: 'horizontal', // More info about calendarScroll: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-calendarScroll
                showOuterDays: true, // More info about showOuterDays: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-showOuterDays
                showEventCount: true, // More info about showEventCount: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-showEventCount
                data: [{ // More info about data: https://docs.mobiscroll.com/3-0-0_beta5/eventcalendar#!opt-data
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 0),
                    text: 'Green box to post office',
                    color: '#6e7f29'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 45),
                    text: 'Quick mtg. with Martin',
                    color: '#de3d83'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 9, 30),
                    text: 'Product team mtg.',
                    color: '#f67944'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 11, 0),
                    text: 'Stakeholder mtg.',
                    color: '#f67944'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 12, 30),
                    text: 'Lunch @ Butcher\'s',
                    color: '#00aabb'
                }, {
                    d: new Date(now.getFullYear(), now.getMonth(), 8, 15, 0),
                    text: 'General orientation',
                    color: '#f67944'
                }, {
                    d: (now.getMonth() + 1) + '/14',
                    text: 'Dexter BD',
                    color: '#37bbe4'
                }, {
                    d: (now.getMonth() + 1) + '/5',
                    text: 'Luke BD',
                    color: '#37bbe4'
                }, {
                    d: 'w3',
                    text: 'Employment (Semi-weekly)',
                    color: '#635045'
                }, {
                    d: 'w5',
                    text: 'Employment (Semi-weekly)',
                    color: '#635045'
                }, {
                    start: new Date(now.getFullYear(), now.getMonth(), 26),
                    end: new Date(now.getFullYear(), now.getMonth(), 31),
                    text: 'Dean OFF',
                    color: '#e7b300'
                }, {
                    start: new Date(now.getFullYear(), (now.getMonth() + 1), 5),
                    end: new Date(now.getFullYear(), (now.getMonth() + 1), 14),
                    text: 'Mike OFF',
                    color: '#e7b300'
                }, {
                    d: '11/2',
                    text: 'File Form 720 for the third quarter',
                    color: '#a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 730 and pay tax on wagers accepted during September',
                    color: '#a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 2290 and pay the tax for vehicles first used during September',
                    color: '#a63e14'
                }, {
                    d: '11/2',
                    text: 'File Form 941 for the third quarter',
                    color: '#a63e14'
                }, {
                    d: '11/2',
                    text: 'Deposit FUTA owed through Sep if more than $500',
                    color: '#a63e14'
                }, {
                    d: '11/30',
                    text: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
                    color: '#a63e14'
                }, {
                    d: '11/30',
                    text: 'File Form 730 and pay tax on wagers accepted during October',
                    color: '#a63e14'
                }, {
                    d: '11/30',
                    text: 'File Form 2290 and pay the tax for vehicles first used during October',
                    color: '#a63e14'
                }]

            });

            $('#eventcalendarEvent-show').click(function () {
                $('#eventcalendarEvent-demo').mobiscroll('show');
                return false;
            });

        });
    }

    // Create, remove, update demo script
    function listviewUpdateInit() {
        $(function () {

            var ids = 6;

            // Mobiscroll Listview initialization
            $('#listviewUpdate-demo').mobiscroll().listview({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                sortable: true, // More info about sortable: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-sortable
                iconSlide: true, // More info about iconSlide: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-iconSlide
                striped: true, // More info about striped: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-striped
                stages: [{ // More info about stages: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-stages
                    percent: 25,
                    color: 'crimson',
                    icon: 'checkmark',
                    text: 'Complete',
                    action: function (event, inst) {
                        $('.md-wo-status', event.target).text('Completed');
                    }
                }, {
                    percent: -50,
                    color: 'red',
                    icon: 'remove',
                    text: 'Delete',
                    confirm: true,
                    action: function (event, inst) {
                        inst.remove(event.target);
                        return false;
                    }
                }, {
                    percent: 50,
                    color: 'green',
                    icon: 'plus',
                    text: 'Spawn',
                    undo: true, // More info about undo: https://docs.mobiscroll.com/3-0-0_beta5/listview#!methods-undo
                    action: function (event, inst) {
                        inst.add(++ids, 'Work order #000' + ids + ' created from WO #000' + $(event.target).attr('data-id') + '<div class="md-wo-status">Assigned</div>', event.index + 1);
                    }
                }, {
                    percent: -25,
                    color: 'olive',
                    icon: 'clock',
                    text: 'Pending',
                    action: function (event, inst) {
                        $('.md-wo-status', event.target).text('Pending');
                    }
                }],
                onItemAdd: function () { // More info about onItemAdd: https://docs.mobiscroll.com/3-0-0_beta5/listview#!event-onItemAdd
                    $('#listviewUpdate-demo_note').hide();
                },
                onItemRemove: function () { // More info about onItemRemove: https://docs.mobiscroll.com/3-0-0_beta5/listview#!event-onItemRemove
                    if ($('li', this).length < 2) {
                        $('#listviewUpdate-demo_note').show();
                    }
                }
            });

            $('#listviewUpdate-demo_note').click(function () {
                window.location.reload();
            });

        });
    }

    // Sort handle demo script
    function listviewSorthandleInit() {
        $(function () {

            // Mobiscroll Listview initialization
            $('#listviewSorthandle-demo').mobiscroll().listview({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                swipe: false, // More info about swipe: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-swipe
                sortable: { // More info about sortable: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-sortable
                    handle: 'right'
                },
                enhance: true // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-enhance
            });

        });
    }

    // Action menu demo script
    function listviewActionmenuInit() {
        $(function () {

            // Mobiscroll Listview initialization
            $('#listviewActionmenu-demo').mobiscroll().listview({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                enhance: true, // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-enhance
                actions: [{ // More info about actions: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-actions
                    icon: 'link',
                    action: function (event, inst) {
                        notify('Linked');
                    }
                }, {
                    icon: 'star3',
                    action: function (event, inst) {
                        notify('Starred');
                    }
                }, {
                    icon: 'remove',
                    undo: true, // More info about undo: https://docs.mobiscroll.com/3-0-0_beta5/listview#!methods-undo
                    action: function (event, inst) {
                        inst.remove(event.target);
                        return false;
                    }
                }, {
                    icon: 'download',
                    action: function (event, inst) {
                        notify('Downloaded');
                    }
                }, ],
                itemGroups: { // More info about itemGroups: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-itemGroups
                    folder: {
                        actions: [{ // More info about actions: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-actions
                            icon: 'link',
                            action: function (event, inst) {
                                notify('Linked');
                            }
                        }, {
                            icon: 'star3',
                            action: function (event, inst) {
                                notify('Starred');
                            }
                        }, {
                            icon: 'download',
                            action: function (event, inst) {
                                notify('Downloaded');
                            }
                        }, ]
                    },
                    music: {
                        actions: [{ // More info about actions: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-actions
                            icon: 'link',
                            action: function (event, inst) {
                                notify('Linked');
                            }
                        }, {
                            icon: 'star3',
                            action: function (event, inst) {
                                notify('Starred');
                            }
                        }, {
                            icon: 'download',
                            action: function (event, inst) {
                                notify('Downloaded');
                            }
                        }, {
                            icon: 'play',
                            action: function (event, inst) {
                                notify('Playing...');
                            }
                        }, {
                            icon: 'remove',
                            undo: true, // More info about undo: https://docs.mobiscroll.com/3-0-0_beta5/listview#!methods-undo
                            action: function (event, inst) {
                                inst.remove(event.target);
                                return false;
                            }
                        }]
                    },
                    movie: {
                        actions: [{ // More info about actions: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-actions
                            icon: 'link',
                            action: function (event, inst) {
                                notify('Linked');
                            }
                        }, {
                            icon: 'star3',
                            action: function (event, inst) {
                                notify('Starred');
                            }
                        }, {
                            icon: 'download',
                            action: function (event, inst) {
                                notify('Downloaded');
                            }
                        }, {
                            icon: 'play',
                            action: function (event, inst) {
                                notify('Playing...');
                            }
                        }, {
                            icon: 'remove',
                            undo: true, // More info about undo: https://docs.mobiscroll.com/3-0-0_beta5/listview#!methods-undo
                            action: function (event, inst) {
                                inst.remove(event.target);
                                return false;
                            }
                        }]
                    },
                    picture: {
                        actions: [{ // More info about actions: https://docs.mobiscroll.com/3-0-0_beta5/listview#!opt-actions
                            icon: 'link',
                            action: function (event, inst) {
                                notify('Linked');
                            }
                        }, {
                            icon: 'star3',
                            action: function (event, inst) {
                                notify('Starred');
                            }
                        }, {
                            icon: 'download',
                            action: function (event, inst) {
                                notify('Downloaded');
                            }
                        }, {
                            icon: 'print',
                            action: function (event, inst) {
                                notify('Printing...');
                            }
                        }, {
                            icon: 'remove',
                            undo: true, // More info about undo: https://docs.mobiscroll.com/3-0-0_beta5/listview#!methods-undo
                            action: function (event, inst) {
                                inst.remove(event.target);
                                return false;
                            }
                        }]
                    }
                }
            });

            var notification = document.createElement('div'),
                notificationTimer;

            notification.innerHTML = '<div class="demo-notification"><div class="demo-notification-i"></div></div>';
            notification = notification.firstChild;
            document.body.appendChild(notification);

            function notify(text) {

                clearTimeout(notificationTimer);

                notification.style.display = 'block';
                notification.firstChild.innerHTML = text;

                if (notification.classList.contains('demo-notification-v')) {
                    notification.classList.remove('demo-notification-v');
                    notificationTimer = setTimeout(function () {
                        notification.classList.add('demo-notification-v');
                    }, 200);
                } else {
                    notification.classList.add('demo-notification-v');
                }

                notificationTimer = setTimeout(function () {
                    notification.classList.remove('demo-notification-v');
                    notificationTimer = setTimeout(function () {
                        notification.style.display = 'none';
                    }, 200);
                }, 2000);
            }

        });
    }

    // Custom Icons demo script
    function ratingIconsInit() {
        $(function () {

            // Mobiscroll Rating initialization
            $('#ratingIcons-demo').mobiscroll().rating({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-mode
                label: 'Rating', // More info about label: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-label
                icon: { // More info about icon: https://docs.mobiscroll.com/3-0-0_beta5/rating#!opt-icon
                    filled: 'heart'
                }
            });

            $('#ratingIcons-show').click(function () {
                $('#ratingIcons-demo').mobiscroll('show');
                return false;
            });

            $('#ratingIcons-clear').click(function () {
                $('#ratingIcons-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Decimal demo script
    function numberDecimalInit() {
        $(function () {

            // Mobiscroll Number initialization
            $('#numberDecimal-demo').mobiscroll().number({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/number#!opt-mode
                maxWidth: 100 // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta5/number#!opt-maxWidth
            });

            $('#numberDecimal-show').click(function () {
                $('#numberDecimal-demo').mobiscroll('show');
                return false;
            });

            $('#numberDecimal-clear').click(function () {
                $('#numberDecimal-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    //  Decimal demo script
    function numpadDecimalInit() {
        $(function () {

            // Mobiscroll Numpad initialization
            $('#numpadDecimal-demo').mobiscroll().numpad({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                min: 1,
                scale: 2,
                preset: 'decimal' // More info about preset: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-preset
            });

            $('#numpadDecimal-show').click(function () {
                $('#numpadDecimal-demo').mobiscroll('show');
                return false;
            });

            $('#numpadDecimal-clear').click(function () {
                $('#numpadDecimal-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Currency demo script
    function numpadCurrencyInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val() // Specify theme like: theme: 'ios' or omit setting to use default
        };

        $(function () {

            var stepperPrice = $('.md-price'),
                numpadCons = $('.md-numpad');

            numpadCons.mobiscroll().numpad({

                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                preset: 'decimal', // More info about preset: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-preset
                anchor: '.md-price', // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-anchor
                min: 10,
                max: 500,
                prefix: '$',
                onSet: function (event, inst) { // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!event-onSet
                    stepperPrice.mobiscroll('setVal', event.valueText);
                }
            }).mobiscroll('setVal', stepperPrice.val());

            numpadCons.mobiscroll('tap', stepperPrice, function () {
                numpadCons.mobiscroll('show');
            });

            stepperPrice.change(function (ev) {
                ev.target.value = '$' + ev.target.value
                numpadCons.mobiscroll('setVal', ev.target.value);
            });

            stepperPrice.val('$' + stepperPrice.val());

        });
    }

    // Time demo script
    function numpadTimeInit() {
        $(function () {

            // Mobiscroll Numpad initialization
            $('#numpadTime-demo').mobiscroll().numpad({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                preset: 'time', // More info about preset: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-preset
                timeFormat: 'HH:ii A'
            });

            $('#numpadTime-show').click(function () {
                $('#numpadTime-demo').mobiscroll('show');
                return false;
            });

            $('#numpadTime-clear').click(function () {
                $('#numpadTime-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Masked Entry - PIN demo script
    function numpadPinInit() {
        $(function () {

            // Mobiscroll Numpad initialization
            $('#numpadPin-demo').mobiscroll().numpad({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                template: 'dddd', // More info about template: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-template
                allowLeadingZero: true, // More info about allowLeadingZero: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-allowLeadingZero
                placeholder: '-', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-placeholder
                mask: '*', // More info about mask: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!opt-mask
                validate: function (event, inst) { // More info about validate: https://docs.mobiscroll.com/3-0-0_beta5/numpad#!event-validate
                    return {
                        invalid: event.values.length != 4
                    };
                }
            });

            $('#numpadPin-show').click(function () {
                $('#numpadPin-demo').mobiscroll('show');
                return false;
            });

            $('#numpadPin-clear').click(function () {
                $('#numpadPin-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Setting min and max values demo script
    function datetimeMinmaxInit() {
        $(function () {

            // Mobiscroll Date & Time initialization
            $('#datetimeMinmax-demo').mobiscroll().date({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-mode
                min: new Date(2014, 8, 15), // More info about min: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-min
                max: new Date(2024, 8, 14) // More info about max: https://docs.mobiscroll.com/3-0-0_beta5/datetime#!opt-max
            });

            $('#datetimeMinmax-show').click(function () {
                $('#datetimeMinmax-demo').mobiscroll('show');
                return false;
            });

            $('#datetimeMinmax-clear').click(function () {
                $('#datetimeMinmax-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Tab menu demo script
    function menustripTabsInit() {
        $(function () {

            // Mobiscroll Menustrip initialization
            $('#menustripTabs-demo').mobiscroll().menustrip({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                type: 'tabs', // More info about type: https://docs.mobiscroll.com/3-0-0_beta5/menustrip#!opt-type
                onItemTap: function (event, inst) { // More info about onItemTap: https://docs.mobiscroll.com/3-0-0_beta5/menustrip#!event-onItemTap
                    $('.md-tab-h').removeClass('md-tabs-sel');
                    $('.' + $(event.target).data('tab')).addClass('md-tabs-sel');
                }
            });

            // Mobiscroll Menustrip initialization
            $('.md-apps-ul').mobiscroll().listview({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default

                swipe: false,

            });

        });
    }

    // Icon and Text demo script
    function imageIconsInit() {
        $(function () {

            // Mobiscroll Image initialization
            $('#imageIcons-demo').mobiscroll().image({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-mode
                placeholder: 'Please Select ...', // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-placeholder
                showLabel: false, // More info about showLabel: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-showLabel
                enhance: true // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta5/image#!opt-enhance
            });

            $('#imageIcons-show').click(function () {
                $('#imageIcons-demo').mobiscroll('show');
                return false;
            });

            $('#imageIcons-clear').click(function () {
                $('#imageIcons-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Step demo script
    function numberStepInit() {
        $(function () {

            // Mobiscroll Number initialization
            $('#numberStep-demo').mobiscroll().number({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/number#!opt-mode
                layout: 'fixed', // More info about layout: https://docs.mobiscroll.com/3-0-0_beta5/number#!opt-layout
                step: 5 // More info about step: https://docs.mobiscroll.com/3-0-0_beta5/number#!opt-step
            });

            $('#numberStep-show').click(function () {
                $('#numberStep-demo').mobiscroll('show');
                return false;
            });

            $('#numberStep-clear').click(function () {
                $('#numberStep-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Dialog demo script
    function widgetDialogInit() {

        $(function () {

            // Mobiscroll Widget initialization
            $('#widgetDialog-demo').mobiscroll().widget({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                anchor: $('#widgetDialog-show'), // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta5/widget#!opt-anchor
                buttons: [{ // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta5/widget#!opt-buttons
                    text: 'Great',
                    handler: 'set'
                }, {
                    text: 'I’ve been better',
                    handler: 'cancel'
                }],
                onBeforeShow: function (event, inst) { // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta5/widget#!event-onBeforeShow
                    var s = inst.settings;

                    if (s.theme == 'wp' || s.baseTheme == 'wp') {
                        s.buttons[0].icon = 'checkmark';
                        s.buttons[1].icon = 'close';
                    }
                }
            });

            $('#widgetDialog-show').click(function () {
                $('#widgetDialog-demo').mobiscroll('show');
                return false;
            });

        });
    }

    // Alert message demo script
    function widgetMessageInit() {
        $(function () {

            // Mobiscroll Widget initialization
            $('#widgetMessage-demo').mobiscroll().widget({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(),
                anchor: $('#widgetMessage-show'), // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta5/widget#!opt-anchor
                buttons: [{ // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta5/widget#!opt-buttons
                    text: 'Agree',
                    handler: 'set'
                }, {
                    text: 'Disagree',
                    handler: 'cancel'
                }],
                onBeforeShow: function (event, inst) { // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta5/widget#!event-onBeforeShow
                    var s = inst.settings;

                    if (s.theme == 'wp' || s.baseTheme == 'wp') {
                        s.buttons[0].icon = 'checkmark';
                        s.buttons[1].icon = 'close';
                    }
                }
            });

            $('#widgetMessage-show').click(function () {
                $('#widgetMessage-demo').mobiscroll('show');
                return false;
            });

        });
    }

    // Custom Units demo script
    function scrollerCustomunitsInit() {
        $(function () {

            var units = ['oz', 'g', 'serving'],
                prevUnit = 'oz',
                wheel = [
                    [{
                        circular: false, // More info about circular: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-circular
                        data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
                    }, {
                        circular: false, // More info about circular: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-circular
                        data: ['-', '1/4', '1/2', '3/4']
                    }, {
                        circular: false, // More info about circular: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-circular
                        data: units
                    }]
                ];

            // Mobiscroll Scroller initialization
            $('#scrollerCustomunits-demo').mobiscroll().scroller({
                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
                display: $('#display').val(), // Specify display mode like: display: 'bottom' or omit setting to use default
                mode: $('#mode').val(), // More info about mode: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-mode
                wheels: wheel, // More info about wheels: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-wheels
                validate: function (event, inst) { // More info about validate: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!event-validate
                    var i,
                        mult = 1,
                        index = event.index,
                        currUnit = event.values[2],
                        disabled = [];

                    if (currUnit == 'g' && (prevUnit == 'oz' || prevUnit == 'serving')) {
                        mult = 28;
                    } else if ((currUnit != 'oz' || currUnit != 'serving') && prevUnit == 'g') {
                        mult = 1 / 28;
                    }

                    if (currUnit != 'serving') {
                        disabled.push('1/4', '1/2', '3/4');
                    }

                    if (index == 2 && currUnit != prevUnit) {
                        for (i = 0; i < wheel[0][0].data.length; ++i) {
                            wheel[0][0].data[i] = Math.round(wheel[0][0].data[i] * mult);
                        }

                        inst.settings.wheels = wheel;
                        inst._tempWheelArray[0] = inst._tempWheelArray[0] * mult;
                        inst.changeWheel({
                            0: wheel[0][0]
                        });

                        prevUnit = currUnit;
                    }

                    return {
                        disabled: [ // More info about disabled: https://docs.mobiscroll.com/3-0-0_beta5/scroller#!opt-disabled
                            [], disabled, []
                        ]
                    }
                },
                parseValue: function (val) {
                    var hasUnit;

                    if (val) {
                        val = val.toString().split(' ');
                        hasUnit = units.indexOf(val[1]) !== -1;
                        return [val[0], (hasUnit ? '' : val[1].replace('-', '')), (hasUnit ? val[1] : val[2])];
                    }

                    return [0, '-', 'oz'];
                },
                formatValue: function (data) {
                    return (data[2] == 'serving' && data[0] == 0 && data[1] ? '' : data[0]) + (data[1] ? ' ' + data[1].replace('-', '') : '') + ' ' + data[2];
                }
            });

            $('#scrollerCustomunits-show').click(function () {
                $('#scrollerCustomunits-demo').mobiscroll('show');
                return false;
            });

            $('#scrollerCustomunits-clear').click(function () {
                $('#scrollerCustomunits-demo').mobiscroll('clear');
                return false;
            });

        });
    }

    // Text Fields demo script
    function formsTextfieldsInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Select demo script
    function formsSelectInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Checkbox demo script
    function formsCheckboxInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
            display: $('#display').val(),
            mode: $('#mode').val()
        };

    }

    // Switch demo script
    function formsSwitchInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val(), // Specify language like: lang: 'pl' or omit setting to use default
            display: $('#display').val(),
            mode: $('#mode').val()
        };

    }

    // Radio buttons demo script
    function formsRadiobtnInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Buttons demo script
    function formsButtonsInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Typography demo script
    function formsTypographyInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Slider demo script
    function formsSliderInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }

    // Stepper demo script
    function formsStepperInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

        $(function () {

            var cbAllow = $('.md-allow'),
                stepperLuggage = $('.md-luggage'),
                stepperCons = $('.md-consumption'),
                numpadCons = $('.md-numpad');

            cbAllow.change(function () {
                stepperLuggage.prop('disabled', !this.checked);
            });

            numpadCons.mobiscroll().numpad({

                theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
                preset: 'decimal',
                min: 5,
                max: 120,
                onSet: function (event, inst) {
                    stepperCons.mobiscroll('setVal', event.valueText);
                }
            }).mobiscroll('setVal', stepperCons.val());

            numpadCons.mobiscroll('tap', stepperCons, function () {
                numpadCons.mobiscroll('show');
            });

            stepperCons.change(function () {
                numpadCons.mobiscroll('setVal', stepperCons.val());
            });

        });
    }

    // Progress demo script
    function formsProgressInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

        $(function () {

            var downloadInst = $('#formsProgress-download').mobiscroll('getInst'),
                interval,
                i;

            function startDownload() {
                i = 0;
                clearInterval(interval);

                interval = setInterval(function () {
                    if (i == 100) {
                        clearInterval(interval);
                    }
                    downloadInst.setVal(i += 5);
                }, 600);
            }

            $('.md-restart').click(function () {
                startDownload();
            });

            startDownload();

            var inst = $('#formsProgress-progress').mobiscroll('getInst'),
                val;

            $('.md-update').click(function () {
                if (inst.getVal() >= 100) {
                    inst.setVal(0);
                } else {
                    inst.setVal(inst.getVal() + 25);
                }
            });

            var upInterval,
                uploadList = ['1MB', '5MB', '10MB', '50MB'],
                uploadInst = $('#formsProgress-uploadProg').mobiscroll('getInst');

            function restartUpload() {
                uploadInst.setVal(0);
                clearInterval(upInterval);

                upInterval = setInterval(function () {
                    if (uploadInst.getVal() >= 100) {
                        clearInterval(upInterval);
                    }

                    uploadInst.setVal(uploadInst.getVal() + 17);
                }, 1000);
            }

            $('.md-upload .mbsc-progress-step-label').each(function (i, v) {
                $(v).text(uploadList[i]);
            });

            $('.md-restart-up').click(function () {
                restartUpload();
            });

            restartUpload();

            var labelList = ['Cart', 'Signup', 'Checkout', 'Success'],
                cartInst = $('#formsProgress-cartProg').mobiscroll('getInst');

            $('.md-demo .mbsc-progress-step-label').each(function (i, v) {
                $(v).text(labelList[i]);
            });

            $('.md-next-step').click(function () {
                if (cartInst.getVal() >= 100) {
                    cartInst.setVal(0);
                } else {
                    cartInst.setVal(cartInst.getVal() + 33.34);
                }
            });

        });
    }

    // Segmented demo script
    function formsSegmentedInit() {
        // Use the settings object to change the theme
        mobiscroll.settings = {
            theme: $('#theme').val(), // Specify theme like: theme: 'ios' or omit setting to use default
            lang: $('#language').val() // Specify language like: lang: 'pl' or omit setting to use default
        };

    }
    </script>
</head>

<body>
    <!-- ------------------------------------------------------------------ -->
    <!-- Demo configurator markup START, ignore this in your implementation -->
    <div class="header">
        <h1>Mobiscroll</h1>
    </div>
    <div id="main" class="demo-main">
        <div>
            <label for="theme">Theme</label>
            <select name="theme" id="theme" class="settings">
                <option value="">Default / Auto</option>
                <option value="mobiscroll">Mobiscroll</option>
                <option value="android-holo">Android Holo</option>
                <option value="wp">Windows Phone</option>
                <option value="ios">iOS</option>
                <option value="bootstrap">Bootstrap</option>
                <option value="android-holo-light">Android Holo Light</option>
                <option value="wp-light">Windows Phone Light</option>
                <option value="mobiscroll-dark">Mobiscroll Dark</option>
                <option value="material">Material</option>
                <option value="material-dark">Material Dark</option>
                <option value="ios-dark">iOS Dark</option>
            </select>
        </div>
        <div>
            <label for="display">Display</label>
            <select name="display" id="display" class="settings">
                <option value="center">Center</option>
                <option value="inline">Inline</option>
                <option value="bubble">Bubble</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </select>
        </div>
        <div>
            <label for="language">Language</label>
            <select name="language" id="language" class="settings">
                <option value="">English</option>
                <option value="hu">Magyar</option>
                <option value="de">Deutsch</option>
                <option value="es">Español</option>
                <option value="fr">Français</option>
                <option value="it">Italiano</option>
                <option value="no">Norsk</option>
                <option value="pt-BR">Pt. Brasileiro</option>
                <option value="zh">Chinese</option>
                <option value="nl">Nederlands</option>
                <option value="tr">Türkçe</option>
                <option value="ja">Japanese</option>
                <option value="pt-PT">Português Europeu</option>
                <option value="sv">Svenska</option>
                <option value="en-UK">English (UK)</option>
                <option value="cs">Čeština</option>
                <option value="sk">Slovenčina</option>
                <option value="ro">Română</option>
                <option value="pl">Polski</option>
                <option value="ru-UA">Русский (UA)</option>
                <option value="fa">فارسی</option>
                <option value="ru">Русский</option>
                <option value="lt">Lietuvių</option>
                <option value="ca">Català</option>
                <option value="da">Dansk</option>
                <option value="he">עברית</option>
            </select>
        </div>
        <div>
            <label for="demo">Demo</label>
            <select name="demo" id="demo" class="settings">
                <optgroup label="Datetime">
                    <option value="datetimeDate" selected>Basic usage date</option>
                    <option value="datetimeInvalid">Datetime with invalids</option>
                    <option value="datetimeTime">Basic usage time</option>
                    <option value="datetimeMinmax">Setting min and max values</option>
                </optgroup>
                <optgroup label="Select">
                    <option value="selectBasic">Basic usage</option>
                    <option value="selectGroupselect">Group options</option>
                    <option value="selectMultiple">Multiple select</option>
                </optgroup>
                <optgroup label="Rating">
                    <option value="ratingStars">Basic usage</option>
                    <option value="ratingGrades">Grades</option>
                    <option value="ratingIcons">Custom Icons</option>
                </optgroup>
                <optgroup label="Measurement">
                    <option value="measurementDistance">Distance</option>
                    <option value="measurementSpeed">Speed</option>
                    <option value="measurementTemperature">Temperature</option>
                    <option value="measurementMass">Mass</option>
                    <option value="measurementForce">Force</option>
                </optgroup>
                <optgroup label="List">
                    <option value="listTreelist">Basic usage</option>
                    <option value="listUnordered">Unordered list</option>
                </optgroup>
                <optgroup label="Image">
                    <option value="imageText">Image and Text</option>
                    <option value="imageBasic">Image Only</option>
                    <option value="imageIcons">Icon and Text</option>
                </optgroup>
                <optgroup label="Calendar">
                    <option value="calendarTime">With time scroller</option>
                    <option value="calendarBasic">Basic usage</option>
                    <option value="calendarMultiday">Multi day select</option>
                </optgroup>
                <optgroup label="Timespan">
                    <option value="timespanBasic">Basic usage</option>
                    <option value="timespanDhm">Day/Hour/Minute span</option>
                </optgroup>
                <optgroup label="Timer">
                    <option value="timerCountdown">Countdown</option>
                </optgroup>
                <optgroup label="Color">
                    <option value="colorHx">Basic usage</option>
                </optgroup>
                <optgroup label="Range">
                    <option value="rangeBasic">Basic usage</option>
                    <option value="rangeTime">Time range</option>
                    <option value="rangeTwoinputs">Two inputs</option>
                </optgroup>
                <optgroup label="Eventcalendar">
                    <option value="eventcalendarEvent">Events</option>
                </optgroup>
                <optgroup label="Listview">
                    <option value="listviewUpdate">Create, remove, update</option>
                    <option value="listviewSorthandle">Sort handle</option>
                    <option value="listviewActionmenu">Action menu</option>
                </optgroup>
                <optgroup label="Number">
                    <option value="numberDecimal">Decimal</option>
                    <option value="numberStep">Step</option>
                </optgroup>
                <optgroup label="Numpad">
                    <option value="numpadDecimal"> Decimal</option>
                    <option value="numpadCurrency">Currency</option>
                    <option value="numpadTime">Time</option>
                    <option value="numpadPin">Masked Entry - PIN</option>
                </optgroup>
                <optgroup label="Menustrip">
                    <option value="menustripTabs">Tab menu</option>
                </optgroup>
                <optgroup label="Widget">
                    <option value="widgetDialog">Dialog</option>
                    <option value="widgetMessage">Alert message</option>
                </optgroup>
                <optgroup label="Scroller">
                    <option value="scrollerCustomunits">Custom Units</option>
                </optgroup>
                <optgroup label="Forms">
                    <option value="formsTextfields">Text Fields</option>
                    <option value="formsSelect">Select</option>
                    <option value="formsCheckbox">Checkbox</option>
                    <option value="formsSwitch">Switch</option>
                    <option value="formsRadiobtn">Radio buttons</option>
                    <option value="formsButtons">Buttons</option>
                    <option value="formsTypography">Typography</option>
                    <option value="formsSlider">Slider</option>
                    <option value="formsStepper">Stepper</option>
                    <option value="formsProgress">Progress</option>
                    <option value="formsSegmented">Segmented</option>
                </optgroup>
            </select>
        </div>
    </div>
    <!-- Demo configurator markup END -->
    <!-- ------------------------------------------------------------------ -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage date START -->
    <div class="demo-wrapper demo-wrapper-datetimeDate">
        <input id="datetimeDate-demo" placeholder="Please Select..." />

        <button id="datetimeDate-clear">Clear</button>
        <button id="datetimeDate-show">Show</button>

    </div>
    <!-- Basic usage date END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Datetime with invalids START -->
    <div class="demo-wrapper demo-wrapper-datetimeInvalid">
        <input id="datetimeInvalid-demo" placeholder="Please Select..." />

        <button id="datetimeInvalid-clear">Clear</button>
        <button id="datetimeInvalid-show">
            Show</button>

    </div>
    <!-- Datetime with invalids END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage time START -->
    <div class="demo-wrapper demo-wrapper-datetimeTime">
        <input id="datetimeTime-demo" placeholder="Please Select..." />

        <button id="datetimeTime-clear">Clear</button>
        <button id="datetimeTime-show">Show</button>

    </div>
    <!-- Basic usage time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-selectBasic">
        <select name="City" id="selectBasic-demo">
            <option value="1">Atlanta</option>
            <option value="2">Berlin</option>
            <option value="3">Boston</option>
            <option value="4">Chicago</option>
            <option value="5">London</option>
            <option value="6">Los Angeles</option>
            <option value="7">New York</option>
            <option value="8">Paris</option>
            <option value="9">San Francisco</option>
        </select>

        <button id="selectBasic-clear">Clear</button>
        <button id="selectBasic-show">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Group options START -->
    <div class="demo-wrapper demo-wrapper-selectGroupselect">
        <select id="selectGroupselect-demo">
            <optgroup label="USA">
                <option value="1">Atlanta</option>
                <option value="2">Boston</option>
                <option value="3">Chicago</option>
                <option value="4">Los Angeles</option>
                <option value="5">New York</option>
                <option value="6">San Francisco</option>
            </optgroup>
            <optgroup label="UK">
                <option value="7">Bath</option>
                <option value="8">Bristol</option>
                <option value="9">Cambridge</option>
                <option value="10">London</option>
                <option value="11">Leeds</option>
                <option value="12">Manchester</option>
                <option value="13">Newcastle</option>
                <option value="14">Oxford</option>
            </optgroup>
            <optgroup label="China">
                <option value="15">Beijing</option>
                <option value="16">Chongqing</option>
                <option value="17">Shanghai</option>
                <option value="18">Shenzhen</option>
                <option value="19">Tianjin</option>
            </optgroup>
        </select>

        <button id="selectGroupselect-clear">Clear</button>
        <button id="selectGroupselect-show">Show</button>

    </div>
    <!-- Group options END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-ratingStars">
        <div class="md-stars">
            <ul class="md-products">
                <li>
                    <div class="md-product">
                        
                        <h3>Chocolate sticks</h3>
                        <p>Crunchy on the inside</p>
                        <span class="md-rate">
                        <span class="md-rating">4 of 5</span>
                        </span>
                    </div>
                </li>
                <li>
                    <div class="md-product">
                        
                        <h3>Hershey's Kisses</h3>
                        <p>Bite-sized piece of heaven</p>
                        <span class="md-rate">
                        <span class="md-rating">4 of 5</span>
                        </span>
                    </div>
                </li>
                <li>
                    <div class="md-product">
                        
                        <h3>Milk chocolate</h3>
                        <p>The all-time favorite</p>
                        <span class="md-rate">
                        <span class="md-rating">3 of 5</span>
                        </span>
                    </div>
                </li>
                <li>
                    <div class="md-product">
              
                        <h3>Chocolate cupcake</h3>
                        <p>Sweet temptation with chocolate chips</p>
                        <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                        </span>
                    </div>
                </li>
                <li>
                    <div class="md-product">
                       
                        <h3>Aerated chocolate</h3>
                        <p>Light as air</p>
                        <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                        </span>
                    </div>
                </li>
                <li>
                    <div class="md-product">
                  
                        <h3>Chocolate truffles</h3>
                        <p>Chocolate ganache and heavenly cocoa</p>
                        <span class="md-rate">
                        <span class="md-rating">5 of 5</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Grades START -->
    <div class="demo-wrapper demo-wrapper-ratingGrades">
        <input id="ratingGrades-demo" placeholder="Please Select ..." />

        <button id="ratingGrades-clear">Clear</button>
        <button id="ratingGrades-show">Show</button>

    </div>
    <!-- Grades END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Distance START -->
    <div class="demo-wrapper demo-wrapper-measurementDistance">
        <input id="measurementDistance-demo" placeholder="Please Select ..." />

        <button id="measurementDistance-clear">Clear</button>
        <button id="measurementDistance-show">Show</button>

    </div>
    <!-- Distance END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Speed START -->
    <div class="demo-wrapper demo-wrapper-measurementSpeed">
        <input id="measurementSpeed-demo" placeholder="Please Select ..." />

        <button id="measurementSpeed-clear">Clear</button>
        <button id="measurementSpeed-show">Show</button>

    </div>
    <!-- Speed END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Temperature START -->
    <div class="demo-wrapper demo-wrapper-measurementTemperature">
        <input id="measurementTemperature-demo" placeholder="Please Select ..." />

        <button id="measurementTemperature-clear">Clear</button>
        <button id="measurementTemperature-show">Show</button>

    </div>
    <!-- Temperature END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Mass START -->
    <div class="demo-wrapper demo-wrapper-measurementMass">
        <input id="measurementMass-demo" placeholder="Please Select ..." />

        <button id="measurementMass-clear">Clear</button>
        <button id="measurementMass-show">Show</button>

    </div>
    <!-- Mass END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Force START -->
    <div class="demo-wrapper demo-wrapper-measurementForce">
        <input id="measurementForce-demo" placeholder="Please Select ..." />

        <button id="measurementForce-clear">Clear</button>
        <button id="measurementForce-show">Show</button>

    </div>
    <!-- Force END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-listTreelist">
        <ul id="listTreelist-demo" style="display:none">
            <li data-val="Eastern Division">East
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Eden E">Eden E</li>
                            <li data-val="Milda J">Milda J</li>
                            <li data-val="Porfirio R">Porfirio R</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Frances P">Frances P</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Gianny P">Gianny P</li>
                            <li data-val="Ivan F">Ivan F</li>
                            <li data-val="John M">John M</li>
                            <li data-val="Mildred S">Mildred S</li>
                            <li data-val="Sam P">Sam P</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Edelmira R">Edelmira R</li>
                            <li data-val="Francie S">Francie S</li>
                            <li data-val="Lean F">Lean F</li>
                            <li data-val="Kirby C">Kirby C</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li data-val="Western Division">West
                <ul>
                    <li data-val="Marketing">Marketing
                        <ul>
                            <li data-val="Cliff B">Cliff B</li>
                            <li data-val="Helen D">Helen D</li>
                            <li data-val="Stephan V">Stephan V</li>
                        </ul>
                    </li>
                    <li data-val="Research & Development">R&D
                        <ul>
                            <li data-val="Andy G">Andy G</li>
                            <li data-val="Danny A">Danny A</li>
                            <li data-val="Ennio M">Ennio M</li>
                            <li data-val="Emil E">Emil E</li>
                            <li data-val="Frank S">Frank S</li>
                            <li data-val="Gonzo G">Gonzo G</li>
                            <li data-val="Hal A">Hal A</li>
                            <li data-val="Jack G">Jack G</li>
                            <li data-val="John A">John A</li>
                            <li data-val="Simon D">Simon D</li>
                            <li data-val="Victor S">Victor S</li>
                        </ul>
                    </li>
                    <li data-val="Sales">Sales
                        <ul>
                            <li data-val="Dana A">Dana A</li>
                            <li data-val="Frank D">Frank D</li>
                            <li data-val="Leanna S">Leanna S</li>
                            <li data-val="Michael D">Michael D</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <button id="listTreelist-clear">Clear</button>
        <button id="listTreelist-show">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image and Text START -->
    <div class="demo-wrapper demo-wrapper-imageText">
        <ul id="imageText-demo" style="display:none">
            <li data-val="Audi">
                <img src="images/Audi_logo.png" />
                <p>Audi</p>
            </li>
            <li data-val="BMW">
                <img src="images/BMW_logo.png" />
                <p>BMW</p>
            </li>
            <li data-val="Chevrolet">
                <img src="images/Chevrolet_logo.png" />
                <p>Chevrolet</p>
            </li>
            <li data-val="Citroen">
                <img src="images/Citroen_logo.png" />
                <p>Citroen</p>
            </li>
            <li data-val="Dacia">
                <img src="images/Dacia_logo.png" />
                <p>Dacia</p>
            </li>
            <li data-val="Ferrari">
                <img src="images/ferrari_logo.png" />
                <p>Ferrari</p>
            </li>
            <li data-val="Ford">
                <img src="images/Ford_logo.png" />
                <p>Ford</p>
            </li>
            <li data-val="Jaguar">
                <img src="images/Jaguar_logo.png" />
                <p>Jaguar</p>
            </li>
            <li data-val="Lotus">
                <img src="images/lotus_logo.png" />
                <p>Lotus</p>
            </li>
            <li data-val="Mercedes">
                <img src="images/mercedes_logo.png" />
                <p>Mercedes</p>
            </li>
            <li data-val="Opel">
                <img src="images/opel_logo.png" />
                <p>Opel</p>
            </li>
            <li data-val="Porsche">
                <img src="images/Porsche_logo.png" />
                <p>Porsche</p>
            </li>
            <li data-val="Renault">
                <img src="images/renault_logo.png" />
                <p>Renault</p>
            </li>
            <li data-val="Seat">
                <img src="images/Seat_logo.png" />
                <p>Seat</p>
            </li>
            <li data-val="Volkswagen">
                <img src="images/volkswagen_logo.png" />
                <p>Volkswagen</p>
            </li>
        </ul>

        <button id="imageText-clear">Clear</button>
        <button id="imageText-show">Show</button>

    </div>
    <!-- Image and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Image Only START -->
    <div class="demo-wrapper demo-wrapper-imageBasic">
        <ul id="imageBasic-demo" style="display:none">
            <li data-val="1">
                <img src="images/fruit-1.png" />
            </li>
            <li data-val="2">
                <img src="images/fruit-2.png" />
            </li>
            <li data-val="3">
                <img src="images/fruit-3.png" />
            </li>
            <li data-val="4">
                <img src="images/fruit-4.png" />
            </li>
            <li data-val="5">
                <img src="images/fruit-5.png" />
            </li>
            <li data-val="6">
                <img src="images/fruit-1.png" />
            </li>
            <li data-val="7">
                <img src="images/fruit-2.png" />
            </li>
            <li data-val="8">
                <img src="images/fruit-3.png" />
            </li>
            <li data-val="9">
                <img src="images/fruit-4.png" />
            </li>
            <li data-val="10">
                <img src="images/fruit-5.png" />
            </li>
            <li data-val="11">
                <img src="images/fruit-1.png" />
            </li>
            <li data-val="12">
                <img src="images/fruit-2.png" />
            </li>
            <li data-val="13">
                <img src="images/fruit-3.png" />
            </li>
            <li data-val="14">
                <img src="images/fruit-4.png" />
            </li>
            <li data-val="15">
                <img src="images/fruit-5.png" />
            </li>
            <li data-val="16">
                <img src="images/fruit-1.png" />
            </li>
            <li data-val="17">
                <img src="images/fruit-2.png" />
            </li>
            <li data-val="18">
                <img src="images/fruit-3.png" />
            </li>
            <li data-val="19">
                <img src="images/fruit-4.png" />
            </li>
            <li data-val="20">
                <img src="images/fruit-5.png" />
            </li>
        </ul>

        <button id="imageBasic-clear">Clear</button>
        <button id="imageBasic-show">Show</button>

    </div>
    <!-- Image Only END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Unordered list START -->
    <div class="demo-wrapper demo-wrapper-listUnordered">
        <ul id="listUnordered-demo" style="display:none">
            <li>Sugar</li>
            <li>Salt</li>
            <li>Butter</li>
            <li>Flour</li>
            <li>Chocolate</li>
        </ul>

        <button id="listUnordered-clear">Clear</button>
        <button id="listUnordered-show">Show</button>

    </div>
    <!-- Unordered list END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- With time scroller START -->
    <div class="demo-wrapper demo-wrapper-calendarTime">

        <input id="calendarTime-demo" placeholder="Please Select..." />

        <button id="calendarTime-clear">Clear</button>
        <button id="calendarTime-show">Show</button>

    </div>
    <!-- With time scroller END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-calendarBasic">

        <input id="calendarBasic-demo" placeholder="Please Select..." />

        <button id="calendarBasic-clear">Clear</button>
        <button id="calendarBasic-show">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multi day select START -->
    <div class="demo-wrapper demo-wrapper-calendarMultiday">

        <input id="calendarMultiday-demo" placeholder="Please Select..." />

        <button id="calendarMultiday-clear">Clear</button>
        <button id="calendarMultiday-show">Show</button>

    </div>
    <!-- Multi day select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Multiple select START -->
    <div class="demo-wrapper demo-wrapper-selectMultiple">
        <select name="Category" id="selectMultiple-demo" multiple>
            <option value="1">Books</option>
            <option value="2">Movies, Music & Games</option>
            <option value="3" selected>Electronics & Computers</option>
            <option value="4" selected>Home, Garden & Tools</option>
            <option value="5">Health & Beauty</option>
            <option value="6">Toys, Kids & Baby</option>
            <option value="7">Clothing & Jewelry</option>
            <option value="8">Sports & Outdoors</option>
            <option value="9">Automotive & Industrial</option>
        </select>

        <button id="selectMultiple-clear">Clear</button>
        <button id="selectMultiple-show">Show</button>

    </div>
    <!-- Multiple select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-timespanBasic">
        <input id="timespanBasic-demo" placeholder="Please Select ..." />

        <button id="timespanBasic-clear">Clear</button>
        <button id="timespanBasic-show">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Day/Hour/Minute span START -->
    <div class="demo-wrapper demo-wrapper-timespanDhm">
        <input id="timespanDhm-demo" placeholder="Please Select ..." />

        <button id="timespanDhm-clear">Clear</button>
        <button id="timespanDhm-show">Show</button>

    </div>
    <!-- Day/Hour/Minute span END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Countdown START -->
    <div class="demo-wrapper demo-wrapper-timerCountdown">
        <input id="timerCountdown-demo" placeholder="Please Select ..." />
    </div>
    <!-- Countdown END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-colorHx">
        <b>Please choose color</b>
        <br/>
        <div id="colorHx-demo" class="md-color">#ff0000</div>
    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Basic usage START -->
    <div class="demo-wrapper demo-wrapper-rangeBasic">

        <input id="rangeBasic-demo" placeholder="Please Select ..." />

        <button id="rangeBasic-clear">Clear</button>
        <button id="rangeBasic-show">Show</button>

    </div>
    <!-- Basic usage END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time range START -->
    <div class="demo-wrapper demo-wrapper-rangeTime">
        <input id="rangeTime-demo" placeholder="Please Select ..." />

        <button id="rangeTime-clear">Clear</button>
        <button id="rangeTime-show">Show</button>

    </div>
    <!-- Time range END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Two inputs START -->
    <div class="demo-wrapper demo-wrapper-rangeTwoinputs">

        <label for="rangeTwoinputs-startDate">Start</label>
        <br/>
        <input id="rangeTwoinputs-startDate" placeholder="Please Select ..." readonly/>

        <label for="rangeTwoinputs-endDate">End</label>
        <br/>
        <input id="rangeTwoinputs-endDate" placeholder="Please Select ..." readonly/>

        <div id="rangeTwoinputs-demo"></div>
    </div>
    <!-- Two inputs END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Events START -->
    <div class="demo-wrapper demo-wrapper-eventcalendarEvent">

        <div id="eventcalendarEvent-demo"></div>

        <button id="eventcalendarEvent-show">Show calendar</button>

    </div>
    <!-- Events END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Create, remove, update START -->
    <div class="demo-wrapper demo-wrapper-listviewUpdate">

        <div id="listviewUpdate-demo_note" class="md-demo-note demo-note" style="display:none;">
            Whooa, list is empty. Tap here to refresh! &nbsp;
            <span class="mbsc-ic mbsc-ic-loop2"></span>
        </div>

        <ul id="listviewUpdate-demo" class="md-wo-list" style="display:none">
            <li data-id="1">Work order #0001
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="2">Work order #0002
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="3">Work order #0003
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="4">Work order #0004
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="5">Work order #0005
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="6">Work order #0006
                <div class="md-wo-status">Assigned</div>
            </li>
        </ul>
    </div>
    <!-- Create, remove, update END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Sort handle START -->
    <div class="demo-wrapper demo-wrapper-listviewSorthandle">

        <ul id="listviewSorthandle-demo" style="display:none">
            <li><img src="images/m1.png" />
                <h3>Barry Lyon</h3>
                <p>(202) 555-0193</p>
            </li>
            <li><img src="images/f1.png" />
                <h3>Hortense Tinker</h3>
                <p>(202) 555-0127</p>
            </li>
            <li><img src="images/m2.png" />
                <h3>Carl Hambledon</h3>
                <p>(202) 555-0147</p>
            </li>
            <li><img src="images/f2.png" />
                <h3>Arlene Sharman</h3>
                <p>(202) 555-0190</p>
            </li>
            <li><img src="images/m3.png" />
                <h3>Noble Blythe</h3>
                <p>(202) 555-0176</p>
            </li>
            <li><img src="images/f3.png" />
                <h3>Angelica Geary</h3>
                <p>(202) 555-0107</p>
            </li>
            <li><img src="images/m4.png" />
                <h3>Lowell Christophers</h3>
                <p>(202) 555-0120</p>
            </li>
            <li><img src="images/f4.png" />
                <h3>Leilah Gregory</h3>
                <p>(202) 555-0189</p>
            </li>
        </ul>
    </div>
    <!-- Sort handle END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Action menu START -->
    <div class="demo-wrapper demo-wrapper-listviewActionmenu">
        <ul id="listviewActionmenu-demo" style="display:none">
            <li data-type="folder" data-icon="folder">Music
                <ul>
                    <li data-type="music" data-icon="music">Track 1</li>
                    <li data-type="music" data-icon="music">Track 2</li>
                    <li data-type="music" data-icon="music">Track 3</li>
                </ul>
            </li>
            <li data-type="folder" data-icon="folder">Photos
                <ul>
                    <li data-type="picture" data-icon="image2">Image 1</li>
                    <li data-type="picture" data-icon="image2">Image 2</li>
                    <li data-type="picture" data-icon="image2">Image 3</li>
                </ul>
            </li>
            <li data-type="folder" data-icon="folder">Videos
                <ul>
                    <li data-type="movie" data-icon="play">Movie 1</li>
                    <li data-type="movie" data-icon="play">Movie 2</li>
                    <li data-type="movie" data-icon="play">Movie 3</li>
                </ul>
            </li>
            <li data-type="picture" data-icon="image2">Image 1</li>
            <li data-type="picture" data-icon="image2">Image 2</li>
            <li data-type="picture" data-icon="image2">Image 3</li>
            <li data-type="picture" data-icon="image2">Image 4</li>
            <li data-type="picture" data-icon="image2">Image 5</li>
            <li data-type="picture" data-icon="file4">File 1</li>
            <li data-type="picture" data-icon="file4">File 2</li>
        </ul>
    </div>
    <!-- Action menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Icons START -->
    <div class="demo-wrapper demo-wrapper-ratingIcons">
        <input id="ratingIcons-demo" placeholder="Please Select ..." />

        <button id="ratingIcons-clear">Clear</button>
        <button id="ratingIcons-show">Show</button>

    </div>
    <!-- Custom Icons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Decimal START -->
    <div class="demo-wrapper demo-wrapper-numberDecimal">
        <input id="numberDecimal-demo" placeholder="Please Select ..." />

        <button id="numberDecimal-clear">Clear</button>
        <button id="numberDecimal-show">Show</button>

    </div>
    <!-- Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!--  Decimal START -->
    <div class="demo-wrapper demo-wrapper-numpadDecimal">
        <input id="numpadDecimal-demo" placeholder="Please Select ..." />

        <button id="numpadDecimal-clear">Clear</button>
        <button id="numpadDecimal-show">Show</button>

    </div>
    <!--  Decimal END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Currency START -->
    <div class="demo-wrapper demo-wrapper-numpadCurrency">
        <div class="md-stepper-np" style="display:none" mbsc-enhance>
            <div class="mbsc-padding md-demo">
                <h4 class="md-title">Automatically top up account</h4>
                <div class="mbsc-desc ">Top up from credit card if account falls bellow $10</div>
                <div>
                    <div>
                        <input id="numpadCurrency-md-price" class="md-price" data-role="stepper" min="10" max="500" step="10" value="20" readonly />
                        <div id="numpadCurrency-demo" class="md-numpad"></div>
                    </div>
                </div>
                <button class="mbsc-btn-block">Save Settings</button>
            </div>
        </div>
    </div>
    <!-- Currency END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Time START -->
    <div class="demo-wrapper demo-wrapper-numpadTime">
        <input id="numpadTime-demo" placeholder="Please Select ..." />

        <button id="numpadTime-clear">Clear</button>
        <button id="numpadTime-show">Show</button>

    </div>
    <!-- Time END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Masked Entry - PIN START -->
    <div class="demo-wrapper demo-wrapper-numpadPin">
        <input id="numpadPin-demo" placeholder="Please Select ..." />

        <button id="numpadPin-clear">Clear</button>
        <button id="numpadPin-show">Show</button>

    </div>
    <!-- Masked Entry - PIN END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Setting min and max values START -->
    <div class="demo-wrapper demo-wrapper-datetimeMinmax">
        <input id="datetimeMinmax-demo" placeholder="Please Select..." />

        <button id="datetimeMinmax-clear">Clear</button>
        <button id="datetimeMinmax-show">Show</button>

    </div>
    <!-- Setting min and max values END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Tab menu START -->
    <div class="demo-wrapper demo-wrapper-menustripTabs">
        <div class="md-ms-tabs">
            <ul id="menustripTabs-demo" style="display:none;">
                <li data-tab="tab-downloaded" data-selected="true">Downloaded</li>
                <li data-tab="tab-all">All</li>
                <li data-tab="tab-external">External storage</li>
                <li data-tab="tab-running">Running</li>
                <li data-tab="tab-disabled">Disabled</li>
            </ul>
            <div id="menustripTabs-tab-downloaded" class="md-tab-h md-tabs-sel tab-downloaded">
                <ul class="md-apps-ul" style="display:none;">
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">19/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">10/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">9/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">21/10/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/10/2014</span></span>
                    </li>
                </ul>
            </div>
            <div id="menustripTabs-tab-external" class="md-tab-h tab-external">
                <ul class="md-apps-ul" style="display:none;">
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">09/09/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">19/08/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">17/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">16/11/2014</span></span>
                    </li>
                </ul>
            </div>
            <div id="menustripTabs-tab-running" class="md-tab-h tab-running">
                <ul class="md-apps-ul" style="display:none;">
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">16/10/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">10/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">09/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">08/11/2014</span></span>
                    </li>
                </ul>
            </div>
            <div id="menustripTabs-tab-all" class="md-tab-h tab-all">
                <ul class="md-apps-ul" style="display:none;">
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-globe"></span>Browser<span class="md-app-detail"><span class="md-app-size">74.68MB</span><span class="md-app-date">18/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-calendar"></span>Calendar<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-camera"></span>Camera<span class="md-app-detail"><span class="md-app-size">43.11MB</span><span class="md-app-date">19/10/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-clock"></span>Clock<span class="md-app-detail"><span class="md-app-size">1.52MB</span><span class="md-app-date">10/10/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">5.43MB</span><span class="md-app-date">11/08/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-copy3"></span>Docs<span class="md-app-detail"><span class="md-app-size">32.41MB</span><span class="md-app-date">19/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-folder"></span>File Manager<span class="md-app-detail"><span class="md-app-size">12.66MB</span><span class="md-app-date">18/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-image2"></span>Gallery<span class="md-app-detail"><span class="md-app-size">1.68MB</span><span class="md-app-date">17/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-earth"></span>Maps<span class="md-app-detail"><span class="md-app-size">46.21MB</span><span class="md-app-date">18/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-phone"></span>Phone<span class="md-app-detail"><span class="md-app-size">1.28MB</span><span class="md-app-date">19/11/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-foundation-mail"></span>Email<span class="md-app-detail"><span class="md-app-size">6.65MB</span><span class="md-app-date">05/07/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-bubble"></span>Messages<span class="md-app-detail"><span class="md-app-size">25.57MB</span><span class="md-app-date">06/06/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-newspaper"></span>News<span class="md-app-detail"><span class="md-app-size">24.00MB</span><span class="md-app-date">20/10/2014</span></span>
                    </li>
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-play"></span>Youtube<span class="md-app-detail"><span class="md-app-size">26.47MB</span><span class="md-app-date">18/11/2014</span></span>
                    </li>
                </ul>
            </div>
            <div id="menustripTabs-tab-disabled" class="md-tab-h tab-disabled">
                <ul class="md-apps-ul" style="display:none;">
                    <li><span class="md-app-ic mbsc-ic mbsc-ic-user4"></span>Contacts<span class="md-app-detail"><span class="md-app-size">26.71MB</span><span class="md-app-date">17/11/2014</span></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Tab menu END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Icon and Text START -->
    <div class="demo-wrapper demo-wrapper-imageIcons">
        <ul id="imageIcons-demo" style="display:none">
            <li data-val="Share" data-icon="share">
                <p>Share</p>
            </li>
            <li data-val="Bookmark" data-icon="star">
                <p>Bookmark</p>
            </li>
            <li data-val="Flag" data-icon="flag">
                <p>Flag</p>
            </li>
            <li data-val="Tag" data-icon="tag">
                <p>Tag</p>
            </li>
            <li data-val="Download" data-icon="download">
                <p>Download</p>
            </li>
            <li data-val="Delete" data-icon="remove">
                <p>Delete</p>
            </li>
        </ul>

        <button id="imageIcons-clear">Clear</button>
        <button id="imageIcons-show">Show</button>

    </div>
    <!-- Icon and Text END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Step START -->
    <div class="demo-wrapper demo-wrapper-numberStep">
        <input id="numberStep-demo" placeholder="Please Select ..." />

        <button id="numberStep-clear">Clear</button>
        <button id="numberStep-show">Show</button>

    </div>
    <!-- Step END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Dialog START -->
    <div class="demo-wrapper demo-wrapper-widgetDialog">
        <div id="widgetDialog-demo" style="display: none;">
            <div class="md-dialog">
                <h3 class="md-text-center">Hi Molly</h3>
                <p class="md-text-center">How are you feeling today?</p>
            </div>
        </div>

        <button id="widgetDialog-show">How are you feeling?</button>

    </div>
    <!-- Dialog END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Alert message START -->
    <div class="demo-wrapper demo-wrapper-widgetMessage">
        <div id="widgetMessage-demo" style="display: none;">
            <div class="md-body">
                <h3>Use Google's location service?</h3>
                <p>Let Google help apps determine location. This meas sending anonymus location data to Google, even when no apps are running.</p>
            </div>
        </div>

        <button id="widgetMessage-show">Use Location Services?</button>

    </div>
    <!-- Alert message END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Custom Units START -->
    <div class="demo-wrapper demo-wrapper-scrollerCustomunits">
        <input id="scrollerCustomunits-demo" placeholder="Please Select ..." />

        <button id="scrollerCustomunits-clear">Clear</button>
        <button id="scrollerCustomunits-show">Show</button>

    </div>
    <!-- Custom Units END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Text Fields START -->
    <div class="demo-wrapper demo-wrapper-formsTextfields">
        <div id="formsTextfields-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Single-line text</div>

            <div>
                <label for="formsTextfields-name">Label</label>
                <input id="formsTextfields-name" type="text" placeholder="Text field label" />
            </div>

            <label>
                Password
                <input type="password" placeholder="Text field with icon" data-icon="lock2" />
            </label>

            <label>
                Password Toggle
                <input type="password" placeholder="Text field with icon" data-icon="lock2" data-password-toggle="true" />
            </label>

            <label>
                <input type="text" placeholder="Text field with right icon" data-icon="pencil" data-icon-align="right" />
            </label>

            <label>
                <input type="text" placeholder="Text field disabled" disabled/>
            </label>

            <label class="mbsc-err">
                <input type="text" placeholder="Text field with error style" />
            </label>

            <label class="mbsc-err">
                <input type="text" placeholder="Text field with error style and message" />
                <span class="mbsc-err-msg">Error message!</span>
            </label>

            <div class="mbsc-divider">Multi-line text</div>

            <label>
                Label
                <textarea></textarea>
            </label>

            <label>
                <textarea data-icon="pencil" data-icon-align="right"></textarea>
            </label>

            <label>
                Label
                <textarea data-icon="bubble" data-icon-align="left"></textarea>
            </label>

            <label>
                <textarea placeholder="disabled" disabled></textarea>
            </label>

            <label class="mbsc-err">
                <textarea></textarea>
                <span class="mbsc-err-msg">Error message!</span>
            </label>
        </div>
    </div>
    <!-- Text Fields END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Select START -->
    <div class="demo-wrapper demo-wrapper-formsSelect">
        <div id="formsSelect-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Select</div>

            <label>
                Label
                <select class="md-select">
                    <option>Select</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </label>
            <label>
                <select class="md-select" data-icon="plus" data-icon-align="right">
                    <option>Select with icon</option>
                    <option value="opel">Opel</option>
                    <option value="renault">Renault</option>
                    <option value="Citroen">Citroen</option>
                    <option value="Lotus">Lotus</option>
                </select>
            </label>
            <label>
                <select class="md-select" data-icon="plus" data-icon-align="left">
                    <option>Select with right icon</option>
                    <option value="Peugeot">Peugeot</option>
                    <option value="Porsche">Porsche</option>
                    <option value="Fiat">Fiat</option>
                    <option value="Volkswagen">Volkswagen</option>
                </select>
            </label>
            <label class="mbsc-err">
                <select class="md-select">
                    <option>Select error</option>
                    <option value="Ferrari">Ferrari</option>
                    <option value="Honda">Honda</option>
                    <option value="Suzuki">Suzuki</option>
                    <option value="Lamborghini">Lamborghini</option>
                </select>
            </label>
            <label>
                <select disabled>
                    <option>Select disabled</option>
                    <option value="Bentley">Bentley</option>
                    <option value="Morgan">Morgan</option>
                    <option value="Chevrolet">Chevrolet</option>
                    <option value="Dodge">Dodge</option>
                </select>
            </label>
        </div>
    </div>
    <!-- Select END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Checkbox START -->
    <div class="demo-wrapper demo-wrapper-formsCheckbox">
        <div id="formsCheckbox-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Checkbox</div>

            <label>
                <input type="checkbox" checked> Option 1
                <span class="mbsc-desc">Checked checkbox</span>
            </label>
            <label>
                <input type="checkbox"> Option 2
                <span class="mbsc-desc">Empty checkbox</span>
            </label>
            <label>
                <input type="checkbox" disabled> Option 3
                <span class="mbsc-desc">Disabled checkbox</span>
            </label>
            <label>
                <input type="checkbox" checked disabled> Option 4
                <span class="mbsc-desc">Disabled and checked checkbox</span>
            </label>
        </div>
    </div>
    <!-- Checkbox END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Switch START -->
    <div class="demo-wrapper demo-wrapper-formsSwitch">
        <div id="formsSwitch-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Switch</div>

            <label>
                <input data-role="switch" type="checkbox"> Switch Off
                <span class="mbsc-desc">This is description for Switch</span>
            </label>

            <label>
                <input data-role="switch" type="checkbox" checked> Switch On
                <span class="mbsc-desc">This is description for Switch 2</span>
            </label>
            <label>
                <input data-role="switch" type="checkbox" disabled> Disabled Switch Off
            </label>
            <label>
                <input data-role="switch" type="checkbox" disabled checked> Disabled Switch On
            </label>
        </div>
    </div>
    <!-- Switch END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Radio buttons START -->
    <div class="demo-wrapper demo-wrapper-formsRadiobtn">
        <div id="formsRadiobtn-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Radio buttons</div>

            <label>
                <input type="radio" name="group" checked> Radio Option 1
                <span class="mbsc-desc">This is description for radio 1</span>
            </label>
            <label>
                <input type="radio" name="group"> Radio Option 2
                <span class="mbsc-desc">This is description for radio 2</span>
            </label>
            <label>
                <input type="radio" name="group"> Radio Option 3
            </label>
            <label>
                <input type="radio" name="group" disabled> Disabled
            </label>
        </div>
    </div>
    <!-- Radio buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Buttons START -->
    <div class="demo-wrapper demo-wrapper-formsButtons">
        <div id="formsButtons-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Buttons</div>

            <div class="mbsc-btn-group">
                <button>Button</button>
                <button disabled>Disabled</button>
            </div>

            <div class="mbsc-padding">
                <button class="mbsc-btn-block">Full width button</button>
                <button class="mbsc-btn-block" disabled>Disabled full width</button>
            </div>

            <div class="mbsc-divider">Icons</div>

            <div class="mbsc-btn-group">
                <button data-icon="tag"></button>
                <button data-icon="heart"></button>
                <button data-icon="flag" disabled></button>
            </div>
            <div class="mbsc-btn-group">
                <button data-icon="tag">Tag</button>
                <button data-icon="heart">Favorite</button>
                <button data-icon="flag" disabled>Flag</button>
            </div>

            <div class="mbsc-divider">Flat Buttons</div>
            <div class="mbsc-btn-group">
                <button class="mbsc-btn-flat">Flat</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5">Flat & Icon</button>
                <button class="mbsc-btn-flat" data-icon="arrow-left5"></button>
                <button class="mbsc-btn-flat" data-icon="key2" disabled></button>
                <button class="mbsc-btn-flat" disabled>Flat disabled</button>
            </div>
        </div>
    </div>
    <!-- Buttons END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Typography START -->
    <div class="demo-wrapper demo-wrapper-formsTypography">
        <div id="formsTypography-demo" style="font-family: inherit;" mbsc-enhance>
            <div class="mbsc-padding">
                <h1>Heading 1</h1>
                <h2>Heading 2</h2>
                <h3>Heading 3</h3>
                <h4>Heading 4</h4>
                <h5>Heading 5</h5>
                <h6>Heading 6</h6>
                <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
                <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
            </div>
        </div>
    </div>
    <!-- Typography END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Slider START -->
    <div class="demo-wrapper demo-wrapper-formsSlider">
        <div id="formsSlider-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Sound settings</div>
            <label>
                <input type="range" value="30" data-icon='{ "left": "volume-mute2", "right": "volume-high" }' />
            </label>
            <label>
                <input type="range" value="50" data-icon="alarm2" disabled />
            </label>
            <label>
                Weight
                <input type="range" value="130" min="80" max="300" data-val="left" data-template="{value} lbs" data-highlight="false" />
            </label>
            <label>
                Price
                <input type="range" value="100" min="0" max="500" step="25" data-tooltip="true" data-step-labels="[0, 100, 200, 300, 400, 500]">
                <input type="range" value="400" min="0" max="500" step="25" />
            </label>
            <label>
                Steps
                <input type="range" value="50" min="0" max="100" step="25" data-step-labels="[0, 25, 50, 75, 100]">
            </label>
            <label>
                Multiple
                <input type="range" value="100" min="0" max="3000" data-tooltip="true" data-step-labels="[0, 500, 1000, 1500, 2000, 2500, 3000]">
                <input type="range" value="500" min="0" max="3000" />
                <input type="range" value="2000" min="0" max="3000" />
                <input type="range" value="2800" min="0" max="3000" />
            </label>
        </div>
    </div>
    <!-- Slider END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Stepper START -->
    <div class="demo-wrapper demo-wrapper-formsStepper">
        <div id="formsStepper-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Passengers</div>
            <div>
                <label for="formsStepper-md-adults">Adults</label>
                <span class="mbsc-desc">From 14 years</span>
                <input id="formsStepper-md-adults" type="number" data-role="stepper" min="1" value="1" max="15" />
            </div>

            <div>
                <label for="formsStepper-md-children">Children</label>
                <span class="mbsc-desc">2-14 years</span>
                <input id="formsStepper-md-children" type="number" data-role="stepper" max="15" data-val="left" />
            </div>

            <div>
                <label for="formsStepper-md-infant">Infant</label>
                <span class="mbsc-desc">0-2 years</span>
                <input id="formsStepper-md-infant" type="number" data-role="stepper" data-val="left" max="10" />
            </div>
            <div class="mbsc-divider">Luggage</div>
            <label>
                Allow overweight luggage
                <input class="md-allow" type="checkbox" />
            </label>

            <div>
                <label for="formsStepper-md-luggage">Weight</label>
                <span class="mbsc-desc">(kg)</span>
                <input id="formsStepper-md-luggage" type="number" class="md-luggage" data-role="stepper" data-val="left" min="30" max="80" step="5" value="30" disabled />
            </div>

            <div class="mbsc-divider">Stepper with Numpad</div>

            <div>
                <label for="formsStepper-md-luggage">Consumption</label>
                <div class="mbsc-desc">(mpg)</div>
                <input id="formsStepper-md-consumption" class="md-consumption" type="number" data-role="stepper" data-val="left" min="5" max="120" step=".5" value="30" readonly />
                <div class="md-numpad"></div>
            </div>

        </div>
    </div>
    <!-- Stepper END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Progress START -->
    <div class="demo-wrapper demo-wrapper-formsProgress">
        <div id="formsProgress-demo" class="md-progress-demo" style="display:none" mbsc-enhance>

            <div class="mbsc-divider">Downloading file</div>
            <label>
                <progress id="formsProgress-download" value="0" max="100" data-icon='{ "left": "cloud-download" }' data-val="right"></progress>
            </label>

            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-restart">Restart download</button>
            </div>

            <label>
                <progress id="formsProgress-progress" value="0" max="100" data-step-labels="[0, 25, 50, 75, 100]"></progress>
            </label>

            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-update">Update progress</button>
            </div>

            <div class="mbsc-divider">Cloud upload</div>
            <label class="md-upload">
                <progress value="0" id="formsProgress-uploadProg" max="100" data-step-labels="[0, 33, 66, 100]" data-icon='{ "left": "cloud-upload" }'></progress>
            </label>

            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-restart-up">Restart upload</button>
            </div>

            <div class="mbsc-divider">Checkout process</div>
            <label class="md-demo">
                <progress id="formsProgress-cartProg" value="0" max="100" data-step-labels="[0, 33, 66, 100]"></progress>
            </label>

            <div class="mbsc-btn-group">
                <button class="mbsc-btn md-next-step">Next step</button>
            </div>
        </div>
    </div>
    <!-- Progress END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Segmented START -->
    <div class="demo-wrapper demo-wrapper-formsSegmented">
        <div id="formsSegmented-demo" style="display:none" mbsc-enhance>
            <div class="mbsc-divider">Single select</div>
            <label>
                Day
                <input type="radio" data-role="segmented" name="range">
            </label>
            <label>
                Week
                <input type="radio" data-role="segmented" name="range" checked>
            </label>
            <label>
                Month
                <input type="radio" data-role="segmented" name="range">
            </label>
            <label>
                Year
                <input type="radio" data-role="segmented" name="range" checked>
            </label>

            <div class="mbsc-divider">Multiple select</div>

            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" disabled>
            </label>
            <label>
                M
                <input type="checkbox" data-role="segmented" name="week" checked>
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week">
            </label>
            <label>
                W
                <input type="checkbox" data-role="segmented" name="week">
            </label>
            <label>
                T
                <input type="checkbox" data-role="segmented" name="week" checked>
            </label>
            <label>
                F
                <input type="checkbox" data-role="segmented" name="week">
            </label>
            <label>
                S
                <input type="checkbox" data-role="segmented" name="week" disabled>
            </label>

            <div class="mbsc-divider">Text and Icon</div>

            <label>
                Featured
                <input type="radio" data-role="segmented" data-icon="material-star" name="app" checked>
            </label>
            <label>
                Explore
                <input type="radio" data-role="segmented" data-icon="material-explore" name="app">
            </label>
            <label>
                Updates
                <input type="radio" data-role="segmented" data-icon="material-system-update" name="app">
            </label>

            <div class="mbsc-divider">Icon</div>

            <label>
                <input type="radio" data-role="segmented" data-icon="fa-mail-reply" name="settings">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="fa-retweet" name="settings">
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="star3" name="settings" checked>
            </label>
            <label>
                <input type="radio" data-role="segmented" data-icon="cogs" name="settings">
            </label>

            <div class="mbsc-divider">Disabled</div>

            <label>
                Idividual
                <input type="radio" data-role="segmented" name="org" disabled checked>
            </label>
            <label>
                Team
                <input type="radio" data-role="segmented" name="org" disabled>
            </label>
            <label>
                Company
                <input type="radio" data-role="segmented" name="org" disabled>
            </label>

        </div>
    </div>
    <!-- Segmented END -->
    <!-- ------------------------------------------------------------------------------- -->

</body>

</html>