Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

framework7.bundle.css 637 KiB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263926492659266926792689269927092719272927392749275927692779278927992809281928292839284928592869287928892899290929192929293929492959296929792989299930093019302930393049305930693079308930993109311931293139314931593169317931893199320932193229323932493259326932793289329933093319332933393349335933693379338933993409341934293439344934593469347934893499350935193529353935493559356935793589359936093619362936393649365936693679368936993709371937293739374937593769377937893799380938193829383938493859386938793889389939093919392939393949395939693979398939994009401940294039404940594069407940894099410941194129413941494159416941794189419942094219422942394249425942694279428942994309431943294339434943594369437943894399440944194429443944494459446944794489449945094519452945394549455945694579458945994609461946294639464946594669467946894699470947194729473947494759476947794789479948094819482948394849485948694879488948994909491949294939494949594969497949894999500950195029503950495059506950795089509951095119512951395149515951695179518951995209521952295239524952595269527952895299530953195329533953495359536953795389539954095419542954395449545954695479548954995509551955295539554955595569557955895599560956195629563956495659566956795689569957095719572957395749575957695779578957995809581958295839584958595869587958895899590959195929593959495959596959795989599960096019602960396049605960696079608960996109611961296139614961596169617961896199620962196229623962496259626962796289629963096319632963396349635963696379638963996409641964296439644964596469647964896499650965196529653965496559656965796589659966096619662966396649665966696679668966996709671967296739674967596769677967896799680968196829683968496859686968796889689969096919692969396949695969696979698969997009701970297039704970597069707970897099710971197129713971497159716971797189719972097219722972397249725972697279728972997309731973297339734973597369737973897399740974197429743974497459746974797489749975097519752975397549755975697579758975997609761976297639764976597669767976897699770977197729773977497759776977797789779978097819782978397849785978697879788978997909791979297939794979597969797979897999800980198029803980498059806980798089809981098119812981398149815981698179818981998209821982298239824982598269827982898299830983198329833983498359836983798389839984098419842984398449845984698479848984998509851985298539854985598569857985898599860986198629863986498659866986798689869987098719872987398749875987698779878987998809881988298839884988598869887988898899890989198929893989498959896989798989899990099019902990399049905990699079908990999109911991299139914991599169917991899199920992199229923992499259926992799289929993099319932993399349935993699379938993999409941994299439944994599469947994899499950995199529953995499559956995799589959996099619962996399649965996699679968996999709971997299739974997599769977997899799980998199829983998499859986998799889989999099919992999399949995999699979998999910000100011000210003100041000510006100071000810009100101001110012100131001410015100161001710018100191002010021100221002310024100251002610027100281002910030100311003210033100341003510036100371003810039100401004110042100431004410045100461004710048100491005010051100521005310054100551005610057100581005910060100611006210063100641006510066100671006810069100701007110072100731007410075100761007710078100791008010081100821008310084100851008610087100881008910090100911009210093100941009510096100971009810099101001010110102101031010410105101061010710108101091011010111101121011310114101151011610117101181011910120101211012210123101241012510126101271012810129101301013110132101331013410135101361013710138101391014010141101421014310144101451014610147101481014910150101511015210153101541015510156101571015810159101601016110162101631016410165101661016710168101691017010171101721017310174101751017610177101781017910180101811018210183101841018510186101871018810189101901019110192101931019410195101961019710198101991020010201102021020310204102051020610207102081020910210102111021210213102141021510216102171021810219102201022110222102231022410225102261022710228102291023010231102321023310234102351023610237102381023910240102411024210243102441024510246102471024810249102501025110252102531025410255102561025710258102591026010261102621026310264102651026610267102681026910270102711027210273102741027510276102771027810279102801028110282102831028410285102861028710288102891029010291102921029310294102951029610297102981029910300103011030210303103041030510306103071030810309103101031110312103131031410315103161031710318103191032010321103221032310324103251032610327103281032910330103311033210333103341033510336103371033810339103401034110342103431034410345103461034710348103491035010351103521035310354103551035610357103581035910360103611036210363103641036510366103671036810369103701037110372103731037410375103761037710378103791038010381103821038310384103851038610387103881038910390103911039210393103941039510396103971039810399104001040110402104031040410405104061040710408104091041010411104121041310414104151041610417104181041910420104211042210423104241042510426104271042810429104301043110432104331043410435104361043710438104391044010441104421044310444104451044610447104481044910450104511045210453104541045510456104571045810459104601046110462104631046410465104661046710468104691047010471104721047310474104751047610477104781047910480104811048210483104841048510486104871048810489104901049110492104931049410495104961049710498104991050010501105021050310504105051050610507105081050910510105111051210513105141051510516105171051810519105201052110522105231052410525105261052710528105291053010531105321053310534105351053610537105381053910540105411054210543105441054510546105471054810549105501055110552105531055410555105561055710558105591056010561105621056310564105651056610567105681056910570105711057210573105741057510576105771057810579105801058110582105831058410585105861058710588105891059010591105921059310594105951059610597105981059910600106011060210603106041060510606106071060810609106101061110612106131061410615106161061710618106191062010621106221062310624106251062610627106281062910630106311063210633106341063510636106371063810639106401064110642106431064410645106461064710648106491065010651106521065310654106551065610657106581065910660106611066210663106641066510666106671066810669106701067110672106731067410675106761067710678106791068010681106821068310684106851068610687106881068910690106911069210693106941069510696106971069810699107001070110702107031070410705107061070710708107091071010711107121071310714107151071610717107181071910720107211072210723107241072510726107271072810729107301073110732107331073410735107361073710738107391074010741107421074310744107451074610747107481074910750107511075210753107541075510756107571075810759107601076110762107631076410765107661076710768107691077010771107721077310774107751077610777107781077910780107811078210783107841078510786107871078810789107901079110792107931079410795107961079710798107991080010801108021080310804108051080610807108081080910810108111081210813108141081510816108171081810819108201082110822108231082410825108261082710828108291083010831108321083310834108351083610837108381083910840108411084210843108441084510846108471084810849108501085110852108531085410855108561085710858108591086010861108621086310864108651086610867108681086910870108711087210873108741087510876108771087810879108801088110882108831088410885108861088710888108891089010891108921089310894108951089610897108981089910900109011090210903109041090510906109071090810909109101091110912109131091410915109161091710918109191092010921109221092310924109251092610927109281092910930109311093210933109341093510936109371093810939109401094110942109431094410945109461094710948109491095010951109521095310954109551095610957109581095910960109611096210963109641096510966109671096810969109701097110972109731097410975109761097710978109791098010981109821098310984109851098610987109881098910990109911099210993109941099510996109971099810999110001100111002110031100411005110061100711008110091101011011110121101311014110151101611017110181101911020110211102211023110241102511026110271102811029110301103111032110331103411035110361103711038110391104011041110421104311044110451104611047110481104911050110511105211053110541105511056110571105811059110601106111062110631106411065110661106711068110691107011071110721107311074110751107611077110781107911080110811108211083110841108511086110871108811089110901109111092110931109411095110961109711098110991110011101111021110311104111051110611107111081110911110111111111211113111141111511116111171111811119111201112111122111231112411125111261112711128111291113011131111321113311134111351113611137111381113911140111411114211143111441114511146111471114811149111501115111152111531115411155111561115711158111591116011161111621116311164111651116611167111681116911170111711117211173111741117511176111771117811179111801118111182111831118411185111861118711188111891119011191111921119311194111951119611197111981119911200112011120211203112041120511206112071120811209112101121111212112131121411215112161121711218112191122011221112221122311224112251122611227112281122911230112311123211233112341123511236112371123811239112401124111242112431124411245112461124711248112491125011251112521125311254112551125611257112581125911260112611126211263112641126511266112671126811269112701127111272112731127411275112761127711278112791128011281112821128311284112851128611287112881128911290112911129211293112941129511296112971129811299113001130111302113031130411305113061130711308113091131011311113121131311314113151131611317113181131911320113211132211323113241132511326113271132811329113301133111332113331133411335113361133711338113391134011341113421134311344113451134611347113481134911350113511135211353113541135511356113571135811359113601136111362113631136411365113661136711368113691137011371113721137311374113751137611377113781137911380113811138211383113841138511386113871138811389113901139111392113931139411395113961139711398113991140011401114021140311404114051140611407114081140911410114111141211413114141141511416114171141811419114201142111422114231142411425114261142711428114291143011431114321143311434114351143611437114381143911440114411144211443114441144511446114471144811449114501145111452114531145411455114561145711458114591146011461114621146311464114651146611467114681146911470114711147211473114741147511476114771147811479114801148111482114831148411485114861148711488114891149011491114921149311494114951149611497114981149911500115011150211503115041150511506115071150811509115101151111512115131151411515115161151711518115191152011521115221152311524115251152611527115281152911530115311153211533115341153511536115371153811539115401154111542115431154411545115461154711548115491155011551115521155311554115551155611557115581155911560115611156211563115641156511566115671156811569115701157111572115731157411575115761157711578115791158011581115821158311584115851158611587115881158911590115911159211593115941159511596115971159811599116001160111602116031160411605116061160711608116091161011611116121161311614116151161611617116181161911620116211162211623116241162511626116271162811629116301163111632116331163411635116361163711638116391164011641116421164311644116451164611647116481164911650116511165211653116541165511656116571165811659116601166111662116631166411665116661166711668116691167011671116721167311674116751167611677116781167911680116811168211683116841168511686116871168811689116901169111692116931169411695116961169711698116991170011701117021170311704117051170611707117081170911710117111171211713117141171511716117171171811719117201172111722117231172411725117261172711728117291173011731117321173311734117351173611737117381173911740117411174211743117441174511746117471174811749117501175111752117531175411755117561175711758117591176011761117621176311764117651176611767117681176911770117711177211773117741177511776117771177811779117801178111782117831178411785117861178711788117891179011791117921179311794117951179611797117981179911800118011180211803118041180511806118071180811809118101181111812118131181411815118161181711818118191182011821118221182311824118251182611827118281182911830118311183211833118341183511836118371183811839118401184111842118431184411845118461184711848118491185011851118521185311854118551185611857118581185911860118611186211863118641186511866118671186811869118701187111872118731187411875118761187711878118791188011881118821188311884118851188611887118881188911890118911189211893118941189511896118971189811899119001190111902119031190411905119061190711908119091191011911119121191311914119151191611917119181191911920119211192211923119241192511926119271192811929119301193111932119331193411935119361193711938119391194011941119421194311944119451194611947119481194911950119511195211953119541195511956119571195811959119601196111962119631196411965119661196711968119691197011971119721197311974119751197611977119781197911980119811198211983119841198511986119871198811989119901199111992119931199411995119961199711998119991200012001120021200312004120051200612007120081200912010120111201212013120141201512016120171201812019120201202112022120231202412025120261202712028120291203012031120321203312034120351203612037120381203912040120411204212043120441204512046120471204812049120501205112052120531205412055120561205712058120591206012061120621206312064120651206612067120681206912070120711207212073120741207512076120771207812079120801208112082120831208412085120861208712088120891209012091120921209312094120951209612097120981209912100121011210212103121041210512106121071210812109121101211112112121131211412115121161211712118121191212012121121221212312124121251212612127121281212912130121311213212133121341213512136121371213812139121401214112142121431214412145121461214712148121491215012151121521215312154121551215612157121581215912160121611216212163121641216512166121671216812169121701217112172121731217412175121761217712178121791218012181121821218312184121851218612187121881218912190121911219212193121941219512196121971219812199122001220112202122031220412205122061220712208122091221012211122121221312214122151221612217122181221912220122211222212223122241222512226122271222812229122301223112232122331223412235122361223712238122391224012241122421224312244122451224612247122481224912250122511225212253122541225512256122571225812259122601226112262122631226412265122661226712268122691227012271122721227312274122751227612277122781227912280122811228212283122841228512286122871228812289122901229112292122931229412295122961229712298122991230012301123021230312304123051230612307123081230912310123111231212313123141231512316123171231812319123201232112322123231232412325123261232712328123291233012331123321233312334123351233612337123381233912340123411234212343123441234512346123471234812349123501235112352123531235412355123561235712358123591236012361123621236312364123651236612367123681236912370123711237212373123741237512376123771237812379123801238112382123831238412385123861238712388123891239012391123921239312394123951239612397123981239912400124011240212403124041240512406124071240812409124101241112412124131241412415124161241712418124191242012421124221242312424124251242612427124281242912430124311243212433124341243512436124371243812439124401244112442124431244412445124461244712448124491245012451124521245312454124551245612457124581245912460124611246212463124641246512466124671246812469124701247112472124731247412475124761247712478124791248012481124821248312484124851248612487124881248912490124911249212493124941249512496124971249812499125001250112502125031250412505125061250712508125091251012511125121251312514125151251612517125181251912520125211252212523125241252512526125271252812529125301253112532125331253412535125361253712538125391254012541125421254312544125451254612547125481254912550125511255212553125541255512556125571255812559125601256112562125631256412565125661256712568125691257012571125721257312574125751257612577125781257912580125811258212583125841258512586125871258812589125901259112592125931259412595125961259712598125991260012601126021260312604126051260612607126081260912610126111261212613126141261512616126171261812619126201262112622126231262412625126261262712628126291263012631126321263312634126351263612637126381263912640126411264212643126441264512646126471264812649126501265112652126531265412655126561265712658126591266012661126621266312664126651266612667126681266912670126711267212673126741267512676126771267812679126801268112682126831268412685126861268712688126891269012691126921269312694126951269612697126981269912700127011270212703127041270512706127071270812709127101271112712127131271412715127161271712718127191272012721127221272312724127251272612727127281272912730127311273212733127341273512736127371273812739127401274112742127431274412745127461274712748127491275012751127521275312754127551275612757127581275912760127611276212763127641276512766127671276812769127701277112772127731277412775127761277712778127791278012781127821278312784127851278612787127881278912790127911279212793127941279512796127971279812799128001280112802128031280412805128061280712808128091281012811128121281312814128151281612817128181281912820128211282212823128241282512826128271282812829128301283112832128331283412835128361283712838128391284012841128421284312844128451284612847128481284912850128511285212853128541285512856128571285812859128601286112862128631286412865128661286712868128691287012871128721287312874128751287612877128781287912880128811288212883128841288512886128871288812889128901289112892128931289412895128961289712898128991290012901129021290312904129051290612907129081290912910129111291212913129141291512916129171291812919129201292112922129231292412925129261292712928129291293012931129321293312934129351293612937129381293912940129411294212943129441294512946129471294812949129501295112952129531295412955129561295712958129591296012961129621296312964129651296612967129681296912970129711297212973129741297512976129771297812979129801298112982129831298412985129861298712988129891299012991129921299312994129951299612997129981299913000130011300213003130041300513006130071300813009130101301113012130131301413015130161301713018130191302013021130221302313024130251302613027130281302913030130311303213033130341303513036130371303813039130401304113042130431304413045130461304713048130491305013051130521305313054130551305613057130581305913060130611306213063130641306513066130671306813069130701307113072130731307413075130761307713078130791308013081130821308313084130851308613087130881308913090130911309213093130941309513096130971309813099131001310113102131031310413105131061310713108131091311013111131121311313114131151311613117131181311913120131211312213123131241312513126131271312813129131301313113132131331313413135131361313713138131391314013141131421314313144131451314613147131481314913150131511315213153131541315513156131571315813159131601316113162131631316413165131661316713168131691317013171131721317313174131751317613177131781317913180131811318213183131841318513186131871318813189131901319113192131931319413195131961319713198131991320013201132021320313204132051320613207132081320913210132111321213213132141321513216132171321813219132201322113222132231322413225132261322713228132291323013231132321323313234132351323613237132381323913240132411324213243132441324513246132471324813249132501325113252132531325413255132561325713258132591326013261132621326313264132651326613267132681326913270132711327213273132741327513276132771327813279132801328113282132831328413285132861328713288132891329013291132921329313294132951329613297132981329913300133011330213303133041330513306133071330813309133101331113312133131331413315133161331713318133191332013321133221332313324133251332613327133281332913330133311333213333133341333513336133371333813339133401334113342133431334413345133461334713348133491335013351133521335313354133551335613357133581335913360133611336213363133641336513366133671336813369133701337113372133731337413375133761337713378133791338013381133821338313384133851338613387133881338913390133911339213393133941339513396133971339813399134001340113402134031340413405134061340713408134091341013411134121341313414134151341613417134181341913420134211342213423134241342513426134271342813429134301343113432134331343413435134361343713438134391344013441134421344313444134451344613447134481344913450134511345213453134541345513456134571345813459134601346113462134631346413465134661346713468134691347013471134721347313474134751347613477134781347913480134811348213483134841348513486134871348813489134901349113492134931349413495134961349713498134991350013501135021350313504135051350613507135081350913510135111351213513135141351513516135171351813519135201352113522135231352413525135261352713528135291353013531135321353313534135351353613537135381353913540135411354213543135441354513546135471354813549135501355113552135531355413555135561355713558135591356013561135621356313564135651356613567135681356913570135711357213573135741357513576135771357813579135801358113582135831358413585135861358713588135891359013591135921359313594135951359613597135981359913600136011360213603136041360513606136071360813609136101361113612136131361413615136161361713618136191362013621136221362313624136251362613627136281362913630136311363213633136341363513636136371363813639136401364113642136431364413645136461364713648136491365013651136521365313654136551365613657136581365913660136611366213663136641366513666136671366813669136701367113672136731367413675136761367713678136791368013681136821368313684136851368613687136881368913690136911369213693136941369513696136971369813699137001370113702137031370413705137061370713708137091371013711137121371313714137151371613717137181371913720137211372213723137241372513726137271372813729137301373113732137331373413735137361373713738137391374013741137421374313744137451374613747137481374913750137511375213753137541375513756137571375813759137601376113762137631376413765137661376713768137691377013771137721377313774137751377613777137781377913780137811378213783137841378513786137871378813789137901379113792137931379413795137961379713798137991380013801138021380313804138051380613807138081380913810138111381213813138141381513816138171381813819138201382113822138231382413825138261382713828138291383013831138321383313834138351383613837138381383913840138411384213843138441384513846138471384813849138501385113852138531385413855138561385713858138591386013861138621386313864138651386613867138681386913870138711387213873138741387513876138771387813879138801388113882138831388413885138861388713888138891389013891138921389313894138951389613897138981389913900139011390213903139041390513906139071390813909139101391113912139131391413915139161391713918139191392013921139221392313924139251392613927139281392913930139311393213933139341393513936139371393813939139401394113942139431394413945139461394713948139491395013951139521395313954139551395613957139581395913960139611396213963139641396513966139671396813969139701397113972139731397413975139761397713978139791398013981139821398313984139851398613987139881398913990139911399213993139941399513996139971399813999140001400114002140031400414005140061400714008140091401014011140121401314014140151401614017140181401914020140211402214023140241402514026140271402814029140301403114032140331403414035140361403714038140391404014041140421404314044140451404614047140481404914050140511405214053140541405514056140571405814059140601406114062140631406414065140661406714068140691407014071140721407314074140751407614077140781407914080140811408214083140841408514086140871408814089140901409114092140931409414095140961409714098140991410014101141021410314104141051410614107141081410914110141111411214113141141411514116141171411814119141201412114122141231412414125141261412714128141291413014131141321413314134141351413614137141381413914140141411414214143141441414514146141471414814149141501415114152141531415414155141561415714158141591416014161141621416314164141651416614167141681416914170141711417214173141741417514176141771417814179141801418114182141831418414185141861418714188141891419014191141921419314194141951419614197141981419914200142011420214203142041420514206142071420814209142101421114212142131421414215142161421714218142191422014221142221422314224142251422614227142281422914230142311423214233142341423514236142371423814239142401424114242142431424414245142461424714248142491425014251142521425314254142551425614257142581425914260142611426214263142641426514266142671426814269142701427114272142731427414275142761427714278142791428014281142821428314284142851428614287142881428914290142911429214293142941429514296142971429814299143001430114302143031430414305143061430714308143091431014311143121431314314143151431614317143181431914320143211432214323143241432514326143271432814329143301433114332143331433414335143361433714338143391434014341143421434314344143451434614347143481434914350143511435214353143541435514356143571435814359143601436114362143631436414365143661436714368143691437014371143721437314374143751437614377143781437914380143811438214383143841438514386143871438814389143901439114392143931439414395143961439714398143991440014401144021440314404144051440614407144081440914410144111441214413144141441514416144171441814419144201442114422144231442414425144261442714428144291443014431144321443314434144351443614437144381443914440144411444214443144441444514446144471444814449144501445114452144531445414455144561445714458144591446014461144621446314464144651446614467144681446914470144711447214473144741447514476144771447814479144801448114482144831448414485144861448714488144891449014491144921449314494144951449614497144981449914500145011450214503145041450514506145071450814509145101451114512145131451414515145161451714518145191452014521145221452314524145251452614527145281452914530145311453214533145341453514536145371453814539145401454114542145431454414545145461454714548145491455014551145521455314554145551455614557145581455914560145611456214563145641456514566145671456814569145701457114572145731457414575145761457714578145791458014581145821458314584145851458614587145881458914590145911459214593145941459514596145971459814599146001460114602146031460414605146061460714608146091461014611146121461314614146151461614617146181461914620146211462214623146241462514626146271462814629146301463114632146331463414635146361463714638146391464014641146421464314644146451464614647146481464914650146511465214653146541465514656146571465814659146601466114662146631466414665146661466714668146691467014671146721467314674146751467614677146781467914680146811468214683146841468514686146871468814689146901469114692146931469414695146961469714698146991470014701147021470314704147051470614707147081470914710147111471214713147141471514716147171471814719147201472114722147231472414725147261472714728147291473014731147321473314734147351473614737147381473914740147411474214743147441474514746147471474814749147501475114752147531475414755147561475714758147591476014761147621476314764147651476614767147681476914770147711477214773147741477514776147771477814779147801478114782147831478414785147861478714788147891479014791147921479314794147951479614797147981479914800148011480214803148041480514806148071480814809148101481114812148131481414815148161481714818148191482014821148221482314824148251482614827148281482914830148311483214833148341483514836148371483814839148401484114842148431484414845148461484714848148491485014851148521485314854148551485614857148581485914860148611486214863148641486514866148671486814869148701487114872148731487414875148761487714878148791488014881148821488314884148851488614887148881488914890148911489214893148941489514896148971489814899149001490114902149031490414905149061490714908149091491014911149121491314914149151491614917149181491914920149211492214923149241492514926149271492814929149301493114932149331493414935149361493714938149391494014941149421494314944149451494614947149481494914950149511495214953149541495514956149571495814959149601496114962149631496414965149661496714968149691497014971149721497314974149751497614977149781497914980149811498214983149841498514986149871498814989149901499114992149931499414995149961499714998149991500015001150021500315004150051500615007150081500915010150111501215013150141501515016150171501815019150201502115022150231502415025150261502715028150291503015031150321503315034150351503615037150381503915040150411504215043150441504515046150471504815049150501505115052150531505415055150561505715058150591506015061150621506315064150651506615067150681506915070150711507215073150741507515076150771507815079150801508115082150831508415085150861508715088150891509015091150921509315094150951509615097150981509915100151011510215103151041510515106151071510815109151101511115112151131511415115151161511715118151191512015121151221512315124151251512615127151281512915130151311513215133151341513515136151371513815139151401514115142151431514415145151461514715148151491515015151151521515315154151551515615157151581515915160151611516215163151641516515166151671516815169151701517115172151731517415175151761517715178151791518015181151821518315184151851518615187151881518915190151911519215193151941519515196151971519815199152001520115202152031520415205152061520715208152091521015211152121521315214152151521615217152181521915220152211522215223152241522515226152271522815229152301523115232152331523415235152361523715238152391524015241152421524315244152451524615247152481524915250152511525215253152541525515256152571525815259152601526115262152631526415265152661526715268152691527015271152721527315274152751527615277152781527915280152811528215283152841528515286152871528815289152901529115292152931529415295152961529715298152991530015301153021530315304153051530615307153081530915310153111531215313153141531515316153171531815319153201532115322153231532415325153261532715328153291533015331153321533315334153351533615337153381533915340153411534215343153441534515346153471534815349153501535115352153531535415355153561535715358153591536015361153621536315364153651536615367153681536915370153711537215373153741537515376153771537815379153801538115382153831538415385153861538715388153891539015391153921539315394153951539615397153981539915400154011540215403154041540515406154071540815409154101541115412154131541415415154161541715418154191542015421154221542315424154251542615427154281542915430154311543215433154341543515436154371543815439154401544115442154431544415445154461544715448154491545015451154521545315454154551545615457154581545915460154611546215463154641546515466154671546815469154701547115472154731547415475154761547715478154791548015481154821548315484154851548615487154881548915490154911549215493154941549515496154971549815499155001550115502155031550415505155061550715508155091551015511155121551315514155151551615517155181551915520155211552215523155241552515526155271552815529155301553115532155331553415535155361553715538155391554015541155421554315544155451554615547155481554915550155511555215553155541555515556155571555815559155601556115562155631556415565155661556715568155691557015571155721557315574155751557615577155781557915580155811558215583155841558515586155871558815589155901559115592155931559415595155961559715598155991560015601156021560315604156051560615607156081560915610156111561215613156141561515616156171561815619156201562115622156231562415625156261562715628156291563015631156321563315634156351563615637156381563915640156411564215643156441564515646156471564815649156501565115652156531565415655156561565715658156591566015661156621566315664156651566615667156681566915670156711567215673156741567515676156771567815679156801568115682156831568415685156861568715688156891569015691156921569315694156951569615697156981569915700157011570215703157041570515706157071570815709157101571115712157131571415715157161571715718157191572015721157221572315724157251572615727157281572915730157311573215733157341573515736157371573815739157401574115742157431574415745157461574715748157491575015751157521575315754157551575615757157581575915760157611576215763157641576515766157671576815769157701577115772157731577415775157761577715778157791578015781157821578315784157851578615787157881578915790157911579215793157941579515796157971579815799158001580115802158031580415805158061580715808158091581015811158121581315814158151581615817158181581915820158211582215823158241582515826158271582815829158301583115832158331583415835158361583715838158391584015841158421584315844158451584615847158481584915850158511585215853158541585515856158571585815859158601586115862158631586415865158661586715868158691587015871158721587315874158751587615877158781587915880158811588215883158841588515886158871588815889158901589115892158931589415895158961589715898158991590015901159021590315904159051590615907159081590915910159111591215913159141591515916159171591815919159201592115922159231592415925159261592715928159291593015931159321593315934159351593615937159381593915940159411594215943159441594515946159471594815949159501595115952159531595415955159561595715958159591596015961159621596315964159651596615967159681596915970159711597215973159741597515976159771597815979159801598115982159831598415985159861598715988159891599015991159921599315994159951599615997159981599916000160011600216003160041600516006160071600816009160101601116012160131601416015160161601716018160191602016021160221602316024160251602616027160281602916030160311603216033160341603516036160371603816039160401604116042160431604416045160461604716048160491605016051160521605316054160551605616057160581605916060160611606216063160641606516066160671606816069160701607116072160731607416075160761607716078160791608016081160821608316084160851608616087160881608916090160911609216093160941609516096160971609816099161001610116102161031610416105161061610716108161091611016111161121611316114161151611616117161181611916120161211612216123161241612516126161271612816129161301613116132161331613416135161361613716138161391614016141161421614316144161451614616147161481614916150161511615216153161541615516156161571615816159161601616116162161631616416165161661616716168161691617016171161721617316174161751617616177161781617916180161811618216183161841618516186161871618816189161901619116192161931619416195161961619716198161991620016201162021620316204162051620616207162081620916210162111621216213162141621516216162171621816219162201622116222162231622416225162261622716228162291623016231162321623316234162351623616237162381623916240162411624216243162441624516246162471624816249162501625116252162531625416255162561625716258162591626016261162621626316264162651626616267162681626916270162711627216273162741627516276162771627816279162801628116282162831628416285162861628716288162891629016291162921629316294162951629616297162981629916300163011630216303163041630516306163071630816309163101631116312163131631416315163161631716318163191632016321163221632316324163251632616327163281632916330163311633216333163341633516336163371633816339163401634116342163431634416345163461634716348163491635016351163521635316354163551635616357163581635916360163611636216363163641636516366163671636816369163701637116372163731637416375163761637716378163791638016381163821638316384163851638616387163881638916390163911639216393163941639516396163971639816399164001640116402164031640416405164061640716408164091641016411164121641316414164151641616417164181641916420164211642216423164241642516426164271642816429164301643116432164331643416435164361643716438164391644016441164421644316444164451644616447164481644916450164511645216453164541645516456164571645816459164601646116462164631646416465164661646716468164691647016471164721647316474164751647616477164781647916480164811648216483164841648516486164871648816489164901649116492164931649416495164961649716498164991650016501165021650316504165051650616507165081650916510165111651216513165141651516516165171651816519165201652116522165231652416525165261652716528165291653016531165321653316534165351653616537165381653916540165411654216543165441654516546165471654816549165501655116552165531655416555165561655716558165591656016561165621656316564165651656616567165681656916570165711657216573165741657516576165771657816579165801658116582165831658416585165861658716588165891659016591165921659316594165951659616597165981659916600166011660216603166041660516606166071660816609166101661116612166131661416615166161661716618166191662016621166221662316624166251662616627166281662916630166311663216633166341663516636166371663816639166401664116642166431664416645166461664716648166491665016651166521665316654166551665616657166581665916660166611666216663166641666516666166671666816669166701667116672166731667416675166761667716678166791668016681166821668316684166851668616687166881668916690166911669216693166941669516696166971669816699167001670116702167031670416705167061670716708167091671016711167121671316714167151671616717167181671916720167211672216723167241672516726167271672816729167301673116732167331673416735167361673716738167391674016741167421674316744167451674616747167481674916750167511675216753167541675516756167571675816759167601676116762167631676416765167661676716768167691677016771167721677316774167751677616777167781677916780167811678216783167841678516786167871678816789167901679116792167931679416795167961679716798167991680016801168021680316804168051680616807168081680916810168111681216813168141681516816168171681816819168201682116822168231682416825168261682716828168291683016831168321683316834168351683616837168381683916840168411684216843168441684516846168471684816849168501685116852168531685416855168561685716858168591686016861168621686316864168651686616867168681686916870168711687216873168741687516876168771687816879168801688116882168831688416885168861688716888168891689016891168921689316894168951689616897168981689916900169011690216903169041690516906169071690816909169101691116912169131691416915169161691716918169191692016921169221692316924169251692616927169281692916930169311693216933169341693516936169371693816939169401694116942169431694416945169461694716948169491695016951169521695316954169551695616957169581695916960169611696216963169641696516966169671696816969169701697116972169731697416975169761697716978169791698016981169821698316984169851698616987169881698916990169911699216993169941699516996169971699816999170001700117002170031700417005170061700717008170091701017011170121701317014170151701617017170181701917020170211702217023170241702517026170271702817029170301703117032170331703417035170361703717038170391704017041170421704317044170451704617047170481704917050170511705217053170541705517056170571705817059170601706117062170631706417065170661706717068170691707017071170721707317074170751707617077170781707917080170811708217083170841708517086170871708817089170901709117092170931709417095170961709717098170991710017101171021710317104171051710617107171081710917110171111711217113171141711517116171171711817119171201712117122171231712417125171261712717128171291713017131171321713317134171351713617137171381713917140171411714217143171441714517146171471714817149171501715117152171531715417155171561715717158171591716017161171621716317164171651716617167171681716917170171711717217173171741717517176171771717817179171801718117182171831718417185171861718717188171891719017191171921719317194171951719617197171981719917200172011720217203172041720517206172071720817209172101721117212172131721417215172161721717218172191722017221172221722317224172251722617227172281722917230172311723217233172341723517236172371723817239172401724117242172431724417245172461724717248172491725017251172521725317254172551725617257172581725917260172611726217263172641726517266172671726817269172701727117272172731727417275172761727717278172791728017281172821728317284172851728617287172881728917290172911729217293172941729517296172971729817299173001730117302173031730417305173061730717308173091731017311173121731317314173151731617317173181731917320173211732217323173241732517326173271732817329173301733117332173331733417335173361733717338173391734017341173421734317344173451734617347173481734917350173511735217353173541735517356173571735817359173601736117362173631736417365173661736717368173691737017371173721737317374173751737617377173781737917380173811738217383173841738517386173871738817389173901739117392173931739417395173961739717398173991740017401174021740317404174051740617407174081740917410174111741217413174141741517416174171741817419174201742117422174231742417425174261742717428174291743017431174321743317434174351743617437174381743917440174411744217443174441744517446174471744817449174501745117452174531745417455174561745717458174591746017461174621746317464174651746617467174681746917470174711747217473174741747517476174771747817479174801748117482174831748417485174861748717488174891749017491174921749317494174951749617497174981749917500175011750217503175041750517506175071750817509175101751117512175131751417515175161751717518175191752017521175221752317524175251752617527175281752917530175311753217533175341753517536175371753817539175401754117542175431754417545175461754717548175491755017551175521755317554175551755617557175581755917560175611756217563175641756517566175671756817569175701757117572175731757417575175761757717578175791758017581175821758317584175851758617587175881758917590175911759217593175941759517596175971759817599176001760117602176031760417605176061760717608176091761017611176121761317614176151761617617176181761917620176211762217623176241762517626176271762817629176301763117632176331763417635176361763717638176391764017641176421764317644176451764617647176481764917650176511765217653176541765517656176571765817659176601766117662176631766417665176661766717668176691767017671176721767317674176751767617677176781767917680176811768217683176841768517686176871768817689176901769117692176931769417695176961769717698176991770017701177021770317704177051770617707177081770917710177111771217713177141771517716177171771817719177201772117722177231772417725177261772717728177291773017731177321773317734177351773617737177381773917740177411774217743177441774517746177471774817749177501775117752177531775417755177561775717758177591776017761177621776317764177651776617767177681776917770177711777217773177741777517776177771777817779177801778117782177831778417785177861778717788177891779017791177921779317794177951779617797177981779917800178011780217803178041780517806178071780817809178101781117812178131781417815178161781717818178191782017821178221782317824178251782617827178281782917830178311783217833178341783517836178371783817839178401784117842178431784417845178461784717848178491785017851178521785317854178551785617857178581785917860178611786217863178641786517866178671786817869178701787117872178731787417875178761787717878178791788017881178821788317884178851788617887178881788917890178911789217893178941789517896178971789817899179001790117902179031790417905179061790717908179091791017911179121791317914179151791617917179181791917920179211792217923179241792517926179271792817929179301793117932179331793417935179361793717938179391794017941179421794317944179451794617947179481794917950179511795217953179541795517956179571795817959179601796117962179631796417965179661796717968179691797017971179721797317974179751797617977179781797917980179811798217983179841798517986179871798817989179901799117992179931799417995179961799717998179991800018001180021800318004180051800618007180081800918010180111801218013180141801518016180171801818019180201802118022180231802418025180261802718028180291803018031180321803318034180351803618037180381803918040180411804218043180441804518046180471804818049180501805118052180531805418055180561805718058180591806018061180621806318064180651806618067180681806918070180711807218073180741807518076180771807818079180801808118082180831808418085180861808718088180891809018091180921809318094180951809618097180981809918100181011810218103181041810518106181071810818109181101811118112181131811418115181161811718118181191812018121181221812318124181251812618127181281812918130181311813218133181341813518136181371813818139181401814118142181431814418145181461814718148181491815018151181521815318154181551815618157181581815918160181611816218163181641816518166181671816818169181701817118172181731817418175181761817718178181791818018181181821818318184181851818618187181881818918190181911819218193181941819518196181971819818199182001820118202182031820418205182061820718208182091821018211182121821318214182151821618217182181821918220182211822218223182241822518226182271822818229182301823118232182331823418235182361823718238182391824018241182421824318244182451824618247182481824918250182511825218253182541825518256182571825818259182601826118262182631826418265182661826718268182691827018271182721827318274182751827618277182781827918280182811828218283182841828518286182871828818289182901829118292182931829418295182961829718298182991830018301183021830318304183051830618307183081830918310183111831218313183141831518316183171831818319183201832118322183231832418325183261832718328183291833018331183321833318334183351833618337183381833918340183411834218343183441834518346183471834818349183501835118352183531835418355183561835718358183591836018361183621836318364183651836618367183681836918370183711837218373183741837518376183771837818379183801838118382183831838418385183861838718388183891839018391183921839318394183951839618397183981839918400184011840218403184041840518406184071840818409184101841118412184131841418415184161841718418184191842018421184221842318424184251842618427184281842918430184311843218433184341843518436184371843818439184401844118442184431844418445184461844718448184491845018451184521845318454184551845618457184581845918460184611846218463184641846518466184671846818469184701847118472184731847418475184761847718478184791848018481184821848318484184851848618487184881848918490184911849218493184941849518496184971849818499185001850118502185031850418505185061850718508185091851018511185121851318514185151851618517185181851918520185211852218523185241852518526185271852818529185301853118532185331853418535185361853718538185391854018541185421854318544185451854618547185481854918550185511855218553185541855518556185571855818559185601856118562185631856418565185661856718568185691857018571185721857318574185751857618577185781857918580185811858218583185841858518586185871858818589185901859118592185931859418595185961859718598185991860018601186021860318604186051860618607186081860918610186111861218613186141861518616186171861818619186201862118622186231862418625186261862718628186291863018631186321863318634186351863618637186381863918640186411864218643186441864518646186471864818649186501865118652186531865418655186561865718658186591866018661186621866318664186651866618667186681866918670186711867218673186741867518676186771867818679186801868118682186831868418685186861868718688186891869018691186921869318694186951869618697186981869918700187011870218703187041870518706187071870818709187101871118712187131871418715187161871718718187191872018721187221872318724187251872618727187281872918730187311873218733187341873518736187371873818739187401874118742187431874418745187461874718748187491875018751187521875318754187551875618757187581875918760187611876218763187641876518766187671876818769187701877118772187731877418775187761877718778187791878018781187821878318784187851878618787187881878918790187911879218793187941879518796187971879818799188001880118802188031880418805188061880718808188091881018811188121881318814188151881618817188181881918820188211882218823188241882518826188271882818829188301883118832188331883418835188361883718838188391884018841188421884318844188451884618847188481884918850188511885218853188541885518856188571885818859188601886118862188631886418865188661886718868188691887018871188721887318874188751887618877188781887918880188811888218883188841888518886188871888818889188901889118892188931889418895188961889718898188991890018901189021890318904189051890618907189081890918910189111891218913189141891518916189171891818919189201892118922189231892418925189261892718928189291893018931189321893318934189351893618937189381893918940189411894218943189441894518946189471894818949189501895118952189531895418955189561895718958189591896018961189621896318964189651896618967189681896918970189711897218973189741897518976189771897818979189801898118982189831898418985189861898718988189891899018991189921899318994189951899618997189981899919000190011900219003190041900519006190071900819009190101901119012190131901419015190161901719018190191902019021190221902319024190251902619027190281902919030190311903219033190341903519036190371903819039190401904119042190431904419045190461904719048190491905019051190521905319054190551905619057190581905919060190611906219063190641906519066190671906819069190701907119072190731907419075190761907719078190791908019081190821908319084190851908619087190881908919090190911909219093190941909519096190971909819099191001910119102191031910419105191061910719108191091911019111191121911319114191151911619117191181911919120191211912219123191241912519126191271912819129191301913119132191331913419135191361913719138191391914019141191421914319144191451914619147191481914919150191511915219153191541915519156191571915819159191601916119162191631916419165191661916719168191691917019171191721917319174191751917619177191781917919180191811918219183191841918519186191871918819189191901919119192191931919419195191961919719198191991920019201192021920319204192051920619207192081920919210192111921219213192141921519216192171921819219192201922119222192231922419225192261922719228192291923019231192321923319234192351923619237192381923919240192411924219243192441924519246192471924819249192501925119252192531925419255192561925719258192591926019261192621926319264192651926619267192681926919270192711927219273192741927519276192771927819279192801928119282192831928419285192861928719288192891929019291192921929319294192951929619297192981929919300193011930219303193041930519306193071930819309193101931119312193131931419315193161931719318193191932019321193221932319324193251932619327193281932919330193311933219333193341933519336193371933819339193401934119342193431934419345193461934719348193491935019351193521935319354193551935619357193581935919360193611936219363193641936519366193671936819369193701937119372193731937419375193761937719378193791938019381193821938319384193851938619387193881938919390193911939219393193941939519396193971939819399194001940119402194031940419405194061940719408194091941019411194121941319414194151941619417194181941919420194211942219423194241942519426194271942819429194301943119432194331943419435194361943719438194391944019441194421944319444194451944619447194481944919450194511945219453194541945519456194571945819459194601946119462194631946419465194661946719468194691947019471194721947319474194751947619477194781947919480194811948219483194841948519486194871948819489194901949119492194931949419495194961949719498194991950019501195021950319504195051950619507195081950919510195111951219513195141951519516195171951819519195201952119522195231952419525195261952719528195291953019531195321953319534195351953619537195381953919540195411954219543195441954519546195471954819549195501955119552195531955419555195561955719558195591956019561195621956319564195651956619567195681956919570195711957219573195741957519576195771957819579195801958119582195831958419585195861958719588195891959019591195921959319594195951959619597195981959919600196011960219603196041960519606196071960819609196101961119612196131961419615196161961719618196191962019621196221962319624196251962619627196281962919630196311963219633196341963519636196371963819639196401964119642196431964419645196461964719648196491965019651196521965319654196551965619657196581965919660196611966219663196641966519666196671966819669196701967119672196731967419675196761967719678196791968019681196821968319684196851968619687196881968919690196911969219693196941969519696196971969819699197001970119702197031970419705197061970719708197091971019711197121971319714197151971619717197181971919720197211972219723197241972519726197271972819729197301973119732197331973419735197361973719738197391974019741197421974319744197451974619747197481974919750197511975219753197541975519756197571975819759197601976119762197631976419765197661976719768197691977019771197721977319774197751977619777197781977919780197811978219783197841978519786197871978819789197901979119792197931979419795197961979719798197991980019801198021980319804198051980619807198081980919810198111981219813198141981519816198171981819819198201982119822198231982419825198261982719828198291983019831198321983319834198351983619837198381983919840198411984219843198441984519846198471984819849198501985119852198531985419855198561985719858198591986019861198621986319864198651986619867198681986919870198711987219873198741987519876198771987819879198801988119882198831988419885198861988719888198891989019891198921989319894198951989619897198981989919900199011990219903199041990519906199071990819909199101991119912199131991419915199161991719918199191992019921199221992319924199251992619927199281992919930199311993219933199341993519936199371993819939199401994119942199431994419945199461994719948199491995019951199521995319954199551995619957199581995919960199611996219963199641996519966199671996819969199701997119972199731997419975199761997719978199791998019981199821998319984199851998619987199881998919990199911999219993199941999519996199971999819999200002000120002200032000420005200062000720008200092001020011200122001320014200152001620017200182001920020200212002220023200242002520026200272002820029200302003120032200332003420035200362003720038200392004020041200422004320044200452004620047200482004920050200512005220053200542005520056200572005820059200602006120062200632006420065200662006720068200692007020071200722007320074200752007620077200782007920080200812008220083200842008520086200872008820089200902009120092200932009420095200962009720098200992010020101201022010320104201052010620107201082010920110201112011220113201142011520116201172011820119201202012120122201232012420125201262012720128201292013020131201322013320134201352013620137201382013920140201412014220143201442014520146201472014820149201502015120152201532015420155201562015720158201592016020161201622016320164201652016620167201682016920170201712017220173201742017520176201772017820179201802018120182201832018420185201862018720188201892019020191201922019320194201952019620197201982019920200202012020220203202042020520206202072020820209202102021120212202132021420215202162021720218202192022020221202222022320224202252022620227202282022920230202312023220233202342023520236202372023820239202402024120242202432024420245202462024720248202492025020251202522025320254202552025620257202582025920260202612026220263202642026520266202672026820269202702027120272202732027420275202762027720278202792028020281202822028320284202852028620287202882028920290202912029220293202942029520296202972029820299203002030120302203032030420305203062030720308203092031020311203122031320314203152031620317203182031920320203212032220323203242032520326203272032820329203302033120332203332033420335203362033720338203392034020341203422034320344203452034620347203482034920350203512035220353203542035520356203572035820359203602036120362203632036420365203662036720368203692037020371203722037320374203752037620377203782037920380203812038220383203842038520386203872038820389203902039120392203932039420395203962039720398203992040020401204022040320404204052040620407204082040920410204112041220413204142041520416204172041820419204202042120422204232042420425204262042720428204292043020431204322043320434204352043620437204382043920440204412044220443204442044520446204472044820449204502045120452204532045420455204562045720458204592046020461204622046320464204652046620467204682046920470204712047220473204742047520476204772047820479204802048120482204832048420485204862048720488204892049020491204922049320494204952049620497204982049920500205012050220503205042050520506205072050820509205102051120512205132051420515205162051720518205192052020521205222052320524205252052620527205282052920530205312053220533205342053520536205372053820539205402054120542205432054420545205462054720548205492055020551205522055320554205552055620557205582055920560205612056220563205642056520566205672056820569205702057120572205732057420575205762057720578205792058020581205822058320584205852058620587205882058920590205912059220593205942059520596205972059820599206002060120602206032060420605206062060720608206092061020611206122061320614206152061620617206182061920620206212062220623206242062520626206272062820629206302063120632206332063420635206362063720638206392064020641206422064320644206452064620647206482064920650206512065220653206542065520656206572065820659206602066120662206632066420665206662066720668206692067020671206722067320674206752067620677206782067920680206812068220683206842068520686206872068820689206902069120692206932069420695206962069720698206992070020701207022070320704207052070620707207082070920710207112071220713207142071520716207172071820719207202072120722207232072420725207262072720728207292073020731207322073320734207352073620737207382073920740207412074220743207442074520746207472074820749207502075120752207532075420755207562075720758207592076020761207622076320764207652076620767207682076920770207712077220773207742077520776207772077820779207802078120782207832078420785207862078720788207892079020791207922079320794207952079620797207982079920800208012080220803208042080520806208072080820809208102081120812208132081420815208162081720818208192082020821208222082320824208252082620827208282082920830208312083220833208342083520836208372083820839208402084120842208432084420845208462084720848208492085020851208522085320854208552085620857208582085920860208612086220863208642086520866208672086820869208702087120872208732087420875208762087720878208792088020881208822088320884208852088620887208882088920890208912089220893208942089520896208972089820899209002090120902209032090420905209062090720908209092091020911209122091320914209152091620917209182091920920209212092220923209242092520926209272092820929209302093120932209332093420935209362093720938209392094020941209422094320944209452094620947209482094920950209512095220953209542095520956209572095820959209602096120962209632096420965209662096720968209692097020971209722097320974209752097620977209782097920980209812098220983209842098520986209872098820989209902099120992209932099420995209962099720998209992100021001210022100321004210052100621007210082100921010210112101221013210142101521016210172101821019210202102121022210232102421025210262102721028210292103021031210322103321034210352103621037210382103921040210412104221043210442104521046210472104821049210502105121052210532105421055210562105721058210592106021061210622106321064210652106621067210682106921070210712107221073210742107521076210772107821079210802108121082210832108421085210862108721088210892109021091210922109321094210952109621097210982109921100211012110221103211042110521106211072110821109211102111121112211132111421115211162111721118211192112021121211222112321124211252112621127211282112921130211312113221133211342113521136211372113821139211402114121142211432114421145211462114721148211492115021151211522115321154211552115621157211582115921160211612116221163211642116521166211672116821169211702117121172211732117421175211762117721178211792118021181211822118321184211852118621187211882118921190211912119221193211942119521196211972119821199212002120121202212032120421205212062120721208212092121021211212122121321214212152121621217212182121921220212212122221223212242122521226212272122821229212302123121232212332123421235212362123721238212392124021241212422124321244212452124621247212482124921250212512125221253212542125521256212572125821259212602126121262212632126421265212662126721268212692127021271212722127321274212752127621277212782127921280212812128221283212842128521286212872128821289212902129121292212932129421295212962129721298212992130021301213022130321304213052130621307213082130921310213112131221313213142131521316213172131821319213202132121322213232132421325213262132721328213292133021331213322133321334213352133621337213382133921340213412134221343213442134521346213472134821349213502135121352213532135421355213562135721358213592136021361213622136321364213652136621367213682136921370213712137221373213742137521376213772137821379213802138121382213832138421385213862138721388213892139021391213922139321394213952139621397213982139921400214012140221403214042140521406214072140821409214102141121412214132141421415214162141721418214192142021421214222142321424214252142621427214282142921430214312143221433214342143521436214372143821439214402144121442214432144421445214462144721448214492145021451214522145321454214552145621457214582145921460214612146221463214642146521466214672146821469214702147121472214732147421475214762147721478214792148021481214822148321484214852148621487214882148921490214912149221493214942149521496214972149821499215002150121502215032150421505215062150721508215092151021511215122151321514215152151621517215182151921520215212152221523215242152521526215272152821529215302153121532215332153421535215362153721538215392154021541215422154321544215452154621547215482154921550215512155221553215542155521556215572155821559215602156121562215632156421565215662156721568215692157021571215722157321574215752157621577215782157921580215812158221583215842158521586215872158821589215902159121592215932159421595215962159721598215992160021601216022160321604216052160621607216082160921610216112161221613216142161521616216172161821619216202162121622216232162421625216262162721628216292163021631216322163321634216352163621637216382163921640216412164221643216442164521646216472164821649216502165121652216532165421655216562165721658216592166021661216622166321664216652166621667216682166921670216712167221673216742167521676216772167821679216802168121682216832168421685216862168721688216892169021691216922169321694216952169621697216982169921700217012170221703217042170521706217072170821709217102171121712217132171421715217162171721718217192172021721217222172321724217252172621727217282172921730217312173221733217342173521736217372173821739217402174121742217432174421745217462174721748217492175021751217522175321754217552175621757217582175921760217612176221763217642176521766217672176821769217702177121772217732177421775217762177721778217792178021781217822178321784217852178621787217882178921790217912179221793217942179521796217972179821799218002180121802218032180421805
  1. /**
  2. * Framework7 5.7.14
  3. * Full featured mobile HTML framework for building iOS & Android apps
  4. * https://framework7.io/
  5. *
  6. * Copyright 2014-2020 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: November 9, 2020
  11. */
  12. /*====================
  13. Core
  14. ==================== */
  15. :root {
  16. --f7-theme-color: #007aff;
  17. --f7-theme-color-rgb: 0, 122, 255;
  18. --f7-theme-color-shade: #0066d6;
  19. --f7-theme-color-tint: #298fff;
  20. --f7-safe-area-left: 0px;
  21. --f7-safe-area-right: 0px;
  22. --f7-safe-area-top: 0px;
  23. --f7-safe-area-bottom: 0px;
  24. --f7-safe-area-outer-left: 0px;
  25. --f7-safe-area-outer-right: 0px;
  26. --f7-device-pixel-ratio: 1;
  27. }
  28. @supports (left: env(safe-area-inset-left)) {
  29. :root {
  30. --f7-safe-area-top: env(safe-area-inset-top);
  31. --f7-safe-area-bottom: env(safe-area-inset-bottom);
  32. }
  33. :root .ios-left-edge,
  34. :root .ios-edges,
  35. :root .safe-area-left,
  36. :root .safe-areas,
  37. :root .popup,
  38. :root .sheet-modal,
  39. :root .panel-left {
  40. --f7-safe-area-left: env(safe-area-inset-left);
  41. --f7-safe-area-outer-left: env(safe-area-inset-left);
  42. }
  43. :root .ios-right-edge,
  44. :root .ios-edges,
  45. :root .safe-area-right,
  46. :root .safe-areas,
  47. :root .popup,
  48. :root .sheet-modal,
  49. :root .panel-right {
  50. --f7-safe-area-right: env(safe-area-inset-right);
  51. --f7-safe-area-outer-right: env(safe-area-inset-right);
  52. }
  53. :root .no-safe-areas,
  54. :root .no-safe-area-left,
  55. :root .no-ios-edges,
  56. :root .no-ios-left-edge {
  57. --f7-safe-area-left: 0px;
  58. --f7-safe-area-outer-left: 0px;
  59. }
  60. :root .no-safe-areas,
  61. :root .no-safe-area-right,
  62. :root .no-ios-edges,
  63. :root .no-ios-right-edge {
  64. --f7-safe-area-right: 0px;
  65. --f7-safe-area-outer-right: 0px;
  66. }
  67. }
  68. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  69. :root {
  70. --f7-device-pixel-ratio: 2;
  71. }
  72. }
  73. @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  74. :root {
  75. --f7-device-pixel-ratio: 3;
  76. }
  77. }
  78. /*====================
  79. Fonts & Bars
  80. ==================== */
  81. :root {
  82. --f7-font-size: 14px;
  83. /*
  84. --f7-bars-link-color: var(--f7-theme-color);
  85. */
  86. --f7-bars-bg-image: none;
  87. --f7-bars-translucent-opacity: 0.8;
  88. --f7-bars-translucent-blur: 20px;
  89. --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  90. --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  91. --f7-bars-text-color: #000;
  92. --f7-bars-bg-color: #f7f7f8;
  93. --f7-bars-bg-color-rgb: 247, 247, 248;
  94. }
  95. :root .theme-dark,
  96. :root.theme-dark {
  97. --f7-bars-text-color: #fff;
  98. }
  99. .ios {
  100. --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  101. --f7-line-height: 1.4;
  102. --f7-text-color: #000;
  103. --f7-bars-border-color: rgba(0, 0, 0, 0.25);
  104. }
  105. .ios .theme-dark,
  106. .ios.theme-dark {
  107. --f7-text-color: #fff;
  108. --f7-bars-bg-color: #121212;
  109. --f7-bars-bg-color-rgb: 22, 22, 22;
  110. --f7-bars-border-color: rgba(255, 255, 255, 0.16);
  111. }
  112. .md {
  113. --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  114. --f7-line-height: 1.5;
  115. --f7-bars-border-color: transparent;
  116. --f7-text-color: #212121;
  117. }
  118. .md .theme-dark,
  119. .md.theme-dark {
  120. --f7-text-color: rgba(255, 255, 255, 0.87);
  121. --f7-bars-bg-color: #202020;
  122. }
  123. .aurora {
  124. --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  125. --f7-line-height: 1.5;
  126. --f7-text-color: #000;
  127. --f7-bars-border-color: rgba(0, 0, 0, 0.2);
  128. }
  129. .aurora .theme-dark,
  130. .aurora.theme-dark {
  131. --f7-text-color: #fff;
  132. --f7-bars-bg-color: #202020;
  133. --f7-bars-border-color: rgba(255, 255, 255, 0.1);
  134. }
  135. /*====================
  136. Color Themes
  137. ==================== */
  138. .text-color-primary {
  139. --f7-theme-color-text-color: var(--f7-theme-color);
  140. }
  141. .bg-color-primary {
  142. --f7-theme-color-bg-color: var(--f7-theme-color);
  143. }
  144. .border-color-primary {
  145. --f7-theme-color-border-color: var(--f7-theme-color);
  146. }
  147. .ripple-color-primary {
  148. --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
  149. }
  150. :root {
  151. --f7-color-red: #ff3b30;
  152. --f7-color-red-rgb: 255, 59, 48;
  153. --f7-color-red-shade: #ff1407;
  154. --f7-color-red-tint: #ff6259;
  155. --f7-color-green: #4cd964;
  156. --f7-color-green-rgb: 76, 217, 100;
  157. --f7-color-green-shade: #2cd048;
  158. --f7-color-green-tint: #6ee081;
  159. --f7-color-blue: #2196f3;
  160. --f7-color-blue-rgb: 33, 150, 243;
  161. --f7-color-blue-shade: #0c82df;
  162. --f7-color-blue-tint: #48a8f5;
  163. --f7-color-pink: #ff2d55;
  164. --f7-color-pink-rgb: 255, 45, 85;
  165. --f7-color-pink-shade: #ff0434;
  166. --f7-color-pink-tint: #ff5676;
  167. --f7-color-yellow: #ffcc00;
  168. --f7-color-yellow-rgb: 255, 204, 0;
  169. --f7-color-yellow-shade: #d6ab00;
  170. --f7-color-yellow-tint: #ffd429;
  171. --f7-color-orange: #ff9500;
  172. --f7-color-orange-rgb: 255, 149, 0;
  173. --f7-color-orange-shade: #d67d00;
  174. --f7-color-orange-tint: #ffa629;
  175. --f7-color-purple: #9c27b0;
  176. --f7-color-purple-rgb: 156, 39, 176;
  177. --f7-color-purple-shade: #7e208f;
  178. --f7-color-purple-tint: #b92fd1;
  179. --f7-color-deeppurple: #673ab7;
  180. --f7-color-deeppurple-rgb: 103, 58, 183;
  181. --f7-color-deeppurple-shade: #563098;
  182. --f7-color-deeppurple-tint: #7c52c8;
  183. --f7-color-lightblue: #5ac8fa;
  184. --f7-color-lightblue-rgb: 90, 200, 250;
  185. --f7-color-lightblue-shade: #32bbf9;
  186. --f7-color-lightblue-tint: #82d5fb;
  187. --f7-color-teal: #009688;
  188. --f7-color-teal-rgb: 0, 150, 136;
  189. --f7-color-teal-shade: #006d63;
  190. --f7-color-teal-tint: #00bfad;
  191. --f7-color-lime: #cddc39;
  192. --f7-color-lime-rgb: 205, 220, 57;
  193. --f7-color-lime-shade: #bac923;
  194. --f7-color-lime-tint: #d6e25c;
  195. --f7-color-deeporange: #ff6b22;
  196. --f7-color-deeporange-rgb: 255, 107, 34;
  197. --f7-color-deeporange-shade: #f85200;
  198. --f7-color-deeporange-tint: #ff864b;
  199. --f7-color-gray: #8e8e93;
  200. --f7-color-gray-rgb: 142, 142, 147;
  201. --f7-color-gray-shade: #79797f;
  202. --f7-color-gray-tint: #a3a3a7;
  203. --f7-color-white: #ffffff;
  204. --f7-color-white-rgb: 255, 255, 255;
  205. --f7-color-white-shade: #ebebeb;
  206. --f7-color-white-tint: #ffffff;
  207. --f7-color-black: #000000;
  208. --f7-color-black-rgb: 0, 0, 0;
  209. --f7-color-black-shade: #000000;
  210. --f7-color-black-tint: #141414;
  211. }
  212. .color-theme-red {
  213. --f7-theme-color: #ff3b30;
  214. --f7-theme-color-rgb: 255, 59, 48;
  215. --f7-theme-color-shade: #ff1407;
  216. --f7-theme-color-tint: #ff6259;
  217. }
  218. .color-theme-green {
  219. --f7-theme-color: #4cd964;
  220. --f7-theme-color-rgb: 76, 217, 100;
  221. --f7-theme-color-shade: #2cd048;
  222. --f7-theme-color-tint: #6ee081;
  223. }
  224. .color-theme-blue {
  225. --f7-theme-color: #2196f3;
  226. --f7-theme-color-rgb: 33, 150, 243;
  227. --f7-theme-color-shade: #0c82df;
  228. --f7-theme-color-tint: #48a8f5;
  229. }
  230. .color-theme-pink {
  231. --f7-theme-color: #ff2d55;
  232. --f7-theme-color-rgb: 255, 45, 85;
  233. --f7-theme-color-shade: #ff0434;
  234. --f7-theme-color-tint: #ff5676;
  235. }
  236. .color-theme-yellow {
  237. --f7-theme-color: #ffcc00;
  238. --f7-theme-color-rgb: 255, 204, 0;
  239. --f7-theme-color-shade: #d6ab00;
  240. --f7-theme-color-tint: #ffd429;
  241. }
  242. .color-theme-orange {
  243. --f7-theme-color: #ff9500;
  244. --f7-theme-color-rgb: 255, 149, 0;
  245. --f7-theme-color-shade: #d67d00;
  246. --f7-theme-color-tint: #ffa629;
  247. }
  248. .color-theme-purple {
  249. --f7-theme-color: #9c27b0;
  250. --f7-theme-color-rgb: 156, 39, 176;
  251. --f7-theme-color-shade: #7e208f;
  252. --f7-theme-color-tint: #b92fd1;
  253. }
  254. .color-theme-deeppurple {
  255. --f7-theme-color: #673ab7;
  256. --f7-theme-color-rgb: 103, 58, 183;
  257. --f7-theme-color-shade: #563098;
  258. --f7-theme-color-tint: #7c52c8;
  259. }
  260. .color-theme-lightblue {
  261. --f7-theme-color: #5ac8fa;
  262. --f7-theme-color-rgb: 90, 200, 250;
  263. --f7-theme-color-shade: #32bbf9;
  264. --f7-theme-color-tint: #82d5fb;
  265. }
  266. .color-theme-teal {
  267. --f7-theme-color: #009688;
  268. --f7-theme-color-rgb: 0, 150, 136;
  269. --f7-theme-color-shade: #006d63;
  270. --f7-theme-color-tint: #00bfad;
  271. }
  272. .color-theme-lime {
  273. --f7-theme-color: #cddc39;
  274. --f7-theme-color-rgb: 205, 220, 57;
  275. --f7-theme-color-shade: #bac923;
  276. --f7-theme-color-tint: #d6e25c;
  277. }
  278. .color-theme-deeporange {
  279. --f7-theme-color: #ff6b22;
  280. --f7-theme-color-rgb: 255, 107, 34;
  281. --f7-theme-color-shade: #f85200;
  282. --f7-theme-color-tint: #ff864b;
  283. }
  284. .color-theme-gray {
  285. --f7-theme-color: #8e8e93;
  286. --f7-theme-color-rgb: 142, 142, 147;
  287. --f7-theme-color-shade: #79797f;
  288. --f7-theme-color-tint: #a3a3a7;
  289. }
  290. .color-theme-white {
  291. --f7-theme-color: #ffffff;
  292. --f7-theme-color-rgb: 255, 255, 255;
  293. --f7-theme-color-shade: #ebebeb;
  294. --f7-theme-color-tint: #ffffff;
  295. }
  296. .color-theme-black {
  297. --f7-theme-color: #000000;
  298. --f7-theme-color-rgb: 0, 0, 0;
  299. --f7-theme-color-shade: #000000;
  300. --f7-theme-color-tint: #141414;
  301. }
  302. .color-red {
  303. --f7-theme-color: #ff3b30;
  304. --f7-theme-color-rgb: 255, 59, 48;
  305. --f7-theme-color-shade: #ff1407;
  306. --f7-theme-color-tint: #ff6259;
  307. }
  308. .text-color-red {
  309. --f7-theme-color-text-color: #ff3b30;
  310. }
  311. .bg-color-red {
  312. --f7-theme-color-bg-color: #ff3b30;
  313. }
  314. .border-color-red {
  315. --f7-theme-color-border-color: #ff3b30;
  316. }
  317. .ripple-color-red,
  318. .ripple-red {
  319. --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
  320. }
  321. .color-green {
  322. --f7-theme-color: #4cd964;
  323. --f7-theme-color-rgb: 76, 217, 100;
  324. --f7-theme-color-shade: #2cd048;
  325. --f7-theme-color-tint: #6ee081;
  326. }
  327. .text-color-green {
  328. --f7-theme-color-text-color: #4cd964;
  329. }
  330. .bg-color-green {
  331. --f7-theme-color-bg-color: #4cd964;
  332. }
  333. .border-color-green {
  334. --f7-theme-color-border-color: #4cd964;
  335. }
  336. .ripple-color-green,
  337. .ripple-green {
  338. --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
  339. }
  340. .color-blue {
  341. --f7-theme-color: #2196f3;
  342. --f7-theme-color-rgb: 33, 150, 243;
  343. --f7-theme-color-shade: #0c82df;
  344. --f7-theme-color-tint: #48a8f5;
  345. }
  346. .text-color-blue {
  347. --f7-theme-color-text-color: #2196f3;
  348. }
  349. .bg-color-blue {
  350. --f7-theme-color-bg-color: #2196f3;
  351. }
  352. .border-color-blue {
  353. --f7-theme-color-border-color: #2196f3;
  354. }
  355. .ripple-color-blue,
  356. .ripple-blue {
  357. --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
  358. }
  359. .color-pink {
  360. --f7-theme-color: #ff2d55;
  361. --f7-theme-color-rgb: 255, 45, 85;
  362. --f7-theme-color-shade: #ff0434;
  363. --f7-theme-color-tint: #ff5676;
  364. }
  365. .text-color-pink {
  366. --f7-theme-color-text-color: #ff2d55;
  367. }
  368. .bg-color-pink {
  369. --f7-theme-color-bg-color: #ff2d55;
  370. }
  371. .border-color-pink {
  372. --f7-theme-color-border-color: #ff2d55;
  373. }
  374. .ripple-color-pink,
  375. .ripple-pink {
  376. --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
  377. }
  378. .color-yellow {
  379. --f7-theme-color: #ffcc00;
  380. --f7-theme-color-rgb: 255, 204, 0;
  381. --f7-theme-color-shade: #d6ab00;
  382. --f7-theme-color-tint: #ffd429;
  383. }
  384. .text-color-yellow {
  385. --f7-theme-color-text-color: #ffcc00;
  386. }
  387. .bg-color-yellow {
  388. --f7-theme-color-bg-color: #ffcc00;
  389. }
  390. .border-color-yellow {
  391. --f7-theme-color-border-color: #ffcc00;
  392. }
  393. .ripple-color-yellow,
  394. .ripple-yellow {
  395. --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
  396. }
  397. .color-orange {
  398. --f7-theme-color: #ff9500;
  399. --f7-theme-color-rgb: 255, 149, 0;
  400. --f7-theme-color-shade: #d67d00;
  401. --f7-theme-color-tint: #ffa629;
  402. }
  403. .text-color-orange {
  404. --f7-theme-color-text-color: #ff9500;
  405. }
  406. .bg-color-orange {
  407. --f7-theme-color-bg-color: #ff9500;
  408. }
  409. .border-color-orange {
  410. --f7-theme-color-border-color: #ff9500;
  411. }
  412. .ripple-color-orange,
  413. .ripple-orange {
  414. --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
  415. }
  416. .color-purple {
  417. --f7-theme-color: #9c27b0;
  418. --f7-theme-color-rgb: 156, 39, 176;
  419. --f7-theme-color-shade: #7e208f;
  420. --f7-theme-color-tint: #b92fd1;
  421. }
  422. .text-color-purple {
  423. --f7-theme-color-text-color: #9c27b0;
  424. }
  425. .bg-color-purple {
  426. --f7-theme-color-bg-color: #9c27b0;
  427. }
  428. .border-color-purple {
  429. --f7-theme-color-border-color: #9c27b0;
  430. }
  431. .ripple-color-purple,
  432. .ripple-purple {
  433. --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
  434. }
  435. .color-deeppurple {
  436. --f7-theme-color: #673ab7;
  437. --f7-theme-color-rgb: 103, 58, 183;
  438. --f7-theme-color-shade: #563098;
  439. --f7-theme-color-tint: #7c52c8;
  440. }
  441. .text-color-deeppurple {
  442. --f7-theme-color-text-color: #673ab7;
  443. }
  444. .bg-color-deeppurple {
  445. --f7-theme-color-bg-color: #673ab7;
  446. }
  447. .border-color-deeppurple {
  448. --f7-theme-color-border-color: #673ab7;
  449. }
  450. .ripple-color-deeppurple,
  451. .ripple-deeppurple {
  452. --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
  453. }
  454. .color-lightblue {
  455. --f7-theme-color: #5ac8fa;
  456. --f7-theme-color-rgb: 90, 200, 250;
  457. --f7-theme-color-shade: #32bbf9;
  458. --f7-theme-color-tint: #82d5fb;
  459. }
  460. .text-color-lightblue {
  461. --f7-theme-color-text-color: #5ac8fa;
  462. }
  463. .bg-color-lightblue {
  464. --f7-theme-color-bg-color: #5ac8fa;
  465. }
  466. .border-color-lightblue {
  467. --f7-theme-color-border-color: #5ac8fa;
  468. }
  469. .ripple-color-lightblue,
  470. .ripple-lightblue {
  471. --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
  472. }
  473. .color-teal {
  474. --f7-theme-color: #009688;
  475. --f7-theme-color-rgb: 0, 150, 136;
  476. --f7-theme-color-shade: #006d63;
  477. --f7-theme-color-tint: #00bfad;
  478. }
  479. .text-color-teal {
  480. --f7-theme-color-text-color: #009688;
  481. }
  482. .bg-color-teal {
  483. --f7-theme-color-bg-color: #009688;
  484. }
  485. .border-color-teal {
  486. --f7-theme-color-border-color: #009688;
  487. }
  488. .ripple-color-teal,
  489. .ripple-teal {
  490. --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
  491. }
  492. .color-lime {
  493. --f7-theme-color: #cddc39;
  494. --f7-theme-color-rgb: 205, 220, 57;
  495. --f7-theme-color-shade: #bac923;
  496. --f7-theme-color-tint: #d6e25c;
  497. }
  498. .text-color-lime {
  499. --f7-theme-color-text-color: #cddc39;
  500. }
  501. .bg-color-lime {
  502. --f7-theme-color-bg-color: #cddc39;
  503. }
  504. .border-color-lime {
  505. --f7-theme-color-border-color: #cddc39;
  506. }
  507. .ripple-color-lime,
  508. .ripple-lime {
  509. --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
  510. }
  511. .color-deeporange {
  512. --f7-theme-color: #ff6b22;
  513. --f7-theme-color-rgb: 255, 107, 34;
  514. --f7-theme-color-shade: #f85200;
  515. --f7-theme-color-tint: #ff864b;
  516. }
  517. .text-color-deeporange {
  518. --f7-theme-color-text-color: #ff6b22;
  519. }
  520. .bg-color-deeporange {
  521. --f7-theme-color-bg-color: #ff6b22;
  522. }
  523. .border-color-deeporange {
  524. --f7-theme-color-border-color: #ff6b22;
  525. }
  526. .ripple-color-deeporange,
  527. .ripple-deeporange {
  528. --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
  529. }
  530. .color-gray {
  531. --f7-theme-color: #8e8e93;
  532. --f7-theme-color-rgb: 142, 142, 147;
  533. --f7-theme-color-shade: #79797f;
  534. --f7-theme-color-tint: #a3a3a7;
  535. }
  536. .text-color-gray {
  537. --f7-theme-color-text-color: #8e8e93;
  538. }
  539. .bg-color-gray {
  540. --f7-theme-color-bg-color: #8e8e93;
  541. }
  542. .border-color-gray {
  543. --f7-theme-color-border-color: #8e8e93;
  544. }
  545. .ripple-color-gray,
  546. .ripple-gray {
  547. --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
  548. }
  549. .color-white {
  550. --f7-theme-color: #ffffff;
  551. --f7-theme-color-rgb: 255, 255, 255;
  552. --f7-theme-color-shade: #ebebeb;
  553. --f7-theme-color-tint: #ffffff;
  554. }
  555. .text-color-white {
  556. --f7-theme-color-text-color: #ffffff;
  557. }
  558. .bg-color-white {
  559. --f7-theme-color-bg-color: #ffffff;
  560. }
  561. .border-color-white {
  562. --f7-theme-color-border-color: #ffffff;
  563. }
  564. .ripple-color-white,
  565. .ripple-white {
  566. --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
  567. }
  568. .color-black {
  569. --f7-theme-color: #000000;
  570. --f7-theme-color-rgb: 0, 0, 0;
  571. --f7-theme-color-shade: #000000;
  572. --f7-theme-color-tint: #141414;
  573. }
  574. .text-color-black {
  575. --f7-theme-color-text-color: #000000;
  576. }
  577. .bg-color-black {
  578. --f7-theme-color-bg-color: #000000;
  579. }
  580. .border-color-black {
  581. --f7-theme-color-border-color: #000000;
  582. }
  583. .ripple-color-black,
  584. .ripple-black {
  585. --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
  586. }
  587. @font-face {
  588. font-family: 'framework7-core-icons';
  589. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAA0sABAAAAAAGRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAANEAAAABoAAAAci1jrz0dERUYAAAsIAAAAIwAAACQAfQBXR1BPUwAADOAAAAAuAAAANuAY7+xHU1VCAAALLAAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAowAAACIAAABYt6F0cBjdnQgAAADFAAAAAQAAAAEABEBRGdhc3AAAAsAAAAACAAAAAj//wADZ2x5ZgAAA6wAAASlAAAKBIq7ZiloZWFkAAABbAAAADAAAAA2FnYC32hoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABhAAABJC+cAAFsb2NhAAADGAAAAJQAAACURlRI+G1heHAAAAG8AAAAHwAAACAAjwBMbmFtZQAACFQAAAFTAAAC2WC6Sihwb3N0AAAJqAAAAVYAAAJ2B5LxL3jaY2BkYGAA4iKuLVLx/DZfGbiZGEDgZk2iIYz+/+NfL0sa02cgl4MBLA0AJsoLsnjaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGZgYQABJiBmZACJOTDogQQADdEA3AB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMb/7/Z9gNZBtDzGY6CzGHCcQHigMA2dAWtwAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DHgMwA0IDYANyA5YDtAPEA+oD/AQWBEYEZgR4BIoEsgTIBOIFAnja7VXBTyNVGP++Ke106XamnbYztYeVlukMRmWl03ZwLdAIeCCKZgOKXBY2m15Es8S03lpuSzaSGsOGQPZGoomegI0mmwjVC5uNdZPGgzGc8MDG4ImLmyxTvzfTKmX/A7PJe/O995vXN7/3+37fK3AQBIB1nAYX8NC/hXA5t813wV+pLY/7ILft4mgIWy4Guxm8zXvwaW4bGW4EjaBuBHuDy58VCjhtfRtEg3ZDajW70yg4wMbPsefY/x7jzmAuQl/nbBi6qF/A93CWKkyECCgAUsITllPZtJaSw56ElnabuoiKqX8zlctN5e4uTEwsTOCo/6YgLAqLmM9NDQ1NvT/B4CfCTT8DHQ7NH9Ggj0gAyYTIsZ1GUNfS2dSLKKOOiH/4emTf3p5PjvsOxW2OO/TJPb7dPYYeig7n5hHW8Cu6B16gXRRez+ie3gTbQ46EeSXBWBJbzC9pS3z/yPj8/O3rffx3c2Njc6MrS1olwvfN356fHx/u50fnRkfnbF6gwS6d1w0Q4mlLc7dUUjc2MGsHaHE/wQ1cAS99NRJnixQeN6wHVbVeV6u/p53YWgt+/AlvsP1MVFA3qyiqVr2qTrciYPMJafEyaUH3mZkdQaIfJkmZvJdRcyOdnM68u8vOfyg+Qtch04TmjhLsG2HYdzibREY39zfVSkX9np7lZOf7DFFV+NbrZLmi2jpaK10F7gR8LL9JnRYoJmXU1LkelQtIak+XFOC4/H52v93esH6xTtfW0IUpdK2t/blvtl+ZTw/+ha1TtuxZzZhgdP+auMF0Mr6osYCDJGBbszy+g3nw0EThB2g1vqQeLKqEUeh921mzgG+iBgEaMblsrWz3mFlMC/wyL1MXZG+x6EVNYBOGCXyxyNtnhlms0+/ZfwcMYTzizsQjWLcMrJ8Yxrph2JxrGKW8kG5JZLpitAnRx4+jNScQj+bf8CH8iq+CAECZU2QRBSQmZlaZmOsOBLo/doc8V/yCePHzL8Vun/i1F/m8eNEvOGe4hm8RB+Y1chGvb9qJQc0O4HgcZByj3Pmp+oCSd8bhnpa/j2dCM+pr5uTkJ5NbM8PDM8NLH4RmLtFs0hy4MsKQTr2Yw6jIbHvxrPA6xJKFtbZUpRJhnTxJBPKGw/Paplouq3YdrnAFPCElQwDpAJELeBJI52k76Z51754FzVih0G55hJ2dJuzg+hkQOjXPIPMqQvToKFrDluLtmirgp+RXQN4WzqaFhWpVbTd898yE8tS09rhjrgYxAHfQ1i9oDrMi49GjJ3TsJ9+kFBxU08mfpXRIkqyHkVgsZD2UMCRlpI+441gyGTsN19k8zd5yIcxKBq1scboE9/E60zfrePG/Qr7fab/+gHfZG6YekB03Or8fp/tQsz1vW95E49EN6eoPGLbD+buJ3To63UhqsYizFEqlll+as1yd0+AC8wvlwmDJ6E2EzlR1Y/VOo3FndbWcLVOrsOcr2NdoWL818G7FLJfNiv08X7f2N+OZuF5n9Wo9wMEqrrBh2q5bF+PHGcSP1RTlJphxqop1zjitO52USS/Z7bxuAceWrJadPwMy5C2ev+V1rIhXn9HtH4d0614AAAB42q2QvU7DMBSFj9u0EgyIgewe26qJnA79G6nUpQtiyB5S01ht4sqNVFW8DBsbIxtPwcLEzltw7RqJoQNDI135y/G59rkGcIVXMBy/Du49M4R48dzAJT48N5GwW88BQvbsuYVr9um5jbARkpMFF/R357osM/Tw5LmBG7x7buIBX54D9FjtuQXO3jy3Sf/GDBpbHGCgsEKBGpwy5+jSOoBAggn6xCk2yLAkV0llSFmQOyOyeklnKLeLmd4ejFoVNe/kXT4QyaTP0022VKUyfFFkZpOVW7Uk5yM121aJPYUwWGOEiK62LImU4wo7spqslHtt1qMo10ZGKtcVySe9fw1zJ9ZuNTSfdFPFNBfHlOr/EY7+BENSx1S/b4O5ruq5NivJB7HgU34yKunJMBpH9jnOMXhKPkP7yvk4ZbFpYrfa2ZBKs1O64kIksRCCn+HSH1E3hiEAeNptkAlPwkAUhGfAAxAsyCV4/hbjfd+3aWq7SiN0yXY5/rzRhVKhiZs06b5v3rzZhxTG5+cbxH/nyHxECmkUUUYFVdRQxyoaaGIN69jBLvawjwMcGu0xTnCKM5zjApe4wjVucIs73OMBj3jCM17wijemmOYc57nARWaYZY5LzLPAZVosssQVlllhlTXWucoGm1zjOje4yS1u50LhKLdl+zIsuS3RVzKwlf/Z0qNKdgI7nhWztvjQ5l5wlJKD+LZkqPv1Lofmv5hQGpNCwjY/i2uB1P6H7zraNxW3LUMx6rAi83eptewYy6xyPF+OSDnu9uQgsJ2ekspZDKUahwgHflcoOxBDbf0FijS5uK/XLUzeFIHSFEwq+dkRlifaQgtbyV7gzczoKtHPTphZRlcrO8o8m3G8gKlplMcIisk9m5UlphjFcmQW88z4haZeSXZG3r8TK74rAAAAAAAB//8AAnjaY2BkYGDgAWIZIGYCQmYGTQZGBi0GDyCbBSzGAAANdgDVAHjadVJJTgJBFH1FdwKOIKB0lEEGwSDOs+KsaDyDGzYaE+LCEA/gwjMY4zlcegbjEYwLb4HvVwM9hXS6q/q9V/+/+v9DARhGFjWoVrP9gAhMIuh0IIxq3d81icH+I2fqNQJl/CKMJJ5C7dC3YRolow6D+Dwa2EAUeT5ZlLmb4Frkk0Waf2kkqBh38XlYmEKKCptdwpiLnWGOyT4XxSyu8Yg3fOJHmaqsGupWPat39aG+1B+uqE7xndPnM77oMZQ0nufulNG8SieTW7cV0CW0s4xPV+c9vboScj7NQkDjdmcRK2CFukG+bMV5QOGv4CLXQTGE3+3ycUzr7lR8PlfZgUEZzjAaOGv7WusywawHAaZXw2WMBKKJwz3OZLCaMl9V9v+CHpM6epFvVGtKVCX6Xg65G6SQ+McY8vCCyXSv85YyrRZ9W3QV03vbQZx6iZ3sZ5ETJ6xVkfGlgs7UOvwmM8UYXZAeHiZSYx9vOMkveMU+YyT1+Thv7e3FEStU5rkcFZIlx6/UZceHZ7hW6KTKyrlj2Rlr+r4OKve9ZDUlhzNZ23TWQ+yKiNM4dxmdt/APtJZExAB42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPpmTaIhjAYAPREFnQAA") format("woff");
  590. font-weight: 400;
  591. font-style: normal;
  592. }
  593. @font-face {
  594. font-family: 'framework7-skeleton';
  595. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
  596. font-weight: 300, 400, 500, 600, 700;
  597. font-style: normal, italic;
  598. }
  599. html,
  600. body,
  601. .framework7-root {
  602. position: relative;
  603. height: 100%;
  604. width: 100%;
  605. overflow-x: hidden;
  606. }
  607. body {
  608. margin: 0;
  609. padding: 0;
  610. width: 100%;
  611. background: #fff;
  612. overflow: hidden;
  613. -webkit-text-size-adjust: 100%;
  614. -webkit-font-smoothing: antialiased;
  615. font-family: var(--f7-font-family);
  616. font-size: var(--f7-font-size);
  617. line-height: var(--f7-line-height);
  618. color: var(--f7-text-color);
  619. }
  620. .theme-dark body,
  621. body.theme-dark {
  622. background: #000;
  623. }
  624. .theme-dark {
  625. color: var(--f7-text-color);
  626. }
  627. .framework7-root {
  628. overflow: hidden;
  629. box-sizing: border-box;
  630. }
  631. .framework7-initializing *,
  632. .framework7-initializing *:before,
  633. .framework7-initializing *:after {
  634. transition-duration: 0ms !important;
  635. }
  636. .device-ios,
  637. .device-android {
  638. cursor: pointer;
  639. }
  640. .device-ios {
  641. touch-action: manipulation;
  642. }
  643. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  644. html,
  645. body,
  646. .framework7-root {
  647. height: 671px;
  648. }
  649. }
  650. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  651. html,
  652. body,
  653. .framework7-root {
  654. height: 672px;
  655. }
  656. }
  657. * {
  658. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  659. -webkit-touch-callout: none;
  660. }
  661. a,
  662. input,
  663. textarea,
  664. select {
  665. outline: 0;
  666. }
  667. a {
  668. cursor: pointer;
  669. text-decoration: none;
  670. color: var(--f7-theme-color);
  671. }
  672. .link,
  673. .item-link {
  674. cursor: pointer;
  675. }
  676. p {
  677. margin: 1em 0;
  678. }
  679. .disabled {
  680. opacity: 0.55 !important;
  681. pointer-events: none !important;
  682. }
  683. html.device-full-viewport,
  684. html.device-full-viewport body {
  685. height: 100vh;
  686. }
  687. .ios .md-only,
  688. .ios .if-md,
  689. .ios .aurora-only,
  690. .ios .if-aurora,
  691. .ios .if-not-ios,
  692. .ios .not-ios {
  693. display: none !important;
  694. }
  695. @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  696. .ios,
  697. .ios body,
  698. .ios .framework7-root {
  699. height: 671px;
  700. }
  701. }
  702. @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  703. .ios,
  704. .ios body,
  705. .ios .framework7-root {
  706. height: 672px;
  707. }
  708. }
  709. .md .ios-only,
  710. .md .if-ios,
  711. .md .aurora-only,
  712. .md .if-aurora,
  713. .md .if-not-md,
  714. .md .not-md {
  715. display: none !important;
  716. }
  717. .aurora .ios-only,
  718. .aurora .if-ios,
  719. .aurora .md-only,
  720. .aurora .if-md,
  721. .aurora .if-not-aurora,
  722. .aurora .not-aurora {
  723. display: none !important;
  724. }
  725. /* === Statusbar === */
  726. /* === Views === */
  727. .views,
  728. .view {
  729. position: relative;
  730. height: 100%;
  731. z-index: 5000;
  732. overflow: hidden;
  733. box-sizing: border-box;
  734. }
  735. .framework7-root > .view,
  736. .framework7-root > .views {
  737. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  738. }
  739. .view-resize-handler {
  740. width: 6px;
  741. height: 100%;
  742. position: absolute;
  743. left: var(--f7-page-master-width);
  744. margin-left: -3px;
  745. top: 0;
  746. cursor: col-resize;
  747. z-index: 1000;
  748. display: none;
  749. }
  750. .view-master-detail .view-resize-handler {
  751. display: block;
  752. }
  753. /* === Pages === */
  754. :root {
  755. --f7-page-master-width: 320px;
  756. --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  757. --f7-page-master-border-width: 1px;
  758. --f7-page-swipeback-transition-duration: 300ms;
  759. --f7-page-parallax-transition-duration: 500ms;
  760. --f7-page-cover-transition-duration: 450ms;
  761. --f7-page-dive-transition-duration: 500ms;
  762. --f7-page-fade-transition-duration: 500ms;
  763. --f7-page-flip-transition-duration: 700ms;
  764. --f7-page-push-transition-duration: 500ms;
  765. /*
  766. --f7-page-content-extra-padding-top: 0px;
  767. --f7-page-content-extra-padding-bottom: 0px;
  768. */
  769. }
  770. .ios {
  771. --f7-page-transition-duration: 400ms;
  772. --f7-page-bg-color: #efeff4;
  773. }
  774. .ios .theme-dark,
  775. .ios.theme-dark {
  776. --f7-page-bg-color: #000;
  777. }
  778. .md {
  779. --f7-page-transition-duration: 250ms;
  780. --f7-page-bg-color: #fff;
  781. }
  782. .md .theme-dark,
  783. .md.theme-dark {
  784. --f7-page-bg-color: #121212;
  785. }
  786. .aurora {
  787. --f7-page-transition-duration: 400ms;
  788. --f7-page-bg-color: #f3f3f3;
  789. }
  790. .aurora .theme-dark,
  791. .aurora.theme-dark {
  792. --f7-page-bg-color: #121212;
  793. }
  794. .theme-dark {
  795. --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
  796. }
  797. .pages {
  798. position: relative;
  799. width: 100%;
  800. height: 100%;
  801. overflow: hidden;
  802. }
  803. .page {
  804. box-sizing: border-box;
  805. position: absolute;
  806. left: 0;
  807. top: 0;
  808. width: 100%;
  809. height: 100%;
  810. transform: none;
  811. background-color: var(--f7-page-bg-color);
  812. z-index: 1;
  813. }
  814. .page.stacked {
  815. display: none;
  816. }
  817. .page-with-navbar-large-collapsed {
  818. --f7-navbar-large-collapse-progress: 1;
  819. }
  820. .page-previous {
  821. pointer-events: none;
  822. }
  823. .page-content {
  824. overflow: auto;
  825. -webkit-overflow-scrolling: touch;
  826. box-sizing: border-box;
  827. height: 100%;
  828. position: relative;
  829. z-index: 1;
  830. padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
  831. padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
  832. }
  833. .page-transitioning,
  834. .page-transitioning .page-shadow-effect,
  835. .page-transitioning .page-opacity-effect {
  836. transition-duration: var(--f7-page-transition-duration);
  837. }
  838. .page-transitioning-swipeback,
  839. .page-transitioning-swipeback .page-shadow-effect,
  840. .page-transitioning-swipeback .page-opacity-effect {
  841. transition-duration: var(--f7-page-swipeback-transition-duration);
  842. }
  843. .router-transition-forward .page-next,
  844. .router-transition-backward .page-next,
  845. .router-transition-forward .page-current,
  846. .router-transition-backward .page-current,
  847. .router-transition-forward .page-previous:not(.stacked),
  848. .router-transition-backward .page-previous:not(.stacked) {
  849. pointer-events: none;
  850. }
  851. .page-shadow-effect {
  852. position: absolute;
  853. top: 0;
  854. width: 16px;
  855. bottom: 0;
  856. z-index: -1;
  857. content: '';
  858. opacity: 0;
  859. right: 100%;
  860. background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  861. }
  862. .page-opacity-effect {
  863. position: absolute;
  864. left: 0;
  865. top: 0;
  866. background: rgba(0, 0, 0, 0.1);
  867. width: 100%;
  868. bottom: 0;
  869. content: '';
  870. opacity: 0;
  871. z-index: 10000;
  872. }
  873. .ios .page-previous {
  874. transform: translate3d(-20%, 0, 0);
  875. }
  876. .ios .page-next {
  877. transform: translate3d(100%, 0, 0);
  878. }
  879. .ios .page-previous .page-opacity-effect {
  880. opacity: 1;
  881. }
  882. .ios .page-previous:after {
  883. opacity: 1;
  884. }
  885. .ios .page-current .page-shadow-effect {
  886. opacity: 1;
  887. }
  888. .ios .router-transition-forward .page-next {
  889. animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
  890. }
  891. .ios .router-transition-forward .page-next:before {
  892. position: absolute;
  893. top: 0;
  894. width: 16px;
  895. bottom: 0;
  896. z-index: -1;
  897. content: '';
  898. opacity: 0;
  899. right: 100%;
  900. background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  901. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  902. }
  903. .ios .router-transition-forward .page-current {
  904. animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
  905. }
  906. .ios .router-transition-forward .page-current:after {
  907. position: absolute;
  908. left: 0;
  909. top: 0;
  910. background: rgba(0, 0, 0, 0.1);
  911. width: 100%;
  912. bottom: 0;
  913. content: '';
  914. opacity: 0;
  915. z-index: 10000;
  916. animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
  917. }
  918. .ios .router-transition-backward .page-previous {
  919. animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
  920. }
  921. .ios .router-transition-backward .page-previous:after {
  922. position: absolute;
  923. left: 0;
  924. top: 0;
  925. background: rgba(0, 0, 0, 0.1);
  926. width: 100%;
  927. bottom: 0;
  928. content: '';
  929. opacity: 0;
  930. z-index: 10000;
  931. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  932. }
  933. .ios .router-transition-backward .page-current {
  934. animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
  935. }
  936. .ios .router-transition-backward .page-current:before {
  937. position: absolute;
  938. top: 0;
  939. width: 16px;
  940. bottom: 0;
  941. z-index: -1;
  942. content: '';
  943. opacity: 0;
  944. right: 100%;
  945. background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  946. animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
  947. }
  948. @keyframes ios-page-next-to-current {
  949. from {
  950. transform: translate3d(100%, 0, 0);
  951. }
  952. to {
  953. transform: translate3d(0%, 0, 0);
  954. }
  955. }
  956. @keyframes ios-page-previous-to-current {
  957. from {
  958. transform: translate3d(-20%, 0, 0);
  959. }
  960. to {
  961. transform: translate3d(0%, 0, 0);
  962. }
  963. }
  964. @keyframes ios-page-current-to-previous {
  965. from {
  966. transform: translate3d(0, 0, 0);
  967. }
  968. to {
  969. transform: translate3d(-20%, 0, 0);
  970. }
  971. }
  972. @keyframes ios-page-current-to-next {
  973. from {
  974. transform: translate3d(0, 0, 0);
  975. }
  976. to {
  977. transform: translate3d(100%, 0, 0);
  978. }
  979. }
  980. @keyframes ios-page-element-fade-in {
  981. from {
  982. opacity: 0;
  983. }
  984. to {
  985. opacity: 1;
  986. }
  987. }
  988. @keyframes ios-page-element-fade-out {
  989. from {
  990. opacity: 1;
  991. }
  992. to {
  993. opacity: 0;
  994. }
  995. }
  996. .md .page-next {
  997. transform: translate3d(0, 56px, 0);
  998. opacity: 0;
  999. pointer-events: none;
  1000. }
  1001. .md .page-next.page-next-on-right {
  1002. transform: translate3d(100%, 0, 0);
  1003. }
  1004. .md .router-transition-forward .page-next {
  1005. animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
  1006. }
  1007. .md .router-transition-forward .page-current {
  1008. animation: none;
  1009. }
  1010. .md .router-transition-backward .page-current {
  1011. animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
  1012. }
  1013. .md .router-transition-backward .page-previous {
  1014. animation: none;
  1015. }
  1016. @keyframes md-page-next-to-current {
  1017. from {
  1018. transform: translate3d(0, 56px, 0);
  1019. opacity: 0;
  1020. }
  1021. to {
  1022. transform: translate3d(0, 0px, 0);
  1023. opacity: 1;
  1024. }
  1025. }
  1026. @keyframes md-page-current-to-next {
  1027. from {
  1028. transform: translate3d(0, 0, 0);
  1029. opacity: 1;
  1030. }
  1031. to {
  1032. transform: translate3d(0, 56px, 0);
  1033. opacity: 0;
  1034. }
  1035. }
  1036. .aurora .page-next {
  1037. pointer-events: none;
  1038. transform: translate3d(100%, 0px, 0);
  1039. }
  1040. .aurora .page-next.page-next-on-right {
  1041. transform: translate3d(100%, 0, 0);
  1042. }
  1043. .aurora .page-previous .page-opacity-effect {
  1044. opacity: 1;
  1045. }
  1046. .aurora .page-previous:after {
  1047. opacity: 1;
  1048. }
  1049. .aurora .router-transition-forward .page-next {
  1050. animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
  1051. }
  1052. .aurora .router-transition-forward .page-current {
  1053. animation: none;
  1054. }
  1055. .aurora .router-transition-forward .page-current:after {
  1056. position: absolute;
  1057. left: 0;
  1058. top: 0;
  1059. background: rgba(0, 0, 0, 0.1);
  1060. width: 100%;
  1061. bottom: 0;
  1062. content: '';
  1063. opacity: 0;
  1064. z-index: 10000;
  1065. animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
  1066. }
  1067. .aurora .router-transition-backward .page-current {
  1068. animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
  1069. }
  1070. .aurora .router-transition-backward .page-previous {
  1071. animation: none;
  1072. }
  1073. .aurora .router-transition-backward .page-previous:after {
  1074. position: absolute;
  1075. left: 0;
  1076. top: 0;
  1077. background: rgba(0, 0, 0, 0.1);
  1078. width: 100%;
  1079. bottom: 0;
  1080. content: '';
  1081. opacity: 0;
  1082. z-index: 10000;
  1083. animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
  1084. }
  1085. @keyframes aurora-page-next-to-current {
  1086. from {
  1087. transform: translate3d(100%, 0, 0);
  1088. }
  1089. to {
  1090. transform: translate3d(0, 0px, 0);
  1091. }
  1092. }
  1093. @keyframes aurora-page-current-to-next {
  1094. from {
  1095. transform: translate3d(0, 0, 0);
  1096. }
  1097. to {
  1098. transform: translate3d(100%, 0, 0);
  1099. }
  1100. }
  1101. @keyframes aurora-page-element-fade-in {
  1102. from {
  1103. opacity: 0;
  1104. }
  1105. to {
  1106. opacity: 1;
  1107. }
  1108. }
  1109. @keyframes aurora-page-element-fade-out {
  1110. from {
  1111. opacity: 1;
  1112. }
  1113. to {
  1114. opacity: 0;
  1115. }
  1116. }
  1117. .view:not(.view-master-detail) .page-master-stacked {
  1118. display: none;
  1119. }
  1120. .view:not(.view-master-detail) .navbar-master-stacked {
  1121. display: none;
  1122. }
  1123. .view-master-detail .page-master,
  1124. .view-master-detail .navbar-master {
  1125. width: var(--f7-page-master-width);
  1126. --f7-safe-area-right: 0px;
  1127. --f7-safe-area-outer-right: 0px;
  1128. border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
  1129. }
  1130. .view-master-detail .page-master-detail,
  1131. .view-master-detail .navbar-master-detail {
  1132. width: calc(100% - var(--f7-page-master-width));
  1133. --f7-safe-area-left: 0px;
  1134. --f7-safe-area-outer-left: 0px;
  1135. left: var(--f7-page-master-width);
  1136. }
  1137. .view-master-detail .page-master {
  1138. z-index: 2;
  1139. transform: none;
  1140. pointer-events: auto;
  1141. }
  1142. .view-master-detail .page-master:before,
  1143. .view-master-detail .page-master:after {
  1144. display: none;
  1145. }
  1146. .view-master-detail.router-transition .page-master {
  1147. animation: none;
  1148. }
  1149. .md .router-transition-custom .page-previous,
  1150. .ios .router-transition-custom .page-previous,
  1151. .aurora .router-transition-custom .page-previous,
  1152. .md .router-transition-custom .page-next,
  1153. .ios .router-transition-custom .page-next,
  1154. .aurora .router-transition-custom .page-next {
  1155. opacity: 1;
  1156. transform: none;
  1157. }
  1158. .router-transition-f7-circle-forward:after,
  1159. .router-transition-f7-circle-backward:after {
  1160. content: '';
  1161. position: absolute;
  1162. left: 50%;
  1163. top: 50%;
  1164. width: 100vmax;
  1165. height: 100vmax;
  1166. margin-left: -50vmax;
  1167. margin-top: -50vmax;
  1168. background: var(--f7-page-bg-color);
  1169. z-index: 100;
  1170. }
  1171. .router-transition-f7-circle-forward:after {
  1172. transform: scale(0);
  1173. border-radius: 50%;
  1174. animation: f7-circle-circle-in 400ms forwards;
  1175. }
  1176. .router-transition-f7-circle-forward .page-next {
  1177. opacity: 0 !important;
  1178. transform: scale(0.9) !important;
  1179. animation: f7-circle-next-to-current 300ms forwards;
  1180. animation-delay: 300ms;
  1181. z-index: 150;
  1182. }
  1183. .router-transition-f7-circle-backward:after {
  1184. animation: f7-circle-circle-out 300ms forwards;
  1185. animation-delay: 350ms;
  1186. }
  1187. .router-transition-f7-circle-backward .page-current {
  1188. animation: f7-circle-current-to-next 700ms forwards;
  1189. z-index: 150;
  1190. }
  1191. @keyframes f7-circle-circle-in {
  1192. from {
  1193. transform: scale(0);
  1194. border-radius: 50%;
  1195. }
  1196. 50% {
  1197. border-radius: 50%;
  1198. }
  1199. to {
  1200. transform: scale(1);
  1201. border-radius: 0%;
  1202. }
  1203. }
  1204. @keyframes f7-circle-circle-out {
  1205. from {
  1206. transform: scale(1);
  1207. border-radius: 0%;
  1208. }
  1209. 50% {
  1210. border-radius: 50%;
  1211. }
  1212. to {
  1213. transform: scale(0);
  1214. border-radius: 50%;
  1215. }
  1216. }
  1217. @keyframes f7-circle-next-to-current {
  1218. from {
  1219. transform: scale(0.9);
  1220. opacity: 0;
  1221. }
  1222. 40% {
  1223. transform: scale(1.035);
  1224. opacity: 1;
  1225. }
  1226. to {
  1227. transform: scale(1);
  1228. opacity: 1;
  1229. }
  1230. }
  1231. @keyframes f7-circle-current-to-next {
  1232. from {
  1233. transform: scale(1);
  1234. opacity: 1;
  1235. }
  1236. 34% {
  1237. transform: scale(1.035);
  1238. opacity: 1;
  1239. }
  1240. 57% {
  1241. transform: scale(0.9);
  1242. opacity: 0;
  1243. }
  1244. to {
  1245. transform: scale(0.9);
  1246. opacity: 0;
  1247. }
  1248. }
  1249. .router-transition-f7-cover-v-forward,
  1250. .router-transition-f7-cover-v-backward {
  1251. background: #000;
  1252. perspective: 1200px;
  1253. }
  1254. .router-transition-f7-cover-v-forward .page-next {
  1255. animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
  1256. }
  1257. .router-transition-f7-cover-v-forward .page-current {
  1258. animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  1259. }
  1260. .router-transition-f7-cover-v-backward .page-current {
  1261. animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
  1262. }
  1263. .router-transition-f7-cover-v-backward .page-previous {
  1264. animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  1265. }
  1266. @keyframes f7-cover-v-next-to-current {
  1267. from {
  1268. transform: translateY(100%);
  1269. }
  1270. to {
  1271. transform: translateY(0%);
  1272. }
  1273. }
  1274. @keyframes f7-cover-v-current-to-next {
  1275. from {
  1276. transform: translateY(0%);
  1277. }
  1278. to {
  1279. transform: translateY(100%);
  1280. }
  1281. }
  1282. @keyframes f7-cover-v-current-to-prev {
  1283. from {
  1284. transform: translateZ(0);
  1285. opacity: 1;
  1286. }
  1287. to {
  1288. transform: translateZ(-300px);
  1289. opacity: 0.5;
  1290. }
  1291. }
  1292. @keyframes f7-cover-v-prev-to-current {
  1293. from {
  1294. transform: translateZ(-300px);
  1295. opacity: 0.5;
  1296. }
  1297. to {
  1298. transform: translateZ(0);
  1299. opacity: 1;
  1300. }
  1301. }
  1302. .router-transition-f7-cover-forward,
  1303. .router-transition-f7-cover-backward {
  1304. background: #000;
  1305. perspective: 1200px;
  1306. }
  1307. .router-transition-f7-cover-forward .page-next {
  1308. animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
  1309. }
  1310. .router-transition-f7-cover-forward .page-current {
  1311. animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
  1312. }
  1313. .router-transition-f7-cover-backward .page-current {
  1314. animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
  1315. }
  1316. .router-transition-f7-cover-backward .page-previous {
  1317. animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
  1318. }
  1319. @keyframes f7-cover-next-to-current {
  1320. from {
  1321. transform: translateX(100%);
  1322. }
  1323. to {
  1324. transform: translateX(0%);
  1325. }
  1326. }
  1327. @keyframes f7-cover-current-to-next {
  1328. from {
  1329. transform: translateX(0%);
  1330. }
  1331. to {
  1332. transform: translateX(100%);
  1333. }
  1334. }
  1335. @keyframes f7-cover-current-to-prev {
  1336. from {
  1337. transform: translateZ(0);
  1338. opacity: 1;
  1339. }
  1340. to {
  1341. transform: translateZ(-300px);
  1342. opacity: 0.5;
  1343. }
  1344. }
  1345. @keyframes f7-cover-prev-to-current {
  1346. from {
  1347. transform: translateZ(-300px);
  1348. opacity: 0.5;
  1349. }
  1350. to {
  1351. transform: translateZ(0);
  1352. opacity: 1;
  1353. }
  1354. }
  1355. .router-transition-f7-dive-forward,
  1356. .router-transition-f7-dive-backward {
  1357. background: var(--f7-page-bg-color);
  1358. perspective: 1200px;
  1359. }
  1360. .router-transition-f7-dive-forward .page-next {
  1361. animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
  1362. }
  1363. .router-transition-f7-dive-forward .page-current {
  1364. animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
  1365. }
  1366. .router-transition-f7-dive-backward .page-current {
  1367. animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
  1368. }
  1369. .router-transition-f7-dive-backward .page-previous {
  1370. animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
  1371. }
  1372. @keyframes f7-dive-next-to-current {
  1373. from {
  1374. opacity: 0;
  1375. transform: translateZ(-150px);
  1376. }
  1377. 50% {
  1378. opacity: 0;
  1379. }
  1380. to {
  1381. opacity: 1;
  1382. transform: translateZ(0px);
  1383. }
  1384. }
  1385. @keyframes f7-dive-current-to-next {
  1386. from {
  1387. opacity: 1;
  1388. transform: translateZ(0px);
  1389. }
  1390. 50% {
  1391. opacity: 0;
  1392. }
  1393. to {
  1394. opacity: 0;
  1395. transform: translateZ(-150px);
  1396. }
  1397. }
  1398. @keyframes f7-dive-current-to-prev {
  1399. from {
  1400. transform: translateZ(0px);
  1401. opacity: 1;
  1402. }
  1403. 50% {
  1404. opacity: 0;
  1405. }
  1406. to {
  1407. opacity: 0;
  1408. transform: translateZ(150px);
  1409. }
  1410. }
  1411. @keyframes f7-dive-prev-to-current {
  1412. from {
  1413. opacity: 0;
  1414. transform: translateZ(150px);
  1415. }
  1416. 50% {
  1417. opacity: 0;
  1418. }
  1419. to {
  1420. opacity: 1;
  1421. transform: translateZ(0px);
  1422. }
  1423. }
  1424. .router-transition-f7-fade-forward,
  1425. .router-transition-f7-fade-backward {
  1426. background: var(--f7-page-bg-color);
  1427. }
  1428. .router-transition-f7-fade-forward .page-next {
  1429. opacity: 0 !important;
  1430. animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  1431. }
  1432. .router-transition-f7-fade-forward .page-current {
  1433. animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  1434. }
  1435. .router-transition-f7-fade-backward .page-current {
  1436. animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
  1437. }
  1438. .router-transition-f7-fade-backward .page-previous {
  1439. animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
  1440. }
  1441. @keyframes f7-fade-in {
  1442. from {
  1443. opacity: 0;
  1444. }
  1445. 50% {
  1446. opacity: 0;
  1447. }
  1448. to {
  1449. opacity: 1;
  1450. }
  1451. }
  1452. @keyframes f7-fade-out {
  1453. from {
  1454. opacity: 1;
  1455. }
  1456. 50% {
  1457. opacity: 0;
  1458. }
  1459. to {
  1460. opacity: 0;
  1461. }
  1462. }
  1463. .router-transition-f7-flip-forward,
  1464. .router-transition-f7-flip-backward {
  1465. background: #000;
  1466. perspective: 1200px;
  1467. }
  1468. .router-transition-f7-flip-forward .page,
  1469. .router-transition-f7-flip-backward .page {
  1470. -webkit-backface-visibility: hidden;
  1471. backface-visibility: hidden;
  1472. }
  1473. .router-transition-f7-flip-forward .page-next {
  1474. animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
  1475. }
  1476. .router-transition-f7-flip-forward .page-current {
  1477. animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
  1478. }
  1479. .router-transition-f7-flip-backward .page-current {
  1480. animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
  1481. }
  1482. .router-transition-f7-flip-backward .page-previous {
  1483. animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
  1484. }
  1485. @keyframes f7-flip-next-to-current {
  1486. from {
  1487. border-radius: 30px;
  1488. transform: translateZ(-100vmax) rotateY(180deg);
  1489. }
  1490. to {
  1491. border-radius: 0;
  1492. transform: translateZ(0px) rotateY(0deg);
  1493. }
  1494. }
  1495. @keyframes f7-flip-current-to-next {
  1496. from {
  1497. border-radius: 0px;
  1498. transform: translateZ(0px) rotateY(0deg);
  1499. }
  1500. to {
  1501. border-radius: 30px;
  1502. transform: translateZ(-100vmax) rotateY(180deg);
  1503. }
  1504. }
  1505. @keyframes f7-flip-current-to-prev {
  1506. from {
  1507. border-radius: 0px;
  1508. transform: translateZ(0px) rotateY(0deg);
  1509. }
  1510. to {
  1511. border-radius: 30px;
  1512. transform: translateZ(-100vmax) rotateY(-180deg);
  1513. }
  1514. }
  1515. @keyframes f7-flip-prev-to-current {
  1516. from {
  1517. border-radius: 30px;
  1518. transform: translateZ(-100vmax) rotateY(-180deg);
  1519. }
  1520. to {
  1521. border-radius: 0px;
  1522. transform: translateZ(0px) rotateY(0deg);
  1523. }
  1524. }
  1525. .router-transition-f7-parallax-forward .page-next {
  1526. animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
  1527. }
  1528. .router-transition-f7-parallax-forward .page-current {
  1529. animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
  1530. }
  1531. .router-transition-f7-parallax-backward .page-current {
  1532. animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
  1533. }
  1534. .router-transition-f7-parallax-backward .page-previous {
  1535. animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
  1536. }
  1537. @keyframes f7-parallax-next-to-current {
  1538. from {
  1539. transform: translateX(100%);
  1540. }
  1541. to {
  1542. transform: translateX(0%);
  1543. }
  1544. }
  1545. @keyframes f7-parallax-current-to-next {
  1546. from {
  1547. transform: translateX(0%);
  1548. }
  1549. to {
  1550. transform: translateX(100%);
  1551. }
  1552. }
  1553. @keyframes f7-parallax-current-to-prev {
  1554. from {
  1555. transform: translateX(0%);
  1556. }
  1557. to {
  1558. transform: translateX(-20%);
  1559. }
  1560. }
  1561. @keyframes f7-parallax-prev-to-current {
  1562. from {
  1563. transform: translateX(-20%);
  1564. }
  1565. to {
  1566. transform: translateX(0%);
  1567. }
  1568. }
  1569. .router-transition-f7-push-forward .page-next {
  1570. animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
  1571. }
  1572. .router-transition-f7-push-forward .page-current {
  1573. animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
  1574. }
  1575. .router-transition-f7-push-backward .page-current {
  1576. animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
  1577. }
  1578. .router-transition-f7-push-backward .page-previous {
  1579. animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
  1580. }
  1581. @keyframes f7-push-next-to-current {
  1582. from {
  1583. transform: translateX(100%);
  1584. }
  1585. to {
  1586. transform: translateX(0%);
  1587. }
  1588. }
  1589. @keyframes f7-push-current-to-next {
  1590. from {
  1591. transform: translateX(0%);
  1592. }
  1593. to {
  1594. transform: translateX(100%);
  1595. }
  1596. }
  1597. @keyframes f7-push-current-to-prev {
  1598. from {
  1599. transform: translateX(0%);
  1600. }
  1601. to {
  1602. transform: translateX(-100%);
  1603. }
  1604. }
  1605. @keyframes f7-push-prev-to-current {
  1606. from {
  1607. transform: translateX(-100%);
  1608. }
  1609. to {
  1610. transform: translateX(0%);
  1611. }
  1612. }
  1613. /* === Link === */
  1614. :root {
  1615. --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  1616. --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  1617. --f7-link-highlight-color: var(--f7-link-highlight-black);
  1618. }
  1619. .theme-dark {
  1620. --f7-link-highlight-color: var(--f7-link-highlight-white);
  1621. }
  1622. .link,
  1623. .tab-link {
  1624. display: inline-flex;
  1625. align-items: center;
  1626. align-content: center;
  1627. justify-content: center;
  1628. position: relative;
  1629. box-sizing: border-box;
  1630. z-index: 1;
  1631. }
  1632. .link i + span,
  1633. .link i + i,
  1634. .link span + i,
  1635. .link span + span {
  1636. margin-left: 4px;
  1637. }
  1638. .ios .link {
  1639. transition: opacity 300ms;
  1640. }
  1641. .ios .link.active-state {
  1642. opacity: 0.3;
  1643. transition-duration: 0ms;
  1644. }
  1645. .aurora .link {
  1646. transition: opacity 300ms;
  1647. }
  1648. .aurora .link.active-state {
  1649. opacity: 0.3;
  1650. transition-duration: 0ms;
  1651. }
  1652. /* === Navbar === */
  1653. :root {
  1654. /*
  1655. --f7-navbar-bg-color: var(--f7-bars-bg-color);
  1656. --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  1657. --f7-navbar-bg-image: var(--f7-bars-bg-image);
  1658. --f7-navbar-border-color: var(--f7-bars-border-color);
  1659. --f7-navbar-link-color: var(--f7-bars-link-color);
  1660. --f7-navbar-text-color: var(--f7-bars-text-color);
  1661. */
  1662. --f7-navbar-hide-show-transition-duration: 400ms;
  1663. --f7-navbar-title-line-height: 1.2;
  1664. --f7-navbar-title-font-size: inherit;
  1665. --f7-navbar-subtitle-text-align: inherit;
  1666. --f7-navbar-large-title-line-height: 1.2;
  1667. --f7-navbar-large-title-text-color: inherit;
  1668. --f7-navbar-large-title-padding-left: 16px;
  1669. --f7-navbar-large-title-padding-right: 16px;
  1670. }
  1671. .ios {
  1672. --f7-navbar-height: 44px;
  1673. --f7-navbar-tablet-height: 44px;
  1674. --f7-navbar-font-size: 17px;
  1675. --f7-navbar-inner-padding-left: 8px;
  1676. --f7-navbar-inner-padding-right: 8px;
  1677. --f7-navbar-title-font-weight: 600;
  1678. --f7-navbar-title-margin-left: 0;
  1679. --f7-navbar-title-margin-right: 0;
  1680. --f7-navbar-title-text-align: center;
  1681. --f7-navbar-subtitle-font-size: 10px;
  1682. --f7-navbar-subtitle-line-height: 1;
  1683. --f7-navbar-shadow-image: none;
  1684. --f7-navbar-large-title-height: 52px;
  1685. --f7-navbar-large-title-font-size: 34px;
  1686. --f7-navbar-large-title-font-weight: 700;
  1687. --f7-navbar-large-title-letter-spacing: -0.03em;
  1688. --f7-navbar-large-title-padding-vertical: 6px;
  1689. /*
  1690. --f7-navbar-link-height: var(--f7-navbar-height);
  1691. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1692. */
  1693. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
  1694. }
  1695. .ios .theme-dark,
  1696. .ios.theme-dark {
  1697. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
  1698. }
  1699. .md {
  1700. --f7-navbar-height: 56px;
  1701. --f7-navbar-tablet-height: 64px;
  1702. --f7-navbar-font-size: 20px;
  1703. --f7-navbar-inner-padding-left: 0px;
  1704. --f7-navbar-inner-padding-right: 0px;
  1705. --f7-navbar-title-font-weight: 500;
  1706. --f7-navbar-title-margin-left: 16px;
  1707. --f7-navbar-title-margin-right: 16px;
  1708. --f7-navbar-title-text-align: left;
  1709. --f7-navbar-subtitle-font-size: 14px;
  1710. --f7-navbar-subtitle-line-height: 1.2;
  1711. --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  1712. --f7-navbar-large-title-font-size: 34px;
  1713. --f7-navbar-large-title-height: 56px;
  1714. --f7-navbar-large-title-font-weight: 500;
  1715. --f7-navbar-large-title-letter-spacing: 0;
  1716. --f7-navbar-large-title-padding-vertical: 8px;
  1717. /*
  1718. --f7-navbar-link-height: var(--f7-navbar-height);
  1719. --f7-navbar-link-line-height: var(--f7-navbar-height);
  1720. */
  1721. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
  1722. }
  1723. .md .theme-dark,
  1724. .md.theme-dark {
  1725. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
  1726. }
  1727. .aurora {
  1728. --f7-navbar-height: 38px;
  1729. --f7-navbar-tablet-height: 38px;
  1730. --f7-navbar-font-size: 14px;
  1731. --f7-navbar-inner-padding-left: 16px;
  1732. --f7-navbar-inner-padding-right: 16px;
  1733. --f7-navbar-title-font-weight: 600;
  1734. --f7-navbar-title-margin-left: 0;
  1735. --f7-navbar-title-margin-right: 0;
  1736. --f7-navbar-title-text-align: center;
  1737. --f7-navbar-subtitle-font-size: 12px;
  1738. --f7-navbar-subtitle-line-height: 1;
  1739. --f7-navbar-shadow-image: none;
  1740. --f7-navbar-large-title-height: 38px;
  1741. --f7-navbar-large-title-font-size: 26px;
  1742. --f7-navbar-large-title-font-weight: bold;
  1743. --f7-navbar-large-title-letter-spacing: -0.03em;
  1744. --f7-navbar-large-title-padding-vertical: 4px;
  1745. --f7-navbar-link-height: auto;
  1746. --f7-navbar-link-line-height: inherit;
  1747. --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
  1748. }
  1749. .aurora .theme-dark,
  1750. .aurora.theme-dark {
  1751. --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
  1752. }
  1753. .navbars,
  1754. .navbar {
  1755. z-index: 500;
  1756. left: 0;
  1757. top: 0;
  1758. width: 100%;
  1759. }
  1760. .navbars {
  1761. position: absolute;
  1762. }
  1763. .navbars .navbar {
  1764. z-index: auto;
  1765. }
  1766. .navbar {
  1767. --f7-navbar-large-collapse-progress: 0;
  1768. position: relative;
  1769. -webkit-backface-visibility: hidden;
  1770. backface-visibility: hidden;
  1771. box-sizing: border-box;
  1772. margin: 0;
  1773. height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  1774. color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
  1775. font-size: var(--f7-navbar-font-size);
  1776. }
  1777. .navbar.stacked {
  1778. display: none;
  1779. }
  1780. .navbar b {
  1781. font-weight: 500;
  1782. }
  1783. .navbar a {
  1784. color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  1785. }
  1786. .navbar a.link {
  1787. display: flex;
  1788. justify-content: flex-start;
  1789. line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
  1790. height: var(--f7-navbar-link-height, var(--f7-navbar-height));
  1791. }
  1792. .navbar .title,
  1793. .navbar .left,
  1794. .navbar .right {
  1795. position: relative;
  1796. z-index: 10;
  1797. }
  1798. .navbar .title {
  1799. position: relative;
  1800. overflow: hidden;
  1801. text-overflow: ellipsis;
  1802. white-space: nowrap;
  1803. flex-shrink: 10;
  1804. font-weight: var(--f7-navbar-title-font-weight);
  1805. display: inline-block;
  1806. line-height: var(--f7-navbar-title-line-height);
  1807. text-align: var(--f7-navbar-title-text-align);
  1808. font-size: var(--f7-navbar-title-font-size);
  1809. margin-left: var(--f7-navbar-title-margin-left);
  1810. margin-right: var(--f7-navbar-title-margin-left);
  1811. }
  1812. .navbar .subtitle {
  1813. display: block;
  1814. color: var(--f7-navbar-subtitle-text-color);
  1815. font-weight: normal;
  1816. font-size: var(--f7-navbar-subtitle-font-size);
  1817. line-height: var(--f7-navbar-subtitle-line-height);
  1818. text-align: var(--f7-navbar-subtitle-text-align);
  1819. }
  1820. .navbar .left,
  1821. .navbar .right {
  1822. flex-shrink: 0;
  1823. display: flex;
  1824. justify-content: flex-start;
  1825. align-items: center;
  1826. }
  1827. .navbar .right:first-child {
  1828. position: absolute;
  1829. height: 100%;
  1830. }
  1831. .navbar.no-hairline .navbar-bg:after,
  1832. .navbar.no-border .navbar-bg:after,
  1833. .navbar .no-hairline .navbar-bg:after,
  1834. .navbar .no-border .navbar-bg:after {
  1835. display: none !important;
  1836. }
  1837. .navbar.no-hairline .title-large:after,
  1838. .navbar.no-border .title-large:after,
  1839. .navbar .no-hairline .title-large:after,
  1840. .navbar .no-border .title-large:after {
  1841. display: none !important;
  1842. }
  1843. .navbar.no-shadow .navbar-bg:before,
  1844. .navbar .no-shadow .navbar-bg:before {
  1845. display: none !important;
  1846. }
  1847. .navbar.navbar-hidden .navbar-bg:before,
  1848. .navbar-hidden .navbar .navbar-bg:before {
  1849. opacity: 0 !important;
  1850. }
  1851. .navbar-bg {
  1852. position: absolute;
  1853. left: 0;
  1854. top: 0;
  1855. width: 100%;
  1856. height: 100%;
  1857. pointer-events: none;
  1858. z-index: 0;
  1859. background: var(--f7-navbar-bg-color);
  1860. background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
  1861. background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
  1862. transition-property: transform;
  1863. }
  1864. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  1865. .ios-translucent-bars .navbar-bg {
  1866. background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  1867. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  1868. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  1869. }
  1870. }
  1871. .navbar-bg:after,
  1872. .navbar-bg:before {
  1873. -webkit-backface-visibility: hidden;
  1874. backface-visibility: hidden;
  1875. }
  1876. .navbar-bg:after {
  1877. content: '';
  1878. position: absolute;
  1879. background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
  1880. display: block;
  1881. z-index: 15;
  1882. top: auto;
  1883. right: auto;
  1884. bottom: 0;
  1885. left: 0;
  1886. height: 1px;
  1887. width: 100%;
  1888. transform-origin: 50% 100%;
  1889. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  1890. }
  1891. .navbar-bg:before {
  1892. content: '';
  1893. position: absolute;
  1894. right: 0;
  1895. width: 100%;
  1896. top: 100%;
  1897. bottom: auto;
  1898. height: 8px;
  1899. pointer-events: none;
  1900. background: var(--f7-navbar-shadow-image);
  1901. }
  1902. .navbar-bg:after {
  1903. z-index: 1;
  1904. }
  1905. @media (min-width: 768px) and (min-height: 600px) {
  1906. :root {
  1907. --f7-navbar-height: var(--f7-navbar-tablet-height);
  1908. }
  1909. }
  1910. .navbar-transitioning,
  1911. .navbar-transitioning .left,
  1912. .navbar-transitioning .title,
  1913. .navbar-transitioning .right,
  1914. .navbar-transitioning .title-large-text,
  1915. .navbar-transitioning .navbar-bg,
  1916. .navbar-transitioning .subnavbar,
  1917. .navbar-transitioning .navbar-bg:before {
  1918. transition-duration: var(--f7-navbar-hide-show-transition-duration);
  1919. }
  1920. .navbar-page-transitioning {
  1921. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1922. }
  1923. .navbar-page-transitioning .title-large-text,
  1924. .navbar-page-transitioning .navbar-bg {
  1925. transition-duration: var(--f7-page-swipeback-transition-duration) !important;
  1926. }
  1927. .navbar-hidden {
  1928. transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
  1929. }
  1930. .navbar-hidden .navbar-inner {
  1931. pointer-events: none;
  1932. }
  1933. .navbar-hidden .navbar-inner > .left,
  1934. .navbar-hidden .navbar-inner > .title,
  1935. .navbar-hidden .navbar-inner > .right {
  1936. opacity: 0 !important;
  1937. }
  1938. .navbar-hidden .subnavbar {
  1939. pointer-events: auto;
  1940. }
  1941. .navbar-hidden-statusbar {
  1942. transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
  1943. }
  1944. .navbar-large-hidden .navbar-large {
  1945. --f7-navbar-large-collapse-progress: 1;
  1946. }
  1947. .navbar-inner {
  1948. position: absolute;
  1949. left: 0;
  1950. bottom: 0;
  1951. width: 100%;
  1952. height: 100%;
  1953. display: flex;
  1954. align-items: center;
  1955. box-sizing: border-box;
  1956. padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
  1957. transform: translate3d(0, 0, 0);
  1958. z-index: 10;
  1959. }
  1960. .views > .navbar,
  1961. .view > .navbar,
  1962. .page > .navbar,
  1963. .navbars > .navbar {
  1964. position: absolute;
  1965. }
  1966. .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
  1967. .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
  1968. opacity: 0;
  1969. }
  1970. .navbar-large .navbar-bg {
  1971. height: calc(100% + var(--f7-navbar-large-title-height));
  1972. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1973. }
  1974. .navbar-large-transparent .navbar-bg,
  1975. .navbar-large.navbar-transparent .navbar-bg {
  1976. opacity: var(--f7-navbar-large-collapse-progress);
  1977. height: 100%;
  1978. transform: none;
  1979. }
  1980. .ios .router-navbar-transition-to-large .navbar-bg,
  1981. .ios .router-navbar-transition-from-large .navbar-bg,
  1982. .navbar-bg.ios-swipeback-navbar-bg-large,
  1983. .navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
  1984. .navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
  1985. height: calc(100% + var(--f7-navbar-large-title-height));
  1986. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  1987. }
  1988. .ios .navbar:not(.navbar-large) .navbar-bg {
  1989. --f7-navbar-large-collapse-progress: 1;
  1990. }
  1991. .navbar-large .title {
  1992. opacity: var(--f7-navbar-large-collapse-progress);
  1993. }
  1994. .navbar-large-collapsed {
  1995. --f7-navbar-large-collapse-progress: 1;
  1996. }
  1997. .navbar-large-collapsed .title-large {
  1998. pointer-events: none;
  1999. }
  2000. .navbar .title-large {
  2001. box-sizing: border-box;
  2002. position: absolute;
  2003. left: 0;
  2004. right: 0;
  2005. top: 100%;
  2006. display: flex;
  2007. align-items: flex-end;
  2008. white-space: nowrap;
  2009. overflow: hidden;
  2010. height: var(--f7-navbar-large-title-height);
  2011. z-index: 5;
  2012. }
  2013. .navbar .title-large-text {
  2014. text-overflow: ellipsis;
  2015. white-space: nowrap;
  2016. color: var(--f7-navbar-large-title-text-color);
  2017. letter-spacing: var(--f7-navbar-large-title-letter-spacing);
  2018. font-size: var(--f7-navbar-large-title-font-size);
  2019. font-weight: var(--f7-navbar-large-title-font-weight);
  2020. line-height: var(--f7-navbar-large-title-line-height);
  2021. padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
  2022. padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
  2023. padding-top: var(--f7-navbar-large-title-padding-vertical);
  2024. padding-bottom: var(--f7-navbar-large-title-padding-vertical);
  2025. box-sizing: border-box;
  2026. overflow: hidden;
  2027. width: 100%;
  2028. transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  2029. transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
  2030. }
  2031. .navbar-no-title-large-transition .title-large-text {
  2032. transition-duration: 0ms;
  2033. }
  2034. .navbar ~ *,
  2035. .navbars ~ * {
  2036. --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  2037. }
  2038. .navbar ~ * .page-with-navbar-large,
  2039. .navbar ~ .page-with-navbar-large,
  2040. .navbars ~ * .page-with-navbar-large,
  2041. .navbars ~ .page-with-navbar-large,
  2042. .page-with-navbar-large .navbar ~ * {
  2043. --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  2044. }
  2045. .page.no-navbar,
  2046. .page.no-navbar .navbar ~ * {
  2047. --f7-page-navbar-offset: var(--f7-safe-area-top);
  2048. }
  2049. .ios {
  2050. --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
  2051. --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
  2052. --f7-navbar-large-transparent-bg-center: translateX(0);
  2053. --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2054. --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
  2055. --f7-navbar-large-transparent-bg-left: translateX(-100%);
  2056. --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2057. --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
  2058. --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2059. --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
  2060. }
  2061. .ios .navbar a.icon-only {
  2062. width: 44px;
  2063. margin: 0;
  2064. justify-content: center;
  2065. }
  2066. .ios .navbar .left a + a,
  2067. .ios .navbar .right a + a {
  2068. margin-left: 16px;
  2069. }
  2070. .ios .navbar b {
  2071. font-weight: 600;
  2072. }
  2073. .ios .navbar .left {
  2074. margin-right: 10px;
  2075. }
  2076. .ios .navbar .right {
  2077. margin-left: 10px;
  2078. }
  2079. .ios .navbar .right:first-child {
  2080. right: calc(8px + var(--f7-safe-area-right));
  2081. }
  2082. .ios .navbar-inner {
  2083. justify-content: space-between;
  2084. }
  2085. .ios .navbar-inner-left-title {
  2086. justify-content: flex-start;
  2087. }
  2088. .ios .navbar-inner-left-title .right {
  2089. margin-left: auto;
  2090. }
  2091. .ios .navbar-inner-left-title .title {
  2092. text-align: left;
  2093. margin-right: 10px;
  2094. }
  2095. .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
  2096. .ios .view:not(.view-master-detail) .navbar-previous .left,
  2097. .ios .navbar-next .left,
  2098. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
  2099. .ios .view:not(.view-master-detail) .navbar-previous .title,
  2100. .ios .navbar-next .title,
  2101. .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
  2102. .ios .view:not(.view-master-detail) .navbar-previous .right,
  2103. .ios .navbar-next .right,
  2104. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
  2105. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
  2106. .ios .navbar-next .subnavbar,
  2107. .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
  2108. .ios .view:not(.view-master-detail) .navbar-previous .fading,
  2109. .ios .navbar-next .fading {
  2110. opacity: 0;
  2111. }
  2112. .ios .view-master-detail .navbar-previous:not(.navbar-master),
  2113. .ios .view:not(.view-master-detail) .navbar-previous {
  2114. pointer-events: none;
  2115. }
  2116. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
  2117. .ios .view:not(.view-master-detail) .navbar-previous .title-large {
  2118. opacity: 0;
  2119. transition-duration: 0ms;
  2120. }
  2121. .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
  2122. .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
  2123. transform: scale(0.5);
  2124. transition-duration: 0ms;
  2125. }
  2126. .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
  2127. .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
  2128. .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
  2129. .ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
  2130. opacity: 1;
  2131. transform: translate3d(-100%, 0, 0);
  2132. }
  2133. .ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
  2134. .ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
  2135. transform: translateX(-100%);
  2136. }
  2137. .ios .navbar-next {
  2138. pointer-events: none;
  2139. }
  2140. .ios .navbar-next .navbar-bg {
  2141. transform: translateX(100%);
  2142. }
  2143. .ios .navbar-next .title-large .title-large-text {
  2144. transition-duration: 0ms;
  2145. transform: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  2146. }
  2147. .ios .navbar-next .subnavbar.sliding,
  2148. .ios .navbar-next .sliding .subnavbar {
  2149. opacity: 1;
  2150. transform: translate3d(100%, 0, 0);
  2151. }
  2152. .ios .router-transition .navbar,
  2153. .ios .router-transition .navbar-bg {
  2154. transition-duration: var(--f7-page-transition-duration);
  2155. }
  2156. .ios .router-transition .navbar-bg {
  2157. animation-duration: var(--f7-page-transition-duration);
  2158. animation-fill-mode: forwards;
  2159. }
  2160. .ios .router-transition .title-large,
  2161. .ios .router-transition .title-large-text {
  2162. transition-duration: 0ms;
  2163. }
  2164. .ios .router-transition .navbar-current .left,
  2165. .ios .router-transition .navbar-current .title,
  2166. .ios .router-transition .navbar-current .right,
  2167. .ios .router-transition .navbar-current .subnavbar {
  2168. animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
  2169. }
  2170. .ios .router-transition .navbar-current .sliding.left,
  2171. .ios .router-transition .navbar-current .sliding.left .icon + span,
  2172. .ios .router-transition .navbar-current .sliding.title,
  2173. .ios .router-transition .navbar-current .sliding.right,
  2174. .ios .router-transition .navbar-current .sliding .left,
  2175. .ios .router-transition .navbar-current .sliding .left .icon + span,
  2176. .ios .router-transition .navbar-current .sliding .title,
  2177. .ios .router-transition .navbar-current .sliding .right {
  2178. transition-duration: var(--f7-page-transition-duration);
  2179. opacity: 0 !important;
  2180. animation: none;
  2181. }
  2182. .ios .router-transition .navbar-current .sliding .subnavbar,
  2183. .ios .router-transition .navbar-current .sliding.subnavbar {
  2184. transition-duration: var(--f7-page-transition-duration);
  2185. animation: none;
  2186. opacity: 1;
  2187. }
  2188. .ios .router-transition-forward .navbar-next .left,
  2189. .ios .router-transition-backward .navbar-previous .left,
  2190. .ios .router-transition-forward .navbar-next .title,
  2191. .ios .router-transition-backward .navbar-previous .title,
  2192. .ios .router-transition-forward .navbar-next .right,
  2193. .ios .router-transition-backward .navbar-previous .right,
  2194. .ios .router-transition-forward .navbar-next .subnavbar,
  2195. .ios .router-transition-backward .navbar-previous .subnavbar {
  2196. animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
  2197. }
  2198. .ios .router-transition-forward .navbar-next .sliding.left,
  2199. .ios .router-transition-backward .navbar-previous .sliding.left,
  2200. .ios .router-transition-forward .navbar-next .sliding.left .icon + span,
  2201. .ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
  2202. .ios .router-transition-forward .navbar-next .sliding.title,
  2203. .ios .router-transition-backward .navbar-previous .sliding.title,
  2204. .ios .router-transition-forward .navbar-next .sliding.right,
  2205. .ios .router-transition-backward .navbar-previous .sliding.right,
  2206. .ios .router-transition-forward .navbar-next .sliding .left,
  2207. .ios .router-transition-backward .navbar-previous .sliding .left,
  2208. .ios .router-transition-forward .navbar-next .sliding .left .icon + span,
  2209. .ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
  2210. .ios .router-transition-forward .navbar-next .sliding .title,
  2211. .ios .router-transition-backward .navbar-previous .sliding .title,
  2212. .ios .router-transition-forward .navbar-next .sliding .right,
  2213. .ios .router-transition-backward .navbar-previous .sliding .right,
  2214. .ios .router-transition-forward .navbar-next .sliding .subnavbar,
  2215. .ios .router-transition-backward .navbar-previous .sliding .subnavbar {
  2216. transition-duration: var(--f7-page-transition-duration);
  2217. animation: none;
  2218. transform: translate3d(0, 0, 0) !important;
  2219. opacity: 1 !important;
  2220. }
  2221. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
  2222. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
  2223. animation: none;
  2224. }
  2225. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
  2226. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
  2227. .ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
  2228. .ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
  2229. opacity: 0 !important;
  2230. }
  2231. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
  2232. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
  2233. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
  2234. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
  2235. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
  2236. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
  2237. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
  2238. .ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
  2239. animation: none;
  2240. }
  2241. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
  2242. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
  2243. overflow: visible;
  2244. }
  2245. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  2246. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
  2247. animation: ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
  2248. }
  2249. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
  2250. animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
  2251. transition: none;
  2252. transform-origin: left center;
  2253. }
  2254. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  2255. overflow: visible;
  2256. }
  2257. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  2258. animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
  2259. }
  2260. .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
  2261. animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
  2262. }
  2263. .ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
  2264. .ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
  2265. animation: none;
  2266. opacity: 0 !important;
  2267. transition-duration: 0;
  2268. }
  2269. .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
  2270. animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
  2271. transition: none;
  2272. transform-origin: left center;
  2273. }
  2274. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
  2275. overflow: visible;
  2276. }
  2277. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
  2278. animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
  2279. }
  2280. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
  2281. animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
  2282. }
  2283. .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  2284. opacity: 0;
  2285. }
  2286. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
  2287. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
  2288. overflow: visible;
  2289. opacity: 1;
  2290. }
  2291. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
  2292. .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
  2293. animation: ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
  2294. }
  2295. .ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
  2296. .ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
  2297. animation: none;
  2298. opacity: 0 !important;
  2299. transition-duration: 0;
  2300. }
  2301. .ios .router-transition-forward .navbar-current .navbar-bg {
  2302. animation-name: ios-navbar-bg-from-cb-to-lb;
  2303. }
  2304. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
  2305. animation-name: ios-navbar-bg-from-cb-to-lb;
  2306. }
  2307. .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2308. animation-name: ios-navbar-bg-from-cb-to-lt;
  2309. }
  2310. .ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2311. animation-name: ios-navbar-bg-from-ct-to-lb;
  2312. }
  2313. .ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
  2314. animation-name: ios-navbar-bg-from-ct-to-lt;
  2315. }
  2316. .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
  2317. .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
  2318. animation-name: ios-navbar-transparent-bg-from-c-to-l;
  2319. }
  2320. .ios .router-transition-forward .navbar-next .navbar-bg {
  2321. animation-name: ios-navbar-bg-from-rb-to-cb;
  2322. }
  2323. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
  2324. animation-name: ios-navbar-bg-from-rb-to-cb;
  2325. }
  2326. .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2327. animation-name: ios-navbar-bg-from-rb-to-ct;
  2328. }
  2329. .ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2330. animation-name: ios-navbar-bg-from-rt-to-cb;
  2331. }
  2332. .ios .router-transition-backward .navbar-current .navbar-bg {
  2333. animation-name: ios-navbar-bg-from-cb-to-rb;
  2334. }
  2335. .ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2336. animation-name: ios-navbar-bg-from-ct-to-rb;
  2337. }
  2338. .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2339. animation-name: ios-navbar-bg-from-cb-to-rt;
  2340. }
  2341. .ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
  2342. animation-name: ios-navbar-bg-from-ct-to-rt;
  2343. }
  2344. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
  2345. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
  2346. animation-name: ios-navbar-bg-from-cb-to-rb;
  2347. }
  2348. .ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
  2349. animation-name: ios-navbar-bg-from-ct-to-rb;
  2350. }
  2351. .ios .router-transition-backward .navbar-previous .navbar-bg {
  2352. animation-name: ios-navbar-bg-from-lb-to-cb;
  2353. }
  2354. .ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
  2355. animation-name: ios-navbar-bg-from-lt-to-cb;
  2356. }
  2357. .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
  2358. animation-name: ios-navbar-bg-from-lb-to-ct;
  2359. }
  2360. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
  2361. animation-name: ios-navbar-bg-from-lt-to-ct;
  2362. }
  2363. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
  2364. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
  2365. animation-name: ios-navbar-transparent-bg-from-l-to-c;
  2366. }
  2367. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
  2368. .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
  2369. animation-name: ios-navbar-bg-from-lb-to-ct;
  2370. }
  2371. .view-master-detail .navbars {
  2372. z-index: auto;
  2373. }
  2374. .view-master-detail .page-master {
  2375. z-index: 525;
  2376. }
  2377. .view-master-detail .navbar-master .navbar-inner,
  2378. .view-master-detail .navbar-master .navbar-bg {
  2379. z-index: 550;
  2380. }
  2381. .view-master-detail .navbar-master-detail .navbar-inner,
  2382. .view-master-detail .navbar-master-detail .navbar-bg {
  2383. z-index: 500;
  2384. }
  2385. .view-master-detail .navbar-master.navbar-previous {
  2386. pointer-events: auto;
  2387. }
  2388. .view-master-detail .navbar-master.navbar-previous .left,
  2389. .view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
  2390. .view-master-detail .navbar-master.navbar-previous .right,
  2391. .view-master-detail .navbar-master.navbar-previous .subnavbar {
  2392. opacity: 1;
  2393. }
  2394. .view-master-detail.router-transition .navbar-master .left,
  2395. .view-master-detail.router-transition .navbar-master .left .icon + span,
  2396. .view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
  2397. .view-master-detail.router-transition .navbar-master .right,
  2398. .view-master-detail.router-transition .navbar-master .subnavbar,
  2399. .view-master-detail.router-transition .navbar-master .fading {
  2400. opacity: 1 !important;
  2401. transition-duration: 0ms;
  2402. transform: none !important;
  2403. animation: none !important;
  2404. }
  2405. .view-master-detail.router-transition .navbar-master .navbar-bg {
  2406. transition-duration: 0ms;
  2407. animation: none !important;
  2408. }
  2409. .view-master-detail.router-transition .navbar-master.navbar-large .title {
  2410. opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
  2411. transition-duration: 0ms;
  2412. transform: none !important;
  2413. animation: none !important;
  2414. }
  2415. .view-master-detail.router-transition .navbar-master.navbar-large .title-large,
  2416. .view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
  2417. transition-duration: 0ms;
  2418. animation: none !important;
  2419. }
  2420. .view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
  2421. .view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
  2422. height: 100% !important;
  2423. opacity: var(--f7-navbar-large-collapse-progress) !important;
  2424. }
  2425. @keyframes ios-navbar-element-fade-in {
  2426. 0% {
  2427. opacity: 0;
  2428. }
  2429. 25% {
  2430. opacity: 0;
  2431. }
  2432. to {
  2433. opacity: 1;
  2434. }
  2435. }
  2436. @keyframes ios-navbar-element-fade-out {
  2437. from {
  2438. opacity: 1;
  2439. }
  2440. 75% {
  2441. opacity: 0;
  2442. }
  2443. to {
  2444. opacity: 0;
  2445. }
  2446. }
  2447. @keyframes ios-navbar-large-title-text-slide-up {
  2448. 0% {
  2449. transform: translateX(0px) translateY(0%) scale(1);
  2450. }
  2451. 100% {
  2452. transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
  2453. }
  2454. }
  2455. @keyframes ios-navbar-large-title-text-slide-down {
  2456. 0% {
  2457. transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
  2458. }
  2459. 100% {
  2460. transform: translateX(0px) translateY(0%) scale(1);
  2461. }
  2462. }
  2463. @keyframes ios-navbar-large-title-text-slide-left {
  2464. 0% {
  2465. transform: translateX(100%);
  2466. }
  2467. 100% {
  2468. transform: translateX(0%);
  2469. }
  2470. }
  2471. @keyframes ios-navbar-large-title-text-slide-right {
  2472. 0% {
  2473. transform: translateX(0%);
  2474. }
  2475. 100% {
  2476. transform: translateX(100%);
  2477. }
  2478. }
  2479. @keyframes ios-navbar-large-title-text-fade-out {
  2480. 0% {
  2481. opacity: 1;
  2482. }
  2483. 80% {
  2484. opacity: 0;
  2485. }
  2486. 100% {
  2487. opacity: 0;
  2488. }
  2489. }
  2490. @keyframes ios-navbar-large-title-text-fade-in {
  2491. 0% {
  2492. opacity: 0;
  2493. }
  2494. 20% {
  2495. opacity: 0;
  2496. }
  2497. 100% {
  2498. opacity: 1;
  2499. }
  2500. }
  2501. @keyframes ios-navbar-back-text-current-to-previous {
  2502. 0% {
  2503. opacity: 1;
  2504. transform: translateY(0px) translateX(0px) scale(1);
  2505. }
  2506. 80% {
  2507. opacity: 0;
  2508. }
  2509. 100% {
  2510. opacity: 0;
  2511. transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
  2512. }
  2513. }
  2514. @keyframes ios-navbar-back-text-next-to-current {
  2515. 0% {
  2516. opacity: 0;
  2517. transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
  2518. }
  2519. 20% {
  2520. opacity: 0;
  2521. }
  2522. 100% {
  2523. opacity: 1;
  2524. transform: translateX(0px) translateY(0px) scale(1);
  2525. }
  2526. }
  2527. @keyframes ios-navbar-bg-from-cb-to-lb {
  2528. from {
  2529. transform: var(--f7-navbar-large-bg-center-bottom);
  2530. }
  2531. to {
  2532. transform: var(--f7-navbar-large-bg-left-bottom);
  2533. }
  2534. }
  2535. @keyframes ios-navbar-bg-from-cb-to-lt {
  2536. from {
  2537. transform: var(--f7-navbar-large-bg-center-bottom);
  2538. }
  2539. to {
  2540. transform: var(--f7-navbar-large-bg-left-top);
  2541. }
  2542. }
  2543. @keyframes ios-navbar-bg-from-ct-to-lb {
  2544. from {
  2545. transform: var(--f7-navbar-large-bg-center-top);
  2546. }
  2547. to {
  2548. transform: var(--f7-navbar-large-bg-left-bottom);
  2549. }
  2550. }
  2551. @keyframes ios-navbar-bg-from-ct-to-lt {
  2552. from {
  2553. transform: var(--f7-navbar-large-bg-center-top);
  2554. }
  2555. to {
  2556. transform: var(--f7-navbar-large-bg-left-top);
  2557. }
  2558. }
  2559. @keyframes ios-navbar-bg-from-rb-to-cb {
  2560. from {
  2561. transform: var(--f7-navbar-large-bg-right-bottom);
  2562. }
  2563. to {
  2564. transform: var(--f7-navbar-large-bg-center-bottom);
  2565. }
  2566. }
  2567. @keyframes ios-navbar-bg-from-rb-to-ct {
  2568. from {
  2569. transform: var(--f7-navbar-large-bg-right-bottom);
  2570. }
  2571. to {
  2572. transform: var(--f7-navbar-large-bg-center-top);
  2573. }
  2574. }
  2575. @keyframes ios-navbar-bg-from-rt-to-cb {
  2576. from {
  2577. transform: var(--f7-navbar-large-bg-right-top);
  2578. }
  2579. to {
  2580. transform: var(--f7-navbar-large-bg-center-bottom);
  2581. }
  2582. }
  2583. @keyframes ios-navbar-bg-from-cb-to-rb {
  2584. from {
  2585. transform: var(--f7-navbar-large-bg-center-bottom);
  2586. }
  2587. to {
  2588. transform: var(--f7-navbar-large-bg-right-bottom);
  2589. }
  2590. }
  2591. @keyframes ios-navbar-bg-from-ct-to-rb {
  2592. from {
  2593. transform: var(--f7-navbar-large-bg-center-top);
  2594. }
  2595. to {
  2596. transform: var(--f7-navbar-large-bg-right-bottom);
  2597. }
  2598. }
  2599. @keyframes ios-navbar-bg-from-cb-to-rt {
  2600. from {
  2601. transform: var(--f7-navbar-large-bg-center-bottom);
  2602. }
  2603. to {
  2604. transform: var(--f7-navbar-large-bg-right-top);
  2605. }
  2606. }
  2607. @keyframes ios-navbar-bg-from-ct-to-rt {
  2608. from {
  2609. transform: var(--f7-navbar-large-bg-center-top);
  2610. }
  2611. to {
  2612. transform: var(--f7-navbar-large-bg-right-top);
  2613. }
  2614. }
  2615. @keyframes ios-navbar-bg-from-lb-to-cb {
  2616. from {
  2617. transform: var(--f7-navbar-large-bg-left-bottom);
  2618. }
  2619. to {
  2620. transform: var(--f7-navbar-large-bg-center-bottom);
  2621. }
  2622. }
  2623. @keyframes ios-navbar-bg-from-lt-to-cb {
  2624. from {
  2625. transform: var(--f7-navbar-large-bg-left-top);
  2626. }
  2627. to {
  2628. transform: var(--f7-navbar-large-bg-center-bottom);
  2629. }
  2630. }
  2631. @keyframes ios-navbar-bg-from-lb-to-ct {
  2632. from {
  2633. transform: var(--f7-navbar-large-bg-left-bottom);
  2634. }
  2635. to {
  2636. transform: var(--f7-navbar-large-bg-center-top);
  2637. }
  2638. }
  2639. @keyframes ios-navbar-bg-from-lt-to-ct {
  2640. from {
  2641. transform: var(--f7-navbar-large-bg-left-top);
  2642. }
  2643. to {
  2644. transform: var(--f7-navbar-large-bg-center-top);
  2645. }
  2646. }
  2647. @keyframes ios-navbar-transparent-bg-from-l-to-c {
  2648. from {
  2649. transform: var(--f7-navbar-large-transparent-bg-left);
  2650. }
  2651. to {
  2652. transform: var(--f7-navbar-large-transparent-bg-center);
  2653. }
  2654. }
  2655. @keyframes ios-navbar-transparent-bg-from-c-to-l {
  2656. from {
  2657. transform: var(--f7-navbar-large-transparent-bg-center);
  2658. }
  2659. to {
  2660. transform: var(--f7-navbar-large-transparent-bg-left);
  2661. }
  2662. }
  2663. .md .navbar a.link {
  2664. padding: 0 16px;
  2665. min-width: 48px;
  2666. }
  2667. .md .navbar a.link:before {
  2668. content: '';
  2669. width: 152%;
  2670. height: 152%;
  2671. position: absolute;
  2672. left: -26%;
  2673. top: -26%;
  2674. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  2675. background-repeat: no-repeat;
  2676. background-position: center;
  2677. background-size: 100% 100%;
  2678. opacity: 0;
  2679. pointer-events: none;
  2680. transition-duration: 600ms;
  2681. }
  2682. .md .navbar a.link.active-state:before {
  2683. opacity: 1;
  2684. transition-duration: 150ms;
  2685. }
  2686. .md .navbar a.icon-only {
  2687. min-width: 0;
  2688. flex-shrink: 0;
  2689. width: 56px;
  2690. }
  2691. .md .navbar .right {
  2692. margin-left: auto;
  2693. }
  2694. .md .navbar .right:first-child {
  2695. right: var(--f7-safe-area-right);
  2696. }
  2697. .md .navbar-inner {
  2698. justify-content: flex-start;
  2699. overflow: hidden;
  2700. }
  2701. .md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
  2702. overflow: visible;
  2703. }
  2704. .md .page.page-with-subnavbar .navbar-inner {
  2705. overflow: visible;
  2706. }
  2707. .md .navbar-inner-centered-title {
  2708. justify-content: space-between;
  2709. }
  2710. .md .navbar-inner-centered-title .right {
  2711. margin-left: 0;
  2712. }
  2713. .md .navbar-inner-centered-title .title {
  2714. text-align: center;
  2715. }
  2716. .aurora .navbar a.icon-only {
  2717. margin: 0;
  2718. justify-content: center;
  2719. }
  2720. .aurora .navbar .left a + a,
  2721. .aurora .navbar .right a + a {
  2722. margin-left: 10px;
  2723. }
  2724. .aurora .navbar b {
  2725. font-weight: bold;
  2726. }
  2727. .aurora .navbar .left {
  2728. margin-right: 10px;
  2729. }
  2730. .aurora .navbar .right {
  2731. margin-left: 10px;
  2732. }
  2733. .aurora .navbar .right:first-child {
  2734. right: calc(16px + var(--f7-safe-area-right));
  2735. }
  2736. .aurora .navbar-inner {
  2737. justify-content: space-between;
  2738. }
  2739. .aurora .navbar-inner-left-title {
  2740. justify-content: flex-start;
  2741. }
  2742. .aurora .navbar-inner-left-title .right {
  2743. margin-left: auto;
  2744. }
  2745. .aurora .navbar-inner-left-title .title {
  2746. text-align: left;
  2747. margin-right: 10px;
  2748. }
  2749. /* === Toolbar === */
  2750. :root {
  2751. /*
  2752. --f7-toolbar-bg-color: var(--f7-bars-bg-color);
  2753. --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  2754. --f7-toolbar-bg-image: var(--f7-bars-bg-image);
  2755. --f7-toolbar-border-color: var(--f7-bars-border-color);
  2756. --f7-toolbar-link-color: var(--f7-bars-link-color);
  2757. --f7-toolbar-text-color: var(--f7-bars-text-color);
  2758. --f7-tabbar-link-active-color: var(--f7-theme-color);
  2759. */
  2760. --f7-tabbar-link-active-bg-color: transparent;
  2761. --f7-tabbar-label-text-transform: none;
  2762. --f7-toolbar-hide-show-transition-duration: 400ms;
  2763. }
  2764. .ios {
  2765. --f7-toolbar-height: 44px;
  2766. --f7-toolbar-font-size: 17px;
  2767. --f7-toolbar-inner-padding-left: 8px;
  2768. --f7-toolbar-inner-padding-right: 8px;
  2769. /*
  2770. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2771. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2772. */
  2773. --f7-tabbar-labels-height: 50px;
  2774. --f7-tabbar-labels-tablet-height: 50px;
  2775. --f7-toolbar-top-shadow-image: none;
  2776. --f7-toolbar-bottom-shadow-image: none;
  2777. --f7-tabbar-icon-size: 28px;
  2778. --f7-tabbar-link-text-transform: none;
  2779. --f7-tabbar-link-font-weight: 400;
  2780. --f7-tabbar-link-letter-spacing: 0;
  2781. --f7-tabbar-label-font-size: 12px;
  2782. --f7-tabbar-label-tablet-font-size: 14px;
  2783. --f7-tabbar-label-font-weight: 500;
  2784. --f7-tabbar-label-letter-spacing: 0.01;
  2785. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
  2786. }
  2787. .ios .theme-dark,
  2788. .ios.theme-dark {
  2789. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  2790. }
  2791. .md {
  2792. --f7-toolbar-height: 48px;
  2793. --f7-toolbar-font-size: 14px;
  2794. --f7-toolbar-inner-padding-left: 0px;
  2795. --f7-toolbar-inner-padding-right: 0px;
  2796. /*
  2797. --f7-toolbar-link-height: var(--f7-toolbar-height);
  2798. --f7-toolbar-link-line-height: var(--f7-toolbar-height);
  2799. */
  2800. --f7-tabbar-labels-height: 56px;
  2801. --f7-tabbar-labels-tablet-height: 56px;
  2802. /*
  2803. --f7-tabbar-link-active-border-color: var(--f7-theme-color);
  2804. */
  2805. --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
  2806. --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
  2807. --f7-tabbar-icon-size: 24px;
  2808. --f7-tabbar-link-text-transform: uppercase;
  2809. --f7-tabbar-link-font-weight: 500;
  2810. --f7-tabbar-link-letter-spacing: 0.03em;
  2811. --f7-tabbar-label-font-size: 14px;
  2812. --f7-tabbar-label-tablet-font-size: 14px;
  2813. --f7-tabbar-label-font-weight: 400;
  2814. --f7-tabbar-label-letter-spacing: 0;
  2815. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
  2816. }
  2817. .md .theme-dark,
  2818. .md.theme-dark {
  2819. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
  2820. }
  2821. .aurora {
  2822. --f7-toolbar-height: 38px;
  2823. --f7-toolbar-font-size: 14px;
  2824. --f7-toolbar-inner-padding-left: 16px;
  2825. --f7-toolbar-inner-padding-right: 16px;
  2826. --f7-toolbar-link-height: auto;
  2827. --f7-toolbar-link-line-height: inherit;
  2828. --f7-tabbar-labels-height: 44px;
  2829. --f7-tabbar-labels-tablet-height: 44px;
  2830. --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
  2831. --f7-toolbar-top-shadow-image: none;
  2832. --f7-toolbar-bottom-shadow-image: none;
  2833. --f7-tabbar-icon-size: 18px;
  2834. --f7-tabbar-link-text-transform: none;
  2835. --f7-tabbar-link-font-weight: 400;
  2836. --f7-tabbar-link-letter-spacing: 0;
  2837. --f7-tabbar-label-font-size: 12px;
  2838. --f7-tabbar-label-tablet-font-size: 12px;
  2839. --f7-tabbar-label-font-weight: 500;
  2840. --f7-tabbar-label-letter-spacing: 0.01;
  2841. --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
  2842. }
  2843. .aurora .theme-dark,
  2844. .aurora.theme-dark {
  2845. --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
  2846. }
  2847. .toolbar {
  2848. width: 100%;
  2849. position: relative;
  2850. margin: 0;
  2851. transform: translate3d(0, 0, 0);
  2852. -webkit-backface-visibility: hidden;
  2853. backface-visibility: hidden;
  2854. z-index: 600;
  2855. box-sizing: border-box;
  2856. left: 0;
  2857. height: var(--f7-toolbar-height);
  2858. background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
  2859. background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
  2860. color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
  2861. font-size: var(--f7-toolbar-font-size);
  2862. }
  2863. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  2864. .ios-translucent-bars .toolbar {
  2865. background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  2866. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  2867. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  2868. }
  2869. }
  2870. .toolbar b {
  2871. font-weight: 600;
  2872. }
  2873. .toolbar a {
  2874. color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  2875. box-sizing: border-box;
  2876. flex-shrink: 1;
  2877. position: relative;
  2878. white-space: nowrap;
  2879. text-overflow: ellipsis;
  2880. }
  2881. .toolbar .link {
  2882. display: flex;
  2883. line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
  2884. height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
  2885. }
  2886. .toolbar i.icon {
  2887. display: block;
  2888. }
  2889. .toolbar:after,
  2890. .toolbar:before {
  2891. -webkit-backface-visibility: hidden;
  2892. backface-visibility: hidden;
  2893. }
  2894. .views > .toolbar,
  2895. .view > .toolbar,
  2896. .page > .toolbar {
  2897. position: absolute;
  2898. }
  2899. .toolbar-top,
  2900. .ios .toolbar-top-ios,
  2901. .md .toolbar-top-md,
  2902. .aurora .toolbar-top-aurora {
  2903. top: 0;
  2904. }
  2905. .toolbar-top .tab-link-highlight,
  2906. .ios .toolbar-top-ios .tab-link-highlight,
  2907. .md .toolbar-top-md .tab-link-highlight,
  2908. .aurora .toolbar-top-aurora .tab-link-highlight {
  2909. bottom: 0;
  2910. }
  2911. .toolbar-top.no-hairline:after,
  2912. .ios .toolbar-top-ios.no-hairline:after,
  2913. .md .toolbar-top-md.no-hairline:after,
  2914. .aurora .toolbar-top-aurora.no-hairline:after,
  2915. .toolbar-top.no-border:after,
  2916. .ios .toolbar-top-ios.no-border:after,
  2917. .md .toolbar-top-md.no-border:after,
  2918. .aurora .toolbar-top-aurora.no-border:after {
  2919. display: none !important;
  2920. }
  2921. .toolbar-top.no-shadow:before,
  2922. .ios .toolbar-top-ios.no-shadow:before,
  2923. .md .toolbar-top-md.no-shadow:before,
  2924. .aurora .toolbar-top-aurora.no-shadow:before,
  2925. .toolbar-top.toolbar-hidden:before,
  2926. .ios .toolbar-top-ios.toolbar-hidden:before,
  2927. .md .toolbar-top-md.toolbar-hidden:before,
  2928. .aurora .toolbar-top-aurora.toolbar-hidden:before {
  2929. display: none !important;
  2930. }
  2931. .toolbar-top:after,
  2932. .ios .toolbar-top-ios:after,
  2933. .md .toolbar-top-md:after,
  2934. .aurora .toolbar-top-aurora:after,
  2935. .toolbar-top:before,
  2936. .ios .toolbar-top-ios:before,
  2937. .md .toolbar-top-md:before,
  2938. .aurora .toolbar-top-aurora:before {
  2939. -webkit-backface-visibility: hidden;
  2940. backface-visibility: hidden;
  2941. }
  2942. .toolbar-top:after,
  2943. .ios .toolbar-top-ios:after,
  2944. .md .toolbar-top-md:after,
  2945. .aurora .toolbar-top-aurora:after {
  2946. content: '';
  2947. position: absolute;
  2948. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  2949. display: block;
  2950. z-index: 15;
  2951. top: auto;
  2952. right: auto;
  2953. bottom: 0;
  2954. left: 0;
  2955. height: 1px;
  2956. width: 100%;
  2957. transform-origin: 50% 100%;
  2958. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  2959. }
  2960. .toolbar-top:before,
  2961. .ios .toolbar-top-ios:before,
  2962. .md .toolbar-top-md:before,
  2963. .aurora .toolbar-top-aurora:before {
  2964. content: '';
  2965. position: absolute;
  2966. right: 0;
  2967. width: 100%;
  2968. top: 100%;
  2969. bottom: auto;
  2970. height: 8px;
  2971. pointer-events: none;
  2972. background: var(--f7-toolbar-top-shadow-image);
  2973. }
  2974. .toolbar-bottom,
  2975. .ios .toolbar-bottom-ios,
  2976. .md .toolbar-bottom-md,
  2977. .aurora .toolbar-bottom-aurora {
  2978. bottom: 0;
  2979. height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  2980. }
  2981. .toolbar-bottom .tab-link-highlight,
  2982. .ios .toolbar-bottom-ios .tab-link-highlight,
  2983. .md .toolbar-bottom-md .tab-link-highlight,
  2984. .aurora .toolbar-bottom-aurora .tab-link-highlight {
  2985. top: 0;
  2986. }
  2987. .toolbar-bottom .toolbar-inner,
  2988. .ios .toolbar-bottom-ios .toolbar-inner,
  2989. .md .toolbar-bottom-md .toolbar-inner,
  2990. .aurora .toolbar-bottom-aurora .toolbar-inner {
  2991. height: auto;
  2992. top: 0;
  2993. bottom: var(--f7-safe-area-bottom);
  2994. }
  2995. .toolbar-bottom.no-hairline:before,
  2996. .ios .toolbar-bottom-ios.no-hairline:before,
  2997. .md .toolbar-bottom-md.no-hairline:before,
  2998. .aurora .toolbar-bottom-aurora.no-hairline:before,
  2999. .toolbar-bottom.no-border:before,
  3000. .ios .toolbar-bottom-ios.no-border:before,
  3001. .md .toolbar-bottom-md.no-border:before,
  3002. .aurora .toolbar-bottom-aurora.no-border:before {
  3003. display: none !important;
  3004. }
  3005. .toolbar-bottom.no-shadow:after,
  3006. .ios .toolbar-bottom-ios.no-shadow:after,
  3007. .md .toolbar-bottom-md.no-shadow:after,
  3008. .aurora .toolbar-bottom-aurora.no-shadow:after,
  3009. .toolbar-bottom.toolbar-hidden:after,
  3010. .ios .toolbar-bottom-ios.toolbar-hidden:after,
  3011. .md .toolbar-bottom-md.toolbar-hidden:after,
  3012. .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
  3013. display: none !important;
  3014. }
  3015. .toolbar-bottom:before,
  3016. .ios .toolbar-bottom-ios:before,
  3017. .md .toolbar-bottom-md:before,
  3018. .aurora .toolbar-bottom-aurora:before {
  3019. content: '';
  3020. position: absolute;
  3021. background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
  3022. display: block;
  3023. z-index: 15;
  3024. top: 0;
  3025. right: auto;
  3026. bottom: auto;
  3027. left: 0;
  3028. height: 1px;
  3029. width: 100%;
  3030. transform-origin: 50% 0%;
  3031. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3032. }
  3033. .toolbar-bottom:after,
  3034. .ios .toolbar-bottom-ios:after,
  3035. .md .toolbar-bottom-md:after,
  3036. .aurora .toolbar-bottom-aurora:after {
  3037. content: '';
  3038. position: absolute;
  3039. right: 0;
  3040. width: 100%;
  3041. bottom: 100%;
  3042. height: 8px;
  3043. top: auto;
  3044. pointer-events: none;
  3045. background: var(--f7-toolbar-bottom-shadow-image);
  3046. transform: translate3d(0, 0, 0);
  3047. }
  3048. .toolbar-inner {
  3049. position: absolute;
  3050. left: 0;
  3051. top: 0;
  3052. width: 100%;
  3053. height: 100%;
  3054. display: flex;
  3055. justify-content: space-between;
  3056. box-sizing: border-box;
  3057. align-items: center;
  3058. align-content: center;
  3059. overflow: hidden;
  3060. padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
  3061. }
  3062. .views > .tabbar,
  3063. .views > .tabbar-labels {
  3064. z-index: 5001;
  3065. }
  3066. .tabbar a,
  3067. .tabbar-labels a {
  3068. color: var(--f7-tabbar-link-inactive-color);
  3069. }
  3070. .tabbar .tab-link:not(.tab-link-active),
  3071. .tabbar-labels .tab-link:not(.tab-link-active) {
  3072. background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
  3073. }
  3074. .tabbar .link,
  3075. .tabbar-labels .link {
  3076. line-height: 1.4;
  3077. }
  3078. .tabbar .tab-link,
  3079. .tabbar-labels .tab-link,
  3080. .tabbar .link,
  3081. .tabbar-labels .link {
  3082. height: 100%;
  3083. width: 100%;
  3084. box-sizing: border-box;
  3085. display: flex;
  3086. justify-content: center;
  3087. align-items: center;
  3088. flex-direction: column;
  3089. text-transform: var(--f7-tabbar-link-text-transform);
  3090. font-weight: var(--f7-tabbar-link-font-weight);
  3091. letter-spacing: var(--f7-tabbar-link-letter-spacing);
  3092. overflow: hidden;
  3093. }
  3094. .tabbar .tab-link-active,
  3095. .tabbar-labels .tab-link-active {
  3096. color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
  3097. background-color: var(--f7-tabbar-link-active-bg-color, transparent);
  3098. }
  3099. .tabbar i.icon,
  3100. .tabbar-labels i.icon {
  3101. font-size: var(--f7-tabbar-icon-size);
  3102. height: var(--f7-tabbar-icon-size);
  3103. line-height: var(--f7-tabbar-icon-size);
  3104. }
  3105. .tabbar-labels {
  3106. --f7-toolbar-height: var(--f7-tabbar-labels-height);
  3107. }
  3108. .tabbar-labels .tab-link,
  3109. .tabbar-labels .link {
  3110. height: 100%;
  3111. justify-content: space-between;
  3112. align-items: center;
  3113. }
  3114. .tabbar-labels .tabbar-label {
  3115. display: block;
  3116. line-height: 1;
  3117. margin: 0;
  3118. position: relative;
  3119. text-overflow: ellipsis;
  3120. white-space: nowrap;
  3121. font-size: var(--f7-tabbar-label-font-size);
  3122. text-transform: var(--f7-tabbar-label-text-transform);
  3123. font-weight: var(--f7-tabbar-label-font-weight);
  3124. letter-spacing: var(--f7-tabbar-label-letter-spacing);
  3125. }
  3126. @media (min-width: 768px) and (min-height: 600px) {
  3127. :root {
  3128. --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
  3129. --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
  3130. }
  3131. }
  3132. .tabbar-scrollable .toolbar-inner {
  3133. justify-content: flex-start;
  3134. overflow: auto;
  3135. -webkit-overflow-scrolling: touch;
  3136. }
  3137. .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
  3138. display: none !important;
  3139. width: 0 !important;
  3140. height: 0 !important;
  3141. -webkit-appearance: none;
  3142. opacity: 0 !important;
  3143. }
  3144. .tabbar-scrollable .tab-link,
  3145. .tabbar-scrollable .link {
  3146. width: auto;
  3147. flex-shrink: 0;
  3148. }
  3149. .toolbar-transitioning,
  3150. .navbar-transitioning + .toolbar,
  3151. .navbar-transitioning ~ * .toolbar {
  3152. transition-duration: var(--f7-toolbar-hide-show-transition-duration);
  3153. }
  3154. .toolbar-bottom ~ *,
  3155. .ios .toolbar-bottom-ios ~ *,
  3156. .md .toolbar-bottom-md ~ *,
  3157. .aurora .toolbar-bottom-aurora ~ * {
  3158. --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
  3159. }
  3160. .toolbar-bottom.tabbar-labels ~ *,
  3161. .ios .toolbar-bottom-ios.tabbar-labels ~ *,
  3162. .md .toolbar-bottom-md.tabbar-labels ~ *,
  3163. .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
  3164. --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
  3165. }
  3166. .toolbar-bottom.toolbar-hidden,
  3167. .ios .toolbar-bottom-ios.toolbar-hidden,
  3168. .md .toolbar-bottom-md.toolbar-hidden,
  3169. .aurora .toolbar-bottom-aurora.toolbar-hidden {
  3170. transform: translate3d(0, 100%, 0);
  3171. }
  3172. .toolbar-top ~ *,
  3173. .ios .toolbar-top-ios ~ *,
  3174. .md .toolbar-top-md ~ *,
  3175. .aurora .toolbar-top-aurora ~ * {
  3176. --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
  3177. }
  3178. .toolbar-top.tabbar-labels ~ *,
  3179. .ios .toolbar-top-ios.tabbar-labels ~ *,
  3180. .md .toolbar-top-md.tabbar-labels ~ *,
  3181. .aurora .toolbar-top-aurora.tabbar-labels ~ * {
  3182. --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
  3183. }
  3184. .toolbar-top.toolbar-hidden,
  3185. .ios .toolbar-top-ios.toolbar-hidden,
  3186. .md .toolbar-top-md.toolbar-hidden,
  3187. .aurora .toolbar-top-aurora.toolbar-hidden {
  3188. transform: translate3d(0, -100%, 0);
  3189. }
  3190. .navbar ~ .toolbar-top,
  3191. .navbars ~ .toolbar-top,
  3192. .ios .navbar ~ .toolbar-top-ios,
  3193. .ios .navbars ~ .toolbar-top-ios,
  3194. .md .navbar ~ .toolbar-top-md,
  3195. .aurora .navbar ~ .toolbar-top-aurora,
  3196. .navbar ~ * .toolbar-top,
  3197. .navbars ~ * .toolbar-top,
  3198. .ios .navbar ~ * .toolbar-top-ios,
  3199. .ios .navbars ~ * .toolbar-top-ios,
  3200. .md .navbar ~ * .toolbar-top-md,
  3201. .aurora .navbar ~ * .toolbar-top-aurora,
  3202. .navbar ~ .page:not(.no-navbar) .toolbar-top,
  3203. .navbars ~ .page:not(.no-navbar) .toolbar-top,
  3204. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
  3205. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
  3206. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
  3207. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
  3208. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  3209. }
  3210. .navbar ~ .toolbar-top.toolbar-hidden,
  3211. .navbars ~ .toolbar-top.toolbar-hidden,
  3212. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
  3213. .ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
  3214. .md .navbar ~ .toolbar-top-md.toolbar-hidden,
  3215. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
  3216. .navbar ~ * .toolbar-top.toolbar-hidden,
  3217. .navbars ~ * .toolbar-top.toolbar-hidden,
  3218. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
  3219. .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
  3220. .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
  3221. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
  3222. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
  3223. .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
  3224. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
  3225. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
  3226. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
  3227. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
  3228. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
  3229. }
  3230. .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
  3231. .navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
  3232. .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3233. .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3234. .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3235. .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  3236. .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
  3237. .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
  3238. .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3239. .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3240. .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3241. .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
  3242. .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
  3243. .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
  3244. .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3245. .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
  3246. .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
  3247. .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
  3248. transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
  3249. }
  3250. .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
  3251. .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  3252. .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
  3253. .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
  3254. .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  3255. .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  3256. .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  3257. .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  3258. transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
  3259. }
  3260. .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
  3261. .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
  3262. .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
  3263. .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
  3264. .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
  3265. .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
  3266. .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
  3267. transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
  3268. }
  3269. .ios .toolbar a.icon-only {
  3270. min-height: var(--f7-toolbar-height);
  3271. display: flex;
  3272. justify-content: center;
  3273. align-items: center;
  3274. margin: 0;
  3275. min-width: 44px;
  3276. }
  3277. .ios .tabbar-labels .tab-link,
  3278. .ios .tabbar-labels .link {
  3279. padding-top: 4px;
  3280. padding-bottom: 4px;
  3281. }
  3282. .ios .tabbar-labels .tab-link i + span,
  3283. .ios .tabbar-labels .link i + span {
  3284. margin: 0;
  3285. }
  3286. @media (min-width: 768px) and (min-height: 600px) {
  3287. .ios .tabbar .tab-link,
  3288. .ios .tabbar-labels .tab-link,
  3289. .ios .tabbar .link,
  3290. .ios .tabbar-labels .link {
  3291. justify-content: center;
  3292. flex-direction: row;
  3293. }
  3294. .ios .tabbar .tab-link i + span,
  3295. .ios .tabbar-labels .tab-link i + span,
  3296. .ios .tabbar .link i + span,
  3297. .ios .tabbar-labels .link i + span {
  3298. margin-left: 5px;
  3299. }
  3300. }
  3301. .ios .tabbar-scrollable .toolbar-inner {
  3302. justify-content: flex-start;
  3303. }
  3304. .ios .tabbar-scrollable .tab-link,
  3305. .ios .tabbar-scrollable .link {
  3306. padding: 0 8px;
  3307. }
  3308. .md .toolbar .link {
  3309. justify-content: center;
  3310. padding: 0 16px;
  3311. min-width: 48px;
  3312. }
  3313. .md .toolbar .link:before {
  3314. content: '';
  3315. width: 152%;
  3316. height: 152%;
  3317. position: absolute;
  3318. left: -26%;
  3319. top: -26%;
  3320. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  3321. background-repeat: no-repeat;
  3322. background-position: center;
  3323. background-size: 100% 100%;
  3324. opacity: 0;
  3325. pointer-events: none;
  3326. transition-duration: 600ms;
  3327. }
  3328. .md .toolbar .link.active-state:before {
  3329. opacity: 1;
  3330. transition-duration: 150ms;
  3331. }
  3332. .md .toolbar a.icon-only {
  3333. min-width: 0;
  3334. flex-shrink: 0;
  3335. }
  3336. .md .tabbar .tab-link,
  3337. .md .tabbar-labels .tab-link,
  3338. .md .tabbar .link,
  3339. .md .tabbar-labels .link {
  3340. padding-left: 0;
  3341. padding-right: 0;
  3342. }
  3343. .md .tabbar a.icon-only,
  3344. .md .tabbar-labels a.icon-only {
  3345. flex-shrink: initial;
  3346. }
  3347. .md .tabbar .tab-link,
  3348. .md .tabbar-labels .tab-link {
  3349. transition-duration: 300ms;
  3350. overflow: hidden;
  3351. position: relative;
  3352. }
  3353. .md .tabbar .tab-link-highlight,
  3354. .md .tabbar-labels .tab-link-highlight {
  3355. position: absolute;
  3356. height: 2px;
  3357. background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
  3358. transition-duration: 300ms;
  3359. left: 0;
  3360. }
  3361. .md .tabbar-labels .tab-link,
  3362. .md .tabbar-labels .link {
  3363. padding-top: 7px;
  3364. padding-bottom: 7px;
  3365. }
  3366. .md .tabbar-label {
  3367. max-width: 100%;
  3368. overflow: hidden;
  3369. line-height: 1.2;
  3370. }
  3371. .md .tabbar-scrollable .toolbar-inner {
  3372. overflow: auto;
  3373. }
  3374. .md .tabbar-scrollable .tab-link,
  3375. .md .tabbar-scrollable .link {
  3376. padding: 0 16px;
  3377. }
  3378. .aurora .toolbar a.icon-only {
  3379. min-height: var(--f7-toolbar-height);
  3380. display: flex;
  3381. justify-content: center;
  3382. align-items: center;
  3383. margin: 0;
  3384. }
  3385. .aurora .tabbar .toolbar-inner,
  3386. .aurora .tabbar-labels .toolbar-inner {
  3387. padding-left: 0;
  3388. padding-right: 0;
  3389. }
  3390. .aurora .tabbar .tab-link,
  3391. .aurora .tabbar-labels .tab-link,
  3392. .aurora .tabbar .link,
  3393. .aurora .tabbar-labels .link {
  3394. transition-duration: 200ms;
  3395. }
  3396. .aurora .tabbar-labels .tab-link,
  3397. .aurora .tabbar-labels .link {
  3398. padding-top: 5px;
  3399. padding-bottom: 5px;
  3400. }
  3401. .aurora .tabbar-labels .tab-link i + span,
  3402. .aurora .tabbar-labels .link i + span {
  3403. margin: 0;
  3404. }
  3405. .aurora .tabbar-scrollable .toolbar-inner {
  3406. justify-content: flex-start;
  3407. }
  3408. .aurora .tabbar-scrollable .tab-link,
  3409. .aurora .tabbar-scrollable .link {
  3410. padding: 0 16px;
  3411. }
  3412. /* === Subnavbar === */
  3413. :root {
  3414. /*
  3415. --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
  3416. --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
  3417. --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  3418. --f7-subnavbar-border-color: var(--f7-bars-border-color);
  3419. --f7-subnavbar-link-color: var(--f7-bars-link-color);
  3420. --f7-subnavbar-text-color: var(--f7-bars-text-color);
  3421. */
  3422. --f7-subnavbar-title-line-height: 1.2;
  3423. }
  3424. .ios {
  3425. --f7-subnavbar-height: 44px;
  3426. --f7-subnavbar-inner-padding-left: 8px;
  3427. --f7-subnavbar-inner-padding-right: 8px;
  3428. --f7-subnavbar-title-font-size: 34px;
  3429. --f7-subnavbar-title-font-weight: 700;
  3430. --f7-subnavbar-title-letter-spacing: -0.03em;
  3431. --f7-subnavbar-title-margin-left: 8px;
  3432. --f7-subnavbar-shadow-image: none;
  3433. /*
  3434. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  3435. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  3436. */
  3437. }
  3438. .md {
  3439. --f7-subnavbar-height: 48px;
  3440. --f7-subnavbar-inner-padding-left: 16px;
  3441. --f7-subnavbar-inner-padding-right: 16px;
  3442. --f7-subnavbar-title-font-size: 20px;
  3443. --f7-subnavbar-title-font-weight: 500;
  3444. --f7-subnavbar-title-letter-spacing: 0;
  3445. --f7-subnavbar-title-margin-left: 0px;
  3446. --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  3447. /*
  3448. --f7-subnavbar-link-height: var(--f7-subnavbar-height);
  3449. --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
  3450. */
  3451. }
  3452. .aurora {
  3453. --f7-subnavbar-height: 38px;
  3454. --f7-subnavbar-inner-padding-left: 16px;
  3455. --f7-subnavbar-inner-padding-right: 16px;
  3456. --f7-subnavbar-title-font-size: 26px;
  3457. --f7-subnavbar-title-font-weight: bold;
  3458. --f7-subnavbar-title-letter-spacing: -0.03em;
  3459. --f7-subnavbar-title-margin-left: 0px;
  3460. --f7-subnavbar-shadow-image: none;
  3461. --f7-subnavbar-link-height: auto;
  3462. --f7-subnavbar-link-line-height: inherit;
  3463. }
  3464. .subnavbar {
  3465. width: 100%;
  3466. position: absolute;
  3467. left: 0;
  3468. top: 0;
  3469. z-index: 600;
  3470. box-sizing: border-box;
  3471. display: flex;
  3472. justify-content: space-between;
  3473. align-items: center;
  3474. background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
  3475. background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
  3476. color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
  3477. }
  3478. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  3479. .ios-translucent-bars .subnavbar {
  3480. background-color: rgba(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  3481. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  3482. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  3483. }
  3484. }
  3485. .subnavbar .subnavbar-title {
  3486. position: relative;
  3487. overflow: hidden;
  3488. text-overflow: ellpsis;
  3489. white-space: nowrap;
  3490. font-size: var(--f7-subnavbar-title-font-size);
  3491. font-weight: var(--f7-subnavbar-title-font-weight);
  3492. text-align: left;
  3493. display: inline-block;
  3494. line-height: var(--f7-subnavbar-title-line-height);
  3495. letter-spacing: var(--f7-subnavbar-title-letter-spacing);
  3496. margin-left: var(--f7-subnavbar-title-margin-left);
  3497. }
  3498. .subnavbar .left,
  3499. .subnavbar .right {
  3500. flex-shrink: 0;
  3501. display: flex;
  3502. justify-content: flex-start;
  3503. align-items: center;
  3504. }
  3505. .subnavbar .right:first-child {
  3506. position: absolute;
  3507. height: 100%;
  3508. }
  3509. .subnavbar a {
  3510. color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  3511. }
  3512. .subnavbar a.link {
  3513. line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
  3514. height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
  3515. }
  3516. .subnavbar a.icon-only {
  3517. min-width: var(--f7-subnavbar-height);
  3518. }
  3519. .subnavbar.no-hairline:after,
  3520. .subnavbar.no-border:after {
  3521. display: none !important;
  3522. }
  3523. .subnavbar.no-shadow:before,
  3524. .subnavbar.navbar-hidden:before {
  3525. display: none !important;
  3526. }
  3527. .subnavbar:after,
  3528. .subnavbar:before {
  3529. -webkit-backface-visibility: hidden;
  3530. backface-visibility: hidden;
  3531. }
  3532. .subnavbar:after {
  3533. content: '';
  3534. position: absolute;
  3535. background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
  3536. display: block;
  3537. z-index: 15;
  3538. top: auto;
  3539. right: auto;
  3540. bottom: 0;
  3541. left: 0;
  3542. height: 1px;
  3543. width: 100%;
  3544. transform-origin: 50% 100%;
  3545. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3546. }
  3547. .subnavbar:before {
  3548. content: '';
  3549. position: absolute;
  3550. right: 0;
  3551. width: 100%;
  3552. top: 100%;
  3553. bottom: auto;
  3554. height: 8px;
  3555. pointer-events: none;
  3556. background: var(--f7-subnavbar-shadow-image);
  3557. }
  3558. .subnavbar-inner {
  3559. width: 100%;
  3560. height: 100%;
  3561. display: flex;
  3562. align-items: center;
  3563. box-sizing: border-box;
  3564. justify-content: space-between;
  3565. overflow: hidden;
  3566. padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
  3567. }
  3568. .subnavbar-inner.stacked {
  3569. display: none;
  3570. }
  3571. .navbar .subnavbar {
  3572. top: 100%;
  3573. }
  3574. .views > .subnavbar,
  3575. .view > .subnavbar,
  3576. .page > .subnavbar {
  3577. position: absolute;
  3578. }
  3579. .navbar ~ * .subnavbar,
  3580. .navbars ~ * .subnavbar,
  3581. .page-with-subnavbar .navbar ~ .subnavbar,
  3582. .page-with-subnavbar .navbar ~ * .subnavbar,
  3583. .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  3584. .navbar ~ .subnavbar,
  3585. .navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
  3586. .navbars ~ .subnavbar {
  3587. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  3588. }
  3589. .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
  3590. .navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
  3591. .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
  3592. .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
  3593. .navbar .title-large ~ .subnavbar {
  3594. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  3595. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  3596. }
  3597. .page-with-subnavbar,
  3598. .subnavbar ~ * {
  3599. --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
  3600. }
  3601. .ios .subnavbar {
  3602. height: calc(var(--f7-subnavbar-height) + 1px);
  3603. margin-top: -1px;
  3604. padding-top: 1px;
  3605. }
  3606. .ios .subnavbar .title {
  3607. align-self: flex-start;
  3608. flex-shrink: 10;
  3609. }
  3610. .ios .subnavbar .left a + a,
  3611. .ios .subnavbar .right a + a {
  3612. margin-left: 16px;
  3613. }
  3614. .ios .subnavbar .left {
  3615. margin-right: 10px;
  3616. }
  3617. .ios .subnavbar .right {
  3618. margin-left: 10px;
  3619. }
  3620. .ios .subnavbar .right:first-child {
  3621. right: 8px;
  3622. }
  3623. .ios .subnavbar a.link {
  3624. justify-content: flex-start;
  3625. }
  3626. .ios .subnavbar a.icon-only {
  3627. justify-content: center;
  3628. margin: 0;
  3629. }
  3630. .md .subnavbar {
  3631. height: var(--f7-subnavbar-height);
  3632. }
  3633. .md .subnavbar .right {
  3634. margin-left: auto;
  3635. }
  3636. .md .subnavbar .right:first-child {
  3637. right: 16px;
  3638. }
  3639. .md .subnavbar a.link {
  3640. justify-content: center;
  3641. padding: 0 16px;
  3642. }
  3643. .md .subnavbar a.link:before {
  3644. content: '';
  3645. width: 152%;
  3646. height: 152%;
  3647. position: absolute;
  3648. left: -26%;
  3649. top: -26%;
  3650. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  3651. background-repeat: no-repeat;
  3652. background-position: center;
  3653. background-size: 100% 100%;
  3654. opacity: 0;
  3655. pointer-events: none;
  3656. transition-duration: 600ms;
  3657. }
  3658. .md .subnavbar a.link.active-state:before {
  3659. opacity: 1;
  3660. transition-duration: 150ms;
  3661. }
  3662. .md .subnavbar a.icon-only {
  3663. flex-shrink: 0;
  3664. }
  3665. .md .subnavbar-inner > a.link:first-child {
  3666. margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
  3667. }
  3668. .md .subnavbar-inner > a.link:last-child {
  3669. margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
  3670. }
  3671. .aurora .subnavbar {
  3672. height: calc(var(--f7-subnavbar-height) + 1px);
  3673. margin-top: -1px;
  3674. padding-top: 1px;
  3675. }
  3676. .aurora .subnavbar .title {
  3677. align-self: flex-start;
  3678. flex-shrink: 10;
  3679. }
  3680. .aurora .subnavbar .left a + a,
  3681. .aurora .subnavbar .right a + a {
  3682. margin-left: 10px;
  3683. }
  3684. .aurora .subnavbar .left {
  3685. margin-right: 10px;
  3686. }
  3687. .aurora .subnavbar .right {
  3688. margin-left: 10px;
  3689. }
  3690. .aurora .subnavbar .right:first-child {
  3691. right: 16px;
  3692. }
  3693. .aurora .subnavbar a.link {
  3694. justify-content: flex-start;
  3695. }
  3696. .aurora .subnavbar a.icon-only {
  3697. justify-content: center;
  3698. margin: 0;
  3699. }
  3700. /* === Content Block === */
  3701. :root {
  3702. --f7-block-padding-horizontal: 16px;
  3703. --f7-block-padding-vertical: 16px;
  3704. --f7-block-font-size: inherit;
  3705. --f7-block-text-color: inherit;
  3706. --f7-block-header-margin: 10px;
  3707. --f7-block-footer-margin: 10px;
  3708. --f7-block-header-font-size: 14px;
  3709. --f7-block-footer-font-size: 14px;
  3710. --f7-block-title-text-transform: none;
  3711. --f7-block-title-white-space: nowrap;
  3712. --f7-block-title-medium-text-transform: none;
  3713. --f7-block-title-large-text-transform: none;
  3714. --f7-block-inset-side-margin: 16px;
  3715. --f7-block-title-medium-text-color: #000;
  3716. --f7-block-title-large-text-color: #000;
  3717. --f7-block-strong-bg-color: #fff;
  3718. }
  3719. :root .theme-dark,
  3720. :root.theme-dark {
  3721. --f7-block-title-text-color: #fff;
  3722. --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
  3723. --f7-block-title-medium-text-color: #fff;
  3724. --f7-block-title-large-text-color: #fff;
  3725. --f7-block-strong-bg-color: #1c1c1d;
  3726. }
  3727. .ios {
  3728. --f7-block-margin-vertical: 35px;
  3729. --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
  3730. --f7-block-title-text-color: #000;
  3731. --f7-block-title-font-size: 16px;
  3732. --f7-block-title-font-weight: 600;
  3733. --f7-block-title-line-height: 20px;
  3734. --f7-block-title-margin-bottom: 10px;
  3735. --f7-block-title-medium-font-size: 22px;
  3736. --f7-block-title-medium-font-weight: bold;
  3737. --f7-block-title-medium-line-height: 1.4;
  3738. --f7-block-title-large-font-size: 30px;
  3739. --f7-block-title-large-font-weight: bold;
  3740. --f7-block-title-large-line-height: 1.3;
  3741. --f7-block-inset-border-radius: 8px;
  3742. --f7-block-strong-text-color: #000;
  3743. --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
  3744. --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
  3745. }
  3746. .ios .theme-dark,
  3747. .ios.theme-dark {
  3748. --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
  3749. --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
  3750. --f7-block-strong-text-color: #fff;
  3751. }
  3752. .md {
  3753. --f7-block-margin-vertical: 32px;
  3754. --f7-block-strong-text-color: inherit;
  3755. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3756. --f7-block-title-font-size: inherit;
  3757. --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
  3758. --f7-block-title-font-weight: 500;
  3759. --f7-block-title-line-height: 16px;
  3760. --f7-block-title-margin-bottom: 16px;
  3761. --f7-block-title-medium-font-size: 24px;
  3762. --f7-block-title-medium-font-weight: 500;
  3763. --f7-block-title-medium-line-height: 1.3;
  3764. --f7-block-title-large-font-size: 34px;
  3765. --f7-block-title-large-font-weight: 500;
  3766. --f7-block-title-large-line-height: 1.2;
  3767. --f7-block-inset-border-radius: 4px;
  3768. --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
  3769. --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
  3770. }
  3771. .md .theme-dark,
  3772. .md.theme-dark {
  3773. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  3774. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  3775. }
  3776. .aurora {
  3777. --f7-block-margin-vertical: 15px;
  3778. --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
  3779. --f7-block-title-font-size: inherit;
  3780. --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
  3781. --f7-block-title-font-weight: 600;
  3782. --f7-block-title-line-height: 1.5;
  3783. --f7-block-title-margin-bottom: 5px;
  3784. --f7-block-title-medium-font-size: 20px;
  3785. --f7-block-title-medium-font-weight: 600;
  3786. --f7-block-title-medium-line-height: 1.4;
  3787. --f7-block-title-large-font-size: 28px;
  3788. --f7-block-title-large-font-weight: bold;
  3789. --f7-block-title-large-line-height: 1.3;
  3790. --f7-block-inset-border-radius: 4px;
  3791. --f7-block-strong-text-color: inherit;
  3792. --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
  3793. --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
  3794. }
  3795. .aurora .theme-dark,
  3796. .aurora.theme-dark {
  3797. --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
  3798. --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
  3799. --f7-block-strong-text-color: #fff;
  3800. }
  3801. .block {
  3802. box-sizing: border-box;
  3803. position: relative;
  3804. z-index: 1;
  3805. color: var(--f7-block-text-color);
  3806. margin: var(--f7-block-margin-vertical) 0;
  3807. padding-top: 0;
  3808. padding-bottom: 0;
  3809. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3810. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3811. font-size: var(--f7-block-font-size);
  3812. }
  3813. .block.no-hairlines:before,
  3814. .block.no-hairlines ul:before,
  3815. .md .block.no-hairlines-md:before,
  3816. .md .block.no-hairlines-md ul:before,
  3817. .ios .block.no-hairlines-ios:before,
  3818. .ios .block.no-hairlines-ios ul:before,
  3819. .aurora .block.no-hairlines-aurora:before,
  3820. .aurora .block.no-hairlines-aurora ul:before,
  3821. .block.no-hairlines:after,
  3822. .block.no-hairlines ul:after,
  3823. .md .block.no-hairlines-md:after,
  3824. .md .block.no-hairlines-md ul:after,
  3825. .ios .block.no-hairlines-ios:after,
  3826. .ios .block.no-hairlines-ios ul:after,
  3827. .aurora .block.no-hairlines-aurora:after,
  3828. .aurora .block.no-hairlines-aurora ul:after {
  3829. display: none !important;
  3830. }
  3831. .block.no-hairline-top:before,
  3832. .block.no-hairline-top ul:before,
  3833. .md .block.no-hairline-top-md:before,
  3834. .md .block.no-hairline-top-md ul:before,
  3835. .ios .block.no-hairline-top-ios:before,
  3836. .ios .block.no-hairline-top-ios ul:before,
  3837. .aurora .block.no-hairline-top-aurora:before,
  3838. .aurora .block.no-hairline-top-aurora ul:before {
  3839. display: none !important;
  3840. }
  3841. .block.no-hairline-bottom:after,
  3842. .block.no-hairline-bottom ul:after,
  3843. .md .block.no-hairline-bottom-md:after,
  3844. .md .block.no-hairline-bottom-md ul:after,
  3845. .ios .block.no-hairline-bottom-ios:after,
  3846. .ios .block.no-hairline-bottom-ios ul:after,
  3847. .aurora .block.no-hairline-bottom-aurora:after,
  3848. .aurora .block.no-hairline-bottom-aurora ul:after {
  3849. display: none !important;
  3850. }
  3851. .block > h1:first-child,
  3852. .block > h2:first-child,
  3853. .block > h3:first-child,
  3854. .block > h4:first-child,
  3855. .block > p:first-child {
  3856. margin-top: 0;
  3857. }
  3858. .block > h1:last-child,
  3859. .block > h2:last-child,
  3860. .block > h3:last-child,
  3861. .block > h4:last-child,
  3862. .block > p:last-child {
  3863. margin-bottom: 0;
  3864. }
  3865. .block-strong {
  3866. color: var(--f7-block-strong-text-color);
  3867. padding-top: var(--f7-block-padding-vertical);
  3868. padding-bottom: var(--f7-block-padding-vertical);
  3869. background-color: var(--f7-block-strong-bg-color);
  3870. }
  3871. .block-strong:before {
  3872. content: '';
  3873. position: absolute;
  3874. background-color: var(--f7-block-strong-border-color);
  3875. display: block;
  3876. z-index: 15;
  3877. top: 0;
  3878. right: auto;
  3879. bottom: auto;
  3880. left: 0;
  3881. height: 1px;
  3882. width: 100%;
  3883. transform-origin: 50% 0%;
  3884. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3885. }
  3886. .block-strong:after {
  3887. content: '';
  3888. position: absolute;
  3889. background-color: var(--f7-block-strong-border-color);
  3890. display: block;
  3891. z-index: 15;
  3892. top: auto;
  3893. right: auto;
  3894. bottom: 0;
  3895. left: 0;
  3896. height: 1px;
  3897. width: 100%;
  3898. transform-origin: 50% 100%;
  3899. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  3900. }
  3901. .block-title {
  3902. position: relative;
  3903. overflow: hidden;
  3904. margin: 0;
  3905. white-space: var(--f7-block-title-white-space);
  3906. text-overflow: ellipsis;
  3907. text-transform: var(--f7-block-title-text-transform);
  3908. color: var(--f7-block-title-text-color);
  3909. font-size: var(--f7-block-title-font-size, inherit);
  3910. font-weight: var(--f7-block-title-font-weight);
  3911. line-height: var(--f7-block-title-line-height);
  3912. margin-top: var(--f7-block-margin-vertical);
  3913. margin-bottom: var(--f7-block-title-margin-bottom);
  3914. margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3915. margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3916. }
  3917. .block-title + .list,
  3918. .block-title + .block,
  3919. .block-title + .card,
  3920. .block-title + .timeline,
  3921. .block-title + .block-header {
  3922. margin-top: 0px;
  3923. }
  3924. .block-title-medium {
  3925. font-size: var(--f7-block-title-medium-font-size);
  3926. text-transform: var(--f7-block-title-medium-text-transform);
  3927. color: var(--f7-block-title-medium-text-color);
  3928. font-weight: var(--f7-block-title-medium-font-weight);
  3929. line-height: var(--f7-block-title-medium-line-height);
  3930. }
  3931. .block-title-large {
  3932. font-size: var(--f7-block-title-large-font-size);
  3933. text-transform: var(--f7-block-title-large-text-transform);
  3934. color: var(--f7-block-title-large-text-color);
  3935. font-weight: var(--f7-block-title-large-font-weight);
  3936. line-height: var(--f7-block-title-large-line-height);
  3937. }
  3938. .block > .block-title:first-child,
  3939. .list > .block-title:first-child {
  3940. margin-top: 0;
  3941. margin-left: 0;
  3942. margin-right: 0;
  3943. }
  3944. .block-header {
  3945. color: var(--f7-block-header-text-color);
  3946. font-size: var(--f7-block-header-font-size);
  3947. margin-bottom: var(--f7-block-header-margin);
  3948. margin-top: var(--f7-block-margin-vertical);
  3949. }
  3950. .block-header + .list,
  3951. .block-header + .block,
  3952. .block-header + .card,
  3953. .block-header + .timeline {
  3954. margin-top: var(--f7-block-header-margin);
  3955. }
  3956. .block-footer {
  3957. color: var(--f7-block-footer-text-color);
  3958. font-size: var(--f7-block-footer-font-size);
  3959. margin-top: var(--f7-block-footer-margin);
  3960. margin-bottom: var(--f7-block-margin-vertical);
  3961. }
  3962. .block-footer,
  3963. .block-header {
  3964. padding-top: 0;
  3965. padding-bottom: 0;
  3966. padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
  3967. padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
  3968. }
  3969. .block-footer ul:first-child,
  3970. .block-header ul:first-child,
  3971. .block-footer p:first-child,
  3972. .block-header p:first-child,
  3973. .block-footer h1:first-child,
  3974. .block-header h1:first-child,
  3975. .block-footer h2:first-child,
  3976. .block-header h2:first-child,
  3977. .block-footer h3:first-child,
  3978. .block-header h3:first-child,
  3979. .block-footer h4:first-child,
  3980. .block-header h4:first-child {
  3981. margin-top: 0;
  3982. }
  3983. .block-footer ul:last-child,
  3984. .block-header ul:last-child,
  3985. .block-footer p:last-child,
  3986. .block-header p:last-child,
  3987. .block-footer h1:last-child,
  3988. .block-header h1:last-child,
  3989. .block-footer h2:last-child,
  3990. .block-header h2:last-child,
  3991. .block-footer h3:last-child,
  3992. .block-header h3:last-child,
  3993. .block-footer h4:last-child,
  3994. .block-header h4:last-child {
  3995. margin-bottom: 0;
  3996. }
  3997. .block-footer ul:first-child:last-child,
  3998. .block-header ul:first-child:last-child,
  3999. .block-footer p:first-child:last-child,
  4000. .block-header p:first-child:last-child,
  4001. .block-footer h1:first-child:last-child,
  4002. .block-header h1:first-child:last-child,
  4003. .block-footer h2:first-child:last-child,
  4004. .block-header h2:first-child:last-child,
  4005. .block-footer h3:first-child:last-child,
  4006. .block-header h3:first-child:last-child,
  4007. .block-footer h4:first-child:last-child,
  4008. .block-header h4:first-child:last-child {
  4009. margin-top: 0;
  4010. margin-bottom: 0;
  4011. }
  4012. .list .block-header,
  4013. .block .block-header,
  4014. .card .block-header,
  4015. .timeline .block-header {
  4016. margin-top: 0;
  4017. }
  4018. .list .block-footer,
  4019. .block .block-footer,
  4020. .card .block-footer,
  4021. .timeline .block-footer {
  4022. margin-bottom: 0;
  4023. }
  4024. .list + .block-footer,
  4025. .block + .block-footer,
  4026. .card + .block-footer,
  4027. .timeline + .block-footer {
  4028. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  4029. }
  4030. .block + .block-footer {
  4031. margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
  4032. margin-bottom: var(--f7-block-margin-vertical);
  4033. }
  4034. .block .block-header,
  4035. .block .block-footer {
  4036. padding: 0;
  4037. }
  4038. .block.inset {
  4039. border-radius: var(--f7-block-inset-border-radius);
  4040. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4041. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4042. --f7-safe-area-left: 0px;
  4043. --f7-safe-area-right: 0px;
  4044. }
  4045. .block-strong.inset:before,
  4046. .block-strong.inset:after {
  4047. display: none !important;
  4048. }
  4049. @media (min-width: 480px) {
  4050. .block.xsmall-inset {
  4051. border-radius: var(--f7-block-inset-border-radius);
  4052. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4053. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4054. --f7-safe-area-left: 0px;
  4055. --f7-safe-area-right: 0px;
  4056. }
  4057. .block-strong.xsmall-inset:before,
  4058. .block-strong.xsmall-inset:after {
  4059. display: none !important;
  4060. }
  4061. }
  4062. @media (min-width: 568px) {
  4063. .block.small-inset {
  4064. border-radius: var(--f7-block-inset-border-radius);
  4065. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4066. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4067. --f7-safe-area-left: 0px;
  4068. --f7-safe-area-right: 0px;
  4069. }
  4070. .block-strong.small-inset:before,
  4071. .block-strong.small-inset:after {
  4072. display: none !important;
  4073. }
  4074. }
  4075. @media (min-width: 768px) {
  4076. .block.medium-inset {
  4077. border-radius: var(--f7-block-inset-border-radius);
  4078. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4079. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4080. --f7-safe-area-left: 0px;
  4081. --f7-safe-area-right: 0px;
  4082. }
  4083. .block-strong.medium-inset:before,
  4084. .block-strong.medium-inset:after {
  4085. display: none !important;
  4086. }
  4087. }
  4088. @media (min-width: 1024px) {
  4089. .block.large-inset {
  4090. border-radius: var(--f7-block-inset-border-radius);
  4091. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4092. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4093. --f7-safe-area-left: 0px;
  4094. --f7-safe-area-right: 0px;
  4095. }
  4096. .block-strong.large-inset:before,
  4097. .block-strong.large-inset:after {
  4098. display: none !important;
  4099. }
  4100. }
  4101. @media (min-width: 1200px) {
  4102. .block.xlarge-inset {
  4103. border-radius: var(--f7-block-inset-border-radius);
  4104. margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
  4105. margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
  4106. --f7-safe-area-left: 0px;
  4107. --f7-safe-area-right: 0px;
  4108. }
  4109. .block-strong.xlarge-inset:before,
  4110. .block-strong.xlarge-inset:after {
  4111. display: none !important;
  4112. }
  4113. }
  4114. /* === List View === */
  4115. :root {
  4116. --f7-list-inset-side-margin: 16px;
  4117. --f7-list-item-cell-margin: 16px;
  4118. --f7-list-item-padding-horizontal: 16px;
  4119. --f7-list-media-item-padding-horizontal: 16px;
  4120. --f7-list-item-text-max-lines: 2;
  4121. --f7-list-chevron-icon-font-size: 20px;
  4122. --f7-list-item-title-font-size: inherit;
  4123. --f7-list-item-title-font-weight: 400;
  4124. --f7-list-item-title-text-color: inherit;
  4125. --f7-list-item-title-line-height: inherit;
  4126. --f7-list-item-title-white-space: nowrap;
  4127. --f7-list-item-subtitle-font-weight: 400;
  4128. --f7-list-item-subtitle-text-color: inherit;
  4129. --f7-list-item-subtitle-line-height: inherit;
  4130. --f7-list-item-text-font-weight: 400;
  4131. --f7-list-item-after-font-weight: 400;
  4132. --f7-list-item-header-text-color: inherit;
  4133. --f7-list-item-header-font-size: 12px;
  4134. --f7-list-item-header-font-weight: 400;
  4135. --f7-list-item-header-line-height: 1.2;
  4136. --f7-list-item-footer-font-size: 12px;
  4137. --f7-list-item-footer-font-weight: 400;
  4138. --f7-list-item-footer-line-height: 1.2;
  4139. --f7-list-button-font-size: inherit;
  4140. --f7-list-button-font-weight: 400;
  4141. --f7-list-item-divider-line-height: inherit;
  4142. --f7-list-group-title-line-height: inherit;
  4143. --f7-list-bg-color: #fff;
  4144. --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
  4145. }
  4146. :root .theme-dark,
  4147. :root.theme-dark {
  4148. --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
  4149. --f7-list-bg-color: #1c1c1d;
  4150. --f7-list-border-color: rgba(255, 255, 255, 0.15);
  4151. --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
  4152. --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
  4153. --f7-list-item-divider-bg-color: #232323;
  4154. --f7-list-group-title-bg-color: #232323;
  4155. --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
  4156. }
  4157. .ios {
  4158. --f7-list-in-list-padding-left: 30px;
  4159. --f7-list-inset-border-radius: 8px;
  4160. --f7-list-margin-vertical: 35px;
  4161. --f7-list-font-size: 17px;
  4162. --f7-list-chevron-icon-area: 20px;
  4163. --f7-list-border-color: rgba(0, 0, 0, 0.22);
  4164. --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
  4165. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  4166. --f7-list-item-subtitle-font-size: 15px;
  4167. --f7-list-item-text-font-size: 15px;
  4168. --f7-list-item-text-line-height: 21px;
  4169. --f7-list-item-after-font-size: inherit;
  4170. --f7-list-item-after-line-height: inherit;
  4171. --f7-list-item-after-padding: 5px;
  4172. --f7-list-item-min-height: 44px;
  4173. --f7-list-item-media-margin: 16px;
  4174. --f7-list-item-media-icons-margin: 5px;
  4175. --f7-list-item-padding-vertical: 8px;
  4176. --f7-list-media-item-padding-vertical: 10px;
  4177. --f7-list-media-item-title-font-weight: 600;
  4178. /*
  4179. --f7-list-button-text-color: var(--f7-theme-color);
  4180. */
  4181. --f7-list-button-text-align: center;
  4182. --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
  4183. --f7-list-item-divider-height: 31px;
  4184. --f7-list-item-divider-font-size: inherit;
  4185. --f7-list-item-divider-font-weight: 400;
  4186. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  4187. --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
  4188. --f7-list-group-title-height: 31px;
  4189. --f7-list-group-title-font-size: inherit;
  4190. --f7-list-group-title-font-weight: 400;
  4191. --f7-list-group-title-bg-color: #f7f7f7;
  4192. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
  4193. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
  4194. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
  4195. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
  4196. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
  4197. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.15);
  4198. }
  4199. .ios .theme-dark,
  4200. .ios.theme-dark {
  4201. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
  4202. --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
  4203. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
  4204. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
  4205. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
  4206. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
  4207. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
  4208. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.08);
  4209. }
  4210. .md {
  4211. --f7-list-in-list-padding-left: 40px;
  4212. --f7-list-inset-border-radius: 4px;
  4213. --f7-list-margin-vertical: 32px;
  4214. --f7-list-font-size: 16px;
  4215. --f7-list-chevron-icon-area: 26px;
  4216. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  4217. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  4218. --f7-list-item-subtitle-font-size: 14px;
  4219. --f7-list-item-text-font-size: 14px;
  4220. --f7-list-item-text-line-height: 20px;
  4221. --f7-list-item-after-font-size: 14px;
  4222. --f7-list-item-after-line-height: inherit;
  4223. --f7-list-item-after-padding: 8px;
  4224. --f7-list-item-min-height: 48px;
  4225. --f7-list-item-media-margin: 16px;
  4226. --f7-list-item-media-icons-margin: 8px;
  4227. --f7-list-item-padding-vertical: 8px;
  4228. --f7-list-media-item-padding-vertical: 14px;
  4229. /*
  4230. --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
  4231. */
  4232. --f7-list-button-text-align: left;
  4233. --f7-list-button-border-color: transparent;
  4234. --f7-list-item-divider-height: 48px;
  4235. --f7-list-item-divider-font-size: 14px;
  4236. --f7-list-item-divider-font-weight: 400;
  4237. --f7-list-item-divider-bg-color: #f4f4f4;
  4238. --f7-list-item-divider-border-color: transparent;
  4239. --f7-list-group-title-height: 48px;
  4240. --f7-list-group-title-font-size: 14px;
  4241. --f7-list-group-title-font-weight: 400;
  4242. --f7-list-group-title-bg-color: #f4f4f4;
  4243. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4244. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
  4245. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
  4246. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
  4247. --f7-list-button-text-color: #212121;
  4248. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4249. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
  4250. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
  4251. }
  4252. .md .theme-dark,
  4253. .md.theme-dark {
  4254. --f7-list-button-text-color: #fff;
  4255. --f7-list-item-divider-text-color: #fff;
  4256. --f7-list-group-title-text-color: #fff;
  4257. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4258. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4259. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  4260. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  4261. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  4262. }
  4263. .aurora {
  4264. --f7-list-in-list-padding-left: 16px;
  4265. --f7-list-inset-border-radius: 4px;
  4266. --f7-list-margin-vertical: 15px;
  4267. --f7-list-font-size: 14px;
  4268. --f7-list-chevron-icon-area: 15px;
  4269. --f7-list-chevron-icon-font-size: 16px;
  4270. --f7-list-border-color: rgba(0, 0, 0, 0.12);
  4271. --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
  4272. --f7-list-item-title-line-height: 1.3;
  4273. --f7-list-item-subtitle-font-size: 14px;
  4274. --f7-list-item-subtitle-line-height: 1.3;
  4275. --f7-list-item-text-font-size: 12px;
  4276. --f7-list-item-text-line-height: 16px;
  4277. --f7-list-item-after-font-size: 13px;
  4278. --f7-list-item-after-line-height: 1.2;
  4279. --f7-list-item-after-padding: 5px;
  4280. --f7-list-item-min-height: 32px;
  4281. --f7-list-item-media-margin: 10px;
  4282. --f7-list-item-media-icons-margin: 5px;
  4283. --f7-list-item-padding-vertical: 5px;
  4284. --f7-list-media-item-padding-vertical: 5px;
  4285. --f7-list-media-item-title-font-weight: 600;
  4286. /*
  4287. --f7-list-button-text-color: var(--f7-theme-color);
  4288. */
  4289. --f7-list-button-text-align: center;
  4290. --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
  4291. --f7-list-item-divider-height: 19px;
  4292. --f7-list-item-divider-font-size: inherit;
  4293. --f7-list-item-divider-font-weight: 500;
  4294. --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
  4295. --f7-list-item-divider-border-color: transparent;
  4296. --f7-list-group-title-height: 19px;
  4297. --f7-list-group-title-font-size: inherit;
  4298. --f7-list-group-title-font-weight: 500;
  4299. --f7-list-group-title-bg-color: #f7f7f7;
  4300. --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4301. --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
  4302. --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
  4303. --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
  4304. --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
  4305. --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  4306. --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
  4307. --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
  4308. --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
  4309. }
  4310. .aurora .theme-dark,
  4311. .aurora.theme-dark {
  4312. --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
  4313. --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
  4314. --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
  4315. --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
  4316. --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
  4317. --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4318. --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  4319. --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
  4320. --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
  4321. }
  4322. :root {
  4323. --f7-list-chevron-icon-left: 'chevron_left';
  4324. --f7-list-chevron-icon-right: 'chevron_right';
  4325. }
  4326. .aurora {
  4327. --f7-list-chevron-icon-left: 'chevron_left_aurora';
  4328. --f7-list-chevron-icon-right: 'chevron_right_aurora';
  4329. }
  4330. .list {
  4331. position: relative;
  4332. z-index: 1;
  4333. font-size: var(--f7-list-font-size);
  4334. margin: var(--f7-list-margin-vertical) 0;
  4335. }
  4336. .list ul {
  4337. list-style: none;
  4338. margin: 0;
  4339. padding: 0;
  4340. position: relative;
  4341. background: var(--f7-list-bg-color);
  4342. }
  4343. .list ul:before {
  4344. content: '';
  4345. position: absolute;
  4346. background-color: var(--f7-list-border-color);
  4347. display: block;
  4348. z-index: 15;
  4349. top: 0;
  4350. right: auto;
  4351. bottom: auto;
  4352. left: 0;
  4353. height: 1px;
  4354. width: 100%;
  4355. transform-origin: 50% 0%;
  4356. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4357. }
  4358. .list ul:after {
  4359. content: '';
  4360. position: absolute;
  4361. background-color: var(--f7-list-border-color);
  4362. display: block;
  4363. z-index: 15;
  4364. top: auto;
  4365. right: auto;
  4366. bottom: 0;
  4367. left: 0;
  4368. height: 1px;
  4369. width: 100%;
  4370. transform-origin: 50% 100%;
  4371. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4372. }
  4373. .list ul ul {
  4374. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
  4375. }
  4376. .list ul ul:before,
  4377. .list ul ul:after {
  4378. display: none !important;
  4379. }
  4380. .list li {
  4381. position: relative;
  4382. box-sizing: border-box;
  4383. }
  4384. .list .item-media {
  4385. display: flex;
  4386. flex-shrink: 0;
  4387. flex-wrap: nowrap;
  4388. align-items: center;
  4389. box-sizing: border-box;
  4390. padding-bottom: var(--f7-list-item-padding-vertical);
  4391. padding-top: var(--f7-list-item-padding-vertical);
  4392. }
  4393. .list .item-media + .item-inner {
  4394. margin-left: var(--f7-list-item-media-margin);
  4395. }
  4396. .list .item-media i + i,
  4397. .list .item-media i + img {
  4398. margin-left: var(--f7-list-item-media-icons-margin);
  4399. }
  4400. .list .item-after {
  4401. padding-left: var(--f7-list-item-after-padding);
  4402. }
  4403. .list .item-inner {
  4404. position: relative;
  4405. width: 100%;
  4406. min-width: 0;
  4407. display: flex;
  4408. justify-content: space-between;
  4409. box-sizing: border-box;
  4410. align-items: center;
  4411. align-self: stretch;
  4412. padding-top: var(--f7-list-item-padding-vertical);
  4413. padding-bottom: var(--f7-list-item-padding-vertical);
  4414. min-height: var(--f7-list-item-min-height);
  4415. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4416. }
  4417. .list .item-title {
  4418. min-width: 0;
  4419. flex-shrink: 1;
  4420. white-space: var(--f7-list-item-title-white-space);
  4421. position: relative;
  4422. overflow: hidden;
  4423. text-overflow: ellipsis;
  4424. max-width: 100%;
  4425. font-size: var(--f7-list-item-title-font-size);
  4426. font-weight: var(--f7-list-item-title-font-weight);
  4427. color: var(--f7-list-item-title-text-color);
  4428. line-height: var(--f7-list-item-title-line-height);
  4429. }
  4430. .list .item-after {
  4431. white-space: nowrap;
  4432. flex-shrink: 0;
  4433. display: flex;
  4434. font-size: var(--f7-list-item-after-font-size);
  4435. font-weight: var(--f7-list-item-after-font-weight);
  4436. color: var(--f7-list-item-after-text-color);
  4437. line-height: var(--f7-list-item-after-line-height);
  4438. margin-left: auto;
  4439. }
  4440. .list .item-header,
  4441. .list .item-footer {
  4442. white-space: normal;
  4443. }
  4444. .list .item-header {
  4445. color: var(--f7-list-item-header-text-color);
  4446. font-size: var(--f7-list-item-header-font-size);
  4447. font-weight: var(--f7-list-item-header-font-weight);
  4448. line-height: var(--f7-list-item-header-line-height);
  4449. }
  4450. .list .item-footer {
  4451. color: var(--f7-list-item-footer-text-color);
  4452. font-size: var(--f7-list-item-footer-font-size);
  4453. font-weight: var(--f7-list-item-footer-font-weight);
  4454. line-height: var(--f7-list-item-footer-line-height);
  4455. }
  4456. .list .item-link,
  4457. .list .list-button {
  4458. transition-duration: 300ms;
  4459. transition-property: background-color;
  4460. display: block;
  4461. position: relative;
  4462. overflow: hidden;
  4463. z-index: 0;
  4464. }
  4465. .list .item-link {
  4466. color: inherit;
  4467. }
  4468. .list .item-link.active-state {
  4469. background-color: var(--f7-list-link-pressed-bg-color);
  4470. }
  4471. .list .item-link .item-inner {
  4472. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4473. }
  4474. .list .item-content {
  4475. display: flex;
  4476. justify-content: space-between;
  4477. box-sizing: border-box;
  4478. align-items: center;
  4479. min-height: var(--f7-list-item-min-height);
  4480. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4481. }
  4482. .list .item-subtitle {
  4483. position: relative;
  4484. overflow: hidden;
  4485. white-space: nowrap;
  4486. max-width: 100%;
  4487. text-overflow: ellipsis;
  4488. font-size: var(--f7-list-item-subtitle-font-size);
  4489. font-weight: var(--f7-list-item-subtitle-font-weight);
  4490. color: var(--f7-list-item-subtitle-text-color);
  4491. line-height: var(--f7-list-item-subtitle-line-height);
  4492. }
  4493. .list .item-text {
  4494. position: relative;
  4495. overflow: hidden;
  4496. text-overflow: ellipsis;
  4497. /* autoprefixer: ignore next */
  4498. -webkit-line-clamp: var(--f7-list-item-text-max-lines);
  4499. /* autoprefixer: ignore next */
  4500. -webkit-box-orient: vertical;
  4501. display: -webkit-box;
  4502. font-size: var(--f7-list-item-text-font-size);
  4503. font-weight: var(--f7-list-item-text-font-weight);
  4504. color: var(--f7-list-item-text-text-color);
  4505. line-height: var(--f7-list-item-text-line-height);
  4506. max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
  4507. }
  4508. .list .item-title-row {
  4509. position: relative;
  4510. display: flex;
  4511. justify-content: space-between;
  4512. box-sizing: border-box;
  4513. }
  4514. .list .item-title-row .item-after {
  4515. align-self: center;
  4516. }
  4517. .list .item-row {
  4518. display: flex;
  4519. justify-content: space-between;
  4520. box-sizing: border-box;
  4521. }
  4522. .list .item-cell {
  4523. display: block;
  4524. align-self: center;
  4525. box-sizing: border-box;
  4526. width: 100%;
  4527. min-width: 0;
  4528. margin-left: var(--f7-list-item-cell-margin);
  4529. flex-shrink: 1;
  4530. }
  4531. .list .item-cell:first-child {
  4532. margin-left: 0;
  4533. }
  4534. .list .ripple-wave + .item-cell {
  4535. margin-left: 0;
  4536. }
  4537. .list li:last-child .list-button:after {
  4538. display: none !important;
  4539. }
  4540. .list li:last-child > .item-inner:after,
  4541. .list li:last-child li:last-child > .item-inner:after,
  4542. .list li:last-child > .item-content > .item-inner:after,
  4543. .list li:last-child li:last-child > .item-content > .item-inner:after,
  4544. .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
  4545. .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
  4546. .list li:last-child > .item-link > .item-content > .item-inner:after,
  4547. .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
  4548. display: none !important;
  4549. }
  4550. .list li li:last-child .item-inner:after,
  4551. .list li:last-child li .item-inner:after {
  4552. content: '';
  4553. position: absolute;
  4554. background-color: var(--f7-list-item-border-color);
  4555. display: block;
  4556. z-index: 15;
  4557. top: auto;
  4558. right: auto;
  4559. bottom: 0;
  4560. left: 0;
  4561. height: 1px;
  4562. width: 100%;
  4563. transform-origin: 50% 100%;
  4564. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4565. }
  4566. .list.no-hairlines:before,
  4567. .list.no-hairlines ul:before,
  4568. .md .list.no-hairlines-md:before,
  4569. .md .list.no-hairlines-md ul:before,
  4570. .ios .list.no-hairlines-ios:before,
  4571. .ios .list.no-hairlines-ios ul:before,
  4572. .aurora .list.no-hairlines-aurora:before,
  4573. .aurora .list.no-hairlines-aurora ul:before,
  4574. .list.no-hairlines:after,
  4575. .list.no-hairlines ul:after,
  4576. .md .list.no-hairlines-md:after,
  4577. .md .list.no-hairlines-md ul:after,
  4578. .ios .list.no-hairlines-ios:after,
  4579. .ios .list.no-hairlines-ios ul:after,
  4580. .aurora .list.no-hairlines-aurora:after,
  4581. .aurora .list.no-hairlines-aurora ul:after {
  4582. display: none !important;
  4583. }
  4584. .list.no-hairline-top:before,
  4585. .list.no-hairline-top ul:before,
  4586. .md .list.no-hairline-top-md:before,
  4587. .md .list.no-hairline-top-md ul:before,
  4588. .ios .list.no-hairline-top-ios:before,
  4589. .ios .list.no-hairline-top-ios ul:before,
  4590. .aurora .list.no-hairline-top-aurora:before,
  4591. .aurora .list.no-hairline-top-aurora ul:before {
  4592. display: none !important;
  4593. }
  4594. .list.no-hairline-bottom:after,
  4595. .list.no-hairline-bottom ul:after,
  4596. .md .list.no-hairline-bottom-md:after,
  4597. .md .list.no-hairline-bottom-md ul:after,
  4598. .ios .list.no-hairline-bottom-ios:after,
  4599. .ios .list.no-hairline-bottom-ios ul:after,
  4600. .aurora .list.no-hairline-bottom-aurora:after,
  4601. .aurora .list.no-hairline-bottom-aurora ul:after {
  4602. display: none !important;
  4603. }
  4604. .list.no-hairlines-between .item-inner:after,
  4605. .md .list.no-hairlines-between-md .item-inner:after,
  4606. .ios .list.no-hairlines-between-ios .item-inner:after,
  4607. .aurora .list.no-hairlines-between-aurora .item-inner:after,
  4608. .list.no-hairlines-between .list-button:after,
  4609. .md .list.no-hairlines-between-md .list-button:after,
  4610. .ios .list.no-hairlines-between-ios .list-button:after,
  4611. .aurora .list.no-hairlines-between-aurora .list-button:after,
  4612. .list.no-hairlines-between .item-divider:after,
  4613. .md .list.no-hairlines-between-md .item-divider:after,
  4614. .ios .list.no-hairlines-between-ios .item-divider:after,
  4615. .aurora .list.no-hairlines-between-aurora .item-divider:after,
  4616. .list.no-hairlines-between .list-group-title:after,
  4617. .md .list.no-hairlines-between-md .list-group-title:after,
  4618. .ios .list.no-hairlines-between-ios .list-group-title:after,
  4619. .aurora .list.no-hairlines-between-aurora .list-group-title:after,
  4620. .list.no-hairlines-between .list-group-title:after,
  4621. .md .list.no-hairlines-between-md .list-group-title:after,
  4622. .ios .list.no-hairlines-between-ios .list-group-title:after,
  4623. .aurora .list.no-hairlines-between-aurora .list-group-title:after {
  4624. display: none !important;
  4625. }
  4626. .list.no-hairlines-between.simple-list li:after,
  4627. .md .list.no-hairlines-between-md.simple-list li:after,
  4628. .ios .list.no-hairlines-between-ios.simple-list li:after,
  4629. .aurora .list.no-hairlines-between-aurora.simple-list li:after {
  4630. display: none !important;
  4631. }
  4632. .list.no-hairlines-between.links-list a:after,
  4633. .md .list.no-hairlines-between-md.links-list a:after,
  4634. .ios .list.no-hairlines-between-ios.links-list a:after,
  4635. .aurora .list.no-hairlines-between-aurora.links-list a:after {
  4636. display: none !important;
  4637. }
  4638. .list-button {
  4639. padding: 0 var(--f7-list-item-padding-horizontal);
  4640. line-height: var(--f7-list-item-min-height);
  4641. color: var(--f7-list-button-text-color, var(--f7-theme-color));
  4642. font-size: var(--f7-list-button-font-size);
  4643. font-weight: var(--f7-list-button-font-weight);
  4644. text-align: var(--f7-list-button-text-align);
  4645. }
  4646. .list-button:after {
  4647. content: '';
  4648. position: absolute;
  4649. background-color: var(--f7-list-button-border-color);
  4650. display: block;
  4651. z-index: 15;
  4652. top: auto;
  4653. right: auto;
  4654. bottom: 0;
  4655. left: 0;
  4656. height: 1px;
  4657. width: 100%;
  4658. transform-origin: 50% 100%;
  4659. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4660. }
  4661. .list-button.active-state {
  4662. background-color: var(--f7-list-button-pressed-bg-color);
  4663. }
  4664. .list-button[class*="color-"] {
  4665. --f7-list-button-text-color: var(--f7-theme-color);
  4666. }
  4667. .simple-list li {
  4668. position: relative;
  4669. white-space: nowrap;
  4670. text-overflow: ellipsis;
  4671. max-width: 100%;
  4672. box-sizing: border-box;
  4673. display: flex;
  4674. justify-content: space-between;
  4675. align-items: center;
  4676. align-content: center;
  4677. line-height: var(--f7-list-item-min-height);
  4678. height: var(--f7-list-item-min-height);
  4679. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4680. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4681. }
  4682. .simple-list li:after {
  4683. left: var(--f7-list-item-padding-horizontal);
  4684. width: auto;
  4685. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4686. right: 0;
  4687. }
  4688. .simple-list li:last-child:after {
  4689. display: none !important;
  4690. }
  4691. .links-list li {
  4692. z-index: 1;
  4693. }
  4694. .links-list a {
  4695. transition-duration: 300ms;
  4696. transition-property: background-color;
  4697. display: block;
  4698. position: relative;
  4699. overflow: hidden;
  4700. display: flex;
  4701. align-items: center;
  4702. align-content: center;
  4703. justify-content: space-between;
  4704. box-sizing: border-box;
  4705. white-space: nowrap;
  4706. text-overflow: ellipsis;
  4707. max-width: 100%;
  4708. height: var(--f7-list-item-min-height);
  4709. color: inherit;
  4710. }
  4711. .links-list a .ripple-wave {
  4712. z-index: 0;
  4713. }
  4714. .links-list a:after {
  4715. width: auto;
  4716. }
  4717. .links-list a.active-state {
  4718. background-color: var(--f7-list-link-pressed-bg-color);
  4719. }
  4720. .links-list a {
  4721. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4722. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4723. }
  4724. .links-list a:after {
  4725. left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4726. right: 0;
  4727. }
  4728. .links-list li:last-child a:after {
  4729. display: none !important;
  4730. }
  4731. .simple-list li:after,
  4732. .links-list a:after,
  4733. .list .item-inner:after {
  4734. content: '';
  4735. position: absolute;
  4736. background-color: var(--f7-list-item-border-color);
  4737. display: block;
  4738. z-index: 15;
  4739. top: auto;
  4740. right: auto;
  4741. bottom: 0;
  4742. left: 0;
  4743. height: 1px;
  4744. width: 100%;
  4745. transform-origin: 50% 100%;
  4746. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4747. }
  4748. .media-list,
  4749. li.media-item {
  4750. --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
  4751. --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
  4752. }
  4753. .media-list .item-title,
  4754. li.media-item .item-title {
  4755. font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
  4756. }
  4757. .media-list .item-inner,
  4758. li.media-item .item-inner {
  4759. display: block;
  4760. align-self: stretch;
  4761. }
  4762. .media-list .item-media,
  4763. li.media-item .item-media {
  4764. align-self: flex-start;
  4765. }
  4766. .media-list .item-media img,
  4767. li.media-item .item-media img {
  4768. display: block;
  4769. }
  4770. .media-list .item-link .item-inner,
  4771. li.media-item .item-link .item-inner {
  4772. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4773. }
  4774. .media-list .item-link .item-title-row,
  4775. li.media-item .item-link .item-title-row {
  4776. padding-right: calc(var(--f7-list-chevron-icon-area));
  4777. }
  4778. .media-list.chevron-center .item-link .item-inner,
  4779. .media-list .chevron-center .item-link .item-inner,
  4780. .media-list .item-link.chevron-center .item-inner,
  4781. li.media-item.chevron-center .item-link .item-inner,
  4782. li.media-item .item-link.chevron-center .item-inner,
  4783. li.media-item .chevron-center .item-link .item-inner {
  4784. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4785. }
  4786. .media-list.chevron-center .item-title-row,
  4787. .media-list .chevron-center .item-title-row,
  4788. li.media-item.chevron-center .item-title-row,
  4789. li.media-item .chevron-center .item-title-row {
  4790. padding-right: 0;
  4791. }
  4792. .list .item-link .item-inner:before,
  4793. .links-list a:before,
  4794. .media-list .item-link .item-title-row:before,
  4795. li.media-item .item-link .item-title-row:before,
  4796. .media-list.chevron-center .item-link .item-inner:before,
  4797. .media-list .chevron-center .item-link .item-inner:before,
  4798. .media-list .item-link.chevron-center .item-inner:before,
  4799. li.media-item.chevron-center .item-link .item-inner:before,
  4800. li.media-item .chevron-center .item-link .item-inner:before,
  4801. li.media-item .item-link.chevron-center .item-inner:before {
  4802. font-family: 'framework7-core-icons';
  4803. font-weight: normal;
  4804. font-style: normal;
  4805. line-height: 1;
  4806. letter-spacing: normal;
  4807. text-transform: none;
  4808. white-space: nowrap;
  4809. word-wrap: normal;
  4810. direction: ltr;
  4811. -webkit-font-smoothing: antialiased;
  4812. text-rendering: optimizeLegibility;
  4813. -moz-osx-font-smoothing: grayscale;
  4814. font-feature-settings: "liga";
  4815. text-align: center;
  4816. display: block;
  4817. width: 100%;
  4818. height: 100%;
  4819. font-size: 20px;
  4820. position: absolute;
  4821. top: 50%;
  4822. width: 8px;
  4823. height: 14px;
  4824. margin-top: -7px;
  4825. font-size: var(--f7-list-chevron-icon-font-size);
  4826. line-height: 14px;
  4827. color: var(--f7-list-chevron-icon-color);
  4828. pointer-events: none;
  4829. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4830. content: var(--f7-list-chevron-icon-right);
  4831. }
  4832. .media-list.chevron-center .item-title-row:before,
  4833. .media-list .chevron-center .item-title-row:before,
  4834. li.media-item.chevron-center .item-title-row:before,
  4835. li.media-item .chevron-center .item-title-row:before {
  4836. display: none;
  4837. }
  4838. .media-list .item-link .item-inner:before,
  4839. li.media-item .item-link .item-inner:before {
  4840. display: none;
  4841. }
  4842. .media-list .item-link .item-title-row:before,
  4843. li.media-item .item-link .item-title-row:before {
  4844. right: 0;
  4845. }
  4846. .list-group ul:after,
  4847. .list-group ul:before {
  4848. z-index: 25 !important;
  4849. }
  4850. .list-group + .list-group ul:before {
  4851. display: none !important;
  4852. }
  4853. li.item-divider,
  4854. .item-divider,
  4855. li.list-group-title {
  4856. white-space: nowrap;
  4857. position: relative;
  4858. max-width: 100%;
  4859. text-overflow: ellipsis;
  4860. overflow: hidden;
  4861. z-index: 15;
  4862. padding-top: 0;
  4863. padding-bottom: 0;
  4864. padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  4865. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  4866. box-sizing: border-box;
  4867. display: flex;
  4868. align-items: center;
  4869. align-content: center;
  4870. }
  4871. li.item-divider:after,
  4872. .item-divider:after,
  4873. li.list-group-title:after {
  4874. display: none !important;
  4875. }
  4876. li.item-divider,
  4877. .item-divider {
  4878. margin-top: -1px;
  4879. height: var(--f7-list-item-divider-height);
  4880. color: var(--f7-list-item-divider-text-color);
  4881. font-size: var(--f7-list-item-divider-font-size);
  4882. font-weight: var(--f7-list-item-divider-font-weight);
  4883. background-color: var(--f7-list-item-divider-bg-color);
  4884. line-height: var(--f7-list-item-divider-line-height);
  4885. }
  4886. li.item-divider:before,
  4887. .item-divider:before {
  4888. content: '';
  4889. position: absolute;
  4890. background-color: var(--f7-list-item-divider-border-color);
  4891. display: block;
  4892. z-index: 15;
  4893. top: 0;
  4894. right: auto;
  4895. bottom: auto;
  4896. left: 0;
  4897. height: 1px;
  4898. width: 100%;
  4899. transform-origin: 50% 0%;
  4900. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  4901. }
  4902. li.list-group-title,
  4903. .list li.list-group-title {
  4904. position: relative;
  4905. position: -webkit-sticky;
  4906. position: sticky;
  4907. top: 0;
  4908. margin-top: 0;
  4909. z-index: 20;
  4910. height: var(--f7-list-group-title-height);
  4911. color: var(--f7-list-group-title-text-color);
  4912. font-size: var(--f7-list-group-title-font-size);
  4913. font-weight: var(--f7-list-group-title-font-weight);
  4914. background-color: var(--f7-list-group-title-bg-color);
  4915. line-height: var(--f7-list-group-title-line-height);
  4916. }
  4917. .page-with-navbar-large li.list-group-title,
  4918. .page-with-navbar-large .list li.list-group-title {
  4919. top: calc(-1 * var(--f7-navbar-large-title-height));
  4920. }
  4921. .list.inset {
  4922. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4923. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4924. border-radius: var(--f7-list-inset-border-radius);
  4925. --f7-safe-area-left: 0px;
  4926. --f7-safe-area-right: 0px;
  4927. }
  4928. .list.inset .block-title {
  4929. margin-left: 0;
  4930. margin-right: 0;
  4931. }
  4932. .list.inset ul {
  4933. border-radius: var(--f7-list-inset-border-radius);
  4934. }
  4935. .list.inset ul:before,
  4936. .list.inset ul:after {
  4937. display: none !important;
  4938. }
  4939. .list.inset li.swipeout:first-child,
  4940. .list.inset li:first-child > a {
  4941. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4942. }
  4943. .list.inset li.swipeout:last-child,
  4944. .list.inset li:last-child > a {
  4945. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4946. }
  4947. .list.inset li.swipeout:first-child:last-child,
  4948. .list.inset li:first-child:last-child > a {
  4949. border-radius: var(--f7-list-inset-border-radius);
  4950. }
  4951. @media (min-width: 480px) {
  4952. .list.xsmall-inset {
  4953. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4954. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4955. border-radius: var(--f7-list-inset-border-radius);
  4956. --f7-safe-area-left: 0px;
  4957. --f7-safe-area-right: 0px;
  4958. }
  4959. .list.xsmall-inset .block-title {
  4960. margin-left: 0;
  4961. margin-right: 0;
  4962. }
  4963. .list.xsmall-inset ul {
  4964. border-radius: var(--f7-list-inset-border-radius);
  4965. }
  4966. .list.xsmall-inset ul:before,
  4967. .list.xsmall-inset ul:after {
  4968. display: none !important;
  4969. }
  4970. .list.xsmall-inset li:first-child > a {
  4971. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  4972. }
  4973. .list.xsmall-inset li:last-child > a {
  4974. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  4975. }
  4976. .list.xsmall-inset li:first-child:last-child > a {
  4977. border-radius: var(--f7-list-inset-border-radius);
  4978. }
  4979. }
  4980. @media (min-width: 568px) {
  4981. .list.small-inset {
  4982. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  4983. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  4984. border-radius: var(--f7-list-inset-border-radius);
  4985. --f7-safe-area-left: 0px;
  4986. --f7-safe-area-right: 0px;
  4987. }
  4988. .list.small-inset .block-title {
  4989. margin-left: 0;
  4990. margin-right: 0;
  4991. }
  4992. .list.small-inset ul {
  4993. border-radius: var(--f7-list-inset-border-radius);
  4994. }
  4995. .list.small-inset ul:before,
  4996. .list.small-inset ul:after {
  4997. display: none !important;
  4998. }
  4999. .list.small-inset li:first-child > a {
  5000. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5001. }
  5002. .list.small-inset li:last-child > a {
  5003. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5004. }
  5005. .list.small-inset li:first-child:last-child > a {
  5006. border-radius: var(--f7-list-inset-border-radius);
  5007. }
  5008. }
  5009. @media (min-width: 768px) {
  5010. .list.medium-inset {
  5011. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5012. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5013. border-radius: var(--f7-list-inset-border-radius);
  5014. --f7-safe-area-left: 0px;
  5015. --f7-safe-area-right: 0px;
  5016. }
  5017. .list.medium-inset .block-title {
  5018. margin-left: 0;
  5019. margin-right: 0;
  5020. }
  5021. .list.medium-inset ul {
  5022. border-radius: var(--f7-list-inset-border-radius);
  5023. }
  5024. .list.medium-inset ul:before,
  5025. .list.medium-inset ul:after {
  5026. display: none !important;
  5027. }
  5028. .list.medium-inset li:first-child > a {
  5029. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5030. }
  5031. .list.medium-inset li:last-child > a {
  5032. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5033. }
  5034. .list.medium-inset li:first-child:last-child > a {
  5035. border-radius: var(--f7-list-inset-border-radius);
  5036. }
  5037. }
  5038. @media (min-width: 1024px) {
  5039. .list.large-inset {
  5040. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5041. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5042. border-radius: var(--f7-list-inset-border-radius);
  5043. --f7-safe-area-left: 0px;
  5044. --f7-safe-area-right: 0px;
  5045. }
  5046. .list.large-inset .block-title {
  5047. margin-left: 0;
  5048. margin-right: 0;
  5049. }
  5050. .list.large-inset ul {
  5051. border-radius: var(--f7-list-inset-border-radius);
  5052. }
  5053. .list.large-inset ul:before,
  5054. .list.large-inset ul:after {
  5055. display: none !important;
  5056. }
  5057. .list.large-inset li:first-child > a {
  5058. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5059. }
  5060. .list.large-inset li:last-child > a {
  5061. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5062. }
  5063. .list.large-inset li:first-child:last-child > a {
  5064. border-radius: var(--f7-list-inset-border-radius);
  5065. }
  5066. }
  5067. @media (min-width: 1200px) {
  5068. .list.xlarge-inset {
  5069. margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
  5070. margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
  5071. border-radius: var(--f7-list-inset-border-radius);
  5072. --f7-safe-area-left: 0px;
  5073. --f7-safe-area-right: 0px;
  5074. }
  5075. .list.xlarge-inset .block-title {
  5076. margin-left: 0;
  5077. margin-right: 0;
  5078. }
  5079. .list.xlarge-inset ul {
  5080. border-radius: var(--f7-list-inset-border-radius);
  5081. }
  5082. .list.xlarge-inset ul:before,
  5083. .list.xlarge-inset ul:after {
  5084. display: none !important;
  5085. }
  5086. .list.xlarge-inset li:first-child > a {
  5087. border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
  5088. }
  5089. .list.xlarge-inset li:last-child > a {
  5090. border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
  5091. }
  5092. .list.xlarge-inset li:first-child:last-child > a {
  5093. border-radius: var(--f7-list-inset-border-radius);
  5094. }
  5095. }
  5096. .list.no-chevron,
  5097. .list .no-chevron {
  5098. --f7-list-chevron-icon-color: transparent;
  5099. --f7-list-chevron-icon-area: 0px;
  5100. }
  5101. .ios .item-link.active-state .item-inner:after,
  5102. .ios .list-button.active-state:after,
  5103. .ios .links-list a.active-state:after {
  5104. background-color: transparent;
  5105. }
  5106. .ios .links-list a.active-state,
  5107. .ios .list .item-link.active-state,
  5108. .ios .list .list-button.active-state {
  5109. transition-duration: 0ms;
  5110. }
  5111. .md .list .item-media {
  5112. min-width: 40px;
  5113. }
  5114. .aurora .list .item-media {
  5115. min-width: 18px;
  5116. }
  5117. .aurora .links-list a,
  5118. .aurora .list .item-link,
  5119. .aurora .list .list-button {
  5120. transition-duration: 0ms;
  5121. }
  5122. .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
  5123. .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
  5124. background: var(--f7-list-link-hover-bg-color);
  5125. }
  5126. .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
  5127. background: var(--f7-list-button-hover-bg-color);
  5128. }
  5129. /* === Badge === */
  5130. :root {
  5131. --f7-badge-text-color: #fff;
  5132. --f7-badge-bg-color: #8e8e93;
  5133. --f7-badge-padding: 0 4px;
  5134. --f7-badge-in-icon-size: 16px;
  5135. --f7-badge-in-icon-font-size: 10px;
  5136. --f7-badge-font-weight: normal;
  5137. --f7-badge-font-size: 12px;
  5138. }
  5139. .ios {
  5140. --f7-badge-size: 20px;
  5141. }
  5142. .md {
  5143. --f7-badge-size: 18px;
  5144. }
  5145. .aurora {
  5146. --f7-badge-size: 18px;
  5147. --f7-badge-font-weight: 600;
  5148. --f7-badge-in-icon-size: 15px;
  5149. }
  5150. .badge {
  5151. display: inline-flex;
  5152. align-items: center;
  5153. align-content: center;
  5154. justify-content: center;
  5155. color: var(--f7-badge-text-color);
  5156. background: var(--f7-badge-bg-color);
  5157. position: relative;
  5158. box-sizing: border-box;
  5159. text-align: center;
  5160. vertical-align: middle;
  5161. font-weight: var(--f7-badge-font-weight);
  5162. font-size: var(--f7-badge-font-size);
  5163. border-radius: var(--f7-badge-size);
  5164. padding: var(--f7-badge-padding);
  5165. height: var(--f7-badge-size);
  5166. min-width: var(--f7-badge-size);
  5167. }
  5168. .icon .badge,
  5169. .f7-icons .badge,
  5170. .framework7-icons .badge,
  5171. .material-icons .badge {
  5172. position: absolute;
  5173. left: 100%;
  5174. margin-left: -10px;
  5175. top: -2px;
  5176. font-family: var(--f7-font-family);
  5177. --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
  5178. --f7-badge-size: var(--f7-badge-in-icon-size);
  5179. }
  5180. .badge[class*="color-"] {
  5181. --f7-badge-bg-color: var(--f7-theme-color);
  5182. }
  5183. :root {
  5184. --f7-button-min-width: 32px;
  5185. --f7-button-bg-color: transparent;
  5186. --f7-button-border-width: 0px;
  5187. /*
  5188. --f7-button-text-color: var(--f7-theme-color);
  5189. --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  5190. --f7-button-border-color: var(--f7-theme-color);
  5191. --f7-button-fill-text-color: #fff;
  5192. --f7-button-fill-bg-color: var(--f7-theme-color);
  5193. --f7-button-outline-border-color: var(--f7-theme-color);
  5194. */
  5195. --f7-button-outline-border-width: 2px;
  5196. --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  5197. --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
  5198. --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  5199. --f7-segmented-strong-padding: 2px;
  5200. --f7-segmented-strong-between-buttons: 4px;
  5201. --f7-segmented-strong-button-font-weight: 500;
  5202. --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  5203. --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  5204. --f7-segmented-strong-button-text-color: #000;
  5205. --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
  5206. --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  5207. --f7-segmented-strong-button-active-text-color: #000;
  5208. --f7-segmented-strong-button-active-bg-color: #fff;
  5209. }
  5210. :root .theme-dark,
  5211. :root.theme-dark {
  5212. --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  5213. --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
  5214. --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  5215. --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  5216. --f7-segmented-strong-button-text-color: #fff;
  5217. --f7-segmented-strong-button-active-text-color: #fff;
  5218. }
  5219. .ios {
  5220. --f7-button-font-size: 13px;
  5221. --f7-button-height: 28px;
  5222. --f7-button-padding-horizontal: 10px;
  5223. --f7-button-border-radius: 5px;
  5224. --f7-button-font-weight: 600;
  5225. --f7-button-letter-spacing: 0;
  5226. --f7-button-text-transform: uppercase;
  5227. /*
  5228. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  5229. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
  5230. */
  5231. --f7-button-large-height: 44px;
  5232. --f7-button-large-font-size: 17px;
  5233. --f7-button-large-font-weight: 500;
  5234. --f7-button-large-text-transform: none;
  5235. --f7-button-small-height: 26px;
  5236. --f7-button-small-font-size: 13px;
  5237. --f7-button-small-font-weight: 600;
  5238. --f7-button-small-text-transform: uppercase;
  5239. --f7-button-small-outline-border-width: 2px;
  5240. --f7-segmented-strong-button-text-transform: none;
  5241. --f7-segmented-strong-button-active-font-weight: 600;
  5242. }
  5243. .md {
  5244. --f7-button-font-size: 14px;
  5245. --f7-button-height: 36px;
  5246. --f7-button-padding-horizontal: 8px;
  5247. --f7-button-border-radius: 4px;
  5248. --f7-button-font-weight: 500;
  5249. --f7-button-letter-spacing: 0.03em;
  5250. --f7-button-text-transform: uppercase;
  5251. /*
  5252. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  5253. */
  5254. --f7-button-large-height: 48px;
  5255. --f7-button-large-font-size: 14px;
  5256. --f7-button-large-font-weight: 500;
  5257. --f7-button-large-text-transform: uppercase;
  5258. --f7-button-small-height: 28px;
  5259. --f7-button-small-font-size: 12px;
  5260. --f7-button-small-font-weight: 500;
  5261. --f7-button-small-text-transform: uppercase;
  5262. --f7-button-small-outline-border-width: 2px;
  5263. --f7-segmented-strong-button-text-transform: uppercase;
  5264. --f7-segmented-strong-button-active-font-weight: 500;
  5265. --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  5266. }
  5267. .md .theme-dark,
  5268. .md.theme-dark {
  5269. --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  5270. }
  5271. .aurora {
  5272. /*
  5273. --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  5274. --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  5275. */
  5276. --f7-button-font-size: 14px;
  5277. --f7-button-height: 28px;
  5278. --f7-button-min-width: 24px;
  5279. --f7-button-padding-horizontal: 10px;
  5280. --f7-button-border-radius: 4px;
  5281. --f7-button-font-weight: 500;
  5282. --f7-button-letter-spacing: 0.02;
  5283. --f7-button-text-transform: none;
  5284. /*
  5285. --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  5286. --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
  5287. */
  5288. --f7-button-large-height: 34px;
  5289. --f7-button-large-font-size: 14px;
  5290. --f7-button-large-font-weight: 600;
  5291. --f7-button-large-text-transform: none;
  5292. --f7-button-small-height: 24px;
  5293. --f7-button-small-font-size: 12px;
  5294. --f7-button-small-font-weight: 600;
  5295. --f7-button-small-text-transform: none;
  5296. --f7-button-small-outline-border-width: 1px;
  5297. --f7-segmented-strong-button-text-transform: none;
  5298. --f7-segmented-strong-button-active-font-weight: 600;
  5299. }
  5300. button {
  5301. -webkit-appearance: none;
  5302. -moz-appearance: none;
  5303. appearance: none;
  5304. width: 100%;
  5305. }
  5306. .button {
  5307. text-decoration: none;
  5308. text-align: center;
  5309. display: block;
  5310. -webkit-appearance: none;
  5311. -moz-appearance: none;
  5312. appearance: none;
  5313. background: none;
  5314. margin: 0;
  5315. white-space: nowrap;
  5316. text-overflow: ellipsis;
  5317. position: relative;
  5318. overflow: hidden;
  5319. font-family: inherit;
  5320. cursor: pointer;
  5321. outline: 0;
  5322. box-sizing: border-box;
  5323. vertical-align: middle;
  5324. justify-content: center;
  5325. align-items: center;
  5326. border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
  5327. font-size: var(--f7-button-font-size);
  5328. color: var(--f7-button-text-color, var(--f7-theme-color));
  5329. height: var(--f7-button-height);
  5330. line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
  5331. padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
  5332. border-radius: var(--f7-button-border-radius);
  5333. min-width: var(--f7-button-min-width);
  5334. font-weight: var(--f7-button-font-weight);
  5335. letter-spacing: var(--f7-button-letter-spacing);
  5336. text-transform: var(--f7-button-text-transform);
  5337. background-color: var(--f7-button-bg-color);
  5338. box-shadow: var(--f7-button-box-shadow);
  5339. }
  5340. .button.active-state {
  5341. background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  5342. color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
  5343. }
  5344. input[type="submit"].button,
  5345. input[type="button"].button {
  5346. width: 100%;
  5347. }
  5348. .button > i + span,
  5349. .button > span + span,
  5350. .button > span + i,
  5351. .button > i + i {
  5352. margin-left: 4px;
  5353. }
  5354. .subnavbar .button,
  5355. .navbar .button,
  5356. .toolbar .button,
  5357. .searchbar .button,
  5358. .appbar .button {
  5359. color: var(--f7-button-text-color, var(--f7-theme-color));
  5360. }
  5361. .button-round,
  5362. .ios .button-round-ios,
  5363. .md .button-round-md,
  5364. .aurora .button-round-aurora {
  5365. --f7-button-border-radius: var(--f7-button-height);
  5366. }
  5367. .button-fill,
  5368. .ios .button-fill-ios,
  5369. .md .button-fill-md,
  5370. .aurora .button-fill-aurora,
  5371. .button-active,
  5372. .button.tab-link-active {
  5373. --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
  5374. --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
  5375. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  5376. }
  5377. .button-fill,
  5378. .ios .button-fill-ios,
  5379. .md .button-fill-md,
  5380. .aurora .button-fill-aurora {
  5381. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
  5382. }
  5383. .button-active,
  5384. .button.tab-link-active {
  5385. --f7-button-pressed-bg-color: var(--f7-button-bg-color);
  5386. }
  5387. .button-outline,
  5388. .ios .button-outline-ios,
  5389. .md .button-outline-md,
  5390. .aurora .button-outline-aurora {
  5391. --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
  5392. --f7-button-border-width: var(--f7-button-outline-border-width);
  5393. }
  5394. .button-large,
  5395. .ios .button-large-ios,
  5396. .md .button-large-md,
  5397. .aurora .button-large-aurora {
  5398. --f7-button-height: var(--f7-button-large-height);
  5399. --f7-button-font-size: var(--f7-button-large-font-size);
  5400. --f7-button-font-weight: var(--f7-button-large-font-weight);
  5401. --f7-button-text-transform: var(--f7-button-large-text-transform);
  5402. }
  5403. .button-small,
  5404. .ios .button-small-ios,
  5405. .md .button-small-md,
  5406. .aurora .button-small-aurora {
  5407. --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
  5408. --f7-button-height: var(--f7-button-small-height);
  5409. --f7-button-font-size: var(--f7-button-small-font-size);
  5410. --f7-button-font-weight: var(--f7-button-small-font-weight);
  5411. --f7-button-text-transform: var(--f7-button-small-text-transform);
  5412. }
  5413. .ios .button-small.button-fill,
  5414. .ios .button-small-ios.button-fill,
  5415. .ios .button-small.button-fill-ios {
  5416. --f7-button-border-width: var(--f7-button-small-outline-border-width);
  5417. --f7-button-pressed-text-color: var(--f7-theme-color);
  5418. --f7-button-pressed-bg-color: transparent;
  5419. }
  5420. .segmented {
  5421. align-self: center;
  5422. display: flex;
  5423. flex-wrap: nowrap;
  5424. border-radius: var(--f7-button-border-radius);
  5425. box-shadow: var(--f7-button-box-shadow);
  5426. box-sizing: border-box;
  5427. }
  5428. .segmented .button,
  5429. .segmented button {
  5430. width: 100%;
  5431. flex-shrink: 1;
  5432. min-width: 0;
  5433. border-radius: 0;
  5434. }
  5435. .segmented .button:first-child {
  5436. border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
  5437. }
  5438. .segmented .button:not(.button-outline):first-child {
  5439. border-left: none;
  5440. }
  5441. .segmented .button.button-outline:nth-child(n + 2) {
  5442. border-left: none;
  5443. }
  5444. .segmented .button:last-child {
  5445. border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
  5446. }
  5447. .segmented .button-round:first-child {
  5448. border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
  5449. }
  5450. .segmented .button-round:last-child {
  5451. border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
  5452. }
  5453. .segmented .button:first-child:last-child {
  5454. border-radius: var(--f7-button-border-radius);
  5455. }
  5456. .segmented-raised,
  5457. .ios .segmented-raised-ios,
  5458. .md .segmented-raised-md,
  5459. .aurora .segmented-raised-aurora {
  5460. box-shadow: var(--f7-button-raised-box-shadow);
  5461. }
  5462. .segmented-raised .button:not(.button-outline),
  5463. .ios .segmented-raised-ios .button:not(.button-outline),
  5464. .md .segmented-raised-md .button:not(.button-outline),
  5465. .aurora .segmented-raised-aurora .button:not(.button-outline) {
  5466. border-left: 1px solid var(--f7-segmented-raised-divider-color);
  5467. }
  5468. .button-raised,
  5469. .ios .button-raised-ios,
  5470. .md .button-raised-md,
  5471. .aurora .button-raised-aurora {
  5472. --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
  5473. }
  5474. .button-raised.active-state,
  5475. .ios .button-raised-ios.active-state,
  5476. .md .button-raised-md.active-state,
  5477. .aurora .button-raised-aurora.active-state {
  5478. --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
  5479. }
  5480. .segmented-strong,
  5481. .ios .segmented-strong-ios,
  5482. .md .segmented-strong-md,
  5483. .aurora .segmented-strong-aurora {
  5484. --f7-button-bg-color: transparent;
  5485. --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
  5486. --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
  5487. --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
  5488. --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
  5489. --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
  5490. position: relative;
  5491. background: var(--f7-segmented-strong-bg-color);
  5492. border-radius: calc(var(--f7-button-border-radius) + 2px);
  5493. box-shadow: none;
  5494. padding: var(--f7-segmented-strong-padding);
  5495. overflow: hidden;
  5496. }
  5497. .segmented-strong .button,
  5498. .ios .segmented-strong-ios .button,
  5499. .md .segmented-strong-md .button,
  5500. .aurora .segmented-strong-aurora .button {
  5501. z-index: 1;
  5502. transform: translate3d(0, 0, 0);
  5503. }
  5504. .segmented-strong .button,
  5505. .ios .segmented-strong-ios .button,
  5506. .md .segmented-strong-md .button,
  5507. .aurora .segmented-strong-aurora .button,
  5508. .segmented-strong .button:first-child,
  5509. .ios .segmented-strong-ios .button:first-child,
  5510. .md .segmented-strong-md .button:first-child,
  5511. .aurora .segmented-strong-aurora .button:first-child,
  5512. .segmented-strong .button:last-child,
  5513. .ios .segmented-strong-ios .button:last-child,
  5514. .md .segmented-strong-md .button:last-child,
  5515. .aurora .segmented-strong-aurora .button:last-child {
  5516. border-radius: var(--f7-button-border-radius);
  5517. }
  5518. .segmented-strong .button + .button,
  5519. .ios .segmented-strong-ios .button + .button,
  5520. .md .segmented-strong-md .button + .button,
  5521. .aurora .segmented-strong-aurora .button + .button {
  5522. margin-left: var(--f7-segmented-strong-between-buttons);
  5523. }
  5524. .segmented-strong .button.button-active,
  5525. .ios .segmented-strong-ios .button.button-active,
  5526. .md .segmented-strong-md .button.button-active,
  5527. .aurora .segmented-strong-aurora .button.button-active,
  5528. .segmented-strong .button.tab-link-active,
  5529. .ios .segmented-strong-ios .button.tab-link-active,
  5530. .md .segmented-strong-md .button.tab-link-active,
  5531. .aurora .segmented-strong-aurora .button.tab-link-active {
  5532. --f7-button-hover-bg-color: transparent;
  5533. --f7-button-bg-color: transparent;
  5534. --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
  5535. --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
  5536. }
  5537. .segmented-strong .segmented-highlight,
  5538. .ios .segmented-strong-ios .segmented-highlight,
  5539. .md .segmented-strong-md .segmented-highlight,
  5540. .aurora .segmented-strong-aurora .segmented-highlight {
  5541. --f7-segmented-highlight-num: 1;
  5542. --f7-segmented-highlight-active: 0;
  5543. --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
  5544. --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
  5545. --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
  5546. position: absolute;
  5547. background-color: var(--f7-segmented-strong-button-active-bg-color);
  5548. border-radius: var(--f7-button-border-radius);
  5549. box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
  5550. left: var(--f7-segmented-strong-padding);
  5551. top: var(--f7-segmented-strong-padding);
  5552. height: calc(100% - var(--f7-segmented-strong-padding) * 2);
  5553. width: var(--f7-segmented-highlight-width);
  5554. z-index: 0;
  5555. transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
  5556. transition: 200ms;
  5557. }
  5558. .button:nth-child(2) ~ .segmented-highlight {
  5559. --f7-segmented-highlight-num: 2;
  5560. }
  5561. .button:nth-child(3) ~ .segmented-highlight {
  5562. --f7-segmented-highlight-num: 3;
  5563. }
  5564. .button:nth-child(4) ~ .segmented-highlight {
  5565. --f7-segmented-highlight-num: 4;
  5566. }
  5567. .button:nth-child(5) ~ .segmented-highlight {
  5568. --f7-segmented-highlight-num: 5;
  5569. }
  5570. .button:nth-child(6) ~ .segmented-highlight {
  5571. --f7-segmented-highlight-num: 6;
  5572. }
  5573. .button:nth-child(7) ~ .segmented-highlight {
  5574. --f7-segmented-highlight-num: 7;
  5575. }
  5576. .button:nth-child(8) ~ .segmented-highlight {
  5577. --f7-segmented-highlight-num: 8;
  5578. }
  5579. .button:nth-child(9) ~ .segmented-highlight {
  5580. --f7-segmented-highlight-num: 9;
  5581. }
  5582. .button:nth-child(10) ~ .segmented-highlight {
  5583. --f7-segmented-highlight-num: 10;
  5584. }
  5585. .button-active:nth-child(2) ~ .segmented-highlight,
  5586. .tab-link-active:nth-child(2) ~ .segmented-highlight {
  5587. --f7-segmented-highlight-active: 1;
  5588. }
  5589. .button-active:nth-child(3) ~ .segmented-highlight,
  5590. .tab-link-active:nth-child(3) ~ .segmented-highlight {
  5591. --f7-segmented-highlight-active: 2;
  5592. }
  5593. .button-active:nth-child(4) ~ .segmented-highlight,
  5594. .tab-link-active:nth-child(4) ~ .segmented-highlight {
  5595. --f7-segmented-highlight-active: 3;
  5596. }
  5597. .button-active:nth-child(5) ~ .segmented-highlight,
  5598. .tab-link-active:nth-child(5) ~ .segmented-highlight {
  5599. --f7-segmented-highlight-active: 4;
  5600. }
  5601. .button-active:nth-child(6) ~ .segmented-highlight,
  5602. .tab-link-active:nth-child(6) ~ .segmented-highlight {
  5603. --f7-segmented-highlight-active: 5;
  5604. }
  5605. .button-active:nth-child(7) ~ .segmented-highlight,
  5606. .tab-link-active:nth-child(7) ~ .segmented-highlight {
  5607. --f7-segmented-highlight-active: 6;
  5608. }
  5609. .button-active:nth-child(8) ~ .segmented-highlight,
  5610. .tab-link-active:nth-child(8) ~ .segmented-highlight {
  5611. --f7-segmented-highlight-active: 7;
  5612. }
  5613. .button-active:nth-child(9) ~ .segmented-highlight,
  5614. .tab-link-active:nth-child(9) ~ .segmented-highlight {
  5615. --f7-segmented-highlight-active: 8;
  5616. }
  5617. .button-active:nth-child(10) ~ .segmented-highlight,
  5618. .tab-link-active:nth-child(10) ~ .segmented-highlight {
  5619. --f7-segmented-highlight-active: 9;
  5620. }
  5621. .segmented-round,
  5622. .ios .segmented-round-ios,
  5623. .md .segmented-round-md,
  5624. .aurora .segmented-round-aurora {
  5625. border-radius: var(--f7-button-height);
  5626. }
  5627. .segmented-round .segmented-highlight,
  5628. .ios .segmented-round-ios .segmented-highlight,
  5629. .md .segmented-round-md .segmented-highlight,
  5630. .aurora .segmented-round-aurora .segmented-highlight {
  5631. border-radius: var(--f7-button-height);
  5632. }
  5633. .subnavbar .segmented {
  5634. width: 100%;
  5635. }
  5636. .ios .button {
  5637. transition-duration: 100ms;
  5638. }
  5639. .ios .button-fill,
  5640. .ios .button-fill-ios {
  5641. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
  5642. }
  5643. .ios .button-small,
  5644. .ios .button-small-ios {
  5645. transition-duration: 200ms;
  5646. }
  5647. .md .button {
  5648. transition-duration: 300ms;
  5649. transform: translate3d(0, 0, 0);
  5650. }
  5651. .md .button-fill,
  5652. .md .button-fill-md {
  5653. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  5654. }
  5655. .aurora .button {
  5656. transition-duration: 100ms;
  5657. transform: translate3d(0, 0, 0);
  5658. }
  5659. .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
  5660. background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  5661. }
  5662. .aurora .button-fill,
  5663. .aurora .button-fill-aurora {
  5664. --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
  5665. }
  5666. .aurora .button-fill,
  5667. .aurora .button-active,
  5668. .aurora .button.tab-link-active,
  5669. .aurora .button-fill-aurora {
  5670. --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  5671. }
  5672. /* === Touch Ripple === */
  5673. :root {
  5674. --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
  5675. --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
  5676. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  5677. }
  5678. .theme-dark {
  5679. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  5680. }
  5681. .ripple,
  5682. .fab a,
  5683. .link,
  5684. .item-link,
  5685. .list-button,
  5686. .button,
  5687. .dialog-button,
  5688. .tab-link,
  5689. .radio,
  5690. .checkbox,
  5691. .actions-button,
  5692. .speed-dial-buttons a {
  5693. -webkit-user-select: none;
  5694. -moz-user-select: none;
  5695. user-select: none;
  5696. }
  5697. .ripple-wave {
  5698. left: 0;
  5699. top: 0;
  5700. position: absolute !important;
  5701. border-radius: 50%;
  5702. pointer-events: none;
  5703. z-index: -1;
  5704. padding: 0;
  5705. margin: 0;
  5706. font-size: 0;
  5707. transform: translate3d(0px, 0px, 0) scale(0);
  5708. transition-duration: 1400ms;
  5709. background-color: var(--f7-touch-ripple-color);
  5710. }
  5711. .ripple-wave.ripple-wave-fill {
  5712. transition-duration: 300ms;
  5713. opacity: 0.35;
  5714. }
  5715. .ripple-wave.ripple-wave-out {
  5716. transition-duration: 600ms;
  5717. opacity: 0;
  5718. }
  5719. .button-fill .ripple-wave,
  5720. .picker-calendar-day .ripple-wave,
  5721. .menu .ripple-wave {
  5722. z-index: 1;
  5723. }
  5724. .checkbox .ripple-wave,
  5725. .radio .ripple-wave,
  5726. .data-table .sortable-cell .ripple-wave {
  5727. z-index: 0;
  5728. }
  5729. [class*="ripple-color-"] {
  5730. --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
  5731. }
  5732. /* === Icon === */
  5733. .f7-icons,
  5734. .material-icons {
  5735. width: 1em;
  5736. height: 1em;
  5737. }
  5738. i.icon {
  5739. display: inline-block;
  5740. vertical-align: middle;
  5741. background-size: 100% auto;
  5742. background-position: center;
  5743. background-repeat: no-repeat;
  5744. font-style: normal;
  5745. position: relative;
  5746. }
  5747. .icon-back:after,
  5748. .icon-prev:after,
  5749. .icon-forward:after,
  5750. .icon-next:after {
  5751. font-family: 'framework7-core-icons';
  5752. font-weight: normal;
  5753. font-style: normal;
  5754. line-height: 1;
  5755. letter-spacing: normal;
  5756. text-transform: none;
  5757. white-space: nowrap;
  5758. word-wrap: normal;
  5759. direction: ltr;
  5760. -webkit-font-smoothing: antialiased;
  5761. text-rendering: optimizeLegibility;
  5762. -moz-osx-font-smoothing: grayscale;
  5763. font-feature-settings: "liga";
  5764. text-align: center;
  5765. display: block;
  5766. width: 100%;
  5767. height: 100%;
  5768. font-size: 20px;
  5769. }
  5770. .icon[class*="color-"] {
  5771. color: var(--f7-theme-color);
  5772. }
  5773. .ios .icon-back,
  5774. .ios .icon-prev,
  5775. .ios .icon-forward,
  5776. .ios .icon-next {
  5777. width: 12px;
  5778. height: 20px;
  5779. line-height: 20px;
  5780. }
  5781. .ios .icon-back:after,
  5782. .ios .icon-prev:after,
  5783. .ios .icon-forward:after,
  5784. .ios .icon-next:after {
  5785. line-height: inherit;
  5786. }
  5787. .ios .icon-prev:after,
  5788. .ios .icon-next:after {
  5789. font-size: 16px;
  5790. }
  5791. .ios .icon-back:after,
  5792. .ios .icon-prev:after {
  5793. content: 'chevron_left_ios';
  5794. }
  5795. .ios .icon-forward:after,
  5796. .ios .icon-next:after {
  5797. content: 'chevron_right_ios';
  5798. }
  5799. .md .icon-back,
  5800. .md .icon-forward,
  5801. .md .icon-next,
  5802. .md .icon-prev {
  5803. width: 24px;
  5804. height: 24px;
  5805. }
  5806. .md .icon-back:after,
  5807. .md .icon-forward:after,
  5808. .md .icon-next:after,
  5809. .md .icon-prev:after {
  5810. line-height: 1.2;
  5811. }
  5812. .md .icon-back:after {
  5813. content: 'arrow_left_md';
  5814. }
  5815. .md .icon-forward:after {
  5816. content: 'arrow_right_md';
  5817. }
  5818. .md .icon-next:after {
  5819. content: 'chevron_right_md';
  5820. }
  5821. .md .icon-prev:after {
  5822. content: 'chevron_left_md';
  5823. }
  5824. .aurora .f7-icons,
  5825. .aurora .material-icons {
  5826. font-size: 18px;
  5827. }
  5828. .aurora .icon-back,
  5829. .aurora .icon-prev,
  5830. .aurora .icon-forward,
  5831. .aurora .icon-next {
  5832. width: 9px;
  5833. height: 14px;
  5834. line-height: 14px;
  5835. }
  5836. .aurora .icon-back:after,
  5837. .aurora .icon-prev:after,
  5838. .aurora .icon-forward:after,
  5839. .aurora .icon-next:after {
  5840. line-height: inherit;
  5841. }
  5842. .aurora .icon-back:after,
  5843. .aurora .icon-prev:after {
  5844. content: 'chevron_left_aurora';
  5845. }
  5846. .aurora .icon-forward:after,
  5847. .aurora .icon-next:after {
  5848. content: 'chevron_right_aurora';
  5849. }
  5850. .custom-modal-backdrop {
  5851. z-index: 10500;
  5852. }
  5853. .custom-modal-backdrop,
  5854. .actions-backdrop,
  5855. .dialog-backdrop,
  5856. .popover-backdrop,
  5857. .popup-backdrop,
  5858. .preloader-backdrop,
  5859. .sheet-backdrop,
  5860. .fab-backdrop {
  5861. position: absolute;
  5862. left: 0;
  5863. top: 0;
  5864. width: 100%;
  5865. height: 100%;
  5866. background: rgba(0, 0, 0, 0.4);
  5867. z-index: 13000;
  5868. visibility: hidden;
  5869. opacity: 0;
  5870. transition-duration: 400ms;
  5871. }
  5872. .custom-modal-backdrop.not-animated,
  5873. .actions-backdrop.not-animated,
  5874. .dialog-backdrop.not-animated,
  5875. .popover-backdrop.not-animated,
  5876. .popup-backdrop.not-animated,
  5877. .preloader-backdrop.not-animated,
  5878. .sheet-backdrop.not-animated,
  5879. .fab-backdrop.not-animated {
  5880. transition-duration: 0ms;
  5881. }
  5882. .custom-modal-backdrop.backdrop-in,
  5883. .actions-backdrop.backdrop-in,
  5884. .dialog-backdrop.backdrop-in,
  5885. .popover-backdrop.backdrop-in,
  5886. .popup-backdrop.backdrop-in,
  5887. .preloader-backdrop.backdrop-in,
  5888. .sheet-backdrop.backdrop-in,
  5889. .fab-backdrop.backdrop-in {
  5890. visibility: visible;
  5891. opacity: 1;
  5892. }
  5893. /* === Appbar === */
  5894. :root {
  5895. /*
  5896. --f7-appbar-offset: var(--f7-appbar-height);
  5897. --f7-appbar-extra-offset: 0px;
  5898. --f7-appbar-bg-color: var(--f7-bars-bg-color);
  5899. --f7-appbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  5900. --f7-appbar-bg-image: var(--f7-bars-bg-image);
  5901. --f7-appbar-border-color: var(--f7-bars-border-color);
  5902. --f7-appbar-link-color: var(--f7-bars-link-color);
  5903. --f7-appbar-text-color: var(--f7-bars-text-color);
  5904. */
  5905. --f7-appbar-shadow-image: none;
  5906. }
  5907. .ios {
  5908. --f7-appbar-height: 44px;
  5909. --f7-appbar-inner-padding-left: 8px;
  5910. --f7-appbar-inner-padding-right: 8px;
  5911. }
  5912. .md {
  5913. --f7-appbar-height: 48px;
  5914. --f7-appbar-inner-padding-left: 16px;
  5915. --f7-appbar-inner-padding-right: 16px;
  5916. }
  5917. .aurora {
  5918. --f7-appbar-height: 38px;
  5919. --f7-appbar-inner-padding-left: 16px;
  5920. --f7-appbar-inner-padding-right: 16px;
  5921. }
  5922. .appbar {
  5923. position: relative;
  5924. left: 0;
  5925. top: 0;
  5926. width: 100%;
  5927. z-index: 500;
  5928. -webkit-backface-visibility: hidden;
  5929. backface-visibility: hidden;
  5930. box-sizing: border-box;
  5931. margin: 0;
  5932. transform: translate3d(0, 0, 0);
  5933. height: calc(var(--f7-appbar-height) + var(--f7-safe-area-top));
  5934. background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
  5935. background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color));
  5936. color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
  5937. font-size: var(--f7-appbar-font-size);
  5938. z-index: 7000;
  5939. }
  5940. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  5941. .ios-translucent-bars .appbar {
  5942. background-color: rgba(var(--f7-appbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  5943. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  5944. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  5945. }
  5946. }
  5947. .appbar .panel ~ .appbar {
  5948. z-index: 5500;
  5949. }
  5950. .appbar a {
  5951. color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  5952. }
  5953. .appbar a.link {
  5954. display: flex;
  5955. justify-content: flex-start;
  5956. line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
  5957. height: var(--f7-appbar-link-height, var(--f7-appbar-height));
  5958. }
  5959. .appbar .left,
  5960. .appbar .center,
  5961. .appbar .right {
  5962. display: flex;
  5963. align-items: center;
  5964. }
  5965. .appbar.no-hairline:after,
  5966. .appbar.no-border:after {
  5967. display: none !important;
  5968. }
  5969. .appbar.no-hairline .title-large:after,
  5970. .appbar.no-border .title-large:after {
  5971. display: none !important;
  5972. }
  5973. .appbar.no-shadow:before {
  5974. display: none !important;
  5975. }
  5976. .appbar:after,
  5977. .appbar:before {
  5978. -webkit-backface-visibility: hidden;
  5979. backface-visibility: hidden;
  5980. }
  5981. .appbar:after {
  5982. content: '';
  5983. position: absolute;
  5984. background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
  5985. display: block;
  5986. z-index: 15;
  5987. top: auto;
  5988. right: auto;
  5989. bottom: 0;
  5990. left: 0;
  5991. height: 1px;
  5992. width: 100%;
  5993. transform-origin: 50% 100%;
  5994. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  5995. }
  5996. .appbar:before {
  5997. content: '';
  5998. position: absolute;
  5999. right: 0;
  6000. width: 100%;
  6001. top: 100%;
  6002. bottom: auto;
  6003. height: 8px;
  6004. pointer-events: none;
  6005. background: var(--f7-appbar-shadow-image);
  6006. }
  6007. .appbar:after {
  6008. z-index: 1;
  6009. }
  6010. .appbar ~ * {
  6011. --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px) + var(--f7-safe-area-top));
  6012. }
  6013. .appbar ~ .views,
  6014. .appbar ~ .view,
  6015. .appbar ~ .appbar {
  6016. --f7-safe-area-top: 0px;
  6017. }
  6018. .appbar ~ .panel .view,
  6019. .appbar ~ .panel .page,
  6020. .appbar ~ .panel .page-content {
  6021. --f7-safe-area-top: 0px;
  6022. }
  6023. .appbar-inner {
  6024. position: absolute;
  6025. left: 0;
  6026. top: var(--f7-safe-area-top);
  6027. width: 100%;
  6028. height: var(--f7-appbar-height);
  6029. display: flex;
  6030. align-items: center;
  6031. justify-content: space-between;
  6032. box-sizing: border-box;
  6033. padding: 0 calc(var(--f7-appbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-appbar-inner-padding-left) + var(--f7-safe-area-left));
  6034. }
  6035. .appbar-inner.stacked {
  6036. display: none;
  6037. }
  6038. /* === Dialog === */
  6039. :root {
  6040. --f7-dialog-button-text-color: var(--f7-theme-color);
  6041. --f7-dialog-button-text-align: center;
  6042. --f7-dialog-input-bg-color: #fff;
  6043. }
  6044. :root .theme-dark,
  6045. :root.theme-dark {
  6046. --f7-dialog-text-color: #fff;
  6047. }
  6048. .ios {
  6049. --f7-dialog-box-shadow: none;
  6050. --f7-dialog-width: 270px;
  6051. --f7-dialog-inner-padding: 16px;
  6052. --f7-dialog-border-radius: 13px;
  6053. --f7-dialog-text-align: center;
  6054. --f7-dialog-font-size: 14px;
  6055. --f7-dialog-title-text-color: inherit;
  6056. --f7-dialog-title-font-size: 18px;
  6057. --f7-dialog-title-font-weight: 600;
  6058. --f7-dialog-title-line-height: inherit;
  6059. --f7-dialog-button-font-size: 17px;
  6060. --f7-dialog-button-height: 44px;
  6061. --f7-dialog-button-letter-spacing: 0;
  6062. --f7-dialog-button-font-weight: 400;
  6063. --f7-dialog-button-text-transform: none;
  6064. --f7-dialog-input-border-radius: 4px;
  6065. --f7-dialog-input-font-size: 14px;
  6066. --f7-dialog-input-height: 32px;
  6067. --f7-dialog-input-border-width: 1px;
  6068. --f7-dialog-input-placeholder-color: #a9a9a9;
  6069. --f7-dialog-preloader-size: 34px;
  6070. --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
  6071. --f7-dialog-bg-color-rgb: 255, 255, 255;
  6072. --f7-dialog-text-color: #000;
  6073. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  6074. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  6075. --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
  6076. }
  6077. .ios .theme-dark,
  6078. .ios.theme-dark {
  6079. --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
  6080. --f7-dialog-bg-color-rgb: 45, 45, 45;
  6081. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  6082. --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  6083. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  6084. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
  6085. }
  6086. .md {
  6087. --f7-dialog-box-shadow: var(--f7-elevation-24);
  6088. --f7-dialog-width: 280px;
  6089. --f7-dialog-inner-padding: 24px;
  6090. --f7-dialog-border-radius: 4px;
  6091. --f7-dialog-text-align: left;
  6092. --f7-dialog-font-size: 16px;
  6093. --f7-dialog-title-font-size: 20px;
  6094. --f7-dialog-title-font-weight: 500;
  6095. --f7-dialog-title-line-height: 1.3;
  6096. --f7-dialog-button-font-size: 14px;
  6097. --f7-dialog-button-height: 36px;
  6098. --f7-dialog-button-letter-spacing: 0.03em;
  6099. --f7-dialog-button-font-weight: 500;
  6100. --f7-dialog-button-text-transform: uppercase;
  6101. --f7-dialog-input-border-radius: 0px;
  6102. --f7-dialog-input-font-size: 16px;
  6103. --f7-dialog-input-height: 36px;
  6104. --f7-dialog-input-border-color: transparent;
  6105. --f7-dialog-input-border-width: 0px;
  6106. --f7-dialog-preloader-size: 32px;
  6107. --f7-dialog-bg-color: #fff;
  6108. --f7-dialog-text-color: rgba(0, 0, 0, 0.54);
  6109. --f7-dialog-title-text-color: #212121;
  6110. --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  6111. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
  6112. }
  6113. .md .theme-dark,
  6114. .md.theme-dark {
  6115. --f7-dialog-bg-color: #1c1c1d;
  6116. --f7-dialog-title-text-color: #fff;
  6117. --f7-dialog-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  6118. --f7-dialog-input-bg-color: transparent;
  6119. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  6120. }
  6121. .aurora {
  6122. --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  6123. --f7-dialog-width: 300px;
  6124. --f7-dialog-inner-padding: 20px;
  6125. --f7-dialog-border-radius: 4px;
  6126. --f7-dialog-text-align: left;
  6127. --f7-dialog-font-size: 14px;
  6128. --f7-dialog-title-font-size: 14px;
  6129. --f7-dialog-title-font-weight: 700;
  6130. --f7-dialog-title-line-height: inherit;
  6131. --f7-dialog-button-font-size: 13px;
  6132. --f7-dialog-button-height: 28px;
  6133. --f7-dialog-button-letter-spacing: 0;
  6134. --f7-dialog-button-font-weight: 500;
  6135. --f7-dialog-button-text-transform: none;
  6136. /*
  6137. --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
  6138. --f7-dialog-button-hover-bg-color: var(--f7-theme-color-tint);
  6139. */
  6140. --f7-dialog-input-border-radius: 4px;
  6141. --f7-dialog-input-font-size: 13px;
  6142. --f7-dialog-input-height: 24px;
  6143. --f7-dialog-input-border-width: 1px;
  6144. --f7-dialog-preloader-size: 24px;
  6145. --f7-dialog-bg-color: #fff;
  6146. --f7-dialog-title-text-color: inherit;
  6147. --f7-dialog-text-color: #000;
  6148. --f7-dialog-button-text-color: #fff;
  6149. --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
  6150. --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
  6151. }
  6152. .aurora .theme-dark,
  6153. .aurora.theme-dark {
  6154. --f7-dialog-bg-color: #1c1c1d;
  6155. --f7-dialog-title-text-color: #fff;
  6156. --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
  6157. --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  6158. --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  6159. }
  6160. .dialog {
  6161. position: absolute;
  6162. z-index: 13500;
  6163. left: 50%;
  6164. margin-top: 0;
  6165. top: 50%;
  6166. overflow: hidden;
  6167. opacity: 0;
  6168. transform: translate3d(0, -50%, 0) scale(1.185);
  6169. transition-property: transform, opacity;
  6170. display: none;
  6171. transition-duration: 400ms;
  6172. box-shadow: var(--f7-dialog-box-shadow);
  6173. width: var(--f7-dialog-width);
  6174. margin-left: calc(-1 * var(--f7-dialog-width) / 2);
  6175. border-radius: var(--f7-dialog-border-radius);
  6176. text-align: var(--f7-dialog-text-align);
  6177. color: var(--f7-dialog-text-color);
  6178. font-size: var(--f7-dialog-font-size);
  6179. background: var(--f7-dialog-bg-color);
  6180. will-change: transform, opacity;
  6181. }
  6182. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  6183. .ios-translucent-modals .dialog {
  6184. background-color: rgba(var(--f7-dialog-bg-color-rgb), 0.8);
  6185. -webkit-backdrop-filter: saturate(180%) blur(20px);
  6186. backdrop-filter: saturate(180%) blur(20px);
  6187. }
  6188. }
  6189. .dialog.modal-in {
  6190. opacity: 1;
  6191. transform: translate3d(0, -50%, 0) scale(1);
  6192. }
  6193. .dialog.modal-out {
  6194. opacity: 0;
  6195. z-index: 13499;
  6196. }
  6197. .dialog.not-animated {
  6198. transition-duration: 0ms;
  6199. }
  6200. .dialog-inner {
  6201. position: relative;
  6202. padding: var(--f7-dialog-inner-padding);
  6203. }
  6204. .dialog-title {
  6205. color: var(--f7-dialog-title-text-color);
  6206. font-size: var(--f7-dialog-title-font-size);
  6207. font-weight: var(--f7-dialog-title-font-weight);
  6208. line-height: var(--f7-dialog-title-line-height);
  6209. }
  6210. .dialog-buttons {
  6211. position: relative;
  6212. display: flex;
  6213. }
  6214. .dialog-buttons-vertical .dialog-buttons {
  6215. display: block;
  6216. height: auto !important;
  6217. }
  6218. .dialog-button {
  6219. box-sizing: border-box;
  6220. overflow: hidden;
  6221. position: relative;
  6222. white-space: nowrap;
  6223. text-overflow: ellipsis;
  6224. color: var(--f7-dialog-button-text-color);
  6225. font-size: var(--f7-dialog-button-font-size);
  6226. height: var(--f7-dialog-button-height);
  6227. line-height: var(--f7-dialog-button-height);
  6228. letter-spacing: var(--f7-dialog-button-letter-spacing);
  6229. text-align: var(--f7-dialog-button-text-align);
  6230. font-weight: var(--f7-dialog-button-font-weight);
  6231. text-transform: var(--f7-dialog-button-text-transform);
  6232. display: block;
  6233. cursor: pointer;
  6234. }
  6235. .dialog-button.active-state {
  6236. background-color: var(--f7-dialog-button-pressed-bg-color);
  6237. }
  6238. .dialog-no-buttons .dialog-buttons {
  6239. display: none;
  6240. }
  6241. .dialog-input-field {
  6242. position: relative;
  6243. }
  6244. input.dialog-input[type] {
  6245. box-sizing: border-box;
  6246. margin: 0;
  6247. margin-top: 15px;
  6248. border-radius: var(--f7-dialog-input-border-radius);
  6249. -webkit-appearance: none;
  6250. -moz-appearance: none;
  6251. appearance: none;
  6252. width: 100%;
  6253. display: block;
  6254. font-family: inherit;
  6255. box-shadow: none;
  6256. font-size: var(--f7-dialog-input-font-size);
  6257. height: var(--f7-dialog-input-height);
  6258. background-color: var(--f7-dialog-input-bg-color);
  6259. border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
  6260. }
  6261. input.dialog-input[type]::-webkit-input-placeholder {
  6262. color: var(--f7-dialog-input-placeholder-color);
  6263. }
  6264. input.dialog-input[type]::placeholder {
  6265. color: var(--f7-dialog-input-placeholder-color);
  6266. }
  6267. .dialog-input-double input.dialog-input {
  6268. border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
  6269. }
  6270. .dialog-input-double + .dialog-input-double input.dialog-input {
  6271. border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
  6272. }
  6273. .dialog-preloader .preloader {
  6274. --f7-preloader-size: var(--f7-dialog-preloader-size);
  6275. }
  6276. html.with-modal-dialog .page-content {
  6277. overflow: hidden;
  6278. -webkit-overflow-scrolling: auto;
  6279. }
  6280. .ios .dialog.modal-out {
  6281. transform: translate3d(0, -50%, 0) scale(1);
  6282. }
  6283. .ios .dialog-inner {
  6284. border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
  6285. }
  6286. .ios .dialog-inner:after {
  6287. content: '';
  6288. position: absolute;
  6289. background-color: var(--f7-dialog-border-divider-color);
  6290. display: block;
  6291. z-index: 15;
  6292. top: auto;
  6293. right: auto;
  6294. bottom: 0;
  6295. left: 0;
  6296. height: 1px;
  6297. width: 100%;
  6298. transform-origin: 50% 100%;
  6299. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6300. }
  6301. .ios .dialog-title + .dialog-text {
  6302. margin-top: 5px;
  6303. }
  6304. .ios .dialog-buttons {
  6305. height: 44px;
  6306. justify-content: center;
  6307. }
  6308. .ios .dialog-button {
  6309. width: 100%;
  6310. padding: 0 5px;
  6311. -webkit-box-flex: 1;
  6312. -ms-flex: 1;
  6313. }
  6314. .ios .dialog-button:after {
  6315. content: '';
  6316. position: absolute;
  6317. background-color: var(--f7-dialog-border-divider-color);
  6318. display: block;
  6319. z-index: 15;
  6320. top: 0;
  6321. right: 0;
  6322. bottom: auto;
  6323. left: auto;
  6324. width: 1px;
  6325. height: 100%;
  6326. transform-origin: 100% 50%;
  6327. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  6328. }
  6329. .ios .dialog-button:first-child {
  6330. border-radius: 0 0 0 var(--f7-dialog-border-radius);
  6331. }
  6332. .ios .dialog-button:last-child {
  6333. border-radius: 0 0 var(--f7-dialog-border-radius) 0;
  6334. }
  6335. .ios .dialog-button:last-child:after {
  6336. display: none !important;
  6337. }
  6338. .ios .dialog-button:first-child:last-child {
  6339. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  6340. }
  6341. .ios .dialog-button.dialog-button-bold {
  6342. font-weight: 500;
  6343. }
  6344. .ios .dialog-button[class*="color-"] {
  6345. --f7-dialog-button-text-color: var(--f7-theme-color);
  6346. }
  6347. .ios .dialog-buttons-vertical .dialog-buttons {
  6348. height: auto;
  6349. }
  6350. .ios .dialog-buttons-vertical .dialog-button {
  6351. border-radius: 0;
  6352. }
  6353. .ios .dialog-buttons-vertical .dialog-button:after {
  6354. content: '';
  6355. position: absolute;
  6356. background-color: var(--f7-dialog-border-divider-color);
  6357. display: block;
  6358. z-index: 15;
  6359. top: auto;
  6360. right: auto;
  6361. bottom: 0;
  6362. left: 0;
  6363. height: 1px;
  6364. width: 100%;
  6365. transform-origin: 50% 100%;
  6366. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  6367. }
  6368. .ios .dialog-buttons-vertical .dialog-button:last-child {
  6369. border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
  6370. }
  6371. .ios .dialog-buttons-vertical .dialog-button:last-child:after {
  6372. display: none !important;
  6373. }
  6374. .ios .dialog-no-buttons .dialog-inner {
  6375. border-radius: var(--f7-dialog-border-radius);
  6376. }
  6377. .ios .dialog-no-buttons .dialog-inner:after {
  6378. display: none !important;
  6379. }
  6380. .ios .dialog-input-field {
  6381. margin-top: 15px;
  6382. }
  6383. .ios .dialog-input {
  6384. padding: 0 5px;
  6385. }
  6386. .ios .dialog-input + .dialog-input {
  6387. margin-top: 5px;
  6388. }
  6389. .ios .dialog-input-double + .dialog-input-double {
  6390. margin-top: 0;
  6391. }
  6392. .ios .dialog-input-double + .dialog-input-double .dialog-input {
  6393. border-top: 0;
  6394. margin-top: 0;
  6395. }
  6396. .ios .dialog-preloader .dialog-title ~ .preloader,
  6397. .ios .dialog-preloader .dialog-text ~ .preloader {
  6398. margin-top: 15px;
  6399. }
  6400. .ios .dialog-progress .dialog-title ~ .progressbar,
  6401. .ios .dialog-progress .dialog-text ~ .progressbar,
  6402. .ios .dialog-progress .dialog-title ~ .progressbar-infinite,
  6403. .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
  6404. margin-top: 15px;
  6405. }
  6406. .md .dialog.modal-out {
  6407. transform: translate3d(0, -50%, 0) scale(0.815);
  6408. }
  6409. .md .dialog-title + .dialog-text {
  6410. margin-top: 20px;
  6411. }
  6412. .md .dialog-text {
  6413. line-height: 1.5;
  6414. }
  6415. .md .dialog-buttons {
  6416. height: 48px;
  6417. padding: 6px 8px;
  6418. overflow: hidden;
  6419. box-sizing: border-box;
  6420. justify-content: flex-end;
  6421. }
  6422. .md .dialog-button {
  6423. border-radius: 4px;
  6424. min-width: 64px;
  6425. padding: 0 8px;
  6426. border: none;
  6427. transition-duration: 300ms;
  6428. transform: translate3d(0, 0, 0);
  6429. }
  6430. .md .dialog-button.dialog-button-bold {
  6431. font-weight: 700;
  6432. }
  6433. .md .dialog-button + .dialog-button {
  6434. margin-left: 4px;
  6435. }
  6436. .md .dialog-button[class*="color-"] {
  6437. --f7-dialog-button-text-color: var(--f7-theme-color);
  6438. }
  6439. .md .dialog-buttons-vertical .dialog-buttons {
  6440. padding: 0 0 8px 0;
  6441. }
  6442. .md .dialog-buttons-vertical .dialog-button {
  6443. margin-left: 0;
  6444. text-align: right;
  6445. height: 48px;
  6446. line-height: 48px;
  6447. border-radius: 0;
  6448. padding-left: 16px;
  6449. padding-right: 16px;
  6450. }
  6451. .md .dialog-input {
  6452. padding: 0;
  6453. transition-duration: 200ms;
  6454. position: relative;
  6455. }
  6456. .md .dialog-input + .dialog-input {
  6457. margin-top: 16px;
  6458. }
  6459. .md .dialog-preloader .dialog-title,
  6460. .md .dialog-progress .dialog-title,
  6461. .md .dialog-preloader .dialog-inner,
  6462. .md .dialog-progress .dialog-inner {
  6463. text-align: center;
  6464. }
  6465. .md .dialog-preloader .dialog-title ~ .preloader,
  6466. .md .dialog-preloader .dialog-text ~ .preloader {
  6467. margin-top: 20px;
  6468. }
  6469. .md .dialog-progress .dialog-title ~ .progressbar,
  6470. .md .dialog-progress .dialog-text ~ .progressbar,
  6471. .md .dialog-progress .dialog-title ~ .progressbar-infinite,
  6472. .md .dialog-progress .dialog-text ~ .progressbar-infinite {
  6473. margin-top: 16px;
  6474. }
  6475. .aurora .dialog.modal-out {
  6476. transform: translate3d(0, -50%, 0) scale(0.815);
  6477. }
  6478. .aurora .dialog-title + .dialog-text {
  6479. margin-top: 10px;
  6480. }
  6481. .aurora .dialog-text {
  6482. line-height: 1.5;
  6483. }
  6484. .aurora .dialog-buttons {
  6485. padding: var(--f7-dialog-inner-padding);
  6486. padding-top: 0;
  6487. overflow: hidden;
  6488. box-sizing: border-box;
  6489. justify-content: flex-end;
  6490. }
  6491. .aurora .dialog-button {
  6492. border-radius: 4px;
  6493. min-width: 64px;
  6494. padding: 0 10px;
  6495. border: none;
  6496. transition-duration: 300ms;
  6497. transform: translate3d(0, 0, 0);
  6498. background: var(--f7-theme-color);
  6499. }
  6500. .aurora .dialog-button.dialog-button-bold {
  6501. font-weight: 600;
  6502. }
  6503. .aurora .dialog-button + .dialog-button {
  6504. margin-left: 16px;
  6505. }
  6506. .aurora .dialog-button.active-state {
  6507. background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
  6508. }
  6509. .aurora.device-desktop .dialog-button:not(.active-state):not(.no-hover):hover {
  6510. background-color: var(--f7-dialog-button-hover-bg-color, var(--f7-theme-color-tint));
  6511. }
  6512. .aurora .dialog-buttons-vertical .dialog-buttons {
  6513. display: flex;
  6514. flex-direction: column;
  6515. align-items: flex-end;
  6516. }
  6517. .aurora .dialog-buttons-vertical .dialog-button {
  6518. margin-left: 0;
  6519. flex-shrink: 0;
  6520. }
  6521. .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
  6522. margin-top: 5px;
  6523. }
  6524. .aurora .dialog-input-field {
  6525. margin-top: 10px;
  6526. }
  6527. .aurora .dialog-input-field input.dialog-input {
  6528. margin-top: 0;
  6529. }
  6530. .aurora .dialog-input {
  6531. padding: 0 4px;
  6532. transition-duration: 200ms;
  6533. position: relative;
  6534. }
  6535. .aurora .dialog-input + .dialog-input {
  6536. margin-top: 10px;
  6537. }
  6538. .aurora .dialog-input-double + .dialog-input-double {
  6539. margin-top: 0;
  6540. }
  6541. .aurora .dialog-input-double + .dialog-input-double .dialog-input {
  6542. border-top: 0;
  6543. margin-top: 0;
  6544. }
  6545. .aurora .dialog-preloader .dialog-title,
  6546. .aurora .dialog-progress .dialog-title,
  6547. .aurora .dialog-preloader .dialog-inner,
  6548. .aurora .dialog-progress .dialog-inner {
  6549. text-align: center;
  6550. }
  6551. .aurora .dialog-preloader .dialog-title ~ .preloader,
  6552. .aurora .dialog-preloader .dialog-text ~ .preloader {
  6553. margin-top: 10px;
  6554. }
  6555. .aurora .dialog-progress .dialog-title ~ .progressbar,
  6556. .aurora .dialog-progress .dialog-text ~ .progressbar,
  6557. .aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
  6558. .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
  6559. margin-top: 15px;
  6560. }
  6561. /* === Popup === */
  6562. :root {
  6563. --f7-popup-border-radius: 0px;
  6564. --f7-popup-tablet-width: 630px;
  6565. --f7-popup-tablet-height: 630px;
  6566. --f7-popup-transition-duration: 400ms;
  6567. --f7-popup-push-border-radius: 10px;
  6568. --f7-popup-push-offset: var(--f7-safe-area-top);
  6569. /*
  6570. --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
  6571. */
  6572. }
  6573. .ios {
  6574. --f7-popup-tablet-border-radius: 5px;
  6575. --f7-popup-box-shadow: none;
  6576. }
  6577. .md {
  6578. --f7-popup-tablet-border-radius: 4px;
  6579. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  6580. }
  6581. .aurora {
  6582. --f7-popup-tablet-border-radius: 4px;
  6583. --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
  6584. }
  6585. .popup-backdrop {
  6586. z-index: 10500;
  6587. }
  6588. .popup {
  6589. position: absolute;
  6590. left: 0;
  6591. top: 0px;
  6592. width: 100%;
  6593. height: 100%;
  6594. display: none;
  6595. box-sizing: border-box;
  6596. transition-property: transform;
  6597. transform: translate3d(0, 100vh, 0);
  6598. background: #fff;
  6599. z-index: 11000;
  6600. overflow: hidden;
  6601. border-radius: var(--f7-popup-border-radius);
  6602. }
  6603. .theme-dark .popup,
  6604. .popup.theme-dark {
  6605. background: #000;
  6606. }
  6607. .popup.modal-in,
  6608. .popup.modal-out {
  6609. transition-duration: var(--f7-popup-transition-duration);
  6610. }
  6611. .popup.not-animated {
  6612. transition-duration: 0ms;
  6613. }
  6614. .popup.modal-in {
  6615. display: block;
  6616. transform: translate3d(0, 0, 0);
  6617. }
  6618. .popup.modal-out {
  6619. transform: translate3d(0, 100vh, 0);
  6620. }
  6621. .popup.swipe-close-to-top.modal-out {
  6622. transform: translate3d(0, -100vh, 0);
  6623. }
  6624. @media (min-width: 630px) and (min-height: 630px) {
  6625. .popup:not(.popup-tablet-fullscreen) {
  6626. --f7-safe-area-top: 0px;
  6627. --f7-safe-area-bottom: 0px;
  6628. width: var(--f7-popup-tablet-width);
  6629. height: var(--f7-popup-tablet-height);
  6630. left: 50%;
  6631. top: 50%;
  6632. margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
  6633. margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
  6634. transform: translate3d(0, 100vh, 0);
  6635. box-shadow: var(--f7-popup-box-shadow);
  6636. border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
  6637. }
  6638. .popup:not(.popup-tablet-fullscreen).modal-in {
  6639. transform: translate3d(0, 0, 0);
  6640. }
  6641. .popup:not(.popup-tablet-fullscreen).modal-out {
  6642. transform: translate3d(0, 100vh, 0);
  6643. }
  6644. .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
  6645. transform: translate3d(0, -100vh, 0);
  6646. }
  6647. .popup:not(.popup-tablet-fullscreen).popup-behind {
  6648. transform: translate3d(0, 0, 0) scale(0.9);
  6649. }
  6650. }
  6651. html.with-modal-popup .framework7-root > .views .page-content,
  6652. html.with-modal-popup .framework7-root > .view .page-content,
  6653. html.with-modal-popup .framework7-root > .panel .page-content {
  6654. overflow: hidden;
  6655. -webkit-overflow-scrolling: auto;
  6656. }
  6657. html.with-modal-popup-push .popup-push,
  6658. html.with-modal-popup-push-closing .popup-push {
  6659. top: calc(var(--f7-popup-push-offset) + 10px);
  6660. height: calc(100% - var(--f7-popup-push-offset) - 10px);
  6661. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6662. --f7-safe-area-top: 0px;
  6663. }
  6664. html.with-modal-popup-push .popup-push .view,
  6665. html.with-modal-popup-push-closing .popup-push .view,
  6666. html.with-modal-popup-push .popup-push .page,
  6667. html.with-modal-popup-push-closing .popup-push .page {
  6668. --f7-safe-area-top: 0px;
  6669. }
  6670. html.with-modal-popup-push .framework7-root,
  6671. html.with-modal-popup-push-closing .framework7-root {
  6672. background: #000;
  6673. }
  6674. html.with-modal-popup-push .framework7-root > .views,
  6675. html.with-modal-popup-push-closing .framework7-root > .views,
  6676. html.with-modal-popup-push .framework7-root > .view,
  6677. html.with-modal-popup-push-closing .framework7-root > .view {
  6678. transition-duration: var(--f7-popup-transition-duration);
  6679. }
  6680. html.with-modal-popup-push.theme-dark .framework7-root > .views:after,
  6681. html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
  6682. html.with-modal-popup-push.theme-dark .framework7-root > .view:after,
  6683. html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
  6684. html.with-modal-popup-push .theme-dark .framework7-root > .views:after,
  6685. html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
  6686. html.with-modal-popup-push .theme-dark .framework7-root > .view:after,
  6687. html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
  6688. html.with-modal-popup-push .theme-dark.framework7-root > .views:after,
  6689. html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
  6690. html.with-modal-popup-push .theme-dark.framework7-root > .view:after,
  6691. html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
  6692. html.with-modal-popup-push .framework7-root > .views.theme-dark:after,
  6693. html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
  6694. html.with-modal-popup-push .framework7-root > .view.theme-dark:after,
  6695. html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
  6696. content: '';
  6697. position: absolute;
  6698. pointer-events: none;
  6699. left: 0;
  6700. top: 0;
  6701. width: 100%;
  6702. height: 100%;
  6703. background: rgba(255, 255, 255, 0.1);
  6704. z-index: 13000;
  6705. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6706. opacity: 1;
  6707. animation: popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards;
  6708. }
  6709. html.with-modal-popup-push .framework7-root > .views,
  6710. html.with-modal-popup-push .framework7-root > .view {
  6711. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6712. transform: translate3d(0, 0, 0px) scale(var(--f7-popup-push-scale, 1)) !important;
  6713. }
  6714. html.with-modal-popup-push .popup:after {
  6715. content: '';
  6716. pointer-events: none;
  6717. position: absolute;
  6718. left: 0;
  6719. top: 0;
  6720. width: 100%;
  6721. height: 100%;
  6722. background: rgba(0, 0, 0, 0.4);
  6723. z-index: 13000;
  6724. transition-duration: var(--f7-popup-transition-duration);
  6725. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6726. opacity: 0;
  6727. }
  6728. html.with-modal-popup-push.theme-dark .popup:after,
  6729. html.with-modal-popup-push .theme-dark .popup:after,
  6730. html.with-modal-popup-push .theme-dark.popup:after {
  6731. background: rgba(255, 255, 255, 0.05);
  6732. }
  6733. html.with-modal-popup-push .popup-behind {
  6734. transform: translate3d(0, 0px, 0px) scale(var(--f7-popup-push-scale, 1));
  6735. }
  6736. html.with-modal-popup-push .popup-behind:not(.popup-push) {
  6737. border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
  6738. }
  6739. html.with-modal-popup-push .popup-behind.popup-push {
  6740. transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px), 0px) scale(var(--f7-popup-push-scale, 1));
  6741. }
  6742. html.with-modal-popup-push .popup-behind:after {
  6743. opacity: 1;
  6744. pointer-events: auto;
  6745. }
  6746. html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
  6747. html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
  6748. html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
  6749. html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
  6750. html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
  6751. html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
  6752. html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
  6753. html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
  6754. animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
  6755. }
  6756. @keyframes popup-dark-push-overlay-fade-in {
  6757. from {
  6758. opacity: 0;
  6759. }
  6760. to {
  6761. opacity: 1;
  6762. }
  6763. }
  6764. @keyframes popup-dark-push-overlay-fade-out {
  6765. from {
  6766. opacity: 1;
  6767. }
  6768. to {
  6769. opacity: 0;
  6770. }
  6771. }
  6772. /* === Login Screen === */
  6773. :root {
  6774. --f7-login-screen-blocks-max-width: 480px;
  6775. /*
  6776. --f7-login-screen-list-button-text-color: var(--f7-theme-color);
  6777. */
  6778. --f7-login-screen-title-text-align: center;
  6779. --f7-login-screen-title-text-color: inherit;
  6780. --f7-login-screen-title-letter-spacing: 0;
  6781. --f7-login-screen-title-font-weight: 600;
  6782. --f7-login-screen-title-font-size: 28px;
  6783. --f7-login-screen-content-bg-color: #fff;
  6784. --f7-login-screen-bg-color: #fff;
  6785. }
  6786. :root .theme-dark,
  6787. :root.theme-dark {
  6788. --f7-login-screen-bg-color: #121212;
  6789. --f7-login-screen-content-bg-color: #121212;
  6790. }
  6791. .ios {
  6792. --f7-login-screen-blocks-margin-vertical: 25px;
  6793. }
  6794. .ios .theme-dark,
  6795. .ios.theme-dark {
  6796. --f7-login-screen-bg-color: #000;
  6797. --f7-login-screen-content-bg-color: #000;
  6798. }
  6799. .md {
  6800. --f7-login-screen-blocks-margin-vertical: 24px;
  6801. }
  6802. .aurora {
  6803. --f7-login-screen-blocks-margin-vertical: 15px;
  6804. }
  6805. .login-screen {
  6806. position: absolute;
  6807. left: 0;
  6808. top: 0;
  6809. width: 100%;
  6810. height: 100%;
  6811. display: none;
  6812. box-sizing: border-box;
  6813. transition-property: transform;
  6814. transform: translate3d(0, 100vh, 0);
  6815. background: var(--f7-login-screen-bg-color);
  6816. z-index: 11000;
  6817. }
  6818. .login-screen.modal-in,
  6819. .login-screen.modal-out {
  6820. transition-duration: 400ms;
  6821. }
  6822. .login-screen.not-animated {
  6823. transition-duration: 0ms;
  6824. }
  6825. .login-screen.modal-in {
  6826. display: block;
  6827. transform: translate3d(0, 0, 0);
  6828. }
  6829. .login-screen.modal-out {
  6830. transform: translate3d(0, 100%, 0);
  6831. }
  6832. .login-screen-content,
  6833. .login-screen-page,
  6834. .login-screen .page {
  6835. background: var(--f7-login-screen-content-bg-color);
  6836. }
  6837. .login-screen-content .list-button,
  6838. .login-screen-page .list-button {
  6839. text-align: center;
  6840. color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
  6841. }
  6842. .login-screen-content .login-screen-title,
  6843. .login-screen-page .login-screen-title,
  6844. .login-screen-content .list,
  6845. .login-screen-page .list,
  6846. .login-screen-content .block,
  6847. .login-screen-page .block {
  6848. margin: var(--f7-login-screen-blocks-margin-vertical) auto;
  6849. }
  6850. .login-screen-content .login-screen-title,
  6851. .login-screen-page .login-screen-title,
  6852. .login-screen-content .list,
  6853. .login-screen-page .list,
  6854. .login-screen-content .block,
  6855. .login-screen-page .block,
  6856. .login-screen-content .block-footer,
  6857. .login-screen-page .block-footer,
  6858. .login-screen-content .block-header,
  6859. .login-screen-page .block-header {
  6860. max-width: var(--f7-login-screen-blocks-max-width);
  6861. }
  6862. .login-screen-content .list ul,
  6863. .login-screen-page .list ul {
  6864. background: none;
  6865. }
  6866. .login-screen-content .list ul:before,
  6867. .login-screen-page .list ul:before,
  6868. .login-screen-content .list ul:after,
  6869. .login-screen-page .list ul:after {
  6870. display: none !important;
  6871. }
  6872. .login-screen-content .block-footer,
  6873. .login-screen-page .block-footer,
  6874. .login-screen-content .block-header,
  6875. .login-screen-page .block-header {
  6876. text-align: center;
  6877. margin-left: auto;
  6878. margin-right: auto;
  6879. }
  6880. .login-screen-title {
  6881. text-align: var(--f7-login-screen-title-text-align);
  6882. font-size: var(--f7-login-screen-title-font-size);
  6883. font-weight: var(--f7-login-screen-title-font-weight);
  6884. color: var(--f7-login-screen-title-text-color);
  6885. letter-spacing: var(--f7-login-screen-title-letter-spacing);
  6886. }
  6887. .login-screen-page,
  6888. .login-screen > .view > .page,
  6889. .login-screen > .page {
  6890. display: flex;
  6891. flex-direction: column;
  6892. }
  6893. .login-screen-page .page-content,
  6894. .login-screen > .view > .page .page-content,
  6895. .login-screen > .page .page-content,
  6896. .login-screen-page .login-screen-content,
  6897. .login-screen > .view > .page .login-screen-content,
  6898. .login-screen > .page .login-screen-content {
  6899. margin-top: auto;
  6900. margin-bottom: auto;
  6901. height: auto;
  6902. max-height: 100%;
  6903. width: 100%;
  6904. }
  6905. .theme-dark .login-screen-content .list ul,
  6906. .theme-dark .login-screen-content .block-strong,
  6907. .theme-dark .login-screen-page .list ul,
  6908. .theme-dark .login-screen-page .block-strong,
  6909. .theme-dark.login-screen-page .list ul,
  6910. .theme-dark.login-screen-page .block-strong {
  6911. background-color: transparent;
  6912. }
  6913. /* === Popover === */
  6914. :root {
  6915. --f7-popover-width: 260px;
  6916. }
  6917. .ios {
  6918. --f7-popover-border-radius: 13px;
  6919. --f7-popover-box-shadow: none;
  6920. --f7-popover-actions-icon-size: 28px;
  6921. --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
  6922. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
  6923. }
  6924. .ios .theme-dark,
  6925. .ios.theme-dark {
  6926. --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
  6927. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
  6928. }
  6929. .md {
  6930. --f7-popover-border-radius: 4px;
  6931. --f7-popover-box-shadow: var(--f7-elevation-8);
  6932. --f7-popover-actions-icon-size: 24px;
  6933. --f7-popover-bg-color: #fff;
  6934. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
  6935. }
  6936. .md .theme-dark,
  6937. .md.theme-dark {
  6938. --f7-popover-bg-color: #1c1c1d;
  6939. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
  6940. }
  6941. .aurora {
  6942. --f7-popover-width: 200px;
  6943. --f7-popover-border-radius: 4px;
  6944. --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
  6945. --f7-popover-actions-icon-size: 24px;
  6946. --f7-popover-bg-color: #fff;
  6947. --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
  6948. }
  6949. .aurora .theme-dark,
  6950. .aurora.theme-dark {
  6951. --f7-popover-bg-color: #1c1c1d;
  6952. --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
  6953. }
  6954. .popover {
  6955. width: var(--f7-popover-width);
  6956. z-index: 13500;
  6957. margin: 0;
  6958. top: 0;
  6959. opacity: 0;
  6960. left: 0;
  6961. position: absolute;
  6962. display: none;
  6963. transition-duration: 300ms;
  6964. background-color: var(--f7-popover-bg-color);
  6965. border-radius: var(--f7-popover-border-radius);
  6966. box-shadow: var(--f7-popover-box-shadow);
  6967. will-change: transform, opacity;
  6968. }
  6969. .popover .list {
  6970. margin: 0;
  6971. }
  6972. .popover .list ul {
  6973. background: none;
  6974. }
  6975. .popover .list:first-child ul:before {
  6976. display: none !important;
  6977. }
  6978. .popover .list:last-child ul:after {
  6979. display: none !important;
  6980. }
  6981. .popover .list:first-child ul {
  6982. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  6983. }
  6984. .popover .list:first-child li:first-child,
  6985. .popover .list:first-child li:first-child a,
  6986. .popover .list:first-child li:first-child > label {
  6987. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  6988. }
  6989. .popover .list:last-child ul {
  6990. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  6991. }
  6992. .popover .list:last-child li:last-child,
  6993. .popover .list:last-child li:last-child a,
  6994. .popover .list:last-child li:last-child > label {
  6995. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  6996. }
  6997. .popover .list:first-child:last-child li:first-child:last-child,
  6998. .popover .list:first-child:last-child li:first-child:last-child a,
  6999. .popover .list:first-child:last-child li:first-child:last-child > label,
  7000. .popover .list:first-child:last-child ul {
  7001. border-radius: var(--f7-popover-border-radius);
  7002. }
  7003. .popover .list + .list {
  7004. margin-top: var(--f7-list-margin-vertical);
  7005. }
  7006. .popover.modal-in {
  7007. opacity: 1;
  7008. }
  7009. .popover.not-animated {
  7010. transition-duration: 0ms;
  7011. }
  7012. .popover-inner {
  7013. overflow: auto;
  7014. -webkit-overflow-scrolling: touch;
  7015. }
  7016. .popover-from-actions .item-link i.icon {
  7017. width: var(--f7-popover-actions-icon-size);
  7018. height: var(--f7-popover-actions-icon-size);
  7019. font-size: var(--f7-popover-actions-icon-size);
  7020. }
  7021. .popover-from-actions-bold {
  7022. font-weight: 600;
  7023. }
  7024. .popover-from-actions-label {
  7025. line-height: 1.3;
  7026. position: relative;
  7027. display: flex;
  7028. align-items: center;
  7029. padding: var(--f7-actions-label-padding);
  7030. color: var(--f7-popover-actions-label-text-color);
  7031. font-size: var(--f7-actions-label-font-size);
  7032. justify-content: var(--f7-actions-label-justify-content);
  7033. }
  7034. .popover-from-actions-label:after {
  7035. content: '';
  7036. position: absolute;
  7037. background-color: var(--f7-list-item-border-color);
  7038. display: block;
  7039. z-index: 15;
  7040. top: auto;
  7041. right: auto;
  7042. bottom: 0;
  7043. left: 0;
  7044. height: 1px;
  7045. width: 100%;
  7046. transform-origin: 50% 100%;
  7047. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7048. }
  7049. .popover-from-actions-label:last-child:after {
  7050. display: none !important;
  7051. }
  7052. .ios .popover {
  7053. transform: none;
  7054. transition-property: opacity;
  7055. }
  7056. .ios .popover-angle {
  7057. width: 26px;
  7058. height: 26px;
  7059. position: absolute;
  7060. left: -26px;
  7061. top: 0;
  7062. z-index: 100;
  7063. overflow: hidden;
  7064. }
  7065. .ios .popover-angle:after {
  7066. content: '';
  7067. background: var(--f7-popover-bg-color);
  7068. width: 26px;
  7069. height: 26px;
  7070. position: absolute;
  7071. left: 0;
  7072. top: 0;
  7073. border-radius: 3px;
  7074. transform: rotate(45deg);
  7075. }
  7076. .ios .popover-angle.on-left {
  7077. left: -26px;
  7078. }
  7079. .ios .popover-angle.on-left:after {
  7080. left: 19px;
  7081. top: 0;
  7082. }
  7083. .ios .popover-angle.on-right {
  7084. left: 100%;
  7085. }
  7086. .ios .popover-angle.on-right:after {
  7087. left: -19px;
  7088. top: 0;
  7089. }
  7090. .ios .popover-angle.on-top {
  7091. left: 0;
  7092. top: -26px;
  7093. }
  7094. .ios .popover-angle.on-top:after {
  7095. left: 0;
  7096. top: 19px;
  7097. }
  7098. .ios .popover-angle.on-bottom {
  7099. left: 0;
  7100. top: 100%;
  7101. }
  7102. .ios .popover-angle.on-bottom:after {
  7103. left: 0;
  7104. top: -19px;
  7105. }
  7106. .md .popover {
  7107. transform: scale(0.85, 0.6);
  7108. transition-property: opacity, transform;
  7109. }
  7110. .md .popover.modal-in {
  7111. opacity: 1;
  7112. transform: scale(1);
  7113. }
  7114. .md .popover.modal-out {
  7115. opacity: 0;
  7116. transform: scale(1);
  7117. }
  7118. .md .popover-on-top {
  7119. transform-origin: center bottom;
  7120. }
  7121. .md .popover-on-top.popover-on-right {
  7122. transform-origin: left bottom;
  7123. }
  7124. .md .popover-on-top.popover-on-left {
  7125. transform-origin: right bottom;
  7126. }
  7127. .md .popover-on-middle {
  7128. transform-origin: center center;
  7129. }
  7130. .md .popover-on-middle.popover-on-right {
  7131. transform-origin: left center;
  7132. }
  7133. .md .popover-on-middle.popover-on-left {
  7134. transform-origin: right center;
  7135. }
  7136. .md .popover-on-bottom {
  7137. transform-origin: center top;
  7138. }
  7139. .md .popover-on-bottom.popover-on-right {
  7140. transform-origin: left top;
  7141. }
  7142. .md .popover-on-bottom.popover-on-left {
  7143. transform-origin: right top;
  7144. }
  7145. .aurora .popover {
  7146. transform: none;
  7147. transition-property: opacity;
  7148. }
  7149. .aurora .popover-angle {
  7150. width: 18px;
  7151. height: 18px;
  7152. position: absolute;
  7153. left: -18px;
  7154. top: 0;
  7155. z-index: 100;
  7156. overflow: hidden;
  7157. }
  7158. .aurora .popover-angle:after {
  7159. content: '';
  7160. background: var(--f7-popover-bg-color);
  7161. width: 18px;
  7162. height: 18px;
  7163. position: absolute;
  7164. left: 0;
  7165. top: 0;
  7166. border-radius: 2px;
  7167. transform: rotate(45deg);
  7168. }
  7169. .aurora .popover-angle.on-left {
  7170. left: -18px;
  7171. }
  7172. .aurora .popover-angle.on-left:after {
  7173. left: 13px;
  7174. top: 0;
  7175. }
  7176. .aurora .popover-angle.on-right {
  7177. left: 100%;
  7178. }
  7179. .aurora .popover-angle.on-right:after {
  7180. left: -13px;
  7181. top: 0;
  7182. }
  7183. .aurora .popover-angle.on-top {
  7184. left: 0;
  7185. top: -18px;
  7186. }
  7187. .aurora .popover-angle.on-top:after {
  7188. left: 0;
  7189. top: 13px;
  7190. }
  7191. .aurora .popover-angle.on-bottom {
  7192. left: 0;
  7193. top: 100%;
  7194. }
  7195. .aurora .popover-angle.on-bottom:after {
  7196. left: 0;
  7197. top: -13px;
  7198. }
  7199. /* === Actions === */
  7200. :root {
  7201. --f7-actions-grid-button-font-size: 12px;
  7202. --f7-actions-grid-button-text-color: #757575;
  7203. }
  7204. :root .theme-dark,
  7205. :root.theme-dark {
  7206. --f7-actions-label-text-color: rgba(255, 255, 255, 0.55);
  7207. }
  7208. .ios {
  7209. --f7-actions-border-radius: 13px;
  7210. /*
  7211. --f7-actions-button-text-color: var(--f7-theme-color);
  7212. */
  7213. --f7-actions-button-padding: 0px;
  7214. --f7-actions-button-text-align: center;
  7215. --f7-actions-button-height: 57px;
  7216. --f7-actions-button-height-landscape: 44px;
  7217. --f7-actions-button-font-size: 20px;
  7218. --f7-actions-button-icon-size: 28px;
  7219. --f7-actions-button-justify-content: center;
  7220. --f7-actions-label-padding: 8px 10px;
  7221. --f7-actions-label-font-size: 13px;
  7222. --f7-actions-label-justify-content: center;
  7223. --f7-actions-group-border-color: transparent;
  7224. --f7-actions-group-margin: 8px;
  7225. --f7-actions-grid-button-icon-size: 48px;
  7226. --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
  7227. --f7-actions-bg-color-rgb: 255, 255, 255;
  7228. --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
  7229. --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  7230. --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  7231. --f7-actions-label-text-color: #8a8a8a;
  7232. }
  7233. .ios .theme-dark,
  7234. .ios.theme-dark {
  7235. --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
  7236. --f7-actions-bg-color-rgb: 45, 45, 45;
  7237. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  7238. --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  7239. --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
  7240. }
  7241. .md {
  7242. --f7-actions-border-radius: 0px;
  7243. --f7-actions-button-border-color: transparent;
  7244. --f7-actions-button-padding: 0 16px;
  7245. --f7-actions-button-text-align: left;
  7246. --f7-actions-button-height: 48px;
  7247. --f7-actions-button-height-landscape: 48px;
  7248. --f7-actions-button-font-size: 16px;
  7249. --f7-actions-button-icon-size: 24px;
  7250. --f7-actions-button-justify-content: space-between;
  7251. --f7-actions-label-padding: 12px 16px;
  7252. --f7-actions-label-font-size: 16px;
  7253. --f7-actions-label-justify-content: flex-start;
  7254. --f7-actions-group-margin: 0px;
  7255. --f7-actions-grid-button-icon-size: 48px;
  7256. --f7-actions-bg-color: #fff;
  7257. --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
  7258. --f7-actions-button-pressed-bg-color: #e5e5e5;
  7259. --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
  7260. --f7-actions-group-border-color: rgba(0, 0, 0, 0.12);
  7261. }
  7262. .md .theme-dark,
  7263. .md.theme-dark {
  7264. --f7-actions-bg-color: #202020;
  7265. --f7-actions-button-text-color: #fff;
  7266. --f7-actions-button-pressed-bg-color: #2e2e2e;
  7267. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  7268. }
  7269. .aurora {
  7270. --f7-actions-border-radius: 4px;
  7271. --f7-actions-button-padding: 0 16px;
  7272. --f7-actions-button-text-align: center;
  7273. --f7-actions-button-height: 32px;
  7274. --f7-actions-button-height-landscape: 32px;
  7275. --f7-actions-button-font-size: 14px;
  7276. --f7-actions-button-icon-size: 18px;
  7277. --f7-actions-button-justify-content: space-between;
  7278. --f7-actions-label-padding: 10px 16px;
  7279. --f7-actions-label-font-size: 12px;
  7280. --f7-actions-label-justify-content: center;
  7281. --f7-actions-group-margin: 16px;
  7282. --f7-actions-grid-button-icon-size: 32px;
  7283. --f7-actions-bg-color: #fff;
  7284. --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
  7285. /*
  7286. --f7-actions-button-text-color: var(--f7-theme-color);
  7287. */
  7288. --f7-actions-button-pressed-bg-color: #e5e5e5;
  7289. --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
  7290. --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
  7291. }
  7292. .aurora .theme-dark,
  7293. .aurora.theme-dark {
  7294. --f7-actions-bg-color: #202020;
  7295. --f7-actions-button-text-color: #fff;
  7296. --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
  7297. --f7-actions-button-pressed-bg-color: #2e2e2e;
  7298. --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
  7299. }
  7300. .actions-modal {
  7301. position: absolute;
  7302. left: 0;
  7303. bottom: 0;
  7304. z-index: 13500;
  7305. width: 100%;
  7306. transform: translate3d(0, 100%, 0);
  7307. display: none;
  7308. max-height: 100%;
  7309. overflow: auto;
  7310. -webkit-overflow-scrolling: touch;
  7311. transition-property: transform;
  7312. will-change: transform;
  7313. }
  7314. .actions-modal.modal-in,
  7315. .actions-modal.modal-out {
  7316. transition-duration: 300ms;
  7317. }
  7318. .actions-modal.not-animated {
  7319. transition-duration: 0ms;
  7320. }
  7321. .actions-modal.modal-in {
  7322. transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
  7323. }
  7324. .actions-modal.modal-out {
  7325. z-index: 13499;
  7326. transform: translate3d(0, 100%, 0);
  7327. }
  7328. @media (min-width: 496px) {
  7329. .actions-modal {
  7330. width: 480px;
  7331. left: 50%;
  7332. margin-left: -240px;
  7333. }
  7334. }
  7335. @media (orientation: landscape) {
  7336. .actions-modal {
  7337. --f7-actions-button-height: var(--f7-actions-button-height-landscape);
  7338. }
  7339. }
  7340. .actions-group {
  7341. overflow: hidden;
  7342. position: relative;
  7343. margin: var(--f7-actions-group-margin);
  7344. border-radius: var(--f7-actions-border-radius);
  7345. transform: translate3d(0, 0, 0);
  7346. }
  7347. .actions-group:after {
  7348. content: '';
  7349. position: absolute;
  7350. background-color: var(--f7-actions-group-border-color);
  7351. display: block;
  7352. z-index: 15;
  7353. top: auto;
  7354. right: auto;
  7355. bottom: 0;
  7356. left: 0;
  7357. height: 1px;
  7358. width: 100%;
  7359. transform-origin: 50% 100%;
  7360. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7361. }
  7362. .actions-group:last-child:after {
  7363. display: none !important;
  7364. }
  7365. .actions-button,
  7366. .actions-label {
  7367. width: 100%;
  7368. font-weight: normal;
  7369. margin: 0;
  7370. box-sizing: border-box;
  7371. display: block;
  7372. position: relative;
  7373. overflow: hidden;
  7374. text-align: var(--f7-actions-button-text-align);
  7375. background: var(--f7-actions-bg-color);
  7376. }
  7377. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7378. .ios-translucent-modals .actions-button,
  7379. .ios-translucent-modals .actions-label {
  7380. background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
  7381. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7382. backdrop-filter: saturate(180%) blur(20px);
  7383. }
  7384. }
  7385. .actions-button:after,
  7386. .actions-label:after {
  7387. content: '';
  7388. position: absolute;
  7389. background-color: var(--f7-actions-button-border-color);
  7390. display: block;
  7391. z-index: 15;
  7392. top: auto;
  7393. right: auto;
  7394. bottom: 0;
  7395. left: 0;
  7396. height: 1px;
  7397. width: 100%;
  7398. transform-origin: 50% 100%;
  7399. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7400. }
  7401. .actions-button:first-child,
  7402. .actions-label:first-child {
  7403. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  7404. }
  7405. .actions-button:last-child,
  7406. .actions-label:last-child {
  7407. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  7408. }
  7409. .actions-button:last-child:after,
  7410. .actions-label:last-child:after {
  7411. display: none !important;
  7412. }
  7413. .actions-button:first-child:last-child,
  7414. .actions-label:first-child:last-child {
  7415. border-radius: var(--f7-actions-border-radius);
  7416. }
  7417. .actions-button a,
  7418. .actions-label a {
  7419. text-decoration: none;
  7420. color: inherit;
  7421. display: block;
  7422. }
  7423. .actions-button b,
  7424. .actions-label b,
  7425. .actions-button.actions-button-bold,
  7426. .actions-label.actions-button-bold {
  7427. font-weight: 600;
  7428. }
  7429. .actions-button {
  7430. cursor: pointer;
  7431. display: flex;
  7432. color: var(--f7-actions-button-text-color, var(--f7-theme-color));
  7433. font-size: var(--f7-actions-button-font-size);
  7434. height: var(--f7-actions-button-height);
  7435. line-height: var(--f7-actions-button-height);
  7436. padding: var(--f7-actions-button-padding);
  7437. justify-content: var(--f7-actions-button-justify-content);
  7438. z-index: 10;
  7439. }
  7440. .actions-button.active-state {
  7441. background-color: var(--f7-actions-button-pressed-bg-color) !important;
  7442. }
  7443. .actions-button[class*="color-"] {
  7444. color: var(--f7-theme-color);
  7445. }
  7446. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7447. .ios-translucent-modals .actions-button.active-state {
  7448. background-color: rgba(var(--f7-actions-button-pressed-bg-color-rgb), 0.8);
  7449. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7450. backdrop-filter: saturate(180%) blur(20px);
  7451. }
  7452. }
  7453. .actions-button-media {
  7454. flex-shrink: 0;
  7455. display: flex;
  7456. align-items: center;
  7457. }
  7458. .actions-button-media i.icon {
  7459. width: var(--f7-actions-button-icon-size);
  7460. height: var(--f7-actions-button-icon-size);
  7461. font-size: var(--f7-actions-button-icon-size);
  7462. }
  7463. .actions-button a,
  7464. .actions-button-text {
  7465. position: relative;
  7466. overflow: hidden;
  7467. white-space: nowrap;
  7468. text-overflow: ellipsis;
  7469. }
  7470. .actions-button-text {
  7471. width: 100%;
  7472. flex-shrink: 1;
  7473. text-align: var(--f7-actions-button-text-align);
  7474. }
  7475. .actions-label {
  7476. line-height: 1.3;
  7477. display: flex;
  7478. align-items: center;
  7479. font-size: var(--f7-actions-label-font-size);
  7480. color: var(--f7-actions-label-text-color);
  7481. padding: var(--f7-actions-label-padding);
  7482. justify-content: var(--f7-actions-label-justify-content);
  7483. min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
  7484. }
  7485. .actions-label[class*=" color-"] {
  7486. --f7-actions-label-text-color: var(--f7-theme-color);
  7487. }
  7488. .actions-grid .actions-group {
  7489. display: flex;
  7490. flex-wrap: wrap;
  7491. justify-content: flex-start;
  7492. border-radius: 0;
  7493. background: var(--f7-actions-bg-color);
  7494. margin-top: 0;
  7495. }
  7496. .actions-grid .actions-group:first-child {
  7497. border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
  7498. }
  7499. .actions-grid .actions-group:last-child {
  7500. border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
  7501. }
  7502. .actions-grid .actions-group:first-child:last-child {
  7503. border-radius: var(--f7-actions-border-radius);
  7504. }
  7505. .actions-grid .actions-group:not(:last-child) {
  7506. margin-bottom: 0;
  7507. }
  7508. .actions-grid .actions-button,
  7509. .actions-grid .actions-label {
  7510. border-radius: 0 !important;
  7511. background: none;
  7512. }
  7513. .actions-grid .actions-button {
  7514. width: 33.33333333%;
  7515. display: block;
  7516. color: var(--f7-actions-grid-button-text-color);
  7517. height: auto;
  7518. line-height: 1;
  7519. padding: 16px;
  7520. }
  7521. .actions-grid .actions-button:after {
  7522. display: none !important;
  7523. }
  7524. .actions-grid .actions-button-media {
  7525. margin-left: auto !important;
  7526. margin-right: auto !important;
  7527. width: var(--f7-actions-grid-button-icon-size);
  7528. height: var(--f7-actions-grid-button-icon-size);
  7529. }
  7530. .actions-grid .actions-button-media i.icon {
  7531. width: var(--f7-actions-grid-button-icon-size);
  7532. height: var(--f7-actions-grid-button-icon-size);
  7533. font-size: var(--f7-actions-grid-button-icon-size);
  7534. }
  7535. .actions-grid .actions-button-text {
  7536. margin-left: 0 !important;
  7537. text-align: center !important;
  7538. margin-top: 8px;
  7539. line-height: 1.33em;
  7540. height: 1.33em;
  7541. font-size: var(--f7-actions-grid-button-font-size);
  7542. }
  7543. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7544. .ios-translucent-modals .actions-grid .actions-group {
  7545. background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
  7546. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7547. backdrop-filter: saturate(180%) blur(20px);
  7548. }
  7549. }
  7550. .ios .actions-button-media {
  7551. margin-left: 16px;
  7552. }
  7553. .ios .actions-button-media + .actions-button-text {
  7554. text-align: left;
  7555. margin-left: 16px;
  7556. }
  7557. .md .actions-button {
  7558. transition-duration: 300ms;
  7559. }
  7560. .md .actions-button-media {
  7561. min-width: 40px;
  7562. }
  7563. .md .actions-button-media + .actions-button-text {
  7564. margin-left: 16px;
  7565. }
  7566. .aurora .actions-button-media {
  7567. margin-left: 16px;
  7568. }
  7569. .aurora .actions-button-media + .actions-button-text {
  7570. text-align: left;
  7571. margin-left: 16px;
  7572. }
  7573. /* === Sheet Modal === */
  7574. :root {
  7575. --f7-sheet-height: 260px;
  7576. --f7-sheet-border-color: transparent;
  7577. --f7-sheet-transition-duration: 300ms;
  7578. --f7-sheet-push-border-radius: 10px;
  7579. --f7-sheet-push-offset: var(--f7-safe-area-top);
  7580. --f7-sheet-bg-color: #fff;
  7581. }
  7582. :root .theme-dark,
  7583. :root.theme-dark {
  7584. --f7-sheet-bg-color: #202020;
  7585. }
  7586. .ios {
  7587. --f7-sheet-border-color: var(--f7-bars-border-color);
  7588. }
  7589. .sheet-backdrop {
  7590. z-index: 11000;
  7591. }
  7592. .sheet-modal {
  7593. position: absolute;
  7594. left: 0;
  7595. bottom: 0;
  7596. width: 100%;
  7597. height: var(--f7-sheet-height);
  7598. display: none;
  7599. box-sizing: border-box;
  7600. transition-property: transform;
  7601. transform: translate3d(0, 100%, 0);
  7602. background: var(--f7-sheet-bg-color);
  7603. z-index: 12500;
  7604. will-change: transform, opacity;
  7605. }
  7606. .sheet-modal.modal-in,
  7607. .sheet-modal.modal-out {
  7608. transition-duration: var(--f7-sheet-transition-duration);
  7609. }
  7610. .sheet-modal.not-animated {
  7611. transition-duration: 0ms;
  7612. }
  7613. .sheet-modal.modal-in {
  7614. display: block;
  7615. transform: translate3d(0, 0, 0);
  7616. }
  7617. .sheet-modal.modal-in-swipe-step {
  7618. display: block;
  7619. transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
  7620. }
  7621. .sheet-modal.modal-out {
  7622. transform: translate3d(0, 100%, 0);
  7623. }
  7624. .sheet-modal .sheet-modal-inner {
  7625. height: 100%;
  7626. position: relative;
  7627. overflow: hidden;
  7628. }
  7629. .sheet-modal .toolbar {
  7630. --f7-safe-area-bottom: 0px;
  7631. position: relative;
  7632. width: 100%;
  7633. }
  7634. .sheet-modal .toolbar:after,
  7635. .sheet-modal .toolbar:before {
  7636. display: none;
  7637. }
  7638. .sheet-modal .toolbar + .sheet-modal-inner {
  7639. height: calc(100% - var(--f7-toolbar-height));
  7640. }
  7641. .sheet-modal .toolbar + .sheet-modal-inner .page-content {
  7642. --f7-page-toolbar-top-offset: 0px;
  7643. --f7-page-toolbar-bottom-offset: 0px;
  7644. }
  7645. .sheet-modal-top:after {
  7646. content: '';
  7647. position: absolute;
  7648. background-color: var(--f7-sheet-border-color);
  7649. display: block;
  7650. z-index: 15;
  7651. top: auto;
  7652. right: auto;
  7653. bottom: 0;
  7654. left: 0;
  7655. height: 1px;
  7656. width: 100%;
  7657. transform-origin: 50% 100%;
  7658. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7659. }
  7660. .sheet-modal-top:after {
  7661. z-index: 700;
  7662. -webkit-backface-visibility: hidden;
  7663. backface-visibility: hidden;
  7664. transform-style: preserve-3d;
  7665. }
  7666. .sheet-modal-bottom,
  7667. .sheet-modal:not(.sheet-modal-top) {
  7668. --f7-safe-area-top: 0px;
  7669. }
  7670. .sheet-modal-bottom:before,
  7671. .sheet-modal:not(.sheet-modal-top):before {
  7672. content: '';
  7673. position: absolute;
  7674. background-color: var(--f7-sheet-border-color);
  7675. display: block;
  7676. z-index: 15;
  7677. top: 0;
  7678. right: auto;
  7679. bottom: auto;
  7680. left: 0;
  7681. height: 1px;
  7682. width: 100%;
  7683. transform-origin: 50% 0%;
  7684. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  7685. }
  7686. .sheet-modal-bottom:before,
  7687. .sheet-modal:not(.sheet-modal-top):before {
  7688. z-index: 700;
  7689. -webkit-backface-visibility: hidden;
  7690. backface-visibility: hidden;
  7691. transform-style: preserve-3d;
  7692. }
  7693. .sheet-modal-top {
  7694. --f7-safe-area-bottom: 0px;
  7695. bottom: auto;
  7696. top: 0;
  7697. transform: translate3d(0, -100%, 0);
  7698. }
  7699. .sheet-modal-top.modal-out {
  7700. transform: translate3d(0, -100%, 0);
  7701. }
  7702. .sheet-modal-top .toolbar-bottom {
  7703. position: absolute;
  7704. }
  7705. .sheet-modal-top .page-content {
  7706. padding-top: var(--f7-safe-area-top);
  7707. }
  7708. html.with-modal-sheet-push .sheet-modal-push,
  7709. html.with-modal-sheet-push-closing .sheet-modal-push {
  7710. --f7-sheet-border-color: transparent;
  7711. border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
  7712. overflow: hidden;
  7713. }
  7714. html.with-modal-sheet-push .sheet-modal-push .view,
  7715. html.with-modal-sheet-push-closing .sheet-modal-push .view,
  7716. html.with-modal-sheet-push .sheet-modal-push .page,
  7717. html.with-modal-sheet-push-closing .sheet-modal-push .page {
  7718. --f7-safe-area-top: 0px;
  7719. }
  7720. html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,
  7721. html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top {
  7722. border-radius: 0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius);
  7723. }
  7724. html.with-modal-sheet-push .framework7-root,
  7725. html.with-modal-sheet-push-closing .framework7-root {
  7726. background: #000;
  7727. }
  7728. html.with-modal-sheet-push .framework7-root > .views,
  7729. html.with-modal-sheet-push-closing .framework7-root > .views,
  7730. html.with-modal-sheet-push .framework7-root > .view,
  7731. html.with-modal-sheet-push-closing .framework7-root > .view {
  7732. transition-duration: var(--f7-sheet-transition-duration);
  7733. }
  7734. html.with-modal-sheet-push.theme-dark .framework7-root > .views:after,
  7735. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
  7736. html.with-modal-sheet-push.theme-dark .framework7-root > .view:after,
  7737. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
  7738. html.with-modal-sheet-push .theme-dark .framework7-root > .views:after,
  7739. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
  7740. html.with-modal-sheet-push .theme-dark .framework7-root > .view:after,
  7741. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
  7742. html.with-modal-sheet-push .theme-dark.framework7-root > .views:after,
  7743. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
  7744. html.with-modal-sheet-push .theme-dark.framework7-root > .view:after,
  7745. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
  7746. html.with-modal-sheet-push .framework7-root > .views.theme-dark:after,
  7747. html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
  7748. html.with-modal-sheet-push .framework7-root > .view.theme-dark:after,
  7749. html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
  7750. content: '';
  7751. position: absolute;
  7752. pointer-events: none;
  7753. left: 0;
  7754. top: 0;
  7755. width: 100%;
  7756. height: 100%;
  7757. background: rgba(255, 255, 255, 0.1);
  7758. z-index: 13000;
  7759. border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
  7760. opacity: 1;
  7761. animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
  7762. }
  7763. html.with-modal-sheet-push .framework7-root > .views,
  7764. html.with-modal-sheet-push .framework7-root > .view {
  7765. border-radius: var(--f7-sheet-push-border-radius);
  7766. transform: translate3d(0, 0, 0px) scale(var(--f7-sheet-push-scale, 1)) !important;
  7767. }
  7768. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
  7769. html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
  7770. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
  7771. html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
  7772. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
  7773. html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
  7774. html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
  7775. html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
  7776. animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
  7777. }
  7778. @keyframes sheet-dark-push-overlay-fade-in {
  7779. from {
  7780. opacity: 0;
  7781. }
  7782. to {
  7783. opacity: 1;
  7784. }
  7785. }
  7786. @keyframes sheet-dark-push-overlay-fade-out {
  7787. from {
  7788. opacity: 1;
  7789. }
  7790. to {
  7791. opacity: 0;
  7792. }
  7793. }
  7794. .md .sheet-modal .toolbar a.link:not(.tab-link) {
  7795. flex-shrink: 0;
  7796. }
  7797. /* === Toast === */
  7798. :root {
  7799. --f7-toast-text-color: #fff;
  7800. --f7-toast-font-size: 14px;
  7801. --f7-toast-icon-size: 48px;
  7802. --f7-toast-max-width: 568px;
  7803. }
  7804. .ios {
  7805. --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
  7806. --f7-toast-bg-color-rgb: 0, 0, 0;
  7807. --f7-toast-padding-horizontal: 16px;
  7808. --f7-toast-padding-vertical: 12px;
  7809. --f7-toast-border-radius: 8px;
  7810. --f7-toast-button-min-width: 64px;
  7811. }
  7812. .md {
  7813. --f7-toast-bg-color: #323232;
  7814. --f7-toast-padding-horizontal: 24px;
  7815. --f7-toast-padding-vertical: 14px;
  7816. --f7-toast-border-radius: 4px;
  7817. --f7-toast-button-min-width: 64px;
  7818. }
  7819. .aurora {
  7820. --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
  7821. --f7-toast-padding-horizontal: 10px;
  7822. --f7-toast-padding-vertical: 10px;
  7823. --f7-toast-border-radius: 4px;
  7824. --f7-toast-button-min-width: 32px;
  7825. }
  7826. .toast {
  7827. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  7828. transition-property: transform, opacity;
  7829. position: absolute;
  7830. max-width: var(--f7-toast-max-width);
  7831. z-index: 20000;
  7832. color: var(--f7-toast-text-color);
  7833. font-size: var(--f7-toast-font-size);
  7834. box-sizing: border-box;
  7835. background-color: var(--f7-toast-bg-color);
  7836. opacity: 0;
  7837. }
  7838. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  7839. .ios-translucent-modals .toast {
  7840. background-color: rgba(var(--f7-toast-bg-color-rgb), 0.8);
  7841. -webkit-backdrop-filter: saturate(180%) blur(20px);
  7842. backdrop-filter: saturate(180%) blur(20px);
  7843. }
  7844. }
  7845. .toast.modal-in {
  7846. opacity: 1;
  7847. }
  7848. .toast .toast-content {
  7849. display: flex;
  7850. justify-content: space-between;
  7851. align-items: center;
  7852. box-sizing: border-box;
  7853. padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
  7854. }
  7855. .toast .toast-text {
  7856. line-height: 20px;
  7857. flex-shrink: 1;
  7858. min-width: 0;
  7859. }
  7860. .toast .toast-button {
  7861. flex-shrink: 0;
  7862. min-width: var(--f7-toast-button-min-width);
  7863. margin-top: -8px;
  7864. margin-bottom: -8px;
  7865. }
  7866. .toast.toast-with-icon .toast-content {
  7867. display: block;
  7868. text-align: center;
  7869. }
  7870. .toast.toast-with-icon .toast-text {
  7871. text-align: center;
  7872. }
  7873. .toast.toast-with-icon .toast-icon .f7-icons,
  7874. .toast.toast-with-icon .toast-icon .material-icons {
  7875. font-size: var(--f7-toast-icon-size);
  7876. }
  7877. .toast.toast-center {
  7878. top: 50%;
  7879. }
  7880. .toast.toast-top {
  7881. margin-top: var(--f7-safe-area-top);
  7882. }
  7883. .ios .toast {
  7884. transition-duration: 300ms;
  7885. width: 100%;
  7886. left: 0;
  7887. }
  7888. .ios .toast.toast-top {
  7889. top: 0;
  7890. transform: translate3d(0, -100%, 0);
  7891. }
  7892. .ios .toast.toast-top.modal-in {
  7893. transform: translate3d(0, 0%, 0);
  7894. }
  7895. .ios .toast.toast-center {
  7896. width: auto;
  7897. left: 50%;
  7898. border-radius: var(--f7-toast-border-radius);
  7899. transform: translate3d(-50%, -50%, 0);
  7900. }
  7901. .ios .toast.toast-center.modal-in {
  7902. transform: translate3d(-50%, -50%, 0);
  7903. }
  7904. .ios .toast.toast-bottom {
  7905. bottom: 0;
  7906. transform: translate3d(0, 100%, 0);
  7907. }
  7908. .ios .toast.toast-bottom.modal-in {
  7909. transform: translate3d(0, 0%, 0);
  7910. }
  7911. @media (max-width: 568px) {
  7912. .ios .toast.toast-top {
  7913. margin-top: 0;
  7914. }
  7915. .ios .toast.toast-top .toast-content {
  7916. padding-top: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top));
  7917. }
  7918. .ios .toast.toast-bottom .toast-content {
  7919. padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
  7920. }
  7921. }
  7922. @media (min-width: 569px) {
  7923. .ios .toast {
  7924. left: 50%;
  7925. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7926. border-radius: var(--f7-toast-border-radius);
  7927. }
  7928. .ios .toast.toast-top {
  7929. top: 16px;
  7930. }
  7931. .ios .toast.toast-center {
  7932. margin-left: 0;
  7933. }
  7934. .ios .toast.toast-bottom {
  7935. margin-bottom: calc(16px + var(--f7-safe-area-bottom));
  7936. }
  7937. }
  7938. @media (min-width: 1024px) {
  7939. .ios .toast {
  7940. margin-left: 0;
  7941. width: auto;
  7942. }
  7943. .ios .toast.toast-horizontal-left {
  7944. left: 16px;
  7945. }
  7946. .ios .toast.toast-horizontal-right {
  7947. left: auto;
  7948. right: 16px;
  7949. }
  7950. .ios .toast.toast-horizontal-center {
  7951. left: 50%;
  7952. width: var(--f7-toast-max-width);
  7953. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7954. }
  7955. }
  7956. .ios .toast-button {
  7957. margin-left: 16px;
  7958. margin-right: calc(-1 * var(--f7-button-padding-horizontal));
  7959. }
  7960. .md .toast {
  7961. transition-duration: 200ms;
  7962. border-radius: var(--f7-toast-border-radius);
  7963. width: calc(100% - 16px);
  7964. transform: scale(0.9);
  7965. left: 8px;
  7966. }
  7967. .md .toast.modal-in {
  7968. transform: scale(1);
  7969. }
  7970. .md .toast.modal-out {
  7971. transform: scale(1);
  7972. }
  7973. .md .toast.toast-top {
  7974. top: 8px;
  7975. }
  7976. .md .toast.toast-center {
  7977. left: 50%;
  7978. width: auto;
  7979. transform: scale(0.9) translate3d(-55%, -55%, 0);
  7980. }
  7981. .md .toast.toast-center.modal-in {
  7982. transform: scale(1) translate3d(-50%, -50%, 0);
  7983. }
  7984. .md .toast.toast-center.modal-out {
  7985. transform: scale(1) translate3d(-50%, -50%, 0);
  7986. }
  7987. .md .toast.toast-bottom {
  7988. bottom: calc(8px + var(--f7-safe-area-bottom));
  7989. }
  7990. @media (min-width: 584px) {
  7991. .md .toast {
  7992. left: 50%;
  7993. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  7994. }
  7995. .md .toast.toast-center {
  7996. margin-left: 0;
  7997. }
  7998. }
  7999. @media (min-width: 1024px) {
  8000. .md .toast {
  8001. margin-left: 0;
  8002. width: auto;
  8003. }
  8004. .md .toast.toast-horizontal-left {
  8005. left: 24px;
  8006. }
  8007. .md .toast.toast-horizontal-right {
  8008. left: auto;
  8009. right: 24px;
  8010. }
  8011. .md .toast.toast-horizontal-center {
  8012. left: 50%;
  8013. width: var(--f7-toast-max-width);
  8014. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8015. }
  8016. .md .toast.toast-bottom {
  8017. bottom: calc(24px + var(--f7-safe-area-bottom));
  8018. }
  8019. .md .toast.toast-top {
  8020. top: 24px;
  8021. }
  8022. }
  8023. .md .toast-button {
  8024. margin-left: 16px;
  8025. margin-right: -8px;
  8026. }
  8027. .aurora .toast {
  8028. transition-duration: 200ms;
  8029. border-radius: var(--f7-toast-border-radius);
  8030. left: 10px;
  8031. width: calc(100% - 20px);
  8032. transform: scale(0.9);
  8033. }
  8034. .aurora .toast.modal-in {
  8035. transform: scale(1);
  8036. }
  8037. .aurora .toast.modal-out {
  8038. transform: scale(1);
  8039. }
  8040. .aurora .toast.toast-top {
  8041. top: 10px;
  8042. }
  8043. .aurora .toast.toast-center {
  8044. left: 50%;
  8045. width: auto;
  8046. transform: scale(0.9) translate3d(-55%, -55%, 0);
  8047. }
  8048. .aurora .toast.toast-center.modal-in {
  8049. transform: scale(1) translate3d(-50%, -50%, 0);
  8050. }
  8051. .aurora .toast.toast-center.modal-out {
  8052. transform: scale(1) translate3d(-50%, -50%, 0);
  8053. }
  8054. .aurora .toast.toast-bottom {
  8055. bottom: calc(10px + var(--f7-safe-area-bottom));
  8056. }
  8057. @media (min-width: 584px) {
  8058. .aurora .toast {
  8059. left: 50%;
  8060. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8061. }
  8062. .aurora .toast.toast-center {
  8063. margin-left: 0;
  8064. }
  8065. }
  8066. @media (min-width: 1024px) {
  8067. .aurora .toast {
  8068. margin-left: 0;
  8069. width: auto;
  8070. }
  8071. .aurora .toast.toast-horizontal-left {
  8072. left: 10px;
  8073. }
  8074. .aurora .toast.toast-horizontal-right {
  8075. left: auto;
  8076. right: 10px;
  8077. }
  8078. .aurora .toast.toast-horizontal-center {
  8079. left: 50%;
  8080. width: var(--f7-toast-max-width);
  8081. margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
  8082. }
  8083. }
  8084. .aurora .toast-button {
  8085. margin-left: 10px;
  8086. }
  8087. /* === Preloader === */
  8088. :root {
  8089. --f7-preloader-modal-padding: 8px;
  8090. --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
  8091. }
  8092. .ios {
  8093. --f7-preloader-color: #6c6c6c;
  8094. --f7-preloader-size: 20px;
  8095. --f7-preloader-modal-preloader-size: 34px;
  8096. --f7-preloader-modal-border-radius: 5px;
  8097. }
  8098. .md {
  8099. --f7-preloader-color: #757575;
  8100. --f7-preloader-size: 32px;
  8101. --f7-preloader-modal-preloader-size: 32px;
  8102. --f7-preloader-modal-border-radius: 4px;
  8103. }
  8104. .aurora {
  8105. --f7-preloader-color: #757575;
  8106. --f7-preloader-size: 24px;
  8107. --f7-preloader-modal-preloader-size: 24px;
  8108. --f7-preloader-modal-border-radius: 4px;
  8109. }
  8110. .preloader {
  8111. display: inline-block;
  8112. vertical-align: middle;
  8113. width: var(--f7-preloader-size);
  8114. height: var(--f7-preloader-size);
  8115. font-size: 0;
  8116. position: relative;
  8117. }
  8118. /* === Preloader Modal === */
  8119. .preloader-backdrop {
  8120. visibility: visible;
  8121. opacity: 0;
  8122. background: none;
  8123. z-index: 14000;
  8124. }
  8125. .preloader-modal {
  8126. position: absolute;
  8127. left: 50%;
  8128. top: 50%;
  8129. padding: var(--f7-preloader-modal-padding);
  8130. background: var(--f7-preloader-modal-bg-color);
  8131. z-index: 14500;
  8132. transform: translateX(-50%) translateY(-50%);
  8133. border-radius: var(--f7-preloader-modal-border-radius);
  8134. }
  8135. .preloader-modal .preloader {
  8136. --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
  8137. display: block !important;
  8138. }
  8139. html.with-modal-preloader .page-content,
  8140. .with-modal-preloader .page-content,
  8141. .with-modal-preloader.page-content {
  8142. overflow: hidden;
  8143. -webkit-overflow-scrolling: auto;
  8144. }
  8145. .preloader[class*="color-"] {
  8146. --f7-preloader-color: var(--f7-theme-color);
  8147. }
  8148. .ios .preloader {
  8149. animation: ios-preloader-spin 1s steps(12, end) infinite;
  8150. }
  8151. .ios .preloader .preloader-inner-line {
  8152. display: block;
  8153. width: 7.15%;
  8154. height: 28.5%;
  8155. border-radius: 100px;
  8156. background: var(--f7-preloader-color);
  8157. position: absolute;
  8158. left: 50%;
  8159. top: 50%;
  8160. transform-origin: center 175%;
  8161. }
  8162. .ios .preloader .preloader-inner-line:nth-child(1) {
  8163. transform: translate(-50%, -175%) rotate(0deg);
  8164. opacity: 0.27;
  8165. }
  8166. .ios .preloader .preloader-inner-line:nth-child(2) {
  8167. transform: translate(-50%, -175%) rotate(30deg);
  8168. opacity: 0.32272727;
  8169. }
  8170. .ios .preloader .preloader-inner-line:nth-child(3) {
  8171. transform: translate(-50%, -175%) rotate(60deg);
  8172. opacity: 0.37545455;
  8173. }
  8174. .ios .preloader .preloader-inner-line:nth-child(4) {
  8175. transform: translate(-50%, -175%) rotate(90deg);
  8176. opacity: 0.42818182;
  8177. }
  8178. .ios .preloader .preloader-inner-line:nth-child(5) {
  8179. transform: translate(-50%, -175%) rotate(120deg);
  8180. opacity: 0.48090909;
  8181. }
  8182. .ios .preloader .preloader-inner-line:nth-child(6) {
  8183. transform: translate(-50%, -175%) rotate(150deg);
  8184. opacity: 0.53363636;
  8185. }
  8186. .ios .preloader .preloader-inner-line:nth-child(7) {
  8187. transform: translate(-50%, -175%) rotate(180deg);
  8188. opacity: 0.58636364;
  8189. }
  8190. .ios .preloader .preloader-inner-line:nth-child(8) {
  8191. transform: translate(-50%, -175%) rotate(210deg);
  8192. opacity: 0.63909091;
  8193. }
  8194. .ios .preloader .preloader-inner-line:nth-child(9) {
  8195. transform: translate(-50%, -175%) rotate(240deg);
  8196. opacity: 0.69181818;
  8197. }
  8198. .ios .preloader .preloader-inner-line:nth-child(10) {
  8199. transform: translate(-50%, -175%) rotate(270deg);
  8200. opacity: 0.74454545;
  8201. }
  8202. .ios .preloader .preloader-inner-line:nth-child(11) {
  8203. transform: translate(-50%, -175%) rotate(300deg);
  8204. opacity: 0.79727273;
  8205. }
  8206. .ios .preloader .preloader-inner-line:nth-child(12) {
  8207. transform: translate(-50%, -175%) rotate(330deg);
  8208. opacity: 0.85;
  8209. }
  8210. @keyframes ios-preloader-spin {
  8211. 100% {
  8212. transform: rotate(360deg);
  8213. }
  8214. }
  8215. .md .preloader {
  8216. animation: md-preloader-outer 3300ms linear infinite;
  8217. }
  8218. @keyframes md-preloader-outer {
  8219. 0% {
  8220. transform: rotate(0);
  8221. }
  8222. 100% {
  8223. transform: rotate(360deg);
  8224. }
  8225. }
  8226. .md .preloader-inner {
  8227. position: relative;
  8228. display: block;
  8229. width: 100%;
  8230. height: 100%;
  8231. animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
  8232. }
  8233. .md .preloader-inner .preloader-inner-gap {
  8234. position: absolute;
  8235. width: 2px;
  8236. left: 50%;
  8237. margin-left: -1px;
  8238. top: 0;
  8239. bottom: 0;
  8240. box-sizing: border-box;
  8241. border-top: 4px solid var(--f7-preloader-color);
  8242. }
  8243. .md .preloader-inner .preloader-inner-left,
  8244. .md .preloader-inner .preloader-inner-right {
  8245. position: absolute;
  8246. top: 0;
  8247. height: 100%;
  8248. width: 50%;
  8249. overflow: hidden;
  8250. }
  8251. .md .preloader-inner .preloader-inner-half-circle {
  8252. position: absolute;
  8253. top: 0;
  8254. height: 100%;
  8255. width: 200%;
  8256. box-sizing: border-box;
  8257. border: 4px solid var(--f7-preloader-color);
  8258. border-bottom-color: transparent !important;
  8259. border-radius: 50%;
  8260. animation-iteration-count: infinite;
  8261. animation-duration: 1.3125s;
  8262. animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  8263. }
  8264. .md .preloader-inner .preloader-inner-left {
  8265. left: 0;
  8266. }
  8267. .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
  8268. left: 0;
  8269. border-right-color: transparent !important;
  8270. animation-name: md-preloader-left-rotate;
  8271. }
  8272. .md .preloader-inner .preloader-inner-right {
  8273. right: 0;
  8274. }
  8275. .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
  8276. right: 0;
  8277. border-left-color: transparent !important;
  8278. animation-name: md-preloader-right-rotate;
  8279. }
  8280. .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
  8281. animation-name: md-preloader-left-rotate-multicolor;
  8282. }
  8283. .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
  8284. animation-name: md-preloader-right-rotate-multicolor;
  8285. }
  8286. @keyframes md-preloader-left-rotate {
  8287. 0%,
  8288. 100% {
  8289. transform: rotate(130deg);
  8290. }
  8291. 50% {
  8292. transform: rotate(-5deg);
  8293. }
  8294. }
  8295. @keyframes md-preloader-right-rotate {
  8296. 0%,
  8297. 100% {
  8298. transform: rotate(-130deg);
  8299. }
  8300. 50% {
  8301. transform: rotate(5deg);
  8302. }
  8303. }
  8304. @keyframes md-preloader-inner-rotate {
  8305. 12.5% {
  8306. transform: rotate(135deg);
  8307. }
  8308. 25% {
  8309. transform: rotate(270deg);
  8310. }
  8311. 37.5% {
  8312. transform: rotate(405deg);
  8313. }
  8314. 50% {
  8315. transform: rotate(540deg);
  8316. }
  8317. 62.5% {
  8318. transform: rotate(675deg);
  8319. }
  8320. 75% {
  8321. transform: rotate(810deg);
  8322. }
  8323. 87.5% {
  8324. transform: rotate(945deg);
  8325. }
  8326. 100% {
  8327. transform: rotate(1080deg);
  8328. }
  8329. }
  8330. @keyframes md-preloader-left-rotate-multicolor {
  8331. 0%,
  8332. 100% {
  8333. border-left-color: #4285F4;
  8334. transform: rotate(130deg);
  8335. }
  8336. 75% {
  8337. border-left-color: #1B9A59;
  8338. border-top-color: #1B9A59;
  8339. }
  8340. 50% {
  8341. border-left-color: #F7C223;
  8342. border-top-color: #F7C223;
  8343. transform: rotate(-5deg);
  8344. }
  8345. 25% {
  8346. border-left-color: #DE3E35;
  8347. border-top-color: #DE3E35;
  8348. }
  8349. }
  8350. @keyframes md-preloader-right-rotate-multicolor {
  8351. 0%,
  8352. 100% {
  8353. border-right-color: #4285F4;
  8354. transform: rotate(-130deg);
  8355. }
  8356. 75% {
  8357. border-right-color: #1B9A59;
  8358. border-top-color: #1B9A59;
  8359. }
  8360. 50% {
  8361. border-right-color: #F7C223;
  8362. border-top-color: #F7C223;
  8363. transform: rotate(5deg);
  8364. }
  8365. 25% {
  8366. border-top-color: #DE3E35;
  8367. border-right-color: #DE3E35;
  8368. }
  8369. }
  8370. .aurora .preloader-inner {
  8371. position: absolute;
  8372. left: 0;
  8373. top: 0;
  8374. width: 100%;
  8375. height: 100%;
  8376. }
  8377. .aurora .preloader-inner-circle {
  8378. width: 100%;
  8379. height: 100%;
  8380. position: absolute;
  8381. left: 0;
  8382. top: 0;
  8383. border-radius: 50%;
  8384. border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
  8385. border-top-color: transparent;
  8386. box-sizing: border-box;
  8387. animation: aurora-preloader-rotate 1s linear infinite;
  8388. }
  8389. .aurora .preloader.color-multi .preloader-inner-circle {
  8390. animation: aurora-preloader-rotate 1s linear infinite, aurora-preloader-multicolor 2s linear infinite;
  8391. }
  8392. @keyframes aurora-preloader-rotate {
  8393. 0% {
  8394. transform: rotate(0deg);
  8395. }
  8396. 100% {
  8397. transform: rotate(360deg);
  8398. }
  8399. }
  8400. @keyframes aurora-preloader-multicolor {
  8401. 0%,
  8402. 100% {
  8403. border-color: #2196f3;
  8404. border-top-color: transparent;
  8405. }
  8406. 25% {
  8407. border-color: #ff3b30;
  8408. border-top-color: transparent;
  8409. }
  8410. 50% {
  8411. border-color: #4cd964;
  8412. border-top-color: transparent;
  8413. }
  8414. 75% {
  8415. border-color: #ff9500;
  8416. border-top-color: transparent;
  8417. }
  8418. }
  8419. /* === Progressbar === */
  8420. :root {
  8421. /*
  8422. --f7-progressbar-progress-color: var(--f7-theme-color);
  8423. */
  8424. }
  8425. .ios {
  8426. --f7-progressbar-height: 2px;
  8427. --f7-progressbar-border-radius: 2px;
  8428. --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
  8429. }
  8430. .ios .theme-dark,
  8431. .ios.theme-dark {
  8432. --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
  8433. }
  8434. .md {
  8435. /*
  8436. --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
  8437. */
  8438. --f7-progressbar-height: 4px;
  8439. --f7-progressbar-border-radius: 0px;
  8440. }
  8441. .aurora {
  8442. --f7-progressbar-height: 6px;
  8443. --f7-progressbar-border-radius: 3px;
  8444. --f7-progressbar-bg-color: #dbdbdb;
  8445. }
  8446. .aurora .theme-dark,
  8447. .aurora.theme-dark {
  8448. --f7-progressbar-bg-color: #444;
  8449. }
  8450. .progressbar,
  8451. .progressbar-infinite {
  8452. width: 100%;
  8453. overflow: hidden;
  8454. position: relative;
  8455. display: block;
  8456. transform-style: preserve-3d;
  8457. background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
  8458. transform-origin: center top;
  8459. height: var(--f7-progressbar-height);
  8460. border-radius: var(--f7-progressbar-border-radius);
  8461. }
  8462. .progressbar {
  8463. vertical-align: middle;
  8464. }
  8465. .progressbar span {
  8466. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  8467. width: 100%;
  8468. height: 100%;
  8469. position: absolute;
  8470. left: 0;
  8471. top: 0;
  8472. transform: translate3d(-100%, 0, 0);
  8473. transition-duration: 150ms;
  8474. }
  8475. .progressbar-infinite {
  8476. z-index: 15000;
  8477. }
  8478. .progressbar-infinite:before,
  8479. .progressbar-infinite:after {
  8480. content: '';
  8481. position: absolute;
  8482. left: 0;
  8483. top: 0;
  8484. width: 100%;
  8485. height: 100%;
  8486. transform-origin: left center;
  8487. transform: translate3d(0, 0, 0);
  8488. display: block;
  8489. background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
  8490. }
  8491. .progressbar-infinite.color-multi {
  8492. background: none !important;
  8493. }
  8494. .progressbar-in {
  8495. animation: progressbar-in 150ms forwards;
  8496. }
  8497. .progressbar-out {
  8498. animation: progressbar-out 150ms forwards;
  8499. }
  8500. body > .progressbar,
  8501. .view > .progressbar,
  8502. .views > .progressbar,
  8503. .page > .progressbar,
  8504. .panel > .progressbar,
  8505. .popup > .progressbar,
  8506. .framework7-root > .progressbar,
  8507. body > .progressbar-infinite,
  8508. .view > .progressbar-infinite,
  8509. .views > .progressbar-infinite,
  8510. .page > .progressbar-infinite,
  8511. .panel > .progressbar-infinite,
  8512. .popup > .progressbar-infinite,
  8513. .framework7-root > .progressbar-infinite {
  8514. position: absolute;
  8515. left: 0;
  8516. top: 0;
  8517. z-index: 15000;
  8518. border-radius: 0 !important;
  8519. transform-origin: center top !important;
  8520. }
  8521. @keyframes progressbar-in {
  8522. from {
  8523. opacity: 0;
  8524. transform: scaleY(0);
  8525. }
  8526. to {
  8527. opacity: 1;
  8528. transform: scaleY(1);
  8529. }
  8530. }
  8531. @keyframes progressbar-out {
  8532. from {
  8533. opacity: 1;
  8534. transform: scaleY(1);
  8535. }
  8536. to {
  8537. opacity: 0;
  8538. transform: scaleY(0);
  8539. }
  8540. }
  8541. .ios .progressbar-infinite:before {
  8542. animation: ios-progressbar-infinite 1s linear infinite;
  8543. }
  8544. .ios .progressbar-infinite:after {
  8545. display: none;
  8546. }
  8547. .ios .progressbar-infinite.color-multi:before {
  8548. width: 400%;
  8549. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  8550. background-size: 25% 100%;
  8551. background-repeat: repeat-x;
  8552. animation: ios-progressbar-infinite-multicolor 3s linear infinite;
  8553. }
  8554. @keyframes ios-progressbar-infinite {
  8555. 0% {
  8556. transform: translate3d(-100%, 0, 0);
  8557. }
  8558. 100% {
  8559. transform: translate3d(100%, 0, 0);
  8560. }
  8561. }
  8562. @keyframes ios-progressbar-infinite-multicolor {
  8563. 0% {
  8564. transform: translate3d(0%, 0, 0);
  8565. }
  8566. 100% {
  8567. transform: translate3d(-50%, 0, 0);
  8568. }
  8569. }
  8570. .md .progressbar-infinite:before {
  8571. animation: md-progressbar-infinite-1 2s linear infinite;
  8572. }
  8573. .md .progressbar-infinite:after {
  8574. animation: md-progressbar-infinite-2 2s linear infinite;
  8575. }
  8576. .md .progressbar-infinite.color-multi:before {
  8577. background: none;
  8578. animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
  8579. }
  8580. .md .progressbar-infinite.color-multi:after {
  8581. background: none;
  8582. animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
  8583. transform-origin: center center;
  8584. }
  8585. @keyframes md-progressbar-infinite-1 {
  8586. 0% {
  8587. transform: translateX(-10%) scaleX(0.1);
  8588. }
  8589. 25% {
  8590. transform: translateX(30%) scaleX(0.6);
  8591. }
  8592. 50% {
  8593. transform: translateX(100%) scaleX(1);
  8594. }
  8595. 100% {
  8596. transform: translateX(100%) scaleX(1);
  8597. }
  8598. }
  8599. @keyframes md-progressbar-infinite-2 {
  8600. 0% {
  8601. transform: translateX(-100%) scaleX(1);
  8602. }
  8603. 40% {
  8604. transform: translateX(-100%) scaleX(1);
  8605. }
  8606. 75% {
  8607. transform: translateX(60%) scaleX(0.35);
  8608. }
  8609. 90% {
  8610. transform: translateX(100%) scaleX(0.1);
  8611. }
  8612. 100% {
  8613. transform: translateX(100%) scaleX(0.1);
  8614. }
  8615. }
  8616. @keyframes md-progressbar-infinite-multicolor-bg {
  8617. 0% {
  8618. background-color: #4caf50;
  8619. }
  8620. 25% {
  8621. background-color: #f44336;
  8622. }
  8623. 50% {
  8624. background-color: #2196f3;
  8625. }
  8626. 75% {
  8627. background-color: #ffeb3b;
  8628. }
  8629. }
  8630. @keyframes md-progressbar-infinite-multicolor-fill {
  8631. 0% {
  8632. transform: scaleX(0);
  8633. background-color: #f44336;
  8634. }
  8635. 24.9% {
  8636. transform: scaleX(1);
  8637. background-color: #f44336;
  8638. }
  8639. 25% {
  8640. transform: scaleX(0);
  8641. background-color: #2196f3;
  8642. }
  8643. 49.9% {
  8644. transform: scaleX(1);
  8645. background-color: #2196f3;
  8646. }
  8647. 50% {
  8648. transform: scaleX(0);
  8649. background-color: #ffeb3b;
  8650. }
  8651. 74.9% {
  8652. transform: scaleX(1);
  8653. background-color: #ffeb3b;
  8654. }
  8655. 75% {
  8656. transform: scaleX(0);
  8657. background-color: #4caf50;
  8658. }
  8659. 100% {
  8660. transform: scaleX(1);
  8661. background-color: #4caf50;
  8662. }
  8663. }
  8664. .aurora .progressbar,
  8665. .aurora .progressbar-infinite,
  8666. .aurora .progressbar span,
  8667. .aurora .progressbar-infinite:before {
  8668. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  8669. }
  8670. .aurora .progressbar-infinite:before {
  8671. animation: aurora-progressbar-infinite 1s linear infinite;
  8672. }
  8673. .aurora .progressbar-infinite:after {
  8674. display: none;
  8675. }
  8676. .aurora .progressbar-infinite.color-multi:before {
  8677. width: 400%;
  8678. background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
  8679. background-size: 25% 100%;
  8680. background-repeat: repeat-x;
  8681. animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
  8682. }
  8683. @keyframes aurora-progressbar-infinite {
  8684. 0% {
  8685. transform: translate3d(-100%, 0, 0);
  8686. }
  8687. 100% {
  8688. transform: translate3d(100%, 0, 0);
  8689. }
  8690. }
  8691. @keyframes aurora-progressbar-infinite-multicolor {
  8692. 0% {
  8693. transform: translate3d(0%, 0, 0);
  8694. }
  8695. 100% {
  8696. transform: translate3d(-50%, 0, 0);
  8697. }
  8698. }
  8699. /* === Sortable === */
  8700. :root {
  8701. --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
  8702. --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
  8703. }
  8704. :root .theme-dark,
  8705. :root.theme-dark {
  8706. --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  8707. --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
  8708. }
  8709. .ios {
  8710. --f7-sortable-handler-width: 36px;
  8711. --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  8712. }
  8713. .md {
  8714. --f7-sortable-handler-width: 42px;
  8715. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  8716. }
  8717. .aurora {
  8718. --f7-sortable-handler-width: 32px;
  8719. --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
  8720. }
  8721. .sortable .sortable-handler {
  8722. width: var(--f7-sortable-handler-width);
  8723. height: 100%;
  8724. position: absolute;
  8725. top: 0;
  8726. z-index: 10;
  8727. opacity: 0;
  8728. pointer-events: none;
  8729. cursor: move;
  8730. transition-duration: 300ms;
  8731. display: flex;
  8732. align-items: center;
  8733. justify-content: center;
  8734. overflow: hidden;
  8735. right: var(--f7-safe-area-right);
  8736. }
  8737. .sortable .sortable-handler:after {
  8738. font-family: 'framework7-core-icons';
  8739. font-weight: normal;
  8740. font-style: normal;
  8741. line-height: 1;
  8742. letter-spacing: normal;
  8743. text-transform: none;
  8744. white-space: nowrap;
  8745. word-wrap: normal;
  8746. direction: ltr;
  8747. -webkit-font-smoothing: antialiased;
  8748. text-rendering: optimizeLegibility;
  8749. -moz-osx-font-smoothing: grayscale;
  8750. font-feature-settings: "liga";
  8751. text-align: center;
  8752. display: block;
  8753. width: 100%;
  8754. height: 100%;
  8755. font-size: 20px;
  8756. transition-duration: 300ms;
  8757. transform: translateX(10px);
  8758. color: var(--f7-sortable-handler-color);
  8759. overflow: hidden;
  8760. height: 20px;
  8761. width: 18px;
  8762. }
  8763. .sortable li.sorting {
  8764. z-index: 50;
  8765. background: var(--f7-sortable-sorting-item-bg-color);
  8766. transition-duration: 0ms;
  8767. box-shadow: var(--f7-sortable-sorting-item-box-shadow);
  8768. }
  8769. .sortable li.sorting .item-inner:after {
  8770. display: none !important;
  8771. }
  8772. .sortable-opposite .sortable-handler {
  8773. left: var(--f7-safe-area-right);
  8774. right: auto;
  8775. }
  8776. .sortable-opposite .sortable-handler:after {
  8777. transform: translateX(-10px);
  8778. }
  8779. .sortable:not(.sortable-opposite) .item-inner,
  8780. .sortable-opposite .item-content,
  8781. .sortable.simple-list li,
  8782. .sortable-opposite.links-list li a {
  8783. transition-duration: 300ms;
  8784. transition-property: all;
  8785. }
  8786. .sortable-sorting li {
  8787. transition-duration: 300ms;
  8788. }
  8789. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler {
  8790. pointer-events: auto;
  8791. opacity: 1;
  8792. }
  8793. .sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after {
  8794. transform: translateX(0px);
  8795. }
  8796. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,
  8797. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,
  8798. .sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting) > a:before {
  8799. display: none;
  8800. }
  8801. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,
  8802. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8803. .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner,
  8804. .sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8805. .sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,
  8806. .no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
  8807. .simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),
  8808. .links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a {
  8809. padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
  8810. }
  8811. .sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content,
  8812. .simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),
  8813. .links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a {
  8814. padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
  8815. }
  8816. .ios .sortable-handler:after {
  8817. content: 'sort_ios';
  8818. }
  8819. .md .sortable-handler:after {
  8820. content: 'sort_md';
  8821. }
  8822. .aurora .sortable-handler:after {
  8823. content: 'sort_md';
  8824. font-size: 16px;
  8825. height: 16px;
  8826. }
  8827. /* === Swipeout === */
  8828. :root {
  8829. --f7-swipeout-button-text-color: #fff;
  8830. --f7-swipeout-delete-button-bg-color: #ff3b30;
  8831. --f7-swipeout-button-font-size: inherit;
  8832. --f7-swipeout-button-font-weight: inherit;
  8833. --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
  8834. }
  8835. :root .theme-dark,
  8836. :root.theme-dark {
  8837. --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
  8838. }
  8839. .ios {
  8840. --f7-swipeout-button-padding: 0 30px;
  8841. }
  8842. .md {
  8843. --f7-swipeout-button-padding: 0 24px;
  8844. }
  8845. .aurora {
  8846. --f7-swipeout-button-padding: 0 12px;
  8847. --f7-swipeout-button-font-weight: 500;
  8848. }
  8849. .swipeout {
  8850. overflow: hidden;
  8851. transform-style: preserve-3d;
  8852. }
  8853. .swipeout-deleting {
  8854. transition-duration: 300ms;
  8855. }
  8856. .swipeout-deleting .swipeout-content {
  8857. transform: translateX(-100%);
  8858. }
  8859. .swipeout-transitioning .swipeout-content,
  8860. .swipeout-transitioning .swipeout-actions-right a,
  8861. .swipeout-transitioning .swipeout-actions-left a,
  8862. .swipeout-transitioning .swipeout-overswipe {
  8863. transition-duration: 300ms;
  8864. transition-property: transform, left;
  8865. }
  8866. .swipeout-content {
  8867. position: relative;
  8868. z-index: 10;
  8869. }
  8870. .swipeout-overswipe {
  8871. transition-duration: 200ms;
  8872. transition-property: left;
  8873. }
  8874. .swipeout-actions-left,
  8875. .swipeout-actions-right {
  8876. position: absolute;
  8877. top: 0;
  8878. height: 100%;
  8879. display: flex;
  8880. direction: ltr;
  8881. }
  8882. .swipeout-actions-left > a,
  8883. .swipeout-actions-right > a,
  8884. .swipeout-actions-left > button,
  8885. .swipeout-actions-right > button,
  8886. .swipeout-actions-left > span,
  8887. .swipeout-actions-right > span,
  8888. .swipeout-actions-left > div,
  8889. .swipeout-actions-right > div {
  8890. color: var(--f7-swipeout-button-text-color);
  8891. background: var(--f7-swipeout-button-bg-color);
  8892. padding: var(--f7-swipeout-button-padding);
  8893. display: flex;
  8894. align-items: center;
  8895. position: relative;
  8896. left: 0;
  8897. font-size: var(--f7-swipeout-button-font-size);
  8898. font-weight: var(--f7-swipeout-button-font-weight);
  8899. }
  8900. .swipeout-actions-left > a:after,
  8901. .swipeout-actions-right > a:after,
  8902. .swipeout-actions-left > button:after,
  8903. .swipeout-actions-right > button:after,
  8904. .swipeout-actions-left > span:after,
  8905. .swipeout-actions-right > span:after,
  8906. .swipeout-actions-left > div:after,
  8907. .swipeout-actions-right > div:after {
  8908. content: '';
  8909. position: absolute;
  8910. top: 0;
  8911. width: 600%;
  8912. height: 100%;
  8913. background: inherit;
  8914. z-index: -1;
  8915. transform: translate3d(0, 0, 0);
  8916. pointer-events: none;
  8917. }
  8918. .swipeout-actions-left .swipeout-delete,
  8919. .swipeout-actions-right .swipeout-delete {
  8920. background: var(--f7-swipeout-delete-button-bg-color);
  8921. }
  8922. .swipeout-actions-right {
  8923. right: 0%;
  8924. transform: translateX(100%);
  8925. }
  8926. .swipeout-actions-right > a:after,
  8927. .swipeout-actions-right > button:after,
  8928. .swipeout-actions-right > span:after,
  8929. .swipeout-actions-right > div:after {
  8930. left: 100%;
  8931. margin-left: -1px;
  8932. }
  8933. .swipeout-actions-left {
  8934. left: 0%;
  8935. transform: translateX(-100%);
  8936. }
  8937. .swipeout-actions-left > a:after,
  8938. .swipeout-actions-left > button:after,
  8939. .swipeout-actions-left > span:after,
  8940. .swipeout-actions-left > div:after {
  8941. right: 100%;
  8942. margin-right: -1px;
  8943. }
  8944. .swipeout-actions-left [class*="color-"],
  8945. .swipeout-actions-right [class*="color-"] {
  8946. --f7-swipeout-button-bg-color: var(--f7-theme-color);
  8947. }
  8948. /* === Accordion === */
  8949. :root {
  8950. --f7-accordion-chevron-icon-down: 'chevron_down';
  8951. --f7-accordion-chevron-icon-up: 'chevron_up';
  8952. }
  8953. .aurora {
  8954. --f7-accordion-chevron-icon-down: 'chevron_down_aurora';
  8955. --f7-accordion-chevron-icon-up: 'chevron_up_aurora';
  8956. }
  8957. .accordion-item-toggle {
  8958. cursor: pointer;
  8959. }
  8960. .list.accordion-list .accordion-item-toggle {
  8961. transition-duration: 300ms;
  8962. position: relative;
  8963. overflow: hidden;
  8964. }
  8965. .list.accordion-list .accordion-item-toggle.active-state {
  8966. transition-duration: 300ms;
  8967. background-color: var(--f7-list-link-pressed-bg-color);
  8968. }
  8969. .list.accordion-list .accordion-item-toggle.active-state > .item-inner:after {
  8970. background-color: transparent;
  8971. }
  8972. .list.accordion-list .accordion-item-toggle .item-inner {
  8973. transition-duration: 300ms;
  8974. transition-property: background-color;
  8975. }
  8976. .list.accordion-list .accordion-item-toggle .item-inner:after {
  8977. transition-duration: 300ms;
  8978. }
  8979. .list.accordion-list .accordion-item-toggle .ripple-wave {
  8980. z-index: 0;
  8981. }
  8982. .accordion-item .item-link .item-inner:after {
  8983. transition-duration: 300ms;
  8984. }
  8985. .accordion-item .list,
  8986. .accordion-item .block {
  8987. margin-top: 0;
  8988. margin-bottom: 0;
  8989. }
  8990. .accordion-item .block > h1:first-child,
  8991. .accordion-item .block > h2:first-child,
  8992. .accordion-item .block > h3:first-child,
  8993. .accordion-item .block > h4:first-child,
  8994. .accordion-item .block > p:first-child {
  8995. margin-top: 10px;
  8996. }
  8997. .accordion-item .block > h1:last-child,
  8998. .accordion-item .block > h2:last-child,
  8999. .accordion-item .block > h3:last-child,
  9000. .accordion-item .block > h4:last-child,
  9001. .accordion-item .block > p:last-child {
  9002. margin-bottom: 10px;
  9003. }
  9004. .accordion-item-opened .accordion-item-toggle .item-inner:after,
  9005. .accordion-item-opened > .item-link .item-inner:after {
  9006. background-color: transparent;
  9007. }
  9008. .list li.accordion-item ul {
  9009. padding-left: 0;
  9010. }
  9011. .accordion-item-content {
  9012. position: relative;
  9013. overflow: hidden;
  9014. height: 0;
  9015. font-size: 14px;
  9016. transition-duration: 300ms;
  9017. }
  9018. .accordion-item-opened > .accordion-item-content {
  9019. height: auto;
  9020. }
  9021. html.device-android-4 .accordion-item-content {
  9022. transform: none;
  9023. }
  9024. .list .accordion-item-toggle .item-inner:before {
  9025. font-family: 'framework7-core-icons';
  9026. font-weight: normal;
  9027. font-style: normal;
  9028. line-height: 1;
  9029. letter-spacing: normal;
  9030. text-transform: none;
  9031. white-space: nowrap;
  9032. word-wrap: normal;
  9033. direction: ltr;
  9034. -webkit-font-smoothing: antialiased;
  9035. text-rendering: optimizeLegibility;
  9036. -moz-osx-font-smoothing: grayscale;
  9037. font-feature-settings: "liga";
  9038. text-align: center;
  9039. display: block;
  9040. width: 100%;
  9041. height: 100%;
  9042. font-size: 20px;
  9043. position: absolute;
  9044. top: 50%;
  9045. font-size: var(--f7-list-chevron-icon-font-size);
  9046. color: var(--f7-list-chevron-icon-color);
  9047. pointer-events: none;
  9048. right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  9049. }
  9050. .list:not(.accordion-opposite) .accordion-item-toggle .item-inner {
  9051. padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  9052. }
  9053. .accordion-opposite .accordion-item-toggle.item-link .item-inner,
  9054. .accordion-opposite .accordion-item-toggle .item-inner,
  9055. .accordion-opposite .accordion-item > .item-link > .item-inner,
  9056. .accordion-opposite .accordion-item > .item-link > .item-content > .item-inner {
  9057. padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
  9058. }
  9059. .accordion-opposite .accordion-item > .item-link > .item-title-row {
  9060. padding-right: 0;
  9061. }
  9062. .accordion-opposite .accordion-item-toggle.item-link .item-inner:before,
  9063. .accordion-opposite .accordion-item-toggle .item-inner:before,
  9064. .accordion-opposite .accordion-item > .item-link > .item-inner:before,
  9065. .accordion-opposite .accordion-item > .item-link > .item-content > .item-inner:before,
  9066. .accordion-opposite .accordion-item > .item-link .item-title-row:before {
  9067. display: none;
  9068. }
  9069. .accordion-opposite .accordion-item-toggle > .item-content,
  9070. .accordion-opposite .accordion-item-toggle.item-content,
  9071. .accordion-opposite .accordion-item > .item-content,
  9072. .accordion-opposite .accordion-item > .item-link > .item-content,
  9073. .accordion-opposite.links-list .accordion-item > a {
  9074. position: relative;
  9075. padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
  9076. }
  9077. .accordion-opposite .accordion-item-toggle > .item-content:before,
  9078. .accordion-opposite .accordion-item-toggle.item-content:before,
  9079. .accordion-opposite .accordion-item > .item-content:before,
  9080. .accordion-opposite .accordion-item > .item-link > .item-content:before,
  9081. .accordion-opposite.links-list .accordion-item > a:before {
  9082. font-family: 'framework7-core-icons';
  9083. font-weight: normal;
  9084. font-style: normal;
  9085. line-height: 1;
  9086. letter-spacing: normal;
  9087. text-transform: none;
  9088. white-space: nowrap;
  9089. word-wrap: normal;
  9090. direction: ltr;
  9091. -webkit-font-smoothing: antialiased;
  9092. text-rendering: optimizeLegibility;
  9093. -moz-osx-font-smoothing: grayscale;
  9094. font-feature-settings: "liga";
  9095. text-align: center;
  9096. display: block;
  9097. width: 100%;
  9098. height: 100%;
  9099. font-size: 20px;
  9100. position: absolute;
  9101. top: 50%;
  9102. font-size: var(--f7-list-chevron-icon-font-size);
  9103. color: var(--f7-list-chevron-icon-color);
  9104. pointer-events: none;
  9105. content: var(--f7-accordion-chevron-icon-down);
  9106. width: 14px;
  9107. height: 8px;
  9108. margin-top: -4px;
  9109. line-height: 8px;
  9110. transform: translateX(-50%);
  9111. left: calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal)) / 2 + var(--f7-safe-area-left));
  9112. }
  9113. .list .accordion-item-toggle.active-state {
  9114. background-color: var(--f7-list-link-pressed-bg-color);
  9115. }
  9116. .list .accordion-item-toggle .item-inner:before,
  9117. .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
  9118. .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
  9119. .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
  9120. .media-list .accordion-item > .item-link .item-title-row:before,
  9121. .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
  9122. .accordion-item.media-item > .item-link .item-title-row:before,
  9123. .links-list .accordion-item > a:before {
  9124. content: var(--f7-accordion-chevron-icon-down);
  9125. width: 14px;
  9126. height: 8px;
  9127. margin-top: -4px;
  9128. line-height: 8px;
  9129. }
  9130. .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
  9131. .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
  9132. .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
  9133. .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
  9134. .media-list .accordion-item-opened > .item-link .item-title-row:before,
  9135. .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
  9136. .accordion-item-opened.media-item > .item-link .item-title-row:before,
  9137. .links-list .accordion-item-opened > a:before,
  9138. .accordion-opposite .accordion-item-opened .accordion-item-toggle > .item-content:before,
  9139. .accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,
  9140. .accordion-opposite .accordion-item-opened > .item-content:before,
  9141. .accordion-opposite .accordion-item-opened > .item-link > .item-content:before,
  9142. .accordion-opposite .links-list .accordion-item-opened > a:before {
  9143. content: var(--f7-accordion-chevron-icon-up);
  9144. width: 14px;
  9145. height: 8px;
  9146. margin-top: -4px;
  9147. line-height: 8px;
  9148. }
  9149. /* === Contacts === */
  9150. :root .theme-dark,
  9151. :root.theme-dark {
  9152. --f7-contacts-list-title-text-color: #fff;
  9153. }
  9154. .ios {
  9155. --f7-contacts-list-title-font-size: inherit;
  9156. --f7-contacts-list-title-font-weight: 600;
  9157. --f7-contacts-list-title-height: 22px;
  9158. --f7-contacts-list-title-text-color: #000;
  9159. --f7-contacts-list-title-bg-color: #f7f7f7;
  9160. }
  9161. .ios .theme-dark,
  9162. .ios.theme-dark {
  9163. --f7-contacts-list-title-bg-color: #323234;
  9164. }
  9165. .md {
  9166. --f7-contacts-list-title-font-size: 20px;
  9167. --f7-contacts-list-title-font-weight: 500;
  9168. /*
  9169. --f7-contacts-list-title-text-color: var(--f7-theme-color);
  9170. */
  9171. --f7-contacts-list-title-height: 48px;
  9172. --f7-contacts-list-title-bg-color: transparent;
  9173. }
  9174. .aurora {
  9175. --f7-contacts-list-title-font-weight: 600;
  9176. --f7-contacts-list-title-text-color: #000;
  9177. /*
  9178. --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
  9179. --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
  9180. --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
  9181. --f7-contacts-list-title-height: var(--f7-list-group-title-height);
  9182. */
  9183. }
  9184. .contacts-list {
  9185. --f7-list-margin-vertical: 0px;
  9186. }
  9187. .contacts-list .list-group-title,
  9188. .contacts-list li.list-group-title {
  9189. background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
  9190. font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
  9191. font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
  9192. color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
  9193. line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  9194. height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
  9195. }
  9196. .contacts-list .list-group:first-child ul:before {
  9197. display: none !important;
  9198. }
  9199. .contacts-list .list-group:last-child ul:after {
  9200. display: none !important;
  9201. }
  9202. .md .contacts-list .list-group-title {
  9203. pointer-events: none;
  9204. overflow: visible;
  9205. width: 56px;
  9206. }
  9207. .md .contacts-list .list-group-title + li {
  9208. margin-top: calc(var(--f7-contacts-list-title-height) * -1);
  9209. }
  9210. .md .contacts-list li:not(.list-group-title) {
  9211. padding-left: 56px;
  9212. }
  9213. /* === Virtual List === */
  9214. /* === Indexed List === */
  9215. :root {
  9216. --f7-list-index-width: 16px;
  9217. --f7-list-index-font-size: 11px;
  9218. --f7-list-index-font-weight: 600;
  9219. /* --f7-list-index-text-color: var(--f7-theme-color); */
  9220. --f7-list-index-item-height: 14px;
  9221. --f7-list-index-label-text-color: #fff;
  9222. /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
  9223. --f7-list-index-label-font-weight: 500;
  9224. }
  9225. .ios {
  9226. --f7-list-index-label-size: 44px;
  9227. --f7-list-index-label-font-size: 17px;
  9228. --f7-list-index-skip-dot-size: 6px;
  9229. }
  9230. .md {
  9231. --f7-list-index-label-size: 56px;
  9232. --f7-list-index-label-font-size: 20px;
  9233. --f7-list-index-skip-dot-size: 4px;
  9234. }
  9235. .aurora {
  9236. --f7-list-index-font-size: 12px;
  9237. --f7-list-index-label-size: 32px;
  9238. --f7-list-index-label-font-size: 12px;
  9239. --f7-list-index-label-font-weight: 600;
  9240. --f7-list-index-skip-dot-size: 4px;
  9241. }
  9242. .list-index {
  9243. position: absolute;
  9244. top: 0;
  9245. bottom: 0;
  9246. text-align: center;
  9247. z-index: 10;
  9248. width: var(--f7-list-index-width);
  9249. cursor: pointer;
  9250. -webkit-user-select: none;
  9251. -moz-user-select: none;
  9252. user-select: none;
  9253. right: var(--f7-safe-area-right);
  9254. }
  9255. .list-index:before {
  9256. content: '';
  9257. position: absolute;
  9258. width: 20px;
  9259. top: 0;
  9260. right: 100%;
  9261. height: 100%;
  9262. }
  9263. .list-index ul {
  9264. color: var(--f7-list-index-text-color, var(--f7-theme-color));
  9265. font-size: var(--f7-list-index-font-size);
  9266. font-weight: var(--f7-list-index-font-weight);
  9267. list-style: none;
  9268. margin: 0;
  9269. padding: 0;
  9270. display: flex;
  9271. flex-direction: column;
  9272. justify-content: center;
  9273. align-items: center;
  9274. flex-shrink: 0;
  9275. height: 100%;
  9276. width: 100%;
  9277. position: relative;
  9278. }
  9279. .list-index li {
  9280. margin: 0;
  9281. padding: 0;
  9282. list-style: none;
  9283. position: relative;
  9284. height: var(--f7-list-index-item-height);
  9285. line-height: var(--f7-list-index-item-height);
  9286. flex-shrink: 0;
  9287. display: block;
  9288. width: 100%;
  9289. }
  9290. .list-index .list-index-skip-placeholder:after {
  9291. content: '';
  9292. position: absolute;
  9293. left: 50%;
  9294. top: 50%;
  9295. border-radius: 50%;
  9296. width: var(--f7-list-index-skip-dot-size);
  9297. height: var(--f7-list-index-skip-dot-size);
  9298. margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  9299. margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
  9300. background: var(--f7-list-index-text-color, var(--f7-theme-color));
  9301. }
  9302. .list-index .list-index-label {
  9303. position: absolute;
  9304. bottom: 0;
  9305. right: 100%;
  9306. text-align: center;
  9307. background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
  9308. color: var(--f7-list-index-label-text-color);
  9309. width: var(--f7-list-index-label-size);
  9310. height: var(--f7-list-index-label-size);
  9311. line-height: var(--f7-list-index-label-size);
  9312. font-size: var(--f7-list-index-label-font-size);
  9313. font-weight: var(--f7-list-index-label-font-weight);
  9314. }
  9315. .navbar ~ .page > .list-index,
  9316. .navbars ~ .page > .list-index,
  9317. .navbar ~ .list-index {
  9318. top: var(--f7-navbar-height);
  9319. }
  9320. .navbar ~ .toolbar-top ~ .list-index,
  9321. .navbars ~ .toolbar-top ~ .list-index,
  9322. .ios .navbar ~ .toolbar-top-ios ~ .list-index,
  9323. .ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md ~ .list-index {
  9324. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
  9325. }
  9326. .navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
  9327. .navbars ~ .toolbar-top.tabbar-labels ~ .list-index,
  9328. .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
  9329. .ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
  9330. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
  9331. }
  9332. .navbar ~ .subnavbar ~ .list-index,
  9333. .navbars ~ .subnavbar ~ .list-index,
  9334. .page-with-subnavbar .navbar ~ .list-index {
  9335. top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
  9336. }
  9337. .toolbar-bottom ~ .page > .list-index,
  9338. .ios .toolbar-bottom-ios ~ .page > .list-index,
  9339. .md .toolbar-bottom-md ~ .page > .list-index,
  9340. .toolbar-bottom ~ * .page > .list-index,
  9341. .ios .toolbar-bottom-ios ~ * .page > .list-index,
  9342. .md .toolbar-bottom-md ~ * .page > .list-index,
  9343. .toolbar-bottom ~ .list-index,
  9344. .ios .toolbar-bottom-ios ~ .list-index,
  9345. .md .toolbar-bottom-md ~ .list-index {
  9346. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  9347. }
  9348. .toolbar-bottom.tabbar-labels ~ .page > .list-index,
  9349. .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
  9350. .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
  9351. .toolbar-bottom.tabbar-labels ~ * .page > .list-index,
  9352. .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
  9353. .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
  9354. .toolbar-bottom.tabbar-labels ~ .list-index,
  9355. .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
  9356. .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
  9357. bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
  9358. }
  9359. .ios .list-index .list-index-label {
  9360. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  9361. margin-right: calc(var(--f7-list-index-width) - 1px);
  9362. border-radius: 50%;
  9363. }
  9364. .ios .list-index .list-index-label:before {
  9365. position: absolute;
  9366. width: 100%;
  9367. height: 100%;
  9368. border-radius: 50% 0% 50% 50%;
  9369. content: '';
  9370. background-color: inherit;
  9371. left: 0;
  9372. top: 0;
  9373. transform: rotate(45deg);
  9374. z-index: -1;
  9375. }
  9376. .md .list-index .list-index-label {
  9377. border-radius: 50% 50% 0 50%;
  9378. }
  9379. .aurora .list-index .list-index-label {
  9380. margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
  9381. margin-right: calc(var(--f7-list-index-width) - 1px);
  9382. border-radius: 50%;
  9383. }
  9384. .aurora .list-index .list-index-label:before {
  9385. position: absolute;
  9386. width: 100%;
  9387. height: 100%;
  9388. border-radius: 50% 1px 50% 50%;
  9389. content: '';
  9390. background-color: inherit;
  9391. left: 0;
  9392. top: 0;
  9393. transform: rotate(45deg);
  9394. z-index: -1;
  9395. }
  9396. /* === Timeline === */
  9397. :root {
  9398. --f7-timeline-inner-block-margin-vertical: 16px;
  9399. --f7-timeline-divider-margin-horizontal: 16px;
  9400. --f7-timeline-horizontal-date-height: 34px;
  9401. --f7-timeline-year-height: 24px;
  9402. --f7-timeline-year-font-weight: inherit;
  9403. --f7-timeline-month-height: 24px;
  9404. --f7-timeline-month-font-size: inherit;
  9405. --f7-timeline-month-font-weight: inherit;
  9406. --f7-timeline-item-text-font-weight: inherit;
  9407. --f7-timeline-item-subtitle-font-weight: inherit;
  9408. --f7-timeline-item-inner-bg-color: #fff;
  9409. }
  9410. :root .theme-dark,
  9411. :root.theme-dark {
  9412. --f7-timeline-item-inner-bg-color: #1c1c1d;
  9413. --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
  9414. --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
  9415. }
  9416. .ios {
  9417. --f7-timeline-padding-horizontal: 16px;
  9418. --f7-timeline-margin-vertical: 35px;
  9419. --f7-timeline-item-inner-border-radius: 7px;
  9420. --f7-timeline-item-inner-box-shadow: none;
  9421. --f7-timeline-item-time-font-size: 13px;
  9422. --f7-timeline-item-title-font-size: 17px;
  9423. --f7-timeline-item-title-line-height: inherit;
  9424. --f7-timeline-item-title-font-weight: 600;
  9425. --f7-timeline-item-subtitle-font-size: 15px;
  9426. --f7-timeline-item-subtitle-line-height: inherit;
  9427. --f7-timeline-item-text-font-size: inherit;
  9428. --f7-timeline-item-text-color: inherit;
  9429. --f7-timeline-item-text-line-height: inherit;
  9430. --f7-timeline-year-font-size: 16px;
  9431. --f7-timeline-horizontal-item-padding: 10px;
  9432. --f7-timeline-horizontal-item-date-shadow-image: none;
  9433. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
  9434. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
  9435. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
  9436. }
  9437. .ios .theme-dark,
  9438. .ios.theme-dark {
  9439. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
  9440. }
  9441. .md {
  9442. --f7-timeline-padding-horizontal: 16px;
  9443. --f7-timeline-margin-vertical: 32px;
  9444. --f7-timeline-item-inner-border-radius: 4px;
  9445. --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
  9446. --f7-timeline-item-time-font-size: 13px;
  9447. --f7-timeline-item-title-font-size: 16px;
  9448. --f7-timeline-item-title-line-height: inherit;
  9449. --f7-timeline-item-title-font-weight: 400;
  9450. --f7-timeline-item-subtitle-font-size: inherit;
  9451. --f7-timeline-item-subtitle-line-height: inherit;
  9452. --f7-timeline-item-text-font-size: inherit;
  9453. --f7-timeline-item-text-line-height: inherit;
  9454. --f7-timeline-item-text-color: inherit;
  9455. --f7-timeline-year-font-size: 16px;
  9456. --f7-timeline-horizontal-item-padding: 12px;
  9457. --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
  9458. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
  9459. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
  9460. --f7-timeline-horizontal-item-date-border-color: transparent;
  9461. }
  9462. .md .theme-dark,
  9463. .md.theme-dark {
  9464. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  9465. }
  9466. .aurora {
  9467. --f7-timeline-padding-horizontal: 10px;
  9468. --f7-timeline-margin-vertical: 15px;
  9469. --f7-timeline-item-inner-border-radius: 4px;
  9470. --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  9471. --f7-timeline-item-time-font-size: 12px;
  9472. --f7-timeline-item-title-font-size: 14px;
  9473. --f7-timeline-item-title-line-height: 1.3;
  9474. --f7-timeline-item-title-font-weight: 600;
  9475. --f7-timeline-item-subtitle-font-size: 14px;
  9476. --f7-timeline-item-subtitle-line-height: 1.3;
  9477. --f7-timeline-item-text-font-size: 12px;
  9478. --f7-timeline-item-text-line-height: 1.33;
  9479. --f7-timeline-year-font-size: 14px;
  9480. --f7-timeline-year-font-weight: 500;
  9481. --f7-timeline-horizontal-item-padding: 10px;
  9482. --f7-timeline-horizontal-item-date-shadow-image: none;
  9483. --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
  9484. --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
  9485. --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
  9486. --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
  9487. }
  9488. .aurora .theme-dark,
  9489. .aurora.theme-dark {
  9490. --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
  9491. --f7-timeline-item-text-color: rgba(255, 255, 255, 0.54);
  9492. }
  9493. .timeline {
  9494. box-sizing: border-box;
  9495. margin: var(--f7-timeline-margin-vertical) 0;
  9496. padding: 0 var(--f7-timeline-padding-horizontal);
  9497. padding-top: 0;
  9498. padding-bottom: 0;
  9499. padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
  9500. padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
  9501. }
  9502. .block-strong .timeline {
  9503. padding: 0;
  9504. margin: 0;
  9505. }
  9506. .timeline-item {
  9507. display: flex;
  9508. justify-content: flex-start;
  9509. overflow: hidden;
  9510. box-sizing: border-box;
  9511. position: relative;
  9512. padding: 2px 0px var(--f7-timeline-padding-horizontal);
  9513. }
  9514. .timeline-item:last-child {
  9515. padding-bottom: 2px;
  9516. }
  9517. .timeline-item-date {
  9518. flex-shrink: 0;
  9519. width: 50px;
  9520. text-align: right;
  9521. box-sizing: border-box;
  9522. }
  9523. .timeline-item-date small {
  9524. font-size: 10px;
  9525. }
  9526. .timeline-item-content {
  9527. margin: 2px;
  9528. min-width: 0;
  9529. position: relative;
  9530. flex-shrink: 10;
  9531. }
  9532. .timeline-item-content .card,
  9533. .timeline-item-content.card,
  9534. .timeline-item-content .list,
  9535. .timeline-item-content.list,
  9536. .timeline-item-content .block,
  9537. .timeline-item-content.block {
  9538. margin: 0;
  9539. width: 100%;
  9540. }
  9541. .timeline-item-content .card + .card,
  9542. .timeline-item-content .list + .card,
  9543. .timeline-item-content .block + .card,
  9544. .timeline-item-content .card + .list,
  9545. .timeline-item-content .list + .list,
  9546. .timeline-item-content .block + .list,
  9547. .timeline-item-content .card + .block,
  9548. .timeline-item-content .list + .block,
  9549. .timeline-item-content .block + .block {
  9550. margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
  9551. }
  9552. .timeline-item-content p:first-child,
  9553. .timeline-item-content ul:first-child,
  9554. .timeline-item-content ol:first-child,
  9555. .timeline-item-content h1:first-child,
  9556. .timeline-item-content h2:first-child,
  9557. .timeline-item-content h3:first-child,
  9558. .timeline-item-content h4:first-child {
  9559. margin-top: 0;
  9560. }
  9561. .timeline-item-content p:last-child,
  9562. .timeline-item-content ul:last-child,
  9563. .timeline-item-content ol:last-child,
  9564. .timeline-item-content h1:last-child,
  9565. .timeline-item-content h2:last-child,
  9566. .timeline-item-content h3:last-child,
  9567. .timeline-item-content h4:last-child {
  9568. margin-bottom: 0;
  9569. }
  9570. .timeline-item-inner {
  9571. background: var(--f7-timeline-item-inner-bg-color);
  9572. box-sizing: border-box;
  9573. border-radius: var(--f7-timeline-item-inner-border-radius);
  9574. padding: 8px var(--f7-timeline-padding-horizontal);
  9575. box-shadow: var(--f7-timeline-item-inner-box-shadow);
  9576. }
  9577. .timeline-item-inner + .timeline-item-inner {
  9578. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  9579. }
  9580. .timeline-item-inner .block {
  9581. padding: 0;
  9582. color: inherit;
  9583. }
  9584. .timeline-item-inner .block-strong {
  9585. padding-left: 0;
  9586. padding-right: 0;
  9587. margin: 0;
  9588. }
  9589. .timeline-item-inner .block-strong:before,
  9590. .timeline-item-inner .block-strong:after {
  9591. display: none !important;
  9592. }
  9593. .timeline-item-inner .list ul:before,
  9594. .timeline-item-inner .list ul:after {
  9595. display: none !important;
  9596. }
  9597. .timeline-item-divider {
  9598. width: 1px;
  9599. position: relative;
  9600. width: 10px;
  9601. height: 10px;
  9602. background: #bbb;
  9603. border-radius: 50%;
  9604. flex-shrink: 0;
  9605. margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
  9606. }
  9607. .timeline-item-divider:after,
  9608. .timeline-item-divider:before {
  9609. content: ' ';
  9610. width: 1px;
  9611. height: 100vh;
  9612. position: absolute;
  9613. left: 50%;
  9614. background: inherit;
  9615. transform: translate3d(-50%, 0, 0);
  9616. }
  9617. .timeline-item-divider:after {
  9618. top: 100%;
  9619. }
  9620. .timeline-item-divider:before {
  9621. bottom: 100%;
  9622. }
  9623. .timeline-item:last-child .timeline-item-divider:after {
  9624. display: none;
  9625. }
  9626. .timeline-item:first-child .timeline-item-divider:before {
  9627. display: none;
  9628. }
  9629. .timeline-item-time {
  9630. font-size: var(--f7-timeline-item-time-font-size);
  9631. margin-top: var(--f7-timeline-inner-block-margin-vertical);
  9632. color: var(--f7-timeline-item-time-text-color);
  9633. }
  9634. .timeline-item-time:first-child,
  9635. .timeline-item-time:last-child {
  9636. margin-top: 0;
  9637. }
  9638. .timeline-item-title + .timeline-item-time {
  9639. margin-top: 0;
  9640. }
  9641. .timeline-item-title {
  9642. font-size: var(--f7-timeline-item-title-font-size);
  9643. font-weight: var(--f7-timeline-item-title-font-weight);
  9644. line-height: var(--f7-timeline-item-title-line-height);
  9645. }
  9646. .timeline-item-subtitle {
  9647. font-size: var(--f7-timeline-item-subtitle-font-size);
  9648. font-weight: var(--f7-timeline-item-subtitle-font-weight);
  9649. line-height: var(--f7-timeline-item-subtitle-line-height);
  9650. }
  9651. .timeline-item-text {
  9652. color: var(--f7-timeline-item-text-color);
  9653. font-size: var(--f7-timeline-item-text-font-size);
  9654. font-weight: var(--f7-timeline-item-text-font-weight);
  9655. line-height: var(--f7-timeline-item-text-line-height);
  9656. }
  9657. .timeline-sides .timeline-item-right,
  9658. .timeline-sides .timeline-item {
  9659. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9660. margin-right: 0;
  9661. }
  9662. .timeline-sides .timeline-item-right .timeline-item-date,
  9663. .timeline-sides .timeline-item .timeline-item-date {
  9664. text-align: right;
  9665. }
  9666. .timeline-sides .timeline-item-left,
  9667. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9668. flex-direction: row-reverse;
  9669. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9670. margin-left: 0;
  9671. }
  9672. .timeline-sides .timeline-item-left .timeline-item-date,
  9673. .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9674. text-align: left;
  9675. }
  9676. @media (min-width: 480px) {
  9677. .xsmall-sides .timeline-item-right,
  9678. .xsmall-sides .timeline-item {
  9679. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9680. margin-right: 0;
  9681. }
  9682. .xsmall-sides .timeline-item-right .timeline-item-date,
  9683. .xsmall-sides .timeline-item .timeline-item-date {
  9684. text-align: right;
  9685. }
  9686. .xsmall-sides .timeline-item-left,
  9687. .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9688. flex-direction: row-reverse;
  9689. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9690. margin-left: 0;
  9691. }
  9692. .xsmall-sides .timeline-item-left .timeline-item-date,
  9693. .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9694. text-align: left;
  9695. }
  9696. }
  9697. @media (min-width: 568px) {
  9698. .small-sides .timeline-item-right,
  9699. .small-sides .timeline-item {
  9700. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9701. margin-right: 0;
  9702. }
  9703. .small-sides .timeline-item-right .timeline-item-date,
  9704. .small-sides .timeline-item .timeline-item-date {
  9705. text-align: right;
  9706. }
  9707. .small-sides .timeline-item-left,
  9708. .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9709. flex-direction: row-reverse;
  9710. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9711. margin-left: 0;
  9712. }
  9713. .small-sides .timeline-item-left .timeline-item-date,
  9714. .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9715. text-align: left;
  9716. }
  9717. }
  9718. @media (min-width: 768px) {
  9719. .medium-sides .timeline-item-right,
  9720. .medium-sides .timeline-item {
  9721. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9722. margin-right: 0;
  9723. }
  9724. .medium-sides .timeline-item-right .timeline-item-date,
  9725. .medium-sides .timeline-item .timeline-item-date {
  9726. text-align: right;
  9727. }
  9728. .medium-sides .timeline-item-left,
  9729. .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9730. flex-direction: row-reverse;
  9731. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9732. margin-left: 0;
  9733. }
  9734. .medium-sides .timeline-item-left .timeline-item-date,
  9735. .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9736. text-align: left;
  9737. }
  9738. }
  9739. @media (min-width: 1024px) {
  9740. .large-sides .timeline-item-right,
  9741. .large-sides .timeline-item {
  9742. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9743. margin-right: 0;
  9744. }
  9745. .large-sides .timeline-item-right .timeline-item-date,
  9746. .large-sides .timeline-item .timeline-item-date {
  9747. text-align: right;
  9748. }
  9749. .large-sides .timeline-item-left,
  9750. .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9751. flex-direction: row-reverse;
  9752. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9753. margin-left: 0;
  9754. }
  9755. .large-sides .timeline-item-left .timeline-item-date,
  9756. .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9757. text-align: left;
  9758. }
  9759. }
  9760. @media (min-width: 1200px) {
  9761. .xlarge-sides .timeline-item-right,
  9762. .xlarge-sides .timeline-item {
  9763. margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9764. margin-right: 0;
  9765. }
  9766. .xlarge-sides .timeline-item-right .timeline-item-date,
  9767. .xlarge-sides .timeline-item .timeline-item-date {
  9768. text-align: right;
  9769. }
  9770. .xlarge-sides .timeline-item-left,
  9771. .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
  9772. flex-direction: row-reverse;
  9773. margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
  9774. margin-left: 0;
  9775. }
  9776. .xlarge-sides .timeline-item-left .timeline-item-date,
  9777. .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
  9778. text-align: left;
  9779. }
  9780. }
  9781. .timeline-horizontal {
  9782. height: 100%;
  9783. display: flex;
  9784. padding: 0;
  9785. margin: 0;
  9786. position: relative;
  9787. padding-left: var(--f7-safe-area-left);
  9788. padding-right: 0;
  9789. }
  9790. .timeline-horizontal .timeline-item {
  9791. display: block;
  9792. width: 33.33333333vw;
  9793. margin: 0;
  9794. padding: 0;
  9795. flex-shrink: 0;
  9796. position: relative;
  9797. height: 100%;
  9798. padding-top: var(--f7-timeline-horizontal-date-height) !important;
  9799. padding-bottom: var(--f7-timeline-horizontal-item-padding);
  9800. }
  9801. .timeline-horizontal .timeline-item:after {
  9802. content: '';
  9803. position: absolute;
  9804. background-color: var(--f7-timeline-horizontal-item-border-color);
  9805. display: block;
  9806. z-index: 15;
  9807. top: 0;
  9808. right: 0;
  9809. bottom: auto;
  9810. left: auto;
  9811. width: 1px;
  9812. height: 100%;
  9813. transform-origin: 100% 50%;
  9814. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  9815. }
  9816. .timeline-horizontal .timeline-item-date {
  9817. padding: 0px var(--f7-timeline-horizontal-item-padding);
  9818. width: auto;
  9819. line-height: var(--f7-timeline-horizontal-date-height);
  9820. position: absolute;
  9821. left: 0;
  9822. top: 0;
  9823. width: 100%;
  9824. height: var(--f7-timeline-horizontal-date-height);
  9825. background-color: var(--f7-bars-bg-color);
  9826. color: var(--f7-bars-text-color);
  9827. text-align: left;
  9828. }
  9829. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  9830. .ios-translucent-bars .timeline-horizontal .timeline-item-date {
  9831. background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
  9832. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  9833. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  9834. }
  9835. }
  9836. .timeline-horizontal .timeline-item-date:after {
  9837. content: '';
  9838. position: absolute;
  9839. background-color: var(--f7-timeline-horizontal-item-date-border-color);
  9840. display: block;
  9841. z-index: 15;
  9842. top: auto;
  9843. right: auto;
  9844. bottom: 0;
  9845. left: 0;
  9846. height: 1px;
  9847. width: 100%;
  9848. transform-origin: 50% 100%;
  9849. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  9850. }
  9851. .timeline-horizontal .timeline-item-date:before {
  9852. content: '';
  9853. position: absolute;
  9854. right: 0;
  9855. width: 100%;
  9856. top: 100%;
  9857. bottom: auto;
  9858. height: 8px;
  9859. pointer-events: none;
  9860. background: var(--f7-timeline-horizontal-item-date-shadow-image);
  9861. }
  9862. .timeline-horizontal.no-shadow .timeline-item-date:before {
  9863. display: none;
  9864. }
  9865. .timeline-horizontal .timeline-item-content {
  9866. padding: var(--f7-timeline-horizontal-item-padding);
  9867. height: calc(100% - var(--f7-timeline-horizontal-item-padding));
  9868. overflow: auto;
  9869. -webkit-overflow-scrolling: touch;
  9870. margin: 0;
  9871. }
  9872. .timeline-horizontal .timeline-item-divider {
  9873. display: none;
  9874. }
  9875. .timeline-horizontal > .timeline-item:last-child:after,
  9876. .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
  9877. display: none !important;
  9878. }
  9879. .timeline-horizontal.col-5 .timeline-item {
  9880. width: 5vw;
  9881. }
  9882. .timeline-horizontal.col-10 .timeline-item {
  9883. width: 10vw;
  9884. }
  9885. .timeline-horizontal.col-15 .timeline-item {
  9886. width: 15vw;
  9887. }
  9888. .timeline-horizontal.col-20 .timeline-item {
  9889. width: 20vw;
  9890. }
  9891. .timeline-horizontal.col-25 .timeline-item {
  9892. width: 25vw;
  9893. }
  9894. .timeline-horizontal.col-30 .timeline-item {
  9895. width: 30vw;
  9896. }
  9897. .timeline-horizontal.col-33 .timeline-item {
  9898. width: 33.333333333333336vw;
  9899. }
  9900. .timeline-horizontal.col-35 .timeline-item {
  9901. width: 35vw;
  9902. }
  9903. .timeline-horizontal.col-40 .timeline-item {
  9904. width: 40vw;
  9905. }
  9906. .timeline-horizontal.col-45 .timeline-item {
  9907. width: 45vw;
  9908. }
  9909. .timeline-horizontal.col-50 .timeline-item {
  9910. width: 50vw;
  9911. }
  9912. .timeline-horizontal.col-55 .timeline-item {
  9913. width: 55vw;
  9914. }
  9915. .timeline-horizontal.col-60 .timeline-item {
  9916. width: 60vw;
  9917. }
  9918. .timeline-horizontal.col-65 .timeline-item {
  9919. width: 65vw;
  9920. }
  9921. .timeline-horizontal.col-66 .timeline-item {
  9922. width: 66.66666666666666vw;
  9923. }
  9924. .timeline-horizontal.col-70 .timeline-item {
  9925. width: 70vw;
  9926. }
  9927. .timeline-horizontal.col-75 .timeline-item {
  9928. width: 75vw;
  9929. }
  9930. .timeline-horizontal.col-80 .timeline-item {
  9931. width: 80vw;
  9932. }
  9933. .timeline-horizontal.col-85 .timeline-item {
  9934. width: 85vw;
  9935. }
  9936. .timeline-horizontal.col-90 .timeline-item {
  9937. width: 90vw;
  9938. }
  9939. .timeline-horizontal.col-95 .timeline-item {
  9940. width: 95vw;
  9941. }
  9942. .timeline-horizontal.col-100 .timeline-item {
  9943. width: 100vw;
  9944. }
  9945. @media (min-width: 768px) {
  9946. .timeline-horizontal.tablet-5 .timeline-item {
  9947. width: 5vw;
  9948. }
  9949. .timeline-horizontal.tablet-10 .timeline-item {
  9950. width: 10vw;
  9951. }
  9952. .timeline-horizontal.tablet-15 .timeline-item {
  9953. width: 15vw;
  9954. }
  9955. .timeline-horizontal.tablet-20 .timeline-item {
  9956. width: 20vw;
  9957. }
  9958. .timeline-horizontal.tablet-25 .timeline-item {
  9959. width: 25vw;
  9960. }
  9961. .timeline-horizontal.tablet-30 .timeline-item {
  9962. width: 30vw;
  9963. }
  9964. .timeline-horizontal.tablet-33 .timeline-item {
  9965. width: 33.333333333333336vw;
  9966. }
  9967. .timeline-horizontal.tablet-35 .timeline-item {
  9968. width: 35vw;
  9969. }
  9970. .timeline-horizontal.tablet-40 .timeline-item {
  9971. width: 40vw;
  9972. }
  9973. .timeline-horizontal.tablet-45 .timeline-item {
  9974. width: 45vw;
  9975. }
  9976. .timeline-horizontal.tablet-50 .timeline-item {
  9977. width: 50vw;
  9978. }
  9979. .timeline-horizontal.tablet-55 .timeline-item {
  9980. width: 55vw;
  9981. }
  9982. .timeline-horizontal.tablet-60 .timeline-item {
  9983. width: 60vw;
  9984. }
  9985. .timeline-horizontal.tablet-65 .timeline-item {
  9986. width: 65vw;
  9987. }
  9988. .timeline-horizontal.tablet-66 .timeline-item {
  9989. width: 66.66666666666666vw;
  9990. }
  9991. .timeline-horizontal.tablet-70 .timeline-item {
  9992. width: 70vw;
  9993. }
  9994. .timeline-horizontal.tablet-75 .timeline-item {
  9995. width: 75vw;
  9996. }
  9997. .timeline-horizontal.tablet-80 .timeline-item {
  9998. width: 80vw;
  9999. }
  10000. .timeline-horizontal.tablet-85 .timeline-item {
  10001. width: 85vw;
  10002. }
  10003. .timeline-horizontal.tablet-90 .timeline-item {
  10004. width: 90vw;
  10005. }
  10006. .timeline-horizontal.tablet-95 .timeline-item {
  10007. width: 95vw;
  10008. }
  10009. .timeline-horizontal.tablet-100 .timeline-item {
  10010. width: 100vw;
  10011. }
  10012. }
  10013. .timeline-year {
  10014. padding-top: var(--f7-timeline-year-height);
  10015. }
  10016. .timeline-year:after {
  10017. content: '';
  10018. position: absolute;
  10019. background-color: var(--f7-timeline-horizontal-item-border-color);
  10020. display: block;
  10021. z-index: 15;
  10022. top: 0;
  10023. right: 0;
  10024. bottom: auto;
  10025. left: auto;
  10026. width: 1px;
  10027. height: 100%;
  10028. transform-origin: 100% 50%;
  10029. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  10030. }
  10031. .timeline-year:last-child:after {
  10032. display: none !important;
  10033. }
  10034. .timeline-month {
  10035. padding-top: var(--f7-timeline-month-height);
  10036. }
  10037. .timeline-month .timeline-item:before {
  10038. content: '';
  10039. position: absolute;
  10040. background-color: var(--f7-timeline-horizontal-item-border-color);
  10041. display: block;
  10042. z-index: 15;
  10043. top: 0;
  10044. right: auto;
  10045. bottom: auto;
  10046. left: 0;
  10047. height: 1px;
  10048. width: 100%;
  10049. transform-origin: 50% 0%;
  10050. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10051. }
  10052. .timeline-year,
  10053. .timeline-month {
  10054. display: flex;
  10055. flex-shrink: 0;
  10056. position: relative;
  10057. box-sizing: border-box;
  10058. height: 100%;
  10059. }
  10060. .timeline-year-title {
  10061. line-height: var(--f7-timeline-year-height);
  10062. height: var(--f7-timeline-year-height);
  10063. font-size: var(--f7-timeline-year-font-size);
  10064. font-weight: var(--f7-timeline-year-font-weight);
  10065. }
  10066. .timeline-month-title {
  10067. line-height: var(--f7-timeline-month-height);
  10068. height: var(--f7-timeline-month-height);
  10069. font-size: var(--f7-timeline-month-font-size);
  10070. font-weight: var(--f7-timeline-month-font-weight);
  10071. }
  10072. .timeline-year-title,
  10073. .timeline-month-title {
  10074. position: absolute;
  10075. left: 0;
  10076. top: 0;
  10077. width: 100%;
  10078. box-sizing: border-box;
  10079. padding: 0 var(--f7-timeline-horizontal-item-padding);
  10080. background-color: var(--f7-bars-bg-color);
  10081. color: var(--f7-bars-text-color);
  10082. }
  10083. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  10084. .ios-translucent-bars .timeline-year-title,
  10085. .ios-translucent-bars .timeline-month-title {
  10086. background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
  10087. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  10088. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  10089. }
  10090. }
  10091. .timeline-year-title span,
  10092. .timeline-month-title span {
  10093. display: inline-block;
  10094. position: -webkit-sticky;
  10095. position: sticky;
  10096. left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
  10097. }
  10098. .timeline-month-title span {
  10099. margin-top: -2px;
  10100. }
  10101. .timeline-year:first-child .timeline-year-title,
  10102. .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
  10103. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
  10104. left: calc(var(--f7-safe-area-left) * -1);
  10105. right: 0;
  10106. width: auto;
  10107. }
  10108. .timeline-horizontal .timeline-item:first-child,
  10109. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
  10110. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
  10111. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
  10112. overflow: visible;
  10113. }
  10114. .timeline-horizontal .timeline-item:first-child .timeline-item-date,
  10115. .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
  10116. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
  10117. .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
  10118. width: auto;
  10119. padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
  10120. left: calc(0px - var(--f7-safe-area-left));
  10121. right: 0;
  10122. }
  10123. .timeline-year:last-child .timeline-year-title,
  10124. .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
  10125. width: auto;
  10126. right: calc(0px - var(--f7-safe-area-right));
  10127. }
  10128. .timeline-horizontal .timeline-item:last-child,
  10129. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
  10130. overflow: visible;
  10131. }
  10132. .timeline-horizontal .timeline-item:last-child .timeline-item-date,
  10133. .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
  10134. width: auto;
  10135. right: calc(0px - var(--f7-safe-area-right));
  10136. left: 0;
  10137. }
  10138. .ios .block-strong .timeline-item-inner {
  10139. border-radius: 3px;
  10140. border: 1px solid rgba(0, 0, 0, 0.1);
  10141. }
  10142. .ios .timeline-year-title span {
  10143. margin-top: 3px;
  10144. }
  10145. .md .timeline-year-title span {
  10146. margin-top: 2px;
  10147. }
  10148. .aurora .timeline-year-title span {
  10149. margin-top: 2px;
  10150. }
  10151. /* === Tabs === */
  10152. .tabs .tab {
  10153. display: none;
  10154. }
  10155. .tabs .tab-active {
  10156. display: block;
  10157. }
  10158. .tabs-animated-wrap {
  10159. position: relative;
  10160. width: 100%;
  10161. overflow: hidden;
  10162. height: 100%;
  10163. }
  10164. .tabs-animated-wrap > .tabs {
  10165. display: flex;
  10166. height: 100%;
  10167. transition-duration: 300ms;
  10168. }
  10169. .tabs-animated-wrap > .tabs > .tab {
  10170. width: 100%;
  10171. display: block;
  10172. flex-shrink: 0;
  10173. }
  10174. .tabs-animated-wrap.not-animated > .tabs {
  10175. transition-duration: 0ms;
  10176. }
  10177. .tabs-swipeable-wrap {
  10178. height: 100%;
  10179. }
  10180. .tabs-swipeable-wrap > .tabs {
  10181. height: 100%;
  10182. }
  10183. .tabs-swipeable-wrap > .tabs > .tab {
  10184. display: block;
  10185. }
  10186. .page > .tabs {
  10187. height: 100%;
  10188. }
  10189. /* === Panels === */
  10190. :root {
  10191. --f7-panel-width: 260px;
  10192. /*
  10193. --f7-panel-left-width: var(--f7-panel-width);
  10194. --f7-panel-right-width: var(--f7-panel-width);
  10195. --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
  10196. --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
  10197. */
  10198. --f7-panel-bg-color: #fff;
  10199. }
  10200. .ios {
  10201. --f7-panel-collapsed-width: 58px;
  10202. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
  10203. --f7-panel-transition-duration: 400ms;
  10204. --f7-panel-shadow: transparent;
  10205. }
  10206. .md {
  10207. --f7-panel-collapsed-width: 60px;
  10208. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
  10209. --f7-panel-transition-duration: 300ms;
  10210. --f7-panel-shadow: rgba(0, 0, 0, 0.2) 0%,
  10211. rgba(0, 0, 0, 0.07) 30%,
  10212. rgba(0, 0, 0, 0.03) 40%,
  10213. rgba(0, 0, 0, 0) 60%,
  10214. rgba(0, 0, 0, 0) 100%;
  10215. }
  10216. .aurora {
  10217. --f7-panel-collapsed-width: 44px;
  10218. --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
  10219. --f7-panel-transition-duration: 400ms;
  10220. --f7-panel-shadow: transparent;
  10221. }
  10222. .panel-backdrop {
  10223. position: absolute;
  10224. left: 0;
  10225. top: var(--f7-appbar-app-offset, 0px);
  10226. width: 100%;
  10227. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  10228. opacity: 0;
  10229. z-index: 5999;
  10230. visibility: hidden;
  10231. pointer-events: none;
  10232. transform: translate3d(0, 0, 0);
  10233. background-color: var(--f7-panel-backdrop-bg-color);
  10234. transition-property: transform, opacity;
  10235. transition-duration: var(--f7-panel-transition-duration);
  10236. }
  10237. .panel-backdrop .with-panel,
  10238. .panel-backdrop .with-panel-closing {
  10239. visibility: visible;
  10240. }
  10241. .panel-backdrop.not-animated {
  10242. transition-duration: 0ms !important;
  10243. }
  10244. .panel {
  10245. z-index: 1000;
  10246. box-sizing: border-box;
  10247. position: absolute;
  10248. top: var(--f7-appbar-app-offset, 0px);
  10249. height: calc(100% - var(--f7-appbar-app-offset, 0px));
  10250. transform: translate3d(0, 0, 0);
  10251. width: var(--f7-panel-width);
  10252. background-color: var(--f7-panel-bg-color);
  10253. overflow: visible;
  10254. transition-property: transform;
  10255. transition-duration: var(--f7-panel-transition-duration);
  10256. }
  10257. .panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe) {
  10258. display: none;
  10259. }
  10260. .panel:after {
  10261. pointer-events: none;
  10262. opacity: 0;
  10263. z-index: 5999;
  10264. position: absolute;
  10265. content: '';
  10266. top: 0;
  10267. width: 20px;
  10268. height: 100%;
  10269. transition-property: transform, opacity;
  10270. transition-duration: var(--f7-panel-transition-duration);
  10271. }
  10272. .panel.not-animated,
  10273. .panel.not-animated:after {
  10274. transition-duration: 0ms !important;
  10275. }
  10276. .panel.panel-reveal.not-animated ~ .views,
  10277. .panel.panel-reveal.not-animated ~ .view {
  10278. transition-duration: 0ms !important;
  10279. }
  10280. .panel.panel-resizing {
  10281. -webkit-user-select: none;
  10282. -moz-user-select: none;
  10283. user-select: none;
  10284. }
  10285. .panel.panel-resizing,
  10286. .panel.panel-resizing:after,
  10287. .panel.panel-resizing ~ .views,
  10288. .panel.panel-resizing ~ .view {
  10289. transition-duration: 0ms !important;
  10290. }
  10291. .panel-cover {
  10292. z-index: 6000;
  10293. }
  10294. .panel-left {
  10295. left: 0;
  10296. width: var(--f7-panel-left-width, var(--f7-panel-width));
  10297. }
  10298. .panel-left.panel-cover {
  10299. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
  10300. }
  10301. .panel-left.panel-cover:after {
  10302. left: 100%;
  10303. background: linear-gradient(to right, var(--f7-panel-shadow));
  10304. }
  10305. html.with-panel-left-cover .panel-left.panel-cover:after {
  10306. opacity: 1;
  10307. }
  10308. .panel-left.panel-reveal:after {
  10309. right: 0;
  10310. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
  10311. background: linear-gradient(to left, var(--f7-panel-shadow));
  10312. }
  10313. html.with-panel-left-reveal .panel-left.panel-reveal:after {
  10314. opacity: 1;
  10315. transform: translate3d(0, 0, 0);
  10316. }
  10317. .panel-right {
  10318. right: 0;
  10319. width: var(--f7-panel-right-width, var(--f7-panel-width));
  10320. }
  10321. .panel-right.panel-cover {
  10322. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
  10323. }
  10324. .panel-right.panel-cover:after {
  10325. right: 100%;
  10326. background: linear-gradient(to left, var(--f7-panel-shadow));
  10327. }
  10328. html.with-panel-right-cover .panel-right.panel-cover:after {
  10329. opacity: 1;
  10330. }
  10331. .panel-right.panel-reveal:after {
  10332. left: 0;
  10333. background: linear-gradient(to right, var(--f7-panel-shadow));
  10334. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
  10335. }
  10336. html.with-panel-right-reveal .panel-right.panel-reveal:after {
  10337. opacity: 1;
  10338. transform: translate3d(0, 0, 0);
  10339. }
  10340. .panel-in-breakpoint {
  10341. transform: translate3d(0, 0, 0) !important;
  10342. transition-duration: 0ms;
  10343. }
  10344. .panel-in-breakpoint:after {
  10345. display: none;
  10346. }
  10347. .panel-in-breakpoint.panel-cover {
  10348. z-index: 5900;
  10349. }
  10350. html.with-panel-left-reveal .views,
  10351. html.with-panel-right-reveal .views,
  10352. html.with-panel-closing .views,
  10353. html.with-panel-left-reveal .framework7-root > .view,
  10354. html.with-panel-right-reveal .framework7-root > .view,
  10355. html.with-panel-closing .framework7-root > .view {
  10356. transition-duration: var(--f7-panel-transition-duration);
  10357. transition-property: transform;
  10358. }
  10359. html.with-panel-left-reveal .panel-backdrop-in,
  10360. html.with-panel-right-reveal .panel-backdrop-in,
  10361. html.with-panel-closing .panel-backdrop-in {
  10362. visibility: visible;
  10363. pointer-events: auto;
  10364. opacity: 0;
  10365. }
  10366. html.with-panel .framework7-root > .views .page-content,
  10367. html.with-panel .framework7-root > .view .page-content {
  10368. overflow: hidden;
  10369. -webkit-overflow-scrolling: auto;
  10370. }
  10371. html.with-panel-left-cover .panel-backdrop-in,
  10372. html.with-panel-right-cover .panel-backdrop-in {
  10373. visibility: visible;
  10374. pointer-events: auto;
  10375. opacity: 1;
  10376. }
  10377. html.with-panel-left-reveal .views,
  10378. html.with-panel-left-reveal .framework7-root > .view,
  10379. html.with-panel-left-reveal .panel-backdrop-in {
  10380. transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
  10381. }
  10382. html.with-panel-right-reveal .views,
  10383. html.with-panel-right-reveal .framework7-root > .view,
  10384. html.with-panel-right-reveal .panel-backdrop-in {
  10385. transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
  10386. }
  10387. html.with-panel-left-cover .panel-left {
  10388. transform: translate3d(0px, 0, 0);
  10389. }
  10390. html.with-panel-right-cover .panel-right {
  10391. transform: translate3d(0px, 0, 0);
  10392. }
  10393. .panel-resize-handler {
  10394. position: absolute;
  10395. top: 0;
  10396. height: 100%;
  10397. width: 6px;
  10398. cursor: col-resize;
  10399. z-index: 6000;
  10400. display: none;
  10401. }
  10402. .panel-resizable .panel-resize-handler {
  10403. display: block;
  10404. }
  10405. .panel-left.panel-cover .panel-resize-handler {
  10406. right: -3px;
  10407. }
  10408. .panel-left.panel-reveal .panel-resize-handler {
  10409. right: 0;
  10410. }
  10411. .panel-right.panel-cover .panel-resize-handler {
  10412. left: -3px;
  10413. }
  10414. .panel-right.panel-reveal .panel-resize-handler {
  10415. left: 0;
  10416. }
  10417. .panel-left.panel-in-collapsed ~ .views,
  10418. .panel-left.panel-in-collapsed ~ .view {
  10419. margin-left: var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width));
  10420. }
  10421. html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .views,
  10422. html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .view {
  10423. transform: translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))), 0, 0);
  10424. }
  10425. .panel-right.panel-in-collapsed ~ .views,
  10426. .panel-right.panel-in-collapsed ~ .view {
  10427. margin-right: var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width));
  10428. }
  10429. html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .views,
  10430. html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .view {
  10431. transform: translate3d(calc(var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
  10432. }
  10433. html.with-modal-popup-push .framework7-root,
  10434. html.with-modal-popup-push-closing .framework7-root {
  10435. --f7-panelPushScale: var(--f7-popup-push-scale);
  10436. --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
  10437. --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
  10438. }
  10439. html.with-modal-sheet-push .framework7-root,
  10440. html.with-modal-sheet-push-closing .framework7-root {
  10441. --f7-panelPushScale: var(--f7-sheet-push-scale);
  10442. --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
  10443. --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
  10444. }
  10445. html.with-modal-popup-push .framework7-root > .panel-in,
  10446. html.with-modal-sheet-push .framework7-root > .panel-in,
  10447. html.with-modal-popup-push .framework7-root > .panel-out,
  10448. html.with-modal-sheet-push .framework7-root > .panel-out {
  10449. transition-duration: var(--f7-panelPushTransitionDuration);
  10450. }
  10451. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left,
  10452. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left,
  10453. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left,
  10454. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left {
  10455. transform: scale(var(--f7-panelPushScale, 1));
  10456. transform-origin: 50vw center;
  10457. border-top-left-radius: var(--f7-panelPushBorderRadius);
  10458. }
  10459. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
  10460. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
  10461. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left .view,
  10462. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left .view {
  10463. border-top-left-radius: var(--f7-panelPushBorderRadius);
  10464. }
  10465. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right,
  10466. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right,
  10467. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right,
  10468. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right {
  10469. transform: scale(var(--f7-panelPushScale, 1));
  10470. transform-origin: calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center;
  10471. border-top-right-radius: var(--f7-panelPushBorderRadius);
  10472. }
  10473. html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
  10474. html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
  10475. html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right .view,
  10476. html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right .view {
  10477. border-top-right-radius: var(--f7-panelPushBorderRadius);
  10478. }
  10479. html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-left,
  10480. html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-left,
  10481. html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-left,
  10482. html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-left {
  10483. transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0px);
  10484. }
  10485. html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-right,
  10486. html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-right,
  10487. html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-right,
  10488. html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-right {
  10489. transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0px);
  10490. }
  10491. html.with-modal-popup-push-closing .framework7-root > .panel-in,
  10492. html.with-modal-sheet-push-closing .framework7-root > .panel-in {
  10493. transition-duration: var(--f7-panelPushTransitionDuration);
  10494. }
  10495. html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-left,
  10496. html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-left {
  10497. transform-origin: 50vw center;
  10498. }
  10499. html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-right,
  10500. html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-right {
  10501. transform-origin: calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center;
  10502. }
  10503. /* === Card === */
  10504. :root {
  10505. --f7-card-content-padding-horizontal: 16px;
  10506. --f7-card-content-padding-vertical: 16px;
  10507. --f7-card-border-radius: 4px;
  10508. --f7-card-font-size: inherit;
  10509. --f7-card-header-text-color: inherit;
  10510. --f7-card-header-font-weight: 400;
  10511. --f7-card-header-padding-horizontal: 16px;
  10512. --f7-card-footer-font-weight: 400;
  10513. --f7-card-footer-font-size: inherit;
  10514. --f7-card-footer-padding-horizontal: 16px;
  10515. --f7-card-expandable-font-size: 16px;
  10516. --f7-card-expandable-tablet-width: 670px;
  10517. --f7-card-expandable-tablet-height: 670px;
  10518. --f7-card-bg-color: #fff;
  10519. --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
  10520. --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
  10521. --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
  10522. --f7-card-expandable-bg-color: #fff;
  10523. }
  10524. :root .theme-dark,
  10525. :root.theme-dark {
  10526. --f7-card-bg-color: #1c1c1d;
  10527. --f7-card-expandable-bg-color: #1c1c1d;
  10528. --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
  10529. --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
  10530. --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
  10531. --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
  10532. }
  10533. .ios {
  10534. --f7-card-margin-horizontal: 10px;
  10535. --f7-card-margin-vertical: 10px;
  10536. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  10537. --f7-card-header-font-size: 17px;
  10538. --f7-card-header-padding-vertical: 10px;
  10539. --f7-card-header-min-height: 44px;
  10540. --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
  10541. --f7-card-footer-padding-vertical: 10px;
  10542. --f7-card-footer-min-height: 44px;
  10543. --f7-card-expandable-margin-horizontal: 20px;
  10544. --f7-card-expandable-margin-vertical: 30px;
  10545. --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
  10546. --f7-card-expandable-border-radius: 15px;
  10547. --f7-card-expandable-tablet-border-radius: 5px;
  10548. --f7-card-expandable-header-font-size: 27px;
  10549. --f7-card-expandable-header-font-weight: bold;
  10550. }
  10551. .md {
  10552. --f7-card-margin-horizontal: 8px;
  10553. --f7-card-margin-vertical: 8px;
  10554. --f7-card-box-shadow: var(--f7-elevation-1);
  10555. --f7-card-header-font-size: 16px;
  10556. --f7-card-header-padding-vertical: 4px;
  10557. --f7-card-header-min-height: 48px;
  10558. --f7-card-footer-text-color: rgba(0, 0, 0, 0.54);
  10559. --f7-card-footer-padding-vertical: 4px;
  10560. --f7-card-footer-min-height: 48px;
  10561. --f7-card-expandable-margin-horizontal: 12px;
  10562. --f7-card-expandable-margin-vertical: 24px;
  10563. --f7-card-expandable-box-shadow: var(--f7-elevation-10);
  10564. --f7-card-expandable-border-radius: 8px;
  10565. --f7-card-expandable-tablet-border-radius: 4px;
  10566. --f7-card-expandable-header-font-size: 24px;
  10567. --f7-card-expandable-header-font-weight: 500;
  10568. }
  10569. .aurora {
  10570. --f7-card-margin-horizontal: 10px;
  10571. --f7-card-margin-vertical: 10px;
  10572. --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  10573. --f7-card-header-font-size: 14px;
  10574. --f7-card-header-font-weight: bold;
  10575. --f7-card-header-padding-vertical: 10px;
  10576. --f7-card-header-min-height: 38px;
  10577. --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
  10578. --f7-card-footer-padding-vertical: 10px;
  10579. --f7-card-footer-min-height: 38px;
  10580. --f7-card-expandable-margin-horizontal: 10px;
  10581. --f7-card-expandable-margin-vertical: 20px;
  10582. --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  10583. --f7-card-expandable-border-radius: 15px;
  10584. --f7-card-expandable-tablet-border-radius: 5px;
  10585. --f7-card-expandable-header-font-size: 27px;
  10586. --f7-card-expandable-header-font-weight: bold;
  10587. }
  10588. .cards-list > ul:before,
  10589. .card .list > ul:before,
  10590. .cards-list > ul:after,
  10591. .card .list > ul:after {
  10592. display: none !important;
  10593. }
  10594. .cards-list ul,
  10595. .card .list ul {
  10596. background: none;
  10597. }
  10598. .card {
  10599. background: var(--f7-card-bg-color);
  10600. position: relative;
  10601. border-radius: var(--f7-card-border-radius);
  10602. font-size: var(--f7-card-font-size);
  10603. margin-top: var(--f7-card-margin-vertical);
  10604. margin-bottom: var(--f7-card-margin-vertical);
  10605. margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
  10606. margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
  10607. box-shadow: var(--f7-card-box-shadow);
  10608. }
  10609. .card .list,
  10610. .card .block {
  10611. margin: 0;
  10612. }
  10613. .row:not(.no-gap) .col > .card {
  10614. margin-left: 0;
  10615. margin-right: 0;
  10616. }
  10617. .card.no-shadow {
  10618. box-shadow: none;
  10619. }
  10620. .card-outline,
  10621. .ios .card-outline-ios,
  10622. .md .card-outline-md,
  10623. .aurora .card-outline-aurora {
  10624. box-shadow: none;
  10625. border: 1px solid var(--f7-card-outline-border-color);
  10626. }
  10627. .card-outline.no-border,
  10628. .ios .card-outline-ios.no-border,
  10629. .md .card-outline-md.no-border,
  10630. .aurora .card-outline-aurora.no-border,
  10631. .card-outline.no-hairlines,
  10632. .ios .card-outline-ios.no-hairlines,
  10633. .md .card-outline-md.no-hairlines,
  10634. .aurora .card-outline-aurora.no-hairlines {
  10635. border: none;
  10636. }
  10637. .card-content {
  10638. position: relative;
  10639. }
  10640. .card-content-padding {
  10641. position: relative;
  10642. padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
  10643. }
  10644. .card-content-padding > .list,
  10645. .card-content-padding > .block {
  10646. margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
  10647. }
  10648. .card-content-padding > p:first-child {
  10649. margin-top: 0;
  10650. }
  10651. .card-content-padding > p:last-child {
  10652. margin-bottom: 0;
  10653. }
  10654. .card-header {
  10655. min-height: var(--f7-card-header-min-height);
  10656. color: var(--f7-card-header-text-color);
  10657. font-size: var(--f7-card-header-font-size);
  10658. font-weight: var(--f7-card-header-font-weight);
  10659. padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
  10660. }
  10661. .card-footer {
  10662. min-height: var(--f7-card-footer-min-height);
  10663. color: var(--f7-card-footer-text-color);
  10664. font-size: var(--f7-card-footer-font-size);
  10665. font-weight: var(--f7-card-footer-font-weight);
  10666. padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
  10667. }
  10668. .card-footer a.link {
  10669. overflow: hidden;
  10670. }
  10671. .card-header,
  10672. .card-footer {
  10673. position: relative;
  10674. box-sizing: border-box;
  10675. display: flex;
  10676. justify-content: space-between;
  10677. align-items: center;
  10678. }
  10679. .card-header[valign="top"],
  10680. .card-footer[valign="top"] {
  10681. align-items: flex-start;
  10682. }
  10683. .card-header[valign="bottom"],
  10684. .card-footer[valign="bottom"] {
  10685. align-items: flex-end;
  10686. }
  10687. .card-header a.link,
  10688. .card-footer a.link {
  10689. position: relative;
  10690. }
  10691. .card-header a.link i.icon,
  10692. .card-footer a.link i.icon {
  10693. display: block;
  10694. }
  10695. .card-header a.icon-only,
  10696. .card-footer a.icon-only {
  10697. display: flex;
  10698. justify-content: center;
  10699. align-items: center;
  10700. margin: 0;
  10701. }
  10702. .card-header {
  10703. border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
  10704. }
  10705. .card-header:after {
  10706. content: '';
  10707. position: absolute;
  10708. background-color: var(--f7-card-header-border-color);
  10709. display: block;
  10710. z-index: 15;
  10711. top: auto;
  10712. right: auto;
  10713. bottom: 0;
  10714. left: 0;
  10715. height: 1px;
  10716. width: 100%;
  10717. transform-origin: 50% 100%;
  10718. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10719. }
  10720. .card-header.no-hairline:after {
  10721. display: none !important;
  10722. }
  10723. .card-footer {
  10724. border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
  10725. }
  10726. .card-footer:before {
  10727. content: '';
  10728. position: absolute;
  10729. background-color: var(--f7-card-footer-border-color);
  10730. display: block;
  10731. z-index: 15;
  10732. top: 0;
  10733. right: auto;
  10734. bottom: auto;
  10735. left: 0;
  10736. height: 1px;
  10737. width: 100%;
  10738. transform-origin: 50% 0%;
  10739. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  10740. }
  10741. .card-footer.no-hairline:before {
  10742. display: none !important;
  10743. }
  10744. .card-expandable {
  10745. overflow: hidden;
  10746. height: 300px;
  10747. background: var(--f7-card-expandable-bg-color);
  10748. position: relative;
  10749. transform-origin: center center;
  10750. transition-property: transform, border-radius;
  10751. border-radius: var(--f7-card-expandable-border-radius);
  10752. z-index: 2;
  10753. transition-duration: 200ms;
  10754. margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
  10755. margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
  10756. margin-top: var(--f7-card-expandable-margin-vertical);
  10757. margin-bottom: var(--f7-card-expandable-margin-vertical);
  10758. box-shadow: var(--f7-card-expandable-box-shadow);
  10759. font-size: var(--f7-card-expandable-font-size);
  10760. }
  10761. .card-expandable:not(.card-opened) {
  10762. -webkit-user-select: none;
  10763. -moz-user-select: none;
  10764. user-select: none;
  10765. }
  10766. .card-expandable.card-no-transition {
  10767. transition-duration: 0ms;
  10768. }
  10769. .card-expandable.card-expandable-animate-width .card-content {
  10770. transition-property: width, transform;
  10771. width: 100%;
  10772. }
  10773. .card-expandable.active-state {
  10774. transform: scale(0.97) translate3d(0, 0, 0);
  10775. }
  10776. .card-expandable .card-opened-fade-in,
  10777. .card-expandable .card-opened-fade-out {
  10778. transition-duration: 400ms;
  10779. }
  10780. .card-expandable .card-opened-fade-in {
  10781. opacity: 0;
  10782. pointer-events: none;
  10783. }
  10784. .card-expandable .card-content {
  10785. position: absolute;
  10786. top: 0;
  10787. width: 100vw;
  10788. height: 100vh;
  10789. transform-origin: center top;
  10790. overflow: hidden;
  10791. transition-property: transform;
  10792. box-sizing: border-box;
  10793. pointer-events: none;
  10794. left: 0;
  10795. }
  10796. .card-expandable .card-content .card-content-padding {
  10797. padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
  10798. padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
  10799. }
  10800. .card-expandable.card-opened {
  10801. transition-duration: 0ms;
  10802. }
  10803. .card-expandable.card-opening,
  10804. .card-expandable.card-closing,
  10805. .card-expandable.card-transitioning {
  10806. transition-duration: 400ms;
  10807. }
  10808. .card-expandable.card-opening .card-content {
  10809. transition-duration: 300ms;
  10810. }
  10811. .card-expandable.card-closing .card-content {
  10812. transition-duration: 500ms;
  10813. }
  10814. .card-expandable.card-opening,
  10815. .card-expandable.card-opened,
  10816. .card-expandable.card-closing {
  10817. z-index: 300;
  10818. }
  10819. .card-expandable.card-opening,
  10820. .card-expandable.card-opened {
  10821. border-radius: 0;
  10822. }
  10823. .card-expandable.card-opening .card-opened-fade-in,
  10824. .card-expandable.card-opened .card-opened-fade-in {
  10825. opacity: 1;
  10826. pointer-events: auto;
  10827. }
  10828. .card-expandable.card-opening .card-opened-fade-out,
  10829. .card-expandable.card-opened .card-opened-fade-out {
  10830. opacity: 0;
  10831. pointer-events: none;
  10832. }
  10833. .card-expandable.card-opened .card-content {
  10834. overflow: auto;
  10835. -webkit-overflow-scrolling: touch;
  10836. pointer-events: auto;
  10837. }
  10838. .card-expandable .card-header {
  10839. font-size: var(--f7-card-expandable-header-font-size);
  10840. font-weight: var(--f7-card-expandable-header-font-weight);
  10841. }
  10842. .card-expandable .card-header:after {
  10843. display: none !important;
  10844. }
  10845. .card-prevent-open {
  10846. pointer-events: auto;
  10847. }
  10848. .card-expandable-size {
  10849. width: 0;
  10850. height: 0;
  10851. position: absolute;
  10852. left: 0;
  10853. top: 0;
  10854. opacity: 0;
  10855. pointer-events: none;
  10856. visibility: hidden;
  10857. }
  10858. @media (min-width: 768px) and (min-height: 670px) {
  10859. .card-expandable:not(.card-tablet-fullscreen) {
  10860. max-width: var(--f7-card-expandable-tablet-width);
  10861. }
  10862. .card-expandable:not(.card-tablet-fullscreen).card-opened,
  10863. .card-expandable:not(.card-tablet-fullscreen).card-opening {
  10864. border-radius: var(--f7-card-expandable-tablet-border-radius);
  10865. }
  10866. .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
  10867. width: var(--f7-card-expandable-tablet-width);
  10868. }
  10869. .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
  10870. width: var(--f7-card-expandable-tablet-width);
  10871. height: var(--f7-card-expandable-tablet-height);
  10872. }
  10873. }
  10874. .page.page-with-card-opened .page-content {
  10875. overflow: hidden;
  10876. }
  10877. .card-backdrop {
  10878. position: fixed;
  10879. left: 0;
  10880. top: 0;
  10881. width: 100%;
  10882. height: 100%;
  10883. z-index: 299;
  10884. pointer-events: none;
  10885. background: rgba(0, 0, 0, 0.2);
  10886. opacity: 0;
  10887. }
  10888. .card-backdrop-in {
  10889. animation: card-backdrop-fade-in 400ms forwards;
  10890. pointer-events: auto;
  10891. }
  10892. .card-backdrop-out {
  10893. animation: card-backdrop-fade-out 400ms forwards;
  10894. }
  10895. @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
  10896. .card-backdrop {
  10897. background: transparent;
  10898. -webkit-backdrop-filter: blur(15px);
  10899. backdrop-filter: blur(15px);
  10900. }
  10901. }
  10902. @keyframes card-backdrop-fade-in {
  10903. from {
  10904. opacity: 0;
  10905. }
  10906. to {
  10907. opacity: 1;
  10908. }
  10909. }
  10910. @keyframes card-backdrop-fade-out {
  10911. from {
  10912. opacity: 1;
  10913. }
  10914. to {
  10915. opacity: 0;
  10916. }
  10917. }
  10918. /* === Chips === */
  10919. :root {
  10920. --f7-chip-font-size: 13px;
  10921. --f7-chip-font-weight: normal;
  10922. --f7-chip-media-font-size: 16px;
  10923. --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
  10924. --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
  10925. --f7-chip-delete-button-color: #000;
  10926. }
  10927. :root .theme-dark,
  10928. :root.theme-dark {
  10929. --f7-chip-delete-button-color: #fff;
  10930. --f7-chip-bg-color: #333;
  10931. --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
  10932. }
  10933. .ios {
  10934. --f7-chip-height: 24px;
  10935. --f7-chip-padding-horizontal: 10px;
  10936. --f7-chip-text-color: #000;
  10937. }
  10938. .ios .theme-dark,
  10939. .ios.theme-dark {
  10940. --f7-chip-text-color: #fff;
  10941. }
  10942. .md {
  10943. --f7-chip-height: 32px;
  10944. --f7-chip-padding-horizontal: 12px;
  10945. --f7-chip-text-color: rgba(0, 0, 0, 0.87);
  10946. }
  10947. .md .theme-dark,
  10948. .md.theme-dark {
  10949. --f7-chip-text-color: rgba(255, 255, 255, 0.87);
  10950. }
  10951. .aurora {
  10952. --f7-chip-height: 20px;
  10953. --f7-chip-padding-horizontal: 10px;
  10954. --f7-chip-font-size: 12px;
  10955. --f7-chip-media-font-size: 14px;
  10956. --f7-chip-text-color: #000;
  10957. }
  10958. .aurora .theme-dark,
  10959. .aurora.theme-dark {
  10960. --f7-chip-text-color: #fff;
  10961. }
  10962. .chip {
  10963. padding-left: var(--f7-chip-padding-horizontal);
  10964. padding-right: var(--f7-chip-padding-horizontal);
  10965. font-weight: var(--f7-chip-font-weight);
  10966. display: inline-flex;
  10967. box-sizing: border-box;
  10968. vertical-align: middle;
  10969. align-items: center;
  10970. margin: 2px 0;
  10971. background-color: var(--f7-chip-bg-color);
  10972. font-size: var(--f7-chip-font-size);
  10973. color: var(--f7-chip-text-color);
  10974. height: var(--f7-chip-height);
  10975. line-height: var(--f7-chip-height);
  10976. border-radius: var(--f7-chip-height);
  10977. position: relative;
  10978. }
  10979. .chip-media {
  10980. border-radius: 50%;
  10981. flex-shrink: 0;
  10982. display: flex;
  10983. align-items: center;
  10984. justify-content: center;
  10985. height: var(--f7-chip-height);
  10986. width: var(--f7-chip-height);
  10987. border-radius: var(--f7-chip-height);
  10988. text-align: center;
  10989. line-height: var(--f7-chip-height);
  10990. box-sizing: border-box;
  10991. color: #fff;
  10992. font-size: var(--f7-chip-media-font-size);
  10993. vertical-align: middle;
  10994. margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
  10995. }
  10996. .chip-media i.icon {
  10997. font-size: calc(var(--f7-chip-height) - 8px);
  10998. height: calc(var(--f7-chip-height) - 8px);
  10999. }
  11000. .chip-media img {
  11001. max-width: 100%;
  11002. max-height: 100%;
  11003. width: auto;
  11004. height: auto;
  11005. border-radius: 50%;
  11006. display: block;
  11007. }
  11008. .chip-media + .chip-label {
  11009. margin-left: 4px;
  11010. }
  11011. .chip-label {
  11012. white-space: nowrap;
  11013. overflow: hidden;
  11014. text-overflow: ellipsis;
  11015. position: relative;
  11016. flex-shrink: 1;
  11017. min-width: 0;
  11018. }
  11019. .chip-delete {
  11020. text-align: center;
  11021. cursor: pointer;
  11022. flex-shrink: 0;
  11023. background-repeat: no-repeat;
  11024. width: 24px;
  11025. height: 24px;
  11026. color: var(--f7-chip-delete-button-color);
  11027. opacity: 0.54;
  11028. position: relative;
  11029. }
  11030. .chip-delete:after {
  11031. font-family: 'framework7-core-icons';
  11032. font-weight: normal;
  11033. font-style: normal;
  11034. line-height: 1;
  11035. letter-spacing: normal;
  11036. text-transform: none;
  11037. white-space: nowrap;
  11038. word-wrap: normal;
  11039. direction: ltr;
  11040. -webkit-font-smoothing: antialiased;
  11041. text-rendering: optimizeLegibility;
  11042. -moz-osx-font-smoothing: grayscale;
  11043. font-feature-settings: "liga";
  11044. text-align: center;
  11045. display: block;
  11046. width: 100%;
  11047. height: 100%;
  11048. font-size: 20px;
  11049. content: 'delete_round_ios';
  11050. line-height: 24px;
  11051. }
  11052. .chip .chip-delete.active-state {
  11053. opacity: 1;
  11054. }
  11055. .chip-outline,
  11056. .ios .chip-outline-ios,
  11057. .md .chip-outline-md,
  11058. .aurora .chip-outline-aurora {
  11059. border: 1px solid var(--f7-chip-outline-border-color);
  11060. background: none;
  11061. }
  11062. .chip[class*="color-"] {
  11063. --f7-chip-bg-color: var(--f7-theme-color);
  11064. --f7-chip-text-color: #fff;
  11065. }
  11066. .chip-outline[class*="color-"],
  11067. .ios .chip-outline-ios[class*="color-"],
  11068. .md .chip-outline-md[class*="color-"],
  11069. .aurora .chip-outline-aurora[class*="color-"] {
  11070. --f7-chip-outline-border-color: var(--f7-theme-color);
  11071. --f7-chip-text-color: var(--f7-theme-color);
  11072. }
  11073. .ios .chip-delete {
  11074. margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
  11075. }
  11076. .ios .chip-delete:after {
  11077. font-size: 10px;
  11078. }
  11079. .md .chip-label + .chip-delete {
  11080. margin-left: 4px;
  11081. }
  11082. .md .chip-delete {
  11083. margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
  11084. }
  11085. .md .chip-delete:after {
  11086. font-size: 12px;
  11087. }
  11088. .aurora .chip-delete {
  11089. margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
  11090. }
  11091. .aurora .chip-delete:after {
  11092. font-size: 10px;
  11093. }
  11094. /* === Form === */
  11095. /* === Input === */
  11096. :root {
  11097. --f7-input-bg-color: transparent;
  11098. --f7-label-font-weight: 400;
  11099. --f7-label-line-height: 1.3;
  11100. --f7-input-padding-left: 0px;
  11101. --f7-input-padding-right: 0px;
  11102. --f7-input-error-text-color: #ff3b30;
  11103. --f7-input-error-font-size: 12px;
  11104. --f7-input-error-line-height: 1.4;
  11105. --f7-input-error-font-weight: 400;
  11106. --f7-input-info-font-size: 12px;
  11107. --f7-input-info-line-height: 1.4;
  11108. --f7-input-outline-height: 40px;
  11109. --f7-input-outline-border-radius: 4px;
  11110. --f7-input-outline-padding-horizontal: 12px;
  11111. --f7-textarea-height: 100px;
  11112. /*
  11113. --f7-input-outline-focused-border-color: var(--f7-theme-color);
  11114. --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
  11115. */
  11116. --f7-input-outline-border-color: #999;
  11117. }
  11118. :root .theme-dark,
  11119. :root.theme-dark {
  11120. --f7-input-outline-border-color: #444;
  11121. }
  11122. .ios {
  11123. --f7-input-height: 44px;
  11124. --f7-input-font-size: 17px;
  11125. --f7-input-placeholder-color: #a9a9a9;
  11126. --f7-textarea-padding-vertical: 11px;
  11127. /*
  11128. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  11129. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  11130. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  11131. */
  11132. --f7-label-font-size: 12px;
  11133. --f7-label-text-color: inherit;
  11134. /*
  11135. --f7-label-focused-text-color: var(--f7-label-text-color);
  11136. --f7-label-invalid-text-color: var(--f7-label-text-color);
  11137. */
  11138. --f7-floating-label-scale: calc(17 / 12);
  11139. --f7-inline-label-font-size: 17px;
  11140. --f7-inline-label-line-height: 1.4;
  11141. --f7-inline-label-padding-top: 3px;
  11142. --f7-input-clear-button-size: 14px;
  11143. --f7-input-text-color: #000000;
  11144. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  11145. --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
  11146. }
  11147. .ios .theme-dark,
  11148. .ios.theme-dark {
  11149. --f7-input-text-color: #fff;
  11150. --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
  11151. --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
  11152. }
  11153. .md {
  11154. --f7-input-height: 36px;
  11155. --f7-input-font-size: 16px;
  11156. --f7-textarea-padding-vertical: 7px;
  11157. /*
  11158. --f7-input-focused-border-color: var(--f7-theme-color);
  11159. --f7-input-invalid-border-color: var(--f7-input-error-text-color);
  11160. --f7-input-invalid-text-color: var(--f7-input-text-color);
  11161. */
  11162. --f7-label-font-size: 12px;
  11163. /*
  11164. --f7-label-focused-text-color: var(--f7-theme-color);
  11165. --f7-label-invalid-text-color: var(--f7-input-error-text-color );
  11166. */
  11167. --f7-floating-label-scale: calc(16 / 12);
  11168. --f7-inline-label-font-size: 16px;
  11169. --f7-inline-label-line-height: 1.5;
  11170. --f7-inline-label-padding-top: 7px;
  11171. --f7-input-clear-button-size: 18px;
  11172. --f7-input-clear-button-color: #aaa;
  11173. --f7-input-text-color: #212121;
  11174. --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
  11175. --f7-label-text-color: rgba(0, 0, 0, 0.65);
  11176. --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
  11177. }
  11178. .md .theme-dark,
  11179. .md.theme-dark {
  11180. --f7-input-text-color: rgba(255, 255, 255, 0.87);
  11181. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  11182. --f7-label-text-color: rgba(255, 255, 255, 0.54);
  11183. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  11184. }
  11185. .aurora {
  11186. --f7-input-height: 24px;
  11187. --f7-input-font-size: 13px;
  11188. --f7-textarea-padding-vertical: 2px;
  11189. /*
  11190. --f7-input-focused-border-color: var(--f7-list-item-border-color);
  11191. --f7-input-invalid-border-color: var(--f7-list-item-border-color);
  11192. --f7-input-invalid-text-color: var(--f7-input-error-text-color);
  11193. */
  11194. --f7-label-font-size: 11px;
  11195. --f7-label-text-color: inherit;
  11196. /*
  11197. --f7-label-focused-text-color: var(--f7-label-text-color);
  11198. --f7-label-invalid-text-color: var(--f7-label-text-color);
  11199. */
  11200. --f7-floating-label-scale: calc(13 / 11);
  11201. --f7-inline-label-font-size: 14px;
  11202. --f7-inline-label-line-height: 1.4;
  11203. --f7-inline-label-padding-top: 1px;
  11204. --f7-input-clear-button-size: 14px;
  11205. --f7-input-outline-height: 32px;
  11206. --f7-input-outline-padding-horizontal: 8px;
  11207. --f7-input-text-color: #000000;
  11208. --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
  11209. --f7-input-clear-button-color: #666;
  11210. --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
  11211. }
  11212. .aurora .theme-dark,
  11213. .aurora.theme-dark {
  11214. --f7-input-text-color: #fff;
  11215. --f7-input-clear-button-color: #aaa;
  11216. --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
  11217. --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
  11218. }
  11219. input[type="text"],
  11220. input[type="password"],
  11221. input[type="search"],
  11222. input[type="email"],
  11223. input[type="tel"],
  11224. input[type="url"],
  11225. input[type="date"],
  11226. input[type='month'],
  11227. input[type="datetime-local"],
  11228. input[type="time"],
  11229. input[type="number"],
  11230. select,
  11231. textarea {
  11232. box-sizing: border-box;
  11233. -webkit-appearance: none;
  11234. -moz-appearance: none;
  11235. appearance: none;
  11236. border: none;
  11237. box-shadow: none;
  11238. border-radius: 0;
  11239. outline: 0;
  11240. display: block;
  11241. padding: 0;
  11242. margin: 0;
  11243. font-family: inherit;
  11244. background: none;
  11245. resize: none;
  11246. font-size: inherit;
  11247. color: inherit;
  11248. }
  11249. .textarea-resizable-shadow {
  11250. opacity: 0;
  11251. position: absolute;
  11252. z-index: -1000;
  11253. pointer-events: none;
  11254. left: -1000px;
  11255. top: -1000px;
  11256. visibility: hidden;
  11257. }
  11258. .list input[type="text"],
  11259. .list input[type="password"],
  11260. .list input[type="search"],
  11261. .list input[type="email"],
  11262. .list input[type="tel"],
  11263. .list input[type="url"],
  11264. .list input[type="date"],
  11265. .list input[type='month'],
  11266. .list input[type="datetime-local"],
  11267. .list input[type="time"],
  11268. .list input[type="number"],
  11269. .list select {
  11270. width: 100%;
  11271. height: var(--f7-input-height);
  11272. color: var(--f7-input-text-color);
  11273. font-size: var(--f7-input-font-size);
  11274. background-color: var(--f7-input-bg-color, transparent);
  11275. padding-left: var(--f7-input-padding-left);
  11276. padding-right: var(--f7-input-padding-right);
  11277. }
  11278. .list input[type="text"]::-webkit-input-placeholder, .list input[type="password"]::-webkit-input-placeholder, .list input[type="search"]::-webkit-input-placeholder, .list input[type="email"]::-webkit-input-placeholder, .list input[type="tel"]::-webkit-input-placeholder, .list input[type="url"]::-webkit-input-placeholder, .list input[type="date"]::-webkit-input-placeholder, .list input[type='month']::-webkit-input-placeholder, .list input[type="datetime-local"]::-webkit-input-placeholder, .list input[type="time"]::-webkit-input-placeholder, .list input[type="number"]::-webkit-input-placeholder, .list select::-webkit-input-placeholder {
  11279. color: var(--f7-input-placeholder-color);
  11280. }
  11281. .list input[type="text"]::placeholder,
  11282. .list input[type="password"]::placeholder,
  11283. .list input[type="search"]::placeholder,
  11284. .list input[type="email"]::placeholder,
  11285. .list input[type="tel"]::placeholder,
  11286. .list input[type="url"]::placeholder,
  11287. .list input[type="date"]::placeholder,
  11288. .list input[type='month']::placeholder,
  11289. .list input[type="datetime-local"]::placeholder,
  11290. .list input[type="time"]::placeholder,
  11291. .list input[type="number"]::placeholder,
  11292. .list select::placeholder {
  11293. color: var(--f7-input-placeholder-color);
  11294. }
  11295. .list textarea {
  11296. width: 100%;
  11297. color: var(--f7-input-text-color);
  11298. font-size: var(--f7-input-font-size);
  11299. resize: none;
  11300. line-height: 1.4;
  11301. height: var(--f7-textarea-height);
  11302. background-color: var(--f7-input-bg-color, transparent);
  11303. padding-top: var(--f7-textarea-padding-vertical);
  11304. padding-bottom: var(--f7-textarea-padding-vertical);
  11305. padding-left: var(--f7-input-padding-left);
  11306. padding-right: var(--f7-input-padding-right);
  11307. }
  11308. .list textarea::-webkit-input-placeholder {
  11309. color: var(--f7-input-placeholder-color);
  11310. }
  11311. .list textarea::placeholder {
  11312. color: var(--f7-input-placeholder-color);
  11313. }
  11314. .list textarea.resizable {
  11315. height: var(--f7-input-height);
  11316. }
  11317. .list input[type="datetime-local"] {
  11318. max-width: 50vw;
  11319. }
  11320. .list input[type="time"],
  11321. .list input[type="date"],
  11322. .list input[type='month'],
  11323. .list input[type="datetime-local"] {
  11324. line-height: var(--f7-input-height);
  11325. }
  11326. .list .item-label,
  11327. .list .item-floating-label {
  11328. width: 100%;
  11329. vertical-align: top;
  11330. flex-shrink: 0;
  11331. font-size: var(--f7-label-font-size);
  11332. font-weight: var(--f7-label-font-weight);
  11333. line-height: var(--f7-label-line-height);
  11334. color: var(--f7-label-text-color);
  11335. transition-duration: 200ms;
  11336. transition-property: transform, color;
  11337. }
  11338. .list .item-floating-label {
  11339. --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
  11340. transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
  11341. color: var(--f7-input-placeholder-color);
  11342. width: auto;
  11343. max-width: calc(100% / var(--f7-floating-label-scale));
  11344. pointer-events: none;
  11345. left: var(--f7-input-padding-left);
  11346. transform-origin: left center;
  11347. }
  11348. .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
  11349. opacity: 0;
  11350. transition-duration: 100ms;
  11351. }
  11352. .list .item-floating-label ~ .item-input-wrap input::placeholder,
  11353. .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
  11354. opacity: 0;
  11355. transition-duration: 100ms;
  11356. }
  11357. .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
  11358. opacity: 1;
  11359. transition-duration: 300ms;
  11360. }
  11361. .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
  11362. .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
  11363. opacity: 1;
  11364. transition-duration: 300ms;
  11365. }
  11366. .list .item-input-with-value .item-floating-label {
  11367. color: var(--f7-label-text-color);
  11368. }
  11369. .list .item-input-with-value .item-floating-label,
  11370. .list .item-input-focused .item-floating-label {
  11371. transform: scale(1) translateY(0);
  11372. }
  11373. .list .item-input-wrap {
  11374. width: 100%;
  11375. flex-shrink: 1;
  11376. position: relative;
  11377. }
  11378. .item-input .item-inner {
  11379. display: flex;
  11380. flex-direction: column;
  11381. align-items: flex-start;
  11382. }
  11383. .item-input-error-message,
  11384. .input-error-message {
  11385. font-size: var(--f7-input-error-font-size);
  11386. line-height: var(--f7-input-error-line-height);
  11387. color: var(--f7-input-error-text-color);
  11388. font-weight: var(--f7-input-error-font-weight);
  11389. display: none;
  11390. box-sizing: border-box;
  11391. }
  11392. .item-input-info,
  11393. .input-info {
  11394. font-size: var(--f7-input-info-font-size);
  11395. line-height: var(--f7-input-info-line-height);
  11396. color: var(--f7-input-info-text-color);
  11397. }
  11398. .item-input-invalid .item-input-error-message,
  11399. .input-invalid .item-input-error-message,
  11400. .item-input-invalid .input-error-message,
  11401. .input-invalid .input-error-message {
  11402. display: block;
  11403. }
  11404. .item-input-invalid .item-input-info,
  11405. .input-invalid .item-input-info,
  11406. .item-input-invalid .input-info,
  11407. .input-invalid .input-info {
  11408. display: none;
  11409. }
  11410. .inline-labels .item-inner,
  11411. .inline-label .item-inner {
  11412. display: flex;
  11413. align-items: center;
  11414. flex-direction: row;
  11415. }
  11416. .inline-labels .item-label,
  11417. .inline-label .item-label,
  11418. .inline-labels .item-floating-label,
  11419. .inline-label .item-floating-label {
  11420. padding-top: var(--f7-inline-label-padding-top);
  11421. align-self: flex-start;
  11422. width: 35%;
  11423. font-size: var(--f7-inline-label-font-size);
  11424. line-height: var(--f7-inline-label-line-height);
  11425. }
  11426. .inline-labels .item-label + .item-input-wrap,
  11427. .inline-label .item-label + .item-input-wrap,
  11428. .inline-labels .item-floating-label + .item-input-wrap,
  11429. .inline-label .item-floating-label + .item-input-wrap {
  11430. margin-left: 8px;
  11431. }
  11432. .input {
  11433. position: relative;
  11434. }
  11435. .input input,
  11436. .input select,
  11437. .input textarea {
  11438. width: 100%;
  11439. }
  11440. .input-clear-button {
  11441. opacity: 0;
  11442. pointer-events: none;
  11443. visibility: hidden;
  11444. transition-duration: 100ms;
  11445. position: absolute;
  11446. top: 50%;
  11447. border: none;
  11448. padding: 0;
  11449. margin: 0;
  11450. outline: 0;
  11451. z-index: 1;
  11452. cursor: pointer;
  11453. background: none;
  11454. width: var(--f7-input-clear-button-size);
  11455. height: var(--f7-input-clear-button-size);
  11456. margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
  11457. color: var(--f7-input-clear-button-color);
  11458. right: 0;
  11459. }
  11460. .input-clear-button:after {
  11461. font-family: 'framework7-core-icons';
  11462. font-weight: normal;
  11463. font-style: normal;
  11464. line-height: 1;
  11465. letter-spacing: normal;
  11466. text-transform: none;
  11467. white-space: nowrap;
  11468. word-wrap: normal;
  11469. direction: ltr;
  11470. -webkit-font-smoothing: antialiased;
  11471. text-rendering: optimizeLegibility;
  11472. -moz-osx-font-smoothing: grayscale;
  11473. font-feature-settings: "liga";
  11474. text-align: center;
  11475. display: block;
  11476. width: 100%;
  11477. height: 100%;
  11478. font-size: 20px;
  11479. }
  11480. .input-clear-button:before {
  11481. position: absolute;
  11482. content: '';
  11483. left: 50%;
  11484. top: 50%;
  11485. }
  11486. .item-input-wrap .input-clear-button {
  11487. top: calc(var(--f7-input-height) / 2);
  11488. }
  11489. .input-clear-button.active-state {
  11490. opacity: 0.75 !important;
  11491. }
  11492. .input-with-value ~ .input-clear-button,
  11493. .item-input-with-value .input-clear-button,
  11494. .input-with-value .input-clear-button {
  11495. opacity: 1;
  11496. pointer-events: auto;
  11497. visibility: visible;
  11498. }
  11499. .input-dropdown-wrap,
  11500. .input-dropdown {
  11501. position: relative;
  11502. }
  11503. .input-dropdown-wrap:before,
  11504. .input-dropdown:before {
  11505. content: '';
  11506. pointer-events: none;
  11507. position: absolute;
  11508. top: 50%;
  11509. margin-top: -2px;
  11510. width: 0;
  11511. height: 0;
  11512. border-left: 4px solid transparent;
  11513. border-right: 4px solid transparent;
  11514. border-top: 5px solid #727272;
  11515. right: 6px;
  11516. }
  11517. .input-dropdown-wrap select,
  11518. .input-dropdown select,
  11519. .input-dropdown-wrap input,
  11520. .input-dropdown input,
  11521. .input-dropdown-wrap textarea,
  11522. .input-dropdown textarea {
  11523. padding-right: calc(20px + var(--f7-input-padding-right));
  11524. }
  11525. .input-outline:after,
  11526. .item-input-outline .item-input-wrap:after {
  11527. content: '';
  11528. position: absolute;
  11529. left: 0;
  11530. top: 0;
  11531. width: 100%;
  11532. height: 100%;
  11533. box-sizing: border-box;
  11534. border: 1px solid var(--f7-input-outline-border-color);
  11535. border-radius: var(--f7-input-outline-border-radius);
  11536. transition-duration: 200ms;
  11537. pointer-events: none;
  11538. }
  11539. .input-outline.input-focused:after,
  11540. .item-input-outline.item-input-focused .item-input-wrap:after {
  11541. border-width: 2px;
  11542. border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
  11543. }
  11544. .input-outline.input-invalid:after,
  11545. .item-input-outline.item-input-invalid .item-input-wrap:after {
  11546. border-width: 2px;
  11547. border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
  11548. }
  11549. .input-outline input,
  11550. .item-input-outline input,
  11551. .list .item-input-outline input,
  11552. .input-outline textarea,
  11553. .item-input-outline textarea,
  11554. .list .item-input-outline textarea,
  11555. .input-outline select,
  11556. .item-input-outline select,
  11557. .list .item-input-outline select {
  11558. border-radius: var(--f7-input-outline-border-radius);
  11559. padding-left: var(--f7-input-outline-padding-horizontal);
  11560. padding-right: var(--f7-input-outline-padding-horizontal);
  11561. }
  11562. .input-outline.input-dropdown:before,
  11563. .item-input-outline .input-dropdown-wrap:before {
  11564. right: 8px;
  11565. }
  11566. .input-outline.input-dropdown input,
  11567. .item-input-outline .input-dropdown-wrap input,
  11568. .input-outline.input-dropdown textarea,
  11569. .item-input-outline .input-dropdown-wrap textarea,
  11570. .input-outline.input-dropdown select,
  11571. .item-input-outline .input-dropdown-wrap select {
  11572. padding-right: 20px;
  11573. }
  11574. .input-outline .input-clear-button,
  11575. .item-input-outline .input-clear-button {
  11576. right: 8px;
  11577. }
  11578. .item-input-outline {
  11579. --f7-input-height: var(--f7-input-outline-height);
  11580. }
  11581. .item-input-outline .item-inner:after {
  11582. display: none !important;
  11583. }
  11584. .item-input-outline .item-label {
  11585. left: var(--f7-input-outline-padding-horizontal);
  11586. }
  11587. .inline-labels .item-input-outline .item-label,
  11588. .inline-label .item-input-outline .item-label,
  11589. .item-input-outline .inline-label .item-label,
  11590. .item-input-outline .inline-label.item-label {
  11591. left: 0;
  11592. }
  11593. .item-input-outline .item-floating-label {
  11594. left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
  11595. padding-left: 4px;
  11596. padding-right: 4px;
  11597. background: var(--f7-page-bg-color);
  11598. z-index: 10;
  11599. margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
  11600. }
  11601. .item-input-outline.item-input-with-value .item-floating-label,
  11602. .item-input-outline.item-input-focused .item-floating-label {
  11603. transform: scale(1) translateY(50%);
  11604. }
  11605. .item-input-outline .item-input-info,
  11606. .item-input-outline .item-input-error-message {
  11607. padding-left: var(--f7-input-outline-padding-horizontal);
  11608. }
  11609. .block-strong .item-input-outline .item-floating-label {
  11610. background: var(--f7-block-strong-bg-color);
  11611. }
  11612. .list .item-input-outline .item-floating-label {
  11613. background: var(--f7-list-bg-color);
  11614. }
  11615. .theme-dark option {
  11616. background-color: var(--f7-page-bg-color);
  11617. }
  11618. .ios .item-label + .item-input-wrap,
  11619. .ios .item-floating-label + .item-input-wrap {
  11620. margin-top: 0;
  11621. }
  11622. .ios .item-input-focused .item-floating-label {
  11623. color: var(--f7-label-text-color);
  11624. }
  11625. .ios .item-input .item-media {
  11626. align-self: flex-start;
  11627. }
  11628. .ios .item-input-wrap {
  11629. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11630. margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
  11631. }
  11632. .ios .inline-labels .item-label + .item-input-wrap,
  11633. .ios .inline-label .item-label + .item-input-wrap,
  11634. .ios .inline-labels .item-floating-label + .item-input-wrap,
  11635. .ios .inline-label .item-floating-label + .item-input-wrap {
  11636. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11637. }
  11638. .ios .inline-labels .item-input-wrap,
  11639. .ios .inline-label .item-input-wrap {
  11640. margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
  11641. }
  11642. .ios .item-input-error-message,
  11643. .ios .item-input-info,
  11644. .ios .input-error-message,
  11645. .ios .input-info {
  11646. position: relative;
  11647. margin-bottom: 6px;
  11648. margin-top: -8px;
  11649. }
  11650. .ios .item-input-focused .item-label,
  11651. .ios .item-input-focused .item-floating-label {
  11652. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  11653. }
  11654. .ios .item-input-focused .item-inner:after {
  11655. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  11656. }
  11657. .ios .item-input-invalid .item-label,
  11658. .ios .item-input-invalid .item-floating-label {
  11659. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  11660. }
  11661. .ios .item-input-invalid .item-inner:after {
  11662. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  11663. }
  11664. .ios .item-input-invalid input,
  11665. .ios .input-invalid input,
  11666. .ios .item-input-invalid select,
  11667. .ios .input-invalid select,
  11668. .ios .item-input-invalid textarea,
  11669. .ios .input-invalid textarea {
  11670. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  11671. }
  11672. .ios .input-clear-button:after {
  11673. content: 'delete_round_ios';
  11674. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  11675. line-height: 1.4;
  11676. }
  11677. .ios .input-clear-button:before {
  11678. width: 44px;
  11679. height: 44px;
  11680. margin-left: -22px;
  11681. margin-top: -22px;
  11682. }
  11683. .ios .item-input-outline .item-input-wrap,
  11684. .ios .input-outline .item-input-wrap {
  11685. margin-top: 0;
  11686. margin-bottom: 0;
  11687. }
  11688. .ios .item-input-outline .item-input-error-message,
  11689. .ios .input-outline .item-input-error-message,
  11690. .ios .item-input-outline .item-input-info,
  11691. .ios .input-outline .item-input-info,
  11692. .ios .item-input-outline .input-error-message,
  11693. .ios .input-outline .input-error-message,
  11694. .ios .item-input-outline .input-info,
  11695. .ios .input-outline .input-info {
  11696. margin-top: 0;
  11697. white-space: normal;
  11698. overflow: hidden;
  11699. text-overflow: ellipsis;
  11700. }
  11701. .ios .item-input-outline .item-input-info,
  11702. .ios .input-outline .item-input-info,
  11703. .ios .item-input-outline .input-info,
  11704. .ios .input-outline .input-info {
  11705. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11706. }
  11707. .ios .item-input-outline .item-input-error-message,
  11708. .ios .input-outline .item-input-error-message,
  11709. .ios .item-input-outline .input-error-message,
  11710. .ios .input-outline .input-error-message {
  11711. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11712. }
  11713. .ios .item-input-outline.item-input-with-info .item-input-wrap,
  11714. .ios .input-outline.item-input-with-info .item-input-wrap,
  11715. .ios .item-input-outline.input-with-info .item-input-wrap,
  11716. .ios .input-outline.input-with-info .item-input-wrap {
  11717. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11718. }
  11719. .ios .item-input-outline.item-input-with-error-message .item-input-wrap,
  11720. .ios .input-outline.item-input-with-error-message .item-input-wrap,
  11721. .ios .item-input-outline.input-with-error-message .item-input-wrap,
  11722. .ios .input-outline.input-with-error-message .item-input-wrap {
  11723. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11724. }
  11725. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  11726. .md .input:not(.input-outline):after {
  11727. content: '';
  11728. position: absolute;
  11729. background-color: var(--f7-list-item-border-color);
  11730. display: block;
  11731. z-index: 15;
  11732. top: auto;
  11733. right: auto;
  11734. bottom: 0;
  11735. left: 0;
  11736. height: 1px;
  11737. width: 100%;
  11738. transform-origin: 50% 100%;
  11739. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  11740. }
  11741. .md .item-input:not(.item-input-outline) .item-input-wrap:after,
  11742. .md .input:not(.input-outline):after {
  11743. transition-duration: 200ms;
  11744. }
  11745. .md .item-input-wrap {
  11746. min-height: var(--f7-input-height);
  11747. }
  11748. .md .item-input .item-media {
  11749. align-self: flex-end;
  11750. }
  11751. .md .item-input .item-inner:after {
  11752. display: none !important;
  11753. }
  11754. .md .inline-labels .item-media,
  11755. .md .inline-label .item-media {
  11756. align-self: flex-start;
  11757. padding-top: 14px;
  11758. }
  11759. .md .item-input-with-error-message,
  11760. .md .item-input-with-info,
  11761. .md .input-with-error-message,
  11762. .md .input-with-info {
  11763. padding-bottom: 20px;
  11764. }
  11765. .md .item-input-error-message,
  11766. .md .item-input-info,
  11767. .md .input-error-message,
  11768. .md .input-info {
  11769. position: absolute;
  11770. top: 100%;
  11771. margin-top: 4px;
  11772. white-space: nowrap;
  11773. overflow: hidden;
  11774. text-overflow: ellipsis;
  11775. width: 100%;
  11776. left: 0;
  11777. }
  11778. .md .item-input-focused .item-label,
  11779. .md .item-input-focused .item-floating-label {
  11780. color: var(--f7-label-focused-text-color, var(--f7-theme-color));
  11781. }
  11782. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  11783. .md .input-focused:not(.input-outline):after {
  11784. background: var(--f7-input-focused-border-color, var(--f7-theme-color));
  11785. }
  11786. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  11787. .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
  11788. .md .input-invalid:not(.input-outline):after,
  11789. .md .input-focused:not(.input-outline):after {
  11790. transform: scaleY(2) !important;
  11791. }
  11792. .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
  11793. .md .input-invalid:not(.input-outline):after {
  11794. background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
  11795. }
  11796. .md .item-input-invalid .item-label,
  11797. .md .item-input-invalid .item-floating-label {
  11798. color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
  11799. }
  11800. .md .item-input-invalid input,
  11801. .md .input-invalid input,
  11802. .md .item-input-invalid select,
  11803. .md .input-invalid select,
  11804. .md .item-input-invalid textarea,
  11805. .md .input-invalid textarea {
  11806. color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
  11807. }
  11808. .md .input-clear-button:after {
  11809. font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
  11810. content: 'delete_round_md';
  11811. line-height: 1.2;
  11812. }
  11813. .md .input-clear-button:before {
  11814. width: 48px;
  11815. height: 48px;
  11816. margin-left: -24px;
  11817. margin-top: -24px;
  11818. }
  11819. .aurora .item-label + .item-input-wrap,
  11820. .aurora .item-floating-label + .item-input-wrap {
  11821. margin-top: 0;
  11822. }
  11823. .aurora .item-input-focused .item-floating-label {
  11824. color: var(--f7-label-text-color);
  11825. }
  11826. .aurora .item-input .item-media {
  11827. align-self: flex-start;
  11828. }
  11829. .aurora .item-input-error-message,
  11830. .aurora .item-input-info,
  11831. .aurora .input-error-message,
  11832. .aurora .input-info {
  11833. position: relative;
  11834. }
  11835. .aurora .item-input-focused .item-label,
  11836. .aurora .item-input-focused .item-floating-label {
  11837. color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
  11838. }
  11839. .aurora .item-input-focused .item-inner:after {
  11840. background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
  11841. }
  11842. .aurora .item-input-invalid .item-label,
  11843. .aurora .item-input-invalid .item-floating-label {
  11844. color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
  11845. }
  11846. .aurora .item-input-invalid .item-inner:after {
  11847. background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
  11848. }
  11849. .aurora .item-input-invalid input,
  11850. .aurora .input-invalid input,
  11851. .aurora .item-input-invalid select,
  11852. .aurora .input-invalid select,
  11853. .aurora .item-input-invalid textarea,
  11854. .aurora .input-invalid textarea {
  11855. color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
  11856. }
  11857. .aurora .input-clear-button:after {
  11858. content: 'delete_round_ios';
  11859. font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
  11860. line-height: 1.4;
  11861. }
  11862. .aurora .input-clear-button:before {
  11863. width: 28px;
  11864. height: 28px;
  11865. margin-left: -14px;
  11866. margin-top: -14px;
  11867. }
  11868. .aurora .item-input-outline .item-input-wrap,
  11869. .aurora .input-outline .item-input-wrap {
  11870. margin-top: 0;
  11871. margin-bottom: 0;
  11872. }
  11873. .aurora .item-input-outline .item-input-error-message,
  11874. .aurora .input-outline .item-input-error-message,
  11875. .aurora .item-input-outline .item-input-info,
  11876. .aurora .input-outline .item-input-info,
  11877. .aurora .item-input-outline .input-error-message,
  11878. .aurora .input-outline .input-error-message,
  11879. .aurora .item-input-outline .input-info,
  11880. .aurora .input-outline .input-info {
  11881. margin-top: 0;
  11882. white-space: normal;
  11883. overflow: hidden;
  11884. text-overflow: ellipsis;
  11885. }
  11886. .aurora .item-input-outline .item-input-info,
  11887. .aurora .input-outline .item-input-info,
  11888. .aurora .item-input-outline .input-info,
  11889. .aurora .input-outline .input-info {
  11890. margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11891. }
  11892. .aurora .item-input-outline .item-input-error-message,
  11893. .aurora .input-outline .item-input-error-message,
  11894. .aurora .item-input-outline .input-error-message,
  11895. .aurora .input-outline .input-error-message {
  11896. margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11897. }
  11898. .aurora .item-input-outline.item-input-with-info .item-input-wrap,
  11899. .aurora .input-outline.item-input-with-info .item-input-wrap,
  11900. .aurora .item-input-outline.input-with-info .item-input-wrap,
  11901. .aurora .input-outline.input-with-info .item-input-wrap {
  11902. margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
  11903. }
  11904. .aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
  11905. .aurora .input-outline.item-input-with-error-message .item-input-wrap,
  11906. .aurora .item-input-outline.input-with-error-message .item-input-wrap,
  11907. .aurora .input-outline.input-with-error-message .item-input-wrap {
  11908. margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
  11909. }
  11910. /* === Checkbox === */
  11911. :root {
  11912. /* --f7-checkbox-active-color: var(--f7-theme-color); */
  11913. --f7-checkbox-icon-color: #fff;
  11914. }
  11915. :root .theme-dark,
  11916. :root.theme-dark {
  11917. --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
  11918. }
  11919. .ios {
  11920. --f7-checkbox-size: 22px;
  11921. --f7-checkbox-border-radius: 50%;
  11922. --f7-checkbox-border-width: 1px;
  11923. --f7-checkbox-extra-margin: 0px;
  11924. --f7-checkbox-inactive-color: #c7c7cc;
  11925. }
  11926. .md {
  11927. --f7-checkbox-size: 18px;
  11928. --f7-checkbox-border-radius: 2px;
  11929. --f7-checkbox-border-width: 2px;
  11930. --f7-checkbox-extra-margin: 22px;
  11931. --f7-checkbox-inactive-color: #6d6d6d;
  11932. }
  11933. .aurora {
  11934. --f7-checkbox-size: 14px;
  11935. --f7-checkbox-border-radius: 2px;
  11936. --f7-checkbox-border-width: 1px;
  11937. --f7-checkbox-extra-margin: 0px;
  11938. --f7-checkbox-inactive-color: #888;
  11939. }
  11940. .checkbox {
  11941. position: relative;
  11942. display: inline-block;
  11943. vertical-align: middle;
  11944. z-index: 1;
  11945. background-color: transparent;
  11946. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  11947. }
  11948. .icon-checkbox,
  11949. .checkbox i {
  11950. flex-shrink: 0;
  11951. border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
  11952. width: var(--f7-checkbox-size);
  11953. height: var(--f7-checkbox-size);
  11954. border-radius: var(--f7-checkbox-border-radius);
  11955. box-sizing: border-box;
  11956. position: relative;
  11957. display: block;
  11958. }
  11959. .icon-checkbox:after,
  11960. .checkbox i:after {
  11961. font-family: 'framework7-core-icons';
  11962. font-weight: normal;
  11963. font-style: normal;
  11964. line-height: 1;
  11965. letter-spacing: normal;
  11966. text-transform: none;
  11967. white-space: nowrap;
  11968. word-wrap: normal;
  11969. direction: ltr;
  11970. -webkit-font-smoothing: antialiased;
  11971. text-rendering: optimizeLegibility;
  11972. -moz-osx-font-smoothing: grayscale;
  11973. font-feature-settings: "liga";
  11974. text-align: center;
  11975. display: block;
  11976. width: 100%;
  11977. height: 100%;
  11978. font-size: 20px;
  11979. width: var(--f7-checkbox-size);
  11980. height: var(--f7-checkbox-size);
  11981. line-height: var(--f7-checkbox-size);
  11982. top: calc(0px - var(--f7-checkbox-border-width));
  11983. opacity: 0;
  11984. color: var(--f7-checkbox-icon-color);
  11985. position: relative;
  11986. transition-property: opacity;
  11987. left: calc(0px - var(--f7-checkbox-border-width));
  11988. }
  11989. label.item-checkbox input[type="checkbox"]:not(:checked) ~ .icon-checkbox:after,
  11990. label.item-checkbox input[type="checkbox"]:not(:checked) ~ * .icon-checkbox:after,
  11991. .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
  11992. font-size: 0;
  11993. }
  11994. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
  11995. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
  11996. .checkbox input[type="checkbox"]:checked ~ i,
  11997. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox,
  11998. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox,
  11999. .checkbox input[type="checkbox"]:indeterminate ~ i {
  12000. border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  12001. background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
  12002. }
  12003. label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
  12004. label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
  12005. .checkbox input[type="checkbox"]:checked ~ i:after,
  12006. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12007. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12008. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12009. opacity: 1;
  12010. }
  12011. label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12012. label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12013. .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12014. font-size: 0;
  12015. content: '';
  12016. position: absolute;
  12017. top: 50%;
  12018. width: 70%;
  12019. background: #fff;
  12020. height: 2px;
  12021. border-radius: 2px;
  12022. margin-top: -1px;
  12023. transition: 0ms;
  12024. left: 15%;
  12025. }
  12026. label.item-checkbox,
  12027. .checkbox {
  12028. cursor: pointer;
  12029. }
  12030. label.item-checkbox input[type="checkbox"],
  12031. .checkbox input[type="checkbox"],
  12032. label.item-checkbox input[type="radio"],
  12033. .checkbox input[type="radio"] {
  12034. display: none;
  12035. }
  12036. label.item-checkbox {
  12037. transition-duration: 300ms;
  12038. }
  12039. label.item-checkbox .item-content .item-media,
  12040. label.item-checkbox.item-content .item-media {
  12041. align-self: center;
  12042. }
  12043. label.item-checkbox > .icon-checkbox {
  12044. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
  12045. }
  12046. label.item-checkbox.active-state {
  12047. background-color: var(--f7-list-link-pressed-bg-color);
  12048. }
  12049. label.item-checkbox.active-state:after {
  12050. background-color: transparent;
  12051. }
  12052. label.item-checkbox.disabled,
  12053. .disabled label.item-checkbox {
  12054. opacity: 0.55;
  12055. pointer-events: none;
  12056. opacity: 0.55 !important;
  12057. pointer-events: none !important;
  12058. }
  12059. .ios .icon-checkbox:after,
  12060. .ios .checkbox i:after {
  12061. content: 'checkbox_ios';
  12062. font-size: 21px;
  12063. }
  12064. .ios label.item-checkbox.active-state {
  12065. transition-duration: 0ms;
  12066. }
  12067. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
  12068. .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
  12069. .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
  12070. height: 1px;
  12071. margin-top: 0px;
  12072. }
  12073. .md .icon-checkbox,
  12074. .md .checkbox i {
  12075. transition-duration: 200ms;
  12076. }
  12077. .md .icon-checkbox:after,
  12078. .md .checkbox i:after {
  12079. content: 'checkbox_md';
  12080. transition-duration: 200ms;
  12081. font-size: 15px;
  12082. }
  12083. .md label.item-checkbox {
  12084. position: relative;
  12085. overflow: hidden;
  12086. z-index: 0;
  12087. }
  12088. .aurora .icon-checkbox,
  12089. .aurora .checkbox i {
  12090. transition-duration: 150ms;
  12091. }
  12092. .aurora .icon-checkbox:after,
  12093. .aurora .checkbox i:after {
  12094. content: 'checkbox_aurora';
  12095. transition-duration: 150ms;
  12096. font-size: 19px;
  12097. }
  12098. .aurora .icon-checkbox:before,
  12099. .aurora .checkbox i:before {
  12100. content: '';
  12101. position: absolute;
  12102. left: 0;
  12103. top: 0;
  12104. width: 100%;
  12105. height: 100%;
  12106. background: rgba(0, 0, 0, 0.1);
  12107. opacity: 0;
  12108. transition-duration: 150ms;
  12109. }
  12110. .aurora .checkbox.active-state i:before {
  12111. opacity: 1;
  12112. }
  12113. .aurora label.item-checkbox {
  12114. position: relative;
  12115. overflow: hidden;
  12116. z-index: 0;
  12117. }
  12118. /* === Radio === */
  12119. :root {
  12120. /*
  12121. --f7-radio-active-color: var(--f7-theme-color);
  12122. */
  12123. --f7-radio-border-radius: 50%;
  12124. }
  12125. :root .theme-dark,
  12126. :root.theme-dark {
  12127. --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
  12128. }
  12129. .ios {
  12130. --f7-radio-size: 22px;
  12131. --f7-radio-border-width: 1px;
  12132. --f7-radio-extra-margin: 0px;
  12133. --f7-radio-inactive-color: #c7c7cc;
  12134. }
  12135. .md {
  12136. --f7-radio-size: 20px;
  12137. --f7-radio-border-width: 2px;
  12138. --f7-radio-extra-margin: 22px;
  12139. --f7-radio-inactive-color: #6d6d6d;
  12140. }
  12141. .aurora {
  12142. --f7-radio-size: 16px;
  12143. --f7-radio-border-width: 1px;
  12144. --f7-radio-extra-margin: 0px;
  12145. --f7-radio-inactive-color: #888;
  12146. }
  12147. .radio {
  12148. position: relative;
  12149. display: inline-block;
  12150. vertical-align: middle;
  12151. z-index: 1;
  12152. --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
  12153. }
  12154. .icon-radio {
  12155. width: var(--f7-radio-size);
  12156. height: var(--f7-radio-size);
  12157. border-radius: var(--f7-radio-border-radius);
  12158. position: relative;
  12159. box-sizing: border-box;
  12160. display: block;
  12161. flex-shrink: 0;
  12162. }
  12163. .radio .icon-radio,
  12164. .md .icon-radio,
  12165. .aurora .icon-radio {
  12166. border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
  12167. }
  12168. label.item-radio,
  12169. .radio {
  12170. cursor: pointer;
  12171. }
  12172. label.item-radio input[type="checkbox"],
  12173. .radio input[type="checkbox"],
  12174. label.item-radio input[type="radio"],
  12175. .radio input[type="radio"] {
  12176. display: none;
  12177. }
  12178. label.item-radio {
  12179. transition-duration: 300ms;
  12180. }
  12181. label.item-radio .item-content .item-media,
  12182. label.item-radio.item-content .item-media {
  12183. align-self: center;
  12184. }
  12185. label.item-radio.active-state {
  12186. background-color: var(--f7-list-link-pressed-bg-color);
  12187. }
  12188. label.item-radio.active-state:after {
  12189. background-color: transparent;
  12190. }
  12191. label.item-radio.disabled,
  12192. .disabled label.item-radio {
  12193. opacity: 0.55;
  12194. pointer-events: none;
  12195. opacity: 0.55 !important;
  12196. pointer-events: none !important;
  12197. }
  12198. .ios .icon-radio:after {
  12199. font-family: 'framework7-core-icons';
  12200. font-weight: normal;
  12201. font-style: normal;
  12202. line-height: 1;
  12203. letter-spacing: normal;
  12204. text-transform: none;
  12205. white-space: nowrap;
  12206. word-wrap: normal;
  12207. direction: ltr;
  12208. -webkit-font-smoothing: antialiased;
  12209. text-rendering: optimizeLegibility;
  12210. -moz-osx-font-smoothing: grayscale;
  12211. font-feature-settings: "liga";
  12212. text-align: center;
  12213. display: block;
  12214. width: 100%;
  12215. height: 100%;
  12216. width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  12217. height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
  12218. line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
  12219. font-size: 20px;
  12220. content: 'radio_ios';
  12221. color: var(--f7-radio-active-color, var(--f7-theme-color));
  12222. opacity: 0;
  12223. }
  12224. .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12225. .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12226. .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
  12227. opacity: 1;
  12228. }
  12229. .ios .radio input[type="radio"]:checked ~ .icon-radio {
  12230. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12231. }
  12232. .ios label.item-radio:not(.item-radio-icon-start) input[type="radio"] ~ .icon-radio {
  12233. position: absolute;
  12234. top: 50%;
  12235. margin-top: -11px;
  12236. right: calc(var(--f7-safe-area-right) + 10px);
  12237. }
  12238. .ios label.item-radio:not(.item-radio-icon-start) .item-inner {
  12239. padding-right: calc(var(--f7-safe-area-right) + 36px);
  12240. }
  12241. .ios label.item-radio-icon-start > .icon-radio {
  12242. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
  12243. }
  12244. .ios label.item-radio.active-state {
  12245. transition-duration: 0ms;
  12246. }
  12247. .md .icon-radio {
  12248. transition-duration: 200ms;
  12249. }
  12250. .md .icon-radio:after {
  12251. content: '';
  12252. position: absolute;
  12253. width: 10px;
  12254. height: 10px;
  12255. left: 50%;
  12256. top: 50%;
  12257. margin-left: -5px;
  12258. margin-top: -5px;
  12259. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12260. border-radius: 50%;
  12261. transform: scale(0);
  12262. transition-duration: 200ms;
  12263. }
  12264. .md label.item-radio input[type="radio"]:checked ~ .icon-radio,
  12265. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  12266. .md .radio input[type="radio"]:checked ~ .icon-radio {
  12267. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12268. }
  12269. .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12270. .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12271. .md .radio input[type="radio"]:checked ~ .icon-radio:after {
  12272. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12273. transform: scale(1);
  12274. }
  12275. .md label.item-radio {
  12276. position: relative;
  12277. overflow: hidden;
  12278. z-index: 0;
  12279. }
  12280. .md label.item-radio:not(.item-radio-icon-end) > .icon-radio {
  12281. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  12282. }
  12283. .md label.item-radio-icon-end input[type="radio"] ~ .icon-radio {
  12284. position: absolute;
  12285. top: 50%;
  12286. margin-top: -10px;
  12287. right: calc(var(--f7-safe-area-right) + 16px);
  12288. }
  12289. .md label.item-radio-icon-end .item-inner {
  12290. padding-right: calc(var(--f7-safe-area-right) + 52px);
  12291. }
  12292. .aurora .icon-radio {
  12293. transition-duration: 150ms;
  12294. overflow: hidden;
  12295. }
  12296. .aurora .icon-radio:after {
  12297. content: '';
  12298. position: absolute;
  12299. width: 6px;
  12300. height: 6px;
  12301. left: 50%;
  12302. top: 50%;
  12303. margin-left: -3px;
  12304. margin-top: -3px;
  12305. background-color: #fff;
  12306. border-radius: 50%;
  12307. transform: scale(0);
  12308. transition-duration: 150ms;
  12309. }
  12310. .aurora .icon-radio:before {
  12311. content: '';
  12312. position: absolute;
  12313. left: 0;
  12314. top: 0;
  12315. width: 100%;
  12316. height: 100%;
  12317. background: rgba(0, 0, 0, 0.1);
  12318. opacity: 0;
  12319. transition-duration: 150ms;
  12320. }
  12321. .aurora .radio.active-state i:before {
  12322. opacity: 1;
  12323. }
  12324. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio,
  12325. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio,
  12326. .aurora .radio input[type="radio"]:checked ~ .icon-radio {
  12327. border-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12328. background-color: var(--f7-radio-active-color, var(--f7-theme-color));
  12329. }
  12330. .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
  12331. .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
  12332. .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
  12333. transform: scale(1);
  12334. }
  12335. .aurora label.item-radio {
  12336. position: relative;
  12337. overflow: hidden;
  12338. z-index: 0;
  12339. }
  12340. .aurora label.item-radio:not(.item-radio-icon-end) > .icon-radio {
  12341. margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
  12342. }
  12343. .aurora label.item-radio-icon-end input[type="radio"] ~ .icon-radio {
  12344. position: absolute;
  12345. top: 50%;
  12346. margin-top: -8px;
  12347. right: calc(var(--f7-safe-area-right) + 16px);
  12348. }
  12349. .aurora label.item-radio-icon-end .item-inner {
  12350. padding-right: calc(var(--f7-safe-area-right) + 48px);
  12351. }
  12352. /* === Toggle === */
  12353. :root {
  12354. --f7-toggle-handle-color: #fff;
  12355. }
  12356. :root .theme-dark,
  12357. :root.theme-dark {
  12358. --f7-toggle-inactive-color: #555;
  12359. }
  12360. .ios {
  12361. --f7-toggle-width: 52px;
  12362. --f7-toggle-height: 32px;
  12363. --f7-toggle-border-color: #e5e5e5;
  12364. --f7-toggle-inactive-color: #fff;
  12365. }
  12366. .ios .theme-dark,
  12367. .ios.theme-dark {
  12368. --f7-toggle-border-color: #555;
  12369. }
  12370. .md {
  12371. --f7-toggle-width: 36px;
  12372. --f7-toggle-height: 14px;
  12373. --f7-toggle-inactive-color: #b0afaf;
  12374. }
  12375. .aurora {
  12376. --f7-toggle-width: 40px;
  12377. --f7-toggle-height: 20px;
  12378. --f7-toggle-inactive-color: #aaa;
  12379. }
  12380. .toggle,
  12381. .toggle-icon {
  12382. width: var(--f7-toggle-width);
  12383. height: var(--f7-toggle-height);
  12384. border-radius: var(--f7-toggle-height);
  12385. }
  12386. .toggle {
  12387. display: inline-block;
  12388. vertical-align: middle;
  12389. position: relative;
  12390. box-sizing: border-box;
  12391. align-self: center;
  12392. -webkit-user-select: none;
  12393. -moz-user-select: none;
  12394. user-select: none;
  12395. }
  12396. .toggle input[type="checkbox"] {
  12397. display: none;
  12398. }
  12399. .toggle input[disabled] ~ .toggle-icon {
  12400. pointer-events: none;
  12401. }
  12402. .toggle-icon {
  12403. z-index: 0;
  12404. margin: 0;
  12405. padding: 0;
  12406. -webkit-appearance: none;
  12407. -moz-appearance: none;
  12408. appearance: none;
  12409. border: none;
  12410. position: relative;
  12411. transition: 300ms;
  12412. box-sizing: border-box;
  12413. display: block;
  12414. cursor: pointer;
  12415. }
  12416. .toggle-icon:before,
  12417. .toggle-icon:after {
  12418. content: '';
  12419. }
  12420. .toggle-icon:after {
  12421. background: var(--f7-toggle-handle-color);
  12422. position: absolute;
  12423. z-index: 2;
  12424. transform: translateX(0px);
  12425. transition-duration: 300ms;
  12426. }
  12427. .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
  12428. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12429. }
  12430. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
  12431. transform: scale(0);
  12432. }
  12433. .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12434. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
  12435. }
  12436. .ios .toggle-icon {
  12437. background: var(--f7-toggle-border-color);
  12438. }
  12439. .ios .toggle-icon:before {
  12440. position: absolute;
  12441. left: 2px;
  12442. top: 2px;
  12443. width: calc(var(--f7-toggle-width) - 4px);
  12444. height: calc(var(--f7-toggle-height) - 4px);
  12445. border-radius: var(--f7-toggle-height);
  12446. box-sizing: border-box;
  12447. background: var(--f7-toggle-inactive-color);
  12448. z-index: 1;
  12449. transition-duration: 300ms;
  12450. transform: scale(1);
  12451. }
  12452. .ios .toggle-icon:after {
  12453. height: calc(var(--f7-toggle-height) - 4px);
  12454. width: calc(var(--f7-toggle-height) - 4px);
  12455. top: 2px;
  12456. left: 2px;
  12457. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  12458. border-radius: calc(var(--f7-toggle-height) - 4px);
  12459. }
  12460. .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
  12461. transform: scale(0);
  12462. }
  12463. .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
  12464. width: calc(var(--f7-toggle-height) + 4px);
  12465. }
  12466. .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
  12467. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
  12468. }
  12469. .md .toggle input[type="checkbox"]:checked + .toggle-icon {
  12470. background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
  12471. }
  12472. .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12473. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));
  12474. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12475. }
  12476. .md .toggle-icon {
  12477. background: var(--f7-toggle-inactive-color);
  12478. }
  12479. .md .toggle-icon:after {
  12480. height: calc(var(--f7-toggle-height) + 6px);
  12481. width: calc(var(--f7-toggle-height) + 6px);
  12482. top: -3px;
  12483. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  12484. border-radius: var(--f7-toggle-height);
  12485. left: 0;
  12486. }
  12487. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
  12488. background: var(--f7-toggle-active-color, var(--f7-theme-color));
  12489. }
  12490. .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
  12491. transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
  12492. }
  12493. .aurora .toggle-icon {
  12494. background: var(--f7-toggle-inactive-color);
  12495. }
  12496. .aurora .toggle-icon:after {
  12497. height: calc(var(--f7-toggle-height) - 4px);
  12498. width: calc(var(--f7-toggle-height) - 4px);
  12499. top: 2px;
  12500. left: 2px;
  12501. border-radius: calc(var(--f7-toggle-height) - 4px);
  12502. }
  12503. /* === Range Slider === */
  12504. :root {
  12505. /*
  12506. --f7-range-bar-active-bg-color: var(--f7-theme-color);
  12507. --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  12508. --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  12509. */
  12510. --f7-range-scale-step-height: 5px;
  12511. --f7-range-scale-text-color: #666;
  12512. --f7-range-scale-substep-width: 1px;
  12513. --f7-range-scale-substep-height: 4px;
  12514. }
  12515. .ios {
  12516. --f7-range-size: 28px;
  12517. --f7-range-bar-bg-color: #b7b8b7;
  12518. --f7-range-bar-size: 1px;
  12519. --f7-range-bar-border-radius: 2px;
  12520. --f7-range-knob-size: 28px;
  12521. --f7-range-knob-color: #fff;
  12522. --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  12523. --f7-range-label-size: 20px;
  12524. --f7-range-label-text-color: #000;
  12525. --f7-range-label-bg-color: #fff;
  12526. --f7-range-label-font-size: 12px;
  12527. --f7-range-label-font-weight: normal;
  12528. --f7-range-label-border-radius: 5px;
  12529. --f7-range-label-padding: 0px;
  12530. --f7-range-scale-step-width: 1px;
  12531. --f7-range-scale-font-size: 12px;
  12532. --f7-range-scale-font-weight: 400;
  12533. --f7-range-scale-label-offset: 4px;
  12534. }
  12535. .md {
  12536. --f7-range-size: 20px;
  12537. --f7-range-bar-bg-color: #b9b9b9;
  12538. --f7-range-bar-size: 2px;
  12539. --f7-range-bar-border-radius: 0px;
  12540. --f7-range-knob-size: 12px;
  12541. /*
  12542. --f7-range-knob-color: var(--f7-theme-color);
  12543. */
  12544. --f7-range-knob-box-shadow: none;
  12545. --f7-range-label-size: 26px;
  12546. --f7-range-label-font-weight: normal;
  12547. --f7-range-label-text-color: #fff;
  12548. /*
  12549. --f7-range-label-bg-color: var(--f7-theme-color);
  12550. */
  12551. --f7-range-label-font-size: 10px;
  12552. --f7-range-label-border-radius: 50%;
  12553. --f7-range-label-padding: 0px;
  12554. --f7-range-scale-step-width: 2px;
  12555. --f7-range-scale-font-size: 12px;
  12556. --f7-range-scale-font-weight: 400;
  12557. --f7-range-scale-label-offset: 4px;
  12558. }
  12559. .aurora {
  12560. --f7-range-size: 20px;
  12561. --f7-range-bar-bg-color: #c7c7c7;
  12562. --f7-range-bar-size: 2px;
  12563. --f7-range-bar-border-radius: 2px;
  12564. --f7-range-knob-size: 16px;
  12565. /*
  12566. --f7-range-knob-color: var(--f7-theme-color);
  12567. */
  12568. --f7-range-knob-box-shadow: none;
  12569. --f7-range-label-size: 20px;
  12570. --f7-range-label-text-color: #fff;
  12571. /*
  12572. --f7-range-label-bg-color: var(--f7-theme-color);
  12573. */
  12574. --f7-range-label-font-size: 10px;
  12575. --f7-range-label-font-weight: 600;
  12576. --f7-range-label-border-radius: 4px;
  12577. --f7-range-label-padding: 0px 4px;
  12578. --f7-range-scale-step-width: 2px;
  12579. --f7-range-scale-font-size: 11px;
  12580. --f7-range-scale-font-weight: 500;
  12581. --f7-range-scale-label-offset: 2px;
  12582. }
  12583. .range-slider {
  12584. display: block;
  12585. position: relative;
  12586. align-self: center;
  12587. cursor: pointer;
  12588. -webkit-user-select: none;
  12589. -moz-user-select: none;
  12590. user-select: none;
  12591. }
  12592. .range-slider input[type="range"] {
  12593. display: none;
  12594. }
  12595. .range-slider.range-slider-horizontal {
  12596. width: 100%;
  12597. height: var(--f7-range-size);
  12598. touch-action: pan-y;
  12599. }
  12600. .range-slider.range-slider-vertical {
  12601. height: 100%;
  12602. width: var(--f7-range-size);
  12603. touch-action: pan-x;
  12604. }
  12605. .range-bar {
  12606. position: absolute;
  12607. overflow: hidden;
  12608. background: var(--f7-range-bar-bg-color);
  12609. border-radius: var(--f7-range-bar-border-radius);
  12610. }
  12611. .range-slider-vertical .range-bar {
  12612. left: 50%;
  12613. top: 0;
  12614. height: 100%;
  12615. width: var(--f7-range-bar-size);
  12616. margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
  12617. }
  12618. .range-slider-horizontal .range-bar {
  12619. left: 0;
  12620. top: 50%;
  12621. width: 100%;
  12622. height: var(--f7-range-bar-size);
  12623. margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
  12624. }
  12625. .range-bar-active {
  12626. position: absolute;
  12627. background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
  12628. }
  12629. .range-slider-horizontal .range-bar-active {
  12630. left: 0;
  12631. top: 0;
  12632. height: 100%;
  12633. }
  12634. .range-slider-vertical .range-bar-active {
  12635. left: 0;
  12636. bottom: 0;
  12637. width: 100%;
  12638. }
  12639. .range-slider-vertical-reversed .range-bar-active {
  12640. top: 0;
  12641. bottom: auto;
  12642. }
  12643. .range-knob-wrap {
  12644. z-index: 20;
  12645. position: absolute;
  12646. height: var(--f7-range-knob-size);
  12647. width: var(--f7-range-knob-size);
  12648. }
  12649. .range-slider-horizontal .range-knob-wrap {
  12650. top: 50%;
  12651. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  12652. margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
  12653. left: 0;
  12654. }
  12655. .range-slider-vertical .range-knob-wrap {
  12656. left: 50%;
  12657. margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
  12658. bottom: 0;
  12659. margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
  12660. }
  12661. .range-slider-vertical-reversed .range-knob-wrap {
  12662. bottom: auto;
  12663. top: 0;
  12664. margin-bottom: 0;
  12665. margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
  12666. }
  12667. .range-knob {
  12668. box-sizing: border-box;
  12669. border-radius: 50%;
  12670. position: absolute;
  12671. left: 0;
  12672. top: 0;
  12673. width: 100%;
  12674. height: 100%;
  12675. z-index: 1;
  12676. background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
  12677. box-shadow: var(--f7-range-knob-box-shadow);
  12678. }
  12679. .range-knob:after {
  12680. content: '';
  12681. position: absolute;
  12682. left: 50%;
  12683. top: 50%;
  12684. width: 44px;
  12685. height: 44px;
  12686. margin-left: -22px;
  12687. margin-top: -22px;
  12688. }
  12689. .range-knob-label {
  12690. position: absolute;
  12691. left: 50%;
  12692. bottom: 100%;
  12693. text-align: center;
  12694. transition-duration: 120ms;
  12695. transition-property: transform;
  12696. box-sizing: border-box;
  12697. transform: translateY(100%) scale(0);
  12698. height: var(--f7-range-label-size);
  12699. line-height: var(--f7-range-label-size);
  12700. min-width: var(--f7-range-label-size);
  12701. color: var(--f7-range-label-text-color);
  12702. background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
  12703. font-size: var(--f7-range-label-font-size);
  12704. font-weight: var(--f7-range-label-font-weight);
  12705. border-radius: var(--f7-range-label-border-radius);
  12706. padding: var(--f7-range-label-padding);
  12707. }
  12708. .range-knob-active-state .range-knob-label {
  12709. transform: translateY(0%) scale(1);
  12710. }
  12711. .range-scale {
  12712. position: absolute;
  12713. }
  12714. .range-slider-horizontal .range-scale {
  12715. top: 50%;
  12716. left: 0;
  12717. width: 100%;
  12718. margin-top: calc(var(--f7-range-bar-size) / 2);
  12719. }
  12720. .range-slider-vertical .range-scale {
  12721. right: 50%;
  12722. top: 0;
  12723. height: 100%;
  12724. margin-right: calc(var(--f7-range-bar-size) / 2);
  12725. }
  12726. .range-scale-step {
  12727. position: absolute;
  12728. box-sizing: border-box;
  12729. display: flex;
  12730. font-size: var(--f7-range-scale-font-size);
  12731. font-weight: var(--f7-range-scale-font-weight);
  12732. color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
  12733. line-height: 1;
  12734. }
  12735. .range-scale-step:before {
  12736. content: '';
  12737. position: absolute;
  12738. background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
  12739. }
  12740. .range-slider-horizontal .range-scale-step {
  12741. justify-content: center;
  12742. align-items: flex-start;
  12743. width: var(--f7-range-scale-step-width);
  12744. height: var(--f7-range-scale-step-height);
  12745. padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  12746. top: 0;
  12747. margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2);
  12748. }
  12749. .range-slider-horizontal .range-scale-step:before {
  12750. left: 0;
  12751. top: 0;
  12752. width: 100%;
  12753. height: var(--f7-range-scale-step-height);
  12754. }
  12755. .range-slider-horizontal .range-scale-step:first-child {
  12756. margin-left: 0;
  12757. }
  12758. .range-slider-horizontal .range-scale-step:last-child {
  12759. margin-left: calc(-1 * var(--f7-range-scale-step-width));
  12760. }
  12761. .range-slider-vertical .range-scale-step {
  12762. line-height: 1;
  12763. justify-content: flex-end;
  12764. align-items: center;
  12765. height: var(--f7-range-scale-step-width);
  12766. width: var(--f7-range-scale-step-height);
  12767. padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
  12768. right: 0;
  12769. margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
  12770. }
  12771. .range-slider-vertical .range-scale-step:first-child {
  12772. margin-bottom: 0;
  12773. }
  12774. .range-slider-vertical .range-scale-step:last-child {
  12775. margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
  12776. }
  12777. .range-slider-vertical .range-scale-step:before {
  12778. right: 0;
  12779. top: 0;
  12780. height: 100%;
  12781. width: var(--f7-range-scale-step-height);
  12782. }
  12783. .range-scale-substep {
  12784. --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
  12785. --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
  12786. --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
  12787. }
  12788. .ios .range-knob-label {
  12789. margin-bottom: 6px;
  12790. transform: translateX(-50%) translateY(100%) scale(0);
  12791. }
  12792. .ios .range-knob-active-state .range-knob-label {
  12793. transform: translateX(-50%) translateY(0%) scale(1);
  12794. }
  12795. .md .range-knob {
  12796. transition-duration: 200ms;
  12797. transition-property: transform, background-color;
  12798. }
  12799. .md .range-knob-active-state .range-knob {
  12800. transform: scale(1.5);
  12801. }
  12802. .md .range-slider-min:not(.range-slider-dual) .range-knob {
  12803. background: #fff !important;
  12804. border: 2px solid var(--f7-range-bar-bg-color);
  12805. }
  12806. .md .range-knob-label {
  12807. width: var(--f7-range-label-size);
  12808. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  12809. margin-bottom: 8px;
  12810. }
  12811. .md .range-knob-label:before {
  12812. content: '';
  12813. left: 50%;
  12814. top: 0px;
  12815. margin-left: calc(-1 * var(--f7-range-label-size) / 2);
  12816. position: absolute;
  12817. z-index: -1;
  12818. width: var(--f7-range-label-size);
  12819. height: var(--f7-range-label-size);
  12820. background: var(--f7-range-label-bg-color, var(--f7-theme-color));
  12821. transform: rotate(-45deg);
  12822. border-radius: 50% 50% 50% 0;
  12823. }
  12824. .md .range-knob-active-state .range-knob-label {
  12825. transform: translateY(0%) scale(1);
  12826. }
  12827. .md .range-slider-label .range-knob-active-state .range-knob {
  12828. transform: scale(0);
  12829. }
  12830. .aurora .range-knob-label {
  12831. margin-bottom: 6px;
  12832. transform: translateX(-50%) translateY(100%) scale(0);
  12833. }
  12834. .aurora .range-knob-active-state .range-knob-label {
  12835. transform: translateX(-50%) translateY(0%) scale(1);
  12836. }
  12837. /* === Stepper === */
  12838. :root {
  12839. /*
  12840. --f7-stepper-button-text-color: var(--f7-theme-color);
  12841. --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  12842. --f7-stepper-value-text-color: var(--f7-theme-color);
  12843. */
  12844. --f7-stepper-fill-button-text-color: #fff;
  12845. /*
  12846. --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  12847. */
  12848. --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  12849. --f7-stepper-value-font-weight: 500;
  12850. --f7-stepper-border-width: 2px;
  12851. }
  12852. .ios {
  12853. --f7-stepper-height: 28px;
  12854. --f7-stepper-border-radius: 5px;
  12855. /*
  12856. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  12857. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  12858. */
  12859. --f7-stepper-large-height: 44px;
  12860. --f7-stepper-small-height: 26px;
  12861. --f7-stepper-small-border-width: 2px;
  12862. --f7-stepper-value-font-size: 17px;
  12863. }
  12864. .md {
  12865. --f7-stepper-height: 36px;
  12866. --f7-stepper-border-radius: 4px;
  12867. /*
  12868. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  12869. */
  12870. --f7-stepper-large-height: 48px;
  12871. --f7-stepper-small-border-width: 2px;
  12872. --f7-stepper-small-height: 28px;
  12873. --f7-stepper-value-font-size: 14px;
  12874. --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  12875. }
  12876. .md .theme-dark,
  12877. .md.theme-dark {
  12878. --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  12879. }
  12880. .aurora {
  12881. /*
  12882. --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  12883. --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  12884. */
  12885. --f7-stepper-height: 28px;
  12886. --f7-stepper-border-radius: 4px;
  12887. /*
  12888. --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  12889. --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  12890. */
  12891. --f7-stepper-large-height: 34px;
  12892. --f7-stepper-small-border-width: 1px;
  12893. --f7-stepper-small-height: 22px;
  12894. --f7-stepper-value-font-size: 14px;
  12895. }
  12896. .stepper {
  12897. display: inline-flex;
  12898. align-items: stretch;
  12899. height: var(--f7-stepper-height);
  12900. border-radius: var(--f7-stepper-border-radius);
  12901. }
  12902. .stepper-button,
  12903. .stepper-button-minus,
  12904. .stepper-button-plus {
  12905. background-color: var(--f7-stepper-button-bg-color);
  12906. width: 40px;
  12907. border-radius: var(--f7-stepper-border-radius);
  12908. border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  12909. color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  12910. line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
  12911. text-align: center;
  12912. display: flex;
  12913. justify-content: center;
  12914. align-content: center;
  12915. align-items: center;
  12916. flex-shrink: 0;
  12917. box-sizing: border-box;
  12918. position: relative;
  12919. cursor: pointer;
  12920. }
  12921. .stepper-button.active-state,
  12922. .stepper-button-minus.active-state,
  12923. .stepper-button-plus.active-state {
  12924. background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
  12925. color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
  12926. }
  12927. .stepper-button:first-child,
  12928. .stepper-button-minus:first-child,
  12929. .stepper-button-plus:first-child {
  12930. border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
  12931. }
  12932. .stepper-button:last-child,
  12933. .stepper-button-minus:last-child,
  12934. .stepper-button-plus:last-child {
  12935. border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
  12936. }
  12937. .stepper-button .icon,
  12938. .stepper-button-minus .icon,
  12939. .stepper-button-plus .icon {
  12940. pointer-events: none;
  12941. }
  12942. .stepper-button + .stepper-button,
  12943. .stepper-button-minus + .stepper-button,
  12944. .stepper-button-plus + .stepper-button,
  12945. .stepper-button + .stepper-button-minus,
  12946. .stepper-button-minus + .stepper-button-minus,
  12947. .stepper-button-plus + .stepper-button-minus,
  12948. .stepper-button + .stepper-button-plus,
  12949. .stepper-button-minus + .stepper-button-plus,
  12950. .stepper-button-plus + .stepper-button-plus {
  12951. border-left: none;
  12952. }
  12953. .stepper-button-plus,
  12954. .stepper-button-minus {
  12955. -webkit-user-select: none;
  12956. -moz-user-select: none;
  12957. user-select: none;
  12958. }
  12959. .stepper-button-plus:after,
  12960. .stepper-button-minus:after,
  12961. .stepper-button-plus:before,
  12962. .stepper-button-minus:before {
  12963. content: '';
  12964. position: absolute;
  12965. left: 50%;
  12966. top: 50%;
  12967. transform: translate(-50%, -50%);
  12968. background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
  12969. border-radius: 2px;
  12970. }
  12971. .stepper-button-plus:after,
  12972. .stepper-button-minus:after {
  12973. width: 15px;
  12974. height: 2px;
  12975. }
  12976. .stepper-button-plus:before {
  12977. height: 15px;
  12978. width: 2px;
  12979. }
  12980. .stepper-value {
  12981. display: flex;
  12982. align-content: center;
  12983. align-items: center;
  12984. justify-content: center;
  12985. }
  12986. .stepper-input-wrap,
  12987. .stepper-value {
  12988. flex-shrink: 1;
  12989. text-align: center;
  12990. border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  12991. border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
  12992. }
  12993. .stepper .stepper-input-wrap input,
  12994. .stepper-value {
  12995. width: 45px;
  12996. color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
  12997. font-size: var(--f7-stepper-value-font-size);
  12998. font-weight: var(--f7-stepper-value-font-weight);
  12999. text-align: center;
  13000. }
  13001. .stepper .stepper-input-wrap input {
  13002. height: 100%;
  13003. }
  13004. .stepper-round,
  13005. .ios .stepper-round-ios,
  13006. .md .stepper-round-md,
  13007. .aurora .stepper-round-aurora {
  13008. --f7-stepper-border-radius: var(--f7-stepper-height);
  13009. }
  13010. .stepper-fill,
  13011. .ios .stepper-fill-ios,
  13012. .md .stepper-fill-md,
  13013. .aurora .stepper-fill-aurora {
  13014. --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
  13015. --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
  13016. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  13017. }
  13018. .stepper-fill .stepper-button + .stepper-button,
  13019. .ios .stepper-fill-ios .stepper-button + .stepper-button,
  13020. .md .stepper-fill-md .stepper-button + .stepper-button,
  13021. .aurora .stepper-fill-aurora .stepper-button + .stepper-button,
  13022. .stepper-raised .stepper-button + .stepper-button,
  13023. .ios .stepper-raised-ios .stepper-button + .stepper-button,
  13024. .md .stepper-raised-md .stepper-button + .stepper-button,
  13025. .aurora .stepper-raised-aurora .stepper-button + .stepper-button,
  13026. .stepper-fill .stepper-button-minus + .stepper-button-plus,
  13027. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
  13028. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
  13029. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
  13030. .stepper-raised .stepper-button-minus + .stepper-button-plus,
  13031. .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
  13032. .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
  13033. .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
  13034. border-left: 1px solid rgba(0, 0, 0, 0.1);
  13035. }
  13036. .stepper-fill .stepper-button + .stepper-button.active-state,
  13037. .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
  13038. .md .stepper-fill-md .stepper-button + .stepper-button.active-state,
  13039. .aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
  13040. .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
  13041. .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
  13042. .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
  13043. .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
  13044. border-left-color: var(--f7-stepper-button-pressed-bg-color);
  13045. }
  13046. .stepper-raised:not(.stepper-fill) .stepper-input-wrap,
  13047. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
  13048. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
  13049. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
  13050. .stepper-raised:not(.stepper-fill) .stepper-value,
  13051. .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
  13052. .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
  13053. .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
  13054. border-left: 1px solid rgba(0, 0, 0, 0.1);
  13055. border-right: 1px solid rgba(0, 0, 0, 0.1);
  13056. }
  13057. .stepper-large,
  13058. .ios .stepper-large-ios,
  13059. .md .stepper-large-md,
  13060. .aurora .stepper-large-aurora {
  13061. --f7-stepper-height: var(--f7-stepper-large-height);
  13062. }
  13063. .stepper-small,
  13064. .ios .stepper-small-ios,
  13065. .md .stepper-small-md,
  13066. .aurora .stepper-small-aurora {
  13067. --f7-stepper-border-width: var(--f7-stepper-small-border-width);
  13068. --f7-stepper-height: var(--f7-stepper-small-height);
  13069. }
  13070. .ios .stepper-fill.stepper-small-ios,
  13071. .ios .stepper-fill.stepper-small {
  13072. --f7-stepper-button-pressed-bg-color: transparent;
  13073. --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
  13074. }
  13075. .stepper-raised,
  13076. .ios .stepper-raised-ios,
  13077. .md .stepper-raised-md,
  13078. .aurora .stepper-raised-aurora {
  13079. --f7-stepper-border-width: 0;
  13080. box-shadow: var(--f7-stepper-raised-box-shadow);
  13081. }
  13082. .ios .stepper-button .f7-icons,
  13083. .ios .stepper-button-minus .f7-icons,
  13084. .ios .stepper-button-plus .f7-icons {
  13085. font-size: 22px;
  13086. }
  13087. .ios .stepper-fill,
  13088. .ios .stepper-fill-ios {
  13089. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
  13090. }
  13091. .ios .stepper-small.stepper-raised,
  13092. .ios .stepper-small-ios.stepper-raised,
  13093. .ios .stepper-small.stepper-raised-ios,
  13094. .ios .stepper-small-ios.stepper-raised-ios {
  13095. --f7-stepper-border-width: 0px;
  13096. }
  13097. .ios .stepper-small .stepper-button,
  13098. .ios .stepper-small-ios .stepper-button,
  13099. .ios .stepper-small .stepper-button-minus,
  13100. .ios .stepper-small-ios .stepper-button-minus,
  13101. .ios .stepper-small .stepper-button-plus,
  13102. .ios .stepper-small-ios .stepper-button-plus {
  13103. transition-duration: 200ms;
  13104. }
  13105. .ios .stepper-small .stepper-button.active-state:after,
  13106. .ios .stepper-small-ios .stepper-button.active-state:after,
  13107. .ios .stepper-small .stepper-button-minus.active-state:after,
  13108. .ios .stepper-small-ios .stepper-button-minus.active-state:after,
  13109. .ios .stepper-small .stepper-button-plus.active-state:after,
  13110. .ios .stepper-small-ios .stepper-button-plus.active-state:after,
  13111. .ios .stepper-small .stepper-button.active-state:before,
  13112. .ios .stepper-small-ios .stepper-button.active-state:before,
  13113. .ios .stepper-small .stepper-button-minus.active-state:before,
  13114. .ios .stepper-small-ios .stepper-button-minus.active-state:before,
  13115. .ios .stepper-small .stepper-button-plus.active-state:before,
  13116. .ios .stepper-small-ios .stepper-button-plus.active-state:before {
  13117. transition-duration: 200ms;
  13118. background-color: var(--f7-theme-color);
  13119. }
  13120. .md .stepper-button,
  13121. .md .stepper-button-minus,
  13122. .md .stepper-button-plus {
  13123. transition-duration: 300ms;
  13124. transform: translate3d(0, 0, 0);
  13125. overflow: hidden;
  13126. }
  13127. .md .stepper-fill,
  13128. .md .stepper-fill-md {
  13129. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  13130. }
  13131. .aurora .stepper-button,
  13132. .aurora .stepper-button-minus,
  13133. .aurora .stepper-button-plus {
  13134. transition-duration: 100ms;
  13135. transform: translate3d(0, 0, 0);
  13136. overflow: hidden;
  13137. }
  13138. .aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
  13139. .aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
  13140. .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
  13141. background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
  13142. }
  13143. .aurora .stepper-fill,
  13144. .aurora .stepper-fill-aurora {
  13145. --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
  13146. --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
  13147. }
  13148. /* === Smart Select === */
  13149. .smart-select :root {
  13150. /*
  13151. --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  13152. --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  13153. */
  13154. }
  13155. .smart-select select {
  13156. display: none;
  13157. }
  13158. .smart-select .item-after {
  13159. max-width: 70%;
  13160. overflow: hidden;
  13161. text-overflow: ellipsis;
  13162. position: relative;
  13163. display: block;
  13164. }
  13165. .smart-select-sheet .page,
  13166. .smart-select-sheet .sheet-modal-inner,
  13167. .smart-select-sheet .list ul {
  13168. background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
  13169. }
  13170. .smart-select-sheet .toolbar:after {
  13171. content: '';
  13172. position: absolute;
  13173. background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
  13174. display: block;
  13175. z-index: 15;
  13176. top: auto;
  13177. right: auto;
  13178. bottom: 0;
  13179. left: 0;
  13180. height: 1px;
  13181. width: 100%;
  13182. transform-origin: 50% 100%;
  13183. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  13184. }
  13185. .smart-select-sheet .toolbar:after {
  13186. display: block;
  13187. }
  13188. .smart-select-sheet .list {
  13189. margin: 0;
  13190. }
  13191. .smart-select-sheet .list ul:before,
  13192. .smart-select-sheet .list ul:after {
  13193. display: none !important;
  13194. }
  13195. .smart-select-popover .popover-inner {
  13196. max-height: 40vh;
  13197. }
  13198. /* === Grid === */
  13199. :root {
  13200. --f7-grid-gap: 16px;
  13201. --f7-grid-row-gap: 0px;
  13202. --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
  13203. }
  13204. :root .theme-dark,
  13205. :root.theme-dark {
  13206. --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
  13207. }
  13208. .row {
  13209. display: flex;
  13210. justify-content: space-between;
  13211. flex-wrap: wrap;
  13212. align-items: flex-start;
  13213. --f7-cols-per-row: 1;
  13214. }
  13215. .row + .row {
  13216. margin-top: var(--f7-grid-row-gap);
  13217. }
  13218. .row > [class*="col-"],
  13219. .row > .col {
  13220. box-sizing: border-box;
  13221. width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
  13222. }
  13223. .row > [class*="col-"].resizable,
  13224. .row > .col.resizable {
  13225. position: relative;
  13226. }
  13227. .row.resizable {
  13228. position: relative;
  13229. }
  13230. .row.no-gap {
  13231. --f7-grid-gap: 0px;
  13232. --f7-grid-row-gap: 0px;
  13233. }
  13234. .row .col-5 {
  13235. --f7-cols-per-row: 20;
  13236. }
  13237. .row .col-10 {
  13238. --f7-cols-per-row: 10;
  13239. }
  13240. .row .col-15 {
  13241. --f7-cols-per-row: 6.66666667;
  13242. }
  13243. .row .col-20 {
  13244. --f7-cols-per-row: 5;
  13245. }
  13246. .row .col-25 {
  13247. --f7-cols-per-row: 4;
  13248. }
  13249. .row .col-30 {
  13250. --f7-cols-per-row: 3.33333333;
  13251. }
  13252. .row .col-33 {
  13253. --f7-cols-per-row: 3;
  13254. }
  13255. .row .col-35 {
  13256. --f7-cols-per-row: 2.85714286;
  13257. }
  13258. .row .col-40 {
  13259. --f7-cols-per-row: 2.5;
  13260. }
  13261. .row .col-45 {
  13262. --f7-cols-per-row: 2.22222222;
  13263. }
  13264. .row .col-50 {
  13265. --f7-cols-per-row: 2;
  13266. }
  13267. .row .col-55 {
  13268. --f7-cols-per-row: 1.81818182;
  13269. }
  13270. .row .col-60 {
  13271. --f7-cols-per-row: 1.66666667;
  13272. }
  13273. .row .col-65 {
  13274. --f7-cols-per-row: 1.53846154;
  13275. }
  13276. .row .col-66 {
  13277. --f7-cols-per-row: 1.5;
  13278. }
  13279. .row .col-70 {
  13280. --f7-cols-per-row: 1.42857143;
  13281. }
  13282. .row .col-75 {
  13283. --f7-cols-per-row: 1.33333333;
  13284. }
  13285. .row .col-80 {
  13286. --f7-cols-per-row: 1.25;
  13287. }
  13288. .row .col-85 {
  13289. --f7-cols-per-row: 1.17647059;
  13290. }
  13291. .row .col-90 {
  13292. --f7-cols-per-row: 1.11111111;
  13293. }
  13294. .row .col-95 {
  13295. --f7-cols-per-row: 1.05263158;
  13296. }
  13297. .row .col-100 {
  13298. --f7-cols-per-row: 1;
  13299. }
  13300. .row .col:nth-last-of-type(1),
  13301. .row .col:nth-last-of-type(1) ~ .col {
  13302. --f7-cols-per-row: 1;
  13303. }
  13304. .row .col:nth-last-of-type(2),
  13305. .row .col:nth-last-of-type(2) ~ .col {
  13306. --f7-cols-per-row: 2;
  13307. }
  13308. .row .col:nth-last-of-type(3),
  13309. .row .col:nth-last-of-type(3) ~ .col {
  13310. --f7-cols-per-row: 3;
  13311. }
  13312. .row .col:nth-last-of-type(4),
  13313. .row .col:nth-last-of-type(4) ~ .col {
  13314. --f7-cols-per-row: 4;
  13315. }
  13316. .row .col:nth-last-of-type(5),
  13317. .row .col:nth-last-of-type(5) ~ .col {
  13318. --f7-cols-per-row: 5;
  13319. }
  13320. .row .col:nth-last-of-type(6),
  13321. .row .col:nth-last-of-type(6) ~ .col {
  13322. --f7-cols-per-row: 6;
  13323. }
  13324. .row .col:nth-last-of-type(7),
  13325. .row .col:nth-last-of-type(7) ~ .col {
  13326. --f7-cols-per-row: 7;
  13327. }
  13328. .row .col:nth-last-of-type(8),
  13329. .row .col:nth-last-of-type(8) ~ .col {
  13330. --f7-cols-per-row: 8;
  13331. }
  13332. .row .col:nth-last-of-type(9),
  13333. .row .col:nth-last-of-type(9) ~ .col {
  13334. --f7-cols-per-row: 9;
  13335. }
  13336. .row .col:nth-last-of-type(10),
  13337. .row .col:nth-last-of-type(10) ~ .col {
  13338. --f7-cols-per-row: 10;
  13339. }
  13340. .row .col:nth-last-of-type(11),
  13341. .row .col:nth-last-of-type(11) ~ .col {
  13342. --f7-cols-per-row: 11;
  13343. }
  13344. .row .col:nth-last-of-type(12),
  13345. .row .col:nth-last-of-type(12) ~ .col {
  13346. --f7-cols-per-row: 12;
  13347. }
  13348. .row .col:nth-last-of-type(13),
  13349. .row .col:nth-last-of-type(13) ~ .col {
  13350. --f7-cols-per-row: 13;
  13351. }
  13352. .row .col:nth-last-of-type(14),
  13353. .row .col:nth-last-of-type(14) ~ .col {
  13354. --f7-cols-per-row: 14;
  13355. }
  13356. .row .col:nth-last-of-type(15),
  13357. .row .col:nth-last-of-type(15) ~ .col {
  13358. --f7-cols-per-row: 15;
  13359. }
  13360. .row .col:nth-last-of-type(16),
  13361. .row .col:nth-last-of-type(16) ~ .col {
  13362. --f7-cols-per-row: 16;
  13363. }
  13364. .row .col:nth-last-of-type(17),
  13365. .row .col:nth-last-of-type(17) ~ .col {
  13366. --f7-cols-per-row: 17;
  13367. }
  13368. .row .col:nth-last-of-type(18),
  13369. .row .col:nth-last-of-type(18) ~ .col {
  13370. --f7-cols-per-row: 18;
  13371. }
  13372. .row .col:nth-last-of-type(19),
  13373. .row .col:nth-last-of-type(19) ~ .col {
  13374. --f7-cols-per-row: 19;
  13375. }
  13376. .row .col:nth-last-of-type(20),
  13377. .row .col:nth-last-of-type(20) ~ .col {
  13378. --f7-cols-per-row: 20;
  13379. }
  13380. .row .col:nth-last-of-type(21),
  13381. .row .col:nth-last-of-type(21) ~ .col {
  13382. --f7-cols-per-row: 21;
  13383. }
  13384. .row .col:nth-last-of-type(22),
  13385. .row .col:nth-last-of-type(22) ~ .col {
  13386. --f7-cols-per-row: 22;
  13387. }
  13388. @media (min-width: 480px) {
  13389. .row .xsmall-5 {
  13390. --f7-cols-per-row: 20;
  13391. }
  13392. .row .xsmall-10 {
  13393. --f7-cols-per-row: 10;
  13394. }
  13395. .row .xsmall-15 {
  13396. --f7-cols-per-row: 6.66666667;
  13397. }
  13398. .row .xsmall-20 {
  13399. --f7-cols-per-row: 5;
  13400. }
  13401. .row .xsmall-25 {
  13402. --f7-cols-per-row: 4;
  13403. }
  13404. .row .xsmall-30 {
  13405. --f7-cols-per-row: 3.33333333;
  13406. }
  13407. .row .xsmall-33 {
  13408. --f7-cols-per-row: 3;
  13409. }
  13410. .row .xsmall-35 {
  13411. --f7-cols-per-row: 2.85714286;
  13412. }
  13413. .row .xsmall-40 {
  13414. --f7-cols-per-row: 2.5;
  13415. }
  13416. .row .xsmall-45 {
  13417. --f7-cols-per-row: 2.22222222;
  13418. }
  13419. .row .xsmall-50 {
  13420. --f7-cols-per-row: 2;
  13421. }
  13422. .row .xsmall-55 {
  13423. --f7-cols-per-row: 1.81818182;
  13424. }
  13425. .row .xsmall-60 {
  13426. --f7-cols-per-row: 1.66666667;
  13427. }
  13428. .row .xsmall-65 {
  13429. --f7-cols-per-row: 1.53846154;
  13430. }
  13431. .row .xsmall-66 {
  13432. --f7-cols-per-row: 1.5;
  13433. }
  13434. .row .xsmall-70 {
  13435. --f7-cols-per-row: 1.42857143;
  13436. }
  13437. .row .xsmall-75 {
  13438. --f7-cols-per-row: 1.33333333;
  13439. }
  13440. .row .xsmall-80 {
  13441. --f7-cols-per-row: 1.25;
  13442. }
  13443. .row .xsmall-85 {
  13444. --f7-cols-per-row: 1.17647059;
  13445. }
  13446. .row .xsmall-90 {
  13447. --f7-cols-per-row: 1.11111111;
  13448. }
  13449. .row .xsmall-95 {
  13450. --f7-cols-per-row: 1.05263158;
  13451. }
  13452. .row .xsmall-100 {
  13453. --f7-cols-per-row: 1;
  13454. }
  13455. .row .xsmall-auto:nth-last-of-type(1),
  13456. .row .xsmall-auto:nth-last-of-type(1) ~ .xsmall-auto {
  13457. --f7-cols-per-row: 1;
  13458. }
  13459. .row .xsmall-auto:nth-last-of-type(2),
  13460. .row .xsmall-auto:nth-last-of-type(2) ~ .xsmall-auto {
  13461. --f7-cols-per-row: 2;
  13462. }
  13463. .row .xsmall-auto:nth-last-of-type(3),
  13464. .row .xsmall-auto:nth-last-of-type(3) ~ .xsmall-auto {
  13465. --f7-cols-per-row: 3;
  13466. }
  13467. .row .xsmall-auto:nth-last-of-type(4),
  13468. .row .xsmall-auto:nth-last-of-type(4) ~ .xsmall-auto {
  13469. --f7-cols-per-row: 4;
  13470. }
  13471. .row .xsmall-auto:nth-last-of-type(5),
  13472. .row .xsmall-auto:nth-last-of-type(5) ~ .xsmall-auto {
  13473. --f7-cols-per-row: 5;
  13474. }
  13475. .row .xsmall-auto:nth-last-of-type(6),
  13476. .row .xsmall-auto:nth-last-of-type(6) ~ .xsmall-auto {
  13477. --f7-cols-per-row: 6;
  13478. }
  13479. .row .xsmall-auto:nth-last-of-type(7),
  13480. .row .xsmall-auto:nth-last-of-type(7) ~ .xsmall-auto {
  13481. --f7-cols-per-row: 7;
  13482. }
  13483. .row .xsmall-auto:nth-last-of-type(8),
  13484. .row .xsmall-auto:nth-last-of-type(8) ~ .xsmall-auto {
  13485. --f7-cols-per-row: 8;
  13486. }
  13487. .row .xsmall-auto:nth-last-of-type(9),
  13488. .row .xsmall-auto:nth-last-of-type(9) ~ .xsmall-auto {
  13489. --f7-cols-per-row: 9;
  13490. }
  13491. .row .xsmall-auto:nth-last-of-type(10),
  13492. .row .xsmall-auto:nth-last-of-type(10) ~ .xsmall-auto {
  13493. --f7-cols-per-row: 10;
  13494. }
  13495. .row .xsmall-auto:nth-last-of-type(11),
  13496. .row .xsmall-auto:nth-last-of-type(11) ~ .xsmall-auto {
  13497. --f7-cols-per-row: 11;
  13498. }
  13499. .row .xsmall-auto:nth-last-of-type(12),
  13500. .row .xsmall-auto:nth-last-of-type(12) ~ .xsmall-auto {
  13501. --f7-cols-per-row: 12;
  13502. }
  13503. .row .xsmall-auto:nth-last-of-type(13),
  13504. .row .xsmall-auto:nth-last-of-type(13) ~ .xsmall-auto {
  13505. --f7-cols-per-row: 13;
  13506. }
  13507. .row .xsmall-auto:nth-last-of-type(14),
  13508. .row .xsmall-auto:nth-last-of-type(14) ~ .xsmall-auto {
  13509. --f7-cols-per-row: 14;
  13510. }
  13511. .row .xsmall-auto:nth-last-of-type(15),
  13512. .row .xsmall-auto:nth-last-of-type(15) ~ .xsmall-auto {
  13513. --f7-cols-per-row: 15;
  13514. }
  13515. .row .xsmall-auto:nth-last-of-type(16),
  13516. .row .xsmall-auto:nth-last-of-type(16) ~ .xsmall-auto {
  13517. --f7-cols-per-row: 16;
  13518. }
  13519. .row .xsmall-auto:nth-last-of-type(17),
  13520. .row .xsmall-auto:nth-last-of-type(17) ~ .xsmall-auto {
  13521. --f7-cols-per-row: 17;
  13522. }
  13523. .row .xsmall-auto:nth-last-of-type(18),
  13524. .row .xsmall-auto:nth-last-of-type(18) ~ .xsmall-auto {
  13525. --f7-cols-per-row: 18;
  13526. }
  13527. .row .xsmall-auto:nth-last-of-type(19),
  13528. .row .xsmall-auto:nth-last-of-type(19) ~ .xsmall-auto {
  13529. --f7-cols-per-row: 19;
  13530. }
  13531. .row .xsmall-auto:nth-last-of-type(20),
  13532. .row .xsmall-auto:nth-last-of-type(20) ~ .xsmall-auto {
  13533. --f7-cols-per-row: 20;
  13534. }
  13535. .row .xsmall-auto:nth-last-of-type(21),
  13536. .row .xsmall-auto:nth-last-of-type(21) ~ .xsmall-auto {
  13537. --f7-cols-per-row: 21;
  13538. }
  13539. .row .xsmall-auto:nth-last-of-type(22),
  13540. .row .xsmall-auto:nth-last-of-type(22) ~ .xsmall-auto {
  13541. --f7-cols-per-row: 22;
  13542. }
  13543. }
  13544. @media (min-width: 568px) {
  13545. .row .small-5 {
  13546. --f7-cols-per-row: 20;
  13547. }
  13548. .row .small-10 {
  13549. --f7-cols-per-row: 10;
  13550. }
  13551. .row .small-15 {
  13552. --f7-cols-per-row: 6.66666667;
  13553. }
  13554. .row .small-20 {
  13555. --f7-cols-per-row: 5;
  13556. }
  13557. .row .small-25 {
  13558. --f7-cols-per-row: 4;
  13559. }
  13560. .row .small-30 {
  13561. --f7-cols-per-row: 3.33333333;
  13562. }
  13563. .row .small-33 {
  13564. --f7-cols-per-row: 3;
  13565. }
  13566. .row .small-35 {
  13567. --f7-cols-per-row: 2.85714286;
  13568. }
  13569. .row .small-40 {
  13570. --f7-cols-per-row: 2.5;
  13571. }
  13572. .row .small-45 {
  13573. --f7-cols-per-row: 2.22222222;
  13574. }
  13575. .row .small-50 {
  13576. --f7-cols-per-row: 2;
  13577. }
  13578. .row .small-55 {
  13579. --f7-cols-per-row: 1.81818182;
  13580. }
  13581. .row .small-60 {
  13582. --f7-cols-per-row: 1.66666667;
  13583. }
  13584. .row .small-65 {
  13585. --f7-cols-per-row: 1.53846154;
  13586. }
  13587. .row .small-66 {
  13588. --f7-cols-per-row: 1.5;
  13589. }
  13590. .row .small-70 {
  13591. --f7-cols-per-row: 1.42857143;
  13592. }
  13593. .row .small-75 {
  13594. --f7-cols-per-row: 1.33333333;
  13595. }
  13596. .row .small-80 {
  13597. --f7-cols-per-row: 1.25;
  13598. }
  13599. .row .small-85 {
  13600. --f7-cols-per-row: 1.17647059;
  13601. }
  13602. .row .small-90 {
  13603. --f7-cols-per-row: 1.11111111;
  13604. }
  13605. .row .small-95 {
  13606. --f7-cols-per-row: 1.05263158;
  13607. }
  13608. .row .small-100 {
  13609. --f7-cols-per-row: 1;
  13610. }
  13611. .row .small-auto:nth-last-of-type(1),
  13612. .row .small-auto:nth-last-of-type(1) ~ .small-auto {
  13613. --f7-cols-per-row: 1;
  13614. }
  13615. .row .small-auto:nth-last-of-type(2),
  13616. .row .small-auto:nth-last-of-type(2) ~ .small-auto {
  13617. --f7-cols-per-row: 2;
  13618. }
  13619. .row .small-auto:nth-last-of-type(3),
  13620. .row .small-auto:nth-last-of-type(3) ~ .small-auto {
  13621. --f7-cols-per-row: 3;
  13622. }
  13623. .row .small-auto:nth-last-of-type(4),
  13624. .row .small-auto:nth-last-of-type(4) ~ .small-auto {
  13625. --f7-cols-per-row: 4;
  13626. }
  13627. .row .small-auto:nth-last-of-type(5),
  13628. .row .small-auto:nth-last-of-type(5) ~ .small-auto {
  13629. --f7-cols-per-row: 5;
  13630. }
  13631. .row .small-auto:nth-last-of-type(6),
  13632. .row .small-auto:nth-last-of-type(6) ~ .small-auto {
  13633. --f7-cols-per-row: 6;
  13634. }
  13635. .row .small-auto:nth-last-of-type(7),
  13636. .row .small-auto:nth-last-of-type(7) ~ .small-auto {
  13637. --f7-cols-per-row: 7;
  13638. }
  13639. .row .small-auto:nth-last-of-type(8),
  13640. .row .small-auto:nth-last-of-type(8) ~ .small-auto {
  13641. --f7-cols-per-row: 8;
  13642. }
  13643. .row .small-auto:nth-last-of-type(9),
  13644. .row .small-auto:nth-last-of-type(9) ~ .small-auto {
  13645. --f7-cols-per-row: 9;
  13646. }
  13647. .row .small-auto:nth-last-of-type(10),
  13648. .row .small-auto:nth-last-of-type(10) ~ .small-auto {
  13649. --f7-cols-per-row: 10;
  13650. }
  13651. .row .small-auto:nth-last-of-type(11),
  13652. .row .small-auto:nth-last-of-type(11) ~ .small-auto {
  13653. --f7-cols-per-row: 11;
  13654. }
  13655. .row .small-auto:nth-last-of-type(12),
  13656. .row .small-auto:nth-last-of-type(12) ~ .small-auto {
  13657. --f7-cols-per-row: 12;
  13658. }
  13659. .row .small-auto:nth-last-of-type(13),
  13660. .row .small-auto:nth-last-of-type(13) ~ .small-auto {
  13661. --f7-cols-per-row: 13;
  13662. }
  13663. .row .small-auto:nth-last-of-type(14),
  13664. .row .small-auto:nth-last-of-type(14) ~ .small-auto {
  13665. --f7-cols-per-row: 14;
  13666. }
  13667. .row .small-auto:nth-last-of-type(15),
  13668. .row .small-auto:nth-last-of-type(15) ~ .small-auto {
  13669. --f7-cols-per-row: 15;
  13670. }
  13671. .row .small-auto:nth-last-of-type(16),
  13672. .row .small-auto:nth-last-of-type(16) ~ .small-auto {
  13673. --f7-cols-per-row: 16;
  13674. }
  13675. .row .small-auto:nth-last-of-type(17),
  13676. .row .small-auto:nth-last-of-type(17) ~ .small-auto {
  13677. --f7-cols-per-row: 17;
  13678. }
  13679. .row .small-auto:nth-last-of-type(18),
  13680. .row .small-auto:nth-last-of-type(18) ~ .small-auto {
  13681. --f7-cols-per-row: 18;
  13682. }
  13683. .row .small-auto:nth-last-of-type(19),
  13684. .row .small-auto:nth-last-of-type(19) ~ .small-auto {
  13685. --f7-cols-per-row: 19;
  13686. }
  13687. .row .small-auto:nth-last-of-type(20),
  13688. .row .small-auto:nth-last-of-type(20) ~ .small-auto {
  13689. --f7-cols-per-row: 20;
  13690. }
  13691. .row .small-auto:nth-last-of-type(21),
  13692. .row .small-auto:nth-last-of-type(21) ~ .small-auto {
  13693. --f7-cols-per-row: 21;
  13694. }
  13695. .row .small-auto:nth-last-of-type(22),
  13696. .row .small-auto:nth-last-of-type(22) ~ .small-auto {
  13697. --f7-cols-per-row: 22;
  13698. }
  13699. }
  13700. @media (min-width: 768px) {
  13701. .row .medium-5 {
  13702. --f7-cols-per-row: 20;
  13703. }
  13704. .row .medium-10 {
  13705. --f7-cols-per-row: 10;
  13706. }
  13707. .row .medium-15 {
  13708. --f7-cols-per-row: 6.66666667;
  13709. }
  13710. .row .medium-20 {
  13711. --f7-cols-per-row: 5;
  13712. }
  13713. .row .medium-25 {
  13714. --f7-cols-per-row: 4;
  13715. }
  13716. .row .medium-30 {
  13717. --f7-cols-per-row: 3.33333333;
  13718. }
  13719. .row .medium-33 {
  13720. --f7-cols-per-row: 3;
  13721. }
  13722. .row .medium-35 {
  13723. --f7-cols-per-row: 2.85714286;
  13724. }
  13725. .row .medium-40 {
  13726. --f7-cols-per-row: 2.5;
  13727. }
  13728. .row .medium-45 {
  13729. --f7-cols-per-row: 2.22222222;
  13730. }
  13731. .row .medium-50 {
  13732. --f7-cols-per-row: 2;
  13733. }
  13734. .row .medium-55 {
  13735. --f7-cols-per-row: 1.81818182;
  13736. }
  13737. .row .medium-60 {
  13738. --f7-cols-per-row: 1.66666667;
  13739. }
  13740. .row .medium-65 {
  13741. --f7-cols-per-row: 1.53846154;
  13742. }
  13743. .row .medium-66 {
  13744. --f7-cols-per-row: 1.5;
  13745. }
  13746. .row .medium-70 {
  13747. --f7-cols-per-row: 1.42857143;
  13748. }
  13749. .row .medium-75 {
  13750. --f7-cols-per-row: 1.33333333;
  13751. }
  13752. .row .medium-80 {
  13753. --f7-cols-per-row: 1.25;
  13754. }
  13755. .row .medium-85 {
  13756. --f7-cols-per-row: 1.17647059;
  13757. }
  13758. .row .medium-90 {
  13759. --f7-cols-per-row: 1.11111111;
  13760. }
  13761. .row .medium-95 {
  13762. --f7-cols-per-row: 1.05263158;
  13763. }
  13764. .row .medium-100 {
  13765. --f7-cols-per-row: 1;
  13766. }
  13767. .row .medium-auto:nth-last-of-type(1),
  13768. .row .medium-auto:nth-last-of-type(1) ~ .medium-auto {
  13769. --f7-cols-per-row: 1;
  13770. }
  13771. .row .medium-auto:nth-last-of-type(2),
  13772. .row .medium-auto:nth-last-of-type(2) ~ .medium-auto {
  13773. --f7-cols-per-row: 2;
  13774. }
  13775. .row .medium-auto:nth-last-of-type(3),
  13776. .row .medium-auto:nth-last-of-type(3) ~ .medium-auto {
  13777. --f7-cols-per-row: 3;
  13778. }
  13779. .row .medium-auto:nth-last-of-type(4),
  13780. .row .medium-auto:nth-last-of-type(4) ~ .medium-auto {
  13781. --f7-cols-per-row: 4;
  13782. }
  13783. .row .medium-auto:nth-last-of-type(5),
  13784. .row .medium-auto:nth-last-of-type(5) ~ .medium-auto {
  13785. --f7-cols-per-row: 5;
  13786. }
  13787. .row .medium-auto:nth-last-of-type(6),
  13788. .row .medium-auto:nth-last-of-type(6) ~ .medium-auto {
  13789. --f7-cols-per-row: 6;
  13790. }
  13791. .row .medium-auto:nth-last-of-type(7),
  13792. .row .medium-auto:nth-last-of-type(7) ~ .medium-auto {
  13793. --f7-cols-per-row: 7;
  13794. }
  13795. .row .medium-auto:nth-last-of-type(8),
  13796. .row .medium-auto:nth-last-of-type(8) ~ .medium-auto {
  13797. --f7-cols-per-row: 8;
  13798. }
  13799. .row .medium-auto:nth-last-of-type(9),
  13800. .row .medium-auto:nth-last-of-type(9) ~ .medium-auto {
  13801. --f7-cols-per-row: 9;
  13802. }
  13803. .row .medium-auto:nth-last-of-type(10),
  13804. .row .medium-auto:nth-last-of-type(10) ~ .medium-auto {
  13805. --f7-cols-per-row: 10;
  13806. }
  13807. .row .medium-auto:nth-last-of-type(11),
  13808. .row .medium-auto:nth-last-of-type(11) ~ .medium-auto {
  13809. --f7-cols-per-row: 11;
  13810. }
  13811. .row .medium-auto:nth-last-of-type(12),
  13812. .row .medium-auto:nth-last-of-type(12) ~ .medium-auto {
  13813. --f7-cols-per-row: 12;
  13814. }
  13815. .row .medium-auto:nth-last-of-type(13),
  13816. .row .medium-auto:nth-last-of-type(13) ~ .medium-auto {
  13817. --f7-cols-per-row: 13;
  13818. }
  13819. .row .medium-auto:nth-last-of-type(14),
  13820. .row .medium-auto:nth-last-of-type(14) ~ .medium-auto {
  13821. --f7-cols-per-row: 14;
  13822. }
  13823. .row .medium-auto:nth-last-of-type(15),
  13824. .row .medium-auto:nth-last-of-type(15) ~ .medium-auto {
  13825. --f7-cols-per-row: 15;
  13826. }
  13827. .row .medium-auto:nth-last-of-type(16),
  13828. .row .medium-auto:nth-last-of-type(16) ~ .medium-auto {
  13829. --f7-cols-per-row: 16;
  13830. }
  13831. .row .medium-auto:nth-last-of-type(17),
  13832. .row .medium-auto:nth-last-of-type(17) ~ .medium-auto {
  13833. --f7-cols-per-row: 17;
  13834. }
  13835. .row .medium-auto:nth-last-of-type(18),
  13836. .row .medium-auto:nth-last-of-type(18) ~ .medium-auto {
  13837. --f7-cols-per-row: 18;
  13838. }
  13839. .row .medium-auto:nth-last-of-type(19),
  13840. .row .medium-auto:nth-last-of-type(19) ~ .medium-auto {
  13841. --f7-cols-per-row: 19;
  13842. }
  13843. .row .medium-auto:nth-last-of-type(20),
  13844. .row .medium-auto:nth-last-of-type(20) ~ .medium-auto {
  13845. --f7-cols-per-row: 20;
  13846. }
  13847. .row .medium-auto:nth-last-of-type(21),
  13848. .row .medium-auto:nth-last-of-type(21) ~ .medium-auto {
  13849. --f7-cols-per-row: 21;
  13850. }
  13851. .row .medium-auto:nth-last-of-type(22),
  13852. .row .medium-auto:nth-last-of-type(22) ~ .medium-auto {
  13853. --f7-cols-per-row: 22;
  13854. }
  13855. }
  13856. @media (min-width: 1024px) {
  13857. .row .large-5 {
  13858. --f7-cols-per-row: 20;
  13859. }
  13860. .row .large-10 {
  13861. --f7-cols-per-row: 10;
  13862. }
  13863. .row .large-15 {
  13864. --f7-cols-per-row: 6.66666667;
  13865. }
  13866. .row .large-20 {
  13867. --f7-cols-per-row: 5;
  13868. }
  13869. .row .large-25 {
  13870. --f7-cols-per-row: 4;
  13871. }
  13872. .row .large-30 {
  13873. --f7-cols-per-row: 3.33333333;
  13874. }
  13875. .row .large-33 {
  13876. --f7-cols-per-row: 3;
  13877. }
  13878. .row .large-35 {
  13879. --f7-cols-per-row: 2.85714286;
  13880. }
  13881. .row .large-40 {
  13882. --f7-cols-per-row: 2.5;
  13883. }
  13884. .row .large-45 {
  13885. --f7-cols-per-row: 2.22222222;
  13886. }
  13887. .row .large-50 {
  13888. --f7-cols-per-row: 2;
  13889. }
  13890. .row .large-55 {
  13891. --f7-cols-per-row: 1.81818182;
  13892. }
  13893. .row .large-60 {
  13894. --f7-cols-per-row: 1.66666667;
  13895. }
  13896. .row .large-65 {
  13897. --f7-cols-per-row: 1.53846154;
  13898. }
  13899. .row .large-66 {
  13900. --f7-cols-per-row: 1.5;
  13901. }
  13902. .row .large-70 {
  13903. --f7-cols-per-row: 1.42857143;
  13904. }
  13905. .row .large-75 {
  13906. --f7-cols-per-row: 1.33333333;
  13907. }
  13908. .row .large-80 {
  13909. --f7-cols-per-row: 1.25;
  13910. }
  13911. .row .large-85 {
  13912. --f7-cols-per-row: 1.17647059;
  13913. }
  13914. .row .large-90 {
  13915. --f7-cols-per-row: 1.11111111;
  13916. }
  13917. .row .large-95 {
  13918. --f7-cols-per-row: 1.05263158;
  13919. }
  13920. .row .large-100 {
  13921. --f7-cols-per-row: 1;
  13922. }
  13923. .row .large-auto:nth-last-of-type(1),
  13924. .row .large-auto:nth-last-of-type(1) ~ .large-auto {
  13925. --f7-cols-per-row: 1;
  13926. }
  13927. .row .large-auto:nth-last-of-type(2),
  13928. .row .large-auto:nth-last-of-type(2) ~ .large-auto {
  13929. --f7-cols-per-row: 2;
  13930. }
  13931. .row .large-auto:nth-last-of-type(3),
  13932. .row .large-auto:nth-last-of-type(3) ~ .large-auto {
  13933. --f7-cols-per-row: 3;
  13934. }
  13935. .row .large-auto:nth-last-of-type(4),
  13936. .row .large-auto:nth-last-of-type(4) ~ .large-auto {
  13937. --f7-cols-per-row: 4;
  13938. }
  13939. .row .large-auto:nth-last-of-type(5),
  13940. .row .large-auto:nth-last-of-type(5) ~ .large-auto {
  13941. --f7-cols-per-row: 5;
  13942. }
  13943. .row .large-auto:nth-last-of-type(6),
  13944. .row .large-auto:nth-last-of-type(6) ~ .large-auto {
  13945. --f7-cols-per-row: 6;
  13946. }
  13947. .row .large-auto:nth-last-of-type(7),
  13948. .row .large-auto:nth-last-of-type(7) ~ .large-auto {
  13949. --f7-cols-per-row: 7;
  13950. }
  13951. .row .large-auto:nth-last-of-type(8),
  13952. .row .large-auto:nth-last-of-type(8) ~ .large-auto {
  13953. --f7-cols-per-row: 8;
  13954. }
  13955. .row .large-auto:nth-last-of-type(9),
  13956. .row .large-auto:nth-last-of-type(9) ~ .large-auto {
  13957. --f7-cols-per-row: 9;
  13958. }
  13959. .row .large-auto:nth-last-of-type(10),
  13960. .row .large-auto:nth-last-of-type(10) ~ .large-auto {
  13961. --f7-cols-per-row: 10;
  13962. }
  13963. .row .large-auto:nth-last-of-type(11),
  13964. .row .large-auto:nth-last-of-type(11) ~ .large-auto {
  13965. --f7-cols-per-row: 11;
  13966. }
  13967. .row .large-auto:nth-last-of-type(12),
  13968. .row .large-auto:nth-last-of-type(12) ~ .large-auto {
  13969. --f7-cols-per-row: 12;
  13970. }
  13971. .row .large-auto:nth-last-of-type(13),
  13972. .row .large-auto:nth-last-of-type(13) ~ .large-auto {
  13973. --f7-cols-per-row: 13;
  13974. }
  13975. .row .large-auto:nth-last-of-type(14),
  13976. .row .large-auto:nth-last-of-type(14) ~ .large-auto {
  13977. --f7-cols-per-row: 14;
  13978. }
  13979. .row .large-auto:nth-last-of-type(15),
  13980. .row .large-auto:nth-last-of-type(15) ~ .large-auto {
  13981. --f7-cols-per-row: 15;
  13982. }
  13983. .row .large-auto:nth-last-of-type(16),
  13984. .row .large-auto:nth-last-of-type(16) ~ .large-auto {
  13985. --f7-cols-per-row: 16;
  13986. }
  13987. .row .large-auto:nth-last-of-type(17),
  13988. .row .large-auto:nth-last-of-type(17) ~ .large-auto {
  13989. --f7-cols-per-row: 17;
  13990. }
  13991. .row .large-auto:nth-last-of-type(18),
  13992. .row .large-auto:nth-last-of-type(18) ~ .large-auto {
  13993. --f7-cols-per-row: 18;
  13994. }
  13995. .row .large-auto:nth-last-of-type(19),
  13996. .row .large-auto:nth-last-of-type(19) ~ .large-auto {
  13997. --f7-cols-per-row: 19;
  13998. }
  13999. .row .large-auto:nth-last-of-type(20),
  14000. .row .large-auto:nth-last-of-type(20) ~ .large-auto {
  14001. --f7-cols-per-row: 20;
  14002. }
  14003. .row .large-auto:nth-last-of-type(21),
  14004. .row .large-auto:nth-last-of-type(21) ~ .large-auto {
  14005. --f7-cols-per-row: 21;
  14006. }
  14007. .row .large-auto:nth-last-of-type(22),
  14008. .row .large-auto:nth-last-of-type(22) ~ .large-auto {
  14009. --f7-cols-per-row: 22;
  14010. }
  14011. }
  14012. @media (min-width: 1200px) {
  14013. .row .xlarge-5 {
  14014. --f7-cols-per-row: 20;
  14015. }
  14016. .row .xlarge-10 {
  14017. --f7-cols-per-row: 10;
  14018. }
  14019. .row .xlarge-15 {
  14020. --f7-cols-per-row: 6.66666667;
  14021. }
  14022. .row .xlarge-20 {
  14023. --f7-cols-per-row: 5;
  14024. }
  14025. .row .xlarge-25 {
  14026. --f7-cols-per-row: 4;
  14027. }
  14028. .row .xlarge-30 {
  14029. --f7-cols-per-row: 3.33333333;
  14030. }
  14031. .row .xlarge-33 {
  14032. --f7-cols-per-row: 3;
  14033. }
  14034. .row .xlarge-35 {
  14035. --f7-cols-per-row: 2.85714286;
  14036. }
  14037. .row .xlarge-40 {
  14038. --f7-cols-per-row: 2.5;
  14039. }
  14040. .row .xlarge-45 {
  14041. --f7-cols-per-row: 2.22222222;
  14042. }
  14043. .row .xlarge-50 {
  14044. --f7-cols-per-row: 2;
  14045. }
  14046. .row .xlarge-55 {
  14047. --f7-cols-per-row: 1.81818182;
  14048. }
  14049. .row .xlarge-60 {
  14050. --f7-cols-per-row: 1.66666667;
  14051. }
  14052. .row .xlarge-65 {
  14053. --f7-cols-per-row: 1.53846154;
  14054. }
  14055. .row .xlarge-66 {
  14056. --f7-cols-per-row: 1.5;
  14057. }
  14058. .row .xlarge-70 {
  14059. --f7-cols-per-row: 1.42857143;
  14060. }
  14061. .row .xlarge-75 {
  14062. --f7-cols-per-row: 1.33333333;
  14063. }
  14064. .row .xlarge-80 {
  14065. --f7-cols-per-row: 1.25;
  14066. }
  14067. .row .xlarge-85 {
  14068. --f7-cols-per-row: 1.17647059;
  14069. }
  14070. .row .xlarge-90 {
  14071. --f7-cols-per-row: 1.11111111;
  14072. }
  14073. .row .xlarge-95 {
  14074. --f7-cols-per-row: 1.05263158;
  14075. }
  14076. .row .xlarge-100 {
  14077. --f7-cols-per-row: 1;
  14078. }
  14079. .row .xlarge-auto:nth-last-of-type(1),
  14080. .row .xlarge-auto:nth-last-of-type(1) ~ .xlarge-auto {
  14081. --f7-cols-per-row: 1;
  14082. }
  14083. .row .xlarge-auto:nth-last-of-type(2),
  14084. .row .xlarge-auto:nth-last-of-type(2) ~ .xlarge-auto {
  14085. --f7-cols-per-row: 2;
  14086. }
  14087. .row .xlarge-auto:nth-last-of-type(3),
  14088. .row .xlarge-auto:nth-last-of-type(3) ~ .xlarge-auto {
  14089. --f7-cols-per-row: 3;
  14090. }
  14091. .row .xlarge-auto:nth-last-of-type(4),
  14092. .row .xlarge-auto:nth-last-of-type(4) ~ .xlarge-auto {
  14093. --f7-cols-per-row: 4;
  14094. }
  14095. .row .xlarge-auto:nth-last-of-type(5),
  14096. .row .xlarge-auto:nth-last-of-type(5) ~ .xlarge-auto {
  14097. --f7-cols-per-row: 5;
  14098. }
  14099. .row .xlarge-auto:nth-last-of-type(6),
  14100. .row .xlarge-auto:nth-last-of-type(6) ~ .xlarge-auto {
  14101. --f7-cols-per-row: 6;
  14102. }
  14103. .row .xlarge-auto:nth-last-of-type(7),
  14104. .row .xlarge-auto:nth-last-of-type(7) ~ .xlarge-auto {
  14105. --f7-cols-per-row: 7;
  14106. }
  14107. .row .xlarge-auto:nth-last-of-type(8),
  14108. .row .xlarge-auto:nth-last-of-type(8) ~ .xlarge-auto {
  14109. --f7-cols-per-row: 8;
  14110. }
  14111. .row .xlarge-auto:nth-last-of-type(9),
  14112. .row .xlarge-auto:nth-last-of-type(9) ~ .xlarge-auto {
  14113. --f7-cols-per-row: 9;
  14114. }
  14115. .row .xlarge-auto:nth-last-of-type(10),
  14116. .row .xlarge-auto:nth-last-of-type(10) ~ .xlarge-auto {
  14117. --f7-cols-per-row: 10;
  14118. }
  14119. .row .xlarge-auto:nth-last-of-type(11),
  14120. .row .xlarge-auto:nth-last-of-type(11) ~ .xlarge-auto {
  14121. --f7-cols-per-row: 11;
  14122. }
  14123. .row .xlarge-auto:nth-last-of-type(12),
  14124. .row .xlarge-auto:nth-last-of-type(12) ~ .xlarge-auto {
  14125. --f7-cols-per-row: 12;
  14126. }
  14127. .row .xlarge-auto:nth-last-of-type(13),
  14128. .row .xlarge-auto:nth-last-of-type(13) ~ .xlarge-auto {
  14129. --f7-cols-per-row: 13;
  14130. }
  14131. .row .xlarge-auto:nth-last-of-type(14),
  14132. .row .xlarge-auto:nth-last-of-type(14) ~ .xlarge-auto {
  14133. --f7-cols-per-row: 14;
  14134. }
  14135. .row .xlarge-auto:nth-last-of-type(15),
  14136. .row .xlarge-auto:nth-last-of-type(15) ~ .xlarge-auto {
  14137. --f7-cols-per-row: 15;
  14138. }
  14139. .row .xlarge-auto:nth-last-of-type(16),
  14140. .row .xlarge-auto:nth-last-of-type(16) ~ .xlarge-auto {
  14141. --f7-cols-per-row: 16;
  14142. }
  14143. .row .xlarge-auto:nth-last-of-type(17),
  14144. .row .xlarge-auto:nth-last-of-type(17) ~ .xlarge-auto {
  14145. --f7-cols-per-row: 17;
  14146. }
  14147. .row .xlarge-auto:nth-last-of-type(18),
  14148. .row .xlarge-auto:nth-last-of-type(18) ~ .xlarge-auto {
  14149. --f7-cols-per-row: 18;
  14150. }
  14151. .row .xlarge-auto:nth-last-of-type(19),
  14152. .row .xlarge-auto:nth-last-of-type(19) ~ .xlarge-auto {
  14153. --f7-cols-per-row: 19;
  14154. }
  14155. .row .xlarge-auto:nth-last-of-type(20),
  14156. .row .xlarge-auto:nth-last-of-type(20) ~ .xlarge-auto {
  14157. --f7-cols-per-row: 20;
  14158. }
  14159. .row .xlarge-auto:nth-last-of-type(21),
  14160. .row .xlarge-auto:nth-last-of-type(21) ~ .xlarge-auto {
  14161. --f7-cols-per-row: 21;
  14162. }
  14163. .row .xlarge-auto:nth-last-of-type(22),
  14164. .row .xlarge-auto:nth-last-of-type(22) ~ .xlarge-auto {
  14165. --f7-cols-per-row: 22;
  14166. }
  14167. }
  14168. .row .resize-handler {
  14169. position: absolute;
  14170. -webkit-user-select: none;
  14171. -moz-user-select: none;
  14172. user-select: none;
  14173. z-index: 100;
  14174. }
  14175. .row .resize-handler:before {
  14176. content: '';
  14177. position: absolute;
  14178. }
  14179. .row .resize-handler:after {
  14180. content: '';
  14181. position: absolute;
  14182. border-radius: 4px;
  14183. background: var(--f7-grid-resize-handler-bg-color);
  14184. }
  14185. .row > .resize-handler {
  14186. width: 100%;
  14187. height: var(--f7-grid-row-gap);
  14188. left: 0;
  14189. top: 100%;
  14190. cursor: row-resize;
  14191. }
  14192. .row > .resize-handler:before {
  14193. left: 0%;
  14194. top: 50%;
  14195. height: 12px;
  14196. width: 100%;
  14197. min-height: var(--f7-grid-row-gap);
  14198. transform: translateY(-50%);
  14199. }
  14200. .row > .resize-handler:after {
  14201. height: 4px;
  14202. margin-top: -2px;
  14203. width: 80%;
  14204. max-width: 20px;
  14205. left: 50%;
  14206. top: 50%;
  14207. transform: translateX(-50%);
  14208. }
  14209. [class*="col-"] > .resize-handler,
  14210. .col > .resize-handler {
  14211. width: var(--f7-grid-gap);
  14212. left: 100%;
  14213. top: 0;
  14214. height: 100%;
  14215. cursor: col-resize;
  14216. }
  14217. [class*="col-"] > .resize-handler:before,
  14218. .col > .resize-handler:before {
  14219. left: 50%;
  14220. top: 0;
  14221. height: 100%;
  14222. width: 12px;
  14223. min-width: var(--f7-grid-gap);
  14224. transform: translateX(-50%);
  14225. }
  14226. [class*="col-"] > .resize-handler:after,
  14227. .col > .resize-handler:after {
  14228. width: 4px;
  14229. margin-left: -2px;
  14230. height: 80%;
  14231. max-height: 20px;
  14232. border-radius: 4px;
  14233. left: 50%;
  14234. top: 50%;
  14235. transform: translateY(-50%);
  14236. }
  14237. .row:last-child > .resize-handler,
  14238. .row:last-of-type > .resize-handler,
  14239. .row [class*="col-"]:last-child > .resize-handler,
  14240. .row [class*="col-"]:last-of-type > .resize-handler,
  14241. .row .col:last-child > .resize-handler,
  14242. .row .col:last-of-type > .resize-handler {
  14243. display: none;
  14244. }
  14245. /* === Calendar/Datepicker === */
  14246. :root {
  14247. --f7-calendar-height: 340px;
  14248. --f7-calendar-sheet-landscape-height: 220px;
  14249. --f7-calendar-popover-width: 320px;
  14250. --f7-calendar-popover-height: 320px;
  14251. --f7-calendar-modal-height: 420px;
  14252. --f7-calendar-modal-max-width: 380px;
  14253. --f7-calendar-modal-border-radius: 4px;
  14254. /*
  14255. --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  14256. --f7-calendar-header-link-color: var(--f7-bars-link-color);
  14257. --f7-calendar-header-text-color: var(--f7-bars-text-color);
  14258. --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  14259. --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  14260. --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  14261. --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  14262. --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
  14263. --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
  14264. */
  14265. --f7-calendar-footer-padding: 0 8px;
  14266. --f7-calendar-week-header-font-size: 11px;
  14267. --f7-calendar-selected-text-color: #fff;
  14268. /*
  14269. --f7-calendar-selected-bg-color: var(--f7-theme-color);
  14270. */
  14271. --f7-calendar-prev-next-text-color: #b8b8b8;
  14272. --f7-calendar-disabled-text-color: #d4d4d4;
  14273. --f7-calendar-event-dot-size: 4px;
  14274. /*
  14275. --f7-calendar-event-bg-color: var(--f7-theme-color);
  14276. */
  14277. /*
  14278. --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
  14279. */
  14280. --f7-calendar-day-text-color: #000;
  14281. --f7-calendar-sheet-bg-color: #fff;
  14282. --f7-calendar-modal-bg-color: #fff;
  14283. --f7-calendar-picker-bg-color: #fff;
  14284. --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  14285. --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  14286. }
  14287. :root .theme-dark,
  14288. :root.theme-dark {
  14289. --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  14290. --f7-calendar-modal-bg-color: #121212;
  14291. --f7-calendar-sheet-bg-color: #121212;
  14292. --f7-calendar-picker-bg-color: #1c1c1d;
  14293. --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  14294. --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  14295. }
  14296. .ios {
  14297. --f7-calendar-sheet-border-color: #929499;
  14298. --f7-calendar-header-height: 44px;
  14299. --f7-calendar-header-font-size: 17px;
  14300. --f7-calendar-header-font-weight: 600;
  14301. --f7-calendar-header-padding: 0 8px;
  14302. --f7-calendar-footer-height: 44px;
  14303. --f7-calendar-footer-font-size: 17px;
  14304. --f7-calendar-week-header-height: 18px;
  14305. --f7-calendar-day-font-size: 15px;
  14306. --f7-calendar-day-size: 30px;
  14307. --f7-calendar-picker-font-size: 17px;
  14308. --f7-calendar-time-selector-font-size: 17px;
  14309. --f7-calendar-row-border-color: rgba(0, 0, 0, 0.25);
  14310. --f7-calendar-today-text-color: #000;
  14311. --f7-calendar-today-bg-color: #e3e3e3;
  14312. }
  14313. .ios .theme-dark,
  14314. .ios.theme-dark {
  14315. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  14316. --f7-calendar-day-text-color: #fff;
  14317. --f7-calendar-today-text-color: #fff;
  14318. --f7-calendar-today-bg-color: #333;
  14319. }
  14320. .md {
  14321. --f7-calendar-sheet-border-color: #ccc;
  14322. --f7-calendar-header-height: 56px;
  14323. --f7-calendar-header-font-size: 20px;
  14324. --f7-calendar-header-font-weight: 400;
  14325. --f7-calendar-header-padding: 0 24px;
  14326. --f7-calendar-footer-height: 48px;
  14327. --f7-calendar-footer-font-size: 14px;
  14328. --f7-calendar-week-header-height: 24px;
  14329. --f7-calendar-row-border-color: transparent;
  14330. --f7-calendar-day-font-size: 14px;
  14331. /*
  14332. --f7-calendar-today-text-color: var(--f7-theme-color);
  14333. */
  14334. --f7-calendar-today-bg-color: none;
  14335. --f7-calendar-day-size: 32px;
  14336. --f7-calendar-picker-font-size: 14px;
  14337. --f7-calendar-time-selector-font-size: 14px;
  14338. }
  14339. .md .theme-dark,
  14340. .md.theme-dark {
  14341. --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
  14342. }
  14343. .aurora {
  14344. --f7-calendar-sheet-border-color: #ccc;
  14345. --f7-calendar-header-height: 38px;
  14346. --f7-calendar-header-font-size: 14px;
  14347. --f7-calendar-header-font-weight: 600;
  14348. --f7-calendar-header-padding: 0 8px;
  14349. --f7-calendar-footer-height: 38px;
  14350. --f7-calendar-footer-font-size: 14px;
  14351. --f7-calendar-week-header-height: 18px;
  14352. --f7-calendar-day-font-size: 13px;
  14353. --f7-calendar-day-size: 30px;
  14354. --f7-calendar-picker-font-size: 14px;
  14355. --f7-calendar-time-selector-font-size: 14px;
  14356. --f7-calendar-row-border-color: #e3e3e3;
  14357. --f7-calendar-today-text-color: #000;
  14358. --f7-calendar-today-bg-color: #e3e3e3;
  14359. }
  14360. .aurora .theme-dark,
  14361. .aurora.theme-dark {
  14362. --f7-calendar-row-border-color: var(--f7-bars-border-color);
  14363. --f7-calendar-day-text-color: #fff;
  14364. --f7-calendar-today-text-color: #fff;
  14365. --f7-calendar-today-bg-color: #333;
  14366. }
  14367. .calendar {
  14368. overflow: hidden;
  14369. height: var(--f7-calendar-height);
  14370. width: 100%;
  14371. display: flex;
  14372. flex-direction: column;
  14373. }
  14374. .calendar.modal-in {
  14375. display: flex;
  14376. }
  14377. @media (orientation: landscape) and (max-height: 415px) {
  14378. .calendar.calendar-sheet {
  14379. height: var(--f7-calendar-sheet-landscape-height);
  14380. }
  14381. .calendar.calendar-modal {
  14382. height: calc(100vh - var(--f7-navbar-height));
  14383. }
  14384. }
  14385. .calendar.calendar-inline,
  14386. .calendar.calendar-popover .calendar {
  14387. position: relative;
  14388. }
  14389. .calendar-sheet {
  14390. --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
  14391. background: var(--f7-calendar-sheet-bg-color);
  14392. padding-bottom: var(--f7-safe-area-bottom);
  14393. height: calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom));
  14394. }
  14395. .calendar-sheet:before {
  14396. z-index: 600;
  14397. }
  14398. .calendar-sheet .toolbar:before,
  14399. .calendar-modal .toolbar:before,
  14400. .calendar-popover .toolbar:before {
  14401. display: none;
  14402. }
  14403. .calendar-popover {
  14404. width: var(--f7-calendar-popover-width);
  14405. }
  14406. .calendar-popover .toolbar-top,
  14407. .calendar-popover .calendar-header {
  14408. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  14409. }
  14410. .calendar-popover .calendar-header + .toolbar-top {
  14411. border-radius: 0;
  14412. }
  14413. .calendar-popover .toolbar-bottom,
  14414. .calendar-popover .calendar-footer {
  14415. border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
  14416. }
  14417. .calendar-popover .calendar {
  14418. height: var(--f7-calendar-popover-height);
  14419. position: relative;
  14420. z-index: 1;
  14421. }
  14422. .calendar-popover .calendar-month-picker,
  14423. .calendar-popover .calendar-year-picker,
  14424. .calendar-popover .calendar-time-picker {
  14425. border-radius: var(--f7-popover-border-radius);
  14426. }
  14427. .calendar-header {
  14428. width: 100%;
  14429. position: relative;
  14430. overflow: hidden;
  14431. flex-shrink: 0;
  14432. white-space: nowrap;
  14433. text-overflow: ellipsis;
  14434. box-sizing: border-box;
  14435. padding: var(--f7-calendar-header-padding);
  14436. background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
  14437. color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
  14438. height: var(--f7-calendar-header-height);
  14439. line-height: var(--f7-calendar-header-height);
  14440. font-size: var(--f7-calendar-header-font-size);
  14441. font-weight: var(--f7-calendar-header-font-weight);
  14442. }
  14443. .calendar-header a {
  14444. color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14445. }
  14446. .calendar-footer {
  14447. width: 100%;
  14448. flex-shrink: 0;
  14449. padding: var(--f7-calendar-footer-padding);
  14450. background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
  14451. color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
  14452. height: var(--f7-calendar-footer-height);
  14453. font-size: var(--f7-calendar-header-font-size);
  14454. display: flex;
  14455. justify-content: flex-end;
  14456. box-sizing: border-box;
  14457. align-items: center;
  14458. position: relative;
  14459. }
  14460. .calendar-footer a {
  14461. color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  14462. }
  14463. .calendar-footer:before {
  14464. content: '';
  14465. position: absolute;
  14466. background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
  14467. display: block;
  14468. z-index: 15;
  14469. top: 0;
  14470. right: auto;
  14471. bottom: auto;
  14472. left: 0;
  14473. height: 1px;
  14474. width: 100%;
  14475. transform-origin: 50% 0%;
  14476. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14477. }
  14478. .calendar-modal {
  14479. position: absolute;
  14480. height: var(--f7-calendar-modal-height);
  14481. overflow: hidden;
  14482. top: 50%;
  14483. left: 50%;
  14484. min-width: 300px;
  14485. max-width: var(--f7-calendar-modal-max-width);
  14486. transform: translate3d(-50%, 100vh, 0);
  14487. transition-property: transform;
  14488. display: flex;
  14489. z-index: 13500;
  14490. background: var(--f7-calendar-modal-bg-color);
  14491. width: 90%;
  14492. border-radius: var(--f7-calendar-modal-border-radius);
  14493. box-shadow: var(--f7-elevation-24);
  14494. }
  14495. .calendar-modal.modal-in,
  14496. .calendar-modal.modal-out {
  14497. transition-duration: 400ms;
  14498. }
  14499. .calendar-modal.modal-in {
  14500. transform: translate3d(-50%, -50%, 0);
  14501. }
  14502. .calendar-modal.modal-out {
  14503. transform: translate3d(-50%, 100vh, 0);
  14504. }
  14505. .calendar-week-header {
  14506. display: flex;
  14507. box-sizing: border-box;
  14508. position: relative;
  14509. font-size: var(--f7-calendar-week-header-font-size);
  14510. background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
  14511. color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
  14512. height: var(--f7-calendar-week-header-height);
  14513. padding-left: var(--f7-safe-area-left);
  14514. padding-right: var(--f7-safe-area-right);
  14515. }
  14516. .calendar-week-header .calendar-week-day {
  14517. flex-shrink: 1;
  14518. width: calc(100% / 7);
  14519. text-align: center;
  14520. line-height: var(--f7-calendar-week-header-height);
  14521. }
  14522. .calendar-months {
  14523. width: 100%;
  14524. height: 100%;
  14525. overflow: hidden;
  14526. position: relative;
  14527. flex-shrink: 10;
  14528. }
  14529. .calendar-months-wrapper {
  14530. position: relative;
  14531. width: 100%;
  14532. height: 100%;
  14533. transition: 300ms;
  14534. }
  14535. .calendar-month {
  14536. display: flex;
  14537. flex-direction: column;
  14538. width: 100%;
  14539. height: 100%;
  14540. position: absolute;
  14541. left: 0;
  14542. top: 0;
  14543. }
  14544. .calendar-row {
  14545. height: 16.66666667%;
  14546. height: calc(100% / 6);
  14547. display: flex;
  14548. flex-shrink: 1;
  14549. width: 100%;
  14550. position: relative;
  14551. box-sizing: border-box;
  14552. padding-left: var(--f7-safe-area-left);
  14553. padding-right: var(--f7-safe-area-right);
  14554. }
  14555. .calendar-row:before {
  14556. content: '';
  14557. position: absolute;
  14558. background-color: var(--f7-calendar-row-border-color);
  14559. display: block;
  14560. z-index: 15;
  14561. top: 0;
  14562. right: auto;
  14563. bottom: auto;
  14564. left: 0;
  14565. height: 1px;
  14566. width: 100%;
  14567. transform-origin: 50% 0%;
  14568. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14569. }
  14570. .calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
  14571. .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
  14572. display: none !important;
  14573. }
  14574. .calendar-day {
  14575. flex-shrink: 1;
  14576. display: flex;
  14577. justify-content: center;
  14578. align-items: center;
  14579. box-sizing: border-box;
  14580. width: 14.28571429%;
  14581. width: calc(100% / 7);
  14582. text-align: center;
  14583. cursor: pointer;
  14584. z-index: 20;
  14585. color: var(--f7-calendar-day-text-color);
  14586. height: 100%;
  14587. font-size: var(--f7-calendar-day-font-size);
  14588. }
  14589. .calendar-day.calendar-day-today .calendar-day-number {
  14590. color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
  14591. background-color: var(--f7-calendar-today-bg-color);
  14592. }
  14593. .calendar-day.calendar-day-prev,
  14594. .calendar-day.calendar-day-next {
  14595. color: var(--f7-calendar-prev-next-text-color);
  14596. }
  14597. .calendar-day.calendar-day-disabled {
  14598. color: var(--f7-calendar-disabled-text-color);
  14599. cursor: auto;
  14600. }
  14601. .calendar-day.calendar-day-selected .calendar-day-number {
  14602. color: var(--f7-calendar-selected-text-color);
  14603. background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
  14604. }
  14605. .calendar-day .calendar-day-number {
  14606. display: inline-block;
  14607. border-radius: 50%;
  14608. position: relative;
  14609. width: var(--f7-calendar-day-size);
  14610. height: var(--f7-calendar-day-size);
  14611. line-height: var(--f7-calendar-day-size);
  14612. }
  14613. .calendar-day .calendar-day-events {
  14614. position: absolute;
  14615. display: flex;
  14616. left: 0;
  14617. width: 100%;
  14618. top: 100%;
  14619. align-items: center;
  14620. justify-content: center;
  14621. margin-top: 1px;
  14622. }
  14623. .calendar-day .calendar-day-event {
  14624. width: var(--f7-calendar-event-dot-size);
  14625. height: var(--f7-calendar-event-dot-size);
  14626. border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
  14627. background-color: var(--f7-calendar-event-bg-color);
  14628. }
  14629. .calendar-day .calendar-day-event + .calendar-day-event {
  14630. margin-left: 2px;
  14631. }
  14632. .calendar-range .calendar-day.calendar-day-selected {
  14633. align-items: stretch;
  14634. align-content: stretch;
  14635. }
  14636. .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
  14637. width: 100%;
  14638. border-radius: 0;
  14639. height: auto;
  14640. text-align: center;
  14641. display: flex;
  14642. align-items: center;
  14643. justify-content: center;
  14644. }
  14645. .calendar-month-selector,
  14646. .calendar-year-selector {
  14647. display: flex;
  14648. justify-content: space-between;
  14649. align-items: center;
  14650. width: 50%;
  14651. max-width: 200px;
  14652. flex-shrink: 10;
  14653. margin-left: auto;
  14654. margin-right: auto;
  14655. }
  14656. .calendar-month-selector .calendar-day-number,
  14657. .calendar-year-selector .calendar-day-number {
  14658. flex-shrink: 1;
  14659. position: relative;
  14660. overflow: hidden;
  14661. text-overflow: ellipsis;
  14662. }
  14663. .calendar-month-selector a.icon-only,
  14664. .calendar-year-selector a.icon-only {
  14665. min-width: 36px;
  14666. }
  14667. .calendar-month-picker,
  14668. .calendar-year-picker,
  14669. .calendar-time-picker {
  14670. position: absolute;
  14671. width: 100%;
  14672. height: 100%;
  14673. left: 0px;
  14674. top: 0px;
  14675. background: var(--f7-calendar-picker-bg-color);
  14676. z-index: 1000;
  14677. -webkit-user-select: none;
  14678. -moz-user-select: none;
  14679. user-select: none;
  14680. }
  14681. .calendar-month-picker,
  14682. .calendar-year-picker {
  14683. flex-wrap: wrap;
  14684. font-size: var(--f7-calendar-picker-font-size);
  14685. display: flex;
  14686. }
  14687. .calendar-month-picker-item,
  14688. .calendar-year-picker-item {
  14689. display: flex;
  14690. justify-content: center;
  14691. align-items: center;
  14692. position: relative;
  14693. overflow: hidden;
  14694. cursor: pointer;
  14695. transition-duration: 100ms;
  14696. box-sizing: border-box;
  14697. }
  14698. .calendar-month-picker-item span,
  14699. .calendar-year-picker-item span {
  14700. white-space: nowrap;
  14701. text-overflow: ellipsis;
  14702. box-sizing: border-box;
  14703. position: relative;
  14704. overflow: hidden;
  14705. pointer-events: none;
  14706. }
  14707. .device-desktop.aurora .calendar-month-picker-item:hover,
  14708. .device-desktop.aurora .calendar-year-picker-item:hover {
  14709. background-color: var(--f7-calendar-picker-hover-bg-color);
  14710. }
  14711. .calendar-month-picker-item.active-state,
  14712. .calendar-year-picker-item.active-state,
  14713. .device-desktop.aurora .calendar-month-picker-item.active-state,
  14714. .device-desktop.aurora .calendar-year-picker-item.active-state {
  14715. background: var(--f7-calendar-picker-pressed-bg-color);
  14716. }
  14717. .calendar-month-picker-item {
  14718. padding: 5px;
  14719. }
  14720. .calendar-month-picker-item:after {
  14721. content: '';
  14722. position: absolute;
  14723. background-color: var(--f7-calendar-row-border-color);
  14724. display: block;
  14725. z-index: 15;
  14726. top: auto;
  14727. right: auto;
  14728. bottom: 0;
  14729. left: 0;
  14730. height: 1px;
  14731. width: 100%;
  14732. transform-origin: 50% 100%;
  14733. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14734. }
  14735. .calendar-month-picker-item:before {
  14736. content: '';
  14737. position: absolute;
  14738. background-color: var(--f7-calendar-row-border-color);
  14739. display: block;
  14740. z-index: 15;
  14741. top: 0;
  14742. right: auto;
  14743. bottom: auto;
  14744. left: 0;
  14745. width: 1px;
  14746. height: 100%;
  14747. transform-origin: 0% 50%;
  14748. transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
  14749. }
  14750. .sheet-modal .calendar-month-picker-item {
  14751. width: 25%;
  14752. height: calc(100% / 3);
  14753. }
  14754. .sheet-modal .calendar-month-picker-item:nth-child(4n + 1):before {
  14755. display: none !important;
  14756. }
  14757. .sheet-modal .calendar-month-picker-item:nth-child(n + 9):after {
  14758. display: none !important;
  14759. }
  14760. .popover .calendar-month-picker-item,
  14761. .calendar-modal .calendar-month-picker-item {
  14762. width: calc(100% / 3);
  14763. height: 25%;
  14764. }
  14765. .popover .calendar-month-picker-item:nth-child(3n + 1):before,
  14766. .calendar-modal .calendar-month-picker-item:nth-child(3n + 1):before {
  14767. display: none !important;
  14768. }
  14769. .popover .calendar-month-picker-item:nth-child(n + 10):after,
  14770. .calendar-modal .calendar-month-picker-item:nth-child(n + 10):after {
  14771. display: none !important;
  14772. }
  14773. .calendar-month-picker-item-current,
  14774. .calendar-year-picker-item-current {
  14775. color: var(--f7-calendar-picker-selected-text-color, var(--f7-theme-color));
  14776. }
  14777. .calendar-year-picker {
  14778. overflow: auto;
  14779. --webkit-overflow-scrolling: touch;
  14780. }
  14781. .calendar-year-picker-item {
  14782. height: 34px;
  14783. line-height: 34px;
  14784. width: 100%;
  14785. }
  14786. .calendar-year-picker-item:after {
  14787. content: '';
  14788. position: absolute;
  14789. background-color: var(--f7-calendar-row-border-color);
  14790. display: block;
  14791. z-index: 15;
  14792. top: auto;
  14793. right: auto;
  14794. bottom: 0;
  14795. left: 0;
  14796. height: 1px;
  14797. width: 100%;
  14798. transform-origin: 50% 100%;
  14799. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14800. }
  14801. .calendar-time-selector {
  14802. flex-shrink: 0;
  14803. font-size: var(--f7-calendar-time-selector-font-size);
  14804. position: relative;
  14805. }
  14806. .calendar-time-selector:before {
  14807. content: '';
  14808. position: absolute;
  14809. background-color: var(--f7-calendar-row-border-color);
  14810. display: block;
  14811. z-index: 15;
  14812. top: 0;
  14813. right: auto;
  14814. bottom: auto;
  14815. left: 0;
  14816. height: 1px;
  14817. width: 100%;
  14818. transform-origin: 50% 0%;
  14819. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  14820. }
  14821. .calendar-time-selector a {
  14822. overflow: hidden;
  14823. position: relative;
  14824. justify-content: center;
  14825. align-items: center;
  14826. display: flex;
  14827. width: 100%;
  14828. height: 44px;
  14829. }
  14830. .calendar-time-picker {
  14831. --f7-picker-popover-height: 100%;
  14832. --f7-picker-inline-height: 100%;
  14833. --f7-picker-item-selected-text-color: var(--f7-theme-color);
  14834. }
  14835. .calendar-time-picker .toolbar {
  14836. flex-shrink: 0;
  14837. top: 0 !important;
  14838. }
  14839. .calendar-time-picker .picker {
  14840. height: 100%;
  14841. display: flex;
  14842. flex-direction: column;
  14843. }
  14844. /* === Picker === */
  14845. :root {
  14846. --f7-picker-height: 260px;
  14847. --f7-picker-inline-height: 200px;
  14848. --f7-picker-popover-height: 200px;
  14849. --f7-picker-popover-width: 280px;
  14850. --f7-picker-landscape-height: 200px;
  14851. --f7-picker-item-height: 36px;
  14852. --f7-picker-item-selected-text-color: #000;
  14853. }
  14854. :root .theme-dark,
  14855. :root.theme-dark {
  14856. --f7-picker-item-selected-text-color: #fff;
  14857. }
  14858. .ios {
  14859. --f7-picker-column-font-size: 20px;
  14860. --f7-picker-sheet-bg-color: #cfd5da;
  14861. --f7-picker-divider-text-color: #000;
  14862. --f7-picker-item-text-color: rgba(0, 0, 0, 0.45);
  14863. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.22);
  14864. }
  14865. .ios .theme-dark,
  14866. .ios.theme-dark {
  14867. --f7-picker-sheet-bg-color: #1c1c1d;
  14868. --f7-picker-divider-text-color: #fff;
  14869. --f7-picker-item-text-color: rgba(255, 255, 255, 0.55);
  14870. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  14871. }
  14872. .md {
  14873. /*
  14874. --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  14875. */
  14876. --f7-picker-column-font-size: 20px;
  14877. --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
  14878. --f7-picker-item-text-color: rgba(0, 0, 0, 0.54);
  14879. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
  14880. }
  14881. .md .theme-dark,
  14882. .md.theme-dark {
  14883. --f7-picker-item-text-color: rgba(255, 255, 255, 0.54);
  14884. --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
  14885. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
  14886. }
  14887. .aurora {
  14888. /*
  14889. --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
  14890. */
  14891. --f7-picker-column-font-size: 16px;
  14892. --f7-picker-item-height: 28px;
  14893. --f7-picker-item-text-color: #888;
  14894. --f7-picker-divider-text-color: #000;
  14895. --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
  14896. }
  14897. .aurora .theme-dark,
  14898. .aurora.theme-dark {
  14899. --f7-picker-divider-text-color: #fff;
  14900. --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
  14901. }
  14902. .picker {
  14903. width: 100%;
  14904. height: var(--f7-picker-height);
  14905. }
  14906. .picker.picker-inline {
  14907. height: var(--f7-picker-inline-height);
  14908. }
  14909. .popover .picker {
  14910. height: var(--f7-picker-popover-height);
  14911. }
  14912. @media (orientation: landscape) and (max-height: 415px) {
  14913. .picker:not(.picker-inline) {
  14914. height: var(--f7-picker-landscape-height);
  14915. }
  14916. }
  14917. .picker.sheet-modal {
  14918. background: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
  14919. }
  14920. .picker-popover {
  14921. width: var(--f7-picker-popover-width);
  14922. }
  14923. .picker-popover .toolbar {
  14924. background: none;
  14925. border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
  14926. }
  14927. .picker-popover .toolbar:before {
  14928. display: none !important;
  14929. }
  14930. .picker-popover .toolbar + .picker-columns {
  14931. height: calc(100% - var(--f7-toolbar-height));
  14932. }
  14933. .picker-columns {
  14934. display: flex;
  14935. overflow: hidden;
  14936. justify-content: center;
  14937. padding: 0;
  14938. text-align: right;
  14939. height: 100%;
  14940. position: relative;
  14941. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  14942. font-size: var(--f7-picker-column-font-size);
  14943. }
  14944. .picker-column {
  14945. position: relative;
  14946. max-height: 100%;
  14947. }
  14948. .picker-column.picker-column-first:before,
  14949. .picker-column.picker-column-last:after {
  14950. height: 100%;
  14951. width: 100vw;
  14952. position: absolute;
  14953. content: '';
  14954. top: 0;
  14955. }
  14956. .picker-column.picker-column-first:before {
  14957. right: 100%;
  14958. }
  14959. .picker-column.picker-column-last:after {
  14960. left: 100%;
  14961. }
  14962. .picker-column.picker-column-left {
  14963. text-align: left;
  14964. }
  14965. .picker-column.picker-column-center {
  14966. text-align: center;
  14967. }
  14968. .picker-column.picker-column-right {
  14969. text-align: right;
  14970. }
  14971. .picker-column.picker-column-divider {
  14972. display: flex;
  14973. align-items: center;
  14974. color: var(--f7-picker-divider-text-color);
  14975. }
  14976. .picker-items {
  14977. transition: 300ms;
  14978. transition-timing-function: ease-out;
  14979. }
  14980. .picker-item {
  14981. height: var(--f7-picker-item-height);
  14982. line-height: var(--f7-picker-item-height);
  14983. white-space: nowrap;
  14984. position: relative;
  14985. overflow: hidden;
  14986. text-overflow: ellipsis;
  14987. left: 0;
  14988. top: 0;
  14989. width: 100%;
  14990. box-sizing: border-box;
  14991. transition: 300ms;
  14992. color: var(--f7-picker-item-text-color);
  14993. cursor: pointer;
  14994. }
  14995. .picker-item span {
  14996. padding: 0 10px;
  14997. }
  14998. .picker-column-absolute .picker-item {
  14999. position: absolute;
  15000. }
  15001. .picker-item.picker-item-far {
  15002. pointer-events: none;
  15003. }
  15004. .picker-item.picker-item-selected {
  15005. color: var(--f7-picker-item-selected-text-color);
  15006. transform: translate3d(0, 0, 0) rotateX(0deg);
  15007. }
  15008. .picker-center-highlight {
  15009. height: var(--f7-picker-item-height);
  15010. box-sizing: border-box;
  15011. position: absolute;
  15012. left: 0;
  15013. width: 100%;
  15014. top: 50%;
  15015. margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
  15016. pointer-events: none;
  15017. }
  15018. .picker-center-highlight:before {
  15019. content: '';
  15020. position: absolute;
  15021. background-color: var(--f7-picker-item-selected-border-color);
  15022. display: block;
  15023. z-index: 15;
  15024. top: 0;
  15025. right: auto;
  15026. bottom: auto;
  15027. left: 0;
  15028. height: 1px;
  15029. width: 100%;
  15030. transform-origin: 50% 0%;
  15031. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15032. }
  15033. .picker-center-highlight:after {
  15034. content: '';
  15035. position: absolute;
  15036. background-color: var(--f7-picker-item-selected-border-color);
  15037. display: block;
  15038. z-index: 15;
  15039. top: auto;
  15040. right: auto;
  15041. bottom: 0;
  15042. left: 0;
  15043. height: 1px;
  15044. width: 100%;
  15045. transform-origin: 50% 100%;
  15046. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15047. }
  15048. .picker-3d .picker-columns {
  15049. overflow: hidden;
  15050. perspective: 1200px;
  15051. }
  15052. .picker-3d .picker-column,
  15053. .picker-3d .picker-items,
  15054. .picker-3d .picker-item {
  15055. transform-style: preserve-3d;
  15056. }
  15057. .picker-3d .picker-column {
  15058. overflow: visible;
  15059. }
  15060. .picker-3d .picker-item {
  15061. transform-origin: center center -110px;
  15062. -webkit-backface-visibility: hidden;
  15063. backface-visibility: hidden;
  15064. transition-timing-function: ease-out;
  15065. }
  15066. /* === Infinite === */
  15067. .infinite-scroll-preloader {
  15068. margin-left: auto;
  15069. margin-right: auto;
  15070. text-align: center;
  15071. }
  15072. .infinite-scroll-preloader.preloader {
  15073. display: block;
  15074. }
  15075. .ios .infinite-scroll-preloader {
  15076. margin-top: 35px;
  15077. margin-bottom: 35px;
  15078. }
  15079. .ios .infinite-scroll-preloader .preloader,
  15080. .ios .infinite-scroll-preloader.preloader {
  15081. width: 27px;
  15082. height: 27px;
  15083. }
  15084. .md .infinite-scroll-preloader {
  15085. margin-top: 32px;
  15086. margin-bottom: 32px;
  15087. }
  15088. .aurora .infinite-scroll-preloader {
  15089. margin-top: 15px;
  15090. margin-bottom: 15px;
  15091. }
  15092. /* === PTR === */
  15093. .ios {
  15094. --f7-ptr-preloader-size: 28px;
  15095. --f7-ptr-size: 44px;
  15096. }
  15097. .md {
  15098. --f7-ptr-preloader-size: 22px;
  15099. --f7-ptr-size: 40px;
  15100. }
  15101. .aurora {
  15102. --f7-ptr-preloader-size: 20px;
  15103. --f7-ptr-size: 38px;
  15104. }
  15105. .ptr-preloader {
  15106. position: relative;
  15107. top: var(--f7-ptr-top, 0);
  15108. height: var(--f7-ptr-size);
  15109. }
  15110. .ptr-preloader .preloader {
  15111. position: absolute;
  15112. left: 50%;
  15113. width: var(--f7-ptr-preloader-size);
  15114. height: var(--f7-ptr-preloader-size);
  15115. margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  15116. margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
  15117. top: 50%;
  15118. visibility: hidden;
  15119. }
  15120. .ptr-bottom .ptr-preloader {
  15121. top: auto;
  15122. bottom: 0;
  15123. position: fixed;
  15124. }
  15125. .ptr-with-navbar-large-transparent .ptr-preloader,
  15126. .ptr-with-navbar-transparent .ptr-preloader {
  15127. top: calc(-1 * var(--f7-page-navbar-offset, 0px) + var(--f7-safe-area-top));
  15128. }
  15129. .ios .ptr-preloader {
  15130. margin-top: calc(-1 * var(--f7-ptr-size));
  15131. width: 100%;
  15132. left: 0;
  15133. }
  15134. .ios .ptr-arrow {
  15135. position: absolute;
  15136. left: 50%;
  15137. top: 50%;
  15138. background: no-repeat center;
  15139. z-index: 10;
  15140. transform: rotate(0deg) translate3d(0, 0, 0);
  15141. transition-duration: 300ms;
  15142. transition-property: transform, opacity;
  15143. width: 12px;
  15144. height: 20px;
  15145. margin-left: -6px;
  15146. margin-top: -10px;
  15147. visibility: visible;
  15148. color: var(--f7-preloader-color);
  15149. }
  15150. .ios .ptr-arrow:after {
  15151. font-family: 'framework7-core-icons';
  15152. font-weight: normal;
  15153. font-style: normal;
  15154. line-height: 1;
  15155. letter-spacing: normal;
  15156. text-transform: none;
  15157. white-space: nowrap;
  15158. word-wrap: normal;
  15159. direction: ltr;
  15160. -webkit-font-smoothing: antialiased;
  15161. text-rendering: optimizeLegibility;
  15162. -moz-osx-font-smoothing: grayscale;
  15163. font-feature-settings: "liga";
  15164. text-align: center;
  15165. display: block;
  15166. width: 100%;
  15167. height: 100%;
  15168. font-size: 20px;
  15169. width: 12px;
  15170. height: 20px;
  15171. line-height: 20px;
  15172. font-size: 10px;
  15173. content: 'ptr_arrow_ios';
  15174. }
  15175. .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  15176. animation: none;
  15177. }
  15178. .ios .ptr-transitioning,
  15179. .ios .ptr-refreshing {
  15180. transition-duration: 300ms;
  15181. transition-property: transform;
  15182. }
  15183. .ios .ptr-refreshing {
  15184. transform: translate3d(0, var(--f7-ptr-size), 0);
  15185. }
  15186. .ios .ptr-refreshing .ptr-arrow {
  15187. visibility: hidden;
  15188. }
  15189. .ios .ptr-refreshing .ptr-preloader .preloader {
  15190. visibility: visible;
  15191. }
  15192. .ios .ptr-pull-up .ptr-arrow {
  15193. transform: rotate(180deg) translate3d(0, 0, 0);
  15194. }
  15195. .ios .ptr-no-navbar,
  15196. .ios .ptr-with-navbar-large-transparent,
  15197. .ios .ptr-with-navbar-transparent {
  15198. margin-top: calc(-1 * var(--f7-ptr-size));
  15199. height: calc(100% + var(--f7-ptr-size));
  15200. }
  15201. .ios .ptr-no-navbar .ptr-preloader,
  15202. .ios .ptr-with-navbar-large-transparent .ptr-preloader,
  15203. .ios .ptr-with-navbar-transparent .ptr-preloader {
  15204. margin-top: 0;
  15205. }
  15206. .ios .ptr-bottom .ptr-preloader {
  15207. margin-top: 0;
  15208. margin-bottom: calc(-1 * var(--f7-ptr-size));
  15209. }
  15210. .ios .ptr-bottom.ptr-transitioning > *,
  15211. .ios .ptr-bottom.ptr-refreshing > * {
  15212. transition-duration: 300ms;
  15213. transition-property: transform;
  15214. }
  15215. .ios .ptr-bottom.ptr-refreshing {
  15216. transform: none;
  15217. }
  15218. .ios .ptr-bottom.ptr-refreshing > * {
  15219. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  15220. }
  15221. .ios .ptr-bottom .ptr-arrow {
  15222. transform: rotate(180deg) translate3d(0, 0, 0);
  15223. }
  15224. .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
  15225. transform: rotate(0deg) translate3d(0, 0, 0);
  15226. }
  15227. .ios .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
  15228. .ios .ptr-with-navbar-transparent .ptr-preloader .preloader,
  15229. .ios .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
  15230. .ios .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
  15231. opacity: 0;
  15232. transition-duration: 300ms;
  15233. transition-property: transform, opacity;
  15234. }
  15235. .ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
  15236. .ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
  15237. .ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
  15238. .ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
  15239. .ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
  15240. .ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
  15241. .ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15242. .ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15243. .ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15244. .ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15245. .ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
  15246. .ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
  15247. opacity: 1;
  15248. }
  15249. .ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
  15250. .ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
  15251. .ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
  15252. .ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
  15253. opacity: 0;
  15254. transition-duration: 300ms;
  15255. }
  15256. .md {
  15257. --f7-ptr-top: -4px;
  15258. }
  15259. .md .ptr-preloader {
  15260. width: var(--f7-ptr-size);
  15261. border-radius: 50%;
  15262. background: #fff;
  15263. margin-top: calc(-1 * var(--f7-ptr-size));
  15264. z-index: 100;
  15265. box-shadow: var(--f7-elevation-1);
  15266. left: 50%;
  15267. margin-left: calc(-1 * var(--f7-ptr-size) / 2);
  15268. }
  15269. .md .ptr-preloader .preloader .preloader-inner-gap,
  15270. .md .ptr-preloader .preloader .preloader-inner-half-circle {
  15271. border-width: 3px;
  15272. }
  15273. .md .ptr-arrow {
  15274. width: 22px;
  15275. height: 22px;
  15276. box-sizing: border-box;
  15277. border: 3px solid var(--f7-preloader-color);
  15278. position: absolute;
  15279. left: 50%;
  15280. top: 50%;
  15281. margin-left: -11px;
  15282. margin-top: -11px;
  15283. border-left-color: transparent;
  15284. border-radius: 50%;
  15285. opacity: 1;
  15286. transform: rotate(150deg);
  15287. }
  15288. .md .ptr-arrow:after {
  15289. content: '';
  15290. width: 0px;
  15291. height: 0px;
  15292. position: absolute;
  15293. left: -5px;
  15294. bottom: 0px;
  15295. border-bottom-width: 6px;
  15296. border-bottom-style: solid;
  15297. border-bottom-color: inherit;
  15298. border-left: 5px solid transparent;
  15299. border-right: 5px solid transparent;
  15300. transform: rotate(-40deg);
  15301. }
  15302. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
  15303. .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
  15304. animation: none;
  15305. }
  15306. .md .ptr-refreshing .ptr-preloader .preloader,
  15307. .md .ptr-pull-up .ptr-preloader .preloader {
  15308. visibility: visible;
  15309. }
  15310. .md .ptr-refreshing .ptr-arrow,
  15311. .md .ptr-pull-up .ptr-arrow {
  15312. visibility: hidden;
  15313. }
  15314. .md .ptr-refreshing .ptr-preloader {
  15315. transform: translate3d(0, 66px, 0);
  15316. }
  15317. .md .ptr-transitioning .ptr-arrow {
  15318. transition: 300ms;
  15319. }
  15320. .md .ptr-pull-up .ptr-arrow {
  15321. transition: 400ms;
  15322. transform: rotate(620deg) !important;
  15323. opacity: 0;
  15324. }
  15325. .md .ptr-transitioning .ptr-preloader,
  15326. .md .ptr-refreshing .ptr-preloader {
  15327. transition-duration: 300ms;
  15328. transition-property: transform, opacity;
  15329. }
  15330. .md .ptr-bottom .ptr-preloader {
  15331. margin-top: 0;
  15332. margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
  15333. }
  15334. .md .ptr-bottom.ptr-refreshing .ptr-preloader {
  15335. transform: translate3d(0, -66px, 0);
  15336. }
  15337. .md .ptr-with-navbar-large-transparent .ptr-preloader,
  15338. .md .ptr-with-navbar-transparent .ptr-preloader {
  15339. opacity: 0;
  15340. }
  15341. .md .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader,
  15342. .md .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader,
  15343. .md .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader,
  15344. .md .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader,
  15345. .md .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader,
  15346. .md .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader {
  15347. opacity: 1;
  15348. }
  15349. .md .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader,
  15350. .md .ptr-with-navbar-transparent.ptr-closing .ptr-preloader {
  15351. opacity: 0;
  15352. transition-duration: 300ms;
  15353. }
  15354. .aurora .ptr-preloader {
  15355. margin-top: calc(-1 * var(--f7-ptr-size));
  15356. width: 100%;
  15357. left: 0;
  15358. }
  15359. .aurora .ptr-arrow {
  15360. position: absolute;
  15361. left: 50%;
  15362. top: 50%;
  15363. background: no-repeat center;
  15364. z-index: 10;
  15365. transform: rotate(0deg) translate3d(0, 0, 0);
  15366. transition-duration: 300ms;
  15367. transition-property: transform, opacity;
  15368. width: 12px;
  15369. height: 20px;
  15370. margin-left: -6px;
  15371. margin-top: -10px;
  15372. visibility: visible;
  15373. color: var(--f7-preloader-color);
  15374. }
  15375. .aurora .ptr-arrow:after {
  15376. font-family: 'framework7-core-icons';
  15377. font-weight: normal;
  15378. font-style: normal;
  15379. line-height: 1;
  15380. letter-spacing: normal;
  15381. text-transform: none;
  15382. white-space: nowrap;
  15383. word-wrap: normal;
  15384. direction: ltr;
  15385. -webkit-font-smoothing: antialiased;
  15386. text-rendering: optimizeLegibility;
  15387. -moz-osx-font-smoothing: grayscale;
  15388. font-feature-settings: "liga";
  15389. text-align: center;
  15390. display: block;
  15391. width: 100%;
  15392. height: 100%;
  15393. font-size: 20px;
  15394. width: 12px;
  15395. height: 20px;
  15396. line-height: 20px;
  15397. font-size: 8px;
  15398. content: 'ptr_arrow_ios';
  15399. }
  15400. .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
  15401. animation: none;
  15402. }
  15403. .aurora .ptr-transitioning,
  15404. .aurora .ptr-refreshing {
  15405. transition-duration: 300ms;
  15406. transition-property: transform;
  15407. }
  15408. .aurora .ptr-refreshing {
  15409. transform: translate3d(0, var(--f7-ptr-size), 0);
  15410. }
  15411. .aurora .ptr-refreshing .ptr-arrow {
  15412. visibility: hidden;
  15413. }
  15414. .aurora .ptr-refreshing .ptr-preloader .preloader {
  15415. visibility: visible;
  15416. }
  15417. .aurora .ptr-pull-up .ptr-arrow {
  15418. transform: rotate(180deg) translate3d(0, 0, 0);
  15419. }
  15420. .aurora .ptr-no-navbar,
  15421. .aurora .ptr-with-navbar-large-transparent,
  15422. .aurora .ptr-with-navbar-transparent {
  15423. margin-top: calc(-1 * var(--f7-ptr-size));
  15424. height: calc(100% + var(--f7-ptr-size));
  15425. }
  15426. .aurora .ptr-no-navbar .ptr-preloader,
  15427. .aurora .ptr-with-navbar-large-transparent .ptr-preloader,
  15428. .aurora .ptr-with-navbar-transparent .ptr-preloader {
  15429. margin-top: 0;
  15430. }
  15431. .aurora .ptr-bottom .ptr-preloader {
  15432. margin-top: 0;
  15433. margin-bottom: calc(-1 * var(--f7-ptr-size));
  15434. }
  15435. .aurora .ptr-bottom.ptr-transitioning > *,
  15436. .aurora .ptr-bottom.ptr-refreshing > * {
  15437. transition-duration: 300ms;
  15438. transition-property: transform;
  15439. }
  15440. .aurora .ptr-bottom.ptr-refreshing {
  15441. transform: none;
  15442. }
  15443. .aurora .ptr-bottom.ptr-refreshing > * {
  15444. transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
  15445. }
  15446. .aurora .ptr-bottom .ptr-arrow {
  15447. transform: rotate(180deg) translate3d(0, 0, 0);
  15448. }
  15449. .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
  15450. transform: rotate(0deg) translate3d(0, 0, 0);
  15451. }
  15452. .aurora .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
  15453. .aurora .ptr-with-navbar-transparent .ptr-preloader .preloader,
  15454. .aurora .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
  15455. .aurora .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
  15456. opacity: 0;
  15457. transition-duration: 300ms;
  15458. transition-property: transform, opacity;
  15459. }
  15460. .aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
  15461. .aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
  15462. .aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
  15463. .aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
  15464. .aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
  15465. .aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
  15466. .aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15467. .aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
  15468. .aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15469. .aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
  15470. .aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
  15471. .aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
  15472. opacity: 1;
  15473. }
  15474. .aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
  15475. .aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
  15476. .aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
  15477. .aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
  15478. opacity: 0;
  15479. transition-duration: 300ms;
  15480. }
  15481. /* === Images Lazy Loading === */
  15482. .lazy-loaded.lazy-fade-in {
  15483. animation: lazyFadeIn 600ms;
  15484. }
  15485. @keyframes lazyFadeIn {
  15486. from {
  15487. opacity: 0;
  15488. }
  15489. to {
  15490. opacity: 1;
  15491. }
  15492. }
  15493. /* === Data Table === */
  15494. :root {
  15495. --f7-table-head-font-size: 12px;
  15496. --f7-table-body-font-size: 14px;
  15497. --f7-table-footer-font-size: 12px;
  15498. --f7-table-input-height: 24px;
  15499. --f7-table-input-font-size: 14px;
  15500. --f7-table-collapsible-cell-padding: 16px;
  15501. --f7-table-link-icon-only-icon-size: 20px;
  15502. --f7-table-sortable-icon-color: #000;
  15503. }
  15504. :root .theme-dark,
  15505. :root.theme-dark {
  15506. --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
  15507. --f7-table-sortable-icon-color: #fff;
  15508. --f7-table-input-text-color: #fff;
  15509. }
  15510. .ios {
  15511. --f7-table-head-font-weight: 600;
  15512. --f7-table-head-cell-height: 44px;
  15513. --f7-table-head-icon-size: 18px;
  15514. --f7-table-body-cell-height: 44px;
  15515. --f7-table-cell-padding-vertical: 0px;
  15516. --f7-table-cell-padding-horizontal: 16px;
  15517. --f7-table-edge-cell-padding-horizontal: 16px;
  15518. --f7-table-label-cell-padding-horizontal: 16px;
  15519. --f7-table-checkbox-cell-width: 22px;
  15520. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  15521. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  15522. --f7-table-title-font-size: 17px;
  15523. --f7-table-title-font-weight: 600;
  15524. --f7-table-card-header-height: 64px;
  15525. --f7-table-footer-height: 44px;
  15526. --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
  15527. --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
  15528. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  15529. --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
  15530. --f7-table-input-text-color: #000;
  15531. }
  15532. .ios .theme-dark,
  15533. .ios.theme-dark {
  15534. --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
  15535. --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
  15536. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
  15537. }
  15538. .md {
  15539. --f7-table-head-font-weight: 500;
  15540. --f7-table-head-cell-height: 56px;
  15541. --f7-table-head-icon-size: 16px;
  15542. --f7-table-body-cell-height: 48px;
  15543. --f7-table-cell-padding-vertical: 0px;
  15544. --f7-table-cell-padding-horizontal: 28px;
  15545. --f7-table-edge-cell-padding-horizontal: 24px;
  15546. --f7-table-label-cell-padding-horizontal: 24px;
  15547. --f7-table-checkbox-cell-width: 18px;
  15548. --f7-table-title-font-size: 20px;
  15549. --f7-table-title-font-weight: 400;
  15550. --f7-table-card-header-height: 64px;
  15551. --f7-table-footer-height: 56px;
  15552. --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
  15553. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  15554. --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
  15555. --f7-table-selected-row-bg-color: #f5f5f5;
  15556. --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
  15557. --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
  15558. --f7-table-input-text-color: #212121;
  15559. }
  15560. .md .theme-dark,
  15561. .md.theme-dark {
  15562. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  15563. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  15564. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
  15565. --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
  15566. --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
  15567. }
  15568. .aurora {
  15569. --f7-table-link-icon-only-icon-size: 18px;
  15570. --f7-table-head-font-weight: 400;
  15571. --f7-table-head-cell-height: 32px;
  15572. --f7-table-head-icon-size: 18px;
  15573. --f7-table-body-cell-height: 32px;
  15574. --f7-table-cell-padding-vertical: 5px;
  15575. --f7-table-cell-padding-horizontal: 10px;
  15576. --f7-table-edge-cell-padding-horizontal: 16px;
  15577. --f7-table-label-cell-padding-horizontal: 16px;
  15578. --f7-table-checkbox-cell-width: 22px;
  15579. /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
  15580. /* --f7-table-actions-link-color: var(--f7-theme-color); */
  15581. --f7-table-title-font-size: 14px;
  15582. --f7-table-title-font-weight: 600;
  15583. --f7-table-card-header-height: 42px;
  15584. --f7-table-footer-height: 32px;
  15585. --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
  15586. --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
  15587. --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
  15588. --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
  15589. --f7-table-input-text-color: #000;
  15590. }
  15591. .aurora .theme-dark,
  15592. .aurora.theme-dark {
  15593. --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
  15594. --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
  15595. --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
  15596. }
  15597. .data-table {
  15598. overflow-x: auto;
  15599. }
  15600. .data-table table,
  15601. table.data-table {
  15602. width: 100%;
  15603. border: none;
  15604. padding: 0;
  15605. margin: 0;
  15606. border-collapse: collapse;
  15607. text-align: left;
  15608. }
  15609. .data-table thead th,
  15610. .data-table thead td {
  15611. font-size: var(--f7-table-head-font-size);
  15612. font-weight: var(--f7-table-head-font-weight);
  15613. overflow: hidden;
  15614. white-space: nowrap;
  15615. text-overflow: ellipsis;
  15616. line-height: 16px;
  15617. height: var(--f7-table-head-cell-height);
  15618. }
  15619. .data-table thead th:not(.sortable-cell-active),
  15620. .data-table thead td:not(.sortable-cell-active) {
  15621. color: var(--f7-table-head-text-color);
  15622. }
  15623. .data-table thead i.icon,
  15624. .data-table thead i.f7-icons,
  15625. .data-table thead i.material-icons {
  15626. vertical-align: top;
  15627. font-size: var(--f7-table-head-icon-size);
  15628. }
  15629. .data-table tbody {
  15630. font-size: var(--f7-table-body-font-size);
  15631. }
  15632. .data-table tbody th,
  15633. .data-table tbody td {
  15634. height: var(--f7-table-body-cell-height);
  15635. }
  15636. .data-table tbody tr.data-table-row-selected,
  15637. .device-desktop .data-table tbody tr:hover {
  15638. background: var(--f7-table-selected-row-bg-color);
  15639. }
  15640. .data-table tbody td:before,
  15641. .data-table tbody th:before {
  15642. content: '';
  15643. position: absolute;
  15644. background-color: var(--f7-table-cell-border-color);
  15645. display: block;
  15646. z-index: 15;
  15647. top: 0;
  15648. right: auto;
  15649. bottom: auto;
  15650. left: 0;
  15651. height: 1px;
  15652. width: 100%;
  15653. transform-origin: 50% 0%;
  15654. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15655. }
  15656. .data-table th,
  15657. .data-table td {
  15658. --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
  15659. --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
  15660. padding-top: var(--f7-table-cell-padding-vertical);
  15661. padding-bottom: var(--f7-table-cell-padding-vertical);
  15662. padding-left: var(--f7-table-cell-padding-left);
  15663. padding-right: var(--f7-table-cell-padding-right);
  15664. position: relative;
  15665. box-sizing: border-box;
  15666. }
  15667. .data-table th:first-child,
  15668. .data-table td:first-child {
  15669. --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15670. }
  15671. .data-table th:last-child,
  15672. .data-table td:last-child {
  15673. --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15674. }
  15675. .data-table th.label-cell,
  15676. .data-table td.label-cell {
  15677. --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
  15678. --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
  15679. }
  15680. .data-table th.numeric-cell,
  15681. .data-table td.numeric-cell {
  15682. text-align: right;
  15683. }
  15684. .data-table th.checkbox-cell,
  15685. .data-table td.checkbox-cell {
  15686. overflow: visible;
  15687. width: var(--f7-table-checkbox-cell-width);
  15688. }
  15689. .data-table th.checkbox-cell label + span,
  15690. .data-table td.checkbox-cell label + span {
  15691. margin-left: 8px;
  15692. }
  15693. .data-table th.checkbox-cell:first-child,
  15694. .data-table td.checkbox-cell:first-child {
  15695. padding-right: calc(var(--f7-table-cell-padding-right) / 2);
  15696. }
  15697. .data-table th.checkbox-cell:first-child + td,
  15698. .data-table td.checkbox-cell:first-child + td,
  15699. .data-table th.checkbox-cell:first-child + th,
  15700. .data-table td.checkbox-cell:first-child + th {
  15701. padding-left: calc(var(--f7-table-cell-padding-left) / 2);
  15702. }
  15703. .data-table th.checkbox-cell:last-child,
  15704. .data-table td.checkbox-cell:last-child {
  15705. padding-left: calc(var(--f7-table-cell-padding-left) / 2);
  15706. }
  15707. .data-table th.actions-cell,
  15708. .data-table td.actions-cell {
  15709. text-align: right;
  15710. white-space: nowrap;
  15711. }
  15712. .data-table th.actions-cell a.link,
  15713. .data-table td.actions-cell a.link {
  15714. color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
  15715. }
  15716. .data-table th a.icon-only,
  15717. .data-table td a.icon-only,
  15718. .card .data-table th a.icon-only,
  15719. .card .data-table td a.icon-only,
  15720. .card.data-table th a.icon-only,
  15721. .card.data-table td a.icon-only {
  15722. display: inline-block;
  15723. vertical-align: middle;
  15724. text-align: center;
  15725. font-size: 0;
  15726. min-width: 0;
  15727. }
  15728. .data-table th a.icon-only i,
  15729. .data-table td a.icon-only i,
  15730. .card .data-table th a.icon-only i,
  15731. .card .data-table td a.icon-only i,
  15732. .card.data-table th a.icon-only i,
  15733. .card.data-table td a.icon-only i {
  15734. font-size: var(--f7-table-link-icon-only-icon-size);
  15735. vertical-align: middle;
  15736. }
  15737. .data-table .sortable-cell:not(.input-cell) {
  15738. cursor: pointer;
  15739. position: relative;
  15740. }
  15741. .data-table .sortable-cell.input-cell .table-head-label {
  15742. cursor: pointer;
  15743. position: relative;
  15744. }
  15745. .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
  15746. .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
  15747. .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
  15748. .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
  15749. content: 'arrow_bottom_md';
  15750. font-family: 'framework7-core-icons';
  15751. font-weight: normal;
  15752. font-style: normal;
  15753. line-height: 1;
  15754. letter-spacing: normal;
  15755. text-transform: none;
  15756. white-space: nowrap;
  15757. word-wrap: normal;
  15758. direction: ltr;
  15759. -webkit-font-smoothing: antialiased;
  15760. text-rendering: optimizeLegibility;
  15761. -moz-osx-font-smoothing: grayscale;
  15762. font-feature-settings: "liga";
  15763. text-align: center;
  15764. display: block;
  15765. width: 100%;
  15766. height: 100%;
  15767. font-size: 20px;
  15768. display: inline-block;
  15769. vertical-align: top;
  15770. width: 16px;
  15771. height: 16px;
  15772. color: var(--f7-table-sortable-icon-color);
  15773. font-size: 13px;
  15774. line-height: 16px;
  15775. transition-duration: 300ms;
  15776. transform: rotate(0);
  15777. opacity: 0;
  15778. }
  15779. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
  15780. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
  15781. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
  15782. .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
  15783. opacity: 0.54;
  15784. }
  15785. .data-table .sortable-cell.sortable-cell-active:after,
  15786. .data-table .sortable-cell.sortable-cell-active .table-head-label:after,
  15787. .data-table .sortable-cell.sortable-cell-active:before,
  15788. .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
  15789. opacity: 0.87 !important;
  15790. }
  15791. .data-table .sortable-cell.sortable-desc:after,
  15792. .data-table .sortable-cell.sortable-desc:after,
  15793. .data-table .table-head-label:after,
  15794. .data-table .sortable-cell.sortable-desc:before,
  15795. .data-table .sortable-cell.sortable-desc:before,
  15796. .data-table .table-head-label:before {
  15797. transform: rotate(180deg) !important;
  15798. }
  15799. .data-table.card .card-header,
  15800. .card .data-table .card-header,
  15801. .data-table.card .card-footer,
  15802. .card .data-table .card-footer {
  15803. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15804. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15805. }
  15806. .data-table.card .card-header,
  15807. .card .data-table .card-header {
  15808. min-height: var(--f7-table-card-header-height);
  15809. }
  15810. .data-table.card .card-content,
  15811. .card .data-table .card-content {
  15812. overflow-x: auto;
  15813. }
  15814. .data-table.card .card-footer,
  15815. .card .data-table .card-footer {
  15816. min-height: var(--f7-table-footer-height);
  15817. }
  15818. .data-table .data-table-title {
  15819. font-size: var(--f7-table-title-font-size);
  15820. font-weight: var(--f7-table-title-font-weight);
  15821. }
  15822. .data-table .data-table-links,
  15823. .data-table .data-table-actions {
  15824. display: flex;
  15825. }
  15826. .data-table .data-table-links .button {
  15827. min-width: 64px;
  15828. }
  15829. .data-table .data-table-actions {
  15830. margin-left: auto;
  15831. align-items: center;
  15832. }
  15833. .data-table .data-table-actions a.link {
  15834. color: var(--f7-table-actions-link-color, var(--f7-theme-color));
  15835. min-width: 0;
  15836. }
  15837. .data-table .data-table-actions a.link.icon-only {
  15838. line-height: 1;
  15839. justify-content: center;
  15840. padding: 0;
  15841. }
  15842. .data-table .data-table-header,
  15843. .data-table .data-table-header-selected {
  15844. display: flex;
  15845. justify-content: space-between;
  15846. align-items: center;
  15847. width: 100%;
  15848. }
  15849. .data-table .card-header > .data-table-header,
  15850. .data-table .card-header > .data-table-header-selected {
  15851. padding-top: var(--f7-card-header-padding-vertical);
  15852. padding-bottom: var(--f7-card-header-padding-vertical);
  15853. height: 100%;
  15854. padding-left: var(--f7-table-edge-cell-padding-horizontal);
  15855. padding-right: var(--f7-table-edge-cell-padding-horizontal);
  15856. margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  15857. margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
  15858. }
  15859. .data-table .data-table-header-selected {
  15860. background: rgba(var(--f7-theme-color-rgb), 0.1);
  15861. display: none;
  15862. }
  15863. .data-table.data-table-has-checked .data-table-header {
  15864. display: none;
  15865. }
  15866. .data-table.data-table-has-checked .data-table-header-selected {
  15867. display: flex;
  15868. }
  15869. .data-table .data-table-title-selected {
  15870. font-size: 14px;
  15871. color: var(--f7-theme-color);
  15872. }
  15873. .data-table .data-table-footer {
  15874. display: flex;
  15875. align-items: center;
  15876. box-sizing: border-box;
  15877. position: relative;
  15878. font-size: var(--f7-table-footer-font-size);
  15879. overflow: hidden;
  15880. min-height: var(--f7-table-footer-height);
  15881. color: var(--f7-table-footer-text-color);
  15882. justify-content: flex-end;
  15883. }
  15884. .data-table .data-table-footer:before {
  15885. content: '';
  15886. position: absolute;
  15887. background-color: var(--f7-table-cell-border-color);
  15888. display: block;
  15889. z-index: 15;
  15890. top: 0;
  15891. right: auto;
  15892. bottom: auto;
  15893. left: 0;
  15894. height: 1px;
  15895. width: 100%;
  15896. transform-origin: 50% 0%;
  15897. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15898. }
  15899. .data-table .data-table-rows-select,
  15900. .data-table .data-table-pagination {
  15901. display: flex;
  15902. align-items: center;
  15903. }
  15904. .data-table .input-cell {
  15905. padding-top: 8px;
  15906. padding-bottom: 8px;
  15907. height: auto;
  15908. vertical-align: top;
  15909. }
  15910. .data-table .input-cell .table-head-label + .input {
  15911. margin-top: 4px;
  15912. }
  15913. .data-table .input-cell .input {
  15914. height: var(--f7-table-input-height);
  15915. }
  15916. .data-table .input-cell .input input,
  15917. .data-table .input-cell .input textarea,
  15918. .data-table .input-cell .input select {
  15919. height: var(--f7-table-input-height);
  15920. color: var(--f7-table-input-text-color);
  15921. font-size: var(--f7-table-input-font-size);
  15922. }
  15923. @media (max-width: 480px) and (orientation: portrait) {
  15924. .data-table.data-table-collapsible thead {
  15925. display: none;
  15926. }
  15927. .data-table.data-table-collapsible tbody,
  15928. .data-table.data-table-collapsible tr,
  15929. .data-table.data-table-collapsible td {
  15930. display: block;
  15931. }
  15932. .data-table.data-table-collapsible tr {
  15933. position: relative;
  15934. }
  15935. .data-table.data-table-collapsible tr:before {
  15936. content: '';
  15937. position: absolute;
  15938. background-color: var(--f7-table-cell-border-color);
  15939. display: block;
  15940. z-index: 15;
  15941. top: 0;
  15942. right: auto;
  15943. bottom: auto;
  15944. left: 0;
  15945. height: 1px;
  15946. width: 100%;
  15947. transform-origin: 50% 0%;
  15948. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  15949. }
  15950. .data-table.data-table-collapsible tr:hover {
  15951. background-color: inherit;
  15952. }
  15953. .data-table.data-table-collapsible td {
  15954. --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
  15955. --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
  15956. height: auto;
  15957. min-height: var(--f7-table-body-cell-height);
  15958. display: flex;
  15959. align-content: center;
  15960. align-items: center;
  15961. justify-content: flex-start;
  15962. text-align: left;
  15963. }
  15964. .data-table.data-table-collapsible td:before {
  15965. display: none !important;
  15966. }
  15967. .data-table.data-table-collapsible td:not(.checkbox-cell):before {
  15968. width: 40%;
  15969. display: block !important;
  15970. content: attr(data-collapsible-title);
  15971. position: relative;
  15972. height: auto;
  15973. background: none !important;
  15974. transform: none !important;
  15975. font-size: var(--f7-table-head-font-size);
  15976. font-weight: var(--f7-table-head-font-weight);
  15977. color: var(--f7-table-head-text-color);
  15978. margin-right: 16px;
  15979. flex-shrink: 0;
  15980. }
  15981. .data-table.data-table-collapsible td.checkbox-cell {
  15982. position: absolute;
  15983. top: 0;
  15984. left: 0;
  15985. }
  15986. .data-table.data-table-collapsible td.checkbox-cell + td {
  15987. padding-left: 16px;
  15988. }
  15989. .data-table.data-table-collapsible td.checkbox-cell ~ td {
  15990. margin-left: 32px;
  15991. }
  15992. }
  15993. .data-table .xsmall-only,
  15994. .data-table .xsmall-landscape-only {
  15995. display: none;
  15996. }
  15997. @media (min-width: 480px) {
  15998. .data-table .xsmall-only {
  15999. display: table-cell;
  16000. }
  16001. }
  16002. @media (min-width: 480px) and (orientation: landscape) {
  16003. .data-table .xsmall-landscape-only {
  16004. display: table-cell;
  16005. }
  16006. }
  16007. .data-table .small-only,
  16008. .data-table .small-landscape-only {
  16009. display: none;
  16010. }
  16011. @media (min-width: 568px) {
  16012. .data-table .small-only {
  16013. display: table-cell;
  16014. }
  16015. }
  16016. @media (min-width: 568px) and (orientation: landscape) {
  16017. .data-table .small-landscape-only {
  16018. display: table-cell;
  16019. }
  16020. }
  16021. .data-table .medium-only,
  16022. .data-table .medium-landscape-only {
  16023. display: none;
  16024. }
  16025. @media (min-width: 768px) {
  16026. .data-table .medium-only {
  16027. display: table-cell;
  16028. }
  16029. }
  16030. @media (min-width: 768px) and (orientation: landscape) {
  16031. .data-table .medium-landscape-only {
  16032. display: table-cell;
  16033. }
  16034. }
  16035. .data-table .large-only,
  16036. .data-table .large-landscape-only {
  16037. display: none;
  16038. }
  16039. @media (min-width: 1024px) {
  16040. .data-table .large-only {
  16041. display: table-cell;
  16042. }
  16043. }
  16044. @media (min-width: 1024px) and (orientation: landscape) {
  16045. .data-table .large-landscape-only {
  16046. display: table-cell;
  16047. }
  16048. }
  16049. .data-table .xlarge-only,
  16050. .data-table .xlarge-landscape-only {
  16051. display: none;
  16052. }
  16053. @media (min-width: 1200px) {
  16054. .data-table .xlarge-only {
  16055. display: table-cell;
  16056. }
  16057. }
  16058. @media (min-width: 1200px) and (orientation: landscape) {
  16059. .data-table .xlarge-landscape-only {
  16060. display: table-cell;
  16061. }
  16062. }
  16063. .ios .data-table th.actions-cell a.link + a.link,
  16064. .ios .data-table td.actions-cell a.link + a.link {
  16065. margin-left: 16px;
  16066. }
  16067. .ios .sortable-cell:not(.numeric-cell):after {
  16068. margin-left: 5px;
  16069. }
  16070. .ios .sortable-cell.numeric-cell:before {
  16071. margin-right: 5px;
  16072. }
  16073. .ios .data-table-links a.link + a.link,
  16074. .ios .data-table-actions a.link + a.link,
  16075. .ios .data-table-links .button + .button,
  16076. .ios .data-table-actions .button + .button {
  16077. margin-left: 16px;
  16078. }
  16079. .ios .data-table-actions a.link.icon-only {
  16080. width: 44px;
  16081. height: 44px;
  16082. }
  16083. .ios .data-table-rows-select a.link,
  16084. .ios .data-table-pagination a.link {
  16085. width: 44px;
  16086. height: 44px;
  16087. }
  16088. .ios .data-table-rows-select + .data-table-pagination {
  16089. margin-left: 30px;
  16090. }
  16091. .ios .data-table-rows-select .input {
  16092. margin-left: 20px;
  16093. }
  16094. .ios .data-table-pagination-label {
  16095. margin-right: 16px;
  16096. }
  16097. .md .data-table th.actions-cell a.link + a.link,
  16098. .md .data-table td.actions-cell a.link + a.link {
  16099. margin-left: 24px;
  16100. }
  16101. .md .data-table th.actions-cell a.icon-only,
  16102. .md .data-table td.actions-cell a.icon-only {
  16103. width: 24px;
  16104. height: 24px;
  16105. line-height: 24px;
  16106. }
  16107. .md .sortable-cell:not(.numeric-cell):after {
  16108. margin-left: 8px;
  16109. }
  16110. .md .sortable-cell.numeric-cell:before {
  16111. margin-right: 8px;
  16112. }
  16113. .md .data-table-links a.link + a.link,
  16114. .md .data-table-actions a.link + a.link,
  16115. .md .data-table-links .button + .button,
  16116. .md .data-table-actions .button + .button {
  16117. margin-left: 24px;
  16118. }
  16119. .md .data-table-actions a.link.icon-only {
  16120. width: 24px;
  16121. height: 24px;
  16122. overflow: visible;
  16123. }
  16124. .md .data-table-actions a.link.icon-only.active-state {
  16125. background: none;
  16126. }
  16127. .md .data-table-rows-select a.link,
  16128. .md .data-table-pagination a.link {
  16129. width: 48px;
  16130. height: 48px;
  16131. }
  16132. .md .data-table-rows-select a.link:before,
  16133. .md .data-table-pagination a.link:before {
  16134. content: '';
  16135. width: 152%;
  16136. height: 152%;
  16137. position: absolute;
  16138. left: -26%;
  16139. top: -26%;
  16140. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  16141. background-repeat: no-repeat;
  16142. background-position: center;
  16143. background-size: 100% 100%;
  16144. opacity: 0;
  16145. pointer-events: none;
  16146. transition-duration: 600ms;
  16147. }
  16148. .md .data-table-rows-select a.link.active-state:before,
  16149. .md .data-table-pagination a.link.active-state:before {
  16150. opacity: 1;
  16151. transition-duration: 150ms;
  16152. }
  16153. .md .data-table-rows-select + .data-table-pagination {
  16154. margin-left: 32px;
  16155. }
  16156. .md .data-table-rows-select .input {
  16157. margin-left: 24px;
  16158. }
  16159. .md .data-table-pagination-label {
  16160. margin-right: 20px;
  16161. }
  16162. .md .input-cell .input-clear-button {
  16163. transform: scale(0.8);
  16164. }
  16165. .aurora .data-table th.actions-cell a.link + a.link,
  16166. .aurora .data-table td.actions-cell a.link + a.link {
  16167. margin-left: 10px;
  16168. }
  16169. .aurora .sortable-cell:not(.numeric-cell):after {
  16170. margin-left: 5px;
  16171. }
  16172. .aurora .sortable-cell.numeric-cell:before {
  16173. margin-right: 5px;
  16174. }
  16175. .aurora .data-table-links a.link + a.link,
  16176. .aurora .data-table-actions a.link + a.link,
  16177. .aurora .data-table-links .button + .button,
  16178. .aurora .data-table-actions .button + .button {
  16179. margin-left: 10px;
  16180. }
  16181. .aurora .data-table-rows-select a.link,
  16182. .aurora .data-table-pagination a.link {
  16183. width: 32px;
  16184. height: 32px;
  16185. }
  16186. .aurora .data-table-rows-select + .data-table-pagination {
  16187. margin-left: 16px;
  16188. }
  16189. .aurora .data-table-rows-select .input {
  16190. margin-left: 10px;
  16191. }
  16192. .aurora .data-table-pagination-label {
  16193. margin-right: 10px;
  16194. }
  16195. /* === FAB === */
  16196. :root {
  16197. --f7-fab-margin: 16px;
  16198. --f7-fab-text-color: #fff;
  16199. --f7-fab-extended-text-font-size: 14px;
  16200. --f7-fab-extended-text-padding: 0 20px;
  16201. --f7-fab-label-bg-color: #fff;
  16202. --f7-fab-label-text-color: #333;
  16203. --f7-fab-label-border-radius: 4px;
  16204. --f7-fab-label-padding: 4px 12px;
  16205. --f7-fab-button-size: 40px;
  16206. /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  16207. }
  16208. .ios {
  16209. --f7-fab-size: 50px;
  16210. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  16211. --f7-fab-extended-size: 50px;
  16212. --f7-fab-extended-text-font-weight: 600;
  16213. --f7-fab-extended-text-letter-spacing: 0;
  16214. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  16215. --f7-fab-label-font-size: inherit;
  16216. }
  16217. .md {
  16218. --f7-fab-size: 56px;
  16219. --f7-fab-box-shadow: var(--f7-elevation-6);
  16220. --f7-fab-extended-size: 48px;
  16221. --f7-fab-extended-text-font-weight: 500;
  16222. --f7-fab-extended-text-letter-spacing: 0.03em;
  16223. --f7-fab-label-box-shadow: var(--f7-elevation-3);
  16224. --f7-fab-label-font-size: inherit;
  16225. }
  16226. .aurora {
  16227. --f7-fab-size: 40px;
  16228. --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  16229. --f7-fab-extended-size: 38px;
  16230. --f7-fab-extended-text-font-weight: 500;
  16231. --f7-fab-extended-text-letter-spacing: 0;
  16232. --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  16233. --f7-fab-label-font-size: 12px;
  16234. }
  16235. .fab-backdrop {
  16236. z-index: 1400;
  16237. }
  16238. .fab {
  16239. position: absolute;
  16240. z-index: 1500;
  16241. }
  16242. .fab a {
  16243. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  16244. }
  16245. .fab-left-top,
  16246. .fab-left-center,
  16247. .fab-left-bottom {
  16248. left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
  16249. }
  16250. .fab-right-top,
  16251. .fab-right-center,
  16252. .fab-right-bottom {
  16253. right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
  16254. }
  16255. .fab-left-top,
  16256. .fab-center-top,
  16257. .fab-right-top {
  16258. top: var(--f7-fab-margin);
  16259. }
  16260. .fab-left-bottom,
  16261. .fab-center-bottom,
  16262. .fab-right-bottom {
  16263. bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
  16264. }
  16265. .fab-center-top,
  16266. .fab-center-center,
  16267. .fab-center-bottom {
  16268. left: 50%;
  16269. transform: translateX(-50%);
  16270. }
  16271. .fab-left-center,
  16272. .fab-center-center,
  16273. .fab-right-center {
  16274. top: 50%;
  16275. transform: translateY(-50%);
  16276. }
  16277. .fab-center-center {
  16278. top: 50%;
  16279. left: 50%;
  16280. transform: translateX(-50%) translateY(-50%);
  16281. }
  16282. .fab > a,
  16283. .fab-buttons a {
  16284. background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
  16285. width: var(--f7-fab-size);
  16286. height: var(--f7-fab-size);
  16287. box-shadow: var(--f7-fab-box-shadow);
  16288. border-radius: calc(var(--f7-fab-size) / 2);
  16289. position: relative;
  16290. transition-duration: 300ms;
  16291. display: flex;
  16292. align-items: center;
  16293. justify-content: center;
  16294. overflow: hidden;
  16295. z-index: 1;
  16296. color: var(--f7-fab-text-color);
  16297. }
  16298. .fab > a.active-state,
  16299. .fab-buttons a.active-state {
  16300. background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
  16301. }
  16302. .fab > a i {
  16303. position: absolute;
  16304. left: 50%;
  16305. top: 50%;
  16306. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  16307. transition: 300ms;
  16308. }
  16309. .fab > a i + i {
  16310. transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
  16311. opacity: 0;
  16312. }
  16313. .fab-buttons a {
  16314. border-radius: calc(var(--f7-fab-button-size) / 2);
  16315. width: var(--f7-fab-button-size);
  16316. height: var(--f7-fab-button-size);
  16317. }
  16318. .fab-buttons {
  16319. display: flex;
  16320. visibility: hidden;
  16321. pointer-events: none;
  16322. position: absolute;
  16323. }
  16324. .fab-buttons a {
  16325. opacity: 0;
  16326. }
  16327. .fab-opened:not(.fab-morph) > a i {
  16328. transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
  16329. opacity: 0;
  16330. }
  16331. .fab-opened:not(.fab-morph) > a i + i {
  16332. transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  16333. opacity: 1;
  16334. }
  16335. .fab-opened .fab-buttons {
  16336. visibility: visible;
  16337. pointer-events: auto;
  16338. }
  16339. .fab-opened .fab-buttons a {
  16340. opacity: 1;
  16341. transform: translate3d(0, 0px, 0) scale(1) !important;
  16342. }
  16343. .fab-opened .fab-buttons a:nth-child(2) {
  16344. transition-delay: 50ms;
  16345. }
  16346. .fab-opened .fab-buttons a:nth-child(3) {
  16347. transition-delay: 100ms;
  16348. }
  16349. .fab-opened .fab-buttons a:nth-child(4) {
  16350. transition-delay: 150ms;
  16351. }
  16352. .fab-opened .fab-buttons a:nth-child(5) {
  16353. transition-delay: 200ms;
  16354. }
  16355. .fab-opened .fab-buttons a:nth-child(6) {
  16356. transition-delay: 250ms;
  16357. }
  16358. .fab-buttons-top,
  16359. .fab-buttons-bottom {
  16360. left: 50%;
  16361. width: var(--f7-fab-button-size);
  16362. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16363. }
  16364. .fab-buttons-top {
  16365. bottom: 100%;
  16366. margin-bottom: 16px;
  16367. flex-direction: column-reverse;
  16368. }
  16369. .fab-buttons-top a {
  16370. transform: translate3d(0, 8px, 0) scale(0.3);
  16371. transform-origin: center bottom;
  16372. }
  16373. .fab-buttons-top a + a {
  16374. margin-bottom: 16px;
  16375. }
  16376. .fab-buttons-bottom {
  16377. top: 100%;
  16378. margin-top: 16px;
  16379. flex-direction: column;
  16380. }
  16381. .fab-buttons-bottom a {
  16382. transform: translate3d(0, -8px, 0) scale(0.3);
  16383. transform-origin: center top;
  16384. }
  16385. .fab-buttons-bottom a + a {
  16386. margin-top: 16px;
  16387. }
  16388. .fab-buttons-left,
  16389. .fab-buttons-right {
  16390. top: 50%;
  16391. height: var(--f7-fab-button-size);
  16392. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16393. }
  16394. .fab-buttons-left {
  16395. right: 100%;
  16396. margin-right: 16px;
  16397. flex-direction: row-reverse;
  16398. }
  16399. .fab-buttons-left a {
  16400. transform: translate3d(8px, 0px, 0) scale(0.3);
  16401. transform-origin: right center;
  16402. }
  16403. .fab-buttons-left a + a {
  16404. margin-right: 16px;
  16405. }
  16406. .fab-buttons-right {
  16407. left: 100%;
  16408. margin-left: 16px;
  16409. }
  16410. .fab-buttons-right a {
  16411. transform: translate3d(-8px, 0, 0) scale(0.3);
  16412. transform-origin: left center;
  16413. }
  16414. .fab-buttons-right a + a {
  16415. margin-left: 16px;
  16416. }
  16417. .fab-buttons-center {
  16418. left: 0%;
  16419. top: 0%;
  16420. width: 100%;
  16421. height: 100%;
  16422. }
  16423. .fab-buttons-center a {
  16424. position: absolute;
  16425. }
  16426. .fab-buttons-center a:nth-child(1) {
  16427. left: 50%;
  16428. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16429. bottom: 100%;
  16430. margin-bottom: 16px;
  16431. transform: translateY(-8px) scale(0.3);
  16432. transform-origin: center bottom;
  16433. }
  16434. .fab-buttons-center a:nth-child(2) {
  16435. left: 100%;
  16436. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16437. top: 50%;
  16438. margin-left: 16px;
  16439. transform: translateX(-8px) scale(0.3);
  16440. transform-origin: left center;
  16441. }
  16442. .fab-buttons-center a:nth-child(3) {
  16443. left: 50%;
  16444. margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
  16445. top: 100%;
  16446. margin-top: 16px;
  16447. transform: translateY(8px) scale(0.3);
  16448. transform-origin: center top;
  16449. }
  16450. .fab-buttons-center a:nth-child(4) {
  16451. right: 100%;
  16452. margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
  16453. top: 50%;
  16454. margin-right: 16px;
  16455. transform: translateX(8px) scale(0.3);
  16456. transform-origin: right center;
  16457. }
  16458. .fab-morph {
  16459. border-radius: calc(var(--f7-fab-size) / 2);
  16460. background: var(--f7-fab-bg-color, var(--f7-theme-color));
  16461. box-shadow: var(--f7-fab-box-shadow);
  16462. }
  16463. .fab-morph > a {
  16464. box-shadow: none;
  16465. background: none !important;
  16466. }
  16467. .fab-opened.fab-morph > a i {
  16468. opacity: 0;
  16469. }
  16470. .fab-morph,
  16471. .fab-morph > a,
  16472. .fab-morph-target {
  16473. transition-duration: 250ms;
  16474. }
  16475. .fab-morph-target:not(.fab-morph-target-visible) {
  16476. display: none;
  16477. }
  16478. .fab-extended {
  16479. width: auto;
  16480. min-width: var(--f7-fab-extended-size);
  16481. }
  16482. .fab-extended > a {
  16483. width: 100%;
  16484. height: var(--f7-fab-extended-size);
  16485. }
  16486. .fab-extended > a i {
  16487. left: calc(var(--f7-fab-extended-size) / 2);
  16488. }
  16489. .fab-extended i ~ .fab-text {
  16490. padding-left: var(--f7-fab-extended-size);
  16491. }
  16492. .fab-extended > a {
  16493. width: 100% !important;
  16494. }
  16495. .fab-text {
  16496. box-sizing: border-box;
  16497. font-size: var(--f7-fab-extended-text-font-size);
  16498. padding: var(--f7-fab-extended-text-padding);
  16499. font-weight: var(--f7-fab-extended-text-font-weight);
  16500. letter-spacing: var(--f7-fab-extended-text-letter-spacing);
  16501. text-transform: uppercase;
  16502. }
  16503. .fab-label-button {
  16504. overflow: visible !important;
  16505. }
  16506. .fab-label {
  16507. position: absolute;
  16508. top: 50%;
  16509. padding: var(--f7-fab-label-padding);
  16510. border-radius: var(--f7-fab-label-border-radius);
  16511. background: var(--f7-fab-label-bg-color);
  16512. color: var(--f7-fab-label-text-color);
  16513. box-shadow: var(--f7-fab-label-box-shadow);
  16514. white-space: nowrap;
  16515. transform: translateY(-50%);
  16516. pointer-events: none;
  16517. font-size: var(--f7-fab-label-font-size);
  16518. }
  16519. .fab-right-top .fab-label,
  16520. .fab-right-center .fab-label,
  16521. .fab-right-bottom .fab-label {
  16522. right: 100%;
  16523. margin-right: 8px;
  16524. }
  16525. .fab-left-top .fab-label,
  16526. .fab-left-center .fab-label,
  16527. .fab-left-bottom .fab-label {
  16528. left: 100%;
  16529. margin-left: 8px;
  16530. }
  16531. .navbar ~ * .fab-left-top,
  16532. .navbar ~ * .fab-center-top,
  16533. .navbar ~ * .fab-right-top,
  16534. .navbar ~ .fab-left-top,
  16535. .navbar ~ .fab-center-top,
  16536. .navbar ~ .fab-right-top,
  16537. .navbars ~ * .fab-left-top,
  16538. .navbars ~ * .fab-center-top,
  16539. .navbars ~ * .fab-right-top,
  16540. .navbars ~ .fab-left-top,
  16541. .navbars ~ .fab-center-top,
  16542. .navbars ~ .fab-right-top {
  16543. margin-top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  16544. }
  16545. .toolbar-top ~ * .fab-left-top,
  16546. .toolbar-top ~ * .fab-center-top,
  16547. .toolbar-top ~ * .fab-right-top,
  16548. .toolbar-top ~ .fab-left-top,
  16549. .toolbar-top ~ .fab-center-top,
  16550. .toolbar-top ~ .fab-right-top,
  16551. .ios .toolbar-top-ios ~ * .fab-left-top,
  16552. .ios .toolbar-top-ios ~ * .fab-center-top,
  16553. .ios .toolbar-top-ios ~ * .fab-right-top,
  16554. .ios .toolbar-top-ios ~ .fab-left-top,
  16555. .ios .toolbar-top-ios ~ .fab-center-top,
  16556. .ios .toolbar-top-ios ~ .fab-right-top,
  16557. .md .toolbar-top-md ~ * .fab-left-top,
  16558. .md .toolbar-top-md ~ * .fab-center-top,
  16559. .md .toolbar-top-md ~ * .fab-right-top,
  16560. .md .toolbar-top-md ~ .fab-left-top,
  16561. .md .toolbar-top-md ~ .fab-center-top,
  16562. .md .toolbar-top-md ~ .fab-right-top {
  16563. margin-top: var(--f7-toolbar-height);
  16564. }
  16565. .toolbar-bottom ~ * .fab-left-bottom,
  16566. .toolbar-bottom ~ * .fab-center-bottom,
  16567. .toolbar-bottom ~ * .fab-right-bottom,
  16568. .toolbar-bottom ~ .fab-left-bottom,
  16569. .toolbar-bottom ~ .fab-center-bottom,
  16570. .toolbar-bottom ~ .fab-right-bottom,
  16571. .ios .toolbar-bottom-ios ~ * .fab-left-bottom,
  16572. .ios .toolbar-bottom-ios ~ * .fab-center-bottom,
  16573. .ios .toolbar-bottom-ios ~ * .fab-right-bottom,
  16574. .ios .toolbar-bottom-ios ~ .fab-left-bottom,
  16575. .ios .toolbar-bottom-ios ~ .fab-center-bottom,
  16576. .ios .toolbar-bottom-ios ~ .fab-right-bottom,
  16577. .md .toolbar-bottom-md ~ * .fab-left-bottom,
  16578. .md .toolbar-bottom-md ~ * .fab-center-bottom,
  16579. .md .toolbar-bottom-md ~ * .fab-right-bottom,
  16580. .md .toolbar-bottom-md ~ .fab-left-bottom,
  16581. .md .toolbar-bottom-md ~ .fab-center-bottom,
  16582. .md .toolbar-bottom-md ~ .fab-right-bottom {
  16583. margin-bottom: var(--f7-toolbar-height);
  16584. }
  16585. .tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
  16586. .tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
  16587. .tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
  16588. .tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
  16589. .tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
  16590. .tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
  16591. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
  16592. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
  16593. .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
  16594. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
  16595. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
  16596. .ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
  16597. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
  16598. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
  16599. .md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
  16600. .md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
  16601. .md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
  16602. .md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
  16603. margin-bottom: var(--f7-tabbar-labels-height);
  16604. }
  16605. .tabbar-labels.toolbar-top ~ * .fab-left-bottom,
  16606. .tabbar-labels.toolbar-top ~ * .fab-center-bottom,
  16607. .tabbar-labels.toolbar-top ~ * .fab-right-bottom,
  16608. .tabbar-labels.toolbar-top ~ .fab-left-bottom,
  16609. .tabbar-labels.toolbar-top ~ .fab-center-bottom,
  16610. .tabbar-labels.toolbar-top ~ .fab-right-bottom,
  16611. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
  16612. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
  16613. .ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
  16614. .ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
  16615. .ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
  16616. .ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
  16617. .md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
  16618. .md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
  16619. .md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
  16620. .md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
  16621. .md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
  16622. .md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
  16623. margin-top: var(--f7-tabbar-labels-height);
  16624. }
  16625. .messagebar ~ * .fab-left-bottom,
  16626. .messagebar ~ * .fab-center-bottom,
  16627. .messagebar ~ * .fab-right-bottom,
  16628. .messagebar ~ .fab-left-bottom,
  16629. .messagebar ~ .fab-center-bottom,
  16630. .messagebar ~ .fab-right-bottom {
  16631. margin-bottom: var(--f7-messagebar-height);
  16632. }
  16633. .navbar + .toolbar-top ~ * .fab-left-top,
  16634. .ios .navbar + .toolbar-top-ios ~ * .fab-left-top,
  16635. .md .navbar + .toolbar-top-ios ~ * .fab-left-top,
  16636. .navbar + .toolbar-top ~ * .fab-center-top,
  16637. .ios .navbar + .toolbar-top-ios ~ * .fab-center-top,
  16638. .md .navbar + .toolbar-top-ios ~ * .fab-center-top,
  16639. .navbar + .toolbar-top ~ * .fab-right-top,
  16640. .ios .navbar + .toolbar-top-ios ~ * .fab-right-top,
  16641. .md .navbar + .toolbar-top-ios ~ * .fab-right-top,
  16642. .navbar + .toolbar-top ~ .fab-left-top,
  16643. .ios .navbar + .toolbar-top-ios ~ .fab-left-top,
  16644. .md .navbar + .toolbar-top-ios ~ .fab-left-top,
  16645. .navbar + .toolbar-top ~ .fab-center-top,
  16646. .ios .navbar + .toolbar-top-ios ~ .fab-center-top,
  16647. .md .navbar + .toolbar-top-ios ~ .fab-center-top,
  16648. .navbar + .toolbar-top ~ .fab-right-top,
  16649. .ios .navbar + .toolbar-top-ios ~ .fab-right-top,
  16650. .md .navbar + .toolbar-top-ios ~ .fab-right-top {
  16651. margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16652. }
  16653. .navbar + .toolbar-top.tabbar-labels ~ * .fab-left-top,
  16654. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16655. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16656. .navbar + .toolbar-top.tabbar-labels ~ * .fab-center-top,
  16657. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16658. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16659. .navbar + .toolbar-top.tabbar-labels ~ * .fab-right-top,
  16660. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16661. .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16662. .navbar + .toolbar-top.tabbar-labels ~ .fab-left-top,
  16663. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16664. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16665. .navbar + .toolbar-top.tabbar-labels ~ .fab-center-top,
  16666. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16667. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16668. .navbar + .toolbar-top.tabbar-labels ~ .fab-right-top,
  16669. .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top,
  16670. .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
  16671. margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16672. }
  16673. .navbars + .toolbar-top ~ * .fab-left-top,
  16674. .ios .navbars + .toolbar-top-ios ~ * .fab-left-top,
  16675. .navbars + .toolbar-top ~ * .fab-center-top,
  16676. .ios .navbars + .toolbar-top-ios ~ * .fab-center-top,
  16677. .navbars + .toolbar-top ~ * .fab-right-top,
  16678. .ios .navbars + .toolbar-top-ios ~ * .fab-right-top,
  16679. .navbars + .toolbar-top ~ .fab-left-top,
  16680. .ios .navbars + .toolbar-top-ios ~ .fab-left-top,
  16681. .navbars + .toolbar-top ~ .fab-center-top,
  16682. .ios .navbars + .toolbar-top-ios ~ .fab-center-top,
  16683. .navbars + .toolbar-top ~ .fab-right-top,
  16684. .ios .navbars + .toolbar-top-ios ~ .fab-right-top {
  16685. margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16686. }
  16687. .navbars + .toolbar-top.tabbar-labels ~ * .fab-left-top,
  16688. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
  16689. .navbars + .toolbar-top.tabbar-labels ~ * .fab-center-top,
  16690. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
  16691. .navbars + .toolbar-top.tabbar-labels ~ * .fab-right-top,
  16692. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
  16693. .navbars + .toolbar-top.tabbar-labels ~ .fab-left-top,
  16694. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
  16695. .navbars + .toolbar-top.tabbar-labels ~ .fab-center-top,
  16696. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
  16697. .navbars + .toolbar-top.tabbar-labels ~ .fab-right-top,
  16698. .ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
  16699. margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
  16700. }
  16701. .ios .fab > a.active-state,
  16702. .ios .fab-buttons a.active-state {
  16703. transition-duration: 0ms;
  16704. }
  16705. /* === Searchbar === */
  16706. :root {
  16707. /*
  16708. --f7-searchbar-link-color: var(--f7-bars-link-color);
  16709. --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  16710. --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
  16711. */
  16712. --f7-searchbar-input-border-width: 0px;
  16713. --f7-searchbar-input-border-color: transparent;
  16714. --f7-searchbar-input-text-color: #000;
  16715. --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
  16716. }
  16717. :root .theme-dark,
  16718. :root.theme-dark {
  16719. --f7-searchbar-input-text-color: #fff;
  16720. --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
  16721. }
  16722. .ios {
  16723. /*
  16724. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  16725. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  16726. --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  16727. --f7-searchbar-border-color: var(--f7-bars-border-color);
  16728. */
  16729. --f7-searchbar-height: 44px;
  16730. --f7-searchbar-inner-padding-left: 8px;
  16731. --f7-searchbar-inner-padding-right: 8px;
  16732. /*
  16733. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  16734. */
  16735. --f7-searchbar-input-font-size: 17px;
  16736. --f7-searchbar-input-border-radius: 8px;
  16737. --f7-searchbar-input-height: 32px;
  16738. --f7-searchbar-input-padding-horizontal: 28px;
  16739. /*
  16740. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  16741. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  16742. */
  16743. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  16744. --f7-searchbar-shadow-image: none;
  16745. --f7-searchbar-in-page-content-margin: 0px;
  16746. --f7-searchbar-in-page-content-box-shadow: none;
  16747. --f7-searchbar-in-page-content-border-radius: 0;
  16748. --f7-searchbar-in-page-content-input-border-radius: 0;
  16749. --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  16750. --f7-searchbar-input-bg-color: #e4e4e4;
  16751. }
  16752. .ios .theme-dark,
  16753. .ios.theme-dark {
  16754. --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  16755. --f7-searchbar-input-bg-color: #2a2a2a;
  16756. }
  16757. .md {
  16758. --f7-searchbar-border-color: transparent;
  16759. --f7-searchbar-height: 48px;
  16760. --f7-searchbar-inner-padding-left: 0px;
  16761. --f7-searchbar-inner-padding-right: 0px;
  16762. --f7-searchbar-link-color: #737373;
  16763. --f7-searchbar-search-icon-color: #737373;
  16764. --f7-searchbar-input-font-size: 20px;
  16765. --f7-searchbar-input-border-radius: 0px;
  16766. --f7-searchbar-input-height: 100%;
  16767. --f7-searchbar-input-padding-horizontal: 48px;
  16768. --f7-searchbar-inline-input-padding-horizontal: 24px;
  16769. --f7-searchbar-input-clear-button-color: #737373;
  16770. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  16771. --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  16772. --f7-searchbar-in-page-content-margin: 8px;
  16773. --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
  16774. --f7-searchbar-in-page-content-border-radius: 4px;
  16775. --f7-searchbar-in-page-content-input-border-radius: 4px;
  16776. --f7-searchbar-bg-color: #fff;
  16777. --f7-searchbar-input-bg-color: #fff;
  16778. }
  16779. .md .theme-dark,
  16780. .md.theme-dark {
  16781. --f7-searchbar-bg-color: #202020;
  16782. --f7-searchbar-input-bg-color: #202020;
  16783. }
  16784. .aurora {
  16785. /*
  16786. --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  16787. --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  16788. --f7-searchbar-border-color: var(--f7-bars-border-color);
  16789. */
  16790. --f7-searchbar-height: 38px;
  16791. --f7-searchbar-inner-padding-left: 8px;
  16792. --f7-searchbar-inner-padding-right: 8px;
  16793. /*
  16794. --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  16795. */
  16796. --f7-searchbar-input-font-size: 13px;
  16797. --f7-searchbar-input-border-radius: 4px;
  16798. --f7-searchbar-input-height: 24px;
  16799. --f7-searchbar-input-padding-horizontal: 24px;
  16800. /*
  16801. --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
  16802. --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  16803. */
  16804. --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  16805. --f7-searchbar-shadow-image: none;
  16806. --f7-searchbar-in-page-content-margin: 0px;
  16807. --f7-searchbar-in-page-content-box-shadow: none;
  16808. --f7-searchbar-in-page-content-border-radius: 0;
  16809. /*
  16810. --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
  16811. */
  16812. --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  16813. --f7-searchbar-input-bg-color: #fff;
  16814. }
  16815. .aurora .theme-dark,
  16816. .aurora.theme-dark {
  16817. --f7-searchbar-input-bg-color: #333;
  16818. --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  16819. }
  16820. .searchbar {
  16821. width: 100%;
  16822. position: relative;
  16823. z-index: 200;
  16824. height: var(--f7-searchbar-height);
  16825. background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
  16826. background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
  16827. }
  16828. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  16829. .ios-translucent-bars .searchbar {
  16830. background-color: rgba(var(--f7-searchbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
  16831. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  16832. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  16833. }
  16834. }
  16835. .ios .subnavbar .searchbar {
  16836. background-color: transparent;
  16837. -webkit-backdrop-filter: none;
  16838. backdrop-filter: none;
  16839. }
  16840. .ios .subnavbar .searchbar:after {
  16841. display: none !important;
  16842. }
  16843. .searchbar.no-hairline:after,
  16844. .searchbar.no-border:after {
  16845. display: none !important;
  16846. }
  16847. .searchbar.no-shadow:before {
  16848. display: none !important;
  16849. }
  16850. .searchbar:after {
  16851. content: '';
  16852. position: absolute;
  16853. background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
  16854. display: block;
  16855. z-index: 15;
  16856. top: auto;
  16857. right: auto;
  16858. bottom: 0;
  16859. left: 0;
  16860. height: 1px;
  16861. width: 100%;
  16862. transform-origin: 50% 100%;
  16863. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  16864. }
  16865. .page > .searchbar:not(.searchbar-inline) {
  16866. z-index: 600;
  16867. }
  16868. .page > .searchbar:not(.searchbar-inline):before {
  16869. content: '';
  16870. position: absolute;
  16871. right: 0;
  16872. width: 100%;
  16873. top: 100%;
  16874. bottom: auto;
  16875. height: 8px;
  16876. pointer-events: none;
  16877. background: var(--f7-searchbar-shadow-image);
  16878. }
  16879. .searchbar input[type="text"],
  16880. .searchbar input[type="search"] {
  16881. box-sizing: border-box;
  16882. width: 100%;
  16883. height: 100%;
  16884. display: block;
  16885. border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
  16886. -webkit-appearance: none;
  16887. -moz-appearance: none;
  16888. appearance: none;
  16889. font-family: inherit;
  16890. font-weight: normal;
  16891. color: var(--f7-searchbar-input-text-color);
  16892. font-size: var(--f7-searchbar-input-font-size);
  16893. background-color: var(--f7-searchbar-input-bg-color);
  16894. border-radius: var(--f7-searchbar-input-border-radius);
  16895. position: relative;
  16896. padding: 0;
  16897. padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
  16898. padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
  16899. }
  16900. .searchbar input[type="text"]::-webkit-input-placeholder, .searchbar input[type="search"]::-webkit-input-placeholder {
  16901. color: var(--f7-searchbar-placeholder-color);
  16902. opacity: 1;
  16903. }
  16904. .searchbar input[type="text"]::placeholder,
  16905. .searchbar input[type="search"]::placeholder {
  16906. color: var(--f7-searchbar-placeholder-color);
  16907. opacity: 1;
  16908. }
  16909. .searchbar input::-webkit-search-cancel-button {
  16910. -webkit-appearance: none;
  16911. appearance: none;
  16912. }
  16913. .searchbar .searchbar-input-wrap {
  16914. flex-shrink: 1;
  16915. width: 100%;
  16916. height: var(--f7-searchbar-input-height);
  16917. position: relative;
  16918. }
  16919. .searchbar a {
  16920. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  16921. }
  16922. .page > .searchbar:not(.searchbar-inline) {
  16923. position: absolute;
  16924. left: 0;
  16925. top: 0;
  16926. }
  16927. .page-content .searchbar:not(.searchbar-inline) {
  16928. border-radius: var(--f7-searchbar-in-page-content-border-radius);
  16929. margin: var(--f7-searchbar-in-page-content-margin);
  16930. width: auto;
  16931. box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
  16932. }
  16933. .page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
  16934. .page-content .searchbar:not(.searchbar-inline) input[type="text"],
  16935. .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
  16936. border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
  16937. }
  16938. .searchbar .input-clear-button {
  16939. color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
  16940. }
  16941. .searchbar-expandable {
  16942. --f7-searchbar-expandable-size: var(--f7-searchbar-height);
  16943. position: absolute;
  16944. transition-duration: 300ms;
  16945. pointer-events: none;
  16946. }
  16947. .navbar .searchbar-expandable {
  16948. background: transparent;
  16949. }
  16950. .navbar .searchbar-expandable:after {
  16951. display: none !important;
  16952. }
  16953. .navbar .searchbar.searchbar-expandable {
  16954. --f7-searchbar-expandable-size: var(--f7-navbar-height);
  16955. }
  16956. .toolbar .searchbar.searchbar-expandable {
  16957. --f7-searchbar-expandable-size: var(--f7-toolbar-height);
  16958. }
  16959. .subnavbar .searchbar.searchbar-expandable {
  16960. --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
  16961. }
  16962. .tabbar-labels .searchbar.searchbar-expandable {
  16963. --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
  16964. }
  16965. .searchbar-inner {
  16966. position: absolute;
  16967. left: 0;
  16968. top: 0;
  16969. width: 100%;
  16970. height: 100%;
  16971. display: flex;
  16972. align-items: center;
  16973. box-sizing: border-box;
  16974. padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
  16975. }
  16976. .searchbar-disable-button {
  16977. cursor: pointer;
  16978. pointer-events: none;
  16979. -webkit-appearance: none;
  16980. -moz-appearance: none;
  16981. appearance: none;
  16982. background: none;
  16983. border: none;
  16984. outline: 0;
  16985. padding: 0;
  16986. margin: 0;
  16987. width: auto;
  16988. opacity: 0;
  16989. }
  16990. .searchbar-icon {
  16991. pointer-events: none;
  16992. background-position: center;
  16993. background-repeat: no-repeat;
  16994. }
  16995. .searchbar-icon:after {
  16996. color: var(--f7-searchbar-search-icon-color);
  16997. font-family: 'framework7-core-icons';
  16998. font-weight: normal;
  16999. font-style: normal;
  17000. line-height: 1;
  17001. letter-spacing: normal;
  17002. text-transform: none;
  17003. white-space: nowrap;
  17004. word-wrap: normal;
  17005. direction: ltr;
  17006. -webkit-font-smoothing: antialiased;
  17007. text-rendering: optimizeLegibility;
  17008. -moz-osx-font-smoothing: grayscale;
  17009. font-feature-settings: "liga";
  17010. text-align: center;
  17011. display: block;
  17012. width: 100%;
  17013. height: 100%;
  17014. font-size: 20px;
  17015. }
  17016. .searchbar-backdrop {
  17017. position: absolute;
  17018. left: 0;
  17019. top: 0;
  17020. width: 100%;
  17021. height: 100%;
  17022. z-index: 100;
  17023. opacity: 0;
  17024. pointer-events: none;
  17025. transition-duration: 300ms;
  17026. transform: translate3d(0, 0, 0);
  17027. background: var(--f7-searchbar-backdrop-bg-color);
  17028. }
  17029. .searchbar-backdrop.searchbar-backdrop-in {
  17030. opacity: 1;
  17031. pointer-events: auto;
  17032. }
  17033. .page-content > .searchbar-backdrop {
  17034. position: fixed;
  17035. }
  17036. .searchbar-not-found {
  17037. display: none;
  17038. }
  17039. .hidden-by-searchbar,
  17040. .list .hidden-by-searchbar,
  17041. .list.li.hidden-by-searchbar,
  17042. .list li.hidden-by-searchbar {
  17043. display: none !important;
  17044. }
  17045. .navbar.with-searchbar-expandable-enabled-no-transition,
  17046. .navbar.with-searchbar-expandable-enabled-no-transition {
  17047. --f7-navbar-large-collapse-progress: 1;
  17048. }
  17049. .navbar.with-searchbar-expandable-enabled,
  17050. .navbar.with-searchbar-expandable-enabled {
  17051. --f7-navbar-large-collapse-progress: 1;
  17052. }
  17053. .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17054. .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17055. .navbar.with-searchbar-expandable-enabled .title-large,
  17056. .navbar.with-searchbar-expandable-enabled .title-large,
  17057. .navbar.with-searchbar-expandable-enabled .title-large-text,
  17058. .navbar.with-searchbar-expandable-enabled .title-large-text {
  17059. transition-duration: 300ms;
  17060. }
  17061. .navbar.with-searchbar-expandable-closing .navbar-bg,
  17062. .navbar.with-searchbar-expandable-closing .navbar-bg,
  17063. .navbar.with-searchbar-expandable-closing .title-large,
  17064. .navbar.with-searchbar-expandable-closing .title-large,
  17065. .navbar.with-searchbar-expandable-closing .title-large-text,
  17066. .navbar.with-searchbar-expandable-closing .title-large-text {
  17067. transition-duration: 300ms;
  17068. }
  17069. .page-content.with-searchbar-expandable-enabled {
  17070. height: calc(100% + var(--f7-navbar-large-title-height));
  17071. transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
  17072. transition-duration: 300ms;
  17073. transition-property: transform;
  17074. }
  17075. .page-content.with-searchbar-expandable-closing {
  17076. transition-duration: 300ms;
  17077. }
  17078. .navbar ~ .page:not(.no-navbar) > .searchbar,
  17079. .navbars ~ .page:not(.no-navbar) > .searchbar,
  17080. .page > .navbar ~ .searchbar {
  17081. top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  17082. }
  17083. .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
  17084. .navbars ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
  17085. .page-with-navbar-large .navbar ~ .searchbar,
  17086. .page-with-navbar-large .navbar ~ * .searchbar {
  17087. top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
  17088. transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
  17089. }
  17090. .navbars ~ .page-with-navbar-large:not(.no-navbar) .page-content .searchbar,
  17091. .page-with-navbar-large .page-content .searchbar {
  17092. top: 0;
  17093. transform: none;
  17094. }
  17095. .searchbar ~ * {
  17096. --f7-page-searchbar-offset: var(--f7-searchbar-height);
  17097. }
  17098. .page > .toolbar-top ~ .searchbar,
  17099. .ios .page > .toolbar-top-ios ~ .searchbar,
  17100. .md .page > .toolbar-top-md ~ .searchbar,
  17101. .aurora .page > .toolbar-top-aurora ~ .searchbar {
  17102. top: var(--f7-toolbar-height);
  17103. }
  17104. .page > .tabbar-labels.toolbar-top ~ .searchbar,
  17105. .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
  17106. .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
  17107. .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  17108. top: var(--f7-tabbar-labels-height);
  17109. }
  17110. .page > .navbar ~ .toolbar-top ~ .searchbar,
  17111. .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
  17112. .md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
  17113. .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
  17114. top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
  17115. }
  17116. .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
  17117. .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
  17118. .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
  17119. .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
  17120. top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top));
  17121. }
  17122. .searchbar.searchbar-inline {
  17123. width: auto;
  17124. height: auto;
  17125. background-color: transparent;
  17126. background-image: none;
  17127. }
  17128. .searchbar.searchbar-inline:after,
  17129. .searchbar.searchbar-inline:before {
  17130. display: none !important;
  17131. }
  17132. .searchbar.searchbar-inline .searchbar-input-wrap {
  17133. height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
  17134. }
  17135. .searchbar.searchbar-inline .searchbar-inner {
  17136. padding: 0;
  17137. position: static;
  17138. width: auto;
  17139. height: auto;
  17140. }
  17141. .searchbar.searchbar-inline input[type="text"],
  17142. .searchbar.searchbar-inline input[type="search"] {
  17143. font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
  17144. padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
  17145. padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
  17146. }
  17147. .ios .searchbar input[type="search"],
  17148. .ios .searchbar input[type="text"] {
  17149. z-index: 30;
  17150. }
  17151. .ios .searchbar .input-clear-button {
  17152. z-index: 40;
  17153. right: 7px;
  17154. }
  17155. .ios .searchbar-icon {
  17156. width: 13px;
  17157. height: 13px;
  17158. position: absolute;
  17159. top: 50%;
  17160. margin-top: -6px;
  17161. z-index: 40;
  17162. left: 8px;
  17163. }
  17164. .ios .searchbar-icon:after {
  17165. content: 'search_ios';
  17166. line-height: 13px;
  17167. }
  17168. .ios .searchbar-disable-button {
  17169. font-size: 17px;
  17170. flex-shrink: 0;
  17171. transform: translate3d(0, 0, 0);
  17172. transition-duration: 300ms;
  17173. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17174. display: none;
  17175. }
  17176. .ios .searchbar-disable-button.active-state {
  17177. transition-duration: 0ms;
  17178. opacity: 0.3 !important;
  17179. }
  17180. .ios .searchbar-enabled .searchbar-disable-button {
  17181. pointer-events: auto;
  17182. opacity: 1;
  17183. margin-left: 8px;
  17184. }
  17185. .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  17186. transition-duration: 300ms !important;
  17187. }
  17188. .ios .searchbar-expandable {
  17189. left: 0;
  17190. bottom: 0;
  17191. opacity: 1;
  17192. width: 100%;
  17193. height: 0%;
  17194. transform: translate3d(0, 0, 0);
  17195. overflow: hidden;
  17196. }
  17197. .ios .searchbar-expandable .searchbar-disable-button {
  17198. margin-left: 8px;
  17199. opacity: 1;
  17200. display: block;
  17201. }
  17202. .ios .searchbar-expandable .searchbar-inner {
  17203. height: var(--f7-searchbar-expandable-size);
  17204. }
  17205. .ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17206. .ios .navbar.with-searchbar-expandable-closing .navbar-bg {
  17207. transition-property: transform, opacity;
  17208. }
  17209. .ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
  17210. .ios .navbar.with-searchbar-expandable-closing .navbar-bg,
  17211. .ios .navbar.with-searchbar-expandable-enabled .left,
  17212. .ios .navbar.with-searchbar-expandable-closing .left,
  17213. .ios .navbar.with-searchbar-expandable-enabled .title,
  17214. .ios .navbar.with-searchbar-expandable-closing .title,
  17215. .ios .navbar.with-searchbar-expandable-enabled .right,
  17216. .ios .navbar.with-searchbar-expandable-closing .right {
  17217. transition-duration: 300ms;
  17218. }
  17219. .ios .navbar.with-searchbar-expandable-enabled .left,
  17220. .ios .navbar.with-searchbar-expandable-enabled-no-transition .left,
  17221. .ios .navbar.with-searchbar-expandable-enabled .title,
  17222. .ios .navbar.with-searchbar-expandable-enabled-no-transition .title,
  17223. .ios .navbar.with-searchbar-expandable-enabled .right,
  17224. .ios .navbar.with-searchbar-expandable-enabled-no-transition .right {
  17225. transform: translateY(calc(-1 * var(--f7-navbar-height)));
  17226. opacity: 0 !important;
  17227. }
  17228. .ios .searchbar-expandable.searchbar-enabled {
  17229. opacity: 1;
  17230. height: var(--f7-searchbar-expandable-size);
  17231. pointer-events: auto;
  17232. }
  17233. .md .searchbar-icon,
  17234. .md .searchbar-disable-button {
  17235. position: absolute;
  17236. left: calc(-4px + var(--f7-safe-area-left));
  17237. top: 50%;
  17238. transition-duration: 300ms;
  17239. }
  17240. .md .searchbar-icon {
  17241. width: 24px;
  17242. height: 24px;
  17243. margin-left: 12px;
  17244. margin-top: -12px;
  17245. }
  17246. .md .searchbar-icon:after {
  17247. content: 'search_md';
  17248. line-height: 1.2;
  17249. }
  17250. .md .searchbar-disable-button {
  17251. width: 48px;
  17252. height: 48px;
  17253. transform: rotate(-90deg) scale(0.5);
  17254. font-size: 0 !important;
  17255. display: block;
  17256. margin-top: -24px;
  17257. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17258. }
  17259. .md .searchbar-disable-button:before {
  17260. content: '';
  17261. width: 152%;
  17262. height: 152%;
  17263. position: absolute;
  17264. left: -26%;
  17265. top: -26%;
  17266. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  17267. background-repeat: no-repeat;
  17268. background-position: center;
  17269. background-size: 100% 100%;
  17270. opacity: 0;
  17271. pointer-events: none;
  17272. transition-duration: 600ms;
  17273. }
  17274. .md .searchbar-disable-button.active-state:before {
  17275. opacity: 1;
  17276. transition-duration: 150ms;
  17277. }
  17278. .md .searchbar-disable-button:after {
  17279. font-family: 'framework7-core-icons';
  17280. font-weight: normal;
  17281. font-style: normal;
  17282. line-height: 1;
  17283. letter-spacing: normal;
  17284. text-transform: none;
  17285. white-space: nowrap;
  17286. word-wrap: normal;
  17287. direction: ltr;
  17288. -webkit-font-smoothing: antialiased;
  17289. text-rendering: optimizeLegibility;
  17290. -moz-osx-font-smoothing: grayscale;
  17291. font-feature-settings: "liga";
  17292. text-align: center;
  17293. display: block;
  17294. width: 100%;
  17295. height: 100%;
  17296. font-size: 20px;
  17297. line-height: 48px;
  17298. content: "arrow_left_md";
  17299. }
  17300. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
  17301. transform: rotate(0deg) scale(1);
  17302. pointer-events: auto;
  17303. opacity: 1;
  17304. }
  17305. .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
  17306. opacity: 0;
  17307. transform: rotate(90deg) scale(0.5);
  17308. }
  17309. .md .searchbar {
  17310. --f7-searchbar-input-extra-padding-left: 16px;
  17311. }
  17312. .md .searchbar .input-clear-button {
  17313. width: 48px;
  17314. height: 48px;
  17315. margin-top: -24px;
  17316. right: 0;
  17317. }
  17318. .md .searchbar .input-clear-button:before {
  17319. content: '';
  17320. width: 152%;
  17321. height: 152%;
  17322. position: absolute;
  17323. left: -26%;
  17324. top: -26%;
  17325. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  17326. background-repeat: no-repeat;
  17327. background-position: center;
  17328. background-size: 100% 100%;
  17329. opacity: 0;
  17330. pointer-events: none;
  17331. transition-duration: 600ms;
  17332. }
  17333. .md .searchbar .input-clear-button.active-state:before {
  17334. opacity: 1;
  17335. transition-duration: 150ms;
  17336. }
  17337. .md .searchbar .input-clear-button:after {
  17338. line-height: 48px;
  17339. content: 'delete_md';
  17340. opacity: 1;
  17341. }
  17342. .md .searchbar .input-clear-button:before {
  17343. margin-left: 0;
  17344. margin-top: 0;
  17345. }
  17346. .md .page > .searchbar,
  17347. .md .subnavbar .searchbar,
  17348. .md .searchbar-expandable {
  17349. --f7-searchbar-input-extra-padding-left: 24px;
  17350. }
  17351. .md .page > .searchbar .searchbar-icon,
  17352. .md .subnavbar .searchbar .searchbar-icon,
  17353. .md .searchbar-expandable .searchbar-icon,
  17354. .md .page > .searchbar .searchbar-disable-button,
  17355. .md .subnavbar .searchbar .searchbar-disable-button,
  17356. .md .searchbar-expandable .searchbar-disable-button {
  17357. left: calc(-4px + 8px + var(--f7-safe-area-left));
  17358. }
  17359. .md .searchbar-expandable {
  17360. height: var(--f7-searchbar-expandable-size);
  17361. opacity: 0;
  17362. bottom: 0;
  17363. border-radius: calc(var(--f7-searchbar-expandable-size));
  17364. width: calc(var(--f7-searchbar-expandable-size));
  17365. margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
  17366. transform: translate3d(0px, 0px, 0px);
  17367. left: 100%;
  17368. margin-left: calc(var(--f7-searchbar-expandable-size) * -1);
  17369. }
  17370. .md .searchbar-expandable.searchbar-enabled {
  17371. width: 100%;
  17372. border-radius: 0;
  17373. opacity: 1;
  17374. pointer-events: auto;
  17375. margin-top: 0;
  17376. left: 0;
  17377. margin-left: 0;
  17378. }
  17379. .aurora .searchbar input[type="search"],
  17380. .aurora .searchbar input[type="text"] {
  17381. z-index: 30;
  17382. }
  17383. .aurora .searchbar .input-clear-button {
  17384. z-index: 40;
  17385. right: 4px;
  17386. }
  17387. .aurora .searchbar-icon {
  17388. width: 13px;
  17389. height: 13px;
  17390. position: absolute;
  17391. top: 50%;
  17392. margin-top: -6px;
  17393. z-index: 40;
  17394. left: 6px;
  17395. }
  17396. .aurora .searchbar-icon:after {
  17397. content: 'search_aurora';
  17398. line-height: 13px;
  17399. }
  17400. .aurora .searchbar-disable-button {
  17401. font-size: 14px;
  17402. flex-shrink: 0;
  17403. transform: translate3d(0, 0, 0);
  17404. transition-duration: 300ms;
  17405. color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  17406. display: none;
  17407. }
  17408. .aurora .searchbar-disable-button.active-state {
  17409. transition-duration: 0ms;
  17410. opacity: 0.3 !important;
  17411. }
  17412. .aurora .searchbar-enabled .searchbar-disable-button {
  17413. pointer-events: auto;
  17414. opacity: 1;
  17415. margin-left: 8px;
  17416. }
  17417. .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
  17418. transition-duration: 300ms !important;
  17419. }
  17420. .aurora .searchbar-expandable {
  17421. left: 0;
  17422. top: auto;
  17423. bottom: 0;
  17424. opacity: 0;
  17425. width: 100%;
  17426. transform: translate3d(0, 0, 0);
  17427. overflow: hidden;
  17428. }
  17429. .aurora .searchbar-expandable .searchbar-disable-button {
  17430. margin-left: 8px;
  17431. opacity: 1;
  17432. display: block;
  17433. }
  17434. .aurora .searchbar-expandable .searchbar-inner {
  17435. height: var(--f7-searchbar-expandable-size);
  17436. }
  17437. .aurora .searchbar-expandable.searchbar-enabled {
  17438. opacity: 1;
  17439. pointer-events: auto;
  17440. }
  17441. /* === Messages === */
  17442. :root {
  17443. --f7-message-text-header-text-color: inherit;
  17444. --f7-message-text-header-opacity: 0.65;
  17445. --f7-message-text-header-font-size: 12px;
  17446. --f7-message-text-footer-text-color: inherit;
  17447. --f7-message-text-footer-opacity: 0.65;
  17448. --f7-message-text-footer-font-size: 12px;
  17449. --f7-message-bubble-line-height: 1.2;
  17450. --f7-message-header-font-size: 12px;
  17451. --f7-message-footer-font-size: 11px;
  17452. --f7-message-name-font-size: 12px;
  17453. --f7-message-name-font-weight: inherit;
  17454. --f7-message-avatar-border-radius: 50%;
  17455. --f7-messages-title-font-weight: inherit;
  17456. /*
  17457. --f7-message-sent-bg-color: var(--f7-theme-color);
  17458. */
  17459. --f7-message-sent-text-color: #fff;
  17460. --f7-messages-content-bg-color: #fff;
  17461. --f7-message-typing-indicator-bg-color: #000;
  17462. --f7-message-received-bg-color: #e5e5ea;
  17463. --f7-message-received-text-color: #000;
  17464. }
  17465. :root .theme-dark,
  17466. :root.theme-dark {
  17467. --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
  17468. --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
  17469. --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
  17470. --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
  17471. --f7-messages-content-bg-color: transparent;
  17472. --f7-message-received-bg-color: #252525;
  17473. --f7-message-received-text-color: #fff;
  17474. --f7-message-typing-indicator-bg-color: #fff;
  17475. }
  17476. .ios {
  17477. --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
  17478. --f7-messages-title-font-size: 11px;
  17479. --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
  17480. --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
  17481. --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
  17482. --f7-message-avatar-size: 29px;
  17483. --f7-message-margin: 10px;
  17484. --f7-message-bubble-min-height: 32px;
  17485. --f7-message-bubble-font-size: 17px;
  17486. --f7-message-bubble-border-radius: 16px;
  17487. --f7-message-bubble-padding-vertical: 6px;
  17488. --f7-message-bubble-padding-horizontal: 16px;
  17489. --f7-message-typing-indicator-opacity: 0.35;
  17490. }
  17491. .md {
  17492. --f7-messages-title-font-size: 12px;
  17493. --f7-message-avatar-size: 32px;
  17494. --f7-message-margin: 16px;
  17495. --f7-message-bubble-min-height: 32px;
  17496. --f7-message-bubble-font-size: 16px;
  17497. --f7-message-bubble-border-radius: 4px;
  17498. --f7-message-bubble-padding-vertical: 6px;
  17499. --f7-message-bubble-padding-horizontal: 8px;
  17500. --f7-message-typing-indicator-opacity: 0.6;
  17501. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  17502. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  17503. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  17504. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  17505. }
  17506. .aurora {
  17507. --f7-messages-title-font-size: 12px;
  17508. --f7-message-avatar-size: 24px;
  17509. --f7-message-margin: 10px;
  17510. --f7-message-bubble-min-height: 28px;
  17511. --f7-message-bubble-font-size: 13px;
  17512. --f7-message-bubble-line-height: 1.4;
  17513. --f7-message-bubble-border-radius: 14px;
  17514. --f7-message-bubble-padding-vertical: 5px;
  17515. --f7-message-bubble-padding-horizontal: 10px;
  17516. --f7-message-typing-indicator-opacity: 0.5;
  17517. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
  17518. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
  17519. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
  17520. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
  17521. }
  17522. .messages-content,
  17523. .messages {
  17524. background: var(--f7-messages-content-bg-color);
  17525. }
  17526. .messages {
  17527. display: flex;
  17528. flex-direction: column;
  17529. min-height: 100%;
  17530. position: relative;
  17531. z-index: 1;
  17532. }
  17533. .messages-title,
  17534. .message {
  17535. margin-top: var(--f7-message-margin);
  17536. }
  17537. .messages-title:last-child,
  17538. .message:last-child {
  17539. margin-bottom: var(--f7-message-margin);
  17540. }
  17541. .messages-title {
  17542. text-align: center;
  17543. width: 100%;
  17544. line-height: 1;
  17545. color: var(--f7-messages-title-text-color);
  17546. font-size: var(--f7-messages-title-font-size);
  17547. font-weight: var(--f7-messages-title-font-weight);
  17548. }
  17549. .message {
  17550. max-width: 70%;
  17551. box-sizing: border-box;
  17552. display: flex;
  17553. align-items: flex-end;
  17554. position: relative;
  17555. z-index: 1;
  17556. transform: translate3d(0, 0, 0);
  17557. }
  17558. .message-avatar {
  17559. border-radius: var(--f7-message-avatar-border-radius);
  17560. position: relative;
  17561. background-size: cover;
  17562. align-self: flex-end;
  17563. flex-shrink: 0;
  17564. width: var(--f7-message-avatar-size);
  17565. height: var(--f7-message-avatar-size);
  17566. }
  17567. .message-content {
  17568. position: relative;
  17569. display: flex;
  17570. flex-direction: column;
  17571. }
  17572. .message-header,
  17573. .message-footer,
  17574. .message-name {
  17575. line-height: 1;
  17576. }
  17577. .message-header {
  17578. color: var(--f7-message-header-text-color);
  17579. font-size: var(--f7-message-header-font-size);
  17580. }
  17581. .message-footer {
  17582. color: var(--f7-message-footer-text-color);
  17583. font-size: var(--f7-message-footer-font-size);
  17584. margin-bottom: -1em;
  17585. }
  17586. .message-name {
  17587. color: var(--f7-message-name-text-color);
  17588. font-size: var(--f7-message-name-font-size);
  17589. font-weight: var(--f7-message-name-font-weight);
  17590. }
  17591. .message-bubble {
  17592. box-sizing: border-box;
  17593. word-break: break-word;
  17594. display: flex;
  17595. flex-direction: column;
  17596. position: relative;
  17597. line-height: var(--f7-message-bubble-line-height);
  17598. font-size: var(--f7-message-bubble-font-size);
  17599. border-radius: var(--f7-message-bubble-border-radius);
  17600. padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
  17601. min-height: var(--f7-message-bubble-min-height);
  17602. }
  17603. .message-image img {
  17604. display: block;
  17605. max-width: 100%;
  17606. height: auto;
  17607. width: auto;
  17608. }
  17609. .message-text-header,
  17610. .message-text-footer {
  17611. line-height: 1;
  17612. }
  17613. .message-text-header {
  17614. color: var(--f7-message-text-header-text-color);
  17615. opacity: var(--f7-message-text-header-opacity);
  17616. font-size: var(--f7-message-text-header-font-size);
  17617. }
  17618. .message-text-footer {
  17619. color: var(--f7-message-text-footer-text-color);
  17620. opacity: var(--f7-message-text-footer-opacity);
  17621. font-size: var(--f7-message-text-footer-font-size);
  17622. }
  17623. .message-text {
  17624. text-align: left;
  17625. }
  17626. .message-sent {
  17627. text-align: right;
  17628. flex-direction: row-reverse;
  17629. align-self: flex-end;
  17630. }
  17631. .message-sent .message-bubble {
  17632. color: var(--f7-message-sent-text-color);
  17633. background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
  17634. }
  17635. .message-sent .message-content {
  17636. align-items: flex-end;
  17637. }
  17638. .message-sent.message-tail .message-bubble {
  17639. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
  17640. }
  17641. .message-received {
  17642. flex-direction: row;
  17643. }
  17644. .message-received .message-bubble {
  17645. color: var(--f7-message-received-text-color);
  17646. background: var(--f7-message-received-bg-color);
  17647. }
  17648. .message-received .message-content {
  17649. align-items: flex-start;
  17650. }
  17651. .message-received.message-tail .message-bubble {
  17652. border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
  17653. }
  17654. .message:not(.message-last) .message-avatar {
  17655. opacity: 0;
  17656. }
  17657. .message:not(.message-first) .message-name {
  17658. display: none;
  17659. }
  17660. .message.message-same-name .message-name {
  17661. display: none;
  17662. }
  17663. .message.message-same-header .message-header {
  17664. display: none;
  17665. }
  17666. .message.message-same-footer .message-footer {
  17667. display: none;
  17668. }
  17669. .message-appear-from-bottom {
  17670. animation: message-appear-from-bottom 300ms;
  17671. }
  17672. .message-appear-from-top {
  17673. animation: message-appear-from-top 300ms;
  17674. }
  17675. .message-typing-indicator {
  17676. display: inline-block;
  17677. font-size: 0;
  17678. vertical-align: middle;
  17679. }
  17680. .message-typing-indicator > div {
  17681. display: inline-block;
  17682. position: relative;
  17683. background: var(--f7-message-typing-indicator-bg-color);
  17684. opacity: var(--f7-message-typing-indicator-opacity);
  17685. vertical-align: middle;
  17686. border-radius: 50%;
  17687. }
  17688. @keyframes message-appear-from-bottom {
  17689. from {
  17690. transform: translate3d(0, 100%, 0);
  17691. }
  17692. to {
  17693. transform: translate3d(0, 0, 0);
  17694. }
  17695. }
  17696. @keyframes message-appear-from-top {
  17697. from {
  17698. transform: translate3d(0, -100%, 0);
  17699. }
  17700. to {
  17701. transform: translate3d(0, 0, 0);
  17702. }
  17703. }
  17704. .ios .messages-title b,
  17705. .ios .message-header b,
  17706. .ios .message-footer b,
  17707. .ios .message-name b {
  17708. font-weight: 600;
  17709. }
  17710. .ios .message-header,
  17711. .ios .message-name {
  17712. margin-bottom: 3px;
  17713. }
  17714. .ios .message-footer {
  17715. margin-top: 3px;
  17716. }
  17717. .ios .message-bubble {
  17718. min-width: 48px;
  17719. }
  17720. .ios .message-image {
  17721. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
  17722. }
  17723. .ios .message-image:first-child {
  17724. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
  17725. }
  17726. .ios .message-image:first-child img {
  17727. border-top-left-radius: var(--f7-message-bubble-border-radius);
  17728. border-top-right-radius: var(--f7-message-bubble-border-radius);
  17729. }
  17730. .ios .message-image:last-child {
  17731. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
  17732. }
  17733. .ios .message-image:last-child img {
  17734. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  17735. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  17736. }
  17737. .ios .message-text-header {
  17738. margin-bottom: 3px;
  17739. }
  17740. .ios .message-text-footer {
  17741. margin-top: 3px;
  17742. }
  17743. .ios .message-received {
  17744. margin-left: calc(10px + var(--f7-safe-area-left));
  17745. }
  17746. .ios .message-received .message-header,
  17747. .ios .message-received .message-footer,
  17748. .ios .message-received .message-name {
  17749. margin-left: var(--f7-message-bubble-padding-horizontal);
  17750. }
  17751. .ios .message-received .message-bubble {
  17752. padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  17753. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
  17754. }
  17755. .ios .message-received .message-image {
  17756. margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  17757. }
  17758. .ios .message-received.message-tail:not(.message-typing) .message-bubble {
  17759. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
  17760. }
  17761. .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
  17762. border-bottom-left-radius: 0px;
  17763. }
  17764. .ios .message-sent {
  17765. margin-right: calc(10px + var(--f7-safe-area-right));
  17766. }
  17767. .ios .message-sent .message-header,
  17768. .ios .message-sent .message-footer,
  17769. .ios .message-sent .message-name {
  17770. margin-right: var(--f7-message-bubble-padding-horizontal);
  17771. }
  17772. .ios .message-sent .message-bubble {
  17773. padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
  17774. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
  17775. }
  17776. .ios .message-sent .message-image {
  17777. margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
  17778. }
  17779. .ios .message-sent.message-tail .message-bubble {
  17780. -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
  17781. }
  17782. .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
  17783. border-bottom-right-radius: 0px;
  17784. }
  17785. .ios .message + .message:not(.message-first) {
  17786. margin-top: 1px;
  17787. }
  17788. .ios .message-received.message-typing .message-content:after,
  17789. .ios .message-received.message-typing .message-content:before {
  17790. content: '';
  17791. position: absolute;
  17792. background: var(--f7-message-received-bg-color);
  17793. border-radius: 50%;
  17794. }
  17795. .ios .message-received.message-typing .message-content:after {
  17796. width: 11px;
  17797. height: 11px;
  17798. left: 4px;
  17799. bottom: 0px;
  17800. }
  17801. .ios .message-received.message-typing .message-content:before {
  17802. width: 6px;
  17803. height: 6px;
  17804. left: -1px;
  17805. bottom: -4px;
  17806. }
  17807. .ios .message-typing-indicator > div {
  17808. width: 9px;
  17809. height: 9px;
  17810. }
  17811. .ios .message-typing-indicator > div + div {
  17812. margin-left: 4px;
  17813. }
  17814. .ios .message-typing-indicator > div:nth-child(1) {
  17815. animation: ios-message-typing-indicator 900ms infinite;
  17816. }
  17817. .ios .message-typing-indicator > div:nth-child(2) {
  17818. animation: ios-message-typing-indicator 900ms 150ms infinite;
  17819. }
  17820. .ios .message-typing-indicator > div:nth-child(3) {
  17821. animation: ios-message-typing-indicator 900ms 300ms infinite;
  17822. }
  17823. @keyframes ios-message-typing-indicator {
  17824. 0% {
  17825. opacity: 0.35;
  17826. }
  17827. 25% {
  17828. opacity: 0.2;
  17829. }
  17830. 50% {
  17831. opacity: 0.2;
  17832. }
  17833. }
  17834. .md .messages-title b,
  17835. .md .message-header b,
  17836. .md .message-footer b,
  17837. .md .message-name b {
  17838. font-weight: 500;
  17839. }
  17840. .md .message-header,
  17841. .md .message-name {
  17842. margin-bottom: 2px;
  17843. }
  17844. .md .message-footer {
  17845. margin-top: 2px;
  17846. }
  17847. .md .message-text-header {
  17848. margin-bottom: 4px;
  17849. }
  17850. .md .message-text-footer {
  17851. margin-top: 4px;
  17852. }
  17853. .md .message-received.message-tail .message-bubble:before,
  17854. .md .message-sent.message-tail .message-bubble:before {
  17855. position: absolute;
  17856. content: '';
  17857. bottom: 0;
  17858. width: 0;
  17859. height: 0;
  17860. }
  17861. .md .message-received {
  17862. margin-left: calc(8px + var(--f7-safe-area-left));
  17863. }
  17864. .md .message-received .message-avatar + .message-content {
  17865. margin-left: var(--f7-message-bubble-padding-horizontal);
  17866. }
  17867. .md .message-received.message-tail .message-bubble:before {
  17868. border-left: 8px solid transparent;
  17869. border-right: 0 solid transparent;
  17870. border-bottom: 8px solid var(--f7-message-received-bg-color);
  17871. right: 100%;
  17872. }
  17873. .md .message-sent {
  17874. margin-right: calc(8px + var(--f7-safe-area-right));
  17875. }
  17876. .md .message-sent .message-avatar + .message-content {
  17877. margin-right: var(--f7-message-bubble-padding-horizontal);
  17878. }
  17879. .md .message-sent.message-tail .message-bubble:before {
  17880. border-left: 0 solid transparent;
  17881. border-right: 8px solid transparent;
  17882. border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  17883. left: 100%;
  17884. }
  17885. .md .message + .message:not(.message-first) {
  17886. margin-top: 8px;
  17887. }
  17888. .md .message-typing-indicator > div {
  17889. width: 6px;
  17890. height: 6px;
  17891. }
  17892. .md .message-typing-indicator > div + div {
  17893. margin-left: 6px;
  17894. }
  17895. .md .message-typing-indicator > div:nth-child(1) {
  17896. animation: md-message-typing-indicator 900ms infinite;
  17897. }
  17898. .md .message-typing-indicator > div:nth-child(2) {
  17899. animation: md-message-typing-indicator 900ms 150ms infinite;
  17900. }
  17901. .md .message-typing-indicator > div:nth-child(3) {
  17902. animation: md-message-typing-indicator 900ms 300ms infinite;
  17903. }
  17904. @keyframes md-message-typing-indicator {
  17905. 0% {
  17906. transform: translateY(0%);
  17907. }
  17908. 25% {
  17909. transform: translateY(-5px);
  17910. }
  17911. 50% {
  17912. transform: translateY(0%);
  17913. }
  17914. }
  17915. .aurora .messages-title b,
  17916. .aurora .message-header b,
  17917. .aurora .message-footer b,
  17918. .aurora .message-name b {
  17919. font-weight: 500;
  17920. }
  17921. .aurora .message-header,
  17922. .aurora .message-name {
  17923. margin-bottom: 2px;
  17924. }
  17925. .aurora .message-footer {
  17926. margin-top: 2px;
  17927. }
  17928. .aurora .message-text-header {
  17929. margin-bottom: 2px;
  17930. }
  17931. .aurora .message-text-footer {
  17932. margin-top: 2px;
  17933. }
  17934. .aurora .message-received.message-tail .message-bubble:before,
  17935. .aurora .message-sent.message-tail .message-bubble:before {
  17936. position: absolute;
  17937. content: '';
  17938. bottom: 0;
  17939. width: 0;
  17940. height: 0;
  17941. }
  17942. .aurora .message-image {
  17943. margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
  17944. }
  17945. .aurora .message-image:first-child {
  17946. margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  17947. }
  17948. .aurora .message-image:first-child img {
  17949. border-top-left-radius: var(--f7-message-bubble-border-radius);
  17950. border-top-right-radius: var(--f7-message-bubble-border-radius);
  17951. }
  17952. .aurora .message-image:last-child {
  17953. margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
  17954. }
  17955. .aurora .message-image:last-child img {
  17956. border-bottom-left-radius: var(--f7-message-bubble-border-radius);
  17957. border-bottom-right-radius: var(--f7-message-bubble-border-radius);
  17958. }
  17959. .aurora .message-received {
  17960. margin-left: calc(16px + var(--f7-safe-area-left));
  17961. }
  17962. .aurora .message-received .message-avatar + .message-content {
  17963. margin-left: 5px;
  17964. }
  17965. .aurora .message-received .message-header,
  17966. .aurora .message-received .message-footer,
  17967. .aurora .message-received .message-name {
  17968. margin-left: var(--f7-message-bubble-padding-horizontal);
  17969. }
  17970. .aurora .message-received.message-tail .message-bubble:before {
  17971. border-left: 6px solid transparent;
  17972. border-right: 0 solid transparent;
  17973. border-bottom: 6px solid var(--f7-message-received-bg-color);
  17974. right: 100%;
  17975. transform: translate(2px, 0px) rotate(-15deg);
  17976. transform-origin: right bottom;
  17977. }
  17978. .aurora .message-sent {
  17979. margin-right: calc(16px + var(--f7-safe-area-right));
  17980. }
  17981. .aurora .message-sent .message-avatar + .message-content {
  17982. margin-right: 5px;
  17983. }
  17984. .aurora .message-sent .message-header,
  17985. .aurora .message-sent .message-footer,
  17986. .aurora .message-sent .message-name {
  17987. margin-right: var(--f7-message-bubble-padding-horizontal);
  17988. }
  17989. .aurora .message-sent.message-tail .message-bubble:before {
  17990. border-left: 0 solid transparent;
  17991. border-right: 6px solid transparent;
  17992. border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
  17993. left: 100%;
  17994. transform: translate(-2px, 0px) rotate(15deg);
  17995. transform-origin: left bottom;
  17996. }
  17997. .aurora .message + .message:not(.message-first) {
  17998. margin-top: 5px;
  17999. }
  18000. .aurora .message-typing-indicator > div {
  18001. width: 6px;
  18002. height: 6px;
  18003. }
  18004. .aurora .message-typing-indicator > div + div {
  18005. margin-left: 4px;
  18006. }
  18007. .aurora .message-typing-indicator > div:nth-child(1) {
  18008. animation: aurora-message-typing-indicator 900ms infinite;
  18009. }
  18010. .aurora .message-typing-indicator > div:nth-child(2) {
  18011. animation: aurora-message-typing-indicator 900ms 150ms infinite;
  18012. }
  18013. .aurora .message-typing-indicator > div:nth-child(3) {
  18014. animation: aurora-message-typing-indicator 900ms 300ms infinite;
  18015. }
  18016. @keyframes aurora-message-typing-indicator {
  18017. 0% {
  18018. transform: translateY(0%);
  18019. }
  18020. 50% {
  18021. transform: translateY(-5px);
  18022. }
  18023. 100% {
  18024. transform: translateY(0%);
  18025. }
  18026. }
  18027. /* === Messagebar === */
  18028. :root {
  18029. --f7-messagebar-shadow-image: none;
  18030. --f7-messagebar-textarea-bg-color: transparent;
  18031. --f7-messagebar-attachments-height: 155px;
  18032. --f7-messagebar-attachment-height: 155px;
  18033. --f7-messagebar-attachment-landscape-height: 120px;
  18034. --f7-messagebar-sheet-height: 252px;
  18035. --f7-messagebar-sheet-landscape-height: 192px;
  18036. /*
  18037. --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
  18038. --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
  18039. */
  18040. --f7-messagebar-bg-color: #fff;
  18041. --f7-messagebar-bg-color-rgb: 255, 255, 255;
  18042. }
  18043. :root .theme-dark,
  18044. :root.theme-dark {
  18045. --f7-messagebar-bg-color: var(--f7-bars-bg-color);
  18046. --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  18047. }
  18048. .ios {
  18049. --f7-messagebar-height: 44px;
  18050. --f7-messagebar-font-size: 17px;
  18051. /*
  18052. --f7-messagebar-link-color: var(--f7-theme-color);
  18053. */
  18054. --f7-messagebar-border-color: transparent;
  18055. --f7-messagebar-textarea-border-radius: 17px;
  18056. --f7-messagebar-textarea-padding: 6px 16px;
  18057. --f7-messagebar-textarea-height: 34px;
  18058. --f7-messagebar-textarea-font-size: 17px;
  18059. --f7-messagebar-textarea-line-height: 20px;
  18060. --f7-messagebar-sheet-bg-color: #d1d5da;
  18061. --f7-messagebar-attachment-border-radius: 12px;
  18062. --f7-messagebar-textarea-text-color: #000;
  18063. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  18064. --f7-messagebar-attachments-border-color: #c8c8cd;
  18065. }
  18066. .ios .theme-dark,
  18067. .ios.theme-dark {
  18068. --f7-messagebar-textarea-text-color: #fff;
  18069. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  18070. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  18071. }
  18072. .md {
  18073. --f7-messagebar-height: 48px;
  18074. --f7-messagebar-font-size: 16px;
  18075. --f7-messagebar-textarea-border-radius: 0px;
  18076. --f7-messagebar-textarea-padding: 5px 8px;
  18077. --f7-messagebar-textarea-height: 32px;
  18078. --f7-messagebar-textarea-font-size: 16px;
  18079. --f7-messagebar-textarea-line-height: 22px;
  18080. --f7-messagebar-textarea-border: 1px solid transparent;
  18081. --f7-messagebar-sheet-bg-color: #fff;
  18082. --f7-messagebar-attachment-border-radius: 4px;
  18083. --f7-messagebar-link-color: #333;
  18084. --f7-messagebar-border-color: #d1d1d1;
  18085. --f7-messagebar-textarea-text-color: #333;
  18086. --f7-messagebar-attachments-border-color: #ddd;
  18087. }
  18088. .md .theme-dark,
  18089. .md.theme-dark {
  18090. --f7-messagebar-border-color: transparent;
  18091. --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
  18092. --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
  18093. --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
  18094. }
  18095. .aurora {
  18096. --f7-messagebar-height: 38px;
  18097. --f7-messagebar-font-size: 14px;
  18098. /*
  18099. --f7-messagebar-link-color: var(--f7-theme-color);
  18100. */
  18101. --f7-messagebar-border-color: transparent;
  18102. --f7-messagebar-textarea-border-radius: 12px;
  18103. --f7-messagebar-textarea-padding: 3px 10px;
  18104. --f7-messagebar-textarea-height: 24px;
  18105. --f7-messagebar-textarea-font-size: 13px;
  18106. --f7-messagebar-textarea-line-height: 16px;
  18107. --f7-messagebar-sheet-bg-color: #fff;
  18108. --f7-messagebar-attachment-border-radius: 12px;
  18109. --f7-messagebar-textarea-text-color: #000;
  18110. --f7-messagebar-textarea-border: 1px solid #c8c8cd;
  18111. --f7-messagebar-attachments-border-color: #c8c8cd;
  18112. }
  18113. .aurora .theme-dark,
  18114. .aurora.theme-dark {
  18115. --f7-messagebar-textarea-text-color: #fff;
  18116. --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
  18117. --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
  18118. }
  18119. .messagebar {
  18120. transform: translate3d(0, 0, 0);
  18121. background: var(--f7-messagebar-bg-color);
  18122. height: auto;
  18123. min-height: var(--f7-messagebar-height);
  18124. font-size: var(--f7-messagebar-font-size);
  18125. padding-bottom: var(--f7-safe-area-bottom);
  18126. bottom: 0;
  18127. }
  18128. .messagebar:before {
  18129. content: '';
  18130. position: absolute;
  18131. background-color: var(--f7-messagebar-border-color);
  18132. display: block;
  18133. z-index: 15;
  18134. top: 0;
  18135. right: auto;
  18136. bottom: auto;
  18137. left: 0;
  18138. height: 1px;
  18139. width: 100%;
  18140. transform-origin: 50% 0%;
  18141. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  18142. }
  18143. .messagebar:after {
  18144. content: '';
  18145. position: absolute;
  18146. right: 0;
  18147. width: 100%;
  18148. bottom: 100%;
  18149. height: 8px;
  18150. top: auto;
  18151. pointer-events: none;
  18152. background: var(--f7-messagebar-shadow-image);
  18153. transform: translate3d(0, 0, 0);
  18154. }
  18155. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  18156. .ios-translucent-bars .messagebar {
  18157. background-color: rgba(var(--f7-messagebar-bg-color-rgb), var(--f7-bars-translucent-opacity));
  18158. -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  18159. backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
  18160. }
  18161. }
  18162. .messagebar.no-hairline:before,
  18163. .messagebar.no-border:before {
  18164. display: none !important;
  18165. }
  18166. .messagebar.no-shadow:after,
  18167. .messagebar.toolbar-hidden:after {
  18168. display: none !important;
  18169. }
  18170. .messagebar .toolbar-inner {
  18171. top: auto;
  18172. position: relative;
  18173. height: auto;
  18174. bottom: auto;
  18175. padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
  18176. padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
  18177. }
  18178. .messagebar.messagebar-sheet-visible > .toolbar-inner {
  18179. bottom: 0;
  18180. }
  18181. .messagebar .messagebar-area {
  18182. width: 100%;
  18183. flex-shrink: 1;
  18184. overflow: hidden;
  18185. position: relative;
  18186. }
  18187. .messagebar textarea {
  18188. width: 100%;
  18189. flex-shrink: 1;
  18190. background-color: var(--f7-messagebar-textarea-bg-color);
  18191. border-radius: var(--f7-messagebar-textarea-border-radius);
  18192. padding: var(--f7-messagebar-textarea-padding);
  18193. height: var(--f7-messagebar-textarea-height);
  18194. color: var(--f7-messagebar-textarea-text-color);
  18195. font-size: var(--f7-messagebar-textarea-font-size);
  18196. line-height: var(--f7-messagebar-textarea-line-height);
  18197. border: var(--f7-messagebar-textarea-border);
  18198. }
  18199. .messagebar a.link {
  18200. align-self: flex-end;
  18201. flex-shrink: 0;
  18202. color: var(--f7-messagebar-link-color, var(--f7-theme-color));
  18203. }
  18204. .messagebar-attachments {
  18205. width: 100%;
  18206. overflow: auto;
  18207. -webkit-overflow-scrolling: touch;
  18208. font-size: 0;
  18209. white-space: nowrap;
  18210. box-sizing: border-box;
  18211. position: relative;
  18212. }
  18213. .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
  18214. display: none;
  18215. }
  18216. .messagebar-attachment {
  18217. background-size: cover;
  18218. background-position: center;
  18219. background-repeat: no-repeat;
  18220. display: inline-block;
  18221. vertical-align: middle;
  18222. white-space: normal;
  18223. height: var(--f7-messagebar-attachment-height);
  18224. position: relative;
  18225. border-radius: var(--f7-messagebar-attachment-border-radius);
  18226. }
  18227. @media (orientation: landscape) {
  18228. .messagebar-attachment {
  18229. height: var(--f7-messagebar-attachment-landscape-height);
  18230. }
  18231. }
  18232. .messagebar-attachment img {
  18233. display: block;
  18234. width: auto;
  18235. height: 100%;
  18236. border-radius: var(--f7-messagebar-attachment-border-radius);
  18237. }
  18238. .messagebar-attachment + .messagebar-attachment {
  18239. margin-left: 8px;
  18240. }
  18241. .messagebar-sheet {
  18242. overflow: auto;
  18243. -webkit-overflow-scrolling: touch;
  18244. display: flex;
  18245. flex-wrap: wrap;
  18246. flex-direction: column;
  18247. align-content: flex-start;
  18248. height: var(--f7-messagebar-sheet-height);
  18249. background-color: var(--f7-messagebar-sheet-bg-color);
  18250. padding-left: var(--f7-safe-area-left);
  18251. padding-right: var(--f7-safe-area-right);
  18252. }
  18253. @media (orientation: landscape) {
  18254. .messagebar-sheet {
  18255. height: var(--f7-messagebar-sheet-landscape-height);
  18256. }
  18257. }
  18258. .messagebar-sheet-image,
  18259. .messagebar-sheet-item {
  18260. box-sizing: border-box;
  18261. flex-shrink: 0;
  18262. margin-top: 1px;
  18263. position: relative;
  18264. overflow: hidden;
  18265. height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  18266. width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
  18267. margin-left: 1px;
  18268. }
  18269. @media (orientation: landscape) {
  18270. .messagebar-sheet-image,
  18271. .messagebar-sheet-item {
  18272. width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  18273. height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
  18274. }
  18275. }
  18276. .messagebar-sheet-image .icon-checkbox,
  18277. .messagebar-sheet-item .icon-checkbox,
  18278. .messagebar-sheet-image .icon-radio,
  18279. .messagebar-sheet-item .icon-radio {
  18280. position: absolute;
  18281. right: 8px;
  18282. bottom: 8px;
  18283. }
  18284. .messagebar-sheet-image {
  18285. background-size: cover;
  18286. background-position: center;
  18287. background-repeat: no-repeat;
  18288. }
  18289. .messagebar-attachment-delete {
  18290. display: block;
  18291. position: absolute;
  18292. border-radius: 50%;
  18293. box-sizing: border-box;
  18294. cursor: pointer;
  18295. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  18296. }
  18297. .messagebar-attachment-delete:after,
  18298. .messagebar-attachment-delete:before {
  18299. position: absolute;
  18300. content: '';
  18301. left: 50%;
  18302. top: 50%;
  18303. }
  18304. .messagebar-attachment-delete:after {
  18305. transform: rotate(45deg);
  18306. }
  18307. .messagebar-attachment-delete:before {
  18308. transform: rotate(-45deg);
  18309. }
  18310. .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
  18311. display: none;
  18312. }
  18313. .messagebar ~ * {
  18314. --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
  18315. }
  18316. .ios .messagebar a.link.icon-only:first-child {
  18317. margin-left: -8px;
  18318. }
  18319. .ios .messagebar a.link.icon-only:last-child {
  18320. margin-right: -8px;
  18321. }
  18322. .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
  18323. margin-left: 8px;
  18324. }
  18325. .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
  18326. margin-left: 8px;
  18327. }
  18328. .ios .messagebar-area {
  18329. margin-top: 5px;
  18330. margin-bottom: 5px;
  18331. }
  18332. .ios .messagebar-attachments {
  18333. padding: 5px;
  18334. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  18335. border: 1px solid var(--f7-messagebar-attachments-border-color);
  18336. border-bottom: none;
  18337. }
  18338. .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
  18339. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  18340. }
  18341. .ios .messagebar-attachment {
  18342. font-size: 14px;
  18343. }
  18344. .ios .messagebar-attachment-delete {
  18345. right: 5px;
  18346. top: 5px;
  18347. width: 20px;
  18348. height: 20px;
  18349. background: #7d7e80;
  18350. border: 2px solid #fff;
  18351. }
  18352. .ios .messagebar-attachment-delete:after,
  18353. .ios .messagebar-attachment-delete:before {
  18354. width: 10px;
  18355. height: 2px;
  18356. background: #fff;
  18357. margin-left: -5px;
  18358. margin-top: -1px;
  18359. }
  18360. .md .messagebar-attachments {
  18361. padding: 8px;
  18362. border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
  18363. }
  18364. .md .messagebar-area {
  18365. margin-top: 8px;
  18366. margin-bottom: 8px;
  18367. }
  18368. .md .messagebar-sheet-image .icon-checkbox,
  18369. .md .messagebar-sheet-item .icon-checkbox {
  18370. border-color: #fff;
  18371. background: rgba(255, 255, 255, 0.25);
  18372. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  18373. }
  18374. .md .messagebar-attachment-delete {
  18375. right: 8px;
  18376. top: 8px;
  18377. width: 24px;
  18378. height: 24px;
  18379. background-color: var(--f7-theme-color);
  18380. border-radius: 4px;
  18381. }
  18382. .md .messagebar-attachment-delete:after,
  18383. .md .messagebar-attachment-delete:before {
  18384. width: 14px;
  18385. height: 2px;
  18386. background: #fff;
  18387. margin-left: -7px;
  18388. margin-top: -1px;
  18389. }
  18390. .aurora .messagebar a.link + .messagebar-area {
  18391. margin-left: 5px;
  18392. }
  18393. .aurora .messagebar .messagebar-area + a.link {
  18394. margin-left: 5px;
  18395. }
  18396. .aurora .messagebar-area {
  18397. margin-top: 5px;
  18398. margin-bottom: 5px;
  18399. }
  18400. .aurora .messagebar-sheet-image .icon-checkbox,
  18401. .aurora .messagebar-sheet-item .icon-checkbox {
  18402. background: rgba(255, 255, 255, 0.25);
  18403. }
  18404. .aurora .messagebar-attachments {
  18405. padding: 5px;
  18406. border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
  18407. border: 1px solid var(--f7-messagebar-attachments-border-color);
  18408. border-bottom: none;
  18409. }
  18410. .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
  18411. border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
  18412. }
  18413. .aurora .messagebar-attachment {
  18414. font-size: 14px;
  18415. }
  18416. .aurora .messagebar-attachment-delete {
  18417. right: 5px;
  18418. top: 5px;
  18419. width: 14px;
  18420. height: 14px;
  18421. background: #808080;
  18422. }
  18423. .aurora .messagebar-attachment-delete:after,
  18424. .aurora .messagebar-attachment-delete:before {
  18425. width: 8px;
  18426. height: 1px;
  18427. background: #fff;
  18428. margin-left: -4px;
  18429. margin-top: -1px;
  18430. }
  18431. /* === Swiper === */
  18432. @font-face {
  18433. font-family: 'swiper-icons';
  18434. src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  18435. font-weight: 400;
  18436. font-style: normal;
  18437. }
  18438. :root {
  18439. --swiper-theme-color: #007aff;
  18440. }
  18441. .swiper-container {
  18442. margin-left: auto;
  18443. margin-right: auto;
  18444. position: relative;
  18445. overflow: hidden;
  18446. list-style: none;
  18447. padding: 0;
  18448. /* Fix of Webkit flickering */
  18449. z-index: 1;
  18450. }
  18451. .swiper-container-vertical > .swiper-wrapper {
  18452. flex-direction: column;
  18453. }
  18454. .swiper-wrapper {
  18455. position: relative;
  18456. width: 100%;
  18457. height: 100%;
  18458. z-index: 1;
  18459. display: flex;
  18460. transition-property: transform;
  18461. box-sizing: content-box;
  18462. }
  18463. .swiper-container-android .swiper-slide,
  18464. .swiper-wrapper {
  18465. transform: translate3d(0px, 0, 0);
  18466. }
  18467. .swiper-container-multirow > .swiper-wrapper {
  18468. flex-wrap: wrap;
  18469. }
  18470. .swiper-container-multirow-column > .swiper-wrapper {
  18471. flex-wrap: wrap;
  18472. flex-direction: column;
  18473. }
  18474. .swiper-container-free-mode > .swiper-wrapper {
  18475. transition-timing-function: ease-out;
  18476. margin: 0 auto;
  18477. }
  18478. .swiper-slide {
  18479. flex-shrink: 0;
  18480. width: 100%;
  18481. height: 100%;
  18482. position: relative;
  18483. transition-property: transform;
  18484. }
  18485. .swiper-slide-invisible-blank {
  18486. visibility: hidden;
  18487. }
  18488. /* Auto Height */
  18489. .swiper-container-autoheight,
  18490. .swiper-container-autoheight .swiper-slide {
  18491. height: auto;
  18492. }
  18493. .swiper-container-autoheight .swiper-wrapper {
  18494. align-items: flex-start;
  18495. transition-property: transform, height;
  18496. }
  18497. /* 3D Effects */
  18498. .swiper-container-3d {
  18499. perspective: 1200px;
  18500. }
  18501. .swiper-container-3d .swiper-wrapper,
  18502. .swiper-container-3d .swiper-slide,
  18503. .swiper-container-3d .swiper-slide-shadow-left,
  18504. .swiper-container-3d .swiper-slide-shadow-right,
  18505. .swiper-container-3d .swiper-slide-shadow-top,
  18506. .swiper-container-3d .swiper-slide-shadow-bottom,
  18507. .swiper-container-3d .swiper-cube-shadow {
  18508. transform-style: preserve-3d;
  18509. }
  18510. .swiper-container-3d .swiper-slide-shadow-left,
  18511. .swiper-container-3d .swiper-slide-shadow-right,
  18512. .swiper-container-3d .swiper-slide-shadow-top,
  18513. .swiper-container-3d .swiper-slide-shadow-bottom {
  18514. position: absolute;
  18515. left: 0;
  18516. top: 0;
  18517. width: 100%;
  18518. height: 100%;
  18519. pointer-events: none;
  18520. z-index: 10;
  18521. }
  18522. .swiper-container-3d .swiper-slide-shadow-left {
  18523. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18524. }
  18525. .swiper-container-3d .swiper-slide-shadow-right {
  18526. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18527. }
  18528. .swiper-container-3d .swiper-slide-shadow-top {
  18529. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18530. }
  18531. .swiper-container-3d .swiper-slide-shadow-bottom {
  18532. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  18533. }
  18534. /* CSS Mode */
  18535. .swiper-container-css-mode > .swiper-wrapper {
  18536. overflow: auto;
  18537. scrollbar-width: none;
  18538. /* For Firefox */
  18539. -ms-overflow-style: none;
  18540. /* For Internet Explorer and Edge */
  18541. }
  18542. .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  18543. display: none;
  18544. }
  18545. .swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  18546. scroll-snap-align: start start;
  18547. }
  18548. .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  18549. scroll-snap-type: x mandatory;
  18550. }
  18551. .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  18552. scroll-snap-type: y mandatory;
  18553. }
  18554. /* a11y */
  18555. .swiper-container .swiper-notification {
  18556. position: absolute;
  18557. left: 0;
  18558. top: 0;
  18559. pointer-events: none;
  18560. opacity: 0;
  18561. z-index: -1000;
  18562. }
  18563. .swiper-container-cube {
  18564. overflow: visible;
  18565. }
  18566. .swiper-container-cube .swiper-slide {
  18567. pointer-events: none;
  18568. -webkit-backface-visibility: hidden;
  18569. backface-visibility: hidden;
  18570. z-index: 1;
  18571. visibility: hidden;
  18572. transform-origin: 0 0;
  18573. width: 100%;
  18574. height: 100%;
  18575. }
  18576. .swiper-container-cube .swiper-slide .swiper-slide {
  18577. pointer-events: none;
  18578. }
  18579. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  18580. transform-origin: 100% 0;
  18581. }
  18582. .swiper-container-cube .swiper-slide-active,
  18583. .swiper-container-cube .swiper-slide-active .swiper-slide-active {
  18584. pointer-events: auto;
  18585. }
  18586. .swiper-container-cube .swiper-slide-active,
  18587. .swiper-container-cube .swiper-slide-next,
  18588. .swiper-container-cube .swiper-slide-prev,
  18589. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  18590. pointer-events: auto;
  18591. visibility: visible;
  18592. }
  18593. .swiper-container-cube .swiper-slide-shadow-top,
  18594. .swiper-container-cube .swiper-slide-shadow-bottom,
  18595. .swiper-container-cube .swiper-slide-shadow-left,
  18596. .swiper-container-cube .swiper-slide-shadow-right {
  18597. z-index: 0;
  18598. -webkit-backface-visibility: hidden;
  18599. backface-visibility: hidden;
  18600. }
  18601. .swiper-container-cube .swiper-cube-shadow {
  18602. position: absolute;
  18603. left: 0;
  18604. bottom: 0px;
  18605. width: 100%;
  18606. height: 100%;
  18607. background: #000;
  18608. opacity: 0.6;
  18609. -webkit-filter: blur(50px);
  18610. filter: blur(50px);
  18611. z-index: 0;
  18612. }
  18613. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  18614. transition-timing-function: ease-out;
  18615. }
  18616. .swiper-container-fade .swiper-slide {
  18617. pointer-events: none;
  18618. transition-property: opacity;
  18619. }
  18620. .swiper-container-fade .swiper-slide .swiper-slide {
  18621. pointer-events: none;
  18622. }
  18623. .swiper-container-fade .swiper-slide-active,
  18624. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  18625. pointer-events: auto;
  18626. }
  18627. .swiper-container-flip {
  18628. overflow: visible;
  18629. }
  18630. .swiper-container-flip .swiper-slide {
  18631. pointer-events: none;
  18632. -webkit-backface-visibility: hidden;
  18633. backface-visibility: hidden;
  18634. z-index: 1;
  18635. }
  18636. .swiper-container-flip .swiper-slide .swiper-slide {
  18637. pointer-events: none;
  18638. }
  18639. .swiper-container-flip .swiper-slide-active,
  18640. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  18641. pointer-events: auto;
  18642. }
  18643. .swiper-container-flip .swiper-slide-shadow-top,
  18644. .swiper-container-flip .swiper-slide-shadow-bottom,
  18645. .swiper-container-flip .swiper-slide-shadow-left,
  18646. .swiper-container-flip .swiper-slide-shadow-right {
  18647. z-index: 0;
  18648. -webkit-backface-visibility: hidden;
  18649. backface-visibility: hidden;
  18650. }
  18651. /* Preloader */
  18652. :root {
  18653. /*
  18654. --swiper-preloader-color: var(--swiper-theme-color);
  18655. */
  18656. }
  18657. .swiper-lazy-preloader {
  18658. width: 42px;
  18659. height: 42px;
  18660. position: absolute;
  18661. left: 50%;
  18662. top: 50%;
  18663. margin-left: -21px;
  18664. margin-top: -21px;
  18665. z-index: 10;
  18666. transform-origin: 50%;
  18667. animation: swiper-preloader-spin 1s infinite linear;
  18668. box-sizing: border-box;
  18669. border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  18670. border-radius: 50%;
  18671. border-top-color: transparent;
  18672. }
  18673. .swiper-lazy-preloader-white {
  18674. --swiper-preloader-color: #fff;
  18675. }
  18676. .swiper-lazy-preloader-black {
  18677. --swiper-preloader-color: #000;
  18678. }
  18679. @keyframes swiper-preloader-spin {
  18680. 100% {
  18681. transform: rotate(360deg);
  18682. }
  18683. }
  18684. :root {
  18685. --swiper-navigation-size: 44px;
  18686. /*
  18687. --swiper-navigation-color: var(--swiper-theme-color);
  18688. */
  18689. }
  18690. .swiper-button-prev,
  18691. .swiper-button-next {
  18692. position: absolute;
  18693. top: 50%;
  18694. width: calc(var(--swiper-navigation-size) / 44 * 27);
  18695. height: var(--swiper-navigation-size);
  18696. margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  18697. z-index: 10;
  18698. cursor: pointer;
  18699. display: flex;
  18700. align-items: center;
  18701. justify-content: center;
  18702. color: var(--swiper-navigation-color, var(--swiper-theme-color));
  18703. }
  18704. .swiper-button-prev.swiper-button-disabled,
  18705. .swiper-button-next.swiper-button-disabled {
  18706. opacity: 0.35;
  18707. cursor: auto;
  18708. pointer-events: none;
  18709. }
  18710. .swiper-button-prev:after,
  18711. .swiper-button-next:after {
  18712. font-family: swiper-icons;
  18713. font-size: var(--swiper-navigation-size);
  18714. text-transform: none !important;
  18715. letter-spacing: 0;
  18716. text-transform: none;
  18717. font-variant: initial;
  18718. line-height: 1;
  18719. }
  18720. .swiper-button-prev,
  18721. .swiper-container-rtl .swiper-button-next {
  18722. left: 10px;
  18723. right: auto;
  18724. }
  18725. .swiper-button-prev:after,
  18726. .swiper-container-rtl .swiper-button-next:after {
  18727. content: 'prev';
  18728. }
  18729. .swiper-button-next,
  18730. .swiper-container-rtl .swiper-button-prev {
  18731. right: 10px;
  18732. left: auto;
  18733. }
  18734. .swiper-button-next:after,
  18735. .swiper-container-rtl .swiper-button-prev:after {
  18736. content: 'next';
  18737. }
  18738. .swiper-button-lock {
  18739. display: none;
  18740. }
  18741. :root {
  18742. /*
  18743. --swiper-pagination-color: var(--swiper-theme-color);
  18744. */
  18745. }
  18746. .swiper-pagination {
  18747. position: absolute;
  18748. text-align: center;
  18749. transition: 300ms opacity;
  18750. transform: translate3d(0, 0, 0);
  18751. z-index: 10;
  18752. }
  18753. .swiper-pagination.swiper-pagination-hidden {
  18754. opacity: 0;
  18755. }
  18756. /* Common Styles */
  18757. .swiper-pagination-fraction,
  18758. .swiper-pagination-custom,
  18759. .swiper-container-horizontal > .swiper-pagination-bullets {
  18760. bottom: 10px;
  18761. left: 0;
  18762. width: 100%;
  18763. }
  18764. /* Bullets */
  18765. .swiper-pagination-bullets-dynamic {
  18766. overflow: hidden;
  18767. font-size: 0;
  18768. }
  18769. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18770. transform: scale(0.33);
  18771. position: relative;
  18772. }
  18773. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  18774. transform: scale(1);
  18775. }
  18776. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  18777. transform: scale(1);
  18778. }
  18779. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  18780. transform: scale(0.66);
  18781. }
  18782. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  18783. transform: scale(0.33);
  18784. }
  18785. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  18786. transform: scale(0.66);
  18787. }
  18788. .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  18789. transform: scale(0.33);
  18790. }
  18791. .swiper-pagination-bullet {
  18792. width: 8px;
  18793. height: 8px;
  18794. display: inline-block;
  18795. border-radius: 100%;
  18796. background: #000;
  18797. opacity: 0.2;
  18798. }
  18799. button.swiper-pagination-bullet {
  18800. border: none;
  18801. margin: 0;
  18802. padding: 0;
  18803. box-shadow: none;
  18804. -webkit-appearance: none;
  18805. -moz-appearance: none;
  18806. appearance: none;
  18807. }
  18808. .swiper-pagination-clickable .swiper-pagination-bullet {
  18809. cursor: pointer;
  18810. }
  18811. .swiper-pagination-bullet-active {
  18812. opacity: 1;
  18813. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  18814. }
  18815. .swiper-container-vertical > .swiper-pagination-bullets {
  18816. right: 10px;
  18817. top: 50%;
  18818. transform: translate3d(0px, -50%, 0);
  18819. }
  18820. .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  18821. margin: 6px 0;
  18822. display: block;
  18823. }
  18824. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  18825. top: 50%;
  18826. transform: translateY(-50%);
  18827. width: 8px;
  18828. }
  18829. .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18830. display: inline-block;
  18831. transition: 200ms transform, 200ms top;
  18832. }
  18833. .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  18834. margin: 0 4px;
  18835. }
  18836. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  18837. left: 50%;
  18838. transform: translateX(-50%);
  18839. white-space: nowrap;
  18840. }
  18841. .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18842. transition: 200ms transform, 200ms left;
  18843. }
  18844. .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  18845. transition: 200ms transform, 200ms right;
  18846. }
  18847. /* Progress */
  18848. .swiper-pagination-progressbar {
  18849. background: rgba(0, 0, 0, 0.25);
  18850. position: absolute;
  18851. }
  18852. .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  18853. background: var(--swiper-pagination-color, var(--swiper-theme-color));
  18854. position: absolute;
  18855. left: 0;
  18856. top: 0;
  18857. width: 100%;
  18858. height: 100%;
  18859. transform: scale(0);
  18860. transform-origin: left top;
  18861. }
  18862. .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  18863. transform-origin: right top;
  18864. }
  18865. .swiper-container-horizontal > .swiper-pagination-progressbar,
  18866. .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  18867. width: 100%;
  18868. height: 4px;
  18869. left: 0;
  18870. top: 0;
  18871. }
  18872. .swiper-container-vertical > .swiper-pagination-progressbar,
  18873. .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  18874. width: 4px;
  18875. height: 100%;
  18876. left: 0;
  18877. top: 0;
  18878. }
  18879. .swiper-pagination-lock {
  18880. display: none;
  18881. }
  18882. /* Scrollbar */
  18883. .swiper-scrollbar {
  18884. border-radius: 10px;
  18885. position: relative;
  18886. -ms-touch-action: none;
  18887. background: rgba(0, 0, 0, 0.1);
  18888. }
  18889. .swiper-container-horizontal > .swiper-scrollbar {
  18890. position: absolute;
  18891. left: 1%;
  18892. bottom: 3px;
  18893. z-index: 50;
  18894. height: 5px;
  18895. width: 98%;
  18896. }
  18897. .swiper-container-vertical > .swiper-scrollbar {
  18898. position: absolute;
  18899. right: 3px;
  18900. top: 1%;
  18901. z-index: 50;
  18902. width: 5px;
  18903. height: 98%;
  18904. }
  18905. .swiper-scrollbar-drag {
  18906. height: 100%;
  18907. width: 100%;
  18908. position: relative;
  18909. background: rgba(0, 0, 0, 0.5);
  18910. border-radius: 10px;
  18911. left: 0;
  18912. top: 0;
  18913. }
  18914. .swiper-scrollbar-cursor-drag {
  18915. cursor: move;
  18916. }
  18917. .swiper-scrollbar-lock {
  18918. display: none;
  18919. }
  18920. .swiper-zoom-container {
  18921. width: 100%;
  18922. height: 100%;
  18923. display: flex;
  18924. justify-content: center;
  18925. align-items: center;
  18926. text-align: center;
  18927. }
  18928. .swiper-zoom-container > img,
  18929. .swiper-zoom-container > svg,
  18930. .swiper-zoom-container > canvas {
  18931. max-width: 100%;
  18932. max-height: 100%;
  18933. object-fit: contain;
  18934. }
  18935. .swiper-slide-zoomed {
  18936. cursor: move;
  18937. }
  18938. :root {
  18939. --swiper-theme-color: var(--f7-theme-color);
  18940. }
  18941. /* === Photo Browser === */
  18942. :root {
  18943. --f7-photobrowser-bg-color: #fff;
  18944. --f7-photobrowser-bars-bg-image: none;
  18945. /*
  18946. --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
  18947. --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
  18948. --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
  18949. */
  18950. --f7-photobrowser-caption-font-size: 14px;
  18951. --f7-photobrowser-caption-light-text-color: #000;
  18952. --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
  18953. --f7-photobrowser-caption-dark-text-color: #fff;
  18954. --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
  18955. --f7-photobrowser-exposed-bg-color: #000;
  18956. --f7-photobrowser-dark-bg-color: #000;
  18957. --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
  18958. --f7-photobrowser-dark-bars-text-color: #fff;
  18959. --f7-photobrowser-dark-bars-link-color: #fff;
  18960. }
  18961. .photo-browser {
  18962. position: absolute;
  18963. left: 0;
  18964. top: 0;
  18965. width: 100%;
  18966. height: 100%;
  18967. z-index: 400;
  18968. }
  18969. .photo-browser-standalone.modal-in {
  18970. transition-duration: 0ms;
  18971. animation: photo-browser-in 400ms;
  18972. }
  18973. .photo-browser-standalone.modal-out {
  18974. transition-duration: 0ms;
  18975. animation: photo-browser-out 400ms !important;
  18976. }
  18977. .photo-browser-standalone.modal-out.swipe-close-to-bottom,
  18978. .photo-browser-standalone.modal-out.swipe-close-to-top {
  18979. animation: none !important;
  18980. }
  18981. .photo-browser-standalone.photo-browser-transitioning {
  18982. transition: 400ms;
  18983. transition-property: transform;
  18984. animation: none !important;
  18985. }
  18986. .photo-browser-popup.modal-out.swipe-close-to-bottom,
  18987. .photo-browser-popup.modal-out.swipe-close-to-top {
  18988. transition-duration: 300ms;
  18989. }
  18990. .photo-browser-popup.modal-out.swipe-close-to-bottom {
  18991. transform: translate3d(0, 100vh, 0);
  18992. }
  18993. .photo-browser-popup.modal-out.swipe-close-to-top {
  18994. transform: translate3d(0, -100vh, 0);
  18995. }
  18996. .photo-browser-page {
  18997. background: none;
  18998. }
  18999. .photo-browser-page .toolbar {
  19000. transform: none;
  19001. }
  19002. .photo-browser-popup {
  19003. background: none;
  19004. }
  19005. .photo-browser-of {
  19006. margin: 0 5px;
  19007. }
  19008. .photo-browser-captions {
  19009. pointer-events: none;
  19010. position: absolute;
  19011. left: 0;
  19012. width: 100%;
  19013. bottom: var(--f7-safe-area-bottom);
  19014. z-index: 10;
  19015. opacity: 1;
  19016. transition: 400ms;
  19017. }
  19018. .photo-browser-captions.photo-browser-captions-exposed {
  19019. opacity: 0;
  19020. }
  19021. .toolbar ~ .photo-browser-captions {
  19022. bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
  19023. transform: translate3d(0, 0px, 0);
  19024. }
  19025. .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
  19026. transform: translate3d(0, 0px, 0);
  19027. }
  19028. .photo-browser-caption {
  19029. box-sizing: border-box;
  19030. transition: 300ms;
  19031. position: absolute;
  19032. bottom: 0;
  19033. left: 0;
  19034. opacity: 0;
  19035. padding: 4px 5px;
  19036. width: 100%;
  19037. text-align: center;
  19038. font-size: var(--f7-photobrowser-caption-font-size);
  19039. }
  19040. .photo-browser-caption:empty {
  19041. display: none;
  19042. }
  19043. .photo-browser-caption.photo-browser-caption-active {
  19044. opacity: 1;
  19045. }
  19046. .photo-browser-captions-light .photo-browser-caption {
  19047. color: var(--f7-photobrowser-caption-light-text-color);
  19048. background: var(--f7-photobrowser-caption-light-bg-color);
  19049. }
  19050. .photo-browser-captions-dark .photo-browser-caption {
  19051. color: var(--f7-photobrowser-caption-dark-text-color);
  19052. background: var(--f7-photobrowser-caption-dark-bg-color);
  19053. }
  19054. .photo-browser-swiper-container {
  19055. position: absolute;
  19056. left: 0;
  19057. top: 0;
  19058. width: 100%;
  19059. height: 100%;
  19060. overflow: hidden;
  19061. background: var(--f7-photobrowser-bg-color);
  19062. transition: 400ms;
  19063. transition-property: background-color;
  19064. }
  19065. .photo-browser-prev.swiper-button-disabled,
  19066. .photo-browser-next.swiper-button-disabled {
  19067. opacity: 0.3;
  19068. pointer-events: none;
  19069. }
  19070. .photo-browser-slide {
  19071. width: 100%;
  19072. height: 100%;
  19073. position: relative;
  19074. overflow: hidden;
  19075. display: flex;
  19076. justify-content: center;
  19077. align-items: center;
  19078. flex-shrink: 0;
  19079. box-sizing: border-box;
  19080. }
  19081. .photo-browser-slide span.swiper-zoom-container {
  19082. display: none;
  19083. }
  19084. .photo-browser-slide img {
  19085. width: auto;
  19086. height: auto;
  19087. max-width: 100%;
  19088. max-height: 100%;
  19089. display: none;
  19090. }
  19091. .photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
  19092. .photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
  19093. .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
  19094. display: flex;
  19095. }
  19096. .photo-browser-slide.swiper-slide-active img,
  19097. .photo-browser-slide.swiper-slide-next img,
  19098. .photo-browser-slide.swiper-slide-prev img {
  19099. display: inline;
  19100. }
  19101. .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
  19102. .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
  19103. .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
  19104. display: block;
  19105. }
  19106. .photo-browser-slide iframe {
  19107. width: 100%;
  19108. height: 100%;
  19109. }
  19110. .photo-browser-slide .preloader {
  19111. display: none;
  19112. position: absolute;
  19113. width: 42px;
  19114. height: 42px;
  19115. margin-left: -21px;
  19116. margin-top: -21px;
  19117. left: 50%;
  19118. top: 50%;
  19119. }
  19120. .photo-browser-page .navbar-bg,
  19121. .navbar-photo-browser .navbar-bg,
  19122. .photo-browser-page .toolbar {
  19123. background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
  19124. background-image: var(--f7-photobrowser-bars-bg-image);
  19125. }
  19126. .photo-browser-page .navbar,
  19127. .photo-browser-page .toolbar {
  19128. transition: 400ms;
  19129. color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
  19130. }
  19131. .photo-browser-page .navbar a,
  19132. .photo-browser-page .toolbar a {
  19133. color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
  19134. }
  19135. .photo-browser-exposed .navbar,
  19136. .photo-browser-exposed .toolbar {
  19137. opacity: 0;
  19138. visibility: hidden;
  19139. pointer-events: none;
  19140. }
  19141. .photo-browser-exposed .toolbar ~ .photo-browser-captions {
  19142. transform: translate3d(0, var(--f7-toolbar-height), 0);
  19143. }
  19144. .photo-browser-exposed .photo-browser-swiper-container {
  19145. background: var(--f7-photobrowser-exposed-bg-color);
  19146. }
  19147. .photo-browser-exposed .photo-browser-caption {
  19148. color: var(--f7-photobrowser-caption-dark-text-color);
  19149. background: var(--f7-photobrowser-caption-dark-bg-color);
  19150. }
  19151. .view.with-photo-browser-page-exposed .navbar {
  19152. opacity: 0;
  19153. pointer-events: none;
  19154. }
  19155. .photo-browser-page-dark .navbar-bg,
  19156. .navbar-photo-browser-dark .navbar-bg,
  19157. .photo-browser-page-dark .toolbar {
  19158. background: var(--f7-photobrowser-dark-bars-bg-color);
  19159. }
  19160. .photo-browser-page-dark .navbar-bg:before,
  19161. .navbar-photo-browser-dark .navbar-bg:before,
  19162. .photo-browser-page-dark .toolbar:before,
  19163. .photo-browser-page-dark .navbar-bg:after,
  19164. .navbar-photo-browser-dark .navbar-bg:after,
  19165. .photo-browser-page-dark .toolbar:after {
  19166. display: none !important;
  19167. }
  19168. .navbar-photo-browser-dark,
  19169. .photo-browser-dark .navbar,
  19170. .photo-browser-dark .toolbar,
  19171. .photo-browser-dark-page .navbar,
  19172. .photo-browser-dark-page .toolbar {
  19173. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  19174. --f7-link-highlight-color: var(--f7-link-highlight-white);
  19175. color: var(--f7-photobrowser-dark-bars-text-color);
  19176. }
  19177. .navbar-photo-browser-dark a,
  19178. .photo-browser-dark .navbar a,
  19179. .photo-browser-dark .toolbar a,
  19180. .photo-browser-dark-page .navbar a,
  19181. .photo-browser-dark-page .toolbar a {
  19182. color: var(--f7-photobrowser-dark-bars-link-color);
  19183. }
  19184. .photo-browser-dark .photo-browser-swiper-container,
  19185. .photo-browser-page-dark .photo-browser-swiper-container {
  19186. background: var(--f7-photobrowser-dark-bg-color);
  19187. }
  19188. @keyframes photo-browser-in {
  19189. 0% {
  19190. transform: translate3d(0, 0, 0) scale(0.5);
  19191. opacity: 0;
  19192. }
  19193. 50% {
  19194. transform: translate3d(0, 0, 0) scale(1.05);
  19195. opacity: 1;
  19196. }
  19197. 100% {
  19198. transform: translate3d(0, 0, 0) scale(1);
  19199. opacity: 1;
  19200. }
  19201. }
  19202. @keyframes photo-browser-out {
  19203. 0% {
  19204. transform: translate3d(0, 0, 0) scale(1);
  19205. opacity: 1;
  19206. }
  19207. 50% {
  19208. transform: translate3d(0, 0, 0) scale(1.05);
  19209. opacity: 1;
  19210. }
  19211. 100% {
  19212. transform: translate3d(0, 0, 0) scale(0.5);
  19213. opacity: 0;
  19214. }
  19215. }
  19216. /* === Notifications === */
  19217. :root {
  19218. --f7-notification-max-width: 568px;
  19219. --f7-notification-subtitle-text-transform: none;
  19220. --f7-notification-subtitle-line-height: 1.35;
  19221. --f7-notification-text-text-transform: none;
  19222. --f7-notification-text-font-weight: 400;
  19223. }
  19224. :root .theme-dark,
  19225. :root.theme-dark {
  19226. --f7-notification-subtitle-color: #fff;
  19227. }
  19228. .ios {
  19229. --f7-notification-margin: 8px;
  19230. --f7-notification-padding: 10px;
  19231. --f7-notification-border-radius: 12px;
  19232. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  19233. --f7-notification-icon-size: 20px;
  19234. --f7-notification-title-font-size: 13px;
  19235. --f7-notification-title-text-transform: uppercase;
  19236. --f7-notification-title-line-height: 1.4;
  19237. --f7-notification-title-font-weight: 400;
  19238. --f7-notification-title-letter-spacing: 0.02em;
  19239. --f7-notification-title-right-font-size: 13px;
  19240. --f7-notification-subtitle-font-size: 15px;
  19241. --f7-notification-subtitle-font-weight: 600;
  19242. --f7-notification-text-font-size: 15px;
  19243. --f7-notification-text-line-height: 1.2;
  19244. --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  19245. --f7-notification-bg-color-rgb: 255, 255, 255;
  19246. --f7-notification-title-color: #000;
  19247. --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  19248. --f7-notification-subtitle-color: #000;
  19249. --f7-notification-text-color: #000;
  19250. }
  19251. .ios .theme-dark,
  19252. .ios.theme-dark {
  19253. --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  19254. --f7-notification-bg-color-rgb: 30, 30, 30;
  19255. --f7-notification-title-color: #fff;
  19256. --f7-notification-text-color: #fff;
  19257. --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
  19258. }
  19259. .md {
  19260. --f7-notification-margin: 0px;
  19261. --f7-notification-padding: 16px;
  19262. --f7-notification-border-radius: 0px;
  19263. --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  19264. --f7-notification-icon-size: 16px;
  19265. --f7-notification-title-color: var(--f7-theme-color);
  19266. --f7-notification-title-font-size: 12px;
  19267. --f7-notification-title-text-transform: none;
  19268. --f7-notification-title-line-height: 1;
  19269. --f7-notification-title-font-weight: 400;
  19270. --f7-notification-title-right-font-size: 12px;
  19271. --f7-notification-subtitle-font-size: 14px;
  19272. --f7-notification-subtitle-font-weight: 400;
  19273. --f7-notification-text-font-size: 14px;
  19274. --f7-notification-text-line-height: 1.35;
  19275. --f7-notification-bg-color: #fff;
  19276. --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
  19277. --f7-notification-subtitle-color: #212121;
  19278. --f7-notification-text-color: rgba(0, 0, 0, 0.54);
  19279. }
  19280. .md .theme-dark,
  19281. .md.theme-dark {
  19282. --f7-notification-bg-color: #242424;
  19283. --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  19284. --f7-notification-text-color: rgba(255, 255, 255, 0.54);
  19285. }
  19286. .aurora {
  19287. --f7-notification-margin: 10px;
  19288. --f7-notification-padding: 10px;
  19289. --f7-notification-border-radius: 4px;
  19290. --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  19291. --f7-notification-icon-size: 18px;
  19292. --f7-notification-title-font-size: 13px;
  19293. --f7-notification-title-text-transform: uppercase;
  19294. --f7-notification-title-line-height: 1.4;
  19295. --f7-notification-title-font-weight: 500;
  19296. --f7-notification-title-letter-spacing: 0.02em;
  19297. --f7-notification-title-right-font-size: 13px;
  19298. --f7-notification-subtitle-font-size: 12px;
  19299. --f7-notification-subtitle-font-weight: 600;
  19300. --f7-notification-text-font-size: 12px;
  19301. --f7-notification-text-line-height: 1.2;
  19302. --f7-notification-bg-color: #fff;
  19303. --f7-notification-title-color: #000;
  19304. --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
  19305. --f7-notification-subtitle-color: #000;
  19306. --f7-notification-text-color: #000;
  19307. }
  19308. .aurora .theme-dark,
  19309. .aurora.theme-dark {
  19310. --f7-notification-bg-color: #242424;
  19311. --f7-notification-title-color: #fff;
  19312. --f7-notification-text-color: #fff;
  19313. --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  19314. }
  19315. .notification {
  19316. --f7-link-highlight-color: var(--f7-link-highlight-black);
  19317. --f7-touch-ripple-color: var(--f7-touch-ripple-black);
  19318. position: absolute;
  19319. left: var(--f7-notification-margin);
  19320. top: var(--f7-notification-margin);
  19321. width: calc(100% - var(--f7-notification-margin) * 2);
  19322. z-index: 20000;
  19323. font-size: 14px;
  19324. margin: 0;
  19325. border: none;
  19326. display: none;
  19327. box-sizing: border-box;
  19328. transition-property: transform;
  19329. direction: ltr;
  19330. max-width: var(--f7-notification-max-width);
  19331. padding: var(--f7-notification-padding);
  19332. border-radius: var(--f7-notification-border-radius);
  19333. box-shadow: var(--f7-notification-box-shadow);
  19334. background: var(--f7-notification-bg-color);
  19335. margin-top: var(--f7-safe-area-top);
  19336. }
  19337. @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  19338. .ios-translucent-modals .notification {
  19339. background-color: rgba(var(--f7-notification-bg-color-rgb), 0.8);
  19340. -webkit-backdrop-filter: saturate(180%) blur(20px);
  19341. backdrop-filter: saturate(180%) blur(20px);
  19342. }
  19343. }
  19344. @media (min-width: 568px) {
  19345. .notification {
  19346. left: 50%;
  19347. width: var(--f7-notification-max-width);
  19348. margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
  19349. }
  19350. }
  19351. .notification-title {
  19352. color: var(--f7-notification-title-color, var(--f7-theme-color));
  19353. font-size: var(--f7-notification-title-font-size);
  19354. text-transform: var(--f7-notification-title-text-transform);
  19355. line-height: var(--f7-notification-title-line-height);
  19356. font-weight: var(--f7-notification-title-font-weight);
  19357. letter-spacing: var(--f7-notification-title-letter-spacing);
  19358. }
  19359. .notification-subtitle {
  19360. color: var(--f7-notification-subtitle-color);
  19361. font-size: var(--f7-notification-subtitle-font-size);
  19362. text-transform: var(--f7-notification-subtitle-text-transform);
  19363. line-height: var(--f7-notification-subtitle-line-height);
  19364. font-weight: var(--f7-notification-subtitle-font-weight);
  19365. }
  19366. .notification-text {
  19367. color: var(--f7-notification-text-color);
  19368. font-size: var(--f7-notification-text-font-size);
  19369. text-transform: var(--f7-notification-text-text-transform);
  19370. line-height: var(--f7-notification-text-line-height);
  19371. font-weight: var(--f7-notification-text-font-weight);
  19372. }
  19373. .notification-title-right-text {
  19374. color: var(--f7-notification-title-right-color);
  19375. font-size: var(--f7-notification-title-right-font-size);
  19376. }
  19377. .notification-icon {
  19378. font-size: 0;
  19379. line-height: var(--f7-notification-icon-size);
  19380. }
  19381. .notification-icon i,
  19382. .notification-icon {
  19383. width: var(--f7-notification-icon-size) !important;
  19384. height: var(--f7-notification-icon-size) !important;
  19385. }
  19386. .notification-icon i {
  19387. font-size: var(--f7-notification-icon-size);
  19388. }
  19389. .notification-icon img {
  19390. height: var(--f7-notification-icon-size);
  19391. }
  19392. .notification-header {
  19393. display: flex;
  19394. justify-content: flex-start;
  19395. align-items: center;
  19396. }
  19397. .notification-close-button {
  19398. margin-left: auto;
  19399. cursor: pointer;
  19400. position: relative;
  19401. }
  19402. .notification-close-button:after {
  19403. font-family: 'framework7-core-icons';
  19404. font-weight: normal;
  19405. font-style: normal;
  19406. line-height: 1;
  19407. letter-spacing: normal;
  19408. text-transform: none;
  19409. white-space: nowrap;
  19410. word-wrap: normal;
  19411. direction: ltr;
  19412. -webkit-font-smoothing: antialiased;
  19413. text-rendering: optimizeLegibility;
  19414. -moz-osx-font-smoothing: grayscale;
  19415. font-feature-settings: "liga";
  19416. display: block;
  19417. width: 100%;
  19418. height: 100%;
  19419. font-size: 20px;
  19420. position: absolute;
  19421. left: 50%;
  19422. top: 50%;
  19423. text-align: center;
  19424. }
  19425. .ios .notification {
  19426. transition-duration: 450ms;
  19427. transform: translate3d(0%, -200%, 0);
  19428. }
  19429. .ios .notification.modal-in {
  19430. transform: translate3d(0%, 0%, 0);
  19431. opacity: 1;
  19432. }
  19433. .ios .notification.modal-out {
  19434. transform: translate3d(0%, -200%, 0);
  19435. }
  19436. .ios .notification-icon {
  19437. margin-right: 8px;
  19438. }
  19439. .ios .notification-header + .notification-content {
  19440. margin-top: 10px;
  19441. }
  19442. .ios .notification-title-right-text {
  19443. margin-right: 6px;
  19444. margin-left: auto;
  19445. }
  19446. .ios .notification-title-right-text + .notification-close-button {
  19447. margin-left: 10px;
  19448. }
  19449. .ios .notification-close-button {
  19450. font-size: 14px;
  19451. width: 20px;
  19452. height: 20px;
  19453. opacity: 0.3;
  19454. transition-duration: 300ms;
  19455. }
  19456. .ios .notification-close-button.active-state {
  19457. transition-duration: 0ms;
  19458. opacity: 0.1;
  19459. }
  19460. .ios .notification-close-button:after {
  19461. color: #000;
  19462. content: 'notification_close_ios';
  19463. font-size: 0.65em;
  19464. line-height: 44px;
  19465. width: 44px;
  19466. height: 44px;
  19467. margin-left: -22px;
  19468. margin-top: -22px;
  19469. }
  19470. .ios .theme-dark .notification-close-button:after,
  19471. .ios.theme-dark .notification-close-button:after {
  19472. color: #fff;
  19473. }
  19474. .md .notification {
  19475. transform: translate3d(0, -150%, 0);
  19476. }
  19477. .md .notification.modal-in {
  19478. transition-duration: 0ms;
  19479. animation: notification-md-in 400ms ease-out;
  19480. transform: translate3d(0, 0%, 0);
  19481. }
  19482. .md .notification.modal-in.notification-transitioning {
  19483. transition-duration: 200ms;
  19484. }
  19485. .md .notification.modal-out {
  19486. animation: none;
  19487. transition-duration: 200ms;
  19488. transition-timing-function: ease-in;
  19489. transform: translate3d(0, -150%, 0);
  19490. }
  19491. .md .notification-icon {
  19492. margin-right: 8px;
  19493. }
  19494. .md .notification-subtitle + .notification-text {
  19495. margin-top: 2px;
  19496. }
  19497. .md .notification-header + .notification-content {
  19498. margin-top: 6px;
  19499. }
  19500. .md .notification-title-right-text {
  19501. margin-left: 4px;
  19502. }
  19503. .md .notification-title-right-text:before {
  19504. content: '';
  19505. width: 3px;
  19506. height: 3px;
  19507. border-radius: 50%;
  19508. display: inline-block;
  19509. vertical-align: middle;
  19510. margin-right: 4px;
  19511. background: var(--f7-notification-title-right-color);
  19512. }
  19513. .md .notification-close-button {
  19514. width: 16px;
  19515. height: 16px;
  19516. transition-duration: 300ms;
  19517. }
  19518. .md .notification-close-button:before {
  19519. content: '';
  19520. width: 152%;
  19521. height: 152%;
  19522. position: absolute;
  19523. left: -26%;
  19524. top: -26%;
  19525. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  19526. background-repeat: no-repeat;
  19527. background-position: center;
  19528. background-size: 100% 100%;
  19529. opacity: 0;
  19530. pointer-events: none;
  19531. transition-duration: 600ms;
  19532. }
  19533. .md .notification-close-button.active-state:before {
  19534. opacity: 1;
  19535. transition-duration: 150ms;
  19536. }
  19537. .md .notification-close-button:before,
  19538. .md .notification-close-button:after {
  19539. width: 48px;
  19540. height: 48px;
  19541. left: 50%;
  19542. top: 50%;
  19543. margin-left: -24px;
  19544. margin-top: -24px;
  19545. }
  19546. .md .notification-close-button:after {
  19547. color: #737373;
  19548. content: 'delete_md';
  19549. line-height: 48px;
  19550. font-size: 14px;
  19551. }
  19552. @keyframes notification-md-in {
  19553. 0% {
  19554. transform: translate3d(0, -150%, 0);
  19555. }
  19556. 50% {
  19557. transform: translate3d(0, 10%, 0);
  19558. }
  19559. 100% {
  19560. transform: translate3d(0, 0%, 0);
  19561. }
  19562. }
  19563. .aurora .notification {
  19564. transition-duration: 450ms;
  19565. transform: translate3d(0%, -200%, 0);
  19566. }
  19567. .aurora .notification.modal-in {
  19568. transform: translate3d(0%, 0%, 0);
  19569. opacity: 1;
  19570. }
  19571. .aurora .notification.modal-out {
  19572. transform: translate3d(0%, -200%, 0);
  19573. }
  19574. .aurora .notification-icon {
  19575. margin-right: 10px;
  19576. }
  19577. .aurora .notification-header + .notification-content {
  19578. margin-top: 10px;
  19579. }
  19580. .aurora .notification-title-right-text {
  19581. margin-right: 0px;
  19582. margin-left: auto;
  19583. }
  19584. .aurora .notification-title-right-text + .notification-close-button {
  19585. margin-left: 10px;
  19586. }
  19587. .aurora .notification-close-button {
  19588. font-size: 14px;
  19589. width: 16px;
  19590. height: 16px;
  19591. opacity: 0.4;
  19592. transition-duration: 300ms;
  19593. }
  19594. .aurora .notification-close-button.active-state {
  19595. transition-duration: 0ms;
  19596. opacity: 0.6;
  19597. }
  19598. .aurora .notification-close-button:after {
  19599. color: #000;
  19600. content: 'notification_close_ios';
  19601. font-size: 0.5em;
  19602. line-height: 38px;
  19603. width: 38px;
  19604. height: 38px;
  19605. margin-left: -19px;
  19606. margin-top: -19px;
  19607. }
  19608. .aurora .theme-dark .notification-close-button:after,
  19609. .aurora.theme-dark .notification-close-button:after {
  19610. color: #fff;
  19611. }
  19612. /* === Autocomplete === */
  19613. :root {
  19614. --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
  19615. --f7-autocomplete-dropdown-preloader-size: 20px;
  19616. /*
  19617. --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  19618. */
  19619. --f7-autocomplete-dropdown-bg-color: #fff;
  19620. }
  19621. :root .theme-dark,
  19622. :root.theme-dark {
  19623. --f7-autocomplete-dropdown-bg-color: #1c1c1d;
  19624. }
  19625. .ios {
  19626. --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  19627. --f7-autocomplete-dropdown-text-matching-font-weight: 600;
  19628. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  19629. --f7-autocomplete-dropdown-text-color: #000;
  19630. --f7-autocomplete-dropdown-text-matching-color: #000;
  19631. }
  19632. .ios .theme-dark,
  19633. .ios.theme-dark {
  19634. --f7-autocomplete-dropdown-text-color: #fff;
  19635. --f7-autocomplete-dropdown-text-matching-color: #fff;
  19636. }
  19637. .md {
  19638. --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
  19639. --f7-autocomplete-dropdown-text-matching-font-weight: 400;
  19640. --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
  19641. --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
  19642. --f7-autocomplete-dropdown-text-matching-color: #212121;
  19643. }
  19644. .md .theme-dark,
  19645. .md.theme-dark {
  19646. --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
  19647. --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
  19648. }
  19649. .aurora {
  19650. --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  19651. --f7-autocomplete-dropdown-text-matching-font-weight: 700;
  19652. --f7-autocomplete-dropdown-font-size: 13px;
  19653. --f7-autocomplete-dropdown-text-color: #000;
  19654. --f7-autocomplete-dropdown-text-matching-color: #000;
  19655. }
  19656. .aurora .theme-dark,
  19657. .aurora.theme-dark {
  19658. --f7-autocomplete-dropdown-text-color: #fff;
  19659. --f7-autocomplete-dropdown-text-matching-color: #fff;
  19660. }
  19661. .autocomplete-page .autocomplete-found {
  19662. display: block;
  19663. }
  19664. .autocomplete-page .autocomplete-not-found {
  19665. display: none;
  19666. }
  19667. .autocomplete-page .autocomplete-values {
  19668. display: block;
  19669. }
  19670. .autocomplete-page .list ul:empty {
  19671. display: none;
  19672. }
  19673. .autocomplete-preloader:not(.autocomplete-preloader-visible) {
  19674. visibility: hidden;
  19675. }
  19676. .autocomplete-preloader:not(.autocomplete-preloader-visible),
  19677. .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
  19678. animation: none;
  19679. }
  19680. .autocomplete-dropdown {
  19681. background: var(--f7-autocomplete-dropdown-bg-color);
  19682. box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
  19683. box-sizing: border-box;
  19684. position: absolute;
  19685. z-index: 500;
  19686. width: 100%;
  19687. left: 0;
  19688. }
  19689. .autocomplete-dropdown .autocomplete-dropdown-inner {
  19690. position: relative;
  19691. overflow: auto;
  19692. -webkit-overflow-scrolling: touch;
  19693. height: 100%;
  19694. z-index: 1;
  19695. }
  19696. .autocomplete-dropdown .autocomplete-preloader {
  19697. display: none;
  19698. position: absolute;
  19699. bottom: 100%;
  19700. width: var(--f7-autocomplete-dropdown-preloader-size);
  19701. height: var(--f7-autocomplete-dropdown-preloader-size);
  19702. }
  19703. .autocomplete-dropdown .autocomplete-preloader-visible {
  19704. display: block;
  19705. }
  19706. .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  19707. color: var(--f7-autocomplete-dropdown-placeholder-color);
  19708. }
  19709. .autocomplete-dropdown .list {
  19710. margin: 0;
  19711. color: var(--f7-autocomplete-dropdown-text-color);
  19712. font-size: var(--f7-autocomplete-dropdown-font-size);
  19713. }
  19714. .autocomplete-dropdown .list b {
  19715. color: var(--f7-autocomplete-dropdown-text-matching-color);
  19716. font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
  19717. }
  19718. .autocomplete-dropdown .list ul {
  19719. background: none !important;
  19720. }
  19721. .autocomplete-dropdown .list ul:before,
  19722. .autocomplete-dropdown .list ul:after {
  19723. display: none !important;
  19724. }
  19725. .autocomplete-dropdown .autocomplete-dropdown-selected {
  19726. background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  19727. }
  19728. .searchbar-input-wrap .autocomplete-dropdown {
  19729. background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
  19730. border-radius: var(--f7-searchbar-input-border-radius);
  19731. }
  19732. .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
  19733. color: var(--f7-searchbar-placeholder-color);
  19734. }
  19735. .searchbar-input-wrap .autocomplete-dropdown li:last-child {
  19736. border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
  19737. position: relative;
  19738. overflow: hidden;
  19739. }
  19740. .searchbar-input-wrap .autocomplete-dropdown .item-content {
  19741. padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left));
  19742. }
  19743. .list .item-content-dropdown-expanded .item-title.item-label {
  19744. width: 0;
  19745. flex-shrink: 10;
  19746. overflow: hidden;
  19747. }
  19748. .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
  19749. margin-left: 0;
  19750. }
  19751. .list .item-content-dropdown-expanded .item-input-wrap {
  19752. width: 100%;
  19753. }
  19754. .ios .autocomplete-dropdown .autocomplete-preloader {
  19755. right: 16px;
  19756. margin-bottom: 12px;
  19757. }
  19758. .ios .searchbar-input-wrap .autocomplete-dropdown {
  19759. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  19760. top: 100%;
  19761. z-index: 20;
  19762. }
  19763. .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  19764. padding-top: var(--f7-searchbar-input-height);
  19765. }
  19766. .md .autocomplete-page .navbar .autocomplete-preloader {
  19767. margin-right: 8px;
  19768. }
  19769. .md .autocomplete-popup .navbar .autocomplete-preloader {
  19770. margin-left: 8px;
  19771. margin-right: 16px;
  19772. }
  19773. .md .autocomplete-dropdown .autocomplete-preloader {
  19774. right: 16px;
  19775. margin-bottom: 8px;
  19776. }
  19777. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
  19778. .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
  19779. border-width: 3px;
  19780. }
  19781. .aurora .autocomplete-dropdown .autocomplete-preloader {
  19782. right: 16px;
  19783. margin-bottom: 2px;
  19784. }
  19785. .aurora .searchbar-input-wrap .autocomplete-dropdown {
  19786. margin-top: calc(-1 * var(--f7-searchbar-input-height));
  19787. top: 100%;
  19788. z-index: 20;
  19789. }
  19790. .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
  19791. padding-top: var(--f7-searchbar-input-height);
  19792. }
  19793. /* === Tooltip === */
  19794. :root {
  19795. --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
  19796. --f7-tooltip-text-color: #fff;
  19797. --f7-tooltip-border-radius: 4px;
  19798. --f7-tooltip-padding: 8px 16px;
  19799. --f7-tooltip-font-size: 14px;
  19800. --f7-tooltip-font-weight: 500;
  19801. --f7-tooltip-desktop-padding: 6px 8px;
  19802. --f7-tooltip-desktop-font-size: 12px;
  19803. }
  19804. .tooltip {
  19805. position: absolute;
  19806. z-index: 20000;
  19807. background: var(--f7-tooltip-bg-color);
  19808. border-radius: var(--f7-tooltip-border-radius);
  19809. padding: var(--f7-tooltip-padding);
  19810. color: var(--f7-tooltip-text-color);
  19811. font-size: var(--f7-tooltip-font-size);
  19812. font-weight: var(--f7-tooltip-font-weight);
  19813. box-sizing: border-box;
  19814. line-height: 1.2;
  19815. opacity: 0;
  19816. transform: scale(0.9);
  19817. transition-duration: 150ms;
  19818. transition-property: opacity, transform;
  19819. z-index: 99000;
  19820. }
  19821. .tooltip.tooltip-in {
  19822. transform: scale(1);
  19823. opacity: 1;
  19824. }
  19825. .tooltip.tooltip-out {
  19826. opacity: 0;
  19827. transform: scale(1);
  19828. }
  19829. .device-desktop .tooltip {
  19830. font-size: var(--f7-tooltip-desktop-font-size);
  19831. padding: var(--f7-tooltip-desktop-padding);
  19832. }
  19833. /* === Gauge === */
  19834. .gauge {
  19835. position: relative;
  19836. text-align: center;
  19837. margin-left: auto;
  19838. margin-right: auto;
  19839. display: inline-block;
  19840. }
  19841. .gauge-svg,
  19842. .gauge svg {
  19843. max-width: 100%;
  19844. height: auto;
  19845. }
  19846. .gauge-svg circle,
  19847. .gauge svg circle,
  19848. .gauge-svg path,
  19849. .gauge svg path {
  19850. transition-duration: 400ms;
  19851. }
  19852. /* === Skeleton === */
  19853. :root {
  19854. --f7-skeleton-color: #ccc;
  19855. }
  19856. .theme-dark {
  19857. --f7-skeleton-color: #515151;
  19858. }
  19859. .skeleton-text {
  19860. font-family: 'framework7-skeleton' !important;
  19861. }
  19862. .skeleton-text,
  19863. .skeleton-text * {
  19864. color: var(--f7-skeleton-color) !important;
  19865. font-weight: normal !important;
  19866. font-style: normal !important;
  19867. letter-spacing: -0.015em !important;
  19868. }
  19869. .skeleton-block {
  19870. height: 1em;
  19871. background: var(--f7-skeleton-color) !important;
  19872. width: 100%;
  19873. }
  19874. .skeleton-effect-fade {
  19875. animation: skeleton-effect-fade 1s infinite;
  19876. }
  19877. .skeleton-effect-blink {
  19878. -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  19879. mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  19880. -webkit-mask-size: 200% 100%;
  19881. mask-size: 200% 100%;
  19882. -webkit-mask-repeat: repeat;
  19883. mask-repeat: repeat;
  19884. -webkit-mask-position: 50% top;
  19885. mask-position: 50% top;
  19886. animation: skeleton-effect-blink 1s infinite;
  19887. }
  19888. .skeleton-effect-pulse {
  19889. animation: skeleton-effect-pulse 1s infinite;
  19890. }
  19891. @keyframes skeleton-effect-fade {
  19892. 0% {
  19893. opacity: 1;
  19894. }
  19895. 50% {
  19896. opacity: 0.2;
  19897. }
  19898. 100% {
  19899. opacity: 1;
  19900. }
  19901. }
  19902. @keyframes skeleton-effect-blink {
  19903. 0% {
  19904. -webkit-mask-position: 50% top;
  19905. mask-position: 50% top;
  19906. }
  19907. 100% {
  19908. -webkit-mask-position: -150% top;
  19909. mask-position: -150% top;
  19910. }
  19911. }
  19912. @keyframes skeleton-effect-pulse {
  19913. 0% {
  19914. transform: scale(1);
  19915. }
  19916. 40% {
  19917. transform: scale(1);
  19918. }
  19919. 50% {
  19920. transform: scale(0.975);
  19921. }
  19922. 100% {
  19923. transform: scale(1);
  19924. }
  19925. }
  19926. /* === Menu === */
  19927. :root {
  19928. --f7-menu-text-color: #fff;
  19929. --f7-menu-font-size: 16px;
  19930. --f7-menu-font-weight: 500;
  19931. --f7-menu-line-height: 1.2;
  19932. --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
  19933. --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
  19934. --f7-menu-item-padding-horizontal: 12px;
  19935. --f7-menu-item-spacing: 6px;
  19936. --f7-menu-item-height: 40px;
  19937. --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
  19938. --f7-menu-item-border-radius: 8px;
  19939. /*
  19940. --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
  19941. */
  19942. --f7-menu-dropdown-item-height: 28px;
  19943. --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
  19944. --f7-menu-dropdown-padding-vertical: 6px;
  19945. /*
  19946. --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
  19947. */
  19948. }
  19949. .aurora {
  19950. --f7-menu-font-size: 13px;
  19951. --f7-menu-item-height: 28px;
  19952. --f7-menu-dropdown-item-height: 24px;
  19953. --f7-menu-item-border-radius: 5px;
  19954. --f7-menu-item-padding-horizontal: 10px;
  19955. }
  19956. .menu {
  19957. z-index: 1000;
  19958. position: relative;
  19959. transform: translate3d(0, 0, 0);
  19960. --f7-touch-ripple-color: var(--f7-touch-ripple-white);
  19961. }
  19962. .menu-inner {
  19963. display: flex;
  19964. justify-content: flex-start;
  19965. align-items: flex-start;
  19966. padding-left: var(--f7-menu-item-spacing);
  19967. padding-right: var(--f7-menu-item-spacing);
  19968. }
  19969. .menu-inner:after {
  19970. content: '';
  19971. width: var(--f7-menu-item-spacing);
  19972. height: 100%;
  19973. flex-shrink: 0;
  19974. }
  19975. .menu-item {
  19976. height: var(--f7-menu-item-height);
  19977. min-width: var(--f7-menu-item-height);
  19978. flex-shrink: 0;
  19979. background: var(--f7-menu-bg-color);
  19980. color: var(--f7-menu-text-color);
  19981. border-radius: var(--f7-menu-item-border-radius);
  19982. position: relative;
  19983. box-sizing: border-box;
  19984. font-size: var(--f7-menu-font-size);
  19985. font-weight: var(--f7-menu-font-weight);
  19986. cursor: pointer;
  19987. margin-left: var(--f7-menu-item-spacing);
  19988. }
  19989. .menu-item:first-child {
  19990. margin-left: 0;
  19991. }
  19992. .menu-item.active-state:not(.menu-item-dropdown-opened) {
  19993. background-color: rgba(0, 0, 0, 0.7);
  19994. }
  19995. .menu-item.icon-only {
  19996. padding-left: 0;
  19997. padding-right: 0;
  19998. }
  19999. .menu-item-content {
  20000. display: flex;
  20001. justify-content: center;
  20002. align-items: center;
  20003. padding: 0 var(--f7-menu-item-padding-horizontal);
  20004. height: 100%;
  20005. box-sizing: border-box;
  20006. width: 100%;
  20007. overflow: hidden;
  20008. border-radius: var(--f7-menu-item-border-radius);
  20009. position: relative;
  20010. }
  20011. .menu-item-content.icon-only,
  20012. .icon-only .menu-item-content {
  20013. padding-left: 0;
  20014. padding-right: 0;
  20015. }
  20016. .menu-item-dropdown .menu-item-content:after {
  20017. content: '';
  20018. position: absolute;
  20019. width: 20px;
  20020. height: 2px;
  20021. left: 50%;
  20022. transform: translateX(-50%);
  20023. bottom: 4px;
  20024. background: var(--f7-menu-item-dropdown-icon-color);
  20025. border-radius: 4px;
  20026. }
  20027. .menu-dropdown {
  20028. opacity: 0;
  20029. visibility: hidden;
  20030. pointer-events: none;
  20031. cursor: auto;
  20032. height: 10px;
  20033. background: var(--f7-menu-bg-color);
  20034. position: relative;
  20035. }
  20036. .menu-dropdown-content {
  20037. position: absolute;
  20038. top: 100%;
  20039. border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
  20040. padding-top: var(--f7-menu-dropdown-padding-vertical);
  20041. padding-bottom: var(--f7-menu-dropdown-padding-vertical);
  20042. box-sizing: border-box;
  20043. background: var(--f7-menu-bg-color);
  20044. overflow: auto;
  20045. -webkit-overflow-scrolling: touch;
  20046. min-width: calc(100% + 24px);
  20047. }
  20048. .menu-dropdown-link,
  20049. .menu-dropdown-item {
  20050. display: flex;
  20051. justify-content: space-between;
  20052. align-items: center;
  20053. padding-left: var(--f7-menu-item-padding-horizontal);
  20054. padding-right: var(--f7-menu-item-padding-horizontal);
  20055. min-height: var(--f7-menu-dropdown-item-height);
  20056. line-height: var(--f7-menu-line-height);
  20057. font-size: var(--f7-menu-font-size);
  20058. color: var(--f7-menu-text-color);
  20059. font-weight: var(--f7-menu-font-weight);
  20060. white-space: nowrap;
  20061. min-width: 100px;
  20062. }
  20063. .menu-dropdown-link i,
  20064. .menu-dropdown-item i,
  20065. .menu-dropdown-link i.icon,
  20066. .menu-dropdown-item i.icon,
  20067. .menu-dropdown-link i.f7-icons,
  20068. .menu-dropdown-item i.f7-icons,
  20069. .menu-dropdown-link i.material-icons,
  20070. .menu-dropdown-item i.material-icons {
  20071. font-size: 20px;
  20072. }
  20073. .menu-dropdown-link.active-state {
  20074. background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
  20075. color: var(--f7-menu-text-color);
  20076. }
  20077. .menu-dropdown-divider {
  20078. height: 1px;
  20079. margin-top: 2px;
  20080. margin-bottom: 2px;
  20081. background: var(--f7-menu-dropdown-divider-color);
  20082. }
  20083. .menu-item-dropdown-opened {
  20084. border-bottom-left-radius: 0px;
  20085. border-bottom-right-radius: 0px;
  20086. }
  20087. .menu-item-dropdown-opened .menu-item-content:after {
  20088. opacity: 0;
  20089. }
  20090. .menu-item-dropdown-opened .menu-dropdown {
  20091. opacity: 1;
  20092. visibility: visible;
  20093. pointer-events: auto;
  20094. }
  20095. .menu-item-dropdown-left .menu-dropdown:after,
  20096. .menu-item-dropdown-center .menu-dropdown:after,
  20097. .menu-dropdown-left:after,
  20098. .menu-dropdown-center:after {
  20099. content: '';
  20100. position: absolute;
  20101. left: 100%;
  20102. bottom: 0;
  20103. width: var(--f7-menu-item-border-radius);
  20104. height: var(--f7-menu-item-border-radius);
  20105. background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  20106. }
  20107. .menu-item-dropdown-right .menu-dropdown:before,
  20108. .menu-item-dropdown-center .menu-dropdown:before,
  20109. .menu-dropdown-right:before,
  20110. .menu-dropdown-center:before {
  20111. content: '';
  20112. position: absolute;
  20113. right: 100%;
  20114. bottom: 0;
  20115. width: var(--f7-menu-item-border-radius);
  20116. height: var(--f7-menu-item-border-radius);
  20117. background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
  20118. }
  20119. .menu-item-dropdown-left .menu-dropdown-content,
  20120. .menu-dropdown-left .menu-dropdown-content {
  20121. left: 0;
  20122. border-top-left-radius: 0px;
  20123. }
  20124. .menu-item-dropdown-right .menu-dropdown-content,
  20125. .menu-dropdown-right .menu-dropdown-content {
  20126. right: 0;
  20127. border-top-right-radius: 0px;
  20128. }
  20129. .menu-item-dropdown-center .menu-dropdown-content,
  20130. .menu-dropdown-center .menu-dropdown-content {
  20131. left: 50%;
  20132. min-width: calc(100% + 24px + 24px);
  20133. transform: translateX(-50%);
  20134. }
  20135. /* === Color Picker === */
  20136. :root {
  20137. --f7-color-picker-popover-width: 350px;
  20138. --f7-color-picker-slider-size: 6px;
  20139. --f7-color-picker-slider-knob-size: 16px;
  20140. --f7-color-picker-bar-size: 50px;
  20141. --f7-color-picker-bar-min-height: 260px;
  20142. --f7-color-picker-value-width: 64px;
  20143. --f7-color-picker-value-height: 32px;
  20144. --f7-color-picker-value-font-size: 16px;
  20145. --f7-color-picker-value-border-radius: 4px;
  20146. --f7-color-picker-hex-value-width: 84px;
  20147. --f7-color-picker-label-font-size: 14px;
  20148. --f7-color-picker-label-width: 10px;
  20149. --f7-color-picker-label-height: 14px;
  20150. --f7-color-picker-sb-spectrum-height: 260px;
  20151. --f7-color-picker-sb-spectrum-handle-size: 16px;
  20152. --f7-color-picker-wheel-width: 330px;
  20153. --f7-color-picker-palette-value-width: 36px;
  20154. --f7-color-picker-palette-value-height: 36px;
  20155. --f7-color-picker-initial-current-color-height: 40px;
  20156. --f7-color-picker-initial-current-color-border-radius: 4px;
  20157. --f7-color-picker-sheet-bg-color: #fff;
  20158. --f7-color-picker-popup-bg-color: #fff;
  20159. --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
  20160. --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
  20161. --f7-color-picker-group-value-bg-color: #fff;
  20162. }
  20163. :root .theme-dark,
  20164. :root.theme-dark {
  20165. --f7-color-picker-sheet-bg-color: #121212;
  20166. --f7-color-picker-popup-bg-color: #121212;
  20167. --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
  20168. --f7-color-picker-group-bg-color: #000;
  20169. --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
  20170. }
  20171. .color-picker {
  20172. overflow: hidden;
  20173. width: 100%;
  20174. display: flex;
  20175. flex-direction: column;
  20176. }
  20177. .color-picker.color-picker-inline,
  20178. .color-picker-popover .color-picker,
  20179. .color-picker-popup .color-picker {
  20180. position: relative;
  20181. }
  20182. .color-picker-sheet-modal {
  20183. background: var(--f7-color-picker-sheet-bg-color);
  20184. }
  20185. .color-picker-sheet-modal:before {
  20186. z-index: 600;
  20187. }
  20188. .color-picker-sheet-modal .sheet-modal-inner {
  20189. margin-bottom: var(--f7-safe-area-bottom);
  20190. }
  20191. .color-picker-popup .page {
  20192. background: var(--f7-color-picker-popup-bg-color);
  20193. }
  20194. .color-picker-popup .page-content {
  20195. padding-bottom: var(--f7-safe-area-bottom);
  20196. }
  20197. .color-picker-popover .color-picker,
  20198. .color-picker-popup .color-picker,
  20199. .color-picker-page .color-picker {
  20200. height: 100%;
  20201. }
  20202. .color-picker-popover .color-picker .toolbar,
  20203. .color-picker-popup .color-picker .toolbar,
  20204. .color-picker-page .color-picker .toolbar {
  20205. position: absolute;
  20206. }
  20207. .color-picker-popover {
  20208. width: var(--f7-color-picker-popover-width);
  20209. max-width: 90vw;
  20210. max-height: 80vh;
  20211. }
  20212. .color-picker-popover .color-picker {
  20213. max-height: 80vh;
  20214. }
  20215. .color-picker-popover .toolbar-top {
  20216. border-top-left-radius: var(--f7-popover-border-radius);
  20217. border-top-right-radius: var(--f7-popover-border-radius);
  20218. }
  20219. .color-picker-popover .color-picker-module-palette {
  20220. overflow: hidden;
  20221. flex-shrink: 0;
  20222. }
  20223. .color-picker-popover .color-picker-module-palette:first-child {
  20224. border-top-left-radius: var(--f7-popover-border-radius);
  20225. border-top-right-radius: var(--f7-popover-border-radius);
  20226. }
  20227. .color-picker-popover .color-picker-module-palette:last-child {
  20228. border-bottom-left-radius: var(--f7-popover-border-radius);
  20229. border-bottom-right-radius: var(--f7-popover-border-radius);
  20230. }
  20231. .color-picker-popover .color-picker-module-palette:first-child:last-child {
  20232. border-radius: var(--f7-popover-border-radius);
  20233. }
  20234. .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
  20235. border-top-left-radius: 0;
  20236. border-top-right-radius: 0;
  20237. }
  20238. .color-picker-popup .page-content,
  20239. .color-picker-popover .page-content,
  20240. .color-picker-sheet-modal .page-content,
  20241. .color-picker-page .page-content {
  20242. display: flex;
  20243. justify-content: flex-start;
  20244. align-items: stretch;
  20245. flex-direction: column;
  20246. overflow-x: hidden;
  20247. }
  20248. .color-picker-module {
  20249. margin-top: 5px;
  20250. }
  20251. .color-picker-module:last-child {
  20252. margin-bottom: 5px;
  20253. }
  20254. .color-picker-module-sb-spectrum,
  20255. .color-picker-module-hs-spectrum {
  20256. margin-left: 10px;
  20257. margin-right: 10px;
  20258. }
  20259. .color-picker-module-sb-spectrum:first-child,
  20260. .color-picker-module-hs-spectrum:first-child {
  20261. margin-top: 10px;
  20262. }
  20263. .color-picker-module-sb-spectrum .color-picker-sb-spectrum,
  20264. .color-picker-module-hs-spectrum .color-picker-sb-spectrum,
  20265. .color-picker-module-sb-spectrum .color-picker-hs-spectrum,
  20266. .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
  20267. border-radius: 4px;
  20268. height: var(--f7-color-picker-sb-spectrum-height);
  20269. }
  20270. .color-picker-sb-spectrum {
  20271. background-color: #000;
  20272. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
  20273. position: relative;
  20274. }
  20275. .color-picker-hs-spectrum {
  20276. position: relative;
  20277. background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
  20278. }
  20279. .color-picker-hs-spectrum:after {
  20280. content: '';
  20281. position: absolute;
  20282. left: 0;
  20283. top: 0;
  20284. width: 100%;
  20285. height: 100%;
  20286. background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  20287. }
  20288. .color-picker-sb-spectrum-handle,
  20289. .color-picker-hs-spectrum-handle {
  20290. width: 4px;
  20291. height: 4px;
  20292. position: absolute;
  20293. left: -2px;
  20294. top: -2px;
  20295. z-index: 1;
  20296. }
  20297. .color-picker-sb-spectrum-handle:after,
  20298. .color-picker-hs-spectrum-handle:after {
  20299. background-color: inherit;
  20300. content: '';
  20301. position: absolute;
  20302. width: var(--f7-color-picker-sb-spectrum-handle-size);
  20303. height: var(--f7-color-picker-sb-spectrum-handle-size);
  20304. border: 1px solid #fff;
  20305. border-radius: 50%;
  20306. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  20307. box-sizing: border-box;
  20308. left: 50%;
  20309. top: 50%;
  20310. transform: translate(-50%, -50%);
  20311. transition: 150ms;
  20312. transition-property: transform;
  20313. transform-origin: center;
  20314. }
  20315. .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  20316. .color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
  20317. .color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
  20318. .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
  20319. transform: scale(1.5) translate(-33.333%, -33.333%);
  20320. }
  20321. .color-picker-module-wheel {
  20322. margin-left: 10px;
  20323. margin-right: 10px;
  20324. }
  20325. .color-picker-wheel {
  20326. position: relative;
  20327. width: var(--f7-color-picker-wheel-width);
  20328. max-width: 100%;
  20329. height: auto;
  20330. font-size: 0;
  20331. margin-left: auto;
  20332. margin-right: auto;
  20333. }
  20334. .color-picker-wheel svg {
  20335. width: 100%;
  20336. height: auto;
  20337. }
  20338. .color-picker-wheel .color-picker-wheel-handle {
  20339. width: calc(100% / 6);
  20340. height: calc(100% / 6);
  20341. position: absolute;
  20342. box-sizing: border-box;
  20343. border: 2px solid #fff;
  20344. box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  20345. background: red;
  20346. border-radius: 50%;
  20347. left: 0;
  20348. top: 0;
  20349. }
  20350. .color-picker-wheel .color-picker-sb-spectrum {
  20351. width: 45%;
  20352. height: 45%;
  20353. left: 50%;
  20354. top: 50%;
  20355. transform: translate3d(-50%, -50%, 0);
  20356. position: absolute;
  20357. }
  20358. .color-picker-slider-wrap {
  20359. display: flex;
  20360. align-items: center;
  20361. margin-bottom: 2px;
  20362. }
  20363. .color-picker-slider-wrap + .color-picker-slider-wrap {
  20364. margin-top: 5px;
  20365. }
  20366. .color-picker-hex-wrap {
  20367. justify-content: space-between;
  20368. display: flex;
  20369. align-items: center;
  20370. }
  20371. .color-picker-slider-label,
  20372. .color-picker-hex-label {
  20373. font-size: var(--f7-color-picker-label-font-size);
  20374. width: var(--f7-color-picker-label-size);
  20375. flex-shrink: 0;
  20376. margin-right: 12px;
  20377. }
  20378. .color-picker-hex-label {
  20379. width: auto;
  20380. }
  20381. .color-picker-bar-value,
  20382. .color-picker-slider-value,
  20383. .color-picker-hex-value {
  20384. width: var(--f7-color-picker-value-width);
  20385. height: var(--f7-color-picker-value-height);
  20386. background: var(--f7-color-picker-value-bg-color);
  20387. border-radius: var(--f7-color-picker-value-border-radius);
  20388. text-align: center;
  20389. font-size: var(--f7-color-picker-value-font-size);
  20390. display: flex;
  20391. justify-content: center;
  20392. align-items: center;
  20393. flex-shrink: 0;
  20394. margin-left: 10px;
  20395. }
  20396. .color-picker-bar-value input,
  20397. .color-picker-slider-value input,
  20398. .color-picker-hex-value input {
  20399. width: 100%;
  20400. height: 100%;
  20401. -webkit-appearance: none;
  20402. -moz-appearance: none;
  20403. appearance: none;
  20404. border: none;
  20405. outline: 0;
  20406. background: transparent;
  20407. color: inherit;
  20408. font-family: inherit;
  20409. font-size: inherit;
  20410. text-align: center;
  20411. display: block;
  20412. border-radius: 4px;
  20413. }
  20414. .color-picker-bar-value input::-webkit-inner-spin-button,
  20415. .color-picker-slider-value input::-webkit-inner-spin-button,
  20416. .color-picker-hex-value input::-webkit-inner-spin-button,
  20417. .color-picker-bar-value input::-webkit-outer-spin-button,
  20418. .color-picker-slider-value input::-webkit-outer-spin-button,
  20419. .color-picker-hex-value input::-webkit-outer-spin-button {
  20420. -webkit-appearance: none;
  20421. -moz-appearance: none;
  20422. appearance: none;
  20423. margin: 0;
  20424. display: none;
  20425. }
  20426. .color-picker-hex-value {
  20427. width: var(--f7-color-picker-hex-value-width);
  20428. }
  20429. .color-picker-hex-value:first-child {
  20430. margin-left: auto;
  20431. }
  20432. .color-picker-slider {
  20433. --f7-range-bar-active-bg-color: transparent;
  20434. --f7-range-bar-size: var(--f7-color-picker-slider-size);
  20435. --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
  20436. --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
  20437. --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  20438. }
  20439. .color-picker-slider .range-knob {
  20440. transition-duration: 200ms;
  20441. transition-property: transform;
  20442. }
  20443. .color-picker-slider .range-knob:after {
  20444. width: 30px;
  20445. height: 30px;
  20446. margin-left: -16px;
  20447. margin-top: -16px;
  20448. }
  20449. .color-picker-slider .range-knob-active-state .range-knob {
  20450. transform: scale(1.5);
  20451. }
  20452. .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
  20453. background: var(--f7-range-knob-color) !important;
  20454. border: none;
  20455. }
  20456. .color-picker-module-rgb-bars {
  20457. display: flex;
  20458. justify-content: space-around;
  20459. justify-content: space-evenly;
  20460. align-items: stretch;
  20461. height: 100%;
  20462. min-height: var(--f7-color-picker-bar-min-height);
  20463. padding-bottom: 10px;
  20464. padding-top: 10px;
  20465. box-sizing: border-box;
  20466. }
  20467. .color-picker-bar-wrap {
  20468. display: flex;
  20469. align-items: center;
  20470. flex-direction: column-reverse;
  20471. }
  20472. .color-picker-bar {
  20473. --f7-range-bar-active-bg-color: transparent;
  20474. --f7-range-bar-size: var(--f7-color-picker-bar-size);
  20475. --f7-range-bar-border-radius: 2px;
  20476. --f7-range-knob-size: 6px;
  20477. --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
  20478. --f7-range-knob-color: #fff;
  20479. }
  20480. .color-picker-bar .range-knob {
  20481. transition-duration: 0ms;
  20482. transition-property: transform;
  20483. border-radius: 3px;
  20484. }
  20485. .color-picker-bar .range-knob-wrap {
  20486. height: 6px;
  20487. width: calc(var(--f7-color-picker-bar-size) - 4px);
  20488. margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
  20489. }
  20490. .color-picker-bar .range-knob-active-state .range-knob {
  20491. transform: scale(1);
  20492. }
  20493. .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
  20494. background: var(--f7-range-knob-color) !important;
  20495. border: none;
  20496. }
  20497. .color-picker-bar-label {
  20498. font-size: var(--f7-color-picker-label-size);
  20499. margin-top: 12px;
  20500. line-height: 1;
  20501. height: var(--f7-color-picker-label-height);
  20502. flex-shrink: 0;
  20503. }
  20504. .color-picker-bar-value {
  20505. margin-left: 0;
  20506. margin-bottom: 10px;
  20507. }
  20508. .color-picker-slider-alpha {
  20509. --f7-range-knob-color: #fff;
  20510. }
  20511. .color-picker-slider-alpha .range-bar {
  20512. background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
  20513. background-size: 100% 100%, 6px 3px, 6px 3px;
  20514. background-position: 0 0, 0px 3px, 0 0;
  20515. background-repeat: repeat-y, repeat-x, repeat-x;
  20516. }
  20517. .color-picker-slider-hue .range-bar {
  20518. background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
  20519. }
  20520. .color-picker-slider-brightness .range-bar {
  20521. background-image: linear-gradient(to right, #000, #fff);
  20522. }
  20523. .color-picker-module-palette {
  20524. margin-top: 16px;
  20525. }
  20526. .color-picker-module-palette:first-child {
  20527. margin-top: 0;
  20528. }
  20529. .color-picker-module-palette:last-child {
  20530. margin-bottom: 0;
  20531. }
  20532. .color-picker-module-palette:first-child:last-child {
  20533. margin: 0;
  20534. }
  20535. .color-picker-palette {
  20536. display: flex;
  20537. flex-wrap: wrap;
  20538. }
  20539. .color-picker-palette-row {
  20540. width: 100%;
  20541. display: flex;
  20542. flex-wrap: nowrap;
  20543. }
  20544. .color-picker-palette-row .color-picker-palette-value {
  20545. width: 100%;
  20546. }
  20547. .color-picker-palette-value {
  20548. width: var(--f7-color-picker-palette-value-width);
  20549. height: var(--f7-color-picker-palette-value-height);
  20550. cursor: pointer;
  20551. }
  20552. .color-picker-module-initial-current-colors,
  20553. .color-picker-module-current-color {
  20554. margin-left: 10px;
  20555. margin-right: 10px;
  20556. border-radius: var(--f7-color-picker-initial-current-color-border-radius);
  20557. overflow: hidden;
  20558. flex-shrink: 0;
  20559. }
  20560. .color-picker-initial-color,
  20561. .color-picker-current-color {
  20562. height: var(--f7-color-picker-initial-current-color-height);
  20563. }
  20564. .color-picker-initial-current-colors {
  20565. display: flex;
  20566. }
  20567. .color-picker-initial-current-colors .color-picker-initial-color,
  20568. .color-picker-initial-current-colors .color-picker-current-color {
  20569. width: 50%;
  20570. }
  20571. .color-picker-module-rgb-sliders,
  20572. .color-picker-module-hsb-sliders,
  20573. .color-picker-module-alpha-slider,
  20574. .color-picker-module-hue-slider,
  20575. .color-picker-module-brightness-slider,
  20576. .color-picker-module-hex {
  20577. margin-left: 10px;
  20578. margin-right: 10px;
  20579. }
  20580. .color-picker-grouped-modules .color-picker-module-rgb-sliders,
  20581. .color-picker-grouped-modules .color-picker-module-hsb-sliders,
  20582. .color-picker-grouped-modules .color-picker-module-alpha-slider,
  20583. .color-picker-grouped-modules .color-picker-module-hue-slider,
  20584. .color-picker-grouped-modules .color-picker-module-brightness-slider,
  20585. .color-picker-grouped-modules .color-picker-module-hex {
  20586. background: var(--f7-color-picker-group-bg-color);
  20587. padding: 5px;
  20588. border-radius: 4px;
  20589. margin-top: 16px;
  20590. margin-left: 5px;
  20591. margin-right: 5px;
  20592. }
  20593. .color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
  20594. .color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
  20595. .color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
  20596. .color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
  20597. .color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
  20598. .color-picker-grouped-modules .color-picker-module-hex:last-child {
  20599. margin-bottom: 16px;
  20600. }
  20601. .color-picker-grouped-modules .color-picker-slider-value,
  20602. .color-picker-grouped-modules .color-picker-hex-value {
  20603. background: var(--f7-color-picker-group-value-bg-color);
  20604. }
  20605. .color-picker-grouped-modules .color-picker-slider-label,
  20606. .color-picker-grouped-modules .color-picker-hex-label {
  20607. margin-left: 5px;
  20608. }
  20609. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
  20610. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
  20611. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
  20612. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
  20613. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
  20614. margin-left: 5px;
  20615. }
  20616. .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
  20617. .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
  20618. .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
  20619. .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
  20620. .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
  20621. margin-right: 5px;
  20622. }
  20623. /* === Treeview === */
  20624. :root {
  20625. --f7-treeview-item-padding-left: 16px;
  20626. --f7-treeview-item-padding-right: 16px;
  20627. --f7-treeview-toggle-size: 24px;
  20628. --f7-treeview-children-offset: 29px;
  20629. --f7-treeview-label-font-weight: 400;
  20630. --f7-treeview-label-text-color: inherit;
  20631. /*
  20632. --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
  20633. */
  20634. --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
  20635. --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
  20636. --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
  20637. --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
  20638. --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
  20639. --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
  20640. --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
  20641. }
  20642. :root .theme-dark,
  20643. :root.theme-dark {
  20644. --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
  20645. --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
  20646. --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
  20647. --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
  20648. --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
  20649. --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
  20650. --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
  20651. }
  20652. .ios {
  20653. --f7-treeview-item-height: 34px;
  20654. --f7-treeview-label-font-size: 17px;
  20655. --f7-treeview-icon-size: 24px;
  20656. }
  20657. .md {
  20658. --f7-treeview-item-height: 34px;
  20659. --f7-treeview-label-font-size: 16px;
  20660. --f7-treeview-icon-size: 24px;
  20661. }
  20662. .aurora {
  20663. --f7-treeview-item-height: 28px;
  20664. --f7-treeview-label-font-size: 14px;
  20665. --f7-treeview-icon-size: 20px;
  20666. }
  20667. .treeview-item-root {
  20668. padding-left: var(--f7-treeview-item-padding-left);
  20669. padding-right: var(--f7-treeview-item-padding-right);
  20670. min-height: var(--f7-treeview-item-height);
  20671. display: flex;
  20672. align-items: center;
  20673. justify-content: flex-start;
  20674. }
  20675. .treeview-item-content {
  20676. display: flex;
  20677. justify-content: flex-start;
  20678. align-items: center;
  20679. }
  20680. .treeview-item-content > i,
  20681. .treeview-item-content > .f7-icons,
  20682. .treeview-item-content > .material-icons {
  20683. font-size: var(--f7-treeview-icon-size);
  20684. color: var(--f7-treeview-icon-color);
  20685. }
  20686. .treeview-item-content:first-child {
  20687. margin-left: calc(var(--f7-treeview-toggle-size) + 5px);
  20688. }
  20689. .treeview-item-content > * + * {
  20690. margin-left: 5px;
  20691. }
  20692. .treeview-item-label {
  20693. font-size: var(--f7-treeview-label-font-size);
  20694. font-weight: var(--f7-treeview-label-font-weight);
  20695. color: var(--f7-treeview-label-text-color);
  20696. }
  20697. .treeview-toggle {
  20698. width: var(--f7-treeview-toggle-size);
  20699. height: var(--f7-treeview-toggle-size);
  20700. cursor: pointer;
  20701. border-radius: 4px;
  20702. background-color: rgba(0, 0, 0, 0);
  20703. transition-duration: 200ms;
  20704. position: relative;
  20705. margin-right: 5px;
  20706. }
  20707. .treeview-toggle.active-state {
  20708. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  20709. }
  20710. .treeview-toggle:after {
  20711. transition-duration: 200ms;
  20712. content: '';
  20713. position: absolute;
  20714. left: 50%;
  20715. top: 50%;
  20716. width: 0;
  20717. height: 0;
  20718. border-top: 5px solid transparent;
  20719. border-bottom: 5px solid transparent;
  20720. transform: translate(-50%, -50%);
  20721. border-left: 6px solid var(--f7-treeview-toggle-color);
  20722. }
  20723. .treeview-toggle-hidden {
  20724. opacity: 0;
  20725. pointer-events: none;
  20726. visibility: hidden;
  20727. }
  20728. .treeview-preloader {
  20729. --f7-preloader-size: var(--f7-treeview-toggle-size);
  20730. margin-right: calc(-1 * var(--f7-treeview-toggle-size));
  20731. }
  20732. .treeview-item-children {
  20733. display: none;
  20734. }
  20735. .treeview-item-opened > .treeview-item-children {
  20736. display: block;
  20737. }
  20738. .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
  20739. transform: translate(-50%, -50%) rotate(90deg);
  20740. }
  20741. a.treeview-item-root {
  20742. color: var(--f7-treeview-label-text-color);
  20743. }
  20744. .treeview-item-selectable > .treeview-item-root,
  20745. .treeview-item-selectable.treeview-item-root {
  20746. cursor: pointer;
  20747. transition-duration: 150ms;
  20748. }
  20749. a.treeview-item-root {
  20750. transition-duration: 150ms;
  20751. }
  20752. a.treeview-item-root.active-state {
  20753. background: var(--f7-treeview-link-pressed-bg-color);
  20754. }
  20755. .treeview-item-toggle > .treeview-item-root,
  20756. .treeview-item-toggle.treeview-item-root {
  20757. cursor: pointer;
  20758. }
  20759. .treeview-item-selected > .treeview-item-root,
  20760. .treeview-item-selected.treeview-item-root {
  20761. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  20762. }
  20763. .treeview-item .treeview-item .treeview-item-root {
  20764. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
  20765. }
  20766. .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20767. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
  20768. }
  20769. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20770. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
  20771. }
  20772. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20773. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
  20774. }
  20775. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20776. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
  20777. }
  20778. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20779. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
  20780. }
  20781. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20782. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
  20783. }
  20784. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20785. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
  20786. }
  20787. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20788. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
  20789. }
  20790. .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
  20791. padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
  20792. }
  20793. .aurora .treeview-toggle:hover {
  20794. background-color: var(--f7-treeview-toggle-hover-bg-color);
  20795. }
  20796. .aurora .treeview-toggle.active-state {
  20797. background-color: var(--f7-treeview-toggle-pressed-bg-color);
  20798. }
  20799. .aurora .treeview-item-selectable > .treeview-item-root:hover,
  20800. .aurora .treeview-item-selectable.treeview-item-root:hover {
  20801. background: var(--f7-treeview-selectable-hover-bg-color);
  20802. }
  20803. .aurora a.treeview-item-root:hover {
  20804. background: var(--f7-treeview-link-hover-bg-color);
  20805. }
  20806. .aurora a.treeview-item-root.active-state {
  20807. background: var(--f7-treeview-link-pressed-bg-color);
  20808. }
  20809. .aurora .treeview-item-selected > .treeview-item-root:hover,
  20810. .aurora .treeview-item-selected.treeview-item-root:hover {
  20811. background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
  20812. }
  20813. /* === Stepper === */
  20814. :root {
  20815. --f7-text-editor-font-size: inherit;
  20816. --f7-text-editor-font-weight: inherit;
  20817. --f7-text-editor-border-width: 1px;
  20818. --f7-text-editor-height: 250px;
  20819. --f7-text-editor-margin: 16px;
  20820. --f7-text-editor-padding: 8px;
  20821. --f7-text-editor-button-bg-color: transparent;
  20822. --f7-text-editor-button-size: 28px;
  20823. --f7-text-editor-button-icon-size: 20px;
  20824. --f7-text-editor-button-margin: 2px;
  20825. --f7-text-editor-button-border-radius: 2px;
  20826. --f7-text-editor-text-color: #000;
  20827. --f7-text-editor-bg-color: #fff;
  20828. --f7-text-editor-border-color: rgba(0, 0, 0, 0.1);
  20829. --f7-text-editor-toolbar-bg-color: #fff;
  20830. --f7-text-editor-button-text-color: #333;
  20831. --f7-text-editor-button-divider-color: rgba(0, 0, 0, 0.15);
  20832. --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
  20833. }
  20834. :root .theme-dark,
  20835. :root.theme-dark {
  20836. --f7-text-editor-bg-color: #121212;
  20837. --f7-text-editor-border-color: rgba(255, 255, 255, 0.1);
  20838. --f7-text-editor-toolbar-bg-color: #202020;
  20839. --f7-text-editor-text-color: #fff;
  20840. --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
  20841. --f7-text-editor-button-text-color: #fff;
  20842. --f7-text-editor-button-divider-color: rgba(255, 255, 255, 0.15);
  20843. }
  20844. .ios {
  20845. --f7-text-editor-toolbar-padding: 6px;
  20846. --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
  20847. }
  20848. .ios .theme-dark,
  20849. .ios.theme-dark {
  20850. --f7-text-editor-toolbar-bg-color: #121212;
  20851. --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
  20852. }
  20853. .md {
  20854. --f7-text-editor-toolbar-padding: 8px;
  20855. --f7-text-editor-toolbar-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.25);
  20856. }
  20857. .aurora {
  20858. --f7-text-editor-toolbar-padding: 3px;
  20859. --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
  20860. }
  20861. .aurora .theme-dark,
  20862. .aurora.theme-dark {
  20863. --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
  20864. }
  20865. .text-editor {
  20866. margin: var(--f7-text-editor-margin);
  20867. background-color: var(--f7-text-editor-bg-color);
  20868. display: block;
  20869. position: relative;
  20870. border: var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);
  20871. display: flex;
  20872. flex-direction: column;
  20873. align-items: stretch;
  20874. height: var(--f7-text-editor-height);
  20875. box-sizing: border-box;
  20876. }
  20877. .text-editor.text-editor-resizable {
  20878. height: auto;
  20879. }
  20880. .text-editor-toolbar {
  20881. display: flex;
  20882. flex-wrap: wrap;
  20883. background: var(--f7-text-editor-toolbar-bg-color);
  20884. z-index: 100;
  20885. position: relative;
  20886. position: -webkit-sticky;
  20887. position: sticky;
  20888. left: 0;
  20889. top: 0;
  20890. padding: var(--f7-text-editor-toolbar-padding);
  20891. flex-shrink: 0;
  20892. box-shadow: var(--f7-text-editor-toolbar-box-shadow);
  20893. box-sizing: border-box;
  20894. }
  20895. .text-editor-toolbar:after {
  20896. content: '';
  20897. position: absolute;
  20898. background-color: var(--f7-text-editor-toolbar-border-color);
  20899. display: block;
  20900. z-index: 15;
  20901. top: auto;
  20902. right: auto;
  20903. bottom: 0;
  20904. left: 0;
  20905. height: 1px;
  20906. width: 100%;
  20907. transform-origin: 50% 100%;
  20908. transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
  20909. }
  20910. button.text-editor-button {
  20911. -webkit-appearance: none;
  20912. -moz-appearance: none;
  20913. appearance: none;
  20914. border: none;
  20915. padding: 0;
  20916. margin: 0;
  20917. outline: 0;
  20918. font-family: inherit;
  20919. background: transparent;
  20920. cursor: pointer;
  20921. box-shadow: none;
  20922. border-radius: var(--f7-text-editor-button-border-radius);
  20923. position: relative;
  20924. z-index: 1;
  20925. display: flex;
  20926. width: auto;
  20927. overflow: hidden;
  20928. width: var(--f7-text-editor-button-size);
  20929. height: var(--f7-text-editor-button-size);
  20930. align-items: center;
  20931. justify-content: center;
  20932. margin: var(--f7-text-editor-button-margin);
  20933. box-sizing: border-box;
  20934. color: var(--f7-text-editor-button-text-color);
  20935. background-color: var(--f7-text-editor-button-bg-color);
  20936. flex-shrink: 0;
  20937. }
  20938. button.text-editor-button i {
  20939. font-size: var(--f7-text-editor-button-icon-size);
  20940. font-style: normal;
  20941. }
  20942. button.text-editor-button i sup,
  20943. button.text-editor-button i sub {
  20944. font-size: 60%;
  20945. }
  20946. .text-editor-button-divider {
  20947. width: 1px;
  20948. background: var(--f7-text-editor-button-divider-color);
  20949. margin: 0 2px;
  20950. flex-shrink: 0;
  20951. }
  20952. .text-editor-content {
  20953. -webkit-user-modify: read-write;
  20954. -webkit-appearance: none;
  20955. -moz-appearance: none;
  20956. appearance: none;
  20957. border: none;
  20958. outline: 0;
  20959. height: 100%;
  20960. -webkit-user-select: text;
  20961. -moz-user-select: text;
  20962. user-select: text;
  20963. padding: var(--f7-text-editor-padding);
  20964. overflow: auto;
  20965. flex-shrink: 10;
  20966. box-sizing: border-box;
  20967. color: var(--f7-text-editor-text-color);
  20968. font-size: var(--f7-text-editor-font-size);
  20969. font-weight: var(--f7-text-editor-font-weight);
  20970. }
  20971. .text-editor-content .text-editor-placeholder {
  20972. pointer-events: none;
  20973. color: var(--f7-text-editor-placeholder-color);
  20974. }
  20975. .text-editor-content img {
  20976. max-width: 100%;
  20977. }
  20978. .text-editor-content a {
  20979. pointer-events: none;
  20980. }
  20981. .text-editor-popover {
  20982. z-index: 12500;
  20983. width: auto;
  20984. max-width: 80vw;
  20985. }
  20986. .text-editor-popover .popover-inner {
  20987. display: flex;
  20988. flex-wrap: wrap;
  20989. padding: 3px;
  20990. }
  20991. .text-editor-keyboard-toolbar {
  20992. position: absolute;
  20993. z-index: 6000;
  20994. --f7-safe-area-bottom: 0px;
  20995. }
  20996. .text-editor-keyboard-toolbar .toolbar-inner {
  20997. justify-content: flex-start !important;
  20998. overflow: auto;
  20999. -webkit-overflow-scrolling: touch;
  21000. }
  21001. .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar {
  21002. display: none;
  21003. }
  21004. .text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider {
  21005. height: 100%;
  21006. }
  21007. .item-input .text-editor {
  21008. border: none;
  21009. margin: 0;
  21010. background-color: var(--f7-input-bg-color, transparent);
  21011. }
  21012. .item-input .text-editor-content {
  21013. padding-top: var(--f7-textarea-padding-vertical);
  21014. padding-bottom: var(--f7-textarea-padding-vertical);
  21015. padding-left: var(--f7-input-padding-left);
  21016. padding-right: var(--f7-input-padding-right);
  21017. color: var(--f7-input-text-color);
  21018. font-size: var(--f7-input-font-size);
  21019. }
  21020. .item-input .text-editor-toolbar {
  21021. box-shadow: none;
  21022. }
  21023. .item-input .text-editor-toolbar:after {
  21024. display: none !important;
  21025. }
  21026. .item-input-outline .text-editor-content {
  21027. border-radius: var(--f7-input-outline-border-radius);
  21028. padding-left: var(--f7-input-outline-padding-horizontal);
  21029. padding-right: var(--f7-input-outline-padding-horizontal);
  21030. }
  21031. .ios button.text-editor-button {
  21032. transition: opacity 300ms;
  21033. }
  21034. .ios button.text-editor-button.active-state {
  21035. opacity: 0.3;
  21036. transition-duration: 0ms;
  21037. }
  21038. .md button.text-editor-button:before {
  21039. content: '';
  21040. width: 152%;
  21041. height: 152%;
  21042. position: absolute;
  21043. left: -26%;
  21044. top: -26%;
  21045. background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
  21046. background-repeat: no-repeat;
  21047. background-position: center;
  21048. background-size: 100% 100%;
  21049. opacity: 0;
  21050. pointer-events: none;
  21051. transition-duration: 600ms;
  21052. }
  21053. .md button.text-editor-button.active-state:before {
  21054. opacity: 1;
  21055. transition-duration: 150ms;
  21056. }
  21057. .md .text-editor-keyboard-toolbar .toolbar-inner {
  21058. padding-left: 8px;
  21059. padding-right: 8px;
  21060. }
  21061. .aurora button.text-editor-button {
  21062. transition: opacity 300ms;
  21063. }
  21064. .aurora button.text-editor-button.active-state {
  21065. opacity: 0.3;
  21066. transition-duration: 0ms;
  21067. }
  21068. /* === Elevation === */
  21069. :root {
  21070. --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  21071. --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
  21072. 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  21073. 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  21074. --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  21075. 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  21076. 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  21077. --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
  21078. 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  21079. 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  21080. --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
  21081. 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  21082. 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  21083. --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  21084. 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
  21085. 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  21086. --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
  21087. 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  21088. 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  21089. --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
  21090. 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
  21091. 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
  21092. --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
  21093. 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  21094. 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  21095. --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
  21096. 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  21097. 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
  21098. --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
  21099. 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
  21100. 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  21101. --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
  21102. 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
  21103. 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
  21104. --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  21105. 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  21106. 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  21107. --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
  21108. 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
  21109. 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
  21110. --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
  21111. 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
  21112. 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
  21113. --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
  21114. 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
  21115. 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
  21116. --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
  21117. 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
  21118. 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  21119. --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
  21120. 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
  21121. 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
  21122. --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
  21123. 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
  21124. 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
  21125. --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
  21126. 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
  21127. 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
  21128. --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  21129. 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
  21130. 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
  21131. --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
  21132. 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
  21133. 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
  21134. --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
  21135. 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
  21136. 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
  21137. --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
  21138. 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
  21139. 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
  21140. --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
  21141. 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  21142. 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  21143. }
  21144. .elevation-0 {
  21145. box-shadow: var(--f7-elevation-0) !important;
  21146. }
  21147. .elevation-1 {
  21148. box-shadow: var(--f7-elevation-1) !important;
  21149. }
  21150. .elevation-2 {
  21151. box-shadow: var(--f7-elevation-2) !important;
  21152. }
  21153. .elevation-3 {
  21154. box-shadow: var(--f7-elevation-3) !important;
  21155. }
  21156. .elevation-4 {
  21157. box-shadow: var(--f7-elevation-4) !important;
  21158. }
  21159. .elevation-5 {
  21160. box-shadow: var(--f7-elevation-5) !important;
  21161. }
  21162. .elevation-6 {
  21163. box-shadow: var(--f7-elevation-6) !important;
  21164. }
  21165. .elevation-7 {
  21166. box-shadow: var(--f7-elevation-7) !important;
  21167. }
  21168. .elevation-8 {
  21169. box-shadow: var(--f7-elevation-8) !important;
  21170. }
  21171. .elevation-9 {
  21172. box-shadow: var(--f7-elevation-9) !important;
  21173. }
  21174. .elevation-10 {
  21175. box-shadow: var(--f7-elevation-10) !important;
  21176. }
  21177. .elevation-11 {
  21178. box-shadow: var(--f7-elevation-11) !important;
  21179. }
  21180. .elevation-12 {
  21181. box-shadow: var(--f7-elevation-12) !important;
  21182. }
  21183. .elevation-13 {
  21184. box-shadow: var(--f7-elevation-13) !important;
  21185. }
  21186. .elevation-14 {
  21187. box-shadow: var(--f7-elevation-14) !important;
  21188. }
  21189. .elevation-15 {
  21190. box-shadow: var(--f7-elevation-15) !important;
  21191. }
  21192. .elevation-16 {
  21193. box-shadow: var(--f7-elevation-16) !important;
  21194. }
  21195. .elevation-17 {
  21196. box-shadow: var(--f7-elevation-17) !important;
  21197. }
  21198. .elevation-18 {
  21199. box-shadow: var(--f7-elevation-18) !important;
  21200. }
  21201. .elevation-19 {
  21202. box-shadow: var(--f7-elevation-19) !important;
  21203. }
  21204. .elevation-20 {
  21205. box-shadow: var(--f7-elevation-20) !important;
  21206. }
  21207. .elevation-21 {
  21208. box-shadow: var(--f7-elevation-21) !important;
  21209. }
  21210. .elevation-22 {
  21211. box-shadow: var(--f7-elevation-22) !important;
  21212. }
  21213. .elevation-23 {
  21214. box-shadow: var(--f7-elevation-23) !important;
  21215. }
  21216. .elevation-24 {
  21217. box-shadow: var(--f7-elevation-24) !important;
  21218. }
  21219. .device-desktop .elevation-hover-0:hover {
  21220. box-shadow: var(--f7-elevation-0) !important;
  21221. }
  21222. .device-desktop .elevation-hover-1:hover {
  21223. box-shadow: var(--f7-elevation-1) !important;
  21224. }
  21225. .device-desktop .elevation-hover-2:hover {
  21226. box-shadow: var(--f7-elevation-2) !important;
  21227. }
  21228. .device-desktop .elevation-hover-3:hover {
  21229. box-shadow: var(--f7-elevation-3) !important;
  21230. }
  21231. .device-desktop .elevation-hover-4:hover {
  21232. box-shadow: var(--f7-elevation-4) !important;
  21233. }
  21234. .device-desktop .elevation-hover-5:hover {
  21235. box-shadow: var(--f7-elevation-5) !important;
  21236. }
  21237. .device-desktop .elevation-hover-6:hover {
  21238. box-shadow: var(--f7-elevation-6) !important;
  21239. }
  21240. .device-desktop .elevation-hover-7:hover {
  21241. box-shadow: var(--f7-elevation-7) !important;
  21242. }
  21243. .device-desktop .elevation-hover-8:hover {
  21244. box-shadow: var(--f7-elevation-8) !important;
  21245. }
  21246. .device-desktop .elevation-hover-9:hover {
  21247. box-shadow: var(--f7-elevation-9) !important;
  21248. }
  21249. .device-desktop .elevation-hover-10:hover {
  21250. box-shadow: var(--f7-elevation-10) !important;
  21251. }
  21252. .device-desktop .elevation-hover-11:hover {
  21253. box-shadow: var(--f7-elevation-11) !important;
  21254. }
  21255. .device-desktop .elevation-hover-12:hover {
  21256. box-shadow: var(--f7-elevation-12) !important;
  21257. }
  21258. .device-desktop .elevation-hover-13:hover {
  21259. box-shadow: var(--f7-elevation-13) !important;
  21260. }
  21261. .device-desktop .elevation-hover-14:hover {
  21262. box-shadow: var(--f7-elevation-14) !important;
  21263. }
  21264. .device-desktop .elevation-hover-15:hover {
  21265. box-shadow: var(--f7-elevation-15) !important;
  21266. }
  21267. .device-desktop .elevation-hover-16:hover {
  21268. box-shadow: var(--f7-elevation-16) !important;
  21269. }
  21270. .device-desktop .elevation-hover-17:hover {
  21271. box-shadow: var(--f7-elevation-17) !important;
  21272. }
  21273. .device-desktop .elevation-hover-18:hover {
  21274. box-shadow: var(--f7-elevation-18) !important;
  21275. }
  21276. .device-desktop .elevation-hover-19:hover {
  21277. box-shadow: var(--f7-elevation-19) !important;
  21278. }
  21279. .device-desktop .elevation-hover-20:hover {
  21280. box-shadow: var(--f7-elevation-20) !important;
  21281. }
  21282. .device-desktop .elevation-hover-21:hover {
  21283. box-shadow: var(--f7-elevation-21) !important;
  21284. }
  21285. .device-desktop .elevation-hover-22:hover {
  21286. box-shadow: var(--f7-elevation-22) !important;
  21287. }
  21288. .device-desktop .elevation-hover-23:hover {
  21289. box-shadow: var(--f7-elevation-23) !important;
  21290. }
  21291. .device-desktop .elevation-hover-24:hover {
  21292. box-shadow: var(--f7-elevation-24) !important;
  21293. }
  21294. .active-state.elevation-pressed-0,
  21295. .device-desktop .active-state.elevation-pressed-0 {
  21296. box-shadow: var(--f7-elevation-0) !important;
  21297. }
  21298. .active-state.elevation-pressed-1,
  21299. .device-desktop .active-state.elevation-pressed-1 {
  21300. box-shadow: var(--f7-elevation-1) !important;
  21301. }
  21302. .active-state.elevation-pressed-2,
  21303. .device-desktop .active-state.elevation-pressed-2 {
  21304. box-shadow: var(--f7-elevation-2) !important;
  21305. }
  21306. .active-state.elevation-pressed-3,
  21307. .device-desktop .active-state.elevation-pressed-3 {
  21308. box-shadow: var(--f7-elevation-3) !important;
  21309. }
  21310. .active-state.elevation-pressed-4,
  21311. .device-desktop .active-state.elevation-pressed-4 {
  21312. box-shadow: var(--f7-elevation-4) !important;
  21313. }
  21314. .active-state.elevation-pressed-5,
  21315. .device-desktop .active-state.elevation-pressed-5 {
  21316. box-shadow: var(--f7-elevation-5) !important;
  21317. }
  21318. .active-state.elevation-pressed-6,
  21319. .device-desktop .active-state.elevation-pressed-6 {
  21320. box-shadow: var(--f7-elevation-6) !important;
  21321. }
  21322. .active-state.elevation-pressed-7,
  21323. .device-desktop .active-state.elevation-pressed-7 {
  21324. box-shadow: var(--f7-elevation-7) !important;
  21325. }
  21326. .active-state.elevation-pressed-8,
  21327. .device-desktop .active-state.elevation-pressed-8 {
  21328. box-shadow: var(--f7-elevation-8) !important;
  21329. }
  21330. .active-state.elevation-pressed-9,
  21331. .device-desktop .active-state.elevation-pressed-9 {
  21332. box-shadow: var(--f7-elevation-9) !important;
  21333. }
  21334. .active-state.elevation-pressed-10,
  21335. .device-desktop .active-state.elevation-pressed-10 {
  21336. box-shadow: var(--f7-elevation-10) !important;
  21337. }
  21338. .active-state.elevation-pressed-11,
  21339. .device-desktop .active-state.elevation-pressed-11 {
  21340. box-shadow: var(--f7-elevation-11) !important;
  21341. }
  21342. .active-state.elevation-pressed-12,
  21343. .device-desktop .active-state.elevation-pressed-12 {
  21344. box-shadow: var(--f7-elevation-12) !important;
  21345. }
  21346. .active-state.elevation-pressed-13,
  21347. .device-desktop .active-state.elevation-pressed-13 {
  21348. box-shadow: var(--f7-elevation-13) !important;
  21349. }
  21350. .active-state.elevation-pressed-14,
  21351. .device-desktop .active-state.elevation-pressed-14 {
  21352. box-shadow: var(--f7-elevation-14) !important;
  21353. }
  21354. .active-state.elevation-pressed-15,
  21355. .device-desktop .active-state.elevation-pressed-15 {
  21356. box-shadow: var(--f7-elevation-15) !important;
  21357. }
  21358. .active-state.elevation-pressed-16,
  21359. .device-desktop .active-state.elevation-pressed-16 {
  21360. box-shadow: var(--f7-elevation-16) !important;
  21361. }
  21362. .active-state.elevation-pressed-17,
  21363. .device-desktop .active-state.elevation-pressed-17 {
  21364. box-shadow: var(--f7-elevation-17) !important;
  21365. }
  21366. .active-state.elevation-pressed-18,
  21367. .device-desktop .active-state.elevation-pressed-18 {
  21368. box-shadow: var(--f7-elevation-18) !important;
  21369. }
  21370. .active-state.elevation-pressed-19,
  21371. .device-desktop .active-state.elevation-pressed-19 {
  21372. box-shadow: var(--f7-elevation-19) !important;
  21373. }
  21374. .active-state.elevation-pressed-20,
  21375. .device-desktop .active-state.elevation-pressed-20 {
  21376. box-shadow: var(--f7-elevation-20) !important;
  21377. }
  21378. .active-state.elevation-pressed-21,
  21379. .device-desktop .active-state.elevation-pressed-21 {
  21380. box-shadow: var(--f7-elevation-21) !important;
  21381. }
  21382. .active-state.elevation-pressed-22,
  21383. .device-desktop .active-state.elevation-pressed-22 {
  21384. box-shadow: var(--f7-elevation-22) !important;
  21385. }
  21386. .active-state.elevation-pressed-23,
  21387. .device-desktop .active-state.elevation-pressed-23 {
  21388. box-shadow: var(--f7-elevation-23) !important;
  21389. }
  21390. .active-state.elevation-pressed-24,
  21391. .device-desktop .active-state.elevation-pressed-24 {
  21392. box-shadow: var(--f7-elevation-24) !important;
  21393. }
  21394. .elevation-transition-100 {
  21395. transition-duration: 100ms;
  21396. transition-property: box-shadow;
  21397. }
  21398. .elevation-transition,
  21399. .elevation-transition-200 {
  21400. transition-duration: 200ms;
  21401. transition-property: box-shadow;
  21402. }
  21403. .elevation-transition-300 {
  21404. transition-duration: 300ms;
  21405. transition-property: box-shadow;
  21406. }
  21407. .elevation-transition-400 {
  21408. transition-duration: 400ms;
  21409. transition-property: box-shadow;
  21410. }
  21411. .elevation-transition-500 {
  21412. transition-duration: 500ms;
  21413. transition-property: box-shadow;
  21414. }
  21415. /* === Typography === */
  21416. :root {
  21417. --f7-typography-padding: 16px;
  21418. --f7-typography-margin: 16px;
  21419. }
  21420. .display-flex {
  21421. display: flex !important;
  21422. }
  21423. .display-block {
  21424. display: block !important;
  21425. }
  21426. .display-inline-flex {
  21427. display: inline-flex !important;
  21428. }
  21429. .display-inline-block {
  21430. display: inline-block !important;
  21431. }
  21432. .display-inline {
  21433. display: inline !important;
  21434. }
  21435. .display-none {
  21436. display: none !important;
  21437. }
  21438. .flex-shrink-0 {
  21439. flex-shrink: 0 !important;
  21440. }
  21441. .flex-shrink-1 {
  21442. flex-shrink: 1 !important;
  21443. }
  21444. .flex-shrink-2 {
  21445. flex-shrink: 2 !important;
  21446. }
  21447. .flex-shrink-3 {
  21448. flex-shrink: 3 !important;
  21449. }
  21450. .flex-shrink-4 {
  21451. flex-shrink: 4 !important;
  21452. }
  21453. .flex-shrink-5 {
  21454. flex-shrink: 5 !important;
  21455. }
  21456. .flex-shrink-6 {
  21457. flex-shrink: 6 !important;
  21458. }
  21459. .flex-shrink-7 {
  21460. flex-shrink: 7 !important;
  21461. }
  21462. .flex-shrink-8 {
  21463. flex-shrink: 8 !important;
  21464. }
  21465. .flex-shrink-9 {
  21466. flex-shrink: 9 !important;
  21467. }
  21468. .flex-shrink-10 {
  21469. flex-shrink: 10 !important;
  21470. }
  21471. .flex-direction-row {
  21472. flex-direction: row !important;
  21473. }
  21474. .flex-direction-row-reverse {
  21475. flex-direction: row-reverse !important;
  21476. }
  21477. .flex-direction-column {
  21478. flex-direction: column !important;
  21479. }
  21480. .flex-direction-column-reverse {
  21481. flex-direction: column-reverse !important;
  21482. }
  21483. .justify-content-flex-start {
  21484. justify-content: flex-start !important;
  21485. }
  21486. .justify-content-center {
  21487. justify-content: center !important;
  21488. }
  21489. .justify-content-flex-end {
  21490. justify-content: flex-end !important;
  21491. }
  21492. .justify-content-space-between {
  21493. justify-content: space-between !important;
  21494. }
  21495. .justify-content-space-around {
  21496. justify-content: space-around !important;
  21497. }
  21498. .justify-content-space-evenly {
  21499. justify-content: space-evenly !important;
  21500. }
  21501. .justify-content-stretch {
  21502. justify-content: stretch !important;
  21503. }
  21504. .justify-content-start {
  21505. justify-content: start !important;
  21506. }
  21507. .justify-content-end {
  21508. justify-content: end !important;
  21509. }
  21510. .justify-content-left {
  21511. justify-content: left !important;
  21512. }
  21513. .justify-content-right {
  21514. justify-content: right !important;
  21515. }
  21516. .align-content-flex-start {
  21517. align-content: flex-start !important;
  21518. }
  21519. .align-content-flex-end {
  21520. align-content: flex-end !important;
  21521. }
  21522. .align-content-center {
  21523. align-content: center !important;
  21524. }
  21525. .align-content-space-between {
  21526. align-content: space-between !important;
  21527. }
  21528. .align-content-space-around {
  21529. align-content: space-around !important;
  21530. }
  21531. .align-content-stretch {
  21532. align-content: stretch !important;
  21533. }
  21534. .align-items-baseline {
  21535. align-items: baseline !important;
  21536. }
  21537. .align-items-flex-start {
  21538. align-items: flex-start !important;
  21539. }
  21540. .align-items-flex-end {
  21541. align-items: flex-end !important;
  21542. }
  21543. .align-items-center {
  21544. align-items: center !important;
  21545. }
  21546. .align-items-stretch {
  21547. align-items: stretch !important;
  21548. }
  21549. .align-self-flex-start {
  21550. align-self: flex-start !important;
  21551. }
  21552. .align-self-flex-end {
  21553. align-self: flex-end !important;
  21554. }
  21555. .align-self-center {
  21556. align-self: center !important;
  21557. }
  21558. .align-self-stretch {
  21559. align-self: stretch !important;
  21560. }
  21561. .text-align-left {
  21562. text-align: left !important;
  21563. }
  21564. .text-align-center {
  21565. text-align: center !important;
  21566. }
  21567. .text-align-right {
  21568. text-align: right !important;
  21569. }
  21570. .text-align-justify {
  21571. text-align: justify !important;
  21572. }
  21573. .float-left {
  21574. float: left !important;
  21575. }
  21576. .float-right {
  21577. float: right !important;
  21578. }
  21579. .float-none {
  21580. float: none !important;
  21581. }
  21582. .vertical-align-bottom {
  21583. vertical-align: bottom !important;
  21584. }
  21585. .vertical-align-middle {
  21586. vertical-align: middle !important;
  21587. }
  21588. .vertical-align-top {
  21589. vertical-align: top !important;
  21590. }
  21591. .no-padding {
  21592. padding: 0 !important;
  21593. }
  21594. .no-padding-left {
  21595. padding-left: 0 !important;
  21596. }
  21597. .no-padding-right {
  21598. padding-right: 0 !important;
  21599. }
  21600. .no-padding-horizontal {
  21601. padding-left: 0 !important;
  21602. padding-right: 0 !important;
  21603. }
  21604. .no-padding-top {
  21605. padding-top: 0 !important;
  21606. }
  21607. .no-padding-bottom {
  21608. padding-bottom: 0 !important;
  21609. }
  21610. .no-padding-vertical {
  21611. padding-top: 0 !important;
  21612. padding-bottom: 0 !important;
  21613. }
  21614. .no-margin {
  21615. margin: 0 !important;
  21616. }
  21617. .no-margin-left {
  21618. margin-left: 0 !important;
  21619. }
  21620. .no-margin-right {
  21621. margin-right: 0 !important;
  21622. }
  21623. .no-margin-horizontal {
  21624. margin-left: 0 !important;
  21625. margin-right: 0 !important;
  21626. }
  21627. .no-margin-top {
  21628. margin-top: 0 !important;
  21629. }
  21630. .no-margin-bottom {
  21631. margin-bottom: 0 !important;
  21632. }
  21633. .no-margin-vertical {
  21634. margin-top: 0 !important;
  21635. margin-bottom: 0 !important;
  21636. }
  21637. .width-auto {
  21638. width: auto !important;
  21639. }
  21640. .width-100 {
  21641. width: 100% !important;
  21642. }
  21643. .padding {
  21644. padding: var(--f7-typography-padding) !important;
  21645. }
  21646. .padding-half {
  21647. padding: calc(var(--f7-typography-padding) / 2) !important;
  21648. }
  21649. .padding-top {
  21650. padding-top: var(--f7-typography-padding) !important;
  21651. }
  21652. .padding-top-half {
  21653. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  21654. }
  21655. .padding-bottom {
  21656. padding-bottom: var(--f7-typography-padding) !important;
  21657. }
  21658. .padding-bottom-half {
  21659. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  21660. }
  21661. .padding-left {
  21662. padding-left: var(--f7-typography-padding) !important;
  21663. }
  21664. .padding-left-half {
  21665. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  21666. }
  21667. .padding-right {
  21668. padding-right: var(--f7-typography-padding) !important;
  21669. }
  21670. .padding-right-half {
  21671. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  21672. }
  21673. .padding-vertical {
  21674. padding-top: var(--f7-typography-padding) !important;
  21675. padding-bottom: var(--f7-typography-padding) !important;
  21676. }
  21677. .padding-vertical-half {
  21678. padding-top: calc(var(--f7-typography-padding) / 2) !important;
  21679. padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
  21680. }
  21681. .padding-horizontal {
  21682. padding-left: var(--f7-typography-padding) !important;
  21683. padding-right: var(--f7-typography-padding) !important;
  21684. }
  21685. .padding-horizontal-half {
  21686. padding-left: calc(var(--f7-typography-padding) / 2) !important;
  21687. padding-right: calc(var(--f7-typography-padding) / 2) !important;
  21688. }
  21689. .margin {
  21690. margin: var(--f7-typography-margin) !important;
  21691. }
  21692. .margin-half {
  21693. margin: calc(var(--f7-typography-margin) / 2) !important;
  21694. }
  21695. .margin-top {
  21696. margin-top: var(--f7-typography-margin) !important;
  21697. }
  21698. .margin-top-half {
  21699. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  21700. }
  21701. .margin-bottom {
  21702. margin-bottom: var(--f7-typography-margin) !important;
  21703. }
  21704. .margin-bottom-half {
  21705. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  21706. }
  21707. .margin-left {
  21708. margin-left: var(--f7-typography-margin) !important;
  21709. }
  21710. .margin-left-half {
  21711. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  21712. }
  21713. .margin-right {
  21714. margin-right: var(--f7-typography-margin) !important;
  21715. }
  21716. .margin-right-half {
  21717. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  21718. }
  21719. .margin-vertical {
  21720. margin-top: var(--f7-typography-margin) !important;
  21721. margin-bottom: var(--f7-typography-margin) !important;
  21722. }
  21723. .margin-vertical-half {
  21724. margin-top: calc(var(--f7-typography-margin) / 2) !important;
  21725. margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
  21726. }
  21727. .margin-horizontal {
  21728. margin-left: var(--f7-typography-margin) !important;
  21729. margin-right: var(--f7-typography-margin) !important;
  21730. }
  21731. .margin-horizontal-half {
  21732. margin-left: calc(var(--f7-typography-margin) / 2) !important;
  21733. margin-right: calc(var(--f7-typography-margin) / 2) !important;
  21734. }
  21735. [class*="text-color-"] {
  21736. color: var(--f7-theme-color-text-color) !important;
  21737. }
  21738. [class*="bg-color-"] {
  21739. background-color: var(--f7-theme-color-bg-color) !important;
  21740. }
  21741. [class*="border-color-"] {
  21742. border-color: var(--f7-theme-color-border-color) !important;
  21743. }
  21744. iframe#viAd {
  21745. z-index: 12900 !important;
  21746. background: #000 !important;
  21747. }
  21748. .vi-overlay {
  21749. background: rgba(0, 0, 0, 0.85);
  21750. z-index: 13100;
  21751. position: absolute;
  21752. left: 0%;
  21753. top: 0%;
  21754. width: 100%;
  21755. height: 100%;
  21756. border-radius: 3px;
  21757. display: flex;
  21758. justify-content: center;
  21759. flex-direction: column;
  21760. align-items: center;
  21761. align-content: center;
  21762. text-align: center;
  21763. -webkit-user-select: none;
  21764. -moz-user-select: none;
  21765. user-select: none;
  21766. }
  21767. @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  21768. .vi-overlay {
  21769. background: rgba(0, 0, 0, 0.65);
  21770. -webkit-backdrop-filter: blur(10px);
  21771. backdrop-filter: blur(10px);
  21772. }
  21773. }
  21774. .vi-overlay .vi-overlay-text {
  21775. text-align: center;
  21776. color: #fff;
  21777. max-width: 80%;
  21778. }
  21779. .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
  21780. margin-top: 15px;
  21781. }
  21782. .vi-overlay .vi-overlay-play-button {
  21783. width: 44px;
  21784. height: 44px;
  21785. border-radius: 50%;
  21786. border: 2px solid #fff;
  21787. position: relative;
  21788. }
  21789. .vi-overlay .vi-overlay-play-button.active-state {
  21790. opacity: 0.55;
  21791. }
  21792. .vi-overlay .vi-overlay-play-button:before {
  21793. content: '';
  21794. width: 0;
  21795. height: 0;
  21796. border-top: 8px solid transparent;
  21797. border-bottom: 8px solid transparent;
  21798. border-left: 14px solid #fff;
  21799. position: absolute;
  21800. left: 50%;
  21801. top: 50%;
  21802. margin-left: 2px;
  21803. transform: translate(-50%, -50%);
  21804. }