Amoy2
/
sr-iHealthwx


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950
							<!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://code.jquery.com/jquery-1.12.2.min.js"></script>

    <!-- Bootstrap Include -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <!-- Mobiscroll JS and CSS Includes -->
    
    <link href="css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-3.0.0-beta2.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;
        }
        
        .demo-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;
        }
        
        .demo-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;
        }
        
        .demo-stars .md-products li h3 {
            margin: 5px 0;
            font-weight: normal;
            font-size: initial;
        }
        
        .demo-stars .md-products li p {
            margin: 5px 0;
            color: #717171;
        }
        
        .demo-stars .md-products li .md-product {
            height: 50px;
            padding: 5px 65px 5px 60px;
            color: #333;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
        }
        
        .demo-stars .md-products li .md-active {
            background: #ddd;
        }
        
        .demo-stars .md-products li .md-rate {
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
            height: 60px;
            text-align: right;
        }
        
        .demo-stars .md-products li .md-rating {
            padding-right: 10px;
            font-size: 17px;
            line-height: 60px;
        }
        
        .demo-stars .md-products img {
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 60px;
            border: 0;
        }
        
        @media (max-width: 960px) {
            .demo-cont-c .demo-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-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-actionmenu ul {
            font-size: 18px;
        }
        
        .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-tab-h {
            display: none;
        }
        
        .demo-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;
        }
        
        .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_beta2/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_beta2/datetime#!opt-mode
                    min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),  // More info about min: https://docs.mobiscroll.com/3-0-0_beta2/datetime#!opt-min
                    invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],                   // More info about invalid: https://docs.mobiscroll.com/3-0-0_beta2/datetime#!opt-invalid
                    dateOrder: 'Mddyy',                                               // More info about dateOrder: https://docs.mobiscroll.com/3-0-0_beta2/datetime#!localization-dateOrder
                    timeWheels: 'HHii'                                                // More info about timeWheels: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/datetime#!opt-mode
                    headerText: false,             // More info about headerText: https://docs.mobiscroll.com/3-0-0_beta2/datetime#!opt-headerText
                    maxWidth: 90                   // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/select#!opt-mode
                    minWidth: 200                  // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/select#!opt-mode
                    label: 'City',                 // More info about label: https://docs.mobiscroll.com/3-0-0_beta2/select#!opt-label
                    group: true,                   // More info about group: https://docs.mobiscroll.com/3-0-0_beta2/select#!opt-group
                    groupLabel: 'Country',         // More info about groupLabel: https://docs.mobiscroll.com/3-0-0_beta2/select#!opt-groupLabel
                    width: [100, 170]              // More info about width: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/rating#!opt-mode
                    label: 'Rate Item',                     // More info about label: https://docs.mobiscroll.com/3-0-0_beta2/rating#!opt-label
                    onSet: function (event, inst) {         // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/rating#!opt-mode
                    style: 'grade',                // More info about style: https://docs.mobiscroll.com/3-0-0_beta2/rating#!opt-style
                    label: 'Rating'                // More info about label: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/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_beta2/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_beta2/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_beta2/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_beta2/list#!opt-mode
                    width: [90, 160, 170],                    // More info about width: https://docs.mobiscroll.com/3-0-0_beta2/list#!opt-width
                    placeholder: 'Please Select ...',         // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/list#!opt-placeholder
                    labels: ['Region', 'Supervisor', 'Tech']  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/image#!opt-mode
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-placeholder
                    labels: ['Make'],                  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-labels
                    enhance: true,                     // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-enhance
                    defaultValue: ['Citroen']          // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/image#!opt-mode
                    cssClass: 'md-image-fruit',
                    labels: ['Select Favorite Fruit'],  // More info about labels: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-labels
                    placeholder: 'Please Select ...',   // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-placeholder
                    width: 200,                         // More info about width: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-width
                    enhance: true                       // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/list#!opt-mode
                    labels: ['Ingredients'],           // More info about labels: https://docs.mobiscroll.com/3-0-0_beta2/list#!opt-labels
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/list#!opt-placeholder
                    width: 200                         // More info about width: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/calendar#!opt-mode
                    controls: ['calendar', 'time'],  // More info about controls: https://docs.mobiscroll.com/3-0-0_beta2/calendar#!opt-controls
                    showScrollArrows: true           // More info about showScrollArrows: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/calendar#!opt-mode
                    counter: true,                                                                                 // More info about counter: https://docs.mobiscroll.com/3-0-0_beta2/calendar#!opt-counter
                    select: 'multiple',                                                                            // More info about select: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/select#!opt-mode
                    minWidth: 200                  // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/timespan#!opt-mode
                    wheelOrder: 'iiss'             // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/timespan#!opt-mode
                    wheelOrder: 'ddhhii'           // More info about wheelOrder: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/timer#!opt-mode
                    targetTime: 10,                // More info about targetTime: https://docs.mobiscroll.com/3-0-0_beta2/timer#!opt-targetTime
                    maxWheel: 'minutes',           // More info about maxWheel: https://docs.mobiscroll.com/3-0-0_beta2/timer#!opt-maxWheel
                    minWidth: 100,                 // More info about minWidth: https://docs.mobiscroll.com/3-0-0_beta2/timer#!opt-minWidth
                    onFinish: function () {        // More info about onFinish: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/color#!opt-mode
                    onBeforeShow: function (event, inst) {  // More info about onBeforeShow: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/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_beta2/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_beta2/range#!opt-mode
                    controls: ['time'],            // More info about controls: https://docs.mobiscroll.com/3-0-0_beta2/range#!opt-controls
                    maxWidth: 100                  // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/range#!opt-mode
                    startInput: '#rangeTwoinputs-startDate',  // More info about startInput: https://docs.mobiscroll.com/3-0-0_beta2/range#!opt-startInput
                    endInput: '#rangeTwoinputs-endDate'       // More info about endInput: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/eventcalendar#!opt-layout
                    firstDay: 1,                   // More info about firstDay: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!localization-firstDay
                    yearChange: true,              // More info about yearChange: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!opt-yearChange
                    calendarScroll: 'horizontal',  // More info about calendarScroll: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!opt-calendarScroll
                    showOuterDays: true,           // More info about showOuterDays: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!opt-showOuterDays
                    showEventCount: true,          // More info about showEventCount: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!opt-showEventCount
                    data: [{                       // More info about data: https://docs.mobiscroll.com/3-0-0_beta2/eventcalendar#!opt-data
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 0),
                        text: 'Green box to post office',
                        color: '#eventcalendarEvent-6e7f29'
                    }, {
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 8, 45),
                        text: 'Quick mtg. with Martin',
                        color: '#eventcalendarEvent-de3d83'
                    }, {
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 9, 30),
                        text: 'Product team mtg.',
                        color: '#eventcalendarEvent-f67944'
                    }, {
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 11, 0),
                        text: 'Stakeholder mtg.',
                        color: '#eventcalendarEvent-f67944'
                    }, {
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 12, 30),
                        text: 'Lunch @ Butcher\'s',
                        color: '#eventcalendarEvent-00aabb'
                    }, {
                        d: new Date(now.getFullYear(), now.getMonth(), 8, 15, 0),
                        text: 'General orientation',
                        color: '#eventcalendarEvent-f67944'
                    }, {
                        d: (now.getMonth() + 1) + '/14',
                        text: 'Dexter BD',
                        color: '#eventcalendarEvent-37bbe4'
                    }, {
                        d: (now.getMonth() + 1) + '/5',
                        text: 'Luke BD',
                        color: '#eventcalendarEvent-37bbe4'
                    }, {
                        d: 'w3',
                        text: 'Employment (Semi-weekly)',
                        color: '#eventcalendarEvent-635045'
                    }, {
                        d: 'w5',
                        text: 'Employment (Semi-weekly)',
                        color: '#eventcalendarEvent-635045'
                    }, {
                        start: new Date(now.getFullYear(), now.getMonth(), 26),
                        end: new Date(now.getFullYear(), now.getMonth(), 31),
                        text: 'Dean OFF',
                        color: '#eventcalendarEvent-e7b300'
                    }, {
                        start: new Date(now.getFullYear(), (now.getMonth() + 1), 5),
                        end: new Date(now.getFullYear(), (now.getMonth() + 1), 14),
                        text: 'Mike OFF',
                        color: '#eventcalendarEvent-e7b300'
                    }, {
                        d: '11/2',
                        text: 'File Form 720 for the third quarter',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/2',
                        text: 'File Form 730 and pay tax on wagers accepted during September',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/2',
                        text: 'File Form 2290 and pay the tax for vehicles first used during September',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/2',
                        text: 'File Form 941 for the third quarter',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/2',
                        text: 'Deposit FUTA owed through Sep if more than $500',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/30',
                        text: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/30',
                        text: 'File Form 730 and pay tax on wagers accepted during October',
                        color: '#eventcalendarEvent-a63e14'
                    }, {
                        d: '11/30',
                        text: 'File Form 2290 and pay the tax for vehicles first used during October',
                        color: '#eventcalendarEvent-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_beta2/listview#!opt-sortable
                    iconSlide: true,               // More info about iconSlide: https://docs.mobiscroll.com/3-0-0_beta2/listview#!opt-iconSlide
                    striped: true,                 // More info about striped: https://docs.mobiscroll.com/3-0-0_beta2/listview#!opt-striped
                    stages: [{                     // More info about stages: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/listview#!methods-undo
                        action: function (event, inst) {
                            inst.add(++ids, 'Work order #listviewUpdate-000' + ids + ' created from WO #listviewUpdate-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_beta2/listview#!event-onItemAdd
                        $('#listviewUpdate-demo_note').hide();
                    },
                    onItemRemove: function () {    // More info about onItemRemove: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/listview#!opt-swipe
                    sortable: {                    // More info about sortable: https://docs.mobiscroll.com/3-0-0_beta2/listview#!opt-sortable
                        handle: 'right'
                    },
                    enhance: true                  // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/listview#!opt-enhance
                    actions: [{                    // More info about actions: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/listview#!methods-undo
                        action: function (event, inst) {
                            inst.remove(li);
                            return false;
                        }
                    }, {
                        icon: 'download',
                        action: function (event, inst) {
                            notify('Downloaded');
                        }
                    }, ],
                    itemGroups: {                  // More info about itemGroups: https://docs.mobiscroll.com/3-0-0_beta2/listview#!opt-itemGroups
                        folder: {
                            actions: [{                    // More info about actions: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/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_beta2/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_beta2/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_beta2/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_beta2/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_beta2/rating#!opt-mode
                    label: 'Rating',               // More info about label: https://docs.mobiscroll.com/3-0-0_beta2/rating#!opt-label
                    icon: {                        // More info about icon: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/number#!opt-mode
                    maxWidth: 100                  // More info about maxWidth: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/numpad#!opt-preset
                    anchor: '.md-price',                              // More info about anchor: https://docs.mobiscroll.com/3-0-0_beta2/numpad#!opt-anchor
                    min: 10,
                    max: 500,
                    prefix: '$',
                    onSet: function (event, inst) {                   // More info about onSet: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/numpad#!opt-template
                    allowLeadingZero: true,             // More info about allowLeadingZero: https://docs.mobiscroll.com/3-0-0_beta2/numpad#!opt-allowLeadingZero
                    placeholder: '-',                   // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/numpad#!opt-placeholder
                    mask: '*',                          // More info about mask: https://docs.mobiscroll.com/3-0-0_beta2/numpad#!opt-mask
                    validate: function (event, inst) {  // More info about validate: https://docs.mobiscroll.com/3-0-0_beta2/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;
                }); 
            
            });
        }

        /* Date with min and max 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_beta2/datetime#!opt-mode
                    min: new Date(2014, 8, 15),    // More info about min: https://docs.mobiscroll.com/3-0-0_beta2/datetime#!opt-min
                    max: new Date(2024, 8, 14)     // More info about max: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/menustrip#!opt-type
                    onItemTap: function (event, inst) {  // More info about onItemTap: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/image#!opt-mode
                    placeholder: 'Please Select ...',  // More info about placeholder: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-placeholder
                    showLabel: false,                  // More info about showLabel: https://docs.mobiscroll.com/3-0-0_beta2/image#!opt-showLabel
                    enhance: true                      // More info about enhance: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/number#!opt-mode
                    layout: 'fixed',               // More info about layout: https://docs.mobiscroll.com/3-0-0_beta2/number#!opt-layout
                    step: 5                        // More info about step: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/widget#!opt-anchor
                    buttons: [{                             // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/widget#!opt-anchor
                    buttons: [{                             // More info about buttons: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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_beta2/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_beta2/scroller#!opt-circular
                            data: ['-', '1/4', '1/2', '3/4']
                        }, {
                            circular: false,            // More info about circular: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/scroller#!opt-mode
                    wheels: wheel,                      // More info about wheels: https://docs.mobiscroll.com/3-0-0_beta2/scroller#!opt-wheels
                    validate: function (event, inst) {  // More info about validate: https://docs.mobiscroll.com/3-0-0_beta2/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_beta2/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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };
            
        }

        /* 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
            };

            $(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
            };

            $(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
            };
            
        }

    </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>
            </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="zh">Chinese</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" >Date with min and max</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">
        <ul class="md-products">
            <li>
                <div class="md-product">
                    <img src="images/product1.png" />
                    <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">
                    <img src="images/product2.png" />
                    <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">
                    <img src="images/product3.png" />
                    <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">
                    <img src="images/product4.png" />
                    <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">
                    <img src="images/product5.png" />
                    <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">
                    <img src="images/product6.png" />
                    <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>
    <!-- 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="/Content/img/demos/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="/Content/img/demos/Chevrolet_logo.png" />
                <p>Chevrolet</p>
            </li>
            <li data-val="Citroen">
                <img src="/Content/img/demos/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="/Content/img/demos/Ford_logo.png" />
                <p>Ford</p>
            </li>
            <li data-val="Jaguar">
                <img src="/Content/img/demos/Jaguar_logo.png" />
                <p>Jaguar</p>
            </li>
            <li data-val="Lotus">
                <img src="/Content/img/demos/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="/Content/img/demos/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="/Content/img/demos/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="/content/img/fruit-1.png" />
            </li>
            <li data-val="2">
                <img src="/content/img/fruit-2.png" />
            </li>
            <li data-val="3">
                <img src="/content/img/fruit-3.png" />
            </li>
            <li data-val="4">
                <img src="/content/img/fruit-4.png" />
            </li>
            <li data-val="5">
                <img src="/content/img/fruit-5.png" />
            </li>
            <li data-val="6">
                <img src="/content/img/fruit-1.png" />
            </li>
            <li data-val="7">
                <img src="/content/img/fruit-2.png" />
            </li>
            <li data-val="8">
                <img src="/content/img/fruit-3.png" />
            </li>
            <li data-val="9">
                <img src="/content/img/fruit-4.png" />
            </li>
            <li data-val="10">
                <img src="/content/img/fruit-5.png" />
            </li>
            <li data-val="11">
                <img src="/content/img/fruit-1.png" />
            </li>
            <li data-val="12">
                <img src="/content/img/fruit-2.png" />
            </li>
            <li data-val="13">
                <img src="/content/img/fruit-3.png" />
            </li>
            <li data-val="14">
                <img src="/content/img/fruit-4.png" />
            </li>
            <li data-val="15">
                <img src="/content/img/fruit-5.png" />
            </li>
            <li data-val="16">
                <img src="/content/img/fruit-1.png" />
            </li>
            <li data-val="17">
                <img src="/content/img/fruit-2.png" />
            </li>
            <li data-val="18">
                <img src="/content/img/fruit-3.png" />
            </li>
            <li data-val="19">
                <img src="/content/img/fruit-4.png" />
            </li>
            <li data-val="20">
                <img src="/content/img/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="listviewUpdate-1">Work order #0001
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="listviewUpdate-2">Work order #0002
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="listviewUpdate-3">Work order #0003
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="listviewUpdate-4">Work order #0004
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="listviewUpdate-5">Work order #0005
                <div class="md-wo-status">Assigned</div>
            </li>
            <li data-id="listviewUpdate-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 -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Date with min and max 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>
    <!-- Date with min and max END -->
    <!-- ------------------------------------------------------------------------------- -->

    <!-- ------------------------------------------------------------------------------- -->
    <!-- Tab menu START -->
    <div class="demo-wrapper demo-wrapper-menustripTabs">
        <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">
            <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">
            <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">
            <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">
            <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">
            <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>
    <!-- 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>