diff --git a/node_modules/mdl-ext/lib/mdl-ext.min.css.map b/node_modules/mdl-ext/lib/mdl-ext.min.css.map
new file mode 100644
index 0000000..c9b79f3
--- /dev/null
+++ b/node_modules/mdl-ext/lib/mdl-ext.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack:///src/aria-expanded-toggle/_aria-expanded-toggle.scss?d01f","webpack:///webpack:///src/_mixins.scss?c723","webpack:///webpack:///src/mdl-ext-build.scss","webpack:///webpack:///src/sticky-header/_sticky-header.scss?721e","webpack:///webpack:///src/dialog/dialog.scss?6dd1","webpack:///webpack:///src/grid/_grid-media-queries.scss","webpack:///webpack:///src/lightboard/_lightboard.scss?79ea","webpack:///webpack:///~/material-design-lite/src/_mixins.scss?572c","webpack:///webpack:///src/lightboard/_lightboard-media-queries.scss","webpack:///webpack:///src/lightbox/_lightbox.scss?bce5","webpack:///webpack:///src/carousel/_carousel.scss?ab9b","webpack:///webpack:///src/selectfield/_selectfield.scss?910a","webpack:///webpack:///src/menu-button/_menu-button.scss?610a","webpack:///webpack:///src/bordered-fields/_bordered-fields.scss?3072","webpack:///webpack:///src/collapsible/_collapsible.scss?5cb7","webpack:///webpack:///src/accordion/_accordion.scss?b350","webpack:///webpack:///src/color-themes/_light-color-theme.scss?77e1","webpack:///webpack:///src/color-themes/_dark-color-theme.scss?a990"],"names":[],"mappings":"AAwBA,iCCiDE,oBACA,oBACA,mBACA,eACA,qBACA,UACA,WACA,cACA,oBACA,sBACA,iBACA,mBACA,cACA,sBAGA,mCACA,qCAGA,kCAGA,kCAGA,6BC/ED,uCDkFG,YACA,cC9EH,4DDmFK,YACA,cC/EL,gCD2CC,2BACA,oBACA,mBACA,eACA,qBACA,UACA,WACA,cACA,oBACA,sBACA,iBACA,mBACA,cACA,sBAGA,mCACA,qCAGA,kCAGA,kCAGA,6BC/CD,sCDkDG,sBACA,cC9CH,2DDmDK,sBACA,cExFN,8BACE,kBACA,iBACA,iEACA,2BAJF,+CAOI,8FACD,gFAKC,kBACD,6EAEC,kBACD,mIAKD,iCAEA,yLACE,mBACD,mLAEC,kBC3BJ,qBACE,kBACA,SACA,UACA,UACA,6BALF,2BAQI,8CACD,6CAEC,8CAFD,qCAEC,8CAXJ,qCAcI,8CACD,kCAID,GAAK,2BFgFJ,CE9EH,8BACE,GAAK,UFmFJ,CGjGH,aACE,iCACA,0CACA,cACA,2CAJF,qCAOI,UAIJ,aACE,sBAIF,kBACE,gDACD,qBAGC,uEAGF,qBACE,4CACD,sBAGC,0EAGF,kDACE,SAKA,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBADF,sBACE,yBACD,sBADC,yBACD,sBADC,yBADF,uBACE,2BADF,uBACE,2BADF,uBACE,2BACD,yBAgCD,aACE,YACD,aAGC,kCA/BF,CAE2B,sCACzB,WAgCF,yBACE,uBACD,uDAKG,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,uDACE,yBADF,yDACE,2BADF,yDACE,2BADF,yDACE,2BAMF,uEAhDF,uBAE2B,yHACzB,UA6CA,uEAhDF,uBAmDG,yHAhDD,UACD,uEAJD,uBAEA,yHACE,UAqDA,uEAxDF,wBAEA,yHACE,WAqDA,uEAxDF,wBA2DG,yHAxDD,WAqDA,uEAxDF,wBAE2B,yHACzB,WAqDA,uEAxDF,wBAE2B,yHACzB,WAqDA,uEAxDF,wBAEA,yH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aADF,6CAII,WACA,+BAEiC,qFAC/B,WACD,iDAGD,UAMD,2EAHG,SACA,UN0mCL,CMlmCH,gDACE,mBACE,aAEA,6CACE,WACA,+BALJ,qFAQM,YARN,iDAYI,UAEA,2EACE,SACA,gBNymCL,CMlmCH,0BACE,mBACE,aADF,6CAII,WACA,+BAEiC,qFAC/B,YACD,iDAGD,UAZJ,2EAeM,SACA,gBNymCL,CO7rCH,iBACE,qFACA,eACA,kBACA,WACA,eACA,cACA,SACA,gBACA,sBAEA,UACA,cAEA,yHAJA,sBAVF,0CAwBI,kBACA,MACA,OACA,iCACA,4CA5BJ,0EA+BM,kCACA,cACA,gBACA,cACA,sBACA,wBACA,4BASJ,wBACE,SACA,UACA,kBAjDJ,4BAoDM,WACA,eACA,YACA,SACA,UAxDN,mCFHI,8CAgIF,eACA,gBACA,cACA,iBEnEI,cACA,kBACA,SACA,OACA,QACA,eACA,YACA,eACA,cACA,YACA,qCACA,wBACA,oBACA,2BAhBF,oEAmBI,oBA7ER,4CAiFU,gBAjFV,wFAqFU,wBACD,iCAKL,WACA,UACD,wBAEC,iCACA,oDACA,yCACA,qCAYD,mDATG,kBACA,gBACA,UACA,YACA,WACD,4BAEC,iCA5GN,uDAiHI,eACA,SACA,OChHJ,mBACE,gBACD,iBAMC,gBAEA,WACA,cACA,mBACA,YACA,6BAGF,yCAZE,sBACA,SACA,UAEA,YAQF,wBAEE,qBACA,kBACA,UAIA,iCAKE,yGAIE,qBACA,qCACD,+FAKD,WACA,WACA,cACA,YACA,SACA,OACA,kBACA,mBACA,4EACA,yCAjCJ,0BAsCI,qBAGF,+BACE,sBACA,kBACA,YACA,SACA,UAEA,mCACE,sBACA,gBACD,0CAGC,oEHmDJ,eACA,gBACA,cACA,iBGnDI,cACA,kBACA,SACA,OACA,mBACA,gBACA,eACA,WACA,kBACA,uBACA,cACD,gDAMG,qBACA,qCACD,kEAKH,qBACA,cACA,gBACA,kBACA,MACA,OACA,QACA,SACA,UAEE,8EACA,mBCtGN,oBACE,sBACA,kBACA,eACA,qBACA,YACA,eACA,SACA,eAGE,gCACA,YACA,kBAbJ,0BVnBE,8BACA,sBACA,uBACA,yBAKE,oCACA,qCU8BA,kBACA,WACA,QACA,2BACA,oBAIJ,gEVpDE,WACA,QACA,SACA,kBACA,oBUgDF,sCAEI,4DVhDF,sBACA,uBACA,iCAKE,oCACA,qCU8CJ,iCACE,iBACD,gCAIC,WAIF,gCACE,gBACA,eACA,WAIF,4BAGE,sBACA,SACA,gBACA,wBACA,qBACA,oBACA,gBACA,kBACA,iBACA,aACA,gBAGA,eACA,uCACA,oCACA,WACA,wCACA,cACA,SACA,gBACA,gBACA,cAzBF,2CA6BI,kBACA,uBACD,6CAIC,yBACA,cACD,wCAGC,aACD,2DAGC,aAGF,2DACE,qBACA,gBAGF,+HAEE,yCACA,sBACA,6BACD,mCAGC,sBACA,sBACA,yBAKJ,2BACE,sBACA,sBACA,eACA,SACA,SACA,OACA,QACA,oBACA,kBACA,cACA,WACA,gBACA,mBACA,gBAE6B,uHAE3B,kBACD,+DJkHD,wBACA,mDI9GC,+EAGC,gBACD,yIAIC,sBAG6C,0OAG7C,cACA,eACA,QACA,mBACD,sVAKC,UACD,0EAGC,cACA,eAIF,iCACE,yBACA,YACA,WACA,WACA,SACA,0CJwEF,mDIrEE,kBACA,WAGF,gEACE,OACA,mBACA,WACD,gEAGC,yBAKJ,2BACE,cACA,eACA,kBACA,eACA,kBACA,cAEA,0DACE,mBAKJ,uCACE,qBACA,kBACA,yCJoCA,mDI5BA,eAE+B,0IAM7B,gBACD,wEAEC,SC7OJ,oBACE,oELuJA,eACA,gBACA,cACA,iBKxJA,oBACA,kBACA,YACA,eACA,iCACA,yCACA,+CATF,sBAYI,SACA,kBAbJ,iCAiBI,eACD,kFAGC,iBACD,6BAKD,mBACA,gBACA,uBACA,gBAGF,gCAEE,sBACA,SACA,UACA,gBACA,iCAGF,aACE,kBACA,gBACA,aACA,gBACA,mHAEA,+CACA,gDACA,UACA,gBACA,gBA8FD,mBA3FG,oBACA,kBAGF,qBX1DA,SACA,mBACA,WACA,YACA,gBACA,UACA,kBACA,UWqDE,oBAGF,mBLsCA,eACA,gBACA,iBACA,iBKvCE,sBACA,sBACA,kBACA,sBACA,yCACA,0EACA,qBACA,eACA,mBACA,qFACA,gBACA,gBAEA,uCACE,yBACD,8CAIC,gBACA,kBACA,gBACA,SACA,QACA,2BACA,oBACD,yCAGC,sBAGF,yBACE,oBACA,kBACA,sBACA,sBACD,qCAGC,SAGF,6BACE,cACA,6BACA,YACA,oBAEE,+BACA,cACD,4BAID,mBACA,gBACA,uBA3DJ,qBA+DI,SACA,kBAGA,gCACA,eACD,iFAGC,iBACD,6BAID,SACA,UACA,wCCpJJ,kDAII,sBAJJ,mFAUI,UACA,gBAEA,0QAEE,YACA,oCACA,iCACA,kBACA,qBACA,eACA,gBACA,cAwBD,8SArBG,sBACA,oCACA,6BAdJ,kSAwBI,mCACA,qBASJ,2IACE,8BAYA,sTAEE,cACA,qBACA,qCAJF,8UAQI,qBACA,qCArEV,kDA4EI,SACA,WAGiB,mIAEjB,iCZrGF,QACA,SACA,kBACA,oBACA,sCACA,sBACA,uBACA,iCAKE,oCACA,qCYMJ,2KAyFI,sBACA,oCACA,6BACD,onBAWK,kBAGJ,wQAEE,sBACA,eACA,gBACA,iBACA,SACA,WAOD,gSAHG,uCACA,4BACD,4vFAWC,cACA,eACA,gBACA,SACA,YACA,mBAMF,o9BAEE,sBA/IR,o8BAuJQ,cACD,oKAMH,sBACD,wpBASK,kBACA,WACD,wTAEC,WAIE,0XAEF,SACD,41BAKC,kBAMM,w1BAEN,UAhMR,qMAqMQ,mBArMR,0XAyMQ,UACA,UAOH,ggBAOC,sBACA,oBChON,oBAEE,eACD,yEAFC,sBAQA,qEbIA,SACA,mBACA,WACA,YACA,gBACA,UACA,kBACA,UaTE,oBCXJ,+BdmDE,oBACA,oBACA,mBACA,gBACA,qBACA,UACA,WACA,cACA,oBACA,sBACA,iBACA,mBACA,cACA,sBAGA,mCACA,qCAGA,kCAGA,kCAGA,6Bc7EF,qCdgFI,YACA,cCohEH,0DD/gEK,YACA,ccnFN,mCd+CE,2BACA,oBACA,mBACA,gBACA,qBACA,UACA,WACA,cACA,oBACA,sBACA,iBACA,mBACA,cACA,sBAGA,mCACA,qCAGA,kCAGA,kCAGA,6BCmjED,yCDhjEG,sBACA,iBCojEH,8DD/iEK,sBACA,iBc/EN,kBAEE,SACA,UACA,gBACA,iCALF,sCACE,sBAUA,yBAKE,sCACD,gDALC,sBACA,kBACA,gBACA,iCAED,uBR3BC,8CAgEF,eACA,gBACA,cACA,qBQnCE,gBACA,gBAGA,SACA,UACA,eACA,gBAEA,yCACA,+CACA,qFACA,WACA,mCACA,eAjBF,6BAqBI,oBACA,qBACA,kBAvBJ,2CA2BI,mCACD,2CAGC,mCA/BJ,iCAmCI,oCACA,sBACA,oBAKD,mCAFG,sBACD,6CAID,mCAGA,yBACA,SACA,UAGF,gCACE,iBACA,kBACA,mBACA,gBACA,uBACD,oCAGC,eACD,0DAIG,WACA,kBACA,QACA,SACA,8BACA,UACA,mBACA,mCACA,yBAVJ,6EAcI,yFACD,4BAKH,sBACA,SACA,cACA,cACA,6BACA,cACA,cACA,gCAEA,oCd5GF,SACA,mBACA,WACA,YACA,gBACA,UACA,kBACA,Uc8GA,4BACE,gDACA,sCAEA,qDACE,gBACA,gDACD,mDAGC,YACA,uCACA,iBACA,kBAJF,6EAOI,kBACA,SACA,OACA,WACA,WACA,cACA,YACA,mCACA,4EACA,yCACD,qDAGC,iBACD,gEAGC,eAjCN,qHAqCM,iBArCN,sFA0CQ,SACA,WACD,wDAMH,uCADF,mEAII,oBACA,2DAtDN,2EAyDQ,oBACA,wDACA,oBAUR,uDAGI,eACA,WAJJ,8FAQI,WACD,qDAGC,gEACA,WACA,mBACA,wCAfJ,+EAkBM,kBACA,MACA,QACA,YACA,UACA,cACA,YACA,mCAKD,uDAIC,yCACD,uHAIC,mBACA,uCA7BJ,8DAiCI,yCACA,mBA7CN,wFAkDQ,UACA,UAnDR,0DAyDI,wCADF,qEAII,oBACA,2DALJ,6EAQM,oBACA,wDACD,4DAUL,6BACA,8BAIA,mFACE,gCACD,8BAQD,oBAEF,mDACE,oCACA,sBAKD,qDAFG,sBACD,wDAGD,WACA,gCACD,uCAKD,GACE,mBACA,UAEF,IACE,oBACA,UAEF,GACE,UACA,oBbgnED,CahmEH,4CACE,GAAK,oBACL,IAAM,uBACN,IAAM,sBACN,GAAO,oBb8mEN,Ca3mEH,4CACE,GAAK,oBACL,IAAM,sBACN,IAAM,uBACN,GAAO,oBbynEN,Ca1mEH,4CACE,GAAK,oBACL,IAAM,uBACN,IAAM,sBACN,GAAO,oBbwnEN,CarnEH,4CACE,GAAK,oBACL,IAAM,sBACN,IAAM,uBACN,GAAO,oBbmoEN,Cc1gFH,0BACE,yBACA,sBAEA,4BACE,sBACD,8CAQC,mCAHJ,uDAOI,mCACD,mDAGC,mCAXJ,6CAeI,mCAfJ,sDAmBI,mCACD,mDAGC,wBAGF,4DACE,wBACD,wDAGC,wBA/BJ,kDAmCI,wBAGF,2DACE,wBAOJ,4BAEI,cAQF,uDAGI,mBACA,cALN,gFAUQ,cACA,mBASR,sCAGI,uBACA,WAFF,4CAKI,mCACD,yDAGC,iCAXN,6CAeM,mCAfN,0DAmBM,cAjBJ,6EAoBM,iCACD,8CAMH,6BADF,sHAQI,mCApCN,kEAwCM,mBACA,cAbJ,sOAwBM,yBApDR,8EAwDQ,mBAON,2CACE,6BAhEJ,gHAuEM,mCARJ,+DAYI,mBACA,cA5EN,6NAuFQ,yBAvFR,2EA2FQ,mBACD,4CAOH,cAKF,mEACE,cAEE,+EACA,mBA5GN,yKAgHM,cACA,yBAjHN,iEAsHI,cAEE,6EACA,mBAJJ,qKAQI,cACA,yBAMJ,0IAII,sBACA,6BAzIN,8SAgJQ,iCACA,sBAjJR,4JAiKQ,sBACD,kDAWD,uBACA,cALN,iFAQQ,uBARR,oEAYQ,uBAZR,6DAgBQ,gBACA,kBAjBR,kEAsBQ,mFArBN,kEA6BM,oGA9BR,wEAyCQ,mBAzCR,oEA6CQ,mBA7CR,2FAiDQ,2CACD,uFAGC,2CApDN,+EAwDM,mBAxDN,2EA4DM,mBA5DN,6DAgEM,mBAjER,gFAsEQ,yHAKD,oEAIC,mBA/ER,wFAsFQ,qBACA,uBAvFR,oFA2FQ,6BACA,uBACD,2GAGC,sCACA,2BAjGR,uGAqGQ,sCACA,2BACD,+FAGC,6BACD,2FAGC,6BA9GR,6EAmHQ,wHAnHR,gGA2HQ,qKA1HN,oFAoIM,wHApIN,kFA6IM,uBA7IN,gQAqJM,2BArJN,oPA2JM,2BA5JR,sHAgKQ,iCAhKR,gTAsKQ,6BACA,uBAvKR,oSA6KQ,6BACA,uBA7KN,+NAmLM,2BApLR,+QA2LQ,qHA3LR,2EAmMQ,mGAnMR,uDA+MI,uBACD,wDAGC,mBAnNJ,wDAwNI,2BACD,gDASC,oCACD,0EAEC,qBACD,6JAGC,6BACA,oCACA,sBACD,gDAEC,sBAEF,sDACE,yBACD,yKAGC,sBAtBJ,iRA2BI,cA3BJ,0FA8BI,cAEwB,gFACxB,yBAjCJ,gDAoCI,cAOJ,qDAGI,6BAEuB,8EACvB,qBAE+B,qKAE/B,6BAVJ,sDAcI,6BAEkC,0FAClC,0CACA,sCAGF,sDACE,uBACD,+EAEC,yBAzBJ,6LA6BI,iCAG+B,yJAE/B,sBAlCJ,sEAsCI,mBACD,uMAGC,uBAOJ,mDAEI,6BAFJ,yEAKI,qBACD,2JAGC,6BATJ,mDAaI,mBAbJ,2JAiBI,2BAjBJ,6IAsBI,sBACD,mEAGC,mBAEyD,2LAEzD,uBACD,kDAOC,cAFJ,8EAKI,cAE2B,+EAC3B,sBAE0B,8EAC1B,iCACD,yFAEC,sCACD,yEAEC,mBAjBJ,sGAoBI,uBACD,6CASC,2BAEqB,oEACrB,gCACD,iJAGC,2BAVJ,6CAcI,mBACD,oEAEC,mBAjBJ,iJAqBI,mBACD,oDAGC,6BAzBJ,2EA4BI,gCA5BJ,sFA+BI,2CACA,sCAhCJ,iJAqCI,cACD,oEAGC,mBAzCJ,+LA6CI,uBAOJ,0CAGI,6BACA,yBAGE,wHAKI,sBACD,6CAIH,sBAjBN,6KAqBQ,sBArBR,uMAyBY,sBAaV,6CACE,gBACD,0CAGC,sBACA,6BACA,sBAHF,8DAMI,oCANJ,iHAWI,cACA,6BAZJ,0PAmBM,6BAzBR,yIA6BQ,uBAvBN,gGAgCI,sBACD,iDAGC,yBACD,oCAUD,mBAGF,2CACE,yBAPJ,2CAWI,sBADF,4DAII,mCACD,gDAID,cAnBJ,wGA2BI,sBACD,6CAGC,6BA/BJ,8DAkCM,gCAQN,gEAGI,iCfxyBF,QACA,SACA,kBACA,oBACA,sCACA,sBACA,uBACA,iCAKE,oCACA,qCe+xBF,sDACE,oCACA,cAMD,6DAHG,yBACA,sBAbN,qFAiBI,qBACD,mLAGC,6BACA,oCACA,sBAGF,qDACE,sBACD,6LAGC,sBA/BJ,0ZAqCI,cACD,oGAEC,cACD,2DAEC,yBA3CJ,0FA8CI,yBAGF,qDACE,cAUJ,6EAGI,gBAHJ,6CAMM,sBACA,sBAPN,qHAWQ,yBACD,mEAEC,sBAZN,mDAeM,sBACA,sBAKE,gHACA,cAtBR,uDA2BI,wCAQN,kXASQ,mCACA,6BACA,cAXR,sZAcU,sBACA,mCACA,6BATJ,0YAYI,mCACA,qBACD,8ZAKC,cACA,qBACA,oCAJF,sbAOI,qBACA,oCAhCZ,uLAwCM,iCf96BJ,QACA,SACA,kBACA,oBACA,sCACA,sBACA,uBACA,iCAKE,oCACA,qCem6BC,+NAIC,sBACA,mCACA,6BAhDN,gXAwDQ,sBAxDR,42GAmEU,cAnEV,oqCA2EU,sBA3EV,opCAmFU,cAK4B,wNAEhC,sBA1FN,gtBAyGQ,sBACD,iDAaD,WACA,mCAJJ,uDAOM,gCAPN,qEAUM,mCAZR,qEAeQ,mCAbN,2DAgBM,oCACA,sBACA,oBAKD,6DAFG,sBArBR,uEAyBM,mCA3BR,oFA+BU,6BA7BR,sDAmCI,cACA,6BACD,6EASG,uCADF,uGAII,mCAnDV,kFAuDQ,uCAUF,+EACE,wCAlER,yGAqEU,mCArEV,oFAyEQ,wCAzER,gHAkFM,6BACA,8BAnFN,6EA2FM,oCACA,sBAKD,+EAFG,sBAGJ,kFACE,WACA,gCCpmCN,yBACE,yBACA,WAFF,2BAII,sBAKJ,6CAGI,mCACD,sDAGC,mCAGF,kDACE,mCAXJ,4CAeI,mCAfJ,qDAmBI,gCACD,kDAGC,wBAvBJ,2DA2BI,wBA3BJ,uDA+BI,wBACD,iDAGC,wBAGF,0DACE,qBAMJ,2BAEI,cAQF,sDAGI,mBACA,WAJJ,+EASM,cACA,gBAWN,qCACE,uBACA,WAFF,2CAKI,mCACD,wDAGC,iCATJ,4CAaI,mCAbJ,yDAiBI,cAKD,4EAFG,iCAMN,6CACE,6BAIC,oHAGC,mCARJ,iEAYI,mBACA,cAbJ,mOAwBM,yBACD,6EAGC,mBACD,0CAOH,6BAhEJ,8GAuEM,mCARJ,8DAYI,mBACA,WAbJ,0NAwBM,yBAvFR,0EA2FQ,gBACD,2CAOH,cAnGJ,kEAyGI,cAzGJ,8EA4GM,mBAJJ,uKAQI,cACA,yBACD,gEAID,cAUD,4EAPG,gBACD,mKAGC,WACA,yBA9HN,wIAwIM,0BACA,6BALJ,0SAYM,qCACA,0BAjJR,0JAiKQ,0BASR,iDAKM,uBACA,cAJJ,gFAOM,uBAPN,mEAWM,uBAbR,4DAiBQ,gBACA,kBAlBR,iEAuBQ,mFAvBR,iEAiCQ,4GA/BN,uEAyCM,mBAzCN,mEA6CM,mBA7CN,0FAiDM,0CAnDR,sFAuDQ,0CACD,8EAGC,mBAzDN,0EA6DM,mBA7DN,4DAiEM,mBAjEN,+EAsEM,uHAxER,mEAiFQ,mBA/EN,uFAsFM,qBACA,uBAvFN,mFA2FM,iCACA,uBA9FR,0GAkGQ,yCACA,8BAnGR,sGAuGQ,yCACA,8BAxGR,8FA4GQ,iCA5GR,0FAgHQ,iCA9GN,4EAmHM,gIAnHN,+FA2HM,yLAOD,mFAGC,gIAKD,iFAIC,uBA9IN,6PAsJM,+BAxJR,iPA8JQ,+BA9JR,qHAkKQ,qCAlKR,6SAwKQ,iCACA,uBAzKR,iSA+KQ,iCACA,uBAhLR,4NAsLQ,+BApLN,4QA2LM,6HA3LN,0EAmMM,2GArMR,sDAiNI,uBACD,uDAGC,mBArNJ,uDA0NI,+BAOJ,+CAGI,wCAEwB,yEACxB,qBAEgC,2JAEhC,6BACA,wCACA,0BAZJ,+CAeI,yBACD,qDAEC,yBACD,uKAGC,0BACD,8QAIC,cA3BJ,yFA8BI,cA9BJ,+EAiCI,yBAEF,+CACE,cAOJ,oDAGI,gCAHJ,6EAMI,qBACD,mKAGC,iCAVJ,qDAcI,6BACD,yFAEC,0CACA,sCAlBJ,qDAsBI,uBAEuB,8EACvB,yBAE0C,2LAE1C,qCA7BJ,uJAkCI,0BACD,qEAGC,mBACD,qMAGC,uBAQF,kDACE,gCACD,wEAEC,qBALJ,yJASI,iCAGF,kDACE,mBAbJ,yJAiBI,+BAG4B,2IAE5B,0BAtBJ,kEA0BI,mBA1BJ,yLA8BI,uBAMJ,iDAEI,cACD,6EAEC,cACD,8EAEC,yBACD,6EAEC,iCAXJ,wFAcI,sCACD,wEAEC,mBAE8D,qGAC9D,uBACD,4CASC,+BACD,mEAEC,+BANJ,+IAUI,+BACD,4CAGC,mBAEqB,mEACrB,mBAEoC,+IAEpC,mBArBJ,mDAyBI,6BAEqB,0EACrB,gCAEgC,qFAChC,2CACA,sCAGoC,+IAEpC,cArCJ,mEAyCI,mBACD,6LAGC,uBAQJ,yCAGI,iCACA,yBAGE,8DAEI,yBATV,wDAaU,yBAKN,uNAKI,0BAOD,qMAHK,0BACD,4CAYP,gBAGF,yCACE,0BACA,6BACA,sBAmCD,6DAhCG,uCANJ,+GAWI,cACA,6BAlBN,sPAyBQ,6BAzBR,uIA6BQ,uBAMH,8FAGC,yBAtCN,gDA0CM,yBACD,mCAQD,mBACD,0CAGC,yBAGF,0CACE,WADF,2DAII,mCAIJ,+CACE,cAlBJ,kDAsBI,qBACD,oDAGC,yBA1BJ,4CA8BI,mCAKD,6DAFG,gCACD,+DAUD,qChBxyBF,QACA,SACA,kBACA,oBACA,0CACA,sBACA,uBACA,qCAKE,oCACA,qCgB6xBD,qDAGC,wCACA,cAEA,4DACE,yBACA,WAG2B,oFAC7B,qBACD,iLAGC,6BACA,wCACA,0BACD,oDAGC,yBAEqC,2LAErC,0BACD,sZAKC,cACD,mGAEC,cAxCJ,0DA2CI,yBACD,yFAEC,yBACD,oDAGC,cAWJ,2EAGI,gBAHJ,4CAMM,0BACA,sBALJ,mHASM,yBATN,kEAYM,yBAZN,kDAeM,sBACA,yBAKE,8GACA,cAxBV,sDA6BM,2CACD,8WAgBG,mCACA,iCACA,cAJF,kZAOI,0BACA,mCACA,iCATJ,sYAYI,kCACA,qBACD,0ZAKC,cACA,qBACA,oCA5BV,kbA+BY,qBACA,oCAMW,qLAEjB,qChB/6BJ,QACA,SACA,kBACA,oBACA,0CACA,sBACA,uBACA,qCAKE,oCACA,qCgB03BJ,6NA8CM,0BACA,mCACA,iCAhDN,4WAwDQ,yBACD,o1GAUG,cAnEV,4pCA2EU,0BA3EV,4oCAmFU,cACD,sNAMH,0BASC,wsBAMC,0BAYN,gDAGI,WACA,sBAJJ,sDAOM,sBATR,oEAYQ,gCAZR,oEAeQ,gCACD,0DAEC,gCACA,yBACA,oBApBR,4DAuBU,yBArBR,sEAyBM,gCA3BR,mFA+BU,0BA7BR,qDAmCI,cACA,6BACD,4EASG,6BAhDR,sGAmDU,yBAGJ,iFACE,6BACD,8EAUC,8BADF,wGAII,yBACD,mFAGD,8BAKN,8GAII,6BACA,8BAnFN,4EA2FM,gCACA,yBAEE,8EACA,yBACD,iFAGD,WACA","file":"mdl-ext.min.css","sourcesContent":["@charset \"UTF-8\";\n\n/**\n * @license\n * Copyright 2016-2017 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * This code is built with Google Material Design Lite,\n * which is Licensed under the Apache License, Version 2.0\n */\n\n@import \"../mixins\";\n\n.mdlext-aria-expanded-plus-minus {\n  @include mdlext-aria-expanded-toggle($font-family: inherit);\n}\n\n.mdlext-aria-expanded-more-less {\n  @include mdlext-aria-expanded-toggle($icon: 'expand_more', $icon-expanded: 'expand_less');\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/aria-expanded-toggle/_aria-expanded-toggle.scss","@import \"functions\";\n\n/// Triangle helper mixin\n/// Modified from: http://blustemy.io/drawing-pure-css-arrows-with-mixins/\n///                https://css-tricks.com/snippets/sass/css-triangle-mixin/\n/// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`\n/// @param {Color} $color [currentcolor] - Triangle color\n/// @param {Length} $size [1em] - Triangle size\n@mixin mdlext-arrow($direction: bottom, $base-width: 15px, $length: 10px, $color: inherit, $font-size: inherit) {\n  content: '';\n  width: 0;\n  height: 0;\n  font-size: $font-size;\n  line-height: $font-size;\n  border-#{mdlext-opposite-direction($direction)}: $length solid $color;\n  border-#{mdlext-opposite-direction($direction)}-width: $length;\n  border-#{mdlext-opposite-direction($direction)}-style: solid;\n  border-#{mdlext-opposite-direction($direction)}-color: $color;\n\n  $perpendicular-borders: ($base-width / 2) solid transparent;\n\n  @if $direction == top or $direction == bottom {\n    border-left: $perpendicular-borders;\n    border-right: $perpendicular-borders;\n  }\n  @else if $direction == right or $direction == left {\n    border-bottom: $perpendicular-borders;\n    border-top: $perpendicular-borders;\n  }\n}\n\n/// Hide element while making it readable for screen readers\n/// Copied from HTML5Boilerplate:\n/// https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133\n@mixin mdlext-visually-hidden() {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n\n/// Toggle for aria-expanded attribute\n///\n/// @author Leif Olsen\n/// @param {Font} $font-family ['Material Icons'] - Font family\n/// @param {Length} $font-size [24px] - Font size\n/// @param {string} $icon ['+'] - icon to display when 'aria-expanded=\"false\"'\n/// @param {string} $icon-expanded ['-'] - icon to display when 'aria-expanded=\"true\"'\n/// @link https://github.com/google/material-design-icons Modified from '.material-icons' class\n/// @param {Length} $icon-offset [0] - Icon offset\n///\n/// @example - +/- toggle\n///   .plus-minus {\n///     @include mdlext-aria-expanded-toggle($font-family: inherit, $font-size: inherit);\n///   }\n///   <div aria-expanded=\"false\">\n///     <i class=\"plus-minus\"></i>\n///   </div>\n///\n/// @example - Material Icons, expand-more/expand_less\n///   .more-less {\n///     @include mdlext-aria-expanded-toggle($content: 'expand_more', $content-expanded: 'expand_less');\n///   }\n///   <div aria-expanded=\"true\">\n///     <i class=\"more-less\"></i>\n///   </div>\n\n@mixin mdlext-aria-expanded-toggle($font-family: 'Material Icons', $font-size: 24px, $icon: '+', $icon-expanded: '-', $icon-offset: 0) {\n  font-family: $font-family;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: $font-size;  // Preferred icon size\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  line-height: 1;\n  text-transform: none;\n  letter-spacing: normal;\n  word-wrap: normal;\n  white-space: nowrap;\n  direction: ltr;\n  vertical-align: middle;\n\n  // Support for all WebKit browsers.\n  -webkit-font-smoothing: antialiased;\n  -webkit-font-feature-settings: 'liga';\n\n  // Support for Safari and Chrome.\n  text-rendering: optimizeLegibility;\n\n  // Support for Firefox.\n  -moz-osx-font-smoothing: grayscale;\n\n  // Support for IE.\n  font-feature-settings: 'liga';\n\n  &::after {\n    content: $icon;\n    margin-left: $icon-offset;\n  }\n\n  [aria-expanded='true'] > & {\n    &::after {\n      content: $icon-expanded;\n      margin-left: $icon-offset;\n    }\n  }\n}\n\n\n/// Keyframe mixin\n/// Modified from: http://sassbreak.com/nested-keyframe-rules-sass/\n/// Modified from: http://sassbreak.com/sass-tools-and-snippets/\n///\n/// @example\n///\n/// .some-element {\n///   animation: 10s linear infinite;\n///\n///   @include mdlext-animation-keyframes {\n///     from {\n///       background-position: 0% 0%;\n///     }\n///     to {\n///       background-position: 114.2857% 0%;\n///     }\n///   }\n/// }\n\n@mixin mdlext-animation-keyframes {\n  $animation-name: unique-id();\n  animation-name: $animation-name;\n\n  @keyframes #{$animation-name} {\n    @content;\n  }\n}\n\n\n/// Flexible title mixin\n/// A flexible title consists of three regions, left, middle and right.\n/// The left and right regions are optional and will typically contain state icons\n/// or act as a toolbar. The middle region should contain the title text.\n///\n/// @author Leif Olsen\n/// @param {String} $class - class name\n/// @gutter {Length} [8px] - horizontal spacing between title elements\n///\n/// @example\n///\n/// @include mdlext-flexible-title(my-title) {\n///   overflow: hidden;\n///   background-color: yellow;\n///   &__text {\n///     font-size: 20px;\n///     letter-spacing: 0.02em;\n///     font-weight: 400;\n///     line-height: 1.1;\n///   }\n/// }\n///\n/// <header class=\"my-title\">\n///   <i class=\"material-icons\" role=\"presentation\" style=\"font-size: 28px;\">info</i>\n///   <h2 class=\"my-title__text\">A title</h2>\n///   <span class=\"my-title__spacer\"></span>\n///   <i class=\"mdlext-aria-expanded-more-less\" role=\"presentation\" style=\"font-size: 28px;\"></i>\n/// </header>\n\n@mixin mdlext-flexible-title($class, $gutter: 8px) {\n  .#{$class} {\n    box-sizing: border-box;\n    position: relative;\n    width: 100%;\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n    margin: 0;\n    padding: 0 $gutter;\n\n    &__text,\n    &__text > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    > * {\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0 $gutter 0 0;\n    }\n\n    > *:last-child {\n      padding-right: 0;\n    }\n\n    // Used to align elements inside a header or drawer, by growing to fill\n    // remaining space. Commonly used for aligning elements to the right.\n    &__spacer {\n      flex: 1;\n    }\n\n    @content;\n  }\n}\n\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/_mixins.scss","@charset \"UTF-8\";\n\n// Material Design Lite\n@import '~material-design-lite/src/variables';\n@import '~material-design-lite/src/mixins';\n\n// mdl-ext\n@import 'mdl-ext';\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/mdl-ext-build.scss","/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n@import \"../variables\";\n\n.mdlext-layout__sticky-header {\n  position: absolute;\n  overflow: visible;\n  background: $mdlext-sticky-header-background;\n  transition: 0.1s ease-in-out;\n\n  &.mdlext-is-scroll {\n    background: $mdlext-sticky-header-background-scroll;\n  }\n}\n\n*:not(.is-small-screen) .mdlext-layout__sticky-header {\n  .mdl-layout__drawer-button {\n    visibility: hidden;\n  }\n  .mdl-layout__header-row {\n    padding-left: $padding;\n  }\n}\n\n*:not(.mdl-layout--fixed-drawer).has-drawer .mdlext-layout__sticky-header,\n.is-small-screen.has-drawer .mdlext-layout__sticky-header {\n  display: flex;\n\n  .mdl-layout__drawer-button {\n    visibility: visible;\n  }\n  .mdl-layout__header-row {\n    padding-left: $padding + $layout-drawer-button-desktop-size;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/sticky-header/_sticky-header.scss","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * SASS based on css from Google Chrome Dialog polyfill, https://github.com/GoogleChrome/dialog-polyfill\n * @include 'node_modules/dialog-polyfill/dialog-polyfill.css' before using this\n */\n\n@import \"../variables\";\n\ndialog.mdlext-dialog {\n  position: absolute;\n  border: 0;\n  opacity: 0;\n  padding: $mdlext-dialog-padding;\n  background-color: $mdlext-dialog-background-color;\n\n  &[open] {\n    animation: mdlext-open-dialog $mdlext-dialog-open-animation;\n  }\n  &[open]::backdrop {\n    animation: mdlext-darken-backdrop $mdlext-dialog-backdrop-animation;\n  }\n  &[open] + .backdrop {\n    animation: mdlext-darken-backdrop $mdlext-dialog-backdrop-animation;\n  }\n}\n\n@keyframes mdlext-darken-backdrop {\n  to { background: $mdlext-dialog-backdrop-color; }\n}\n@keyframes mdlext-open-dialog {\n  to { opacity: 1; }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/dialog/dialog.scss","@charset \"UTF-8\";\n\n/**\n * This code is modified from Material Design Lite _grid.sass,\n * which is Licensed under the Apache License, Version 2.0\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n */\n\n///////////////////////////////////////////////////////////////////////\n//\n// Grid media queries, modified from Material Design Lite _grid.sass\n//\n///////////////////////////////////////////////////////////////////////\n// Use of this module requires the user to include variables from material-design-lite in hers/his main SASS module\n//@import \"../../node_modules/material-design-lite/src/variables\";\n\n\n.mdlext-grid {\n  display: flex;\n  flex-flow: row wrap;\n  margin: 0 auto;\n  align-items: stretch;\n\n  &.mdlext-grid--no-spacing {\n    padding: 0;\n  }\n}\n\n.mdlext-cell {\n  box-sizing: border-box;\n}\n\n\n.mdlext-cell--top {\n  align-self: flex-start;\n}\n\n.mdlext-cell--middle {\n  align-self: center;\n}\n\n.mdlext-cell--bottom {\n  align-self: flex-end;\n}\n\n.mdlext-cell--stretch {\n  align-self: stretch;\n}\n\n.mdlext-grid.mdlext-grid--no-spacing > .mdlext-cell {\n  margin: 0;\n}\n\n// Define order override classes.\n@for $i from 1 through $grid-max-columns {\n  .mdlext-cell--order-#{$i} {\n    order: $i;\n  }\n}\n\n\n// Mixins for width calculation.\n@mixin partial-size($size, $columns, $gutter) {\n  width: calc(#{(($size / $columns) * 100) + \"%\"} - #{$gutter});\n\n  .mdlext-grid--no-spacing > & {\n    width: #{(($size / $columns) * 100) + \"%\"};\n  }\n}\n\n@mixin full-size($gutter) {\n  @include partial-size(1, 1, $gutter);\n}\n\n@mixin offset-size($size, $columns, $gutter) {\n  margin-left: calc(#{(($size / $columns) * 100) + \"%\"} + #{$gutter / 2});\n\n  .mdlext-grid.mdlext-grid--no-spacing > & {\n    margin-left: #{(($size / $columns) * 100) + \"%\"};\n  }\n}\n\n\n\n////////// Phone //////////\n\n/* stylelint-disable */\n@media (max-width: $grid-tablet-breakpoint - 1) {\n/* stylelint-enable */\n  .mdlext-grid {\n    padding: $grid-phone-margin - ($grid-phone-gutter / 2);\n  }\n\n  .mdlext-cell {\n    margin: $grid-phone-gutter / 2;\n    @include partial-size($grid-cell-default-columns, $grid-phone-columns, $grid-phone-gutter);\n  }\n\n  .mdlext-cell--hide-phone {\n    display: none !important;\n  }\n\n  // Define order override classes.\n  @for $i from 1 through $grid-max-columns {\n    .mdlext-cell--order-#{$i}-phone.mdlext-cell--order-#{$i}-phone {\n      order: $i;\n    }\n  }\n\n  // Define partial sizes for columnNumber < totalColumns.\n  @for $i from 1 through ($grid-phone-columns - 1) {\n    .mdlext-cell--#{$i}-col,\n    .mdlext-cell--#{$i}-col-phone.mdlext-cell--#{$i}-col-phone {\n      @include partial-size($i, $grid-phone-columns, $grid-phone-gutter);\n    }\n  }\n\n  // Define 100% for everything else.\n  @for $i from $grid-phone-columns through $grid-desktop-columns {\n    .mdlext-cell--#{$i}-col,\n    .mdlext-cell--#{$i}-col-phone.mdlext-cell--#{$i}-col-phone {\n      @include full-size($grid-phone-gutter);\n    }\n  }\n\n  // Define valid phone offsets.\n  @for $i from 1 through ($grid-phone-columns - 1) {\n    .mdlext-cell--#{$i}-offset,\n    .mdlext-cell--#{$i}-offset-phone.mdlext-cell--#{$i}-offset-phone {\n      @include offset-size($i, $grid-phone-columns, $grid-phone-gutter);\n    }\n  }\n}\n\n\n////////// Tablet //////////\n\n/* stylelint-disable */\n@media (min-width: $grid-tablet-breakpoint) and (max-width: $grid-desktop-breakpoint - 1) { /* stylelint-enable */\n  .mdlext-grid {\n    padding: $grid-tablet-margin - ($grid-tablet-gutter / 2);\n  }\n\n  .mdlext-cell {\n    margin: $grid-tablet-gutter / 2;\n    @include partial-size($grid-cell-default-columns, $grid-tablet-columns, $grid-tablet-gutter);\n  }\n\n  .mdlext-cell--hide-tablet {\n    display: none !important;\n  }\n\n  // Define order override classes.\n  @for $i from 1 through $grid-max-columns {\n    .mdlext-cell--order-#{$i}-tablet.mdlext-cell--order-#{$i}-tablet {\n      order: $i;\n    }\n  }\n\n  // Define partial sizes for columnNumber < totalColumns.\n  @for $i from 1 through ($grid-tablet-columns - 1) {\n    .mdlext-cell--#{$i}-col,\n    .mdlext-cell--#{$i}-col-tablet.mdlext-cell--#{$i}-col-tablet {\n      @include partial-size($i, $grid-tablet-columns, $grid-tablet-gutter);\n    }\n  }\n\n  // Define 100% for everything else.\n  @for $i from $grid-tablet-columns through $grid-desktop-columns {\n    .mdlext-cell--#{$i}-col,\n    .mdlext-cell--#{$i}-col-tablet.mdlext-cell--#{$i}-col-tablet {\n      @include full-size($grid-tablet-gutter);\n    }\n  }\n\n  // Define valid tablet offsets.\n  @for $i from 1 through ($grid-tablet-columns - 1) {\n    .mdlext-cell--#{$i}-offset,\n    .mdlext-cell--#{$i}-offset-tablet.mdlext-cell--#{$i}-offset-tablet {\n      @include offset-size($i, $grid-tablet-columns, $grid-tablet-gutter);\n    }\n  }\n}\n\n\n////////// Desktop //////////\n\n@media (min-width: $grid-desktop-breakpoint) {\n  .mdlext-grid {\n    padding: $grid-desktop-margin - ($grid-desktop-gutter / 2);\n  }\n\n  .mdlext-cell {\n    margin: $grid-desktop-gutter / 2;\n    @include partial-size($grid-cell-default-columns, $grid-desktop-columns, $grid-desktop-gutter);\n  }\n\n  .mdlext-cell--hide-desktop {\n    display: none !important;\n  }\n\n  // Define order override classes.\n  @for $i from 1 through $grid-max-columns {\n    .mdlext-cell--order-#{$i}-desktop.mdlext-cell--order-#{$i}-desktop {\n      order: $i;\n    }\n  }\n\n  // Define partial sizes for all numbers of columns.\n  @for $i from 1 through $grid-desktop-columns {\n    .mdlext-cell--#{$i}-col,\n    .mdlext-cell--#{$i}-col-desktop.mdlext-cell--#{$i}-col-desktop {\n      @include partial-size($i, $grid-desktop-columns, $grid-desktop-gutter);\n    }\n  }\n\n  // Define valid desktop offsets.\n  @for $i from 1 through ($grid-desktop-columns - 1) {\n    .mdlext-cell--#{$i}-offset,\n    .mdlext-cell--#{$i}-offset-desktop.mdlext-cell--#{$i}-offset-desktop {\n      @include offset-size($i, $grid-desktop-columns, $grid-desktop-gutter);\n    }\n  }\n}\n\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/grid/_grid-media-queries.scss","@charset \"UTF-8\";\n\n/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n * A lightboard is a translucent surface illuminated from behind, used for situations\n * where a shape laid upon the surface needs to be seen with high contrast. In the \"old days\" of photography\n * photograpers used a lightboard to get a quick view of their slides. The goal is to create a responsive lightbox\n * design, based on flex layout, similar to what is used in Adobe LightRoom to browse images.\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n@import \"../variables\";\n\nul.mdlext-lightboard {\n  list-style: none;\n}\n\n.mdlext-lightboard {\n  box-sizing: border-box;\n  margin: 0 auto;\n  padding: 0;\n  display: flex;\n  flex-flow:row wrap;\n  align-items: stretch;\n\n  *,\n  *::before,\n  *::after,\n  input[type=\"search\"] {\n    box-sizing: border-box;\n  }\n\n  .mdlext-lightboard__slide {\n    background-color: $mdlext-lightboard-slide-background-color;\n    border: 1px solid $mdlext-lightboard-slide-border-color;\n    border-radius: $mdlext-lightboard-slide-border-radius;\n    box-shadow: $mdlext-lightboard-slide-box-shadow;\n    position: relative;\n    display: block;\n    max-width: $mdlext-lightboard-slide-max-size;\n\n    &::before {\n      // 1:1 ratio\n      // TODO: Use a class for ratio so the grid can display slides with different ratios (16:9, 16:10, 4:3 ...)\n      content: '';\n      display: block;\n      padding-top: 100%;\n    }\n    &:hover,\n    &:active,\n    &:focus {\n      border-color: $mdlext-lightboard-slide-border-color-hover;\n      background-color: $mdlext-lightboard-slide-background-color-hover;\n      box-shadow: $mdlext-lightboard-slide-box-shadow-hover;\n\n      figcaption {\n        color: rgba(0, 0, 0, 1) !important;\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n    }\n    &:focus {\n      outline-offset: -2px;\n      outline-color: $mdlext-lightboard-focus-outline-color;\n    }\n    &[aria-selected='true'] {\n      background-color: $mdlext-lightboard-slide-active-bacground-color;\n\n      figcaption {\n        color: rgba(0, 0, 0, 1) !important;\n        background-color: rgba(255, 255, 255, 0.2);\n      }\n    }\n    &__frame,\n    &__ripple-container {\n      text-decoration: none;\n      display: block;\n      overflow: hidden;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n\n      &:focus {\n        outline-offset: -2px;\n        outline-color: $mdlext-lightboard-focus-outline-color;\n      }\n      & .mdl-ripple {\n        background: $mdlext-lightboard-ripple-color;\n      }\n      figure {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n\n        img {\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: auto;\n          max-width: 100%;\n          max-height: 100%;\n          border-width: 0;\n          border-radius: $mdlext-lightboard-slide-inner-border-radius;\n        }\n        figcaption {\n          @include typo-caption($colorContrast: false, $usePreferred: true);\n\n          color: $mdlext-lightboard-figcaption-text-color;\n          position: absolute;\n          bottom: -2px;\n          white-space: nowrap;\n          overflow: hidden;\n          max-width: 100%;\n          width: 100%;\n          text-align: center;\n          text-overflow: ellipsis;\n          padding: 4px 0;\n        }\n      }\n      &:hover {\n        figcaption {\n          // As far as I can see there is no way to darken/lighten a text color\n          // defined by MDL, due to the \"unqote\" functions.\n          // So this is a hack\n          color: rgba(0, 0, 0, 1) !important;\n          background-color: rgba(255, 255, 255, 0.2);\n        }\n      }\n    }\n  }\n}\n\n////// Media / Element queries default, Small //////\n.mdlext-lightboard {\n  padding: calc((#{$mdlext-lightboard-small-margin} - #{$mdlext-lightboard-small-gutter}) / 2);\n\n  .mdlext-lightboard__slide {\n    margin: calc(#{$mdlext-lightboard-small-gutter} / 2);\n    width: calc(1 / #{$mdlext-lightboard-small-columns} * 100% - #{$mdlext-lightboard-small-gutter});\n\n    .mdlext-lightboard__slide__frame figure {\n      margin: $mdlext-lightboard-small-frame-width;\n    }\n  }\n  &.mdlext-lightboard--no-spacing {\n    padding: 0;\n\n    .mdlext-lightboard__slide {\n      margin: 0;\n      width: calc(1 / #{$mdlext-lightboard-small-columns} * 100%);\n    }\n  }\n}\n\n// Import one of _lightboard-media-queries.scss or _lightboard-eq-js.scss to complete SASS\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/lightboard/_lightboard.scss","/**\n * Copyright 2015 Google Inc. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/* Typography */\n\n@mixin typo-preferred-font($usePreferred: true) {\n  @if $usePreferred {\n    font-family: $preferred_font;\n  }\n}\n\n@mixin typo-display-4($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 112px;\n  font-weight: 300;\n  line-height: 1;\n  letter-spacing: -0.04em;\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-display-3($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 56px;\n  font-weight: 400;\n  line-height: 1.35;\n  letter-spacing: -0.02em;\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-display-2($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 45px;\n  font-weight: 400;\n  line-height: 48px;\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-display-1($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 34px;\n  font-weight: 400;\n  line-height: 40px;\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-headline($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 24px;\n  font-weight: 400;\n  line-height: 32px;\n  -moz-osx-font-smoothing: grayscale;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-title($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.02em;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-subhead($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: 0.04em;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 28px;\n  letter-spacing: 0.04em;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-body-2($colorContrast: false, $usePreferred: false) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 14px;\n  @if $usePreferred {\n    font-weight: 500;\n  } @else {\n    font-weight: bold;\n  }\n  line-height: 24px;\n  letter-spacing: 0;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-body-1($colorContrast: false, $usePreferred: false) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 24px;\n  letter-spacing: 0;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-caption($colorContrast: false, $usePreferred: false) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: 0;\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  position: relative;\n  font-size: 24px;\n  font-weight: 300;\n  font-style: italic;\n  line-height: 1.35;\n  letter-spacing: 0.08em;\n\n  &:before {\n    position: absolute;\n    left: -0.5em;\n    content: 'â';\n  }\n\n  &:after {\n    content: 'â';\n    margin-left: -0.05em;\n  }\n\n  @if $colorContrast {\n    opacity: 0.54;\n  }\n}\n\n@mixin typo-menu($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-button($colorContrast: false, $usePreferred: true) {\n  @include typo-preferred-font($usePreferred);\n  font-size: 14px;\n  font-weight: 500;\n  text-transform: uppercase;\n  line-height: 1;\n  letter-spacing: 0;\n\n  @if $colorContrast {\n    opacity: 0.87;\n  }\n}\n\n@mixin typo-icon() {\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  word-wrap: normal;\n  font-feature-settings: 'liga';\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* Shadows */\n\n// Focus shadow mixin.\n@mixin focus-shadow() {\n  box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);\n}\n\n@mixin shadow-2dp() {\n  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n              0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-3dp() {\n  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),\n              0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);\n}\n@mixin shadow-4dp() {\n  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n              0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-6dp() {\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n              0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n@mixin shadow-8dp() {\n  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n              0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n@mixin shadow-16dp() {\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0  6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n              0  8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n@mixin shadow-24dp() {\n  box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),\n              0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),\n              0 24px 38px  3px rgba(0, 0, 0, $shadow-key-umbra-opacity);\n}\n\n/* Animations */\n\n@mixin material-animation-fast-out-slow-in($duration:0.2s) {\n  transition-duration: $duration;\n  transition-timing-function: $animation-curve-fast-out-slow-in;\n}\n\n@mixin material-animation-linear-out-slow-in($duration:0.2s) {\n  transition-duration: $duration;\n  transition-timing-function: $animation-curve-linear-out-slow-in;\n}\n\n@mixin material-animation-fast-out-linear-in($duration:0.2s) {\n  transition-duration: $duration;\n  transition-timing-function: $animation-curve-fast-out-linear-in;\n}\n\n@mixin material-animation-default($duration:0.2s) {\n  transition-duration: $duration;\n  transition-timing-function: $animation-curve-default;\n}\n\n/* Dialog */\n\n@mixin dialog-width($units:5) {\n  @if(type_of($units) != 'number') {\n    @error \"The unit given to dialog-width should be a number.\";\n  }\n  // 56dp is the base unit width for Dialogs.\n  // With 5 units being the number of units for a mobile device.\n  // https://goo.gl/sK2O5o\n  width: $units * 56px;\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///~/material-design-lite/src/_mixins.scss","@charset \"UTF-8\";\n\n//////////////////////////////\n//\n// Lightboard media queries\n//\n//////////////////////////////\n@import \"../variables\";\n\n////////// Small /////////////\n//@media (max-width: $mdlext-lightboard-medium-small-breakpoint - 1) {\n//  // This is the default, see: _lightboard.scss\n//}\n\n////////// Medium small //////////\n/* stylelint-disable */\n@media (min-width: $mdlext-lightboard-medium-small-breakpoint) and (max-width: $mdlext-lightboard-medium-breakpoint - 1) { /* stylelint-enable */\n  .mdlext-lightboard {\n    padding: calc((#{$mdlext-lightboard-medium-small-margin} - #{$mdlext-lightboard-medium-small-gutter}) / 2);\n\n    .mdlext-lightboard__slide {\n      margin: calc(#{$mdlext-lightboard-medium-small-gutter} / 2);\n      width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100% - #{$mdlext-lightboard-medium-small-gutter});\n\n      .mdlext-lightboard__slide__frame figure {\n        margin: $mdlext-lightboard-medium-small-frame-width;\n      }\n    }\n    &.mdlext-lightboard--no-spacing {\n      padding: 0;\n\n      .mdlext-lightboard__slide {\n        margin: 0;\n        width: calc(1 / #{$mdlext-lightboard-medium-small-columns} * 100%);\n      }\n    }\n  }\n}\n\n////////// Medium //////////\n/* stylelint-disable */\n@media (min-width: $mdlext-lightboard-medium-breakpoint) and (max-width: $mdlext-lightboard-medium-large-breakpoint - 1) { /* stylelint-enable */\n  .mdlext-lightboard {\n    padding: calc((#{$mdlext-lightboard-medium-margin} - #{$mdlext-lightboard-medium-gutter}) / 2);\n\n    .mdlext-lightboard__slide {\n      margin: calc(#{$mdlext-lightboard-medium-gutter} / 2);\n      width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100% - #{$mdlext-lightboard-medium-gutter});\n\n      .mdlext-lightboard__slide__frame figure {\n        margin: $mdlext-lightboard-medium-frame-width;\n      }\n    }\n    &.mdlext-lightboard--no-spacing {\n      padding: 0;\n\n      .mdlext-lightboard__slide {\n        margin: 0;\n        width: calc(1 / #{$mdlext-lightboard-medium-columns} * 100%);\n      }\n    }\n  }\n}\n\n////////// Medium large //////////\n/* stylelint-disable */\n@media (min-width: $mdlext-lightboard-medium-large-breakpoint)  and (max-width: $mdlext-lightboard-large-breakpoint - 1) { /* stylelint-enable */\n  .mdlext-lightboard {\n    padding: calc((#{$mdlext-lightboard-medium-large-margin} - #{$mdlext-lightboard-medium-large-gutter}) / 2);\n\n    .mdlext-lightboard__slide {\n      margin: calc(#{$mdlext-lightboard-medium-large-gutter} / 2);\n      width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100% - #{$mdlext-lightboard-medium-large-gutter});\n\n      .mdlext-lightboard__slide__frame figure {\n        margin: $mdlext-lightboard-medium-large-frame-width;\n      }\n    }\n    &.mdlext-lightboard--no-spacing {\n      padding: 0;\n\n      .mdlext-lightboard__slide {\n        margin: 0;\n        width: calc(1 / #{$mdlext-lightboard-medium-large-columns} * 100%);\n      }\n    }\n  }\n}\n\n////////// Large //////////\n@media (min-width: $mdlext-lightboard-large-breakpoint) {\n  .mdlext-lightboard {\n    padding: calc((#{$mdlext-lightboard-large-margin} - #{$mdlext-lightboard-large-gutter}) / 2);\n\n    .mdlext-lightboard__slide {\n      margin: calc(#{$mdlext-lightboard-large-gutter} / 2);\n      width: calc(1 / #{$mdlext-lightboard-large-columns} * 100% - #{$mdlext-lightboard-large-gutter});\n\n      .mdlext-lightboard__slide__frame figure {\n        margin: $mdlext-lightboard-large-frame-width;\n      }\n    }\n    &.mdlext-lightboard--no-spacing {\n      padding: 0;\n\n      .mdlext-lightboard__slide {\n        margin: 0;\n        width: calc(1 / #{$mdlext-lightboard-large-columns} * 100%);\n      }\n    }\n  }\n}\n\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/lightboard/_lightboard-media-queries.scss","@charset \"UTF-8\";\n\n/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n@import \"../variables\";\n\n.mdlext-lightbox {\n  user-select: none;\n  cursor: default;\n  position: relative;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  border: $mdlext-lightbox-border;\n  border-radius: $mdlext-lightbox-border-radius;\n  background-color: $mdlext-lightbox-background-color;\n  box-sizing: border-box;\n  outline: 0;\n  display: block; // display: flex and IE11 has issues with reposition. Set display:block for now.\n\n  *,\n  *::before,\n  *::after,\n  input[type=\"search\"] {\n    box-sizing: border-box;\n  }\n\n  .mdlext-lightbox__slider {\n    // Displays prevvious, current and next image while dragging\n    // Elements are created by lightbox component when dragging starts\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    justify-content: center;\n\n    .mdlext-lightbox__slider__slide {\n      flex-shrink: 0;\n      display: block;\n      text-align: left;\n      color: #7f7f7f;\n      background-size: cover;\n      background-position: center;\n      background-repeat: no-repeat;\n\n      //&:nth-child(1),\n      //&:nth-child(3) {\n      //  filter: blur(1px);\n      //}\n    }\n  }\n\n  figure {\n    margin: $mdlext-lightbox-figure-margin;\n    padding: $mdlext-lightbox-figure-padding;\n    position: relative;\n\n    img {\n      width: 100%;\n      max-width: 100%;\n      height: auto;\n      border: 0;\n      outline: 0;\n    }\n    figcaption {\n      @include typo-caption($colorContrast: false, $usePreferred: true);\n\n      display: block;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      max-width: 100%;\n      height: auto;\n      max-height: 50%;\n      overflow: auto;\n      padding: 8px;\n      background-color: $mdlext-lightbox-figcaption-background-color;\n      transform-origin: bottom;\n      transform: scaleY(0);\n      transition: 0.2s ease-in-out;\n\n      &.mdlext-lightbox__show-figcaption {\n        transform: scaleY(1);\n      }\n      tbody {\n        th {\n          text-align: left;\n        }\n        th,\n        td {\n          vertical-align: text-top;\n        }\n      }\n    }\n  }\n  .mdl-card__menu {\n    color: #ffffff;\n    z-index: 1;\n  }\n  footer {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: $mdlext-lightbox-footer-background-color;\n\n    .mdl-card__supporting-text {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      height: $card-supporting-text-line-height;\n      width: 100%;\n    }\n    nav {\n      display: flex;\n    }\n  }\n\n  &.mdlext-lightbox--sticky-footer footer {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/lightbox/_lightbox.scss","@charset \"UTF-8\";\n\n/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n * A carousel ...\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n\nul.mdlext-carousel {\n  list-style: none;\n}\n\n.mdlext-carousel {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  height: 100%;  // Use a container to constrain height and width\n  width: 100%;\n  display: block;\n  white-space: nowrap;\n  font-size: 0;\n  background-color: transparent;\n}\n\n.mdlext-carousel__slide {\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  outline: 0;\n  margin: 0 $mdlext-carousel-slide-margin-horizontal;\n  padding:0;\n  height: 100%;\n  border-top: $mdlext-carousel-slide-border-top-width solid transparent; // Makes room for the animated select/focus line\n\n  //&:focus,\n  &[aria-selected],\n  &[aria-selected='true'] {\n    figcaption {\n      // As far as I can see there is no way to darken/lighten a text color\n      // defined by MDL, due to the \"unqote\" functions.\n      // So this is a hack\n      color: rgba(0, 0, 0, 1) !important;\n      background-color: rgba(255, 255, 255, 0.25);\n    }\n  }\n\n  &[aria-selected]::after,\n  &[aria-selected='true']::after {\n    height: $mdlext-carousel-slide-border-top-width;\n    width: 100%;\n    display: block;\n    content: ' ';\n    top: (-$mdlext-carousel-slide-border-top-width);\n    left: 0;\n    position: absolute;\n    background: $mdlext-carousel-slide-border-top-color;\n    animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;\n    transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);\n  }\n\n\n  a {\n    text-decoration: none;\n  }\n\n  figure {\n    box-sizing: border-box;\n    position: relative;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n\n    img {\n      box-sizing: border-box;\n      max-height: 100%;\n    }\n\n    figcaption {\n      box-sizing: border-box;\n      @include typo-caption($colorContrast: false, $usePreferred: true);\n\n      color: $mdlext-carousel-slide-figcaption-color;\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      white-space: nowrap;\n      overflow: hidden;\n      max-width: 100%;\n      width: 100%;\n      text-align: center;\n      text-overflow: ellipsis;\n      padding: 4px 0;\n    }\n    &:hover {\n      figcaption {\n        // As far as I can see there is no way to darken/lighten a text color\n        // defined by MDL, due to the \"unqote\" functions.\n        // So this is a hack\n        color: rgba(0, 0, 0, 1) !important;\n        background-color: rgba(255, 255, 255, 0.25);\n      }\n    }\n  }\n\n  .mdlext-carousel__slide__ripple-container {\n    text-decoration: none;\n    display: block;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 0;\n\n    & .mdl-ripple {\n      background: $mdlext-carousel-slide-ripple-color;\n    }\n  }\n}\n\n\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/carousel/_carousel.scss","/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n * Copied/Modified/Inspired from/by:\n *   https://github.com/google/material-design-lite/tree/master/src/textfield\n *   http://red-team-design.com/making-html-dropdowns-not-suck/\n *   http://codepen.io/etcpe9/pen/PqyOye,\n *   http://codepen.io/pudgereyem/pen/PqBxQx\n *   https://github.com/MEYVN-digital/mdl-selectfield\n *   https://github.com/mebibou/mdl-selectfield\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n\n@import \"../mixins\";\n\n// The container for the selectfield.\n.mdlext-selectfield {\n  box-sizing: border-box;\n  position: relative;\n  font-size: $input-text-font-size;\n  display: inline-block;\n  width: 300px;\n  max-width: 100%;\n  margin: 0;\n  padding: $input-text-vertical-spacing 0;\n\n  // Align buttons, if used.\n  & .mdl-button {\n    bottom: $input-text-vertical-spacing;\n    position: absolute;\n  }\n\n  // Styling the down arrow\n  &::after {\n    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length);\n\n    position: absolute;\n    right: 0.5em;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n  }\n}\n\n.mdlext-selectfield.is-disabled {\n  &::after {\n    color: $input-text-disabled-color;\n    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $input-text-disabled-color);\n  }\n}\n\n// Optional class to align right.\n.mdlext-selectfield--align-right {\n  text-align: right;\n}\n\n// Optional class to display at full width.\n.mdlext-selectfield--full-width {\n  width: 100%;\n}\n\n// Optional class to make the select field expandable.\n.mdlext-selectfield--expandable {\n  min-height: $input-text-button-size;\n  min-width: $input-text-button-size;\n  width: auto;\n}\n\n// Styling for the select element.\n.mdlext-selectfield__select {\n\n  // Reset select\n  box-sizing: border-box;\n  border: 0;\n  border-radius: 0;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  -ms-appearance: none;\n  appearance: none;\n  text-indent: 0.01px; // Removes default arrow from firefox\n  text-overflow: '';   // Removes default arrow from firefox\n  outline: none;\n  box-shadow: none;\n  // End Reset select\n\n  font-size: $input-text-font-size;\n  font-family: $performance_font;\n  padding: $input-text-padding calc(1.2em + #{$input-text-padding}) $input-text-padding 0;\n  width: $input-text-width;\n  border-bottom: 1px solid $input-text-bottom-border-color;\n  display: block;\n  margin: 0;\n  background: none;\n  text-align: left;\n  color: inherit;\n\n  // Mozilla, remove focusring\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 #000000;\n  }\n\n  // MS, remove selected option background color\n  &:focus::-ms-value {\n    background-color: inherit;\n    color: inherit;\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n\n  .mdlext-selectfield.is-focused & {\n    outline: none;\n  }\n\n  .mdlext-selectfield.is-invalid & {\n    border-color: $input-text-error-color;\n    box-shadow: none;\n  }\n\n  fieldset[disabled] .mdlext-selectfield &,\n  .mdlext-selectfield.is-disabled & {\n    border-bottom: 1px dotted $input-text-disabled-color;\n    color: $input-text-disabled-text-color;\n    background-color: transparent;\n  }\n\n  option {\n    color: $text-color-primary;\n    box-sizing: border-box;\n    background-color: inherit;\n  }\n}\n\n// Styling for the label / floating label.\n.mdlext-selectfield__label {\n  box-sizing: border-box;\n  color: $input-text-label-color;\n  font-size: $input-text-font-size;\n  top: ($input-text-padding + $input-text-vertical-spacing);\n  bottom: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  position: absolute;\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-align: left;\n\n  .mdlext-selectfield.is-dirty &,\n  .mdlext-selectfield.has-placeholder & {\n    visibility: hidden;\n  }\n\n  // Floating Label\n  .mdlext-selectfield--floating-label & {\n    @include material-animation-default();\n  }\n\n  .mdlext-selectfield--floating-label.has-placeholder & {\n    transition: none;\n  }\n\n  fieldset[disabled] .mdlext-selectfield &,\n  .mdlext-selectfield.is-disabled.is-disabled & {\n    color: $input-text-disabled-text-color;\n  }\n\n  .mdlext-selectfield--floating-label.is-focused &,\n  .mdlext-selectfield--floating-label.is-dirty.is-dirty &,\n  .mdlext-selectfield--floating-label.has-placeholder & {\n    color: $input-text-highlight-color;\n    font-size: $input-text-floating-label-fontsize;\n    top: $input-text-vertical-spacing - ($input-text-floating-label-fontsize + $input-text-padding);\n    visibility: visible;\n  }\n\n  .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__expandable-holder &,\n  .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__expandable-holder &,\n  .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__expandable-holder & {\n    top: -($input-text-floating-label-fontsize + $input-text-padding);\n  }\n\n  .mdlext-selectfield--floating-label.is-invalid & {\n    color: $input-text-error-color;\n    font-size: $input-text-floating-label-fontsize;\n  }\n\n  // The after label is the colored underline for the Selectfield.\n  &::after {\n    background-color: $input-text-highlight-color;\n    bottom: $input-text-vertical-spacing;\n    content: '';\n    height: 2px;\n    left: 45%;\n    position: absolute;\n    @include material-animation-default();\n\n    visibility: hidden;\n    width: 10px;\n  }\n\n  .mdlext-selectfield.is-focused &::after {\n    left: 0;\n    visibility: visible;\n    width: 100%;\n  }\n\n  .mdlext-selectfield.is-invalid &::after {\n    background-color: $input-text-error-color;\n  }\n}\n\n// SelectField Error.\n.mdlext-selectfield__error {\n  color: $input-text-error-color;\n  font-size: $input-text-floating-label-fontsize;\n  position: absolute;\n  margin-top: 3px;\n  visibility: hidden;\n  display: block;\n\n  .mdlext-selectfield.is-invalid & {\n    visibility: visible;\n  }\n}\n\n// Expandable Holder.\n.mdlext-selectfield__expandable-holder {\n  display: inline-block;\n  position: relative;\n  margin-left: $input-text-button-size;\n\n  @include material-animation-default();\n\n  // Safari (possibly others) need to be convinced that this field is actually\n  // visible, otherwise it cannot be tabbed to nor focused via a <label>.\n  // TODO: In some cases (Retina displays), this is big enough to render the\n  // inner element :(\n  max-width: 0.1px;\n\n  .mdlext-selectfield.is-focused &,\n  .mdlext-selectfield.is-dirty & {\n    // This is an unfortunate hack. Animating between widths in percent (%)\n    // in many browsers (Chrome, Firefox) only animates the inner visual style\n    // of the input - the outer bounding box still 'jumps'.\n    // Thus assume a sensible maximum, and animate to/from that value.\n    max-width: 600px;\n  }\n  .mdlext-selectfield__label::after {\n    bottom: 0;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/selectfield/_selectfield.scss","@charset \"UTF-8\";\n\n/**\n * @license\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * This code is built with Google Material Design Lite,\n * which is Licensed under the Apache License, Version 2.0\n */\n\n/* Moved to aria-expanded-toggle.scss\n\n.mdlext-aria-expanded-plus-minus {\n  @include mdlext-aria-expanded-toggle($font-family: inherit);\n}\n\n.mdlext-aria-expanded-more-less {\n  @include mdlext-aria-expanded-toggle($icon: 'expand_more', $icon-expanded: 'expand_less');\n}\n*/\n\n.mdlext-menu-button {\n  box-sizing: border-box;\n  @include typo-menu();\n  text-transform: none;\n  position: relative;\n  height: $button-height;\n  padding: 0 $button-padding;\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n\n  > * {\n    margin: 0;\n    padding: 0 0 0 8px;\n  }\n\n  > *:first-child {\n    padding-left: 0;\n  }\n\n  > *:last-child:not(:only-child):not(.mdlext-menu__item__caption) {\n    margin-left: auto; // If more than one element, push last element to the right\n  }\n\n}\n\n.mdlext-menu-button__caption {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.2;\n}\n\n.mdlext-menu,\n.mdlext-menu__item {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n}\n\n.mdlext-menu {\n  position: absolute; //fixed;\n  background: $default-dropdown-bg-color;\n  z-index: 1000;\n  min-width: 124px;\n  border-radius: 2px;\n  @include shadow-3dp();\n  display: inline-flex;\n  flex-direction: column;\n  padding: 0;\n  overflow: hidden;\n  overflow-y: auto;\n\n  &:focus {\n    outline-offset: -1px;\n    outline-width: 1px;\n  }\n\n  &[hidden] {\n    @include mdlext-visually-hidden;\n    pointer-events: none;\n  }\n\n  &__item {\n    @include typo-body-1();\n    color: $default-item-text-color;\n    background-color: $default-dropdown-bg-color;\n    position: relative;\n    padding: 0 16px 0 24px;\n    align-items: center;\n    align-self: stretch;\n    text-decoration: none;\n    cursor: pointer;\n    white-space: nowrap;\n    user-select: none;\n    min-height: 40px;\n    overflow: hidden;\n\n    &[aria-selected='true'] {\n      background-color: $default-item-active-bg-color;\n    }\n\n    // checkmark\n    &[aria-selected='true']::before {\n      content:'\\2713';\n      position: absolute;\n      font-size: 1.4em;\n      left: 4px;\n      top: 50%;\n      transform: translateY(-50%);\n      pointer-events: none;\n    }\n\n    &:hover:not([disabled]) {\n      background-color: $default-item-hover-bg-color;\n    }\n\n    &:focus {\n      outline-offset: -2px;\n      outline-width: 1px;\n      outline-color: $default-item-outline-color;\n      background-color: $default-item-focus-bg-color;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n    }\n\n    &[disabled] {\n      color: $disabled-item-text-color;\n      background-color: transparent;\n      cursor: auto;\n      pointer-events: none;\n\n      > * {\n        color: $disabled-item-text-color;\n      }\n    }\n\n    &__caption {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    > * {\n      margin: 0;\n      padding: 0 0 0 8px;\n    }\n\n    > *:first-child {\n      padding-left: 0;\n    }\n\n    > *:last-child:not(:only-child):not(.mdlext-menu__item__caption) {\n      margin-left: auto; // If more than one element, push last element to the right\n    }\n\n  }\n  &__item-separator {\n    margin: 0;\n    padding: 0;\n    border-bottom: 1px solid $default-item-divider-color;\n  }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/menu-button/_menu-button.scss","/**\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/*\n * The bordered fields are based on / inspired by this CodePen: http://codepen.io/prajwal078/pen/LVJZXz?editors=010\n */\n\n// Use of this module requires the user to include variables from material-design-lite\n//@import \"../../node_modules/material-design-lite/src/variables\";\n//@import \"../../node_modules/material-design-lite/src/mixins\";\n\n@import \"../variables\";\n@import \"../functions\";\n\n\n// \"Theme\" for this styling\n.mdlext-bordered-fields {\n  box-sizing: border-box;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  // Styling for textfield and selectfield.\n  .mdl-textfield,\n  .mdlext-selectfield {\n    padding: 0;\n    margin: $mdlext-bordered-field-vertical-spacing-top 0 $mdlext-bordered-field-vertical-spacing-bottom 0;\n\n    .mdl-textfield__input,\n    .mdlext-selectfield__select {\n      height: $mdlext-bordered-field-height;\n      background-color: $mdlext-bordered-field-background-color;\n      border: $mdlext-bordered-field-border-width solid $mdlext-bordered-field-border-color;\n      border-radius: $mdlext-bordered-field-border-radius;\n      padding: $mdlext-bordered-field-padding-top $mdlext-bordered-field-padding $mdlext-bordered-field-padding-bottom $mdlext-bordered-field-padding;\n      font-size: $mdlext-bordered-field-input-text-font-size;\n      font-weight: $mdlext-bordered-field-font-weight;\n      color: $mdlext-bordered-field-input-text-color;\n\n      &:disabled {\n        color: $mdlext-bordered-field-input-text-disabled-text-color;\n        background-color: $mdlext-bordered-field-disabled-background-color;\n        border-color: $mdlext-bordered-field-disabled-border-color;\n      }\n\n      // MDL can not handle required attribute properly. Planned for MDL-v2\n      //&:required {\n      //  background-color: $mdlext-bordered-field-required-background-color;\n      //  border-color: $mdlext-bordered-field-required-border-color;\n      //}\n\n      &:focus {\n        background-color: $mdlext-bordered-field-focus-background-color;\n        border-color: $mdlext-bordered-field-focus-border-color;\n      }\n\n      // MDL can not handle required. Planned for MDL-v2\n      //&:required:focus {\n      //  background-color: $mdlext-bordered-field-required-focus-background-color;\n      //  border-color: $mdlext-bordered-field-required-focus-border-color;\n      //}\n    }\n    .mdlext-selectfield__select {\n      padding-right: calc(1em + #{$mdlext-bordered-field-padding});  // space for down arrow\n    }\n\n    /*\n    &.is-dirty {\n      .mdl-textfield__input,\n      .mdlext-selectfield__select {\n      }\n    }\n    */\n\n    &.is-invalid {\n      .mdl-textfield__input,\n      .mdlext-selectfield__select {\n        color: $mdlext-bordered-field-input-text-error-color;\n        border-color: $mdlext-bordered-field-error-border-color;\n        background-color: $mdlext-bordered-field-error-background-color;\n\n        &:focus {\n          //&:required:focus {\n          border-color: $mdlext-bordered-field-error-focus-border-color;\n          background-color: $mdlext-bordered-field-error-focus-background-color;\n        }\n      }\n    }\n  }\n\n  .mdlext-selectfield::after {\n    top: auto;\n    bottom: $mdlext-bordered-field-padding-bottom;  // Position of down arrow\n  }\n\n  fieldset[disabled] .mdlext-selectfield::after,\n  .mdlext-selectfield.is-disabled::after {\n    color: $mdlext-bordered-field-input-text-disabled-text-color;\n    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-bordered-field-input-text-disabled-text-color);\n  }\n\n\n  fieldset[disabled] .mdl-textfield .mdl-textfield__input,\n  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {\n    color: $mdlext-bordered-field-input-text-disabled-text-color;\n    background-color: $mdlext-bordered-field-disabled-background-color;\n    border-color: $mdlext-bordered-field-disabled-border-color;\n  }\n\n\n  // Styling for the label / floating label.\n  .mdl-textfield,\n  .mdlext-selectfield {\n\n    &.is-dirty,\n    &.has-placeholder {\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        visibility: hidden;\n      }\n    }\n    .mdl-textfield__label,\n    .mdlext-selectfield__label {\n      color: $mdlext-bordered-field-input-text-label-color;\n      font-size: $mdlext-bordered-field-label-font-size;\n      font-weight: $mdlext-bordered-field-font-weight;\n      padding-left: $mdlext-bordered-field-padding;\n      top: auto;\n      bottom: $mdlext-bordered-field-padding-bottom;\n\n      // Hides the colored underline for the textField/selectfield.\n      &::after {\n        background-color: transparent !important;\n        visibility: hidden !important;\n      }\n    }\n    &.mdl-textfield--floating-label.is-focused.is-focused,\n    &.mdl-textfield--floating-label.is-dirty.is-dirty,\n    &.mdl-textfield--floating-label.has-placeholder,\n    &.mdlext-selectfield--floating-label.is-focused.is-focused,\n    &.mdlext-selectfield--floating-label.is-dirty.is-dirty,\n    &.mdlext-selectfield--floating-label.has-placeholder {\n\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        color: $mdlext-bordered-field-input-text-label-focus-color;\n        font-size: $mdlext-bordered-field-floating-label-font-size;\n        font-weight: $mdlext-bordered-field-floating-label-font-weight;\n        top: auto;\n        bottom: $mdlext-bordered-field-floating-label-focus-bottom;\n        visibility: visible;\n      }\n    }\n    &.mdl-textfield--floating-label.is-disabled.is-disabled,\n    &.mdlext-selectfield--floating-label.is-disabled.is-disabled {\n\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        color: $mdlext-bordered-field-input-text-label-disabled-color;\n      }\n    }\n    &.mdl-textfield--floating-label.is-invalid.is-invalid,\n    &.mdlext-selectfield--floating-label.is-invalid.is-invalid {\n\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        color: $mdlext-bordered-field-input-text-label-error-color;\n      }\n    }\n  }\n\n  fieldset[disabled] .mdl-textfield .mdl-textfield__label,\n  fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {\n    color: $mdlext-bordered-field-input-text-label-disabled-color;\n  }\n\n  // Icon(s) and/or button(s) inside textfield\n  .mdl-textfield,\n  .mdlext-selectfield {\n    &.mdlext-bordered-fields__icon-left,\n    &.mdlext-bordered-fields__icon-right {\n      & > i,\n      & > .mdl-button {\n        position: absolute;\n        bottom: $mdlext-bordered-field-padding-bottom - 2px;\n      }\n      & > i {\n        bottom: $mdlext-bordered-field-padding-bottom + 2px;\n      }\n    }\n    &.mdlext-bordered-fields__icon-left {\n      & > i:first-child,\n      & > .mdl-button:first-child {\n        left: $mdlext-bordered-field-padding/2;\n      }\n      & > i ~ .mdl-textfield__input,\n      & > .mdl-button ~ .mdl-textfield__input,\n      & > i ~ .mdlext-selectfield__select,\n      & > .mdl-button ~ .mdlext-selectfield__select {\n        padding-left: $input-text-button-size;\n      }\n      & > i ~ .mdl-textfield__label,\n      & > .mdl-button ~ .mdl-textfield__label {\n        left: $input-text-button-size - $mdlext-bordered-field-padding;\n      }\n      & > i ~ .mdlext-selectfield__label,\n      & > .mdl-button ~ .mdlext-selectfield__label {\n        left: $input-text-button-size - $mdlext-bordered-field-padding;\n      }\n    }\n    &.mdlext-bordered-fields__icon-right {\n      & > .mdl-textfield__input {\n        padding-right: $input-text-button-size;\n      }\n      & > i:last-child,\n      & > .mdl-button:last-child {\n        left: auto;\n        right: $mdlext-bordered-field-padding/2;\n      }\n    }\n    &.is-disabled i,\n    &.is-disabled .mdl-button {\n      color: $mdlext-bordered-field-disabled-border-color;\n      pointer-events: none;\n    }\n  }\n\n  fieldset[disabled] .mdl-textfield,\n  fieldset[disabled] .mdlext-selectfield {\n    i,\n    .mdl-button {\n      color: $mdlext-bordered-field-disabled-border-color;\n      pointer-events: none;\n    }\n  }\n}\n\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/bordered-fields/_bordered-fields.scss","@charset \"UTF-8\";\n\n/**\n * @license\n * Copyright 2016-2017 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * This code is built with Google Material Design Lite,\n * which is Licensed under the Apache License, Version 2.0\n */\n\n.mdlext-collapsible {\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.mdlext-collapsible-group,\n.mdlext-collapsible-region {\n  box-sizing: border-box;\n\n  &[hidden] {\n    @include mdlext-visually-hidden;\n    pointer-events: none;\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/collapsible/_collapsible.scss","@charset \"UTF-8\";\n\n/**\n * @license\n * Copyright 2016 Leif Olsen. All Rights Reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *      http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * This code is built with Google Material Design Lite,\n * which is Licensed under the Apache License, Version 2.0\n */\n\n.mdlext-aria-toggle-plus-minus {\n  @include mdlext-aria-expanded-toggle($font-family: inherit, $font-size: 1.4em);\n}\n\n.mdlext-aria-toggle-material-icons {\n  @include mdlext-aria-expanded-toggle($font-size: 1.3em, $icon: 'expand_more', $icon-expanded: 'expand_less', $icon-offset: -$mdlext-accordion-header-padding);\n}\n\n.mdlext-accordion {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &__panel {\n    box-sizing: border-box;\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__tab {\n    @include typo-title();\n\n    font-weight: 400;\n    line-height: 1.1;\n    box-sizing: border-box;\n    position: relative;\n    margin: 0;\n    padding: 0; // $mdlext-accordion-header-padding;\n    min-width: $mdlext-accordion-header-height;\n    min-height: $mdlext-accordion-header-height;\n    display: flex;\n    align-items: center;\n    align-self: stretch;\n    user-select: none;\n    color: $mdlext-accordion-header-secondary-color;\n    background-color: $mdlext-accordion-header-background-color;\n    cursor: pointer;\n    overflow: hidden;\n\n    &:focus {\n      outline-offset: -2px;\n      outline-color: $mdlext-accordion-header-focus-outline-color;\n      outline-width: 2px;\n    }\n\n    &[aria-expanded='true'] {\n      background-color: $mdlext-accordion-header-background-open-color;\n    }\n\n    &[aria-selected='true'] {\n      background-color: $mdlext-accordion-header-background-active-color;\n    }\n\n    &[disabled] {\n      background-color: $mdlext-accordion-header-disabled-color;\n      color: $mdlext-accordion-header-secondary-color-disabled;\n      pointer-events: none;\n\n      > * {\n        color: $mdlext-accordion-header-secondary-color-disabled;\n      }\n    }\n\n    &:hover:not([disabled]) {\n      background-color: $mdlext-accordion-header-background-hover-color;\n    }\n\n    > * {\n      margin: 0;\n      padding: 0;\n    }\n\n    &__caption {\n      padding-left: $mdlext-accordion-header-padding;\n      padding-right: $mdlext-accordion-header-padding;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    > *:first-child {\n      padding-left: 0;\n    }\n\n    &--ripple {\n      &[aria-selected='true']::before {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        background: $mdlext-accordion-ripple-color;\n        opacity: 0;\n        border-radius: 100%;\n        transform: scale(1, 1) translate(-50%);\n        transform-origin: 50% 50%;\n      }\n      &[aria-selected='true']:focus:not(:active)::before {\n        // http://easings.net/\n        animation: mdlext-accordion-tab-ripple 1s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; // cubic-bezier(0.4, 0.0, 1, 1); //cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; //ease-out;\n      }\n    }\n  }\n\n  &__tabpanel {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0 $mdlext-accordion-content-padding;\n    color: $mdlext-accordion-content-color;\n    background-color: $mdlext-accordion-content-background-color;\n    display: block;\n    overflow: auto;\n    flex-grow: 1;\n\n    &[hidden] {\n      @include mdlext-visually-hidden;\n    }\n  }\n}\n\n// Vertical layout\n.mdlext-accordion {\n\n  &--vertical {\n    flex-direction: column;\n    flex-wrap: nowrap;\n\n    .mdlext-accordion__panel {\n      min-height: $mdlext-accordion-header-height;\n      flex-direction: column;\n    }\n\n    .mdlext-accordion__tab {\n      height: $mdlext-accordion-header-height;\n      border-top: 1px solid $mdlext-accordion-header-border-color;\n      padding-left: $mdlext-accordion-header-padding;\n      padding-right: $mdlext-accordion-header-padding;\n\n      &[aria-selected='true']::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        display: block;\n        content: \" \";\n        background-color: $mdlext-accordion-header-highlight-color;\n        animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;\n        transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);\n      }\n\n      > * {\n        padding-left: $mdlext-accordion-header-padding;\n      }\n\n      > *:first-child {\n        padding-left: 0;\n      }\n\n      > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {\n        margin-left: auto; // If more than one element, push last element to the right\n      }\n\n      &--ripple {\n        &[aria-selected='true']::before {\n          width: 5%;\n          height: 10%;\n        }\n      }\n\n    }\n\n    .mdlext-accordion__tabpanel {\n      border-top: 1px solid $mdlext-accordion-header-border-color;\n\n      &--animation {\n        transform: scaleY(1);\n        animation: mdlext-accordion-show-tabpanel-y 0.2s ease-in-out;\n\n        &[hidden] {\n          transform: scaleY(0);\n          animation: mdlext-accordion-hide-tabpanel-y 0.2s ease-out;\n          animation-delay: 0.1s;\n        }\n      }\n    }\n  }\n}\n\n// Horizontal layout\n.mdlext-accordion {\n\n  &--horizontal {\n\n    .mdlext-accordion__panel {\n      min-width: $mdlext-accordion-header-height;\n      width: $mdlext-accordion-header-height;\n    }\n\n    &[aria-multiselectable='true'] .mdlext-accordion__panel.is-expanded {\n      width: 100%;\n    }\n\n    .mdlext-accordion__tab {\n      flex-direction: column-reverse;\n      width: $mdlext-accordion-header-height;\n      white-space: nowrap;\n      border-left: 1px solid $mdlext-accordion-header-border-color;\n\n      &[aria-selected='true']::after {\n        position: absolute;\n        top: 0;\n        right: 0;\n        height: 100%;\n        width: 1px;\n        display: block;\n        content: \" \";\n        background-color: $mdlext-accordion-header-highlight-color;\n\n        // Figure out how to animate a vertical line\n        //animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;\n        //transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);\n      }\n\n      > * {\n        //transform: rotate(-90deg) translateX(50%);\n        transform: rotate(-90deg) translateX($mdlext-accordion-header-padding);\n      }\n\n      > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {\n        // If more than one element, push last element to top\n        margin-bottom: auto;\n        transform: rotate(-90deg) translateX(0);\n      }\n\n      &__caption {\n        transform: rotate(-90deg) translateX(50%);\n        padding-right: $mdlext-accordion-header-padding + 8px;\n      }\n\n      &--ripple {\n        &[aria-selected='true']::before {\n          width: 10%;\n          height: 5%;\n        }\n      }\n    }\n\n    .mdlext-accordion__tabpanel {\n      border-left: 1px solid $mdlext-accordion-header-border-color;\n\n      &--animation {\n        transform: scaleX(1);\n        animation: mdlext-accordion-show-tabpanel-x 0.2s ease-in-out;\n\n        &[hidden] {\n          transform: scaleX(0);\n          animation: mdlext-accordion-hide-tabpanel-x 0.2s ease-out;\n        }\n      }\n    }\n  }\n}\n\n.mdlext-accordion {\n\n  &__panel:first-child > &__tab {\n    // Use container to set outer borders\n    border-top-color: transparent;\n    border-left-color: transparent;\n  }\n\n  &[aria-multiselectable=\"false\"] {\n    .mdlext-accordion__panel.is-expanded {\n      flex-grow: 1;\n    }\n  }\n}\n\n// Making accordion appear disabled.\n// Note: does not prevent tabbing into a disabled accordion\n.mdlext-accordion[disabled] {\n  * {\n    pointer-events: none;\n  }\n  .mdlext-accordion__tab {\n    background-color: $mdlext-accordion-header-disabled-color;\n    color: $mdlext-accordion-header-secondary-color-disabled;\n\n    > * {\n      color: $mdlext-accordion-header-secondary-color-disabled;\n    }\n  }\n  .mdlext-accordion__tabpanel {\n    opacity: 0.8;\n    filter: blur(1px) grayscale(80%);\n  }\n}\n\n\n@keyframes mdlext-accordion-tab-ripple {\n  0% {\n    transform: scale(0, 0);\n    opacity: 1;\n  }\n  20% {\n    transform: scale(25, 25);\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n    transform: scale(40, 40);\n  }\n}\n\n/*\n@keyframes mdlext-accordion-show-tabpanel-y {\n  0% { transform: scaleY(0.1); }\n  40% { transform: scaleY(1.03); }\n  60% { transform: scaleY(0.98); }\n  80% { transform: scaleY(1.03); }\n  100% { transform: scaleY(0.98); }\n  80% { transform: scaleY(1.01); }\n  100% { transform: scaleY(1); }\n}\n*/\n\n@keyframes mdlext-accordion-show-tabpanel-y {\n  0% { transform: scaleY(0); }\n  60% { transform: scaleY(1.01); }\n  80% { transform: scaleY(0.98); }\n  100% { transform: scaleY(1); }\n}\n\n@keyframes mdlext-accordion-hide-tabpanel-y {\n  0% { transform: scaleY(1); }\n  60% { transform: scaleY(0.98); }\n  80% { transform: scaleY(1.01); }\n  100% { transform: scaleY(0); }\n}\n\n/*\n@keyframes mdlext-accordion-show-tabpanel-x {\n  0% { transform: scaleX(0.1); }\n  40% { transform: scaleX(1.03); }\n  60% { transform: scaleX(0.98); }\n  80% { transform: scaleX(1.03); }\n  100% { transform: scaleX(0.98); }\n  80% { transform: scaleX(1.01); }\n  100% { transform: scaleX(1); }\n}\n*/\n\n@keyframes mdlext-accordion-show-tabpanel-x {\n  0% { transform: scaleX(0); }\n  60% { transform: scaleX(1.01); }\n  80% { transform: scaleX(0.98); }\n  100% { transform: scaleX(1); }\n}\n\n@keyframes mdlext-accordion-hide-tabpanel-x {\n  0% { transform: scaleX(1); }\n  60% { transform: scaleX(0.98); }\n  80% { transform: scaleX(1.01); }\n  100% { transform: scaleX(0); }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/accordion/_accordion.scss","@import \"color-themes\";\n\n.mdlext-light-color-theme {\n  background-color: $mdlext-light-content-background-color;\n  color: $mdlext-light-text-color-primary;\n\n  a {\n    outline-color: inherit;\n  }\n}\n\n// mdl/src/palette/_palette.scss\n// -----------------------------\n.mdlext-light-color-theme {\n\n  .mdl-color--primary {\n    background-color: $mdlext-light-color-primary !important;\n  }\n\n  .mdl-color--primary-contrast {\n    background-color: $mdlext-light-color-primary-contrast !important;\n  }\n\n  .mdl-color--primary-dark {\n    background-color: $mdlext-light-color-primary-dark !important;\n  }\n\n  .mdl-color--accent {\n    background-color: $mdlext-light-color-accent !important;\n  }\n\n  .mdl-color--accent-contrast {\n    background-color: $mdlext-light-color-accent-contrast !important;\n  }\n\n  .mdl-color-text--primary {\n    color: $mdlext-light-color-primary !important;\n  }\n\n  .mdl-color-text--primary-contrast {\n    color: $mdlext-light-color-primary-contrast !important;\n  }\n\n  .mdl-color-text--primary-dark {\n    color: $mdlext-light-color-primary-dark !important;\n  }\n\n  .mdl-color-text--accent {\n    color: $mdlext-light-color-accent !important;\n  }\n\n  .mdl-color-text--accent-contrast {\n    color: $mdlext-light-color-accent-contrast !important;\n  }\n\n}\n\n// mdl/src/typography/_typography.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n  a {\n    color: $mdlext-light-text-link-color;\n  }\n}\n\n\n// mdl/src/badge/_badge.scss\n// ---------------------------\n.mdlext-light-color-theme {\n  .mdl-badge {\n\n    &[data-badge]::after {\n      background: $mdlext-light-badge-background;\n      color: $mdlext-light-badge-color;\n    }\n\n    &.mdl-badge--no-background {\n      &[data-badge]::after {\n        color: $mdlext-light-badge-color-inverse;\n        background: $mdlext-light-badge-background-inverse;\n      }\n    }\n  }\n}\n\n\n// mdl/src/button/_button.scss\n// ---------------------------\n.mdlext-light-color-theme {\n\n  .mdl-button {\n    background: transparent;\n    color: $mdlext-light-button-secondary-color;\n\n    &:hover {\n      background-color: $mdlext-light-button-hover-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-light-button-focus-color;\n    }\n\n    &:active {\n      background-color: $mdlext-light-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      color: $mdlext-light-button-primary-color-alt;\n\n      &:focus:not(:active) {\n        background-color: $mdlext-light-button-focus-color-alt;\n      }\n    }\n  }\n\n  // Raised buttons\n  .mdl-button--raised {\n    background: $mdlext-light-button-primary-color;\n\n    &:active {\n      background-color: $mdlext-light-button-active-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-light-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      background: $mdlext-light-button-primary-color-alt;\n      color: $mdlext-light-button-secondary-color-alt;\n\n      &:hover {\n        background-color: $mdlext-light-button-hover-color-alt;\n      }\n\n      &:active {\n        background-color: $mdlext-light-button-active-color-alt;\n      }\n\n      &:focus:not(:active) {\n        background-color: $mdlext-light-button-active-color-alt;\n      }\n\n      & .mdl-ripple {\n        background: $mdlext-light-button-ripple-color-alt;\n      }\n    }\n  }\n\n\n  // FABs\n  .mdl-button--fab {\n    background: $mdlext-light-button-primary-color;\n\n    &:active {\n      background-color: $mdlext-light-button-active-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-light-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      background: $mdlext-light-button-fab-color-alt;\n      color: $mdlext-light-button-fab-text-color-alt;\n\n      &:hover {\n        background-color: $mdlext-light-button-fab-hover-color-alt;\n      }\n\n      &:focus:not(:active) {\n        background-color: $mdlext-light-button-fab-active-color-alt;\n      }\n\n      &:active {\n        background-color: $mdlext-light-button-fab-active-color-alt;\n      }\n\n      & .mdl-ripple {\n        background: $mdlext-light-button-fab-ripple-color-alt;\n      }\n    }\n  }\n\n\n  // Icon buttons\n  .mdl-button--icon {\n    color: inherit;\n  }\n\n  // Colorized buttons\n\n  .mdl-button--primary.mdl-button--primary {\n    color: $mdlext-light-button-primary-color-alt;\n\n    & .mdl-ripple {\n      background: $mdlext-light-button-secondary-color-alt;\n    }\n    &.mdl-button--raised,\n    &.mdl-button--fab {\n      color: $mdlext-light-button-secondary-color-alt;\n      background-color: $mdlext-light-button-primary-color-alt;\n    }\n  }\n\n  .mdl-button--accent.mdl-button--accent {\n    color: $mdlext-light-button-fab-color-alt;\n\n    & .mdl-ripple {\n      background: $mdlext-light-button-fab-text-color-alt;\n    }\n    &.mdl-button--raised,\n    &.mdl-button--fab {\n      color: $mdlext-light-button-fab-text-color-alt;\n      background-color: $mdlext-light-button-fab-color-alt;\n    }\n  }\n\n  // Disabled buttons\n\n  .mdl-button {\n    // Bump up specificity by using [disabled] twice.\n    &[disabled][disabled],\n    &.mdl-button--disabled.mdl-button--disabled {\n      color: $mdlext-light-button-secondary-color-disabled;\n      background-color: transparent;\n    }\n\n    &--fab {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        background-color: $mdlext-light-button-primary-color-disabled;\n        color: $mdlext-light-button-secondary-color-disabled;\n      }\n    }\n\n    &--raised {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        background-color: $mdlext-light-button-primary-color-disabled;\n        color: $mdlext-light-button-secondary-color-disabled;\n      }\n    }\n    &--colored {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        color: $mdlext-light-button-secondary-color-disabled;\n      }\n    }\n  }\n}\n\n// mdl/src/slider/_slider.scss\n// ---------------------------\n.mdlext-light-color-theme {\n  .mdl-slider {\n\n    &.is-upgraded {\n      background: transparent;\n      color: $mdlext-light-range-color;\n\n      &::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n\n      &::-moz-range-track {\n        background: transparent;\n      }\n\n      &::-ms-track {\n        background: none;\n        color: transparent;\n      }\n\n      /* stylelint-disable */\n      &::-ms-fill-lower {\n        background: linear-gradient(to right,\n          transparent,\n          transparent 16px,\n          $mdlext-light-range-color 16px,\n          $mdlext-light-range-color 0);\n      }\n\n      &::-ms-fill-upper {\n        background: linear-gradient(to left,\n          transparent,\n          transparent 16px,\n          $mdlext-light-range-bg-color 16px,\n          $mdlext-light-range-bg-color 0);\n      }\n      /* stylelint-enable */\n\n\n      /**************************** Thumbs ****************************/\n      &::-webkit-slider-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n      &::-moz-range-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n      &:focus:not(:active)::-webkit-slider-thumb {\n        box-shadow: 0 0 0 10px $mdlext-light-range-faded-color;\n      }\n\n      &:focus:not(:active)::-moz-range-thumb {\n        box-shadow: 0 0 0 10px $mdlext-light-range-faded-color;\n      }\n\n      &:active::-webkit-slider-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n      &:active::-moz-range-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n      &::-ms-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n      /* stylelint-disable */\n      &:focus:not(:active)::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          $mdlext-light-range-color 0%,\n          $mdlext-light-range-color 37.5%,\n          $mdlext-light-range-faded-color 37.5%,\n          $mdlext-light-range-faded-color 100%);\n      }\n      /* stylelint-enable */\n\n      &:active::-ms-thumb {\n        background: $mdlext-light-range-color;\n      }\n\n\n      /**************************** 0-value ****************************/\n\n      &.is-lowest-value::-webkit-slider-thumb {\n        border-color: $mdlext-light-range-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value::-moz-range-thumb {\n        border-color: $mdlext-light-range-bg-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {\n        box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color;\n        background: $mdlext-light-range-bg-focus-color;\n      }\n\n      &.is-lowest-value:focus:not(:active)::-moz-range-thumb {\n        box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color;\n        background: $mdlext-light-range-bg-focus-color;\n      }\n\n      &.is-lowest-value:active::-webkit-slider-thumb {\n        border-color: $mdlext-light-range-bg-color;\n      }\n\n      &.is-lowest-value:active::-moz-range-thumb {\n        border-color: $mdlext-light-range-bg-color;\n      }\n\n      /* stylelint-disable */\n      &.is-lowest-value::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 66.67%,\n          $mdlext-light-range-bg-color 66.67%,\n          $mdlext-light-range-bg-color 100%);\n      }\n\n      &.is-lowest-value:focus:not(:active)::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          $mdlext-light-range-bg-focus-color 0%,\n          $mdlext-light-range-bg-focus-color 25%,\n          $mdlext-light-range-bg-color 25%,\n          $mdlext-light-range-bg-color 37.5%,\n          $mdlext-light-range-bg-focus-color 37.5%,\n          $mdlext-light-range-bg-focus-color 100%);\n      }\n\n      &.is-lowest-value:active::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 77.78%,\n          $mdlext-light-range-bg-color 77.78%,\n          $mdlext-light-range-bg-color 100%);\n      }\n      /* stylelint-enable */\n\n      &.is-lowest-value::-ms-fill-lower {\n        background: transparent;\n      }\n\n      /**************************** Disabled ****************************/\n\n      &:disabled:focus::-webkit-slider-thumb,\n      &:disabled:active::-webkit-slider-thumb,\n      &:disabled::-webkit-slider-thumb {\n        background: $mdlext-light-range-bg-color;\n      }\n\n      &:disabled:focus::-moz-range-thumb,\n      &:disabled:active::-moz-range-thumb,\n      &:disabled::-moz-range-thumb {\n        background: $mdlext-light-range-bg-color;\n      }\n\n      &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {\n        background-color: $mdlext-light-range-bg-color;\n      }\n\n      &.is-lowest-value:disabled:focus::-webkit-slider-thumb,\n      &.is-lowest-value:disabled:active::-webkit-slider-thumb,\n      &.is-lowest-value:disabled::-webkit-slider-thumb {\n        border-color: $mdlext-light-range-bg-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value:disabled:focus::-moz-range-thumb,\n      &.is-lowest-value:disabled:active::-moz-range-thumb,\n      &.is-lowest-value:disabled::-moz-range-thumb {\n        border-color: $mdlext-light-range-bg-color;\n        background: transparent;\n      }\n\n      &:disabled:focus::-ms-thumb,\n      &:disabled:active::-ms-thumb,\n      &:disabled::-ms-thumb {\n        background: $mdlext-light-range-bg-color;\n      }\n\n      /* stylelint-disable */\n      &.is-lowest-value:disabled:focus::-ms-thumb,\n      &.is-lowest-value:disabled:active::-ms-thumb,\n      &.is-lowest-value:disabled::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 50%,\n          $mdlext-light-range-bg-color 50%,\n          $mdlext-light-range-bg-color 100%);\n      }\n\n      &:disabled::-ms-fill-lower {\n        background: linear-gradient(to right,\n          transparent,\n          transparent 25px,\n          $mdlext-light-range-bg-color 25px,\n          $mdlext-light-range-bg-color 0);\n      }\n      /* stylelint-enable */\n\n    }\n  }\n\n  .mdl-slider__background-flex {\n    background: transparent;\n  }\n\n  .mdl-slider__background-lower {\n    background: $mdlext-light-range-color;\n  }\n\n  // This one styles the upper part of the slider track.\n  .mdl-slider__background-upper {\n    background: $mdlext-light-range-bg-color;\n  }\n}\n\n\n// mdl/src/textfield/_textfield.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-textfield__input {\n    border-bottom-color: $mdlext-light-input-text-bottom-border-color;\n  }\n  .mdl-textfield.is-invalid .mdl-textfield__input {\n    border-color: $mdlext-light-input-text-error-color;\n  }\n  fieldset[disabled] .mdl-textfield .mdl-textfield__input,\n  .mdl-textfield.is-disabled .mdl-textfield__input {\n    background-color: transparent;\n    border-bottom-color: $mdlext-light-input-text-disabled-color;\n    color: $mdlext-light-input-text-disabled-text-color;\n  }\n  .mdl-textfield__label {\n    color: $mdlext-light-input-text-label-color;\n  }\n  .mdl-textfield__label::after {\n    background-color: $mdlext-light-input-text-highlight-color;\n  }\n  fieldset[disabled] .mdl-textfield .mdl-textfield__label,\n  .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {\n    color: $mdlext-light-input-text-disabled-text-color;\n  }\n  .mdl-textfield--floating-label.is-focused .mdl-textfield__label,\n  .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,\n  .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {\n    color: $mdlext-light-input-text-highlight-color;\n  }\n  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {\n    color: $mdlext-light-input-text-error-color;\n  }\n  .mdl-textfield.is-invalid .mdl-textfield__label::after {\n    background-color: $mdlext-light-input-text-error-color;\n  }\n  .mdl-textfield__error {\n    color: $mdlext-light-input-text-error-color;\n  }\n}\n\n\n// mdl/src/checkbox/_checkbox.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-checkbox__box-outline {\n    border-color: $mdlext-light-checkbox-off-color;\n  }\n  .mdl-checkbox.is-checked .mdl-checkbox__box-outline {\n    border-color: $mdlext-light-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,\n  .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {\n    border-color: $mdlext-light-checkbox-disabled-color;\n  }\n\n  .mdl-checkbox__focus-helper {\n    background-color: transparent;\n  }\n  .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {\n    box-shadow: 0 0 0 ($checkbox-button-size / 2) $mdlext-light-checkbox-focus-color;\n    background-color: $mdlext-light-checkbox-focus-color;\n  }\n\n  .mdl-checkbox__tick-outline {\n    background: transparent;\n  }\n  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {\n    background-color: $mdlext-light-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,\n  .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {\n    background-color: $mdlext-light-checkbox-disabled-color;\n  }\n\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,\n  .mdl-checkbox.is-disabled .mdl-checkbox__label {\n    color: $mdlext-light-checkbox-disabled-color;\n  }\n\n  .mdl-checkbox__ripple-container .mdl-ripple {\n    background: $mdlext-light-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,\n  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n\n}\n\n// mdl/src/radio/_radio.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n  .mdl-radio__outer-circle {\n    border-color: $mdlext-light-radio-off-color;\n  }\n  .mdl-radio.is-checked .mdl-radio__outer-circle {\n    border-color: $mdlext-light-radio-color;\n  }\n  .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,\n  .mdl-radio.is-disabled .mdl-radio__outer-circle {\n    border-color: $mdlext-light-radio-disabled-color;\n  }\n\n  .mdl-radio__inner-circle {\n    background: $mdlext-light-radio-color;\n  }\n  fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,\n  .mdl-radio.is-disabled .mdl-radio__inner-circle {\n    background: $mdlext-light-radio-disabled-color;\n  }\n\n  fieldset[disabled] .mdl-radio .mdl-radio__label,\n  .mdl-radio.is-disabled .mdl-radio__label {\n    color: $mdlext-light-radio-disabled-color;\n  }\n\n  .mdl-radio__ripple-container .mdl-ripple {\n    background: $mdlext-light-radio-color;\n  }\n  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,\n  .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n}\n\n// mdl/src/icon-togglr/_icon-toggle.scss\n// ---------------------------------------\n.mdlext-light-color-theme {\n  .mdl-icon-toggle__label {\n    color: $mdlext-light-icon-toggle-color;\n  }\n  .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {\n    color: $mdlext-light-icon-toggle-checked-color;\n  }\n  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {\n    color: $mdlext-light-icon-toggle-disabled-color;\n  }\n  .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {\n    background-color: $mdlext-light-icon-toggle-focus-color;\n  }\n  .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {\n    background-color: $mdlext-light-icon-toggle-checked-focus-color;\n  }\n  .mdl-icon-toggle__ripple-container .mdl-ripple {\n    background: $mdlext-light-icon-toggle-color;\n  }\n  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n}\n\n\n// mdl/src/switch/_switch.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-switch__track {\n    background: $mdlext-light-switch-off-track-color;\n  }\n  .mdl-switch.is-checked .mdl-switch__track {\n    background: $mdlext-light-switch-track-color;\n  }\n  .mdl-switch__track fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__track {\n    background: $mdlext-light-switch-disabled-track-color;\n  }\n\n  .mdl-switch__thumb {\n    background: $mdlext-light-switch-off-thumb-color;\n  }\n  .mdl-switch.is-checked .mdl-switch__thumb {\n    background: $mdlext-light-switch-thumb-color;\n  }\n  .mdl-switch__thumb fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__thumb {\n    background: $mdlext-light-switch-disabled-thumb-color;\n  }\n\n  .mdl-switch__focus-helper {\n    background-color: transparent;\n  }\n  .mdl-switch.is-focused .mdl-switch__focus-helper {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {\n    box-shadow: 0 0 0 (($switch-ripple-size - $switch-helper-size) / 2) $mdlext-light-switch-faded-color;\n    background-color: $mdlext-light-switch-faded-color;\n  }\n\n  .mdl-switch__label fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__label {\n    color: $mdlext-light-switch-disabled-thumb-color;\n  }\n\n  .mdl-switch__ripple-container .mdl-ripple {\n    background: $mdlext-light-switch-color;\n  }\n  fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,\n  .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n}\n\n\n// mdl/src/data-table/_data-table.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-data-table {\n    border-color: $mdlext-light-data-table-divider-color;\n    background-color: $mdlext-light-data-table-background-color;\n\n    tbody {\n      tr {\n        &.is-selected {\n          background-color: $mdlext-light-data-table-selection-color;\n        }\n        &:hover {\n          background-color: $mdlext-light-data-table-hover-color;\n        }\n      }\n    }\n    th {\n      color: $data-table-header-color;\n\n      &.mdl-data-table__header--sorted-ascending,\n      &.mdl-data-table__header--sorted-descending {\n        color: $mdlext-light-data-table-header-sorted-color;\n\n        &:hover {\n          &::before {\n            color: $mdlext-light-data-table-header-sorted-icon-hover-color;\n          }\n        }\n      }\n    }\n  }\n}\n\n\n// mdl/src/menu/_menu.scss\n// -----------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-menu__outline {\n    background: $mdlext-light-default-dropdown-bg-color;\n  }\n\n  .mdl-menu__item {\n    color: $mdlext-light-default-item-text-color;\n    background-color: transparent;\n    outline-color: $mdlext-light-default-item-outline-color;\n\n    &--full-bleed-divider {\n      border-bottom-color: $mdlext-light-default-item-divider-color;\n    }\n\n    &[disabled],\n    &[data-mdl-disabled] {\n      color: $mdlext-light-disabled-item-text-color;\n      background-color: transparent;\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &:focus {\n        background-color: transparent;\n      }\n\n      & .mdl-ripple {\n        background: transparent;\n      }\n    }\n\n    &:hover {\n      background-color: $mdlext-light-default-item-hover-bg-color;\n    }\n\n    &:focus {\n      background-color: $mdlext-light-default-item-focus-bg-color;\n    }\n\n    &:active {\n      background-color: $mdlext-light-default-item-active-bg-color;\n    }\n  }\n}\n\n\n// mdl/src/card/_card.scss\n// ----------------------------------------\n.mdlext-light-color-theme {\n\n  .mdl-card {\n    background: $mdlext-light-card-background-color;\n  }\n\n  .mdl-card__media {\n    background-color: $mdlext-light-card-image-placeholder-color;\n  }\n\n  .mdl-card__title {\n    color: $mdlext-light-card-text-color;\n\n    &.mdl-card--border {\n      border-bottom-color: $mdlext-light-card-border-color;\n    }\n  }\n\n  .mdl-card__title-text {\n    color: inherit;\n  }\n\n  .mdl-card__subtitle-text {\n    color: $mdlext-light-card-subtitle-color;\n  }\n\n  .mdl-card__supporting-text {\n    color: $mdlext-light-card-supporting-text-text-color;\n  }\n\n  .mdl-card__actions {\n    background-color: rgba(0, 0, 0, 0);\n\n    &.mdl-card--border {\n      border-top-color: $mdlext-light-card-border-color;\n    }\n  }\n}\n\n\n// mdlext/src/selectfield/_selectfield.scss\n// ----------------------------------------\n.mdlext-light-color-theme {\n\n  .mdlext-selectfield.is-disabled::after {\n    color: $mdlext-light-input-text-disabled-color;\n    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-input-text-disabled-color);\n  }\n\n  .mdlext-selectfield__select {\n    border-bottom-color: $mdlext-light-input-text-bottom-border-color;\n    color: inherit;\n\n    option {\n      background-color: $mdlext-light-content-background-color;\n      color: $mdlext-light-text-color-primary;\n    }\n  }\n  .mdlext-selectfield.is-invalid .mdlext-selectfield__select {\n    border-color: $mdlext-light-input-text-error-color;\n  }\n  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select,\n  .mdlext-selectfield.is-disabled .mdlext-selectfield__select {\n    background-color: transparent;\n    border-bottom-color: $mdlext-light-input-text-disabled-color;\n    color: $mdlext-light-input-text-disabled-text-color;\n  }\n\n  .mdlext-selectfield__label {\n    color: $mdlext-light-input-text-label-color;\n  }\n  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label,\n  .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label {\n    color: $mdlext-light-input-text-disabled-text-color;\n  }\n  .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.is-dirty.is-dirty .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__label {\n    color: $mdlext-light-input-text-highlight-color;\n  }\n  .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label {\n    color: $mdlext-light-input-text-error-color;\n  }\n  .mdlext-selectfield__label::after {\n    background-color: $mdlext-light-input-text-highlight-color;\n  }\n  .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after {\n    background-color: $mdlext-light-input-text-error-color;\n  }\n\n  .mdlext-selectfield__error {\n    color: $mdlext-light-input-text-error-color;\n  }\n}\n\n// mdlext/src/menu-button/_menu-button.scss\n// ----------------------------------------\n.mdlext-menu.mdlext-light-color-theme {\n  background: $mdlext-light-default-dropdown-bg-color;\n}\n\n.mdlext-light-color-theme {\n\n  .mdlext-menu {\n    background: $mdlext-light-default-dropdown-bg-color;\n\n    &__item {\n      color: $mdlext-light-default-item-text-color;\n      background-color: $mdlext-light-default-dropdown-bg-color;\n\n      &:active,\n      &[aria-selected='true'] {\n        background-color: $mdlext-light-default-item-active-bg-color;\n      }\n      &:hover:not([disabled]) {\n        background-color: $mdlext-light-default-item-hover-bg-color;\n      }\n      &:focus {\n        outline-color: $mdlext-light-default-item-outline-color;\n        background-color: $mdlext-light-default-item-focus-bg-color;\n      }\n      &[disabled] {\n        color: $mdlext-light-disabled-item-text-color;\n\n        > * {\n          color: $mdlext-light-disabled-item-text-color;\n        }\n      }\n    }\n    &__item-separator {\n      border-bottom: 1px solid $mdlext-light-default-item-divider-color;\n    }\n  }\n}\n\n\n// mdlext/src/bordered-fields/_bordered-fields.scss\n// -------------------------------------------------\n.mdlext-light-color-theme {\n\n  .mdlext-bordered-fields {\n\n    .mdl-textfield,\n    .mdlext-selectfield {\n\n      .mdl-textfield__input,\n      .mdlext-selectfield__select {\n        background-color: $mdlext-light-bordered-field-background-color;\n        border-color: $mdlext-light-bordered-field-border-color;\n        color: $mdlext-light-bordered-field-input-text-color;\n\n        &:disabled {\n          color: $mdlext-light-bordered-field-input-text-disabled-text-color;\n          background-color: $mdlext-light-bordered-field-disabled-background-color;\n          border-color: $mdlext-light-bordered-field-disabled-border-color;\n        }\n        &:focus {\n          background-color: $mdlext-light-bordered-field-focus-background-color;\n          border-color: $mdlext-light-bordered-field-focus-border-color;\n        }\n      }\n      &.is-invalid {\n        .mdl-textfield__input,\n        .mdlext-selectfield__select {\n          color: $mdlext-light-bordered-field-input-text-error-color;\n          border-color: $mdlext-light-bordered-field-error-border-color;\n          background-color: $mdlext-light-bordered-field-error-background-color;\n\n          &:focus {\n            border-color: $mdlext-light-bordered-field-error-focus-border-color;\n            background-color: $mdlext-light-bordered-field-error-focus-background-color;\n          }\n        }\n      }\n    }\n\n    fieldset[disabled] .mdlext-selectfield::after,\n    .mdlext-selectfield.is-disabled::after {\n      color: $mdlext-light-bordered-field-input-text-disabled-text-color;\n      @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-bordered-field-input-text-disabled-text-color);\n    }\n\n    fieldset[disabled] .mdl-textfield .mdl-textfield__input,\n    fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {\n      color: $mdlext-light-bordered-field-input-text-disabled-text-color;\n      background-color: $mdlext-light-bordered-field-disabled-background-color;\n      border-color: $mdlext-light-bordered-field-disabled-border-color;\n    }\n\n    .mdl-textfield,\n    .mdlext-selectfield {\n\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        color: $mdlext-light-bordered-field-input-text-label-color;\n      }\n      &.mdl-textfield--floating-label.is-focused.is-focused,\n      &.mdl-textfield--floating-label.is-dirty.is-dirty,\n      &.mdl-textfield--floating-label.has-placeholder,\n      &.mdlext-selectfield--floating-label.is-focused.is-focused,\n      &.mdlext-selectfield--floating-label.is-dirty.is-dirty,\n      &.mdlext-selectfield--floating-label.has-placeholder {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-light-bordered-field-input-text-label-focus-color;\n        }\n      }\n      &.mdl-textfield--floating-label.is-disabled.is-disabled,\n      &.mdlext-selectfield--floating-label.is-disabled.is-disabled {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-light-bordered-field-input-text-label-disabled-color;\n        }\n      }\n      &.mdl-textfield--floating-label.is-invalid.is-invalid,\n      &.mdlext-selectfield--floating-label.is-invalid.is-invalid {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-light-bordered-field-input-text-label-error-color;\n        }\n      }\n    }\n\n    fieldset[disabled] .mdl-textfield .mdl-textfield__label,\n    fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {\n      color: $mdlext-light-bordered-field-input-text-label-disabled-color;\n    }\n\n    // Icon(s) and/or button(s) inside textfield\n    .mdl-textfield,\n    .mdlext-selectfield {\n      &.is-disabled i,\n      &.is-disabled .mdl-button {\n        color: $mdlext-light-bordered-field-disabled-border-color;\n      }\n    }\n    fieldset[disabled] .mdl-textfield,\n    fieldset[disabled] .mdlext-selectfield {\n      i,\n      .mdl-button {\n        color: $mdlext-light-bordered-field-disabled-border-color;\n      }\n    }\n  }\n}\n\n\n// mdlext/src/accordion/_accordion.scss\n// ----------------------------------------\n.mdlext-light-color-theme {\n\n  .mdlext-accordion {\n\n    &__tab {\n      color: $mdlext-light-accordion-header-secondary-color;\n      background-color: $mdlext-light-accordion-header-background-color;\n\n      &:focus {\n        outline-color: $mdlext-light-accordion-header-focus-outline-color;\n      }\n      &[aria-expanded='true'] {\n        background-color: $mdlext-light-accordion-header-background-open-color;\n      }\n      &[aria-selected='true'] {\n        background-color: $mdlext-light-accordion-header-background-active-color;\n      }\n      &[disabled] {\n        background-color: $mdlext-light-accordion-header-disabled-color;\n        color: $mdlext-light-accordion-header-secondary-color-disabled;\n        pointer-events: none;\n\n        > * {\n          color: $mdlext-light-accordion-header-secondary-color-disabled;\n        }\n      }\n      &:hover:not([disabled]) {\n        background-color: $mdlext-light-accordion-header-background-hover-color;\n      }\n      &--ripple {\n        &[aria-selected='true']::before {\n          background: $mdlext-light-accordion-ripple-color;\n        }\n      }\n    }\n\n    &__tabpanel {\n      color: $mdlext-light-accordion-content-color;\n      background-color: $mdlext-light-accordion-content-background-color;\n    }\n  }\n\n  // Vertical layout\n  .mdlext-accordion {\n\n    &--vertical {\n\n      .mdlext-accordion__tab {\n        border-top: 1px solid $mdlext-light-accordion-header-border-color;\n\n        &[aria-selected='true']::after {\n          background-color: $mdlext-light-accordion-header-highlight-color;\n        }\n      }\n      .mdlext-accordion__tabpanel {\n        border-top: 1px solid $mdlext-light-accordion-header-border-color;\n      }\n    }\n  }\n\n  // Horizontal layout\n  .mdlext-accordion {\n\n    &--horizontal {\n\n      .mdlext-accordion__tab {\n        border-left: 1px solid $mdlext-light-accordion-header-border-color;\n\n        &[aria-selected='true']::after {\n          background-color: $mdlext-light-accordion-header-highlight-color;\n        }\n      }\n      .mdlext-accordion__tabpanel {\n        border-left: 1px solid $mdlext-light-accordion-header-border-color;\n      }\n    }\n  }\n\n  .mdlext-accordion {\n\n    &__panel:first-child > &__tab {\n      // Use container to set outer borders\n      border-top-color: transparent;\n      border-left-color: transparent;\n    }\n  }\n\n  // Making accordion appear disabled.\n  // Note: does not prevent tabbing into a disabled accordion\n  .mdlext-accordion[disabled] {\n    .mdlext-accordion__tab {\n      background-color: $mdlext-light-accordion-header-disabled-color;\n      color: $mdlext-light-accordion-header-secondary-color-disabled;\n\n      > * {\n        color: $mdlext-light-accordion-header-secondary-color-disabled;\n      }\n    }\n    .mdlext-accordion__tabpanel {\n      opacity: 0.8;\n      filter: blur(1px) grayscale(80%);\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/color-themes/_light-color-theme.scss","@import \"color-themes\";\n\n.mdlext-dark-color-theme {\n  background-color: $mdlext-dark-content-background-color;\n  color: $mdlext-dark-text-color-primary;\n  a {\n    outline-color: inherit;\n  }\n}\n\n// mdl/src/palette/_palette.scss\n.mdlext-dark-color-theme {\n\n  .mdl-color--primary {\n    background-color: $mdlext-dark-color-primary !important;\n  }\n\n  .mdl-color--primary-contrast {\n    background-color: $mdlext-dark-color-primary-contrast !important;\n  }\n\n  .mdl-color--primary-dark {\n    background-color: $mdlext-dark-color-primary-dark !important;\n  }\n\n  .mdl-color--accent {\n    background-color: $mdlext-dark-color-accent !important;\n  }\n\n  .mdl-color--accent-contrast {\n    background-color: $mdlext-dark-color-accent-contrast !important;\n  }\n\n  .mdl-color-text--primary {\n    color: $mdlext-dark-color-primary !important;\n  }\n\n  .mdl-color-text--primary-contrast {\n    color: $mdlext-dark-color-primary-contrast !important;\n  }\n\n  .mdl-color-text--primary-dark {\n    color: $mdlext-dark-color-primary-dark !important;\n  }\n\n  .mdl-color-text--accent {\n    color: $mdlext-dark-color-accent !important;\n  }\n\n  .mdl-color-text--accent-contrast {\n    color: $mdlext-dark-color-accent-contrast !important;\n  }\n\n}\n\n// mdl/src/typography/_typography.scss\n.mdlext-dark-color-theme {\n  a {\n    color: $mdlext-dark-text-link-color;\n  }\n}\n\n\n// mdl/src/badge/_badge.scss\n// ---------------------------\n.mdlext-dark-color-theme {\n  .mdl-badge {\n\n    &[data-badge]::after {\n      background: $mdlext-dark-badge-background;\n      color: $mdlext-dark-badge-color;\n    }\n\n    &.mdl-badge--no-background {\n      &[data-badge]::after {\n        color: $mdlext-dark-badge-color-inverse;\n        background: $mdlext-dark-badge-background-inverse;\n      }\n    }\n  }\n}\n\n\n// mdl/src/button/_button.scss\n// ---------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-button {\n    background: transparent;\n    color: $mdlext-dark-button-secondary-color;\n\n    &:hover {\n      background-color: $mdlext-dark-button-hover-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-dark-button-focus-color;\n    }\n\n    &:active {\n      background-color: $mdlext-dark-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      color: $mdlext-dark-button-primary-color-alt;\n\n      &:focus:not(:active) {\n        background-color: $mdlext-dark-button-focus-color-alt;\n      }\n    }\n  }\n\n  // Raised buttons\n  .mdl-button--raised {\n    background: $mdlext-dark-button-primary-color;\n\n    &:active {\n      background-color: $mdlext-dark-button-active-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-dark-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      background: $mdlext-dark-button-primary-color-alt;\n      color: $mdlext-dark-button-secondary-color-alt;\n\n      &:hover {\n        background-color: $mdlext-dark-button-hover-color-alt;\n      }\n\n      &:active {\n        background-color: $mdlext-dark-button-active-color-alt;\n      }\n\n      &:focus:not(:active) {\n        background-color: $mdlext-dark-button-active-color-alt;\n      }\n\n      & .mdl-ripple {\n        background: $mdlext-dark-button-ripple-color-alt;\n      }\n    }\n  }\n\n\n  // FABs\n  .mdl-button--fab {\n    background: $mdlext-dark-button-primary-color;\n\n    &:active {\n      background-color: $mdlext-dark-button-active-color;\n    }\n\n    &:focus:not(:active) {\n      background-color: $mdlext-dark-button-active-color;\n    }\n\n    &.mdl-button--colored {\n      background: $mdlext-dark-button-fab-color-alt;\n      color: $mdlext-dark-button-fab-text-color-alt;\n\n      &:hover {\n        background-color: $mdlext-dark-button-fab-hover-color-alt;\n      }\n\n      &:focus:not(:active) {\n        background-color: $mdlext-dark-button-fab-active-color-alt;\n      }\n\n      &:active {\n        background-color: $mdlext-dark-button-fab-active-color-alt;\n      }\n\n      & .mdl-ripple {\n        background: $mdlext-dark-button-fab-ripple-color-alt;\n      }\n    }\n  }\n\n\n  // Icon buttons\n  .mdl-button--icon {\n    color: inherit;\n  }\n\n  // Colorized buttons\n\n  .mdl-button--primary.mdl-button--primary {\n    color: $mdlext-dark-button-primary-color-alt;\n\n    & .mdl-ripple {\n      background: $mdlext-dark-button-secondary-color-alt;\n    }\n    &.mdl-button--raised,\n    &.mdl-button--fab {\n      color: $mdlext-dark-button-secondary-color-alt;\n      background-color: $mdlext-dark-button-primary-color-alt;\n    }\n  }\n\n  .mdl-button--accent.mdl-button--accent {\n    color: $mdlext-dark-button-fab-color-alt;\n\n    & .mdl-ripple {\n      background: $mdlext-dark-button-fab-text-color-alt;\n    }\n    &.mdl-button--raised,\n    &.mdl-button--fab {\n      color: $mdlext-dark-button-fab-text-color-alt;\n      background-color: $mdlext-dark-button-fab-color-alt;\n    }\n  }\n\n  // Disabled buttons\n\n  .mdl-button {\n    // Bump up specificity by using [disabled] twice.\n    &[disabled][disabled],\n    &.mdl-button--disabled.mdl-button--disabled {\n      color: $mdlext-dark-button-secondary-color-disabled;\n      background-color: transparent;\n    }\n\n    &--fab {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        background-color: $mdlext-dark-button-primary-color-disabled;\n        color: $mdlext-dark-button-secondary-color-disabled;\n      }\n    }\n\n    &--raised {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        background-color: $mdlext-dark-button-primary-color-disabled;\n        color: $mdlext-dark-button-secondary-color-disabled;\n      }\n    }\n    &--colored {\n      // Bump up specificity by using [disabled] twice.\n      &[disabled][disabled],\n      &.mdl-button--disabled.mdl-button--disabled {\n        color: $mdlext-dark-button-secondary-color-disabled;\n      }\n    }\n  }\n}\n\n\n// mdl/src/slider/_slider.scss\n// ---------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-slider {\n\n    &.is-upgraded {\n      background: transparent;\n      color: $mdlext-dark-range-color;\n\n      &::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n\n      &::-moz-range-track {\n        background: transparent;\n      }\n\n      &::-ms-track {\n        background: none;\n        color: transparent;\n      }\n\n      /* stylelint-disable */\n      &::-ms-fill-lower {\n        background: linear-gradient(\n          to right,\n          transparent,\n          transparent 16px,\n          $mdlext-dark-range-color 16px,\n          $mdlext-dark-range-color 0\n        );\n      }\n\n      &::-ms-fill-upper {\n        background: linear-gradient(\n          to left,\n          transparent,\n          transparent 16px,\n          $mdlext-dark-range-bg-color 16px,\n          $mdlext-dark-range-bg-color 0);\n      }\n      /* stylelint-enable */\n\n      &::-webkit-slider-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n      &::-moz-range-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n      &:focus:not(:active)::-webkit-slider-thumb {\n        box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;\n      }\n\n      &:focus:not(:active)::-moz-range-thumb {\n        box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;\n      }\n\n      &:active::-webkit-slider-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n      &:active::-moz-range-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n      &::-ms-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n      /* stylelint-disable */\n      &:focus:not(:active)::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          $mdlext-dark-range-color 0%,\n          $mdlext-dark-range-color 37.5%,\n          $mdlext-dark-range-faded-color 37.5%,\n          $mdlext-dark-range-faded-color 100%);\n      }\n      /* stylelint-enable */\n\n      &:active::-ms-thumb {\n        background: $mdlext-dark-range-color;\n      }\n\n\n      /**************************** 0-value ****************************/\n\n      &.is-lowest-value::-webkit-slider-thumb {\n        border-color: $mdlext-dark-range-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value::-moz-range-thumb {\n        border-color: $mdlext-dark-range-bg-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {\n        box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;\n        background: $mdlext-dark-range-bg-focus-color;\n      }\n\n      &.is-lowest-value:focus:not(:active)::-moz-range-thumb {\n        box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;\n        background: $mdlext-dark-range-bg-focus-color;\n      }\n\n      &.is-lowest-value:active::-webkit-slider-thumb {\n        border-color: $mdlext-dark-range-bg-color;\n      }\n\n      &.is-lowest-value:active::-moz-range-thumb {\n        border-color: $mdlext-dark-range-bg-color;\n      }\n\n      /* stylelint-disable */\n      &.is-lowest-value::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 66.67%,\n          $mdlext-dark-range-bg-color 66.67%,\n          $mdlext-dark-range-bg-color 100%);\n      }\n\n      &.is-lowest-value:focus:not(:active)::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          $mdlext-dark-range-bg-focus-color 0%,\n          $mdlext-dark-range-bg-focus-color 25%,\n          $mdlext-dark-range-bg-color 25%,\n          $mdlext-dark-range-bg-color 37.5%,\n          $mdlext-dark-range-bg-focus-color 37.5%,\n          $mdlext-dark-range-bg-focus-color 100%);\n      }\n\n      &.is-lowest-value:active::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 77.78%,\n          $mdlext-dark-range-bg-color 77.78%,\n          $mdlext-dark-range-bg-color 100%);\n      }\n      /* stylelint-enable */\n\n      &.is-lowest-value::-ms-fill-lower {\n        background: transparent;\n      }\n\n      /**************************** Disabled ****************************/\n\n      &:disabled:focus::-webkit-slider-thumb,\n      &:disabled:active::-webkit-slider-thumb,\n      &:disabled::-webkit-slider-thumb {\n        background: $mdlext-dark-range-bg-color;\n      }\n\n      &:disabled:focus::-moz-range-thumb,\n      &:disabled:active::-moz-range-thumb,\n      &:disabled::-moz-range-thumb {\n        background: $mdlext-dark-range-bg-color;\n      }\n\n      &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {\n        background-color: $mdlext-dark-range-bg-color;\n      }\n\n      &.is-lowest-value:disabled:focus::-webkit-slider-thumb,\n      &.is-lowest-value:disabled:active::-webkit-slider-thumb,\n      &.is-lowest-value:disabled::-webkit-slider-thumb {\n        border-color: $mdlext-dark-range-bg-color;\n        background: transparent;\n      }\n\n      &.is-lowest-value:disabled:focus::-moz-range-thumb,\n      &.is-lowest-value:disabled:active::-moz-range-thumb,\n      &.is-lowest-value:disabled::-moz-range-thumb {\n        border-color: $mdlext-dark-range-bg-color;\n        background: transparent;\n      }\n\n      &:disabled:focus::-ms-thumb,\n      &:disabled:active::-ms-thumb,\n      &:disabled::-ms-thumb {\n        background: $mdlext-dark-range-bg-color;\n      }\n\n      /* stylelint-disable */\n      &.is-lowest-value:disabled:focus::-ms-thumb,\n      &.is-lowest-value:disabled:active::-ms-thumb,\n      &.is-lowest-value:disabled::-ms-thumb {\n        background: radial-gradient(circle closest-side,\n          transparent 0%,\n          transparent 50%,\n          $mdlext-dark-range-bg-color 50%,\n          $mdlext-dark-range-bg-color 100%);\n      }\n\n      &:disabled::-ms-fill-lower {\n        background: linear-gradient(to right,\n          transparent,\n          transparent 25px,\n          $mdlext-dark-range-bg-color 25px,\n          $mdlext-dark-range-bg-color 0);\n      }\n      /* stylelint-enable */\n\n    }\n  }\n\n  .mdl-slider__background-flex {\n    background: transparent;\n  }\n\n  .mdl-slider__background-lower {\n    background: $mdlext-dark-range-color;\n  }\n\n  // This one styles the upper part of the slider track.\n  .mdl-slider__background-upper {\n    background: $mdlext-dark-range-bg-color;\n  }\n}\n\n\n// mdl/src/textfield/_textfield.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-textfield__input {\n    border-bottom-color: $mdlext-dark-input-text-bottom-border-color;\n  }\n  .mdl-textfield.is-invalid .mdl-textfield__input {\n    border-color: $mdlext-dark-input-text-error-color;\n  }\n  fieldset[disabled] .mdl-textfield .mdl-textfield__input,\n  .mdl-textfield.is-disabled .mdl-textfield__input {\n    background-color: transparent;\n    border-bottom-color: $mdlext-dark-input-text-disabled-color;\n    color: $mdlext-dark-input-text-disabled-text-color;\n  }\n  .mdl-textfield__label {\n    color: $mdlext-dark-input-text-label-color;\n  }\n  .mdl-textfield__label::after {\n    background-color: $mdlext-dark-input-text-highlight-color;\n  }\n  fieldset[disabled] .mdl-textfield .mdl-textfield__label,\n  .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {\n    color: $mdlext-dark-input-text-disabled-text-color;\n  }\n  .mdl-textfield--floating-label.is-focused .mdl-textfield__label,\n  .mdl-textfield--floating-label.is-dirty .mdl-textfield__label,\n  .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {\n    color: $mdlext-dark-input-text-highlight-color;\n  }\n  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {\n    color: $mdlext-dark-input-text-error-color;\n  }\n  .mdl-textfield.is-invalid .mdl-textfield__label::after {\n    background-color: $mdlext-dark-input-text-error-color;\n  }\n  .mdl-textfield__error {\n    color: $mdlext-dark-input-text-error-color;\n  }\n}\n\n\n// mdl/src/checkbox/_checkbox.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-checkbox__box-outline {\n    border-color: $mdlext-dark-checkbox-off-color;\n  }\n  .mdl-checkbox.is-checked .mdl-checkbox__box-outline {\n    border-color: $mdlext-dark-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,\n  .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {\n    border-color: $mdlext-dark-checkbox-disabled-color;\n  }\n\n  .mdl-checkbox__focus-helper {\n    background-color: transparent;\n  }\n  .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {\n    box-shadow: 0 0 0 ($checkbox-button-size / 2) $mdlext-dark-checkbox-focus-color;\n    background-color: $mdlext-dark-checkbox-focus-color;\n  }\n\n  .mdl-checkbox__tick-outline {\n    background: transparent;\n  }\n  .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {\n    background-color: $mdlext-dark-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline,\n  .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline {\n    background-color: $mdlext-dark-checkbox-disabled-color;\n  }\n\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,\n  .mdl-checkbox.is-disabled .mdl-checkbox__label {\n    color: $mdlext-dark-checkbox-disabled-color;\n  }\n\n  .mdl-checkbox__ripple-container .mdl-ripple {\n    background: $mdlext-dark-checkbox-color;\n  }\n  fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple,\n  .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n\n}\n\n// mdl/src/radio/_radio.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n  .mdl-radio__outer-circle {\n    border-color: $mdlext-dark-radio-off-color;\n  }\n  .mdl-radio.is-checked .mdl-radio__outer-circle {\n    border-color: $mdlext-dark-radio-color;\n  }\n  .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,\n  .mdl-radio.is-disabled .mdl-radio__outer-circle {\n    border-color: $mdlext-dark-radio-disabled-color;\n  }\n\n  .mdl-radio__inner-circle {\n    background: $mdlext-dark-radio-color;\n  }\n  fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,\n  .mdl-radio.is-disabled .mdl-radio__inner-circle {\n    background: $mdlext-dark-radio-disabled-color;\n  }\n\n  fieldset[disabled] .mdl-radio .mdl-radio__label,\n  .mdl-radio.is-disabled .mdl-radio__label {\n    color: $mdlext-dark-radio-disabled-color;\n  }\n\n  .mdl-radio__ripple-container .mdl-ripple {\n    background: $mdlext-dark-radio-color;\n  }\n  fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple,\n  .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n}\n\n// mdl/src/icon-togglr/_icon-toggle.scss\n// ---------------------------------------\n.mdlext-dark-color-theme {\n  .mdl-icon-toggle__label {\n    color: $mdlext-dark-icon-toggle-color;\n  }\n  .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {\n    color: $mdlext-dark-icon-toggle-checked-color;\n  }\n  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {\n    color: $mdlext-dark-icon-toggle-disabled-color;\n  }\n  .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {\n    background-color: $mdlext-dark-icon-toggle-focus-color;\n  }\n  .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {\n    background-color: $mdlext-dark-icon-toggle-checked-focus-color;\n  }\n  .mdl-icon-toggle__ripple-container .mdl-ripple {\n    background: $mdlext-dark-icon-toggle-color;\n  }\n  .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n}\n\n\n// mdl/src/switch/_switch.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-switch__track {\n    background: $mdlext-dark-switch-off-track-color;\n  }\n  .mdl-switch.is-checked .mdl-switch__track {\n    background: $mdlext-dark-switch-track-color;\n  }\n  .mdl-switch__track fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__track {\n    background: $mdlext-dark-switch-disabled-track-color;\n  }\n\n  .mdl-switch__thumb {\n    background: $mdlext-dark-switch-off-thumb-color;\n  }\n  .mdl-switch.is-checked .mdl-switch__thumb {\n    background: $mdlext-dark-switch-thumb-color;\n  }\n  .mdl-switch__thumb fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__thumb {\n    background: $mdlext-dark-switch-disabled-thumb-color;\n  }\n\n  .mdl-switch__focus-helper {\n    background-color: transparent;\n  }\n  .mdl-switch.is-focused .mdl-switch__focus-helper {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {\n    box-shadow: 0 0 0 (($switch-ripple-size - $switch-helper-size) / 2) $mdlext-dark-switch-faded-color;\n    background-color: $mdlext-dark-switch-faded-color;\n  }\n\n  .mdl-switch__label fieldset[disabled] .mdl-switch,\n  .mdl-switch.is-disabled .mdl-switch__label {\n    color: $mdlext-dark-switch-disabled-thumb-color;\n  }\n\n  .mdl-switch__ripple-container .mdl-ripple {\n    background: $mdlext-dark-switch-color;\n  }\n  fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,\n  .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {\n    background: transparent;\n  }\n\n}\n\n\n// mdl/src/data-table/_data-table.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-data-table {\n    border-color: $mdlext-dark-data-table-divider-color;\n    background-color: $mdlext-dark-data-table-background-color;\n\n    tbody {\n      tr {\n        &.is-selected {\n          background-color: $mdlext-dark-data-table-selection-color;\n        }\n\n        &:hover {\n          background-color: $mdlext-dark-data-table-hover-color;\n        }\n      }\n    }\n\n    th {\n      color: $mdlext-dark-data-table-header-color;\n\n      &.mdl-data-table__header--sorted-ascending,\n      &.mdl-data-table__header--sorted-descending {\n        color: $mdlext-dark-data-table-header-sorted-color;\n\n        &:hover {\n          &::before {\n            color: $mdlext-dark-data-table-header-sorted-icon-hover-color;\n          }\n        }\n      }\n    }\n  }\n}\n\n// mdl/src/menu/_menu.scss\n// -----------------------------------\n.mdlext-dark-color-theme {\n\n  .mdl-menu__outline {\n    background: $mdlext-dark-default-dropdown-bg-color;\n  }\n\n  .mdl-menu__item {\n    color: $mdlext-dark-default-item-text-color;\n    background-color: transparent;\n    outline-color: $mdlext-dark-default-item-outline-color;\n\n    &--full-bleed-divider {\n      border-bottom-color: $mdlext-dark-default-item-divider-color;\n    }\n\n    &[disabled],\n    &[data-mdl-disabled] {\n      color: $mdlext-dark-disabled-item-text-color;\n      background-color: transparent;\n\n      &:hover {\n        background-color: transparent;\n      }\n\n      &:focus {\n        background-color: transparent;\n      }\n\n      & .mdl-ripple {\n        background: transparent;\n      }\n    }\n\n    &:hover {\n      background-color: $mdlext-dark-default-item-hover-bg-color;\n    }\n\n    &:focus {\n      background-color: $mdlext-dark-default-item-focus-bg-color;\n    }\n\n    &:active {\n      background-color: $mdlext-dark-default-item-active-bg-color;\n    }\n  }\n}\n\n// mdl/src/card/_card.scss\n// ----------------------------------------\n.mdlext-dark-color-theme {\n  .mdl-card {\n    background: $mdlext-dark-card-background-color;\n  }\n\n  .mdl-card__media {\n    background-color: $mdlext-dark-card-image-placeholder-color;\n  }\n\n  .mdl-card__title {\n    color: $mdlext-dark-card-text-color;\n\n    &.mdl-card--border {\n      border-bottom-color: $mdlext-dark-card-border-color;\n    }\n  }\n\n  .mdl-card__title-text {\n    color: inherit;\n  }\n\n  .mdl-card__subtitle-text {\n    color: $mdlext-dark-card-subtitle-color;\n  }\n\n  .mdl-card__supporting-text {\n    color: $mdlext-dark-card-supporting-text-text-color;\n  }\n\n  .mdl-card__actions {\n    background-color: rgba(255, 255, 255, 0);\n\n    &.mdl-card--border {\n      border-top-color: $mdlext-dark-card-border-color;\n    }\n  }\n}\n\n\n// mdlext/src/selectfield/_selectfield.scss\n// ----------------------------------------\n.mdlext-dark-color-theme {\n\n  .mdlext-selectfield.is-disabled::after {\n    color: $mdlext-dark-input-text-disabled-color;\n    @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-input-text-disabled-color);\n  }\n\n  .mdlext-selectfield__select {\n    border-bottom-color: $mdlext-dark-input-text-bottom-border-color;\n    color: inherit;\n\n    option {\n      background-color: $mdlext-dark-content-background-color;\n      color: $mdlext-dark-text-color-primary;\n    }\n  }\n  .mdlext-selectfield.is-invalid .mdlext-selectfield__select {\n    border-color: $mdlext-dark-input-text-error-color;\n  }\n  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select,\n  .mdlext-selectfield.is-disabled .mdlext-selectfield__select {\n    background-color: transparent;\n    border-bottom-color: $mdlext-dark-input-text-disabled-color;\n    color: $mdlext-dark-input-text-disabled-text-color;\n  }\n\n  .mdlext-selectfield__label {\n    color: $mdlext-dark-input-text-label-color;\n  }\n  fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label,\n  .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label {\n    color: $mdlext-dark-input-text-disabled-text-color;\n  }\n  .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.is-dirty.is-dirty .mdlext-selectfield__label,\n  .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__label {\n    color: $mdlext-dark-input-text-highlight-color;\n  }\n  .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label {\n    color: $mdlext-dark-input-text-error-color;\n  }\n  .mdlext-selectfield__label::after {\n    background-color: $mdlext-dark-input-text-highlight-color;\n  }\n  .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after {\n    background-color: $mdlext-dark-input-text-error-color;\n  }\n\n  .mdlext-selectfield__error {\n    color: $mdlext-dark-input-text-error-color;\n  }\n}\n\n\n// mdlext/src/menu-button/_menu-button.scss\n// ----------------------------------------\n.mdlext-menu.mdlext-dark-color-theme {\n  background: $mdlext-dark-default-dropdown-bg-color;\n}\n\n.mdlext-dark-color-theme {\n\n  .mdlext-menu {\n    background: $mdlext-dark-default-dropdown-bg-color;\n\n    &__item {\n      color: $mdlext-dark-default-item-text-color;\n      background-color: $mdlext-dark-default-dropdown-bg-color;\n\n      &:active,\n      &[aria-selected='true'] {\n        background-color: $mdlext-dark-default-item-active-bg-color;\n      }\n      &:hover:not([disabled]) {\n        background-color: $mdlext-dark-default-item-hover-bg-color;\n      }\n      &:focus {\n        outline-color: $mdlext-dark-default-item-outline-color;\n        background-color: $mdlext-dark-default-item-focus-bg-color;\n      }\n      &[disabled] {\n        color: $mdlext-dark-disabled-item-text-color;\n\n        > * {\n          color: $mdlext-dark-disabled-item-text-color;\n        }\n      }\n    }\n    &__item-separator {\n      border-bottom: 1px solid $mdlext-dark-default-item-divider-color;\n    }\n  }\n}\n\n\n// mdlext/src/bordered-fields/_bordered-fields.scss\n// -------------------------------------------------\n.mdlext-dark-color-theme {\n\n  .mdlext-bordered-fields {\n\n    .mdl-textfield,\n    .mdlext-selectfield {\n\n      .mdl-textfield__input,\n      .mdlext-selectfield__select {\n        background-color: $mdlext-dark-bordered-field-background-color;\n        border-color: $mdlext-dark-bordered-field-border-color;\n        color: $mdlext-dark-bordered-field-input-text-color;\n\n        &:disabled {\n          color: $mdlext-dark-bordered-field-input-text-disabled-text-color;\n          background-color: $mdlext-dark-bordered-field-disabled-background-color;\n          border-color: $mdlext-dark-bordered-field-disabled-border-color;\n        }\n        &:focus {\n          background-color: $mdlext-dark-bordered-field-focus-background-color;\n          border-color: $mdlext-dark-bordered-field-focus-border-color;\n        }\n      }\n      &.is-invalid {\n        .mdl-textfield__input,\n        .mdlext-selectfield__select {\n          color: $mdlext-dark-bordered-field-input-text-error-color;\n          border-color: $mdlext-dark-bordered-field-error-border-color;\n          background-color: $mdlext-dark-bordered-field-error-background-color;\n\n          &:focus {\n            border-color: $mdlext-dark-bordered-field-error-focus-border-color;\n            background-color: $mdlext-dark-bordered-field-error-focus-background-color;\n          }\n        }\n      }\n    }\n\n    fieldset[disabled] .mdlext-selectfield::after,\n    .mdlext-selectfield.is-disabled::after {\n      color: $mdlext-dark-bordered-field-input-text-disabled-text-color;\n      @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-bordered-field-input-text-disabled-text-color);\n    }\n\n    fieldset[disabled] .mdl-textfield .mdl-textfield__input,\n    fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {\n      color: $mdlext-dark-bordered-field-input-text-disabled-text-color;\n      background-color: $mdlext-dark-bordered-field-disabled-background-color;\n      border-color: $mdlext-dark-bordered-field-disabled-border-color;\n    }\n\n    .mdl-textfield,\n    .mdlext-selectfield {\n\n      .mdl-textfield__label,\n      .mdlext-selectfield__label {\n        color: $mdlext-dark-bordered-field-input-text-label-color;\n      }\n      &.mdl-textfield--floating-label.is-focused.is-focused,\n      &.mdl-textfield--floating-label.is-dirty.is-dirty,\n      &.mdl-textfield--floating-label.has-placeholder,\n      &.mdlext-selectfield--floating-label.is-focused.is-focused,\n      &.mdlext-selectfield--floating-label.is-dirty.is-dirty,\n      &.mdlext-selectfield--floating-label.has-placeholder {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-dark-bordered-field-input-text-label-focus-color;\n        }\n      }\n      &.mdl-textfield--floating-label.is-disabled.is-disabled,\n      &.mdlext-selectfield--floating-label.is-disabled.is-disabled {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-dark-bordered-field-input-text-label-disabled-color;\n        }\n      }\n      &.mdl-textfield--floating-label.is-invalid.is-invalid,\n      &.mdlext-selectfield--floating-label.is-invalid.is-invalid {\n\n        .mdl-textfield__label,\n        .mdlext-selectfield__label {\n          color: $mdlext-dark-bordered-field-input-text-label-error-color;\n        }\n      }\n    }\n\n    fieldset[disabled] .mdl-textfield .mdl-textfield__label,\n    fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {\n      color: $mdlext-dark-bordered-field-input-text-label-disabled-color;\n    }\n\n    // Icon(s) and/or button(s) inside textfield\n    .mdl-textfield,\n    .mdlext-selectfield {\n      &.is-disabled i,\n      &.is-disabled .mdl-button {\n        color: $mdlext-dark-bordered-field-disabled-border-color;\n      }\n    }\n    fieldset[disabled] .mdl-textfield,\n    fieldset[disabled] .mdlext-selectfield {\n      i,\n      .mdl-button {\n        color: $mdlext-dark-bordered-field-disabled-border-color;\n      }\n    }\n  }\n\n}\n\n\n// mdlext/src/accordion/_accordion.scss\n// ----------------------------------------\n.mdlext-dark-color-theme {\n\n  .mdlext-accordion {\n\n    &__tab {\n      color: $mdlext-dark-accordion-header-secondary-color;\n      background-color: $mdlext-dark-accordion-header-background-color;\n\n      &:focus {\n        outline-color: $mdlext-dark-accordion-header-focus-outline-color;\n      }\n      &[aria-expanded='true'] {\n        background-color: $mdlext-dark-accordion-header-background-open-color;\n      }\n      &[aria-selected='true'] {\n        background-color: $mdlext-dark-accordion-header-background-active-color;\n      }\n      &[disabled] {\n        background-color: $mdlext-dark-accordion-header-disabled-color;\n        color: $mdlext-dark-accordion-header-secondary-color-disabled;\n        pointer-events: none;\n\n        > * {\n          color: $mdlext-dark-accordion-header-secondary-color-disabled;\n        }\n      }\n      &:hover:not([disabled]) {\n        background-color: $mdlext-dark-accordion-header-background-hover-color;\n      }\n      &--ripple {\n        &[aria-selected='true']::before {\n          background: $mdlext-dark-accordion-ripple-color;\n        }\n      }\n    }\n\n    &__tabpanel {\n      color: $mdlext-dark-accordion-content-color;\n      background-color: $mdlext-dark-accordion-content-background-color;\n    }\n  }\n\n  // Vertical layout\n  .mdlext-accordion {\n\n    &--vertical {\n\n      .mdlext-accordion__tab {\n        border-top: 1px solid $mdlext-dark-accordion-header-border-color;\n\n        &[aria-selected='true']::after {\n          background-color: $mdlext-dark-accordion-header-highlight-color;\n        }\n      }\n      .mdlext-accordion__tabpanel {\n        border-top: 1px solid $mdlext-dark-accordion-header-border-color;\n      }\n    }\n  }\n\n  // Horizontal layout\n  .mdlext-accordion {\n\n    &--horizontal {\n\n      .mdlext-accordion__tab {\n        border-left: 1px solid $mdlext-dark-accordion-header-border-color;\n\n        &[aria-selected='true']::after {\n          background-color: $mdlext-dark-accordion-header-highlight-color;\n        }\n      }\n      .mdlext-accordion__tabpanel {\n        border-left: 1px solid $mdlext-dark-accordion-header-border-color;\n      }\n    }\n  }\n\n  .mdlext-accordion {\n\n    &__panel:first-child > &__tab {\n      // Use container to set outer borders\n      border-top-color: transparent;\n      border-left-color: transparent;\n    }\n  }\n\n  // Making accordion appear disabled.\n  // Note: does not prevent tabbing into a disabled accordion\n  .mdlext-accordion[disabled] {\n    .mdlext-accordion__tab {\n      background-color: $mdlext-dark-accordion-header-disabled-color;\n      color: $mdlext-dark-accordion-header-secondary-color-disabled;\n\n      > * {\n        color: $mdlext-dark-accordion-header-secondary-color-disabled;\n      }\n    }\n    .mdlext-accordion__tabpanel {\n      opacity: 0.8;\n      filter: blur(1px) grayscale(80%);\n    }\n  }\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/color-themes/_dark-color-theme.scss"],"sourceRoot":""}
\ No newline at end of file